Component Specifications

Inputs

Buttons

	Class	Modifiers	States	Accessibility
Block	.tn-button	&--primary, &--default, &--subordinate, &--icon, &--danger, &--link, &--add	&.is-disabled, [disabled]	[role="button"]
Elements	.tn-button__icon (optional)	&--back-to-top	&.tn-icon-{icon}°	[aria-label=""]

° Note: This is a required child of .tn-button--icon more than a state.

Grouped Buttons

	Class	Modifiers	States	Accessibility
Block	.tn-button-group		&.is-disabled, [disabled]	[role="radiogroup"]
Elements	.tn-button-group__button	&--primary	&.is-active,&.is-disabled,[disabled],[aria-selected="true"]	[role="radio"]

Forms Layout

	Class	Modifiers	States	Accessibility
Block	.tn-form
Elements	.tn-form__set (optional)		&.has-error, &.is-disabled, [disabled], [readonly], .is-readonly
	.tn-form__group		.has-error, &.is-disabled, [disabled], [readonly], .is-readonly
	.tn-form__label (optional)		&.is-required	[for]
	.tn-form__tooltip (optional)	&--align-right
	.tn-form__control		&.is-valid, .is-required, [required], [readonly]	[id], [aria-describedby], [aria-label]
	.tn-form__message (optional)	&--help	&.is-error	[id]

Inputs

	Class	Modifiers	States	Accessibility
Block	.tn-input-group
	.tn-input-group__addon	&--btn-up,&--btn-down		[role="checkbox"], [aria-label]

Toggles

	Class	Modifiers	States	Accessibility
Block	.tn-toggle	&--large	[aria-checked="true"]	[role="checkbox"],[aria-label]
Elements	.tn-toggle__input
	.tn-toggle__label (optional)		&[data-activelabel],&[data-inactivelabel]

Selects

Navigation

Contextual Menu

	Class	Modifiers	States	Accessibility
Block	.tn-contextual-menu
Elements	.tn-contextual-menu__toggle			[aria-label],[aria-haspopup="true"],[aria-controls]
	.tn-contextual-menu__list		.is-expanded, [aria-expanded="true"]	[id]
	.tn-contextual-menu__header (optional)
	.tn-contextual-menu__listitem
	.tn-contextual-menu__listlink (optional)

Pagination

	Class	Modifiers	States	Accessibility
Block	.tn-pagination
Elements	.tn-pagination__item			[aria-setsize],[aria-posinset]
	.tn-pagination__link	&--prev,&--next	&.is-disabled, .is-active	[aria-label]

Tabs

	Class	Modifiers	States	Accessibility
Block	.tn-tabs	&--centered		[role="tablist"]
Elements	.tn-tabs__tab		.is-selected,[aria-selected]	[role="tab"],[aria-controls]

	Class	Modifiers	States	Accessibility
Block	.tn-tabpanel	.is-hidden,[aria-hidden]		[role="tabpanel"], [id]

Action Bar

Composite component, uses .tn-button

	Class	Modifiers	States	Accessibility
Block	.tn-actionbar
Elements	.tn-actionbar__nav
	.tn-actionbar__title
	.tn-actionbar__actions			[aria-live]

Collections

Lists

	Class	Modifiers	States	Accessibility
Block	.tn-list-group
Elements	.tn-list-group__item

Cards

	Class	Modifiers	States	Accessibility
Block	.tn-card-group
Elements	.tn-card-group__footer

	Class	Modifiers	States	Accessibility
Block	.tn-card	&--full-width, &--stacked, &--button, &--media	.is-disabled,[disabled], .is-inactive	[role="button"]
Elements	.tn-card__content
	.tn-card__media	&--vertical,&--padded

Conveyances

Spinner

	Class	Modifiers	States	Accessibility
Block	.tn-spinner
Elements	.tn-spinner__circle

Hints

	Class	Modifiers	States	Accessibility
Block	.tn-hint	&--up,&--right
Elements	.tn-hint__icon			[aria-label],[aria-describedby]
	.tn-hint__text			[id],[role="tooltip"]^

Tooltip

	Class	Modifiers	States	Accessibility
Block	.tn-tooltip	&--up,&--right		[id],[role="tooltip"]^
Elements	.tn-tooltip__text

Popover

	Class	Modifiers	States	Accessibility
Block	.tn-popover			[id],[role="tooltip"]^
Elements	.tn-popover__title
	.tn-popover__text

Statuses

	Class	Modifiers	States	Accessibility
Block	.tn-status	&--inactive,&--success,&--warning,&--error
Block	.tn-badge	&--inactive,&--success,&--warning,&--error

Flows

Zoom

	Class	Modifiers	States	Accessibility
Block	.tn-zoom
Elements	.tn-zoom__media
	.tn-zoom__action