welcome to the library 🪧 🐿
This code is pre-alpha and the docs are currently lacking, so we recommend opening your browser's devtools and searching the source code from GitHub to improve the experience.
pre-alpha: not ready for production
👆
blockquote
👇
hr
👈
code
details
and summary
Click me, a summary
, to see the rest of the details
Here's an unfinished detail: what styling should the summary
have?
pre-alpha: not ready for production
form
input
textarea
select
button
form
<input type="range" />
form
<input type="checkbox" />
form
<input type="radio" />
<button disabled>:|</button>
button
with CSS class .selected
.selected
buttons with the .deselectable
class continue to be clickable
when selected:
.buttonlike
CSS class
the .buttonlike
class is useful when you want interactive builtin elements to be wrapped
in a larger clickable area:
TODO: add more deselectable
signifiers?
the --icon_size
property's variants
icon sizes usepx
notrem
, so they're insensitive to browser font size
h1
h2
h3
h4
h5
h6
--font_size_xs: 0.989rem;
--font_size_sm: 1.258rem;
--font_size_md: 1.6rem;
--font_size_lg: 2.035rem;
--font_size_xl: 2.589rem;
--font_size_xl2: 3.293rem;
--font_size_xl3: 4.189rem;
xl4 xl5 xl6 xl7 xl8 xl9
Dialog
HueInput
Breadcrumbs
Breadcrumbs
with slot content 🏠
Breadcrumbs
with
path="/a/b/c"
selectedPath="/a/b"
basePath="/sketch/library"
and slot "separator"
content .
and default slot content
🔡
selectedPath="/a/b"
basePath="/sketch/library"
Message
this api is experimental (the button
prop may be changed to an optional action callback)
Message
with
icon="😑"
and button={true}
Message
with status="error"
Message
with status="error"
and and slot content
{<div slot="icon" style:line-height="1"><div style:font-size="var(--font_size_xl3)">🔥</div>😊</div>
Message
with status="help"
Message
with status="help"
and
icon="🔑"
and button={true}
PendingAnimation
with
running={}
with slot
and --font_size_xl6
and --animation_duration
set to --duration_6
with
running={}
and slots
⏳{index}<span style="font-size: var(--font_size_xl5)">{🐸}</span>
PendingButton
PendingButton
preserves the normal width of the button while animating
Teleport
TheDialog
uses the Teleport
to mount itself to a top-level DOM
element, instead of the location that the Dialog
component appears in code, solving
various issues like unwanted style inheritance.
The Teleport
can be used to relocate other elements too, in the rare cases that's
useful.
Use only when necessary or fun.