render() {
		return v('div', {}, [
			w(Checkbox, {
				label: 'Use Dojo Theme',
				onChange: this.themeChange
			}),
			w(Calendar, {
				month: this._month,
				selectedDate: this._selectedDate,
				theme: this._theme,
				year: this._year,
				onMonthChange: (month: number) => {
					this._month = month;
					this.invalidate();
				},
				onYearChange: (year: number) => {
					this._year = year;
					this.invalidate();
				},
				onDateSelect: (date: Date) => {
					this._selectedDate = date;
					this.invalidate();
				}
			}),
			this._selectedDate ? v('p', [ `Selected Date: ${this._selectedDate.toDateString()}` ]) : null
		]);
	}

	protected render(): DNode {
		const {
			aria = {},
			value,
			showOutput = true,
			max = 100,
			min = 0,
			id
		} = this.properties;

		const percent = Math.round(((value - min) / (max - min)) * 100);
		const output = this._output(value, percent);

		return v('div', { classes: this.theme(css.root) }, [
			v('div', {
				...formatAriaProperties(aria),
				classes: this.theme(css.bar),
				role: 'progressbar',
				'aria-valuemin': `${min}`,
				'aria-valuemax': `${max}`,
				'aria-valuenow': `${value}`,
				'aria-valuetext': output,
				id
			}, this.renderProgress(percent)),
			showOutput ? v('span', { classes: this.theme(css.output) }, [ output ]) : null
		]);
	}

	render() {
		const { filter } = this.properties;
		const messages = this.localizeBundle(appBundle);

		return v('ul', { classes: this.theme(css.filters) }, [
			v('li', [
				w(Link, {
					key: 'all',
					classes: this.theme(filter === 'all' ? css.selected : null),
					to: 'view',
					isOutlet: true,
					params: { filter: 'all' }
				}, [ messages.filterAll ]),
				w(Link, {
					key: 'active',
					classes: this.theme(filter === 'active' ? css.selected : null),
					to: 'view',
					isOutlet: true,
					params: { filter: 'active' }
				}, [ messages.filterActive ]),
				w(Link, {
					key: 'completed',
					classes: this.theme(filter === 'completed' ? css.selected : null),
					to: 'view',
					isOutlet: true,
					params: { filter: 'completed' }
				}, [ messages.filterCompleted ])
			])
		]);
	}

	protected render() {
		const { view } = this.properties;

		return v('ul', {
			classes: this.theme(css.viewChooser)
		}, [
			v('li', [
				w(Link, {
					key: 'list',
					to: 'view',
					isOutlet: true,
					params: { view: 'list' },
					classes: this.theme([ css.list, view === 'list' ? css.active : null ])
				})
			]),
			v('li', [
				w(Link, {
					key: 'card',
					to: 'view',
					isOutlet: true,
					params: { view: 'card' },
					classes: this.theme([ css.cards, view === 'card' ? css.active : null ])
				})
			])
		]);
	}

	render(): DNode {
		const {
			forId,
			label
		} = this.properties;

		// assign string or object label properites with defaults
		let labelProps: LabelOptions;
		if (typeof label === 'string') {
			labelProps = assign({}, labelDefaults, { content: label });
		}
		else {
			labelProps = assign({}, labelDefaults, label);
		}

		// add label text node to children
		const labelText = v('span', {
			innerHTML: labelProps.content,
			classes: [ this.theme(css.labelText), labelProps.hidden ? baseCss.visuallyHidden : null ]
		});
		if (labelProps.before) {
			this.children.unshift(labelText);
		}
		else {
			this.children.push(labelText);
		}

		return v('label', {
			classes: this.theme(css.root),
			for: forId
		}, this.children);
	}

const expectedToggle = function(widget: Harness<Checkbox>, labels = false) {
	if (labels) {
		return [
			v('div', {
				key: 'offLabel',
				classes: css.offLabel,
				'aria-hidden': null
			}, [ 'off' ]),
			v('div', {
				key: 'toggle',
				classes: css.toggleSwitch
			}),
			v('div', {
				key: 'onLabel',
				classes: css.onLabel,
				'aria-hidden': 'true'
			}, [ 'on' ])
		];
	}

	return [
		null,
		v('div', {
			key: 'toggle',
			classes: css.toggleSwitch
		}),
		null
	];
};

const expectedVDom = function(args: any) {
	const {
		width,
		output,
		value,
		showOutput = true,
		max = 100,
		min = 0,
		id
	} = args;

	return v('div', { classes: css.root }, [
		v('div', {
			classes: css.bar,
			'aria-valuemax': `${max}`,
			'aria-valuemin': `${min}`,
			'aria-valuenow': `${value}`,
			'aria-valuetext': `${output}`,
			role: 'progressbar',
			id
		}, [
			v('div', {
				classes: css.progress,
				styles: {
					width: `${width}%`
				}
			})
		]),
		showOutput ? v('span', { classes: css.output }, [ output ]) : null
	]);
};

	protected render() {
		return v('div', { classes: 'home-page' }, [
			w(Banner, {}),
			v('div', { classes: ['container', 'page'] }, [
				v('div', { classes: 'row' }, [w(FeedsContainer, {}), w(TagsContainer, {})])
			])
		]);
	}

	protected render() {
		return v('div', { classes: 'banner' }, [
			v('div', { classes: 'container' }, [
				v('h1', { classes: 'logo-font' }, ['conduit']),
				v('p', ['A place to share your knowledge.'])
			])
		]);
	}

	protected renderNativeInput(): DNode {
		const {
			disabled,
			end,
			inputProperties = {},
			invalid,
			name,
			readOnly,
			required,
			start,
			step,
			value,
			label,
			theme,
			labelHidden = false,
			labelAfter = false
		} = this.properties;

		const { aria = {} } = inputProperties;

		const children = [
			label ? w(Label, {
				theme,
				disabled,
				invalid,
				readOnly,
				required,
				hidden: labelHidden,
				forId: this._uuid
			}, [ label ]) : null,
			v('input', {
				id: this._uuid,
				...formatAriaProperties(aria),
				'aria-invalid': invalid === true ? 'true' : null,
				'aria-readonly': readOnly === true ? 'true' : null,
				classes: this.theme(css.input),
				disabled,
				invalid,
				key: 'native-input',
				max: end,
				min: start,
				name,
				onblur: this._onNativeBlur,
				onchange: this._onNativeChange,
				onfocus: this._onNativeFocus,
				readOnly,
				required,
				step,
				type: 'time',
				value
			})
		];

		return v('div', {
			key: 'root',
			classes: this.theme(this.getRootClasses())
		}, labelAfter ? children.reverse() : children);
	}