Default Whatever Some Content The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.

Multiple Whatever Some Content The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.

Default

count="6"

theme="light"

Default Button

Button has text content Text Content

disabled="true" Button

disabled="false" Button

Has all attributes

fill="var(--tonic-accent)" Button

border-color, border-width, text-color Button

async="true" Button

async="false" Button

tabindex="0" Button

href and target target="_blank" target="_self" No target

Default

label="label"

checked="true"

disabled="true"

size="30px"

tabindex="0"

child elements This is a label!

Default Dialog Open

Default Icon

size="40px"

fill="cyan"

symbol-id="custom_off"

tabindex="0"

Default Input

value="I'm a value"

type="email"

required="true"

disabled="true"

spellcheck="false"

error-message="nope"

placeholder="test"

label="Label"

tabindex="0"

readonly="true"

Default Panel Open Panel

name="panel-name" Open Panel

overlay="true" Open Panel

position="right" Open Panel

position="left" Open Panel

background-color="rgba(255,255,255,0.8)" Open Panel

theme="light" Open Panel

Default Popover Open Popover

Default Profile Image

id="profile-image-id"

name="profile-name"

src="/sampleprofile.jpg"

size="100px"

radius="50%"

border="3px solid black"

editable="true"

editable="false"

theme="light"

Default Progress Bar

Progress Bar (automatic with js)

Progress Bar - 30%

width="150px"

width="100%"

height="40px"

color="purple"

theme="light"

Default Range Input

id="range-id"

name="range-name"

disabled="true"

disabled="false"

width="100px"

width="100%"

height="10px"

height="100%"

radius="2px"

min="15"

max="120"

step="25"

label="%i%"

thumb-color="red"

thumb-radius="0px"

value="90"

js (value = 15)

theme="light"

Router examples / /bar/100 /beepboop Hello, World number prop has the value . 404

Default Select Option A Option B Option C

Empty Select

id="select-id" Option A Option B Option C

name="select-name" Option A Option B Option C

required="true" Option A Option B Option C

required="false" Option A Option B Option C

disabled="true" Option A Option B Option C

disabled="false" Option A Option B Option C

label="Label" Option A Option B Option C

width="100%" Option A Option B Option C

height="60px" Option A Option B Option C

radius="8px" Option A Option B Option C

value="c" Option A Option B Option C

theme="light" Option A Option B Option C

multiple="true" Option A Option B Option C Option D Option E

multiple="true", width="100%" Option A Option B Option C Option D Option E

multiple="true", size="3" Option A Option B Option C Option D Option E

Sprite

Default Tabs One Two Three Content One Content Two Content Three

Tabs with nesting One Two Three a b c Whatever Some Content The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed. Content Three

Tabs inanother component One Two Three a b c Whatever Some Content The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed. Content Three

Default Textarea

With Content It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.

id="textarea-id"

name="textarea-name"

placeholder="This is a placeholder"

resize="none"

spellcheck="true" fdsfds

spellcheck="false" fdsfds

disabled="true"

disabled="false"

required="true"

required="false"

readonly="true"

readonly="false"

autofocus="true"

autofocus="false"

rows="10"

cols="10"

minlength="10"

maxlength="100"

width="100%"

width="200px"

height="300px"

radius="10px"

theme="light"

Toaster w/ Type Success Success

Toaster w/ Type warning Warning

Toaster w/ Type danger Toast

Toaster w/ Type info Toast

Toaster w/ Title Toast

Toaster w/ Message Toast

Toaster w/ Title & Message Toast

Toaster w/ Type, Title & Message Toast

Toaster w/ dismiss Toast

Toaster w/out dismiss Toast

Toaster w/ dismiss w/ duration Toast

Toaster w/out dismiss w/ duration Toast

Toaster w/ left position Toast

Toaster w/ right position Toast

Toaster w/ theme light Toast

Default Inline Toaster Message

Toaster inline displayed initially

Toaster inline w/ title

Toaster inline w/ inline HTML title

Toaster inline w/ message

Toaster inline w/ message (initial)

Toaster inline w/ title & message

Toaster inline w/ innerHTML message (must be initial)

Toaster inline w/ type success

Toaster inline w/ type warning

Toaster inline w/ type danger

Toaster inline w/ type info

Toaster inline w/ type & title

Toaster inline w/ type & message

Toaster inline w/ type & title & message

Toaster inline w/ duration

Toaster inline w/out duration

Toaster inline w/ dismiss w/ duration

Toaster inline w/out dismiss w/ duration

Default Toggle

tab-index="0"

label="label"

label="label"

id="toggle-3"

name="toggle-name"

disabled="true"

disabled="false"

checked="true"

checked="false"

checked="true", disabled="true"

theme="light"

Default tooltip Hover! Hello World

Default tooltip w/ image Hover!

width="400px" Hover! Hello World

height="250px" Hover! Hello World

theme="light" Hover! I am a light theme!

theme="dark" Hover! I am a dark theme!

TBD