@kb.ui/css 0.0.0-stage → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -2
- package/dist/components/badge.css +1 -0
- package/dist/components/button.css +1 -0
- package/dist/components/callout.css +1 -0
- package/dist/components/card.css +1 -0
- package/dist/components/checkbox.css +1 -0
- package/dist/components/code.css +1 -0
- package/dist/components/combobox.css +1 -0
- package/dist/components/container.css +1 -0
- package/dist/components/dialog.css +1 -0
- package/dist/components/errorsummary.css +1 -0
- package/dist/components/fieldset.css +1 -0
- package/dist/components/fileinput.css +1 -0
- package/dist/components/formactions.css +1 -0
- package/dist/components/grid.css +1 -0
- package/dist/components/heading.css +1 -0
- package/dist/components/inline.css +1 -0
- package/dist/components/input.css +1 -0
- package/dist/components/link.css +1 -0
- package/dist/components/menu.css +1 -0
- package/dist/components/multiselect.css +1 -0
- package/dist/components/numberfield.css +1 -0
- package/dist/components/panel.css +1 -0
- package/dist/components/progress.css +1 -0
- package/dist/components/radiogroup.css +1 -0
- package/dist/components/scrollarea.css +1 -0
- package/dist/components/select.css +1 -0
- package/dist/components/separator.css +1 -0
- package/dist/components/split.css +1 -0
- package/dist/components/stat.css +1 -0
- package/dist/components/status.css +1 -0
- package/dist/components/switch.css +1 -0
- package/dist/components/text.css +1 -0
- package/dist/components/textarea.css +1 -0
- package/dist/components/toolbar.css +1 -0
- package/dist/components/tooltip.css +1 -0
- package/dist/reset.css +1 -0
- package/dist/styles.css +1 -0
- package/package.json +28 -4
package/README.md
CHANGED
|
@@ -1,3 +1,66 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @kb.ui/css
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
All kbui styling, as plain CSS. Components are styled through `kb-` classes and `data-*` attributes, so any renderer that produces the right markup gets the kbui look: React, another framework or hand-written HTML.
|
|
4
|
+
|
|
5
|
+
Current source defaults use monochrome light/dark surfaces with a persimmon accent and shared tactile materials. Locally built packages include this refresh; published v0.7.0 tarballs keep their original appearance.
|
|
6
|
+
|
|
7
|
+
## Importing
|
|
8
|
+
|
|
9
|
+
React apps import the same stylesheet from `@kb.ui/react/styles.css` and do not need this package. Every file wraps its rules in the `kbui` cascade layer (`kbui.tokens`, `kbui.reset`, `kbui.components`), so app CSS outside a layer wins. Other apps import the full stylesheet once at the root. It contains the tokens, a small reset and every component:
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import "@kb.ui/css/styles.css";
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Individual files are also available: `@kb.ui/css/reset.css`, or a single component such as `@kb.ui/css/components/button.css`. A single component file does not include the tokens, so load those separately.
|
|
16
|
+
|
|
17
|
+
Plain HTML works as well:
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<button class="kb-button" data-variant="secondary" data-size="sm">Cancel</button>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Components
|
|
24
|
+
|
|
25
|
+
The first line of each stylesheet describes the markup it expects. The table shows common entries; [styles.css](src/styles.css) lists every component import.
|
|
26
|
+
|
|
27
|
+
| File | Expected markup |
|
|
28
|
+
|---|---|
|
|
29
|
+
| `container.css` | `.kb-container` with `data-size` (`sm`, `md`, `lg`, `full`) and optional `data-gutter="none"` |
|
|
30
|
+
| `inline.css` | `.kb-inline` with `data-gap`, `data-align` and `data-justify`; wraps in source order |
|
|
31
|
+
| `split.css` | `.kb-split` with `data-ratio`, `data-collapse`, `data-gap` and `data-align`; two `.kb-split-track` children containing the column content |
|
|
32
|
+
| `separator.css` | Native hr with `.kb-separator` and `data-orientation`; decorative rules need aria-hidden and role none |
|
|
33
|
+
| `heading.css` | Native heading with `.kb-heading` and `data-size` (`sm`, `md`, `lg`, `xl`, `display`); rank follows document outline |
|
|
34
|
+
| `text.css` | `p`, `span` or `div` with `.kb-text`, `data-size` (`sm`, `md`, `lg`) and `data-tone` (`default`, `muted`) |
|
|
35
|
+
| `link.css` | Native anchor with href and `.kb-link`; underline and visible keyboard focus |
|
|
36
|
+
| `code.css` | Native inline `code` with `.kb-code`; literal fragments and wrapping paths |
|
|
37
|
+
| `button.css` | `.kb-button` with `data-variant` (`primary`, `secondary`, `ghost`, `danger`), `data-size` (`sm`, `md`, `lg`, `icon`) and `data-disabled` |
|
|
38
|
+
| `numberfield.css` | `.kb-numberfield` with size/state attributes, label, grouped input/step controls and full-width help/error |
|
|
39
|
+
| `fileinput.css` | `.kb-fileinput` with labeled picker, retained list and named removal controls; also load Button CSS when importing parts |
|
|
40
|
+
| `combobox.css` | `.kb-combobox` with labeled search input, clear/trigger actions, portaled listbox popup and polite empty status |
|
|
41
|
+
| `multiselect.css` | `.kb-multiselect` with labeled chip toolbar, removable selection chips, search input, clear/trigger actions and portaled listbox popup |
|
|
42
|
+
| `input.css` | `.kb-input` with `data-size`, `data-invalid` and `data-disabled`, wrapping `-label`, `-shell`, `-start`, `-control`, `-end`, `-description` and `-error` parts |
|
|
43
|
+
| `textarea.css` | `.kb-textarea` with `data-resize`, `data-invalid`, `data-disabled` and `data-readonly`, wrapping `-label`, `-control`, `-description` and `-error` parts |
|
|
44
|
+
| `switch.css` | `.kb-switch` with `data-size`, `data-off-tone`, `data-on-tone`, `data-checked`, `data-disabled`, `data-readonly` and `data-invalid`, wrapping `-field`, `-target`, `-control`, `-track`, `-thumb`, `-off`, `-on`, `-label`, `-description` and `-error` parts |
|
|
45
|
+
| `fieldset.css` | Native `fieldset` with `.kb-fieldset`, `data-disabled` and `data-invalid`, wrapping `-legend`, `-description`, `-fields` and `-error` parts |
|
|
46
|
+
| `formactions.css` | `.kb-formactions` with `data-align` (`end`, `start`, `between`) and optional `data-divider` |
|
|
47
|
+
| `errorsummary.css` | `.kb-errorsummary` alert container with `-title`, `-description`, `-list`, `-item` and `-link` parts |
|
|
48
|
+
| `dialog.css` | `.kb-dialog-popup` with `-title`, `-description` and `-actions` parts, beside a `.kb-dialog-backdrop`. Both use Base UI's open, starting and ending attributes for animation |
|
|
49
|
+
|
|
50
|
+
## Build and test
|
|
51
|
+
|
|
52
|
+
The CSS bundles the token output, so build the tokens first:
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
bun run --cwd packages/tokens build
|
|
56
|
+
bun run --cwd packages/css build
|
|
57
|
+
bun run --cwd packages/css test
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
The tests check that each component file starts with its `Anatomy:` line and styles the root class it names. They fail if component or reset CSS uses a palette color such as `--kb-gray-500` or a raw color such as `#fff`.
|
|
61
|
+
|
|
62
|
+
[Adding a component](../../docs/guides/adding-a-component.md) describes the anatomy contract and its checks.
|
|
63
|
+
|
|
64
|
+
[Typography](../../docs/guides/typography.md) covers hierarchy, composition, plain HTML recipes and theme tokens.
|
|
65
|
+
|
|
66
|
+
See [Layout composition](../../docs/guides/layout.md) for widths, gutters, collapse thresholds and plain HTML recipes.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-badge{--_badge-ink:var(--kb-color-muted);align-items:center;gap:var(--kb-space-1);padding:var(--kb-badge-padding-block) var(--kb-space-2);border-radius:var(--kb-badge-radius);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--_badge-ink) 35%, transparent);background:color-mix(in oklab, var(--_badge-ink) 10%, transparent);color:color-mix(in oklab, var(--_badge-ink) 70%, var(--kb-color-fg));font-size:var(--kb-text-caption-size);font-weight:var(--kb-font-weight-medium);white-space:nowrap;line-height:1.4;display:inline-flex}.kb-badge[data-tone=info]{--_badge-ink:var(--kb-color-info)}.kb-badge[data-tone=success]{--_badge-ink:var(--kb-color-success)}.kb-badge[data-tone=warning]{--_badge-ink:var(--kb-color-warning)}.kb-badge[data-tone=danger]{--_badge-ink:var(--kb-color-danger)}.kb-badge[data-mono]{font-family:var(--kb-font-mono);letter-spacing:.06em;text-transform:uppercase}.kb-badge[data-preserve-case]{letter-spacing:normal;text-transform:none}.kb-badge[data-appearance=plain]{box-shadow:none;background:0 0;padding:0}.kb-badge:not([data-appearance=plain]){border:1px solid color-mix(in srgb, currentColor 22%, transparent);box-shadow:var(--kb-material-inlay-shadow);background-image:linear-gradient(180deg, var(--kb-material-soft-sheen), transparent)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-button{justify-content:center;align-items:center;gap:var(--kb-space-2);height:var(--kb-button-height-md);padding:0 var(--kb-button-padding-md);font-size:var(--kb-text-control-size);border-radius:var(--kb-button-radius);font-weight:var(--kb-font-weight-strong);cursor:pointer;letter-spacing:-.01em;border:1px solid #0000;line-height:1;text-decoration:none;display:inline-flex}.kb-button:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-button[data-variant=primary]:focus-visible{outline-color:var(--kb-color-action-fg)}.kb-button[data-variant=danger]:focus-visible{outline-color:var(--kb-color-danger-fg)}.kb-button[data-size=sm]{height:var(--kb-button-height-sm);padding:0 var(--kb-button-padding-sm);font-size:var(--kb-text-small-size)}.kb-button[data-size=icon]{width:var(--kb-button-height-md);height:var(--kb-button-height-md);padding:0}.kb-button[data-size=icon]>svg{width:var(--kb-button-icon-size);height:var(--kb-button-icon-size)}.kb-button[data-size=lg]{height:var(--kb-button-height-lg);padding:0 var(--kb-button-padding-lg);font-size:var(--kb-text-body-size)}.kb-button[data-variant=primary]{background:var(--kb-color-action);color:var(--kb-color-action-fg)}.kb-button[data-variant=primary]:hover:not([data-disabled]){background-color:var(--kb-color-action-hover)}.kb-button[data-variant=secondary]{background:var(--kb-material-raised-face);border-color:var(--kb-material-raised-border);color:var(--kb-color-fg);box-shadow:var(--kb-material-raised-shadow)}.kb-button[data-variant=secondary]:hover:not([data-disabled]){border-color:var(--kb-color-muted)}.kb-button[data-variant=ghost]{color:var(--kb-color-muted);background:0 0}.kb-button[data-variant=ghost]:hover:not([data-disabled]){background:var(--kb-color-surface)}.kb-button[data-variant=danger]{background:var(--kb-color-danger);color:var(--kb-color-danger-fg);border-color:color-mix(in srgb, var(--kb-color-danger) 85%, var(--kb-color-fg))}.kb-button[data-variant=danger]:hover:not([data-disabled]){background-color:var(--kb-color-danger-hover)}@media (prefers-reduced-motion:reduce){.kb-button{transition:none}}.kb-button:is([data-variant=primary],[data-variant=danger]){background-image:linear-gradient(180deg, var(--kb-material-action-sheen), transparent);border-color:color-mix(in srgb, var(--kb-color-action) 85%, var(--kb-color-fg));box-shadow:var(--kb-material-accent-shadow)}.kb-button[data-variant=danger]{border-color:color-mix(in srgb, var(--kb-color-danger) 85%, var(--kb-color-fg))}@media (hover:hover) and (pointer:fine){.kb-button[data-variant=secondary]:hover:not([data-disabled]){border-color:var(--kb-material-control-border)}.kb-button[data-variant=ghost]:not([aria-pressed=true]):hover:not([data-disabled]){background:color-mix(in srgb, var(--kb-color-accent) 7%, var(--kb-color-bg));color:var(--kb-color-fg)}}.kb-button:not([data-variant=ghost]):active:not([data-disabled]){box-shadow:var(--kb-material-pressed-shadow)}@media (prefers-reduced-motion:no-preference){.kb-button{transition:background-color var(--kb-button-motion-duration) var(--kb-button-motion-easing), border-color var(--kb-button-motion-duration) var(--kb-button-motion-easing), box-shadow var(--kb-button-motion-duration) var(--kb-button-motion-easing), color var(--kb-button-motion-duration) var(--kb-button-motion-easing)}.kb-button:active:not([data-disabled]){transform:translateY(var(--kb-button-press-offset))}}@media (width<=580px){.kb-button{min-height:var(--kb-button-touch-min)}.kb-button[data-size=icon]{min-width:var(--kb-button-touch-min)}}.kb-button[data-disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;background-image:none}@media (forced-colors:active){.kb-button{box-shadow:none}.kb-button[data-variant],.kb-button[data-variant]:hover:not([data-disabled]),.kb-button[data-variant=ghost]:not([aria-pressed=true]):hover:not([data-disabled]){color:buttontext;background:buttonface;border-color:buttontext}.kb-button:focus-visible,.kb-button[data-variant]:focus-visible{outline-color:highlight}.kb-button[data-variant][data-disabled]{color:graytext;opacity:1;border-color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-callout{--_callout-ink:var(--kb-color-muted);gap:var(--kb-space-3);padding:var(--kb-callout-padding-block) var(--kb-callout-padding-inline);border-radius:var(--kb-callout-radius);background:color-mix(in oklab, var(--_callout-ink) 8%, transparent);box-shadow:var(--kb-material-inlay-shadow);color:var(--kb-color-fg);font-size:var(--kb-text-control-size);border:1px solid var(--kb-color-border);display:flex}.kb-callout[data-tone=info]{--_callout-ink:var(--kb-color-info)}.kb-callout[data-tone=success]{--_callout-ink:var(--kb-color-success)}.kb-callout[data-tone=warning]{--_callout-ink:var(--kb-color-warning)}.kb-callout[data-tone=danger]{--_callout-ink:var(--kb-color-danger)}.kb-callout-icon{width:1.25em;height:1.25em;color:var(--_callout-ink);flex:none;display:inline-flex}.kb-callout-icon>*{width:100%;height:100%}.kb-callout-content{gap:var(--kb-space-1);flex-direction:column;min-width:0;display:flex}.kb-callout-title{font-weight:var(--kb-font-weight-strong)}.kb-callout-actions{gap:var(--kb-space-2);margin-top:var(--kb-space-2);flex-wrap:wrap;display:flex}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-card{min-inline-size:0;position:relative}.kb-card[data-appearance=outlined]{padding:var(--kb-card-padding);border:var(--kb-card-border-width) solid var(--kb-card-border);border-radius:var(--kb-card-radius);background-color:var(--kb-card-background);background-image:var(--kb-card-face);color:var(--kb-card-color);box-shadow:var(--kb-card-shadow);flex-direction:column;display:flex}.kb-card>:where(p){font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body)}@media (width<=580px){.kb-card{--kb-card-padding:var(--kb-card-padding-compact)}}@media (forced-colors:active){.kb-card{box-shadow:none;background-image:none}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-checkbox{--kb-checkbox-inset:calc((var(--kb-input-height-md) - var(--kb-checkbox-size)) / 2);align-items:start;column-gap:var(--kb-space-2);row-gap:var(--kb-space-1);grid-template-columns:auto minmax(0,1fr);min-inline-size:0;display:grid;position:relative}.kb-checkbox-control{inline-size:var(--kb-checkbox-size);block-size:var(--kb-checkbox-size);margin-inline:0;margin-block:var(--kb-checkbox-inset);opacity:0;cursor:pointer}.kb-checkbox-mark{inline-size:var(--kb-checkbox-size);block-size:var(--kb-checkbox-size);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-radius-sm);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);color:var(--kb-color-accent-fg);pointer-events:none;place-items:center;display:grid;position:absolute;inset-block-start:var(--kb-checkbox-inset);inset-inline-start:0}.kb-checkbox-mark svg{inline-size:var(--kb-space-4);block-size:var(--kb-space-4);visibility:hidden}.kb-checkbox-mixed{display:none}.kb-checkbox[data-invalid] .kb-checkbox-mark{border-color:var(--kb-color-danger)}.kb-checkbox-control:is(:checked,:indeterminate)+.kb-checkbox-mark{background:var(--kb-color-accent);border-color:var(--kb-color-accent);box-shadow:var(--kb-material-pressed-shadow)}.kb-checkbox-control:is(:checked,:indeterminate)+.kb-checkbox-mark svg{visibility:visible}.kb-checkbox-control:indeterminate+.kb-checkbox-mark .kb-checkbox-tick{display:none}.kb-checkbox-control:indeterminate+.kb-checkbox-mark .kb-checkbox-mixed{display:block}.kb-checkbox-control:focus-visible+.kb-checkbox-mark{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-checkbox-control:is(:checked,:indeterminate):focus-visible+.kb-checkbox-mark{outline-color:var(--kb-color-accent-fg)}.kb-checkbox-label{overflow-wrap:anywhere;min-block-size:var(--kb-input-height-md);padding-block:var(--kb-space-3);color:var(--kb-color-fg);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);cursor:pointer}.kb-checkbox-description,.kb-checkbox-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);grid-column:2;margin:0}.kb-checkbox-description{color:var(--kb-color-muted)}.kb-checkbox-error{color:var(--kb-color-danger)}.kb-checkbox[data-disabled] :is(.kb-checkbox-mark,.kb-checkbox-label){opacity:.5}.kb-checkbox[data-disabled] :is(.kb-checkbox-control,.kb-checkbox-label){cursor:not-allowed}@media (forced-colors:active){.kb-checkbox-control{opacity:1;accent-color:highlight}.kb-checkbox-mark{display:none}.kb-checkbox-control:focus-visible{outline-offset:2px;outline:2px solid highlight}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-code{padding:.1em var(--kb-space-1);border:1px solid var(--kb-code-border);border-radius:var(--kb-code-radius);background:var(--kb-code-background);font-family:var(--kb-font-mono);font-size:var(--kb-code-size);line-height:inherit;letter-spacing:normal;text-transform:none;white-space:break-spaces;overflow-wrap:anywhere;box-decoration-break:slice}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-combobox{gap:var(--kb-input-gap);min-inline-size:0;font-family:var(--kb-font-sans);color:var(--kb-color-fg);flex-direction:column;display:flex}.kb-combobox-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg)}.kb-combobox-shell{align-items:center;gap:var(--kb-space-1);inline-size:100%;min-block-size:var(--kb-input-height-md);padding-inline:var(--kb-space-3) var(--kb-space-1);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-input-radius);background:var(--kb-material-recessed-face);color:var(--kb-color-fg);box-shadow:var(--kb-material-field-shadow);transition:border-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-base) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard);display:flex}.kb-combobox[data-size=sm] .kb-combobox-shell{min-block-size:var(--kb-input-height-sm);padding-inline:var(--kb-space-2) var(--kb-space-1)}.kb-combobox[data-size=lg] .kb-combobox-shell{min-block-size:var(--kb-input-height-lg);padding-inline:var(--kb-space-4) var(--kb-space-2)}.kb-combobox:not([data-disabled]):not([data-readonly]):not([data-invalid]) .kb-combobox-shell:hover:not(:focus-within){border-color:var(--kb-color-accent)}.kb-combobox[data-readonly] .kb-combobox-shell{background:var(--kb-color-surface);box-shadow:none;border-style:dashed}.kb-combobox[data-invalid] .kb-combobox-shell{border-color:var(--kb-color-danger)}.kb-combobox:not([data-disabled]) .kb-combobox-shell:focus-within,.kb-combobox[data-invalid]:not([data-disabled]) .kb-combobox-shell:focus-within{border-color:var(--kb-color-ring);outline:2px solid var(--kb-color-ring);outline-offset:-1px}.kb-combobox[data-disabled] .kb-combobox-shell{opacity:.5;cursor:not-allowed;box-shadow:none}.kb-combobox-input{min-inline-size:0;color:inherit;font:inherit;font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);background:0 0;border:0;outline:none;flex:1;padding:0}.kb-combobox[data-size=sm] .kb-combobox-input{font-size:var(--kb-size-sm)}.kb-combobox[data-size=lg] .kb-combobox-input{font-size:var(--kb-size-lg)}.kb-combobox-input::placeholder{color:var(--kb-color-muted)}.kb-combobox-input:disabled{cursor:not-allowed}.kb-combobox-actions{align-items:center;gap:var(--kb-space-1);flex-shrink:0;display:inline-flex}.kb-combobox-clear,.kb-combobox-trigger{inline-size:var(--kb-combobox-action-size);block-size:var(--kb-combobox-action-size);border-radius:var(--kb-radius-sm);color:var(--kb-color-muted);font:inherit;font-size:var(--kb-size-sm);line-height:var(--kb-text-leading-control);cursor:pointer;transition:color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kb-combobox-clear:hover:not(:disabled),.kb-combobox-trigger:hover:not(:disabled){background-color:var(--kb-color-surface);color:var(--kb-color-fg)}.kb-combobox-clear:focus-visible,.kb-combobox-trigger:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-combobox-clear:disabled,.kb-combobox-trigger:disabled{cursor:not-allowed;opacity:.5}.kb-combobox-positioner{z-index:var(--kb-combobox-layer);max-inline-size:var(--available-width);outline:none}.kb-combobox-popup{min-inline-size:max(var(--kb-combobox-popup-min-width), var(--anchor-width,0px));max-block-size:min(var(--kb-combobox-max-height), var(--available-height,var(--kb-combobox-max-height)));padding:var(--kb-space-1);border:1px solid var(--kb-popup-border);border-radius:var(--kb-popup-radius);background-color:var(--kb-popup-background);color:var(--kb-color-fg);box-shadow:var(--kb-popup-shadow);transform-origin:var(--transform-origin);transition:opacity var(--kb-popup-motion-duration) var(--kb-popup-motion-easing), transform var(--kb-popup-motion-duration) var(--kb-popup-motion-easing);outline:none;flex-direction:column;display:flex;overflow-y:auto}.kb-combobox-popup[data-starting-style],.kb-combobox-popup[data-ending-style]{opacity:0;transform:scale(.98)}.kb-combobox-list{flex-direction:column;gap:1px;display:flex}.kb-combobox-list:empty{display:none}.kb-combobox-option{grid-template-columns:var(--kb-space-4) minmax(0, 1fr);align-items:center;gap:var(--kb-space-2);min-block-size:var(--kb-menu-item-height);padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-sm);font-family:var(--kb-font-sans);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg);cursor:pointer;user-select:none;outline:none;display:grid}.kb-combobox-option[data-highlighted]{background-color:var(--kb-color-surface);box-shadow:inset 0 0 0 1px var(--kb-color-border)}.kb-combobox-option[data-selected]{font-weight:var(--kb-font-weight-medium)}.kb-combobox-option[data-disabled]{color:var(--kb-color-muted);opacity:.6;cursor:not-allowed}.kb-combobox-option-indicator{color:var(--kb-color-accent-ink);font-weight:var(--kb-font-weight-strong);justify-content:center;align-items:center;display:inline-flex}.kb-combobox-option-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kb-combobox-empty{color:var(--kb-color-muted);font-family:var(--kb-font-sans);font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body)}.kb-combobox-empty:not(:empty){padding:var(--kb-space-2) var(--kb-space-3)}.kb-combobox-description{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-combobox-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-danger);margin:0}@media (prefers-reduced-motion:reduce){.kb-combobox-shell,.kb-combobox-clear,.kb-combobox-trigger,.kb-combobox-popup{transition-duration:0s}}@media (forced-colors:active){.kb-combobox-shell,.kb-combobox[data-readonly] .kb-combobox-shell,.kb-combobox:not([data-disabled]):not([data-readonly]):not([data-invalid]) .kb-combobox-shell:hover:not(:focus-within){color:fieldtext;box-shadow:none;background:field;border-color:buttonborder}.kb-combobox[data-invalid] .kb-combobox-shell{border-color:highlight}.kb-combobox:not([data-disabled]) .kb-combobox-shell:focus-within,.kb-combobox[data-invalid]:not([data-disabled]) .kb-combobox-shell:focus-within,.kb-combobox-clear:focus-visible,.kb-combobox-trigger:focus-visible{border-color:highlight;outline-color:highlight}.kb-combobox-popup{color:canvastext;box-shadow:none;background:canvas;border-color:buttonborder}.kb-combobox-option[data-highlighted]{color:highlighttext;forced-color-adjust:none;background:highlight}.kb-combobox-option[data-highlighted] .kb-combobox-option-indicator{color:highlighttext}.kb-combobox[data-disabled] .kb-combobox-shell,.kb-combobox-option[data-disabled]{opacity:1;color:graytext;border-color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-container{box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:var(--kb-container-size-lg);padding-inline:var(--kb-container-gutter);margin-inline:auto}.kb-container[data-size=sm]{max-inline-size:var(--kb-container-size-sm)}.kb-container[data-size=md]{max-inline-size:var(--kb-container-size-md)}.kb-container[data-size=full]{max-inline-size:none}.kb-container[data-gutter=none]{padding-inline:0}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-dialog-backdrop{background:var(--kb-dialog-overlay-background);opacity:1;transition:opacity var(--kb-dialog-motion-duration) var(--kb-dialog-motion-easing);backdrop-filter:blur(3px);position:fixed;inset:0}.kb-dialog-backdrop[data-starting-style],.kb-dialog-backdrop[data-ending-style]{opacity:0}.kb-dialog-popup{width:min(var(--kb-dialog-width), calc(100vw - var(--kb-space-8)));max-height:calc(100vh - var(--kb-space-8));padding:var(--kb-dialog-padding);border:var(--kb-dialog-border-width) solid var(--kb-dialog-border);border-radius:var(--kb-dialog-radius);background:var(--kb-dialog-background);color:var(--kb-dialog-color);opacity:1;transition:opacity var(--kb-dialog-motion-duration) var(--kb-dialog-motion-easing), transform var(--kb-dialog-motion-duration) var(--kb-dialog-motion-easing);box-shadow:var(--kb-dialog-shadow);position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)scale(1)}.kb-dialog-popup[data-starting-style],.kb-dialog-popup[data-ending-style]{transform:translate(-50%, calc(-50% + var(--kb-dialog-enter-offset))) scale(var(--kb-dialog-enter-scale));opacity:0}.kb-dialog-popup:focus-visible{outline:none}.kb-dialog-title{margin:0 0 var(--kb-space-2);font-size:var(--kb-dialog-title-size);font-family:var(--kb-dialog-title-family);font-weight:var(--kb-dialog-title-weight);color:inherit;letter-spacing:-.035em}.kb-dialog-description{margin:0 0 var(--kb-space-4);color:var(--kb-dialog-description-color);font-size:var(--kb-text-control-size);line-height:1.6}.kb-dialog-header{padding:var(--kb-dialog-header-padding)}.kb-dialog-body{padding:var(--kb-dialog-body-padding)}.kb-dialog-footer{padding:var(--kb-dialog-footer-padding)}.kb-dialog-actions{margin-top:var(--kb-space-4);gap:var(--kb-space-2);flex-wrap:wrap;justify-content:flex-end;display:flex}@media (prefers-reduced-motion:reduce){.kb-dialog-backdrop,.kb-dialog-popup{transition:none}}@media (forced-colors:active){.kb-dialog-popup{border:1px solid canvastext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-errorsummary{gap:var(--kb-errorsummary-gap);min-inline-size:0;padding:var(--kb-errorsummary-padding);border:1px solid var(--kb-color-danger);border-inline-start-width:var(--kb-space-1);border-radius:var(--kb-errorsummary-radius);background:color-mix(in oklab, var(--kb-color-danger) 8%, transparent);color:var(--kb-color-fg);display:grid}.kb-errorsummary:focus,.kb-errorsummary:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-errorsummary-title{overflow-wrap:anywhere;min-inline-size:0;font-family:var(--kb-font-sans);font-size:var(--kb-text-control-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-heading-leading);color:var(--kb-color-fg);margin:0}.kb-errorsummary-description{overflow-wrap:anywhere;min-inline-size:0;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-errorsummary-list{gap:var(--kb-space-1);font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);margin:0;padding-inline-start:var(--kb-space-4);display:grid}.kb-errorsummary-item{overflow-wrap:anywhere;min-inline-size:0;color:var(--kb-color-danger)}.kb-errorsummary-link{color:var(--kb-color-danger);font-weight:var(--kb-font-weight-medium);text-underline-offset:.16em;border-radius:var(--kb-radius-sm);text-decoration:underline}.kb-errorsummary-link:hover{color:var(--kb-color-fg)}.kb-errorsummary-link:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}@media (forced-colors:active){.kb-errorsummary{color:canvastext;background:canvas;border-color:canvastext}.kb-errorsummary:focus,.kb-errorsummary:focus-visible,.kb-errorsummary-link:focus-visible{outline-color:highlight}.kb-errorsummary-title,.kb-errorsummary-description,.kb-errorsummary-item{color:canvastext}.kb-errorsummary-link,.kb-errorsummary-link:hover{color:linktext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-fieldset{gap:var(--kb-fieldset-gap);min-inline-size:0;color:var(--kb-color-fg);border:0;margin:0;padding:0;display:grid}.kb-fieldset-legend{overflow-wrap:anywhere;min-inline-size:0;font-family:var(--kb-font-sans);font-size:var(--kb-fieldset-legend-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-heading-leading);color:var(--kb-color-fg);padding:0}.kb-fieldset-legend:not(.kb-sr-only){inline-size:100%;margin:0;margin-block-end:var(--kb-fieldset-gap)}.kb-fieldset-description,.kb-fieldset-error{overflow-wrap:anywhere;min-inline-size:0;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);margin:0}.kb-fieldset-description{color:var(--kb-color-muted)}.kb-fieldset-fields{gap:var(--kb-fieldset-fields-gap);min-inline-size:0;display:grid}.kb-fieldset-error{color:var(--kb-color-danger)}.kb-fieldset:is(:disabled,[data-disabled])>:is(.kb-fieldset-legend,.kb-fieldset-description){opacity:.5}@media (forced-colors:active){.kb-fieldset,.kb-fieldset-legend,.kb-fieldset-description,.kb-fieldset-error{color:canvastext}.kb-fieldset:is(:disabled,[data-disabled])>:is(.kb-fieldset-legend,.kb-fieldset-description){color:graytext;opacity:1}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-fileinput{gap:var(--kb-space-2);min-width:0;display:grid}.kb-fileinput-label{overflow-wrap:anywhere;color:var(--kb-color-fg);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong)}.kb-fileinput .kb-fileinput-trigger{width:fit-content;max-width:100%;height:auto;min-height:var(--kb-fileinput-action-height);white-space:normal;padding:var(--kb-space-2) var(--kb-space-4);border-radius:var(--kb-fileinput-radius);line-height:1.5}.kb-fileinput[data-invalid] .kb-fileinput-trigger{border-color:var(--kb-color-danger)}.kb-fileinput-description,.kb-fileinput-error,.kb-fileinput-empty{font-size:var(--kb-text-small-size);overflow-wrap:anywhere;margin:0}.kb-fileinput-description,.kb-fileinput-empty{color:var(--kb-color-muted)}.kb-fileinput-error{color:var(--kb-color-danger)}.kb-fileinput-list{min-width:0;margin:0;padding:0;list-style:none}.kb-fileinput-item{justify-content:space-between;align-items:center;gap:var(--kb-space-3);border-bottom:var(--kb-fileinput-border-width) solid var(--kb-color-border);padding:var(--kb-space-2) 0;min-width:0;display:flex}.kb-fileinput-content{overflow-wrap:anywhere;flex:1;min-width:0}.kb-fileinput-name{font-weight:var(--kb-font-weight-medium);color:var(--kb-color-fg);display:block}.kb-fileinput-metadata{color:var(--kb-color-muted);font-size:var(--kb-text-small-size);margin-top:var(--kb-space-1);display:block}.kb-fileinput .kb-fileinput-remove{width:var(--kb-fileinput-action-height);min-width:var(--kb-fileinput-action-height);font-size:var(--kb-size-lg);padding:0}.kb-fileinput[data-disabled] .kb-fileinput-label{color:var(--kb-color-muted)}@media (forced-colors:active){.kb-fileinput[data-invalid] .kb-fileinput-trigger{border-color:highlight}.kb-fileinput[data-disabled] .kb-fileinput-label,.kb-fileinput[data-disabled] .kb-fileinput-description,.kb-fileinput[data-disabled] .kb-fileinput-empty{color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-formactions{justify-content:flex-end;align-items:center;gap:var(--kb-formactions-gap);flex-wrap:wrap;min-inline-size:0;display:flex}.kb-formactions[data-align=start]{justify-content:flex-start}.kb-formactions[data-align=between]{justify-content:space-between}.kb-formactions[data-divider]{border-block-start:1px solid var(--kb-color-border);padding-block-start:var(--kb-formactions-padding-top)}@media (forced-colors:active){.kb-formactions[data-divider]{border-block-start-color:canvastext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--kb-grid-min-item-width)), 1fr));gap:var(--kb-grid-gap);min-inline-size:0;display:grid}.kb-grid[data-layout=stack]{grid-template-columns:minmax(0,1fr)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-heading{min-inline-size:0;font-family:var(--kb-font-sans);font-size:var(--kb-heading-size-lg);font-weight:var(--kb-heading-weight);line-height:var(--kb-heading-leading);letter-spacing:var(--kb-heading-tracking);color:var(--kb-color-fg);overflow-wrap:anywhere;text-wrap:balance;margin:0}.kb-heading[data-size=sm]{font-size:var(--kb-heading-size-sm)}.kb-heading[data-size=md]{font-size:var(--kb-heading-size-md)}.kb-heading[data-size=lg]{font-size:var(--kb-heading-size-lg)}.kb-heading[data-size=display]{font-size:var(--kb-heading-size-display)}.kb-heading[data-size=xl]{font-size:var(--kb-heading-size-xl)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-inline{gap:var(--kb-layout-gap-md);overflow-wrap:anywhere;flex-wrap:wrap;justify-content:flex-start;align-items:center;min-inline-size:0;display:flex}.kb-inline>*{min-inline-size:0;max-inline-size:100%}.kb-inline[data-gap=none]{gap:0}.kb-inline[data-gap=sm]{gap:var(--kb-layout-gap-sm)}.kb-inline[data-gap=lg]{gap:var(--kb-layout-gap-lg)}.kb-inline[data-align=start]{align-items:flex-start}.kb-inline[data-align=end]{align-items:flex-end}.kb-inline[data-align=baseline]{align-items:baseline}.kb-inline[data-align=stretch]{align-items:stretch}.kb-inline[data-justify=center]{justify-content:center}.kb-inline[data-justify=end]{justify-content:flex-end}.kb-inline[data-justify=between]{justify-content:space-between}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-input{gap:var(--kb-input-gap);flex-direction:column;min-inline-size:0;display:flex}.kb-input-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);color:var(--kb-color-fg)}.kb-input-control{width:100%;height:var(--kb-input-height-md);padding:0 var(--kb-space-3);border:1px solid var(--kb-color-border);border-radius:var(--kb-input-radius);background:var(--kb-material-recessed-face);color:var(--kb-color-fg);font-size:var(--kb-text-control-size);font-weight:var(--kb-font-weight-regular);border-color:var(--kb-material-control-border);box-shadow:var(--kb-material-field-shadow);letter-spacing:-.01em}.kb-input-control::placeholder{color:var(--kb-color-muted)}.kb-input[data-size=sm] .kb-input-control{height:var(--kb-input-height-sm);font-size:var(--kb-size-sm)}.kb-input[data-size=lg] .kb-input-control{height:var(--kb-input-height-lg);font-size:var(--kb-size-lg)}.kb-input[data-invalid] .kb-input-control{border-color:var(--kb-color-danger)}.kb-input-control:focus-visible,.kb-input[data-invalid] .kb-input-control:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px;border-color:var(--kb-color-ring);background:var(--kb-color-bg)}.kb-input[data-disabled]{opacity:.5}.kb-input[data-disabled] .kb-input-control{cursor:not-allowed;box-shadow:none}.kb-input-description{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);color:var(--kb-color-muted);line-height:1.5}.kb-input-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);color:var(--kb-color-danger);line-height:1.5}@media (hover:hover) and (pointer:fine){.kb-input:not([data-invalid]) .kb-input-control:hover:not(:disabled):not(:focus-visible){border-color:var(--kb-color-muted)}}.kb-input-shell{min-inline-size:0;display:flex;position:relative}.kb-input-start,.kb-input-end{inline-size:calc(var(--kb-space-8) + var(--kb-space-2));justify-content:center;align-items:center;display:flex;position:absolute;inset-block:0}.kb-input-start{pointer-events:none;inset-inline-start:0}.kb-input-end{inline-size:auto;inset-inline-end:var(--kb-space-1)}.kb-input[data-start-adornment] .kb-input-control{padding-inline-start:calc(var(--kb-space-8) + var(--kb-space-2))}.kb-input[data-end-adornment] .kb-input-control{padding-inline-end:calc(var(--kb-input-height-lg) + var(--kb-space-1))}.kb-input[data-end-adornment] .kb-input-control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}@media (forced-colors:active){.kb-input-control,.kb-input:not([data-invalid]) .kb-input-control:hover:not(:disabled):not(:focus-visible){color:fieldtext;box-shadow:none;background:field;border-color:buttontext}.kb-input[data-invalid] .kb-input-control{border-color:highlight}.kb-input-control:focus-visible,.kb-input[data-invalid] .kb-input-control:focus-visible{border-color:highlight;outline-color:highlight}.kb-input[data-disabled]{opacity:1}.kb-input[data-disabled] .kb-input-label,.kb-input[data-disabled] .kb-input-description,.kb-input[data-disabled] .kb-input-control,.kb-input-control:disabled{color:graytext;opacity:1;border-color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-link{color:var(--kb-link-color);font:inherit;text-underline-offset:var(--kb-link-underline-offset);overflow-wrap:anywhere;text-decoration-line:underline;text-decoration-thickness:from-font}.kb-link:hover{color:var(--kb-link-hover)}.kb-link:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px;border-radius:var(--kb-radius-sm)}@media (forced-colors:active){.kb-link{color:linktext}.kb-link:focus-visible{outline-color:highlight}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-menu{min-width:var(--kb-menu-min-width);padding:var(--kb-space-1);border-radius:var(--kb-popup-radius);background:var(--kb-popup-background);box-shadow:var(--kb-popup-shadow);color:var(--kb-color-fg);opacity:1;transition:opacity var(--kb-popup-motion-duration) var(--kb-popup-motion-easing);border:1px solid var(--kb-popup-border);background-image:linear-gradient(180deg, color-mix(in srgb, var(--kb-material-raised-top) 25%, transparent), transparent);outline:none}.kb-menu[data-starting-style],.kb-menu[data-ending-style]{opacity:0}.kb-menu-item{align-items:center;gap:var(--kb-space-2);padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-sm);font-size:var(--kb-text-control-size);cursor:default;user-select:none;line-height:var(--kb-text-leading-control);min-height:var(--kb-menu-item-height);border:1px solid #0000;outline:none;display:flex}.kb-menu-item[data-highlighted]:not([data-disabled]){background:var(--kb-color-surface);box-shadow:inset 0 0 0 1px var(--kb-color-border);border-color:#0000}.kb-menu-item:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}[data-kb-menu-trigger][data-pointer-focus]:focus-visible{outline:none}.kb-menu-item[data-disabled]{color:var(--kb-color-muted)}.kb-menu-separator{height:1px;margin:var(--kb-space-1) 0;background:var(--kb-color-border)}@media (prefers-reduced-motion:reduce){.kb-menu{transition:none}}@media (forced-colors:active){.kb-menu{border:1px solid canvastext}.kb-menu-item:focus-visible{outline-color:highlight}.kb-menu-item[data-highlighted]:not([data-disabled]):not(:focus-visible){outline-offset:-1px;outline:1px solid highlight}.kb-menu-item[data-disabled]{color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-multiselect{gap:var(--kb-input-gap);min-inline-size:0;font-family:var(--kb-font-sans);color:var(--kb-color-fg);flex-direction:column;display:flex}.kb-multiselect-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg)}.kb-multiselect-shell{align-items:center;gap:var(--kb-space-1);inline-size:100%;min-block-size:var(--kb-input-height-md);padding-block:var(--kb-space-1);padding-inline:var(--kb-space-2) var(--kb-space-1);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-input-radius);background:var(--kb-material-recessed-face);color:var(--kb-color-fg);box-shadow:var(--kb-material-field-shadow);transition:border-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-base) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard);display:flex}.kb-multiselect[data-size=sm] .kb-multiselect-shell{min-block-size:var(--kb-input-height-sm);padding-inline:var(--kb-space-2) var(--kb-space-1)}.kb-multiselect[data-size=lg] .kb-multiselect-shell{min-block-size:var(--kb-input-height-lg);padding-inline:var(--kb-space-3) var(--kb-space-2)}.kb-multiselect:not([data-disabled]):not([data-readonly]):not([data-invalid]) .kb-multiselect-shell:hover:not(:focus-within){border-color:var(--kb-color-accent)}.kb-multiselect[data-readonly] .kb-multiselect-shell{background:var(--kb-color-surface);box-shadow:none;border-style:dashed}.kb-multiselect[data-invalid] .kb-multiselect-shell{border-color:var(--kb-color-danger)}.kb-multiselect:not([data-disabled]) .kb-multiselect-shell:focus-within,.kb-multiselect[data-invalid]:not([data-disabled]) .kb-multiselect-shell:focus-within{border-color:var(--kb-color-ring);outline:2px solid var(--kb-color-ring);outline-offset:-1px}.kb-multiselect[data-disabled] .kb-multiselect-shell{opacity:.5;cursor:not-allowed;box-shadow:none}.kb-multiselect-chips{align-items:center;gap:var(--kb-multiselect-chip-gap);flex-wrap:wrap;flex:1;min-inline-size:0;display:flex}.kb-multiselect-chip{align-items:center;gap:var(--kb-space-1);max-inline-size:100%;padding-block:var(--kb-badge-padding-block);padding-inline:var(--kb-space-2) var(--kb-space-1);border:1px solid var(--kb-material-soft-border);border-radius:var(--kb-multiselect-chip-radius);background:var(--kb-material-raised-face);color:var(--kb-color-fg);box-shadow:var(--kb-material-inlay-shadow);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-medium);line-height:var(--kb-text-leading-control);outline:none;display:inline-flex}.kb-multiselect-chip:focus-visible{border-color:var(--kb-color-ring);outline:2px solid var(--kb-color-ring);outline-offset:1px}.kb-multiselect-chip-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kb-multiselect-chip-remove{border-radius:var(--kb-radius-sm);block-size:1.25em;inline-size:1.25em;color:var(--kb-color-muted);font:inherit;line-height:var(--kb-text-leading-control);cursor:pointer;transition:color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kb-multiselect-chip-remove:hover:not(:disabled):not([data-disabled]):not([aria-disabled=true]){background-color:var(--kb-color-surface);color:var(--kb-color-fg)}.kb-multiselect-chip-remove:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-1px}.kb-multiselect-chip-remove:disabled,.kb-multiselect-chip-remove[data-disabled],.kb-multiselect-chip-remove[aria-disabled=true]{cursor:not-allowed;opacity:.5}.kb-multiselect-input{min-inline-size:4em;padding-block:0;padding-inline:var(--kb-space-1);color:inherit;font:inherit;font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);background:0 0;border:0;outline:none;flex:6em}.kb-multiselect[data-size=sm] .kb-multiselect-input{font-size:var(--kb-size-sm)}.kb-multiselect[data-size=lg] .kb-multiselect-input{font-size:var(--kb-size-lg)}.kb-multiselect-input::placeholder{color:var(--kb-color-muted)}.kb-multiselect-input:disabled{cursor:not-allowed}.kb-multiselect-actions{align-self:center;align-items:center;gap:var(--kb-space-1);flex-shrink:0;display:inline-flex}.kb-multiselect-clear,.kb-multiselect-trigger{inline-size:var(--kb-multiselect-action-size);block-size:var(--kb-multiselect-action-size);border-radius:var(--kb-radius-sm);color:var(--kb-color-muted);font:inherit;font-size:var(--kb-size-sm);line-height:var(--kb-text-leading-control);cursor:pointer;transition:color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kb-multiselect-clear:hover:not(:disabled),.kb-multiselect-trigger:hover:not(:disabled){background-color:var(--kb-color-surface);color:var(--kb-color-fg)}.kb-multiselect-clear:focus-visible,.kb-multiselect-trigger:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-multiselect-clear:disabled,.kb-multiselect-trigger:disabled{cursor:not-allowed;opacity:.5}.kb-multiselect-positioner{z-index:var(--kb-multiselect-layer);max-inline-size:var(--available-width);outline:none}.kb-multiselect-popup{min-inline-size:max(var(--kb-multiselect-popup-min-width), var(--anchor-width,0px));max-block-size:min(var(--kb-multiselect-max-height), var(--available-height,var(--kb-multiselect-max-height)));padding:var(--kb-space-1);border:1px solid var(--kb-popup-border);border-radius:var(--kb-popup-radius);background-color:var(--kb-popup-background);color:var(--kb-color-fg);box-shadow:var(--kb-popup-shadow);transform-origin:var(--transform-origin);transition:opacity var(--kb-popup-motion-duration) var(--kb-popup-motion-easing), transform var(--kb-popup-motion-duration) var(--kb-popup-motion-easing);outline:none;flex-direction:column;display:flex;overflow-y:auto}.kb-multiselect-popup[data-starting-style],.kb-multiselect-popup[data-ending-style]{opacity:0;transform:scale(.98)}.kb-multiselect-list{flex-direction:column;gap:1px;display:flex}.kb-multiselect-list:empty{display:none}.kb-multiselect-option{grid-template-columns:var(--kb-space-4) minmax(0, 1fr);align-items:center;gap:var(--kb-space-2);min-block-size:var(--kb-menu-item-height);padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-sm);font-family:var(--kb-font-sans);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg);cursor:pointer;user-select:none;outline:none;display:grid}.kb-multiselect-option[data-highlighted]{background-color:var(--kb-color-surface);box-shadow:inset 0 0 0 1px var(--kb-color-border)}.kb-multiselect-option[data-selected]{font-weight:var(--kb-font-weight-medium)}.kb-multiselect-option[data-disabled]{color:var(--kb-color-muted);opacity:.6;cursor:not-allowed}.kb-multiselect-option-indicator{color:var(--kb-color-accent-ink);font-weight:var(--kb-font-weight-strong);justify-content:center;align-items:center;display:inline-flex}.kb-multiselect-option-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kb-multiselect-empty{color:var(--kb-color-muted);font-family:var(--kb-font-sans);font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body)}.kb-multiselect-empty:not(:empty){padding:var(--kb-space-2) var(--kb-space-3)}.kb-multiselect-description{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-multiselect-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-danger);margin:0}@media (prefers-reduced-motion:reduce){.kb-multiselect-shell,.kb-multiselect-chip-remove,.kb-multiselect-clear,.kb-multiselect-trigger,.kb-multiselect-popup{transition-duration:0s}}@media (forced-colors:active){.kb-multiselect-shell,.kb-multiselect[data-readonly] .kb-multiselect-shell,.kb-multiselect:not([data-disabled]):not([data-readonly]):not([data-invalid]) .kb-multiselect-shell:hover:not(:focus-within){color:fieldtext;box-shadow:none;background:field;border-color:buttonborder}.kb-multiselect[data-invalid] .kb-multiselect-shell{border-color:highlight}.kb-multiselect:not([data-disabled]) .kb-multiselect-shell:focus-within,.kb-multiselect[data-invalid]:not([data-disabled]) .kb-multiselect-shell:focus-within,.kb-multiselect-chip:focus-visible,.kb-multiselect-chip-remove:focus-visible,.kb-multiselect-clear:focus-visible,.kb-multiselect-trigger:focus-visible{border-color:highlight;outline-color:highlight}.kb-multiselect-chip{color:buttontext;box-shadow:none;background:buttonface;border-color:buttonborder}.kb-multiselect-popup{color:canvastext;box-shadow:none;background:canvas;border-color:buttonborder}.kb-multiselect-option[data-highlighted]{color:highlighttext;forced-color-adjust:none;background:highlight}.kb-multiselect-option[data-highlighted] .kb-multiselect-option-indicator{color:highlighttext}.kb-multiselect[data-disabled] .kb-multiselect-shell,.kb-multiselect[data-disabled] .kb-multiselect-chip,.kb-multiselect-option[data-disabled]{opacity:1;color:graytext;border-color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-numberfield{gap:var(--kb-space-1);min-width:0;display:grid}.kb-numberfield-label{overflow-wrap:anywhere;color:var(--kb-color-fg);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong)}.kb-numberfield-editor{min-width:0}.kb-numberfield-group{grid-template-columns:var(--kb-numberfield-step-width) minmax(0, 1fr) var(--kb-numberfield-step-width);border:var(--kb-numberfield-border-width) solid var(--kb-numberfield-border);border-radius:var(--kb-numberfield-radius);background:var(--kb-numberfield-background);color:var(--kb-numberfield-color);align-items:stretch;min-width:0;display:grid}.kb-numberfield-input,.kb-numberfield-decrement,.kb-numberfield-increment{height:calc(var(--kb-numberfield-height-md) - 2 * var(--kb-numberfield-border-width));color:inherit;min-width:0;font-size:var(--kb-numberfield-font-size);background:0 0;border:0;font-family:inherit}.kb-numberfield-input{text-align:center;width:100%;padding:0 var(--kb-space-1);font-variant-numeric:tabular-nums}.kb-numberfield-decrement,.kb-numberfield-increment{cursor:pointer;border-radius:var(--kb-numberfield-radius);font-size:var(--kb-size-lg);justify-content:center;align-items:center;padding:0;display:inline-flex}.kb-numberfield-input:focus-visible,.kb-numberfield-decrement:focus-visible,.kb-numberfield-increment:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-numberfield-decrement[data-disabled],.kb-numberfield-increment[data-disabled]{opacity:.5;cursor:not-allowed}.kb-numberfield-description,.kb-numberfield-error{font-size:var(--kb-text-small-size);overflow-wrap:anywhere;margin:0}.kb-numberfield-description{color:var(--kb-color-muted)}.kb-numberfield-error{color:var(--kb-color-danger)}.kb-numberfield[data-invalid] .kb-numberfield-group{border-color:var(--kb-color-danger)}.kb-numberfield[data-disabled]{opacity:.5}.kb-numberfield[data-disabled] .kb-numberfield-input{cursor:not-allowed}.kb-numberfield[data-size=sm] .kb-numberfield-input,.kb-numberfield[data-size=sm] .kb-numberfield-decrement,.kb-numberfield[data-size=sm] .kb-numberfield-increment{height:calc(var(--kb-numberfield-height-sm) - 2 * var(--kb-numberfield-border-width))}.kb-numberfield[data-size=lg] .kb-numberfield-input,.kb-numberfield[data-size=lg] .kb-numberfield-decrement,.kb-numberfield[data-size=lg] .kb-numberfield-increment{height:calc(var(--kb-numberfield-height-lg) - 2 * var(--kb-numberfield-border-width))}@media (forced-colors:active){.kb-numberfield-group{color:canvastext;background:canvas;border-color:canvastext}.kb-numberfield[data-invalid] .kb-numberfield-group{border-color:highlight}.kb-numberfield-input:focus-visible,.kb-numberfield-decrement:focus-visible,.kb-numberfield-increment:focus-visible{outline-color:highlight}.kb-numberfield[data-disabled]{opacity:1}.kb-numberfield[data-disabled] .kb-numberfield-label,.kb-numberfield[data-disabled] .kb-numberfield-description,.kb-numberfield[data-disabled] .kb-numberfield-group,.kb-numberfield-decrement[data-disabled],.kb-numberfield-increment[data-disabled]{color:graytext;border-color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-panel{--_panel-bg:var(--kb-panel-background);--_panel-seam:var(--kb-panel-border);--_panel-rim-top:var(--kb-panel-rim-top);--_panel-rim-bottom:var(--kb-panel-rim-bottom);--_panel-highlight:var(--kb-panel-highlight);--_panel-sheen:var(--kb-panel-sheen);--_panel-shadow:var(--kb-panel-shadow);--_panel-glow:var(--kb-panel-glow);--_panel-rail:var(--kb-panel-rail);--_panel-gap:var(--kb-space-3);--_panel-pad:var(--kb-panel-padding);isolation:isolate;gap:var(--_panel-gap);padding:var(--_panel-pad);border-radius:var(--kb-panel-radius);color:var(--kb-color-fg);flex-direction:column;display:flex;position:relative}.kb-panel-glow{z-index:-2;background:radial-gradient(closest-side, var(--_panel-glow), transparent);filter:blur(var(--kb-panel-glow-blur));pointer-events:none;border-radius:50%;position:absolute;inset:15% 4% 0}.kb-panel-plate{z-index:-1;border-radius:inherit;background:linear-gradient(to bottom, var(--_panel-sheen), transparent 55%), var(--_panel-bg);box-shadow:inset 0 1px 0 var(--_panel-highlight), var(--_panel-shadow);backdrop-filter:var(--kb-panel-backdrop);pointer-events:none;transition:background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard);position:absolute;inset:0;overflow:hidden}.kb-panel-plate:before{content:"";z-index:1;padding:var(--kb-panel-seam);border-radius:inherit;background:linear-gradient(to bottom, var(--_panel-rim-top), var(--_panel-seam) 40%, var(--_panel-seam) 70%, var(--_panel-rim-bottom));position:absolute;inset:0;mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-position:0 0,0 0;mask-size:auto,auto;mask-repeat:repeat,repeat;mask-clip:content-box,border-box;mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.kb-panel[data-tone=quiet]{--_panel-bg:transparent;--_panel-seam:color-mix(in oklab, var(--kb-panel-border) 60%, transparent);--_panel-rim-top:var(--_panel-seam);--_panel-rim-bottom:var(--_panel-seam);--_panel-highlight:transparent;--_panel-sheen:transparent;--_panel-shadow:none;--_panel-glow:transparent}.kb-panel[data-tone=sunken]{--_panel-bg:var(--kb-panel-background-sunken);--_panel-rim-top:var(--kb-panel-border);--_panel-highlight:transparent;--_panel-shadow:var(--kb-material-field-shadow)}.kb-panel[data-tone=active]{--_panel-bg:var(--kb-panel-background-active);--_panel-rim-top:var(--kb-panel-border-active);--_panel-seam:color-mix(in oklab, var(--kb-panel-border-active) 35%, var(--kb-panel-border));--_panel-rail:var(--kb-panel-rail-active);--_panel-shadow:var(--kb-panel-shadow-active);--_panel-glow:var(--kb-panel-glow-active)}.kb-panel[data-tone=critical]{--_panel-rim-top:var(--kb-panel-border-critical);--_panel-seam:color-mix(in oklab, var(--kb-panel-border-critical) 35%, var(--kb-panel-border));--_panel-rail:var(--kb-panel-border-critical);--_panel-glow:var(--kb-panel-glow-critical)}.kb-panel[data-density=compact],.kb-panel[data-nested]{--_panel-gap:var(--kb-space-2);--_panel-pad:calc(var(--kb-panel-padding) / 2)}.kb-panel[data-nested]{--_panel-shadow:none;--_panel-glow:transparent}.kb-panel-rail{background:var(--_panel-rail);width:2px;position:absolute;inset-block:0;inset-inline-start:0}.kb-panel[data-rail=accent] .kb-panel-rail{background:var(--kb-panel-rail-active)}.kb-panel[data-rail=accent],.kb-panel[data-rail=status]{padding-inline-start:calc(var(--_panel-pad) + 2px)}.kb-panel-header{justify-content:space-between;align-items:center;gap:var(--kb-space-2);font-weight:var(--kb-font-weight-strong);flex-wrap:wrap;display:flex;position:relative}.kb-panel-header:after{content:"";inset-inline:calc(var(--kb-panel-seam) - var(--_panel-pad));background:var(--kb-panel-divider);pointer-events:none;height:1px;position:absolute;inset-block-end:calc(var(--_panel-gap) / -2)}.kb-panel[data-closed]>.kb-panel-header:after{display:none}:where(.kb-panel-header) :where(h1,h2,h3,h4,h5,h6){font-size:var(--kb-panel-title-size);font-weight:var(--kb-font-weight-strong);letter-spacing:-.015em;margin:0;line-height:1.35}.kb-panel-toolbar{align-items:center;gap:var(--kb-space-1);flex-wrap:wrap;margin-inline-start:auto;display:flex}.kb-panel-toggle{align-items:center;gap:var(--kb-space-1);height:var(--kb-panel-toggle-height);padding:0 var(--kb-space-2);border-radius:var(--kb-button-radius);background:var(--kb-material-raised-face);color:var(--kb-color-fg);font:inherit;font-size:var(--kb-size-sm);font-weight:var(--kb-font-weight-medium);cursor:pointer;border:1px solid #0000;border-color:var(--kb-material-raised-border);box-shadow:var(--kb-material-raised-shadow);display:inline-flex}.kb-panel-toggle:hover{border-color:var(--kb-color-muted)}.kb-panel-toggle:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-panel-body{gap:var(--kb-space-2);min-width:0;font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body);flex-direction:column;display:flex}.kb-panel-well{min-width:0;padding:var(--kb-space-3);border-radius:var(--kb-panel-well-radius);background:var(--kb-panel-well);box-shadow:var(--kb-panel-well-shadow);border:1px solid var(--kb-material-soft-border)}.kb-panel-footer{justify-content:flex-end;align-items:center;gap:var(--kb-space-2);flex-wrap:wrap;display:flex}.kb-panel-group{gap:var(--kb-space-3);flex-direction:column;display:flex}.kb-panel-group[data-direction=row]{flex-flow:wrap}.kb-panel-group[data-direction=row]>.kb-panel{flex:16rem;min-width:0}@media (prefers-reduced-motion:reduce){.kb-panel-plate{transition:none}}.kb-panel-toggle:active{box-shadow:var(--kb-material-pressed-shadow)}.kb-panel-group:has(>.kb-panel-handle){flex-wrap:nowrap;gap:0}.kb-panel-group:has(>.kb-panel-handle)>.kb-panel{flex:1 1 0;min-width:0;min-height:0}.kb-panel-group>.kb-panel:has(+.kb-panel-handle){flex:0 0 var(--kb-panel-size,50%)}.kb-panel-handle{flex:0 0 var(--kb-panel-handle-size);touch-action:none;user-select:none;justify-content:center;align-items:center;display:flex;position:relative}.kb-panel-handle:before{content:"";position:absolute;inset:0}.kb-panel-handle[data-orientation=vertical]{cursor:col-resize}.kb-panel-handle[data-orientation=vertical]:before{inset-inline:calc((var(--kb-panel-handle-hit) - var(--kb-panel-handle-size)) / -2)}.kb-panel-handle[data-orientation=horizontal]{cursor:row-resize}.kb-panel-handle[data-orientation=horizontal]:before{inset-block:calc((var(--kb-panel-handle-hit) - var(--kb-panel-handle-size)) / -2)}.kb-panel-handle:after{content:"";border-radius:var(--kb-radius-full);background:var(--kb-panel-handle-line);transition:background var(--kb-motion-duration-fast) var(--kb-motion-easing-standard)}.kb-panel-handle[data-orientation=vertical]:after{width:var(--kb-panel-handle-line-width);height:var(--kb-panel-handle-grip)}.kb-panel-handle[data-orientation=horizontal]:after{width:var(--kb-panel-handle-grip);height:var(--kb-panel-handle-line-width)}.kb-panel-handle:hover:after,.kb-panel-handle[data-dragging]:after{background:var(--kb-panel-handle-line-active)}.kb-panel-handle:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px;border-radius:var(--kb-radius-sm)}@media (prefers-reduced-motion:reduce){.kb-panel-handle:after{transition:none}}@media (forced-colors:active){.kb-panel-handle:after{background:buttontext}.kb-panel-handle:hover:after,.kb-panel-handle[data-dragging]:after{background:highlight}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-progress{gap:var(--kb-space-1);flex-direction:column;min-width:0;display:flex}.kb-progress-head{justify-content:space-between;gap:var(--kb-space-2);font-size:var(--kb-size-sm);display:flex}.kb-progress-label{color:var(--kb-color-fg)}.kb-progress-value{color:var(--kb-color-muted);font-variant-numeric:tabular-nums}.kb-progress-track{height:var(--kb-progress-height);border-radius:var(--kb-progress-radius);background:var(--kb-progress-track);border:1px solid var(--kb-color-border);box-shadow:var(--kb-material-field-shadow)}.kb-progress-indicator{--_progress-fill:var(--kb-progress-fill);border-radius:inherit;background:var(--_progress-fill);height:100%;box-shadow:inset 0 1px 0 var(--kb-material-fill-highlight), inset 0 -1px 0 var(--kb-material-fill-shade), 0 0 var(--kb-progress-glow) var(--_progress-fill);transition:width var(--kb-motion-duration-base) var(--kb-motion-easing-standard);background-image:linear-gradient(180deg, var(--kb-material-fill-sheen), transparent)}.kb-progress[data-complete] .kb-progress-indicator{--_progress-fill:var(--kb-progress-fill-complete)}@media (prefers-reduced-motion:reduce){.kb-progress-indicator{transition:none}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-radiogroup{color:var(--kb-color-fg);gap:var(--kb-radiogroup-gap);flex-direction:column;min-inline-size:0;display:flex}.kb-radiogroup-label{overflow-wrap:anywhere;color:var(--kb-color-fg);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong)}.kb-radiogroup-item{align-items:center;gap:var(--kb-space-2);min-block-size:var(--kb-input-height-md);padding-block:var(--kb-space-2);cursor:pointer;display:flex}.kb-radiogroup-control{inline-size:var(--kb-radiogroup-size);block-size:var(--kb-radiogroup-size);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-radius-full);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);color:inherit;flex:none;justify-content:center;align-items:center;display:inline-flex}.kb-radiogroup-control[data-checked]{color:var(--kb-color-accent-fg);background:var(--kb-color-accent);border-color:var(--kb-color-accent);box-shadow:var(--kb-material-pressed-shadow)}.kb-radiogroup-control:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-radiogroup-control[data-checked]:focus-visible{outline-color:var(--kb-color-accent-fg)}.kb-radiogroup[data-invalid] .kb-radiogroup-control:not([data-checked]){border-color:var(--kb-color-danger)}.kb-radiogroup-indicator{inline-size:var(--kb-space-2);block-size:var(--kb-space-2);border-radius:var(--kb-radius-full);background:currentColor}.kb-radiogroup-item:has(.kb-radiogroup-control[data-disabled]){opacity:.5;cursor:not-allowed}.kb-radiogroup-content{overflow-wrap:anywhere;min-inline-size:0;color:inherit;font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control)}.kb-radiogroup-description,.kb-radiogroup-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);margin:0}.kb-radiogroup-description{color:var(--kb-color-muted)}.kb-radiogroup-error{color:var(--kb-color-danger)}.kb-radiogroup-options{gap:var(--kb-radiogroup-gap);flex-direction:column;min-inline-size:0;display:flex}.kb-radiogroup[data-appearance=segmented]{--kb-radiogroup-selection-bg:var(--kb-radiogroup-primary-background);--kb-radiogroup-selection-fg:var(--kb-radiogroup-primary-color);--kb-radiogroup-selection-border:var(--kb-radiogroup-primary-background);--kb-radiogroup-selection-ring:var(--kb-radiogroup-primary-color)}.kb-radiogroup[data-appearance=segmented][data-selection-tone=neutral]{--kb-radiogroup-selection-bg:var(--kb-material-raised-face);--kb-radiogroup-selection-fg:var(--kb-color-fg);--kb-radiogroup-selection-border:var(--kb-material-control-border);--kb-radiogroup-selection-ring:var(--kb-color-ring)}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-options{isolation:isolate;gap:var(--kb-space-1);padding:var(--kb-space-1);border:1px solid var(--kb-color-border);border-radius:calc(var(--kb-input-height-md) / 2 + var(--kb-space-1) + 1px);background:var(--kb-material-recessed-face);flex-flow:wrap;position:relative}.kb-radiogroup[data-appearance=segmented][data-invalid] .kb-radiogroup-options{border-color:var(--kb-color-danger)}.kb-radiogroup-selection{z-index:-1;pointer-events:none;border:1px solid var(--kb-radiogroup-selection-border);border-radius:var(--kb-radius-full);background:var(--kb-radiogroup-selection-bg);box-shadow:var(--kb-material-inlay-shadow);position:absolute;top:0;left:0}.kb-radiogroup-selection[data-disabled]{opacity:.5}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item{min-inline-size:0;padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-full);text-align:center;overflow-wrap:anywhere;color:var(--kb-color-muted);background-color:#0000;border:1px solid #0000;flex:auto;justify-content:center;position:relative}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-control{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has([data-checked]){border-color:var(--kb-radiogroup-selection-border);background:var(--kb-radiogroup-selection-bg);color:var(--kb-radiogroup-selection-fg);box-shadow:var(--kb-material-inlay-shadow)}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-options[data-selection] .kb-radiogroup-item:has([data-checked]){box-shadow:none;background:0 0;border-color:#0000}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has(:focus-visible){outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has([data-checked]):has(:focus-visible){outline-color:var(--kb-radiogroup-selection-ring)}@media (hover:hover) and (pointer:fine) and (forced-colors:none){.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:not(:has([data-checked],[data-disabled])):hover{background-color:var(--kb-color-surface);color:var(--kb-color-fg)}}@media (prefers-reduced-motion:no-preference){.kb-radiogroup[data-selection-motion=slide] .kb-radiogroup-selection{transition-property:transform,width,height;transition-duration:calc(var(--kb-motion-duration-slow) + var(--kb-motion-duration-fast));transition-timing-function:var(--kb-motion-easing-smooth)}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item{transition:background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), border-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-base) var(--kb-motion-easing-standard)}}@media (forced-colors:active){.kb-radiogroup-control{color:canvastext;background:canvas;border-color:canvastext}.kb-radiogroup-control[data-checked]{color:highlighttext;forced-color-adjust:none;background:highlight;border-color:highlight}.kb-radiogroup-control[data-disabled]{color:graytext;border-color:graytext}.kb-radiogroup-control:focus-visible,.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has(:focus-visible){outline-color:highlight}.kb-radiogroup-control[data-checked]:focus-visible{outline-color:highlighttext}.kb-radiogroup[data-invalid] .kb-radiogroup-control:not([data-checked]),.kb-radiogroup[data-appearance=segmented][data-invalid] .kb-radiogroup-options{border-color:highlight}.kb-radiogroup-indicator{forced-color-adjust:none;background:currentColor}.kb-radiogroup-selection{display:none}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item{box-shadow:none;background-image:none}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has([data-checked]),.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-options[data-selection] .kb-radiogroup-item:has([data-checked]){color:highlighttext;forced-color-adjust:none;background:highlight;border-color:highlight}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has([data-checked]):has(:focus-visible){outline-color:highlighttext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-scrollarea{border:1px solid var(--kb-color-border);border-radius:var(--kb-scrollarea-radius);background:var(--kb-material-recessed-face);min-width:0;box-shadow:var(--kb-material-field-shadow);position:relative}.kb-scrollarea-viewport{max-height:var(--_scrollarea-max-height,none);overscroll-behavior:contain;border-radius:inherit;padding:var(--kb-scrollarea-padding)}.kb-scrollarea-viewport:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-scrollarea-scrollbar{width:var(--kb-space-2);opacity:0;transition:opacity var(--kb-motion-duration-base) var(--kb-motion-easing-standard);padding:2px;display:flex}.kb-scrollarea:hover .kb-scrollarea-scrollbar,.kb-scrollarea-scrollbar[data-scrolling]{opacity:1}.kb-scrollarea-thumb{border-radius:var(--kb-radius-full);background:var(--kb-color-muted);box-shadow:var(--kb-material-scroll-thumb-shadow);flex:1}@media (prefers-reduced-motion:reduce){.kb-scrollarea-scrollbar{transition:none}}@media (forced-colors:active){.kb-scrollarea-viewport:focus-visible{outline-color:highlight}.kb-scrollarea-thumb{box-shadow:none;background:buttontext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-select{gap:var(--kb-space-1);flex-direction:column;min-width:0;display:flex}.kb-select-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);color:var(--kb-color-fg)}.kb-select-control{overflow-wrap:anywhere;justify-content:space-between;align-items:center;gap:var(--kb-space-2);width:100%;min-height:var(--kb-input-height-md);padding:var(--kb-space-2) var(--kb-space-3);border:1px solid var(--kb-color-border);border-radius:var(--kb-input-radius);background:var(--kb-material-recessed-face);color:var(--kb-color-fg);font:inherit;font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);box-shadow:var(--kb-material-field-shadow);border-color:var(--kb-material-control-border);text-align:start;cursor:pointer;transition:background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), border-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard);display:flex}.kb-select-control:focus-visible:not([data-pointer-focus]){outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-select-control[data-pointer-focus]{outline:none}.kb-select[data-invalid] .kb-select-control{border-color:var(--kb-color-danger)}.kb-select[data-disabled] .kb-select-control{opacity:.5;cursor:not-allowed}.kb-select-positioner{z-index:var(--kb-select-layer);max-width:var(--available-width)}.kb-select-portal{display:contents}.kb-select-popup{min-width:min(var(--anchor-width), var(--available-width));width:max(var(--anchor-width), var(--kb-select-popup-min-width));max-width:var(--available-width);border-radius:var(--kb-popup-radius);background:var(--kb-popup-background);color:var(--kb-color-fg);box-shadow:inset 0 0 0 1px var(--kb-popup-border), var(--kb-popup-shadow);padding:var(--kb-space-1);opacity:1;transition:opacity var(--kb-motion-duration-base) var(--kb-motion-easing-standard)}.kb-select-popup[data-starting-style],.kb-select-popup[data-ending-style]{opacity:0}.kb-select-list{max-height:min(var(--available-height), var(--kb-select-max-height));overflow:auto}.kb-select-item{justify-content:space-between;align-items:center;gap:var(--kb-space-3);padding:var(--kb-space-2) var(--kb-space-3);min-height:var(--kb-input-height-md);border-radius:var(--kb-radius-sm);font-size:var(--kb-text-control-size);cursor:default;overflow-wrap:anywhere;outline:none;display:flex}.kb-select-item[data-highlighted]{background:var(--kb-color-surface);box-shadow:inset 0 0 0 1px var(--kb-color-border)}.kb-select-item[data-disabled]{color:var(--kb-color-muted);opacity:.6}.kb-select-item:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-select-description,.kb-select-empty{overflow-wrap:anywhere;color:var(--kb-color-muted);font-size:var(--kb-text-small-size);margin:0}.kb-select-empty{padding:var(--kb-space-3)}.kb-select-error{overflow-wrap:anywhere;color:var(--kb-color-danger);font-size:var(--kb-text-small-size);margin:0}@media (prefers-reduced-motion:reduce){.kb-select-control,.kb-select-popup{transition:none}}@media (forced-colors:active){.kb-select-control:focus-visible:not([data-pointer-focus]),.kb-select-item:focus-visible{outline-color:highlight}.kb-select-control{border-color:buttontext}.kb-select[data-invalid] .kb-select-control{border-color:highlight}.kb-select[data-disabled] .kb-select-control,.kb-select-item[data-disabled]{color:graytext;opacity:1;border-color:graytext}.kb-select-popup{border:1px solid canvastext}.kb-select-item[data-highlighted]:not(:focus-visible){outline-offset:-1px;outline:1px solid highlight}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-separator{box-sizing:border-box;border:0;border-block-start:var(--kb-separator-width) solid var(--kb-separator-color);flex-shrink:0;block-size:0;inline-size:100%;min-inline-size:0;margin:0;padding:0}.kb-separator[data-orientation=vertical]{block-size:auto;inline-size:0;min-block-size:var(--kb-separator-min-length);border-block-start:0;border-inline-start:var(--kb-separator-width) solid var(--kb-separator-color);align-self:stretch}@media (forced-colors:active){.kb-separator{border-color:canvastext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-split{--_split-threshold:var(--kb-split-collapse-md);--_split-gap:var(--kb-layout-gap-md);gap:var(--_split-gap);overflow-wrap:anywhere;flex-wrap:wrap;align-items:stretch;min-inline-size:0;display:flex}.kb-split>.kb-split-track{--_split-share:.5;box-sizing:border-box;flex-grow:1;flex-shrink:1;flex-basis:min(100%, max(calc((var(--_split-threshold) - 100%) * 99999), calc((100% - var(--_split-gap)) * var(--_split-share))));grid-template-columns:minmax(0,1fr);min-inline-size:0;max-inline-size:100%;display:grid}.kb-split[data-ratio=wide-start]>.kb-split-track:first-child,.kb-split[data-ratio=wide-end]>.kb-split-track:last-child{--_split-share:calc(2 / 3)}.kb-split[data-ratio=wide-start]>.kb-split-track:last-child,.kb-split[data-ratio=wide-end]>.kb-split-track:first-child{--_split-share:calc(1 / 3)}.kb-split[data-collapse=sm]{--_split-threshold:var(--kb-split-collapse-sm)}.kb-split[data-collapse=lg]{--_split-threshold:var(--kb-split-collapse-lg)}.kb-split[data-gap=none]{--_split-gap:0px}.kb-split[data-gap=sm]{--_split-gap:var(--kb-layout-gap-sm)}.kb-split[data-gap=lg]{--_split-gap:var(--kb-layout-gap-lg)}.kb-split[data-align=start]{align-items:flex-start}.kb-split[data-align=center]{align-items:center}.kb-split[data-align=end]{align-items:flex-end}.kb-split[data-align=baseline]{align-items:baseline}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-stat{gap:var(--kb-stat-gap);flex-direction:column;display:inline-flex}.kb-stat-label{color:var(--kb-color-muted);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-medium);letter-spacing:0;text-transform:none}.kb-stat-value{color:var(--kb-color-fg);font-size:var(--kb-stat-value-size);font-weight:var(--kb-font-weight-strong);font-variant-numeric:tabular-nums;letter-spacing:-.035em;line-height:1}.kb-stat[data-size=display] .kb-stat-value{font-size:var(--kb-stat-display-size);font-weight:var(--kb-stat-display-weight);letter-spacing:-.035em}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-status{--_status-ink:var(--kb-status-neutral);align-items:center;gap:var(--kb-space-2);font-size:var(--kb-text-caption-size);font-weight:var(--kb-font-weight-strong);color:var(--_status-ink);letter-spacing:0;line-height:1.25;display:inline-flex}.kb-status[data-tone=info]{--_status-ink:var(--kb-status-info)}.kb-status[data-tone=running]{--_status-ink:var(--kb-status-running)}.kb-status[data-tone=success]{--_status-ink:var(--kb-status-success)}.kb-status[data-tone=warning]{--_status-ink:var(--kb-status-warning)}.kb-status[data-tone=blocked]{--_status-ink:var(--kb-status-blocked)}.kb-status[data-appearance=chip]{padding:var(--kb-status-padding-block) var(--kb-status-padding-inline);border:1px solid color-mix(in oklab, var(--_status-ink) 45%, transparent);border-radius:var(--kb-status-radius);background:color-mix(in oklab, var(--_status-ink) 12%, transparent);color:color-mix(in oklab, var(--_status-ink) 70%, var(--kb-color-fg));gap:var(--kb-status-gap);background-image:linear-gradient(180deg, var(--kb-material-soft-sheen), transparent);box-shadow:var(--kb-material-inlay-shadow)}.kb-status[data-appearance=chip][data-compact]{padding:var(--kb-status-compact-padding-block) var(--kb-status-compact-padding-inline)}.kb-status[data-compact]{gap:var(--kb-status-compact-gap);font-size:var(--kb-status-compact-size)}.kb-status-icon{width:1em;height:1em;color:inherit;flex:none;display:inline-flex}.kb-status[data-appearance=chip]>.kb-status-icon{color:var(--_status-ink);filter:drop-shadow(0 0 var(--kb-status-glow) var(--_status-ink))}.kb-status-icon>*{width:100%;height:100%}.kb-status-text{white-space:nowrap}.kb-status[data-appearance=chip]:before{content:"";width:var(--kb-status-dot-size);height:var(--kb-status-dot-size);background:currentColor;border-radius:50%;flex:none}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-switch{--_switch-off-color:var(--kb-switch-off-color,var(--kb-color-accent));--_switch-on-color:var(--kb-switch-on-color,var(--kb-color-accent));gap:var(--kb-space-1);min-inline-size:0;color:var(--kb-color-fg);display:grid}.kb-fieldset .kb-switch:not([data-size]),.kb-switch[data-size=sm]{--kb-switch-width:var(--kb-switch-sm-width);--kb-switch-height:var(--kb-switch-sm-height);--kb-switch-inset:var(--kb-switch-sm-inset);--kb-switch-icon-size:var(--kb-switch-sm-icon-size)}.kb-switch[data-size=md]{--kb-switch-width:var(--kb-switch-md-width);--kb-switch-height:var(--kb-switch-md-height);--kb-switch-inset:var(--kb-switch-md-inset);--kb-switch-icon-size:var(--kb-switch-md-icon-size)}.kb-switch[data-size=lg]{--kb-switch-width:var(--kb-switch-lg-width);--kb-switch-height:var(--kb-switch-lg-height);--kb-switch-inset:var(--kb-switch-lg-inset);--kb-switch-icon-size:var(--kb-switch-lg-icon-size)}.kb-switch[data-off-tone=accent]{--_switch-off-color:var(--kb-color-accent)}.kb-switch[data-off-tone=info]{--_switch-off-color:var(--kb-color-info)}.kb-switch[data-off-tone=success]{--_switch-off-color:var(--kb-color-success)}.kb-switch[data-off-tone=warning]{--_switch-off-color:var(--kb-color-warning)}.kb-switch[data-off-tone=danger]{--_switch-off-color:var(--kb-color-danger)}.kb-switch[data-on-tone=accent]{--_switch-on-color:var(--kb-color-accent)}.kb-switch[data-on-tone=info]{--_switch-on-color:var(--kb-color-info)}.kb-switch[data-on-tone=success]{--_switch-on-color:var(--kb-color-success)}.kb-switch[data-on-tone=warning]{--_switch-on-color:var(--kb-color-warning)}.kb-switch[data-on-tone=danger]{--_switch-on-color:var(--kb-color-danger)}.kb-switch-field{align-items:center;gap:var(--kb-space-3);min-inline-size:0;display:flex}.kb-switch-target{min-inline-size:var(--kb-button-touch-min);min-block-size:var(--kb-button-touch-min);inline-size:var(--kb-switch-width);block-size:var(--kb-switch-height);flex:none;place-items:center;display:inline-grid;position:relative}.kb-switch-control{z-index:1;opacity:0;cursor:pointer;touch-action:manipulation;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.kb-switch-track{box-sizing:border-box;inline-size:var(--kb-switch-width);block-size:var(--kb-switch-height);padding:var(--kb-switch-inset);border:1px solid var(--kb-switch-track-border);border-radius:var(--kb-switch-radius);background:var(--kb-switch-track-background);box-shadow:var(--kb-switch-track-shadow);pointer-events:none;grid-template-columns:repeat(2,1fr);align-items:center;display:grid;position:relative}.kb-switch-thumb{box-sizing:border-box;inline-size:calc(var(--kb-switch-height) - var(--kb-switch-inset) * 2 - 2px);block-size:calc(var(--kb-switch-height) - var(--kb-switch-inset) * 2 - 2px);border:1px solid var(--kb-switch-thumb-border);border-radius:var(--kb-switch-radius);background:var(--kb-switch-thumb-background);box-shadow:var(--kb-switch-thumb-shadow);position:absolute;inset-block-start:var(--kb-switch-inset);inset-inline-start:var(--kb-switch-inset);transform:translate(0)}.kb-switch-off,.kb-switch-on{inline-size:var(--kb-switch-icon-size);block-size:var(--kb-switch-icon-size);justify-self:center;place-items:center;display:grid;position:relative}.kb-switch-off>*,.kb-switch-on>*{block-size:100%;inline-size:100%}.kb-switch-on{opacity:.55}:where(.kb-switch[data-off-tone]:not([data-off-tone=neutral])) .kb-switch-control:where(:not(:checked))+.kb-switch-track{background-color:color-mix(in oklab, var(--_switch-off-color) 28%, var(--kb-material-field-bg));background-image:linear-gradient(180deg, color-mix(in oklab, var(--_switch-off-color) 18%, transparent), color-mix(in oklab, var(--_switch-off-color) 32%, transparent));border-color:color-mix(in oklab, var(--_switch-off-color) 68%, var(--kb-material-raised-border))}:where(.kb-switch[data-off-tone]:not([data-off-tone=neutral])) .kb-switch-control:where(:not(:checked))+.kb-switch-track .kb-switch-thumb{border-color:color-mix(in oklab, var(--_switch-off-color) 55%, var(--kb-switch-thumb-border))}:where(.kb-switch[data-off-tone]:not([data-off-tone=neutral])) .kb-switch-control:where(:not(:checked))+.kb-switch-track .kb-switch-off{color:color-mix(in oklab, var(--_switch-off-color) 80%, var(--kb-color-fg))}:where(.kb-switch:not([data-on-tone=neutral])) .kb-switch-control:where(:checked)+.kb-switch-track{background-color:color-mix(in oklab, var(--_switch-on-color) 28%, var(--kb-material-field-bg));background-image:linear-gradient(180deg, color-mix(in oklab, var(--_switch-on-color) 18%, transparent), color-mix(in oklab, var(--_switch-on-color) 32%, transparent));border-color:color-mix(in oklab, var(--_switch-on-color) 68%, var(--kb-material-raised-border))}:where(.kb-switch:not([data-on-tone=neutral])) .kb-switch-control:where(:checked)+.kb-switch-track .kb-switch-thumb{border-color:color-mix(in oklab, var(--_switch-on-color) 55%, var(--kb-switch-thumb-border))}:where(.kb-switch:not([data-on-tone=neutral])) .kb-switch-control:where(:checked)+.kb-switch-track .kb-switch-on{color:color-mix(in oklab, var(--_switch-on-color) 80%, var(--kb-color-fg))}.kb-switch-control:checked+.kb-switch-track .kb-switch-off{opacity:.55}.kb-switch-control:checked+.kb-switch-track .kb-switch-on{opacity:1}.kb-switch-control:checked+.kb-switch-track .kb-switch-thumb{transform:translateX(calc(var(--kb-switch-width) - var(--kb-switch-height)))}.kb-switch:dir(rtl) .kb-switch-control:checked+.kb-switch-track .kb-switch-thumb{transform:translateX(calc(var(--kb-switch-height) - var(--kb-switch-width)))}.kb-switch-control:focus-visible+.kb-switch-track{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-switch[data-invalid] .kb-switch-track{border-color:var(--kb-color-danger)}.kb-switch-label{overflow-wrap:anywhere;min-inline-size:0;font-size:var(--kb-text-control-size);font-weight:var(--kb-font-weight-medium);line-height:var(--kb-text-leading-control);cursor:pointer}.kb-switch-description,.kb-switch-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-switch-error{color:var(--kb-color-danger)}.kb-switch-control[readonly],.kb-switch[data-readonly] .kb-switch-label{cursor:default}.kb-switch-control:disabled+.kb-switch-track,.kb-switch:has(.kb-switch-control:disabled) .kb-switch-label{opacity:.5}.kb-switch-control:disabled,.kb-switch:has(.kb-switch-control:disabled) .kb-switch-label{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){.kb-switch-thumb{transition:transform var(--kb-switch-duration) var(--kb-motion-easing-standard)}.kb-switch-track{transition:background-color var(--kb-switch-duration) var(--kb-motion-easing-standard), border-color var(--kb-switch-duration) var(--kb-motion-easing-standard), box-shadow var(--kb-switch-duration) var(--kb-motion-easing-standard)}.kb-switch-off,.kb-switch-on{transition:opacity var(--kb-switch-duration) var(--kb-motion-easing-smooth), color var(--kb-switch-duration) var(--kb-motion-easing-smooth)}}@media (forced-colors:active){.kb-switch,.kb-switch-description,.kb-switch-error,.kb-switch-off,.kb-switch-on{color:canvastext}.kb-switch .kb-switch-control+.kb-switch-track{box-shadow:none;background:canvas;border-color:buttontext}.kb-switch .kb-switch-control+.kb-switch-track .kb-switch-thumb{box-shadow:none;background:buttonface;border-color:buttontext}.kb-switch .kb-switch-control:checked+.kb-switch-track,.kb-switch[data-invalid] .kb-switch-control+.kb-switch-track{border-color:highlight}.kb-switch .kb-switch-control:focus-visible+.kb-switch-track{outline-color:highlight}.kb-switch .kb-switch-control:disabled+.kb-switch-track,.kb-switch .kb-switch-control:disabled+.kb-switch-track .kb-switch-thumb,.kb-switch:has(.kb-switch-control:disabled) .kb-switch-label,.kb-switch[data-disabled] .kb-switch-description{color:graytext;opacity:1;border-color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-text{min-inline-size:0;max-inline-size:var(--kb-text-measure);font-family:var(--kb-font-sans);font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-fg);overflow-wrap:anywhere;margin:0}.kb-text[data-size=sm]{font-size:var(--kb-text-small-size)}.kb-text[data-size=lg]{font-size:var(--kb-size-lg)}.kb-text[data-tone=muted]{color:var(--kb-text-muted)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-textarea{gap:var(--kb-space-1);flex-direction:column;min-inline-size:0;display:flex}.kb-textarea-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg)}.kb-textarea-control{box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;min-block-size:var(--kb-textarea-min-height);padding-block:var(--kb-textarea-padding-block);padding-inline:var(--kb-textarea-padding-inline);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-radius-md);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-body);resize:vertical}.kb-textarea[data-resize=none] .kb-textarea-control{resize:none}.kb-textarea[data-resize=both] .kb-textarea-control{resize:both}.kb-textarea-control::placeholder{color:var(--kb-color-muted)}@media (hover:hover) and (pointer:fine){.kb-textarea:not([data-invalid]) .kb-textarea-control:hover:not(:disabled):not(:focus-visible){border-color:var(--kb-color-muted)}}.kb-textarea[data-invalid] .kb-textarea-control{border-color:var(--kb-color-danger)}.kb-textarea-control:focus-visible,.kb-textarea[data-readonly] .kb-textarea-control:focus-visible,.kb-textarea[data-invalid] .kb-textarea-control:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px;border-color:var(--kb-color-ring);background:var(--kb-color-bg)}.kb-textarea[data-disabled],.kb-textarea:has(.kb-textarea-control:disabled){opacity:.5}.kb-textarea[data-disabled] .kb-textarea-control,.kb-textarea-control:disabled{cursor:not-allowed;box-shadow:none;resize:none}.kb-textarea[data-readonly] .kb-textarea-control,.kb-textarea-control[readonly]{background:var(--kb-color-surface);cursor:default}.kb-textarea-description,.kb-textarea-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);margin:0}.kb-textarea-description{color:var(--kb-color-muted)}.kb-textarea-error{color:var(--kb-color-danger)}@media (prefers-reduced-motion:no-preference){.kb-textarea-control{transition:border-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-fast) var(--kb-motion-easing-standard)}}@media (forced-colors:active){.kb-textarea-control,.kb-textarea[data-readonly] .kb-textarea-control,.kb-textarea:not([data-invalid]) .kb-textarea-control:hover:not(:disabled):not(:focus-visible){color:fieldtext;box-shadow:none;background:field;border-color:buttontext}.kb-textarea[data-invalid] .kb-textarea-control{border-color:highlight}.kb-textarea-control:focus-visible,.kb-textarea[data-readonly] .kb-textarea-control:focus-visible,.kb-textarea[data-invalid] .kb-textarea-control:focus-visible{border-color:highlight;outline-color:highlight}.kb-textarea[data-disabled],.kb-textarea:has(.kb-textarea-control:disabled){opacity:1}.kb-textarea[data-disabled] .kb-textarea-label,.kb-textarea:has(.kb-textarea-control:disabled) .kb-textarea-label,.kb-textarea[data-disabled] .kb-textarea-description,.kb-textarea:has(.kb-textarea-control:disabled) .kb-textarea-description,.kb-textarea[data-disabled] .kb-textarea-control,.kb-textarea-control:disabled{color:graytext;opacity:1;border-color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-toolbar{align-items:center;gap:var(--kb-space-1);width:fit-content;max-width:100%;padding:var(--kb-toolbar-padding);border:1px solid var(--kb-color-border);border-radius:var(--kb-toolbar-radius);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);flex-wrap:wrap;display:flex}.kb-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch}.kb-toolbar-group{align-items:center;gap:var(--kb-space-1);flex-wrap:wrap;display:flex}.kb-toolbar-separator{width:1px;margin:var(--kb-space-1) var(--kb-space-1);background:var(--kb-color-border);align-self:stretch}.kb-toolbar[data-orientation=vertical] .kb-toolbar-separator{width:auto;height:1px}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-tooltip{max-width:18rem;padding:var(--kb-tooltip-padding-block) var(--kb-tooltip-padding-inline);border-radius:var(--kb-radius-sm);background:var(--kb-popup-background);box-shadow:var(--kb-popup-shadow);color:var(--kb-color-fg);font-size:var(--kb-text-small-size);opacity:1;transition:opacity var(--kb-popup-motion-duration) var(--kb-popup-motion-easing);border:1px solid var(--kb-popup-border);background-image:linear-gradient(180deg, color-mix(in srgb, var(--kb-material-raised-top) 25%, transparent), transparent);line-height:1.5}.kb-tooltip[data-starting-style],.kb-tooltip[data-ending-style]{opacity:0}@media (prefers-reduced-motion:reduce){.kb-tooltip{transition:none}}@media (forced-colors:active){.kb-tooltip{color:canvastext;box-shadow:none;background:canvas;border-color:canvastext}}}
|
package/dist/reset.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.reset{*,:before,:after{box-sizing:border-box}html{font-family:var(--kb-font-sans);color:var(--kb-color-fg);background:var(--kb-color-bg);-webkit-text-size-adjust:100%}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}.kb-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}body{font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--kb-font-sans);font-weight:var(--kb-font-weight-strong);color:var(--kb-color-fg);text-wrap:pretty;margin:0}:where(h1){font-size:var(--kb-text-h1-size);letter-spacing:-.035em;line-height:1.15}:where(h2){font-size:var(--kb-text-h2-size);letter-spacing:-.025em;line-height:1.25}:where(h3){font-size:var(--kb-text-h3-size);letter-spacing:-.018em;line-height:1.35}:where(h4,h5,h6){font-size:var(--kb-text-h4-size);letter-spacing:-.01em;line-height:1.4}:where(p){line-height:var(--kb-text-leading-body);text-wrap:pretty;margin:0}:where(p+p){margin-block-start:.65em}:where(h1,h2,h3,h4)+p{margin-block-start:.45em}:where(strong,b){font-weight:var(--kb-font-weight-strong)}:where(small){font-size:var(--kb-text-small-size);line-height:1.5}:where(ul,ol){margin-block:.75em;padding-inline-start:1.4em}:where(li+li){margin-block-start:.3em}:where(code,pre){font-family:var(--kb-font-mono);font-size:max(var(--kb-text-small-size), .875em)}:where(pre){font-size:var(--kb-text-small-size);line-height:1.6}:where(pre code){font-size:inherit;line-height:inherit}@media (prefers-reduced-motion:no-preference){html,body,:where(.kb-button,.kb-input-control,.kb-input-label,.kb-input-description,.kb-input-error,.kb-card,.kb-panel-plate,.kb-menu-item,.kb-tooltip,.kb-badge,.kb-status,.kb-stat-label,.kb-stat-value,.kb-progress-track,.kb-scrollarea){transition-property:background-color,border-color,color,box-shadow;transition-duration:var(--kb-motion-duration-theme);transition-timing-function:var(--kb-motion-easing-smooth)}}@media (forced-colors:active){:root{--kb-color-bg:Canvas;--kb-color-surface:Canvas;--kb-color-fg:CanvasText;--kb-text-muted:CanvasText;--kb-color-border:CanvasText}}}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.tokens{:where(:root){--kb-white:#fff;--kb-black:#000;--kb-gray-50:#fafafa;--kb-gray-100:#f4f4f5;--kb-gray-200:#e4e4e7;--kb-gray-300:#d4d4d8;--kb-gray-400:#a1a1aa;--kb-gray-500:#71717a;--kb-gray-600:#52525b;--kb-gray-700:#3f3f46;--kb-gray-800:#27272a;--kb-gray-900:#18181b;--kb-gray-950:#09090b;--kb-blue-400:#60a5fa;--kb-blue-500:#3b82f6;--kb-blue-600:#2563eb;--kb-blue-700:#1d4ed8;--kb-red-400:#f87171;--kb-red-500:#ef4444;--kb-red-600:#dc2626;--kb-amber-400:#fbbf24;--kb-amber-500:#f59e0b;--kb-amber-600:#d97706;--kb-amber-700:#b45309;--kb-green-400:#4ade80;--kb-green-500:#22c55e;--kb-green-600:#16a34a;--kb-green-700:#15803d;--kb-teal-400:#2dd4bf;--kb-teal-500:#14b8a6;--kb-teal-600:#0d9488;--kb-teal-700:#0f766e;--kb-space-1:.25rem;--kb-space-2:.5rem;--kb-space-3:.75rem;--kb-space-4:1rem;--kb-space-5:1.25rem;--kb-space-6:1.5rem;--kb-space-8:2rem;--kb-radius-sm:.25rem;--kb-radius-md:.5rem;--kb-radius-lg:.875rem;--kb-radius-full:9999px;--kb-font-sans:"Helvetica Neue", Helvetica, Arial, sans-serif;--kb-font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;--kb-font-weight-regular:400;--kb-font-weight-medium:500;--kb-font-weight-strong:600;--kb-size-xs:.75rem;--kb-size-sm:.875rem;--kb-size-md:1rem;--kb-size-lg:1.125rem;--kb-size-display:2.5rem;--kb-motion-duration-fast:80ms;--kb-motion-duration-base:.16s;--kb-motion-duration-slow:.24s;--kb-motion-duration-theme:.22s;--kb-motion-easing-standard:cubic-bezier(.2, 0, 0, 1);--kb-motion-easing-enter:cubic-bezier(0, 0, .2, 1);--kb-motion-easing-exit:cubic-bezier(.4, 0, 1, 1);--kb-motion-easing-smooth:ease;--kb-color-bg:#f5f6f8;--kb-color-fg:#242831;--kb-color-muted:#5d6572;--kb-color-surface:#e9ecf1;--kb-color-border:#ccd1da;--kb-color-accent:#ed5a24;--kb-color-accent-hover:#ff753b;--kb-color-accent-fg:#25160f;--kb-color-danger:#a33444;--kb-color-danger-hover:#852537;--kb-color-danger-fg:#fffdf5;--kb-color-info:#276c69;--kb-color-info-fg:var(--kb-white);--kb-color-success:#32654f;--kb-color-success-fg:var(--kb-white);--kb-color-warning:#875b13;--kb-color-warning-fg:var(--kb-white);--kb-color-ring:#ba421b;--kb-color-overlay:#00000080;--kb-color-accent-ink:#b43c17;--kb-color-action:var(--kb-color-accent);--kb-color-action-hover:var(--kb-color-accent-hover);--kb-color-action-fg:var(--kb-color-accent-fg);--kb-viz-current:#2f5fa8;--kb-viz-current-bg:#e3ebf7;--kb-viz-current-fg:#1f3f73;--kb-viz-visited:#276c69;--kb-viz-visited-bg:#dcefe9;--kb-viz-visited-fg:#1d4f4c;--kb-viz-changed:var(--kb-color-warning);--kb-viz-changed-bg:#f8e7c4;--kb-viz-changed-fg:#5e3d08;--kb-viz-error:var(--kb-color-danger);--kb-viz-error-bg:#f6dfe0;--kb-viz-error-fg:#7d2433;--kb-viz-discarded:var(--kb-color-muted);--kb-viz-discarded-bg:var(--kb-color-surface);--kb-viz-discarded-fg:var(--kb-color-muted);--kb-viz-frontier:var(--kb-viz-current);--kb-viz-frontier-bg:var(--kb-viz-current-bg);--kb-viz-frontier-fg:var(--kb-viz-current-fg);--kb-viz-path:var(--kb-color-accent-ink);--kb-viz-path-bg:#f6e0d6;--kb-viz-path-fg:#7f2f1c;--kb-card-background:var(--kb-material-surface-bg);--kb-card-color:var(--kb-color-fg);--kb-card-border:var(--kb-material-control-border);--kb-card-border-width:1px;--kb-card-radius:var(--kb-radius-lg);--kb-card-padding:1.5rem;--kb-card-padding-compact:20px;--kb-card-face:linear-gradient(180deg, var(--kb-material-action-sheen), transparent 60%);--kb-card-shadow:var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px #24283138;--kb-grid-gap:var(--kb-space-6);--kb-grid-min-item-width:18.75rem;--kb-button-radius:var(--kb-radius-md);--kb-button-motion-duration:.14s;--kb-button-motion-easing:ease;--kb-button-press-offset:1px;--kb-button-height-sm:34px;--kb-button-height-md:40px;--kb-button-height-lg:46px;--kb-button-padding-sm:11px;--kb-button-padding-md:15px;--kb-button-padding-lg:20px;--kb-button-icon-size:1.125rem;--kb-button-touch-min:44px;--kb-input-radius:var(--kb-radius-md);--kb-input-height-sm:2.25rem;--kb-input-height-md:2.75rem;--kb-input-height-lg:3rem;--kb-input-gap:7px;--kb-numberfield-radius:var(--kb-input-radius);--kb-numberfield-background:var(--kb-color-bg);--kb-numberfield-color:var(--kb-color-fg);--kb-numberfield-border:var(--kb-color-border);--kb-numberfield-border-width:1px;--kb-numberfield-step-width:3rem;--kb-numberfield-font-size:var(--kb-size-md);--kb-numberfield-height-sm:var(--kb-input-height-sm);--kb-numberfield-height-md:var(--kb-input-height-md);--kb-numberfield-height-lg:var(--kb-input-height-lg);--kb-fileinput-radius:var(--kb-button-radius);--kb-fileinput-action-height:var(--kb-input-height-lg);--kb-fileinput-border-width:1px;--kb-dialog-radius:1rem;--kb-dialog-width:28rem;--kb-dialog-background:var(--kb-material-surface-bg);--kb-dialog-color:var(--kb-color-fg);--kb-dialog-border:var(--kb-color-border);--kb-dialog-border-width:1px;--kb-dialog-padding:var(--kb-space-6);--kb-dialog-shadow:var(--kb-material-float-shadow);--kb-dialog-description-color:var(--kb-color-muted);--kb-dialog-overlay-background:var(--kb-color-overlay);--kb-dialog-motion-duration:.15s;--kb-dialog-motion-easing:ease;--kb-dialog-enter-scale:.96;--kb-dialog-enter-offset:0px;--kb-dialog-title-size:23px;--kb-dialog-title-family:inherit;--kb-dialog-title-weight:var(--kb-font-weight-strong);--kb-dialog-header-padding:0px;--kb-dialog-body-padding:0px;--kb-dialog-footer-padding:0px;--kb-panel-background:var(--kb-material-surface-bg);--kb-panel-background-active:var(--kb-material-surface-bg);--kb-panel-background-sunken:var(--kb-material-field-bg);--kb-panel-border:var(--kb-color-border);--kb-panel-border-active:var(--kb-color-accent);--kb-panel-border-critical:var(--kb-color-danger);--kb-panel-rim-top:var(--kb-material-raised-top);--kb-panel-rim-bottom:var(--kb-color-border);--kb-panel-seam:1px;--kb-panel-radius:var(--kb-radius-lg);--kb-panel-highlight:transparent;--kb-panel-divider:var(--kb-material-soft-border);--kb-panel-sheen:transparent;--kb-panel-backdrop:none;--kb-panel-glow:transparent;--kb-panel-glow-active:transparent;--kb-panel-glow-critical:transparent;--kb-panel-glow-blur:12px;--kb-panel-shadow:var(--kb-material-panel-shadow);--kb-panel-shadow-active:var(--kb-material-raised-shadow);--kb-panel-well:var(--kb-material-field-bg);--kb-panel-well-radius:var(--kb-radius-md);--kb-panel-well-shadow:var(--kb-material-field-shadow);--kb-panel-padding:var(--kb-space-4);--kb-panel-rail:var(--kb-color-border);--kb-panel-rail-active:var(--kb-color-accent);--kb-panel-title-size:17px;--kb-panel-toggle-height:2rem;--kb-panel-handle-size:var(--kb-space-3);--kb-panel-handle-hit:1.5rem;--kb-panel-handle-grip:2rem;--kb-panel-handle-line-width:2px;--kb-panel-handle-line:var(--kb-color-border);--kb-panel-handle-line-active:var(--kb-color-accent);--kb-popup-motion-duration:var(--kb-motion-duration-fast);--kb-popup-motion-easing:var(--kb-motion-easing-standard);--kb-popup-background:var(--kb-material-surface-bg);--kb-popup-border:var(--kb-color-border);--kb-popup-radius:.625rem;--kb-popup-shadow:var(--kb-material-float-shadow);--kb-checkbox-size:1.5rem;--kb-progress-track:var(--kb-material-recessed-face);--kb-progress-fill:var(--kb-color-accent);--kb-progress-fill-complete:var(--kb-color-success);--kb-progress-height:6px;--kb-progress-glow:0px;--kb-progress-radius:var(--kb-radius-full);--kb-stat-display-size:var(--kb-size-display);--kb-stat-display-weight:600;--kb-stat-gap:10px;--kb-stat-value-size:24px;--kb-status-neutral:var(--kb-color-muted);--kb-status-info:var(--kb-color-info);--kb-status-running:var(--kb-color-accent-ink);--kb-status-success:var(--kb-color-success);--kb-status-warning:var(--kb-color-warning);--kb-status-blocked:var(--kb-color-danger);--kb-status-radius:var(--kb-radius-full);--kb-status-glow:0px;--kb-status-gap:6px;--kb-status-padding-block:5px;--kb-status-padding-inline:9px;--kb-status-compact-gap:var(--kb-space-1);--kb-status-compact-padding-block:3px;--kb-status-compact-padding-inline:6px;--kb-status-compact-size:11px;--kb-status-dot-size:5px;--kb-material-chrome-bg:#242831;--kb-material-chrome-fg:#f5f6f8;--kb-material-chrome-muted:#c7cdd7;--kb-material-field-bg:#f8f9fb;--kb-material-control-border:#858e9d;--kb-material-soft-border:#e0e4eb;--kb-material-raised-top:#fff;--kb-material-raised-bottom:#e9edf3;--kb-material-raised-border:#858e9d;--kb-material-raised-shadow:inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #2428310f, 0 1px 2px #1a22301f, 0 3px 5px -3px #1a22301f;--kb-material-pressed-shadow:inset 0 1px 3px #24283129, inset 0 -1px 0 #ffffff80;--kb-material-accent-shadow:inset 0 1px 0 #ffffff40, inset 0 -1px 0 #24283124, 0 1px 2px #24283124, 0 3px 5px -2px #2428312e;--kb-material-panel-shadow:inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #24283109, 0 1px 2px #1a22301f, 0 8px 24px -12px #1a22301f;--kb-material-field-shadow:inset 0 1px 2px #2428311a, inset 0 -1px 0 #ffffffe6, 0 1px 0 #ffffffbf;--kb-material-inlay-shadow:inset 0 1px 0 #ffffffa6, inset 0 -1px 0 #2428310a, 0 1px 1px #24283109;--kb-material-float-shadow:inset 0 1px 0 #fffffff2, 0 2px 5px #24283124, 0 24px 64px -16px #24283152;--kb-material-action-sheen:#ffffff14;--kb-material-soft-sheen:#ffffff1a;--kb-material-fill-sheen:#ffffff40;--kb-material-fill-highlight:#ffffff4d;--kb-material-fill-shade:#24283126;--kb-material-raised-face:linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-material-raised-bottom));--kb-material-recessed-face:linear-gradient(180deg, color-mix(in srgb, var(--kb-material-field-bg) 96%, var(--kb-color-fg)), var(--kb-material-field-bg));--kb-material-scroll-thumb-shadow:inset 0 1px 0 #fff3, 0 1px 2px #0000002e;--kb-material-surface-bg:#fff;--kb-text-body-size:15px;--kb-text-small-size:13px;--kb-text-control-size:14px;--kb-text-leading-body:1.6;--kb-text-leading-control:1.4;--kb-text-caption-size:12px;--kb-text-h1-size:32px;--kb-text-h2-size:22px;--kb-text-h3-size:18px;--kb-text-h4-size:16px;--kb-text-measure:65ch;--kb-text-muted:var(--kb-color-muted);--kb-radiogroup-primary-background:var(--kb-color-action);--kb-radiogroup-primary-color:var(--kb-color-action-fg);--kb-radiogroup-gap:var(--kb-space-2);--kb-radiogroup-size:1.5rem;--kb-select-popup-min-width:10rem;--kb-select-max-height:20rem;--kb-select-layer:50;--kb-combobox-popup-min-width:12rem;--kb-combobox-max-height:20rem;--kb-combobox-layer:50;--kb-combobox-action-size:1.75rem;--kb-multiselect-popup-min-width:12rem;--kb-multiselect-max-height:20rem;--kb-multiselect-layer:50;--kb-multiselect-chip-gap:var(--kb-space-1);--kb-multiselect-chip-radius:var(--kb-radius-sm);--kb-multiselect-action-size:1.75rem;--kb-switch-width:44px;--kb-switch-height:24px;--kb-switch-inset:2px;--kb-switch-sm-width:36px;--kb-switch-sm-height:20px;--kb-switch-sm-inset:2px;--kb-switch-sm-icon-size:10px;--kb-switch-md-width:var(--kb-switch-width);--kb-switch-md-height:var(--kb-switch-height);--kb-switch-md-inset:var(--kb-switch-inset);--kb-switch-md-icon-size:var(--kb-switch-icon-size);--kb-switch-lg-width:56px;--kb-switch-lg-height:32px;--kb-switch-lg-inset:3px;--kb-switch-lg-icon-size:15px;--kb-switch-radius:var(--kb-radius-full);--kb-switch-track-background:var(--kb-material-recessed-face);--kb-switch-track-border:var(--kb-material-raised-border);--kb-switch-track-shadow:var(--kb-material-field-shadow);--kb-switch-thumb-background:var(--kb-material-raised-face);--kb-switch-thumb-border:var(--kb-material-raised-border);--kb-switch-thumb-shadow:var(--kb-material-raised-shadow);--kb-switch-icon-size:12px;--kb-switch-duration:.22s;--kb-badge-radius:5px;--kb-badge-padding-block:.125rem;--kb-callout-radius:10px;--kb-callout-padding-block:var(--kb-space-4);--kb-callout-padding-inline:18px;--kb-menu-min-width:10rem;--kb-menu-item-height:40px;--kb-scrollarea-radius:10px;--kb-scrollarea-padding:var(--kb-space-3);--kb-toolbar-radius:12px;--kb-toolbar-padding:6px;--kb-tooltip-padding-block:var(--kb-space-2);--kb-tooltip-padding-inline:var(--kb-space-3);--kb-heading-size-sm:var(--kb-text-h4-size);--kb-heading-size-md:var(--kb-text-h3-size);--kb-heading-size-lg:var(--kb-text-h2-size);--kb-heading-size-xl:var(--kb-text-h1-size);--kb-heading-size-display:var(--kb-size-display);--kb-heading-weight:var(--kb-font-weight-strong);--kb-heading-leading:1.25;--kb-heading-tracking:-.025em;--kb-link-color:var(--kb-color-accent-ink);--kb-link-hover:var(--kb-color-fg);--kb-link-underline-offset:.18em;--kb-code-size:max(var(--kb-text-small-size), .875em);--kb-code-background:var(--kb-color-surface);--kb-code-border:var(--kb-color-border);--kb-code-radius:var(--kb-radius-sm);--kb-container-size-sm:40rem;--kb-container-size-md:64rem;--kb-container-size-lg:80rem;--kb-container-gutter:clamp(1rem, 4vw, 2rem);--kb-layout-gap-sm:var(--kb-space-2);--kb-layout-gap-md:var(--kb-space-4);--kb-layout-gap-lg:var(--kb-space-6);--kb-split-collapse-sm:32rem;--kb-split-collapse-md:48rem;--kb-split-collapse-lg:64rem;--kb-separator-color:var(--kb-color-border);--kb-separator-width:1px;--kb-separator-min-length:var(--kb-space-4);--kb-textarea-min-height:6rem;--kb-textarea-padding-block:var(--kb-space-2);--kb-textarea-padding-inline:var(--kb-space-3);--kb-fieldset-gap:var(--kb-space-3);--kb-fieldset-fields-gap:var(--kb-space-4);--kb-fieldset-legend-size:var(--kb-text-h4-size);--kb-formactions-gap:var(--kb-space-2);--kb-formactions-padding-top:var(--kb-space-4);--kb-errorsummary-padding:var(--kb-space-4);--kb-errorsummary-radius:var(--kb-radius-md);--kb-errorsummary-gap:var(--kb-space-2);color-scheme:light}:where([data-theme=light]){--kb-color-bg:#f5f6f8;--kb-color-fg:#242831;--kb-color-muted:#5d6572;--kb-color-surface:#e9ecf1;--kb-color-border:#ccd1da;--kb-color-accent:#ed5a24;--kb-color-accent-hover:#ff753b;--kb-color-accent-fg:#25160f;--kb-color-danger:#a33444;--kb-color-danger-hover:#852537;--kb-color-danger-fg:#fffdf5;--kb-color-info:#276c69;--kb-color-info-fg:var(--kb-white);--kb-color-success:#32654f;--kb-color-success-fg:var(--kb-white);--kb-color-warning:#875b13;--kb-color-warning-fg:var(--kb-white);--kb-color-ring:#ba421b;--kb-color-overlay:#00000080;--kb-color-accent-ink:#b43c17;--kb-color-action:var(--kb-color-accent);--kb-color-action-hover:var(--kb-color-accent-hover);--kb-color-action-fg:var(--kb-color-accent-fg);--kb-viz-current:#2f5fa8;--kb-viz-current-bg:#e3ebf7;--kb-viz-current-fg:#1f3f73;--kb-viz-visited:#276c69;--kb-viz-visited-bg:#dcefe9;--kb-viz-visited-fg:#1d4f4c;--kb-viz-changed:var(--kb-color-warning);--kb-viz-changed-bg:#f8e7c4;--kb-viz-changed-fg:#5e3d08;--kb-viz-error:var(--kb-color-danger);--kb-viz-error-bg:#f6dfe0;--kb-viz-error-fg:#7d2433;--kb-viz-discarded:var(--kb-color-muted);--kb-viz-discarded-bg:var(--kb-color-surface);--kb-viz-discarded-fg:var(--kb-color-muted);--kb-viz-frontier:var(--kb-viz-current);--kb-viz-frontier-bg:var(--kb-viz-current-bg);--kb-viz-frontier-fg:var(--kb-viz-current-fg);--kb-viz-path:var(--kb-color-accent-ink);--kb-viz-path-bg:#f6e0d6;--kb-viz-path-fg:#7f2f1c;--kb-card-background:var(--kb-material-surface-bg);--kb-card-color:var(--kb-color-fg);--kb-card-border:var(--kb-material-control-border);--kb-card-shadow:var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px #24283138;--kb-numberfield-background:var(--kb-color-bg);--kb-numberfield-color:var(--kb-color-fg);--kb-numberfield-border:var(--kb-color-border);--kb-dialog-background:var(--kb-material-surface-bg);--kb-dialog-color:var(--kb-color-fg);--kb-dialog-border:var(--kb-color-border);--kb-dialog-shadow:var(--kb-material-float-shadow);--kb-dialog-description-color:var(--kb-color-muted);--kb-dialog-overlay-background:var(--kb-color-overlay);--kb-panel-background:var(--kb-material-surface-bg);--kb-panel-background-active:var(--kb-material-surface-bg);--kb-panel-background-sunken:var(--kb-material-field-bg);--kb-panel-border:var(--kb-color-border);--kb-panel-border-active:var(--kb-color-accent);--kb-panel-border-critical:var(--kb-color-danger);--kb-panel-rim-top:var(--kb-material-raised-top);--kb-panel-rim-bottom:var(--kb-color-border);--kb-panel-divider:var(--kb-material-soft-border);--kb-panel-shadow:var(--kb-material-panel-shadow);--kb-panel-shadow-active:var(--kb-material-raised-shadow);--kb-panel-well:var(--kb-material-field-bg);--kb-panel-well-shadow:var(--kb-material-field-shadow);--kb-panel-rail:var(--kb-color-border);--kb-panel-rail-active:var(--kb-color-accent);--kb-panel-handle-line:var(--kb-color-border);--kb-panel-handle-line-active:var(--kb-color-accent);--kb-popup-background:var(--kb-material-surface-bg);--kb-popup-border:var(--kb-color-border);--kb-popup-shadow:var(--kb-material-float-shadow);--kb-progress-track:var(--kb-material-recessed-face);--kb-progress-fill:var(--kb-color-accent);--kb-progress-fill-complete:var(--kb-color-success);--kb-status-neutral:var(--kb-color-muted);--kb-status-info:var(--kb-color-info);--kb-status-running:var(--kb-color-accent-ink);--kb-status-success:var(--kb-color-success);--kb-status-warning:var(--kb-color-warning);--kb-status-blocked:var(--kb-color-danger);--kb-material-chrome-bg:#242831;--kb-material-chrome-fg:#f5f6f8;--kb-material-chrome-muted:#c7cdd7;--kb-material-field-bg:#f8f9fb;--kb-material-control-border:#858e9d;--kb-material-soft-border:#e0e4eb;--kb-material-raised-top:#fff;--kb-material-raised-bottom:#e9edf3;--kb-material-raised-border:#858e9d;--kb-material-raised-shadow:inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #2428310f, 0 1px 2px #1a22301f, 0 3px 5px -3px #1a22301f;--kb-material-pressed-shadow:inset 0 1px 3px #24283129, inset 0 -1px 0 #ffffff80;--kb-material-accent-shadow:inset 0 1px 0 #ffffff40, inset 0 -1px 0 #24283124, 0 1px 2px #24283124, 0 3px 5px -2px #2428312e;--kb-material-panel-shadow:inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #24283109, 0 1px 2px #1a22301f, 0 8px 24px -12px #1a22301f;--kb-material-field-shadow:inset 0 1px 2px #2428311a, inset 0 -1px 0 #ffffffe6, 0 1px 0 #ffffffbf;--kb-material-inlay-shadow:inset 0 1px 0 #ffffffa6, inset 0 -1px 0 #2428310a, 0 1px 1px #24283109;--kb-material-float-shadow:inset 0 1px 0 #fffffff2, 0 2px 5px #24283124, 0 24px 64px -16px #24283152;--kb-material-raised-face:linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-material-raised-bottom));--kb-material-recessed-face:linear-gradient(180deg, color-mix(in srgb, var(--kb-material-field-bg) 96%, var(--kb-color-fg)), var(--kb-material-field-bg));--kb-material-surface-bg:#fff;--kb-text-muted:var(--kb-color-muted);--kb-radiogroup-primary-background:var(--kb-color-action);--kb-radiogroup-primary-color:var(--kb-color-action-fg);--kb-switch-track-background:var(--kb-material-recessed-face);--kb-switch-track-border:var(--kb-material-raised-border);--kb-switch-track-shadow:var(--kb-material-field-shadow);--kb-switch-thumb-background:var(--kb-material-raised-face);--kb-switch-thumb-border:var(--kb-material-raised-border);--kb-switch-thumb-shadow:var(--kb-material-raised-shadow);--kb-link-color:var(--kb-color-accent-ink);--kb-link-hover:var(--kb-color-fg);--kb-code-background:var(--kb-color-surface);--kb-code-border:var(--kb-color-border);--kb-separator-color:var(--kb-color-border);color-scheme:light}:where([data-theme=dark]){--kb-color-bg:#17191d;--kb-color-fg:#f2f4f8;--kb-color-muted:#b9bfca;--kb-color-surface:#1e2229;--kb-color-border:#4b525e;--kb-color-accent:#ff8457;--kb-color-accent-hover:#ffa17f;--kb-color-accent-fg:#28150e;--kb-color-danger:#ff9f9f;--kb-color-danger-hover:#ffc6c6;--kb-color-danger-fg:#331c20;--kb-color-info:#a2c7eb;--kb-color-info-fg:var(--kb-gray-950);--kb-color-success:#a5c9b3;--kb-color-success-fg:var(--kb-gray-950);--kb-color-warning:#e5c477;--kb-color-warning-fg:var(--kb-gray-950);--kb-color-ring:#ff8457;--kb-color-overlay:#000000b3;--kb-color-accent-ink:#ffa17f;--kb-color-action:#b54517;--kb-color-action-hover:#9e3915;--kb-color-action-fg:var(--kb-white);--kb-viz-current:#8fb4f0;--kb-viz-current-bg:#1e2c44;--kb-viz-current-fg:#c9dbfa;--kb-viz-visited:#7cc9bf;--kb-viz-visited-bg:#173431;--kb-viz-visited-fg:#b9e6df;--kb-viz-changed:var(--kb-color-warning);--kb-viz-changed-bg:#3a2e14;--kb-viz-changed-fg:#f2dca6;--kb-viz-error:var(--kb-color-danger);--kb-viz-error-bg:#3d1f24;--kb-viz-error-fg:#ffc6c6;--kb-viz-discarded:var(--kb-color-muted);--kb-viz-discarded-bg:var(--kb-color-surface);--kb-viz-discarded-fg:var(--kb-color-muted);--kb-viz-frontier:var(--kb-viz-current);--kb-viz-frontier-bg:var(--kb-viz-current-bg);--kb-viz-frontier-fg:var(--kb-viz-current-fg);--kb-viz-path:var(--kb-color-accent-ink);--kb-viz-path-bg:#3a2219;--kb-viz-path-fg:#ffc0a6;--kb-card-background:var(--kb-material-surface-bg);--kb-card-color:var(--kb-color-fg);--kb-card-border:var(--kb-material-control-border);--kb-card-shadow:var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px #0000008c;--kb-numberfield-background:var(--kb-color-bg);--kb-numberfield-color:var(--kb-color-fg);--kb-numberfield-border:var(--kb-color-border);--kb-dialog-background:var(--kb-material-surface-bg);--kb-dialog-color:var(--kb-color-fg);--kb-dialog-border:var(--kb-color-border);--kb-dialog-shadow:var(--kb-material-float-shadow);--kb-dialog-description-color:var(--kb-color-muted);--kb-dialog-overlay-background:var(--kb-color-overlay);--kb-panel-background:var(--kb-material-surface-bg);--kb-panel-background-active:var(--kb-material-surface-bg);--kb-panel-background-sunken:var(--kb-material-field-bg);--kb-panel-border:var(--kb-color-border);--kb-panel-border-active:var(--kb-color-accent);--kb-panel-border-critical:var(--kb-color-danger);--kb-panel-rim-top:var(--kb-material-raised-top);--kb-panel-rim-bottom:var(--kb-color-border);--kb-panel-divider:var(--kb-material-soft-border);--kb-panel-shadow:var(--kb-material-panel-shadow);--kb-panel-shadow-active:var(--kb-material-raised-shadow);--kb-panel-well:var(--kb-material-field-bg);--kb-panel-well-shadow:var(--kb-material-field-shadow);--kb-panel-rail:var(--kb-color-border);--kb-panel-rail-active:var(--kb-color-accent);--kb-panel-handle-line:var(--kb-color-border);--kb-panel-handle-line-active:var(--kb-color-accent);--kb-popup-background:var(--kb-material-surface-bg);--kb-popup-border:var(--kb-color-border);--kb-popup-shadow:var(--kb-material-float-shadow);--kb-progress-track:var(--kb-material-recessed-face);--kb-progress-fill:var(--kb-color-accent);--kb-progress-fill-complete:var(--kb-color-success);--kb-status-neutral:var(--kb-color-muted);--kb-status-info:var(--kb-color-info);--kb-status-running:var(--kb-color-accent-ink);--kb-status-success:var(--kb-color-success);--kb-status-warning:var(--kb-color-warning);--kb-status-blocked:var(--kb-color-danger);--kb-material-chrome-bg:#101318;--kb-material-chrome-fg:var(--kb-color-fg);--kb-material-chrome-muted:var(--kb-color-muted);--kb-material-field-bg:#14181e;--kb-material-control-border:#8b95a6;--kb-material-soft-border:#353d49;--kb-material-raised-top:#3b424f;--kb-material-raised-bottom:#2a303b;--kb-material-raised-border:#8b95a6;--kb-material-raised-shadow:inset 0 1px 0 #e8efff1f, inset 0 -1px 0 #00000038, 0 1px 2px #00000059, 0 3px 5px -3px #00000059;--kb-material-pressed-shadow:inset 0 2px 3px #00000080, inset 0 -1px 0 #ffffff1a;--kb-material-accent-shadow:inset 0 1px 0 #ffffff4d, inset 0 -1px 0 #0003, 0 1px 2px #00000059, 0 3px 5px -2px #00000073;--kb-material-panel-shadow:inset 0 1px 0 #e8efff1f, inset 0 -1px 0 #00000038, 0 1px 2px #00000059, 0 8px 24px -12px #00000059;--kb-material-field-shadow:inset 0 2px 3px #00000073, inset 0 -1px 0 #ffffff1a, 0 1px 0 #ffffff12;--kb-material-inlay-shadow:inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000026, 0 1px 1px #0000002e;--kb-material-float-shadow:inset 0 1px 0 #ffffff24, 0 2px 5px #0006, 0 24px 64px -16px #000000a6;--kb-material-raised-face:linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-material-raised-bottom));--kb-material-recessed-face:linear-gradient(180deg, color-mix(in srgb, var(--kb-material-field-bg) 65%, var(--kb-material-chrome-bg)), var(--kb-material-field-bg));--kb-material-surface-bg:#252931;--kb-text-muted:var(--kb-color-muted);--kb-radiogroup-primary-background:var(--kb-color-action);--kb-radiogroup-primary-color:var(--kb-color-action-fg);--kb-switch-track-background:var(--kb-material-recessed-face);--kb-switch-track-border:var(--kb-material-raised-border);--kb-switch-track-shadow:var(--kb-material-field-shadow);--kb-switch-thumb-background:var(--kb-material-raised-face);--kb-switch-thumb-border:var(--kb-material-raised-border);--kb-switch-thumb-shadow:var(--kb-material-raised-shadow);--kb-link-color:var(--kb-color-accent-ink);--kb-link-hover:var(--kb-color-fg);--kb-code-background:var(--kb-color-surface);--kb-code-border:var(--kb-color-border);--kb-separator-color:var(--kb-color-border);color-scheme:dark}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])){--kb-color-bg:#17191d;--kb-color-fg:#f2f4f8;--kb-color-muted:#b9bfca;--kb-color-surface:#1e2229;--kb-color-border:#4b525e;--kb-color-accent:#ff8457;--kb-color-accent-hover:#ffa17f;--kb-color-accent-fg:#28150e;--kb-color-danger:#ff9f9f;--kb-color-danger-hover:#ffc6c6;--kb-color-danger-fg:#331c20;--kb-color-info:#a2c7eb;--kb-color-info-fg:var(--kb-gray-950);--kb-color-success:#a5c9b3;--kb-color-success-fg:var(--kb-gray-950);--kb-color-warning:#e5c477;--kb-color-warning-fg:var(--kb-gray-950);--kb-color-ring:#ff8457;--kb-color-overlay:#000000b3;--kb-color-accent-ink:#ffa17f;--kb-color-action:#b54517;--kb-color-action-hover:#9e3915;--kb-color-action-fg:var(--kb-white);--kb-viz-current:#8fb4f0;--kb-viz-current-bg:#1e2c44;--kb-viz-current-fg:#c9dbfa;--kb-viz-visited:#7cc9bf;--kb-viz-visited-bg:#173431;--kb-viz-visited-fg:#b9e6df;--kb-viz-changed:var(--kb-color-warning);--kb-viz-changed-bg:#3a2e14;--kb-viz-changed-fg:#f2dca6;--kb-viz-error:var(--kb-color-danger);--kb-viz-error-bg:#3d1f24;--kb-viz-error-fg:#ffc6c6;--kb-viz-discarded:var(--kb-color-muted);--kb-viz-discarded-bg:var(--kb-color-surface);--kb-viz-discarded-fg:var(--kb-color-muted);--kb-viz-frontier:var(--kb-viz-current);--kb-viz-frontier-bg:var(--kb-viz-current-bg);--kb-viz-frontier-fg:var(--kb-viz-current-fg);--kb-viz-path:var(--kb-color-accent-ink);--kb-viz-path-bg:#3a2219;--kb-viz-path-fg:#ffc0a6;--kb-card-background:var(--kb-material-surface-bg);--kb-card-color:var(--kb-color-fg);--kb-card-border:var(--kb-material-control-border);--kb-card-shadow:var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px #0000008c;--kb-numberfield-background:var(--kb-color-bg);--kb-numberfield-color:var(--kb-color-fg);--kb-numberfield-border:var(--kb-color-border);--kb-dialog-background:var(--kb-material-surface-bg);--kb-dialog-color:var(--kb-color-fg);--kb-dialog-border:var(--kb-color-border);--kb-dialog-shadow:var(--kb-material-float-shadow);--kb-dialog-description-color:var(--kb-color-muted);--kb-dialog-overlay-background:var(--kb-color-overlay);--kb-panel-background:var(--kb-material-surface-bg);--kb-panel-background-active:var(--kb-material-surface-bg);--kb-panel-background-sunken:var(--kb-material-field-bg);--kb-panel-border:var(--kb-color-border);--kb-panel-border-active:var(--kb-color-accent);--kb-panel-border-critical:var(--kb-color-danger);--kb-panel-rim-top:var(--kb-material-raised-top);--kb-panel-rim-bottom:var(--kb-color-border);--kb-panel-divider:var(--kb-material-soft-border);--kb-panel-shadow:var(--kb-material-panel-shadow);--kb-panel-shadow-active:var(--kb-material-raised-shadow);--kb-panel-well:var(--kb-material-field-bg);--kb-panel-well-shadow:var(--kb-material-field-shadow);--kb-panel-rail:var(--kb-color-border);--kb-panel-rail-active:var(--kb-color-accent);--kb-panel-handle-line:var(--kb-color-border);--kb-panel-handle-line-active:var(--kb-color-accent);--kb-popup-background:var(--kb-material-surface-bg);--kb-popup-border:var(--kb-color-border);--kb-popup-shadow:var(--kb-material-float-shadow);--kb-progress-track:var(--kb-material-recessed-face);--kb-progress-fill:var(--kb-color-accent);--kb-progress-fill-complete:var(--kb-color-success);--kb-status-neutral:var(--kb-color-muted);--kb-status-info:var(--kb-color-info);--kb-status-running:var(--kb-color-accent-ink);--kb-status-success:var(--kb-color-success);--kb-status-warning:var(--kb-color-warning);--kb-status-blocked:var(--kb-color-danger);--kb-material-chrome-bg:#101318;--kb-material-chrome-fg:var(--kb-color-fg);--kb-material-chrome-muted:var(--kb-color-muted);--kb-material-field-bg:#14181e;--kb-material-control-border:#8b95a6;--kb-material-soft-border:#353d49;--kb-material-raised-top:#3b424f;--kb-material-raised-bottom:#2a303b;--kb-material-raised-border:#8b95a6;--kb-material-raised-shadow:inset 0 1px 0 #e8efff1f, inset 0 -1px 0 #00000038, 0 1px 2px #00000059, 0 3px 5px -3px #00000059;--kb-material-pressed-shadow:inset 0 2px 3px #00000080, inset 0 -1px 0 #ffffff1a;--kb-material-accent-shadow:inset 0 1px 0 #ffffff4d, inset 0 -1px 0 #0003, 0 1px 2px #00000059, 0 3px 5px -2px #00000073;--kb-material-panel-shadow:inset 0 1px 0 #e8efff1f, inset 0 -1px 0 #00000038, 0 1px 2px #00000059, 0 8px 24px -12px #00000059;--kb-material-field-shadow:inset 0 2px 3px #00000073, inset 0 -1px 0 #ffffff1a, 0 1px 0 #ffffff12;--kb-material-inlay-shadow:inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000026, 0 1px 1px #0000002e;--kb-material-float-shadow:inset 0 1px 0 #ffffff24, 0 2px 5px #0006, 0 24px 64px -16px #000000a6;--kb-material-raised-face:linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-material-raised-bottom));--kb-material-recessed-face:linear-gradient(180deg, color-mix(in srgb, var(--kb-material-field-bg) 65%, var(--kb-material-chrome-bg)), var(--kb-material-field-bg));--kb-material-surface-bg:#252931;--kb-text-muted:var(--kb-color-muted);--kb-radiogroup-primary-background:var(--kb-color-action);--kb-radiogroup-primary-color:var(--kb-color-action-fg);--kb-switch-track-background:var(--kb-material-recessed-face);--kb-switch-track-border:var(--kb-material-raised-border);--kb-switch-track-shadow:var(--kb-material-field-shadow);--kb-switch-thumb-background:var(--kb-material-raised-face);--kb-switch-thumb-border:var(--kb-material-raised-border);--kb-switch-thumb-shadow:var(--kb-material-raised-shadow);--kb-link-color:var(--kb-color-accent-ink);--kb-link-hover:var(--kb-color-fg);--kb-code-background:var(--kb-color-surface);--kb-code-border:var(--kb-color-border);--kb-separator-color:var(--kb-color-border);color-scheme:dark}}@media (forced-colors:active){:where(:root,[data-theme]){--kb-viz-current:Highlight;--kb-viz-current-bg:Highlight;--kb-viz-current-fg:HighlightText;--kb-viz-visited:LinkText;--kb-viz-visited-bg:Canvas;--kb-viz-visited-fg:LinkText;--kb-viz-changed:CanvasText;--kb-viz-changed-bg:Mark;--kb-viz-changed-fg:MarkText;--kb-viz-error:CanvasText;--kb-viz-error-bg:Canvas;--kb-viz-error-fg:CanvasText;--kb-viz-discarded:GrayText;--kb-viz-discarded-bg:Canvas;--kb-viz-discarded-fg:GrayText;--kb-viz-frontier:LinkText;--kb-viz-frontier-bg:Canvas;--kb-viz-frontier-fg:LinkText;--kb-viz-path:CanvasText;--kb-viz-path-bg:Canvas;--kb-viz-path-fg:CanvasText}}}@layer kbui.reset{*,:before,:after{box-sizing:border-box}html{font-family:var(--kb-font-sans);color:var(--kb-color-fg);background:var(--kb-color-bg);-webkit-text-size-adjust:100%}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}.kb-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}body{font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--kb-font-sans);font-weight:var(--kb-font-weight-strong);color:var(--kb-color-fg);text-wrap:pretty;margin:0}:where(h1){font-size:var(--kb-text-h1-size);letter-spacing:-.035em;line-height:1.15}:where(h2){font-size:var(--kb-text-h2-size);letter-spacing:-.025em;line-height:1.25}:where(h3){font-size:var(--kb-text-h3-size);letter-spacing:-.018em;line-height:1.35}:where(h4,h5,h6){font-size:var(--kb-text-h4-size);letter-spacing:-.01em;line-height:1.4}:where(p){line-height:var(--kb-text-leading-body);text-wrap:pretty;margin:0}:where(p+p){margin-block-start:.65em}:where(h1,h2,h3,h4)+p{margin-block-start:.45em}:where(strong,b){font-weight:var(--kb-font-weight-strong)}:where(small){font-size:var(--kb-text-small-size);line-height:1.5}:where(ul,ol){margin-block:.75em;padding-inline-start:1.4em}:where(li+li){margin-block-start:.3em}:where(code,pre){font-family:var(--kb-font-mono);font-size:max(var(--kb-text-small-size), .875em)}:where(pre){font-size:var(--kb-text-small-size);line-height:1.6}:where(pre code){font-size:inherit;line-height:inherit}@media (prefers-reduced-motion:no-preference){html,body,:where(.kb-button,.kb-input-control,.kb-input-label,.kb-input-description,.kb-input-error,.kb-card,.kb-panel-plate,.kb-menu-item,.kb-tooltip,.kb-badge,.kb-status,.kb-stat-label,.kb-stat-value,.kb-progress-track,.kb-scrollarea){transition-property:background-color,border-color,color,box-shadow;transition-duration:var(--kb-motion-duration-theme);transition-timing-function:var(--kb-motion-easing-smooth)}}@media (forced-colors:active){:root{--kb-color-bg:Canvas;--kb-color-surface:Canvas;--kb-color-fg:CanvasText;--kb-text-muted:CanvasText;--kb-color-border:CanvasText}}}@layer kbui.components{.kb-badge{--_badge-ink:var(--kb-color-muted);align-items:center;gap:var(--kb-space-1);padding:var(--kb-badge-padding-block) var(--kb-space-2);border-radius:var(--kb-badge-radius);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--_badge-ink) 35%, transparent);background:color-mix(in oklab, var(--_badge-ink) 10%, transparent);color:color-mix(in oklab, var(--_badge-ink) 70%, var(--kb-color-fg));font-size:var(--kb-text-caption-size);font-weight:var(--kb-font-weight-medium);white-space:nowrap;line-height:1.4;display:inline-flex}.kb-badge[data-tone=info]{--_badge-ink:var(--kb-color-info)}.kb-badge[data-tone=success]{--_badge-ink:var(--kb-color-success)}.kb-badge[data-tone=warning]{--_badge-ink:var(--kb-color-warning)}.kb-badge[data-tone=danger]{--_badge-ink:var(--kb-color-danger)}.kb-badge[data-mono]{font-family:var(--kb-font-mono);letter-spacing:.06em;text-transform:uppercase}.kb-badge[data-preserve-case]{letter-spacing:normal;text-transform:none}.kb-badge[data-appearance=plain]{box-shadow:none;background:0 0;padding:0}.kb-badge:not([data-appearance=plain]){border:1px solid color-mix(in srgb, currentColor 22%, transparent);box-shadow:var(--kb-material-inlay-shadow);background-image:linear-gradient(180deg, var(--kb-material-soft-sheen), transparent)}.kb-button{justify-content:center;align-items:center;gap:var(--kb-space-2);height:var(--kb-button-height-md);padding:0 var(--kb-button-padding-md);font-size:var(--kb-text-control-size);border-radius:var(--kb-button-radius);font-weight:var(--kb-font-weight-strong);cursor:pointer;letter-spacing:-.01em;border:1px solid #0000;line-height:1;text-decoration:none;display:inline-flex}.kb-button:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-button[data-variant=primary]:focus-visible{outline-color:var(--kb-color-action-fg)}.kb-button[data-variant=danger]:focus-visible{outline-color:var(--kb-color-danger-fg)}.kb-button[data-size=sm]{height:var(--kb-button-height-sm);padding:0 var(--kb-button-padding-sm);font-size:var(--kb-text-small-size)}.kb-button[data-size=icon]{width:var(--kb-button-height-md);height:var(--kb-button-height-md);padding:0}.kb-button[data-size=icon]>svg{width:var(--kb-button-icon-size);height:var(--kb-button-icon-size)}.kb-button[data-size=lg]{height:var(--kb-button-height-lg);padding:0 var(--kb-button-padding-lg);font-size:var(--kb-text-body-size)}.kb-button[data-variant=primary]{background:var(--kb-color-action);color:var(--kb-color-action-fg)}.kb-button[data-variant=primary]:hover:not([data-disabled]){background-color:var(--kb-color-action-hover)}.kb-button[data-variant=secondary]{background:var(--kb-material-raised-face);border-color:var(--kb-material-raised-border);color:var(--kb-color-fg);box-shadow:var(--kb-material-raised-shadow)}.kb-button[data-variant=secondary]:hover:not([data-disabled]){border-color:var(--kb-color-muted)}.kb-button[data-variant=ghost]{color:var(--kb-color-muted);background:0 0}.kb-button[data-variant=ghost]:hover:not([data-disabled]){background:var(--kb-color-surface)}.kb-button[data-variant=danger]{background:var(--kb-color-danger);color:var(--kb-color-danger-fg);border-color:color-mix(in srgb, var(--kb-color-danger) 85%, var(--kb-color-fg))}.kb-button[data-variant=danger]:hover:not([data-disabled]){background-color:var(--kb-color-danger-hover)}@media (prefers-reduced-motion:reduce){.kb-button{transition:none}}.kb-button:is([data-variant=primary],[data-variant=danger]){background-image:linear-gradient(180deg, var(--kb-material-action-sheen), transparent);border-color:color-mix(in srgb, var(--kb-color-action) 85%, var(--kb-color-fg));box-shadow:var(--kb-material-accent-shadow)}.kb-button[data-variant=danger]{border-color:color-mix(in srgb, var(--kb-color-danger) 85%, var(--kb-color-fg))}@media (hover:hover) and (pointer:fine){.kb-button[data-variant=secondary]:hover:not([data-disabled]){border-color:var(--kb-material-control-border)}.kb-button[data-variant=ghost]:not([aria-pressed=true]):hover:not([data-disabled]){background:color-mix(in srgb, var(--kb-color-accent) 7%, var(--kb-color-bg));color:var(--kb-color-fg)}}.kb-button:not([data-variant=ghost]):active:not([data-disabled]){box-shadow:var(--kb-material-pressed-shadow)}@media (prefers-reduced-motion:no-preference){.kb-button{transition:background-color var(--kb-button-motion-duration) var(--kb-button-motion-easing), border-color var(--kb-button-motion-duration) var(--kb-button-motion-easing), box-shadow var(--kb-button-motion-duration) var(--kb-button-motion-easing), color var(--kb-button-motion-duration) var(--kb-button-motion-easing)}.kb-button:active:not([data-disabled]){transform:translateY(var(--kb-button-press-offset))}}@media (width<=580px){.kb-button{min-height:var(--kb-button-touch-min)}.kb-button[data-size=icon]{min-width:var(--kb-button-touch-min)}}.kb-button[data-disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;background-image:none}@media (forced-colors:active){.kb-button{box-shadow:none}.kb-button[data-variant],.kb-button[data-variant]:hover:not([data-disabled]),.kb-button[data-variant=ghost]:not([aria-pressed=true]):hover:not([data-disabled]){color:buttontext;background:buttonface;border-color:buttontext}.kb-button:focus-visible,.kb-button[data-variant]:focus-visible{outline-color:highlight}.kb-button[data-variant][data-disabled]{color:graytext;opacity:1;border-color:graytext}}.kb-callout{--_callout-ink:var(--kb-color-muted);gap:var(--kb-space-3);padding:var(--kb-callout-padding-block) var(--kb-callout-padding-inline);border-radius:var(--kb-callout-radius);background:color-mix(in oklab, var(--_callout-ink) 8%, transparent);box-shadow:var(--kb-material-inlay-shadow);color:var(--kb-color-fg);font-size:var(--kb-text-control-size);border:1px solid var(--kb-color-border);display:flex}.kb-callout[data-tone=info]{--_callout-ink:var(--kb-color-info)}.kb-callout[data-tone=success]{--_callout-ink:var(--kb-color-success)}.kb-callout[data-tone=warning]{--_callout-ink:var(--kb-color-warning)}.kb-callout[data-tone=danger]{--_callout-ink:var(--kb-color-danger)}.kb-callout-icon{width:1.25em;height:1.25em;color:var(--_callout-ink);flex:none;display:inline-flex}.kb-callout-icon>*{width:100%;height:100%}.kb-callout-content{gap:var(--kb-space-1);flex-direction:column;min-width:0;display:flex}.kb-callout-title{font-weight:var(--kb-font-weight-strong)}.kb-callout-actions{gap:var(--kb-space-2);margin-top:var(--kb-space-2);flex-wrap:wrap;display:flex}.kb-card{min-inline-size:0;position:relative}.kb-card[data-appearance=outlined]{padding:var(--kb-card-padding);border:var(--kb-card-border-width) solid var(--kb-card-border);border-radius:var(--kb-card-radius);background-color:var(--kb-card-background);background-image:var(--kb-card-face);color:var(--kb-card-color);box-shadow:var(--kb-card-shadow);flex-direction:column;display:flex}.kb-card>:where(p){font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body)}@media (width<=580px){.kb-card{--kb-card-padding:var(--kb-card-padding-compact)}}@media (forced-colors:active){.kb-card{box-shadow:none;background-image:none}}.kb-checkbox{--kb-checkbox-inset:calc((var(--kb-input-height-md) - var(--kb-checkbox-size)) / 2);align-items:start;column-gap:var(--kb-space-2);row-gap:var(--kb-space-1);grid-template-columns:auto minmax(0,1fr);min-inline-size:0;display:grid;position:relative}.kb-checkbox-control{inline-size:var(--kb-checkbox-size);block-size:var(--kb-checkbox-size);margin-inline:0;margin-block:var(--kb-checkbox-inset);opacity:0;cursor:pointer}.kb-checkbox-mark{inline-size:var(--kb-checkbox-size);block-size:var(--kb-checkbox-size);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-radius-sm);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);color:var(--kb-color-accent-fg);pointer-events:none;place-items:center;display:grid;position:absolute;inset-block-start:var(--kb-checkbox-inset);inset-inline-start:0}.kb-checkbox-mark svg{inline-size:var(--kb-space-4);block-size:var(--kb-space-4);visibility:hidden}.kb-checkbox-mixed{display:none}.kb-checkbox[data-invalid] .kb-checkbox-mark{border-color:var(--kb-color-danger)}.kb-checkbox-control:is(:checked,:indeterminate)+.kb-checkbox-mark{background:var(--kb-color-accent);border-color:var(--kb-color-accent);box-shadow:var(--kb-material-pressed-shadow)}.kb-checkbox-control:is(:checked,:indeterminate)+.kb-checkbox-mark svg{visibility:visible}.kb-checkbox-control:indeterminate+.kb-checkbox-mark .kb-checkbox-tick{display:none}.kb-checkbox-control:indeterminate+.kb-checkbox-mark .kb-checkbox-mixed{display:block}.kb-checkbox-control:focus-visible+.kb-checkbox-mark{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-checkbox-control:is(:checked,:indeterminate):focus-visible+.kb-checkbox-mark{outline-color:var(--kb-color-accent-fg)}.kb-checkbox-label{overflow-wrap:anywhere;min-block-size:var(--kb-input-height-md);padding-block:var(--kb-space-3);color:var(--kb-color-fg);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);cursor:pointer}.kb-checkbox-description,.kb-checkbox-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);grid-column:2;margin:0}.kb-checkbox-description{color:var(--kb-color-muted)}.kb-checkbox-error{color:var(--kb-color-danger)}.kb-checkbox[data-disabled] :is(.kb-checkbox-mark,.kb-checkbox-label){opacity:.5}.kb-checkbox[data-disabled] :is(.kb-checkbox-control,.kb-checkbox-label){cursor:not-allowed}@media (forced-colors:active){.kb-checkbox-control{opacity:1;accent-color:highlight}.kb-checkbox-mark{display:none}.kb-checkbox-control:focus-visible{outline-offset:2px;outline:2px solid highlight}}.kb-code{padding:.1em var(--kb-space-1);border:1px solid var(--kb-code-border);border-radius:var(--kb-code-radius);background:var(--kb-code-background);font-family:var(--kb-font-mono);font-size:var(--kb-code-size);line-height:inherit;letter-spacing:normal;text-transform:none;white-space:break-spaces;overflow-wrap:anywhere;box-decoration-break:slice}.kb-combobox{gap:var(--kb-input-gap);min-inline-size:0;font-family:var(--kb-font-sans);color:var(--kb-color-fg);flex-direction:column;display:flex}.kb-combobox-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg)}.kb-combobox-shell{align-items:center;gap:var(--kb-space-1);inline-size:100%;min-block-size:var(--kb-input-height-md);padding-inline:var(--kb-space-3) var(--kb-space-1);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-input-radius);background:var(--kb-material-recessed-face);color:var(--kb-color-fg);box-shadow:var(--kb-material-field-shadow);transition:border-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-base) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard);display:flex}.kb-combobox[data-size=sm] .kb-combobox-shell{min-block-size:var(--kb-input-height-sm);padding-inline:var(--kb-space-2) var(--kb-space-1)}.kb-combobox[data-size=lg] .kb-combobox-shell{min-block-size:var(--kb-input-height-lg);padding-inline:var(--kb-space-4) var(--kb-space-2)}.kb-combobox:not([data-disabled]):not([data-readonly]):not([data-invalid]) .kb-combobox-shell:hover:not(:focus-within){border-color:var(--kb-color-accent)}.kb-combobox[data-readonly] .kb-combobox-shell{background:var(--kb-color-surface);box-shadow:none;border-style:dashed}.kb-combobox[data-invalid] .kb-combobox-shell{border-color:var(--kb-color-danger)}.kb-combobox:not([data-disabled]) .kb-combobox-shell:focus-within,.kb-combobox[data-invalid]:not([data-disabled]) .kb-combobox-shell:focus-within{border-color:var(--kb-color-ring);outline:2px solid var(--kb-color-ring);outline-offset:-1px}.kb-combobox[data-disabled] .kb-combobox-shell{opacity:.5;cursor:not-allowed;box-shadow:none}.kb-combobox-input{min-inline-size:0;color:inherit;font:inherit;font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);background:0 0;border:0;outline:none;flex:1;padding:0}.kb-combobox[data-size=sm] .kb-combobox-input{font-size:var(--kb-size-sm)}.kb-combobox[data-size=lg] .kb-combobox-input{font-size:var(--kb-size-lg)}.kb-combobox-input::placeholder{color:var(--kb-color-muted)}.kb-combobox-input:disabled{cursor:not-allowed}.kb-combobox-actions{align-items:center;gap:var(--kb-space-1);flex-shrink:0;display:inline-flex}.kb-combobox-clear,.kb-combobox-trigger{inline-size:var(--kb-combobox-action-size);block-size:var(--kb-combobox-action-size);border-radius:var(--kb-radius-sm);color:var(--kb-color-muted);font:inherit;font-size:var(--kb-size-sm);line-height:var(--kb-text-leading-control);cursor:pointer;transition:color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kb-combobox-clear:hover:not(:disabled),.kb-combobox-trigger:hover:not(:disabled){background-color:var(--kb-color-surface);color:var(--kb-color-fg)}.kb-combobox-clear:focus-visible,.kb-combobox-trigger:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-combobox-clear:disabled,.kb-combobox-trigger:disabled{cursor:not-allowed;opacity:.5}.kb-combobox-positioner{z-index:var(--kb-combobox-layer);max-inline-size:var(--available-width);outline:none}.kb-combobox-popup{min-inline-size:max(var(--kb-combobox-popup-min-width), var(--anchor-width,0px));max-block-size:min(var(--kb-combobox-max-height), var(--available-height,var(--kb-combobox-max-height)));padding:var(--kb-space-1);border:1px solid var(--kb-popup-border);border-radius:var(--kb-popup-radius);background-color:var(--kb-popup-background);color:var(--kb-color-fg);box-shadow:var(--kb-popup-shadow);transform-origin:var(--transform-origin);transition:opacity var(--kb-popup-motion-duration) var(--kb-popup-motion-easing), transform var(--kb-popup-motion-duration) var(--kb-popup-motion-easing);outline:none;flex-direction:column;display:flex;overflow-y:auto}.kb-combobox-popup[data-starting-style],.kb-combobox-popup[data-ending-style]{opacity:0;transform:scale(.98)}.kb-combobox-list{flex-direction:column;gap:1px;display:flex}.kb-combobox-list:empty{display:none}.kb-combobox-option{grid-template-columns:var(--kb-space-4) minmax(0, 1fr);align-items:center;gap:var(--kb-space-2);min-block-size:var(--kb-menu-item-height);padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-sm);font-family:var(--kb-font-sans);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg);cursor:pointer;user-select:none;outline:none;display:grid}.kb-combobox-option[data-highlighted]{background-color:var(--kb-color-surface);box-shadow:inset 0 0 0 1px var(--kb-color-border)}.kb-combobox-option[data-selected]{font-weight:var(--kb-font-weight-medium)}.kb-combobox-option[data-disabled]{color:var(--kb-color-muted);opacity:.6;cursor:not-allowed}.kb-combobox-option-indicator{color:var(--kb-color-accent-ink);font-weight:var(--kb-font-weight-strong);justify-content:center;align-items:center;display:inline-flex}.kb-combobox-option-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kb-combobox-empty{color:var(--kb-color-muted);font-family:var(--kb-font-sans);font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body)}.kb-combobox-empty:not(:empty){padding:var(--kb-space-2) var(--kb-space-3)}.kb-combobox-description{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-combobox-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-danger);margin:0}@media (prefers-reduced-motion:reduce){.kb-combobox-shell,.kb-combobox-clear,.kb-combobox-trigger,.kb-combobox-popup{transition-duration:0s}}@media (forced-colors:active){.kb-combobox-shell,.kb-combobox[data-readonly] .kb-combobox-shell,.kb-combobox:not([data-disabled]):not([data-readonly]):not([data-invalid]) .kb-combobox-shell:hover:not(:focus-within){color:fieldtext;box-shadow:none;background:field;border-color:buttonborder}.kb-combobox[data-invalid] .kb-combobox-shell{border-color:highlight}.kb-combobox:not([data-disabled]) .kb-combobox-shell:focus-within,.kb-combobox[data-invalid]:not([data-disabled]) .kb-combobox-shell:focus-within,.kb-combobox-clear:focus-visible,.kb-combobox-trigger:focus-visible{border-color:highlight;outline-color:highlight}.kb-combobox-popup{color:canvastext;box-shadow:none;background:canvas;border-color:buttonborder}.kb-combobox-option[data-highlighted]{color:highlighttext;forced-color-adjust:none;background:highlight}.kb-combobox-option[data-highlighted] .kb-combobox-option-indicator{color:highlighttext}.kb-combobox[data-disabled] .kb-combobox-shell,.kb-combobox-option[data-disabled]{opacity:1;color:graytext;border-color:graytext}}.kb-container{box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:var(--kb-container-size-lg);padding-inline:var(--kb-container-gutter);margin-inline:auto}.kb-container[data-size=sm]{max-inline-size:var(--kb-container-size-sm)}.kb-container[data-size=md]{max-inline-size:var(--kb-container-size-md)}.kb-container[data-size=full]{max-inline-size:none}.kb-container[data-gutter=none]{padding-inline:0}.kb-dialog-backdrop{background:var(--kb-dialog-overlay-background);opacity:1;transition:opacity var(--kb-dialog-motion-duration) var(--kb-dialog-motion-easing);backdrop-filter:blur(3px);position:fixed;inset:0}.kb-dialog-backdrop[data-starting-style],.kb-dialog-backdrop[data-ending-style]{opacity:0}.kb-dialog-popup{width:min(var(--kb-dialog-width), calc(100vw - var(--kb-space-8)));max-height:calc(100vh - var(--kb-space-8));padding:var(--kb-dialog-padding);border:var(--kb-dialog-border-width) solid var(--kb-dialog-border);border-radius:var(--kb-dialog-radius);background:var(--kb-dialog-background);color:var(--kb-dialog-color);opacity:1;transition:opacity var(--kb-dialog-motion-duration) var(--kb-dialog-motion-easing), transform var(--kb-dialog-motion-duration) var(--kb-dialog-motion-easing);box-shadow:var(--kb-dialog-shadow);position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)scale(1)}.kb-dialog-popup[data-starting-style],.kb-dialog-popup[data-ending-style]{transform:translate(-50%, calc(-50% + var(--kb-dialog-enter-offset))) scale(var(--kb-dialog-enter-scale));opacity:0}.kb-dialog-popup:focus-visible{outline:none}.kb-dialog-title{margin:0 0 var(--kb-space-2);font-size:var(--kb-dialog-title-size);font-family:var(--kb-dialog-title-family);font-weight:var(--kb-dialog-title-weight);color:inherit;letter-spacing:-.035em}.kb-dialog-description{margin:0 0 var(--kb-space-4);color:var(--kb-dialog-description-color);font-size:var(--kb-text-control-size);line-height:1.6}.kb-dialog-header{padding:var(--kb-dialog-header-padding)}.kb-dialog-body{padding:var(--kb-dialog-body-padding)}.kb-dialog-footer{padding:var(--kb-dialog-footer-padding)}.kb-dialog-actions{margin-top:var(--kb-space-4);gap:var(--kb-space-2);flex-wrap:wrap;justify-content:flex-end;display:flex}@media (prefers-reduced-motion:reduce){.kb-dialog-backdrop,.kb-dialog-popup{transition:none}}@media (forced-colors:active){.kb-dialog-popup{border:1px solid canvastext}}.kb-errorsummary{gap:var(--kb-errorsummary-gap);min-inline-size:0;padding:var(--kb-errorsummary-padding);border:1px solid var(--kb-color-danger);border-inline-start-width:var(--kb-space-1);border-radius:var(--kb-errorsummary-radius);background:color-mix(in oklab, var(--kb-color-danger) 8%, transparent);color:var(--kb-color-fg);display:grid}.kb-errorsummary:focus,.kb-errorsummary:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-errorsummary-title{overflow-wrap:anywhere;min-inline-size:0;font-family:var(--kb-font-sans);font-size:var(--kb-text-control-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-heading-leading);color:var(--kb-color-fg);margin:0}.kb-errorsummary-description{overflow-wrap:anywhere;min-inline-size:0;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-errorsummary-list{gap:var(--kb-space-1);font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);margin:0;padding-inline-start:var(--kb-space-4);display:grid}.kb-errorsummary-item{overflow-wrap:anywhere;min-inline-size:0;color:var(--kb-color-danger)}.kb-errorsummary-link{color:var(--kb-color-danger);font-weight:var(--kb-font-weight-medium);text-underline-offset:.16em;border-radius:var(--kb-radius-sm);text-decoration:underline}.kb-errorsummary-link:hover{color:var(--kb-color-fg)}.kb-errorsummary-link:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}@media (forced-colors:active){.kb-errorsummary{color:canvastext;background:canvas;border-color:canvastext}.kb-errorsummary:focus,.kb-errorsummary:focus-visible,.kb-errorsummary-link:focus-visible{outline-color:highlight}.kb-errorsummary-title,.kb-errorsummary-description,.kb-errorsummary-item{color:canvastext}.kb-errorsummary-link,.kb-errorsummary-link:hover{color:linktext}}.kb-fieldset{gap:var(--kb-fieldset-gap);min-inline-size:0;color:var(--kb-color-fg);border:0;margin:0;padding:0;display:grid}.kb-fieldset-legend{overflow-wrap:anywhere;min-inline-size:0;font-family:var(--kb-font-sans);font-size:var(--kb-fieldset-legend-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-heading-leading);color:var(--kb-color-fg);padding:0}.kb-fieldset-legend:not(.kb-sr-only){inline-size:100%;margin:0;margin-block-end:var(--kb-fieldset-gap)}.kb-fieldset-description,.kb-fieldset-error{overflow-wrap:anywhere;min-inline-size:0;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);margin:0}.kb-fieldset-description{color:var(--kb-color-muted)}.kb-fieldset-fields{gap:var(--kb-fieldset-fields-gap);min-inline-size:0;display:grid}.kb-fieldset-error{color:var(--kb-color-danger)}.kb-fieldset:is(:disabled,[data-disabled])>:is(.kb-fieldset-legend,.kb-fieldset-description){opacity:.5}@media (forced-colors:active){.kb-fieldset,.kb-fieldset-legend,.kb-fieldset-description,.kb-fieldset-error{color:canvastext}.kb-fieldset:is(:disabled,[data-disabled])>:is(.kb-fieldset-legend,.kb-fieldset-description){color:graytext;opacity:1}}.kb-fileinput{gap:var(--kb-space-2);min-width:0;display:grid}.kb-fileinput-label{overflow-wrap:anywhere;color:var(--kb-color-fg);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong)}.kb-fileinput .kb-fileinput-trigger{width:fit-content;max-width:100%;height:auto;min-height:var(--kb-fileinput-action-height);white-space:normal;padding:var(--kb-space-2) var(--kb-space-4);border-radius:var(--kb-fileinput-radius);line-height:1.5}.kb-fileinput[data-invalid] .kb-fileinput-trigger{border-color:var(--kb-color-danger)}.kb-fileinput-description,.kb-fileinput-error,.kb-fileinput-empty{font-size:var(--kb-text-small-size);overflow-wrap:anywhere;margin:0}.kb-fileinput-description,.kb-fileinput-empty{color:var(--kb-color-muted)}.kb-fileinput-error{color:var(--kb-color-danger)}.kb-fileinput-list{min-width:0;margin:0;padding:0;list-style:none}.kb-fileinput-item{justify-content:space-between;align-items:center;gap:var(--kb-space-3);border-bottom:var(--kb-fileinput-border-width) solid var(--kb-color-border);padding:var(--kb-space-2) 0;min-width:0;display:flex}.kb-fileinput-content{overflow-wrap:anywhere;flex:1;min-width:0}.kb-fileinput-name{font-weight:var(--kb-font-weight-medium);color:var(--kb-color-fg);display:block}.kb-fileinput-metadata{color:var(--kb-color-muted);font-size:var(--kb-text-small-size);margin-top:var(--kb-space-1);display:block}.kb-fileinput .kb-fileinput-remove{width:var(--kb-fileinput-action-height);min-width:var(--kb-fileinput-action-height);font-size:var(--kb-size-lg);padding:0}.kb-fileinput[data-disabled] .kb-fileinput-label{color:var(--kb-color-muted)}@media (forced-colors:active){.kb-fileinput[data-invalid] .kb-fileinput-trigger{border-color:highlight}.kb-fileinput[data-disabled] .kb-fileinput-label,.kb-fileinput[data-disabled] .kb-fileinput-description,.kb-fileinput[data-disabled] .kb-fileinput-empty{color:graytext}}.kb-formactions{justify-content:flex-end;align-items:center;gap:var(--kb-formactions-gap);flex-wrap:wrap;min-inline-size:0;display:flex}.kb-formactions[data-align=start]{justify-content:flex-start}.kb-formactions[data-align=between]{justify-content:space-between}.kb-formactions[data-divider]{border-block-start:1px solid var(--kb-color-border);padding-block-start:var(--kb-formactions-padding-top)}@media (forced-colors:active){.kb-formactions[data-divider]{border-block-start-color:canvastext}}.kb-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--kb-grid-min-item-width)), 1fr));gap:var(--kb-grid-gap);min-inline-size:0;display:grid}.kb-grid[data-layout=stack]{grid-template-columns:minmax(0,1fr)}.kb-heading{min-inline-size:0;font-family:var(--kb-font-sans);font-size:var(--kb-heading-size-lg);font-weight:var(--kb-heading-weight);line-height:var(--kb-heading-leading);letter-spacing:var(--kb-heading-tracking);color:var(--kb-color-fg);overflow-wrap:anywhere;text-wrap:balance;margin:0}.kb-heading[data-size=sm]{font-size:var(--kb-heading-size-sm)}.kb-heading[data-size=md]{font-size:var(--kb-heading-size-md)}.kb-heading[data-size=lg]{font-size:var(--kb-heading-size-lg)}.kb-heading[data-size=display]{font-size:var(--kb-heading-size-display)}.kb-heading[data-size=xl]{font-size:var(--kb-heading-size-xl)}.kb-inline{gap:var(--kb-layout-gap-md);overflow-wrap:anywhere;flex-wrap:wrap;justify-content:flex-start;align-items:center;min-inline-size:0;display:flex}.kb-inline>*{min-inline-size:0;max-inline-size:100%}.kb-inline[data-gap=none]{gap:0}.kb-inline[data-gap=sm]{gap:var(--kb-layout-gap-sm)}.kb-inline[data-gap=lg]{gap:var(--kb-layout-gap-lg)}.kb-inline[data-align=start]{align-items:flex-start}.kb-inline[data-align=end]{align-items:flex-end}.kb-inline[data-align=baseline]{align-items:baseline}.kb-inline[data-align=stretch]{align-items:stretch}.kb-inline[data-justify=center]{justify-content:center}.kb-inline[data-justify=end]{justify-content:flex-end}.kb-inline[data-justify=between]{justify-content:space-between}.kb-input{gap:var(--kb-input-gap);flex-direction:column;min-inline-size:0;display:flex}.kb-input-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);color:var(--kb-color-fg)}.kb-input-control{width:100%;height:var(--kb-input-height-md);padding:0 var(--kb-space-3);border:1px solid var(--kb-color-border);border-radius:var(--kb-input-radius);background:var(--kb-material-recessed-face);color:var(--kb-color-fg);font-size:var(--kb-text-control-size);font-weight:var(--kb-font-weight-regular);border-color:var(--kb-material-control-border);box-shadow:var(--kb-material-field-shadow);letter-spacing:-.01em}.kb-input-control::placeholder{color:var(--kb-color-muted)}.kb-input[data-size=sm] .kb-input-control{height:var(--kb-input-height-sm);font-size:var(--kb-size-sm)}.kb-input[data-size=lg] .kb-input-control{height:var(--kb-input-height-lg);font-size:var(--kb-size-lg)}.kb-input[data-invalid] .kb-input-control{border-color:var(--kb-color-danger)}.kb-input-control:focus-visible,.kb-input[data-invalid] .kb-input-control:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px;border-color:var(--kb-color-ring);background:var(--kb-color-bg)}.kb-input[data-disabled]{opacity:.5}.kb-input[data-disabled] .kb-input-control{cursor:not-allowed;box-shadow:none}.kb-input-description{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);color:var(--kb-color-muted);line-height:1.5}.kb-input-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);color:var(--kb-color-danger);line-height:1.5}@media (hover:hover) and (pointer:fine){.kb-input:not([data-invalid]) .kb-input-control:hover:not(:disabled):not(:focus-visible){border-color:var(--kb-color-muted)}}.kb-input-shell{min-inline-size:0;display:flex;position:relative}.kb-input-start,.kb-input-end{inline-size:calc(var(--kb-space-8) + var(--kb-space-2));justify-content:center;align-items:center;display:flex;position:absolute;inset-block:0}.kb-input-start{pointer-events:none;inset-inline-start:0}.kb-input-end{inline-size:auto;inset-inline-end:var(--kb-space-1)}.kb-input[data-start-adornment] .kb-input-control{padding-inline-start:calc(var(--kb-space-8) + var(--kb-space-2))}.kb-input[data-end-adornment] .kb-input-control{padding-inline-end:calc(var(--kb-input-height-lg) + var(--kb-space-1))}.kb-input[data-end-adornment] .kb-input-control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}@media (forced-colors:active){.kb-input-control,.kb-input:not([data-invalid]) .kb-input-control:hover:not(:disabled):not(:focus-visible){color:fieldtext;box-shadow:none;background:field;border-color:buttontext}.kb-input[data-invalid] .kb-input-control{border-color:highlight}.kb-input-control:focus-visible,.kb-input[data-invalid] .kb-input-control:focus-visible{border-color:highlight;outline-color:highlight}.kb-input[data-disabled]{opacity:1}.kb-input[data-disabled] .kb-input-label,.kb-input[data-disabled] .kb-input-description,.kb-input[data-disabled] .kb-input-control,.kb-input-control:disabled{color:graytext;opacity:1;border-color:graytext}}.kb-link{color:var(--kb-link-color);font:inherit;text-underline-offset:var(--kb-link-underline-offset);overflow-wrap:anywhere;text-decoration-line:underline;text-decoration-thickness:from-font}.kb-link:hover{color:var(--kb-link-hover)}.kb-link:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px;border-radius:var(--kb-radius-sm)}@media (forced-colors:active){.kb-link{color:linktext}.kb-link:focus-visible{outline-color:highlight}}.kb-menu{min-width:var(--kb-menu-min-width);padding:var(--kb-space-1);border-radius:var(--kb-popup-radius);background:var(--kb-popup-background);box-shadow:var(--kb-popup-shadow);color:var(--kb-color-fg);opacity:1;transition:opacity var(--kb-popup-motion-duration) var(--kb-popup-motion-easing);border:1px solid var(--kb-popup-border);background-image:linear-gradient(180deg, color-mix(in srgb, var(--kb-material-raised-top) 25%, transparent), transparent);outline:none}.kb-menu[data-starting-style],.kb-menu[data-ending-style]{opacity:0}.kb-menu-item{align-items:center;gap:var(--kb-space-2);padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-sm);font-size:var(--kb-text-control-size);cursor:default;user-select:none;line-height:var(--kb-text-leading-control);min-height:var(--kb-menu-item-height);border:1px solid #0000;outline:none;display:flex}.kb-menu-item[data-highlighted]:not([data-disabled]){background:var(--kb-color-surface);box-shadow:inset 0 0 0 1px var(--kb-color-border);border-color:#0000}.kb-menu-item:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}[data-kb-menu-trigger][data-pointer-focus]:focus-visible{outline:none}.kb-menu-item[data-disabled]{color:var(--kb-color-muted)}.kb-menu-separator{height:1px;margin:var(--kb-space-1) 0;background:var(--kb-color-border)}@media (prefers-reduced-motion:reduce){.kb-menu{transition:none}}@media (forced-colors:active){.kb-menu{border:1px solid canvastext}.kb-menu-item:focus-visible{outline-color:highlight}.kb-menu-item[data-highlighted]:not([data-disabled]):not(:focus-visible){outline-offset:-1px;outline:1px solid highlight}.kb-menu-item[data-disabled]{color:graytext}}.kb-multiselect{gap:var(--kb-input-gap);min-inline-size:0;font-family:var(--kb-font-sans);color:var(--kb-color-fg);flex-direction:column;display:flex}.kb-multiselect-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg)}.kb-multiselect-shell{align-items:center;gap:var(--kb-space-1);inline-size:100%;min-block-size:var(--kb-input-height-md);padding-block:var(--kb-space-1);padding-inline:var(--kb-space-2) var(--kb-space-1);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-input-radius);background:var(--kb-material-recessed-face);color:var(--kb-color-fg);box-shadow:var(--kb-material-field-shadow);transition:border-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-base) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard);display:flex}.kb-multiselect[data-size=sm] .kb-multiselect-shell{min-block-size:var(--kb-input-height-sm);padding-inline:var(--kb-space-2) var(--kb-space-1)}.kb-multiselect[data-size=lg] .kb-multiselect-shell{min-block-size:var(--kb-input-height-lg);padding-inline:var(--kb-space-3) var(--kb-space-2)}.kb-multiselect:not([data-disabled]):not([data-readonly]):not([data-invalid]) .kb-multiselect-shell:hover:not(:focus-within){border-color:var(--kb-color-accent)}.kb-multiselect[data-readonly] .kb-multiselect-shell{background:var(--kb-color-surface);box-shadow:none;border-style:dashed}.kb-multiselect[data-invalid] .kb-multiselect-shell{border-color:var(--kb-color-danger)}.kb-multiselect:not([data-disabled]) .kb-multiselect-shell:focus-within,.kb-multiselect[data-invalid]:not([data-disabled]) .kb-multiselect-shell:focus-within{border-color:var(--kb-color-ring);outline:2px solid var(--kb-color-ring);outline-offset:-1px}.kb-multiselect[data-disabled] .kb-multiselect-shell{opacity:.5;cursor:not-allowed;box-shadow:none}.kb-multiselect-chips{align-items:center;gap:var(--kb-multiselect-chip-gap);flex-wrap:wrap;flex:1;min-inline-size:0;display:flex}.kb-multiselect-chip{align-items:center;gap:var(--kb-space-1);max-inline-size:100%;padding-block:var(--kb-badge-padding-block);padding-inline:var(--kb-space-2) var(--kb-space-1);border:1px solid var(--kb-material-soft-border);border-radius:var(--kb-multiselect-chip-radius);background:var(--kb-material-raised-face);color:var(--kb-color-fg);box-shadow:var(--kb-material-inlay-shadow);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-medium);line-height:var(--kb-text-leading-control);outline:none;display:inline-flex}.kb-multiselect-chip:focus-visible{border-color:var(--kb-color-ring);outline:2px solid var(--kb-color-ring);outline-offset:1px}.kb-multiselect-chip-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kb-multiselect-chip-remove{border-radius:var(--kb-radius-sm);block-size:1.25em;inline-size:1.25em;color:var(--kb-color-muted);font:inherit;line-height:var(--kb-text-leading-control);cursor:pointer;transition:color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kb-multiselect-chip-remove:hover:not(:disabled):not([data-disabled]):not([aria-disabled=true]){background-color:var(--kb-color-surface);color:var(--kb-color-fg)}.kb-multiselect-chip-remove:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-1px}.kb-multiselect-chip-remove:disabled,.kb-multiselect-chip-remove[data-disabled],.kb-multiselect-chip-remove[aria-disabled=true]{cursor:not-allowed;opacity:.5}.kb-multiselect-input{min-inline-size:4em;padding-block:0;padding-inline:var(--kb-space-1);color:inherit;font:inherit;font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);background:0 0;border:0;outline:none;flex:6em}.kb-multiselect[data-size=sm] .kb-multiselect-input{font-size:var(--kb-size-sm)}.kb-multiselect[data-size=lg] .kb-multiselect-input{font-size:var(--kb-size-lg)}.kb-multiselect-input::placeholder{color:var(--kb-color-muted)}.kb-multiselect-input:disabled{cursor:not-allowed}.kb-multiselect-actions{align-self:center;align-items:center;gap:var(--kb-space-1);flex-shrink:0;display:inline-flex}.kb-multiselect-clear,.kb-multiselect-trigger{inline-size:var(--kb-multiselect-action-size);block-size:var(--kb-multiselect-action-size);border-radius:var(--kb-radius-sm);color:var(--kb-color-muted);font:inherit;font-size:var(--kb-size-sm);line-height:var(--kb-text-leading-control);cursor:pointer;transition:color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kb-multiselect-clear:hover:not(:disabled),.kb-multiselect-trigger:hover:not(:disabled){background-color:var(--kb-color-surface);color:var(--kb-color-fg)}.kb-multiselect-clear:focus-visible,.kb-multiselect-trigger:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-multiselect-clear:disabled,.kb-multiselect-trigger:disabled{cursor:not-allowed;opacity:.5}.kb-multiselect-positioner{z-index:var(--kb-multiselect-layer);max-inline-size:var(--available-width);outline:none}.kb-multiselect-popup{min-inline-size:max(var(--kb-multiselect-popup-min-width), var(--anchor-width,0px));max-block-size:min(var(--kb-multiselect-max-height), var(--available-height,var(--kb-multiselect-max-height)));padding:var(--kb-space-1);border:1px solid var(--kb-popup-border);border-radius:var(--kb-popup-radius);background-color:var(--kb-popup-background);color:var(--kb-color-fg);box-shadow:var(--kb-popup-shadow);transform-origin:var(--transform-origin);transition:opacity var(--kb-popup-motion-duration) var(--kb-popup-motion-easing), transform var(--kb-popup-motion-duration) var(--kb-popup-motion-easing);outline:none;flex-direction:column;display:flex;overflow-y:auto}.kb-multiselect-popup[data-starting-style],.kb-multiselect-popup[data-ending-style]{opacity:0;transform:scale(.98)}.kb-multiselect-list{flex-direction:column;gap:1px;display:flex}.kb-multiselect-list:empty{display:none}.kb-multiselect-option{grid-template-columns:var(--kb-space-4) minmax(0, 1fr);align-items:center;gap:var(--kb-space-2);min-block-size:var(--kb-menu-item-height);padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-sm);font-family:var(--kb-font-sans);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg);cursor:pointer;user-select:none;outline:none;display:grid}.kb-multiselect-option[data-highlighted]{background-color:var(--kb-color-surface);box-shadow:inset 0 0 0 1px var(--kb-color-border)}.kb-multiselect-option[data-selected]{font-weight:var(--kb-font-weight-medium)}.kb-multiselect-option[data-disabled]{color:var(--kb-color-muted);opacity:.6;cursor:not-allowed}.kb-multiselect-option-indicator{color:var(--kb-color-accent-ink);font-weight:var(--kb-font-weight-strong);justify-content:center;align-items:center;display:inline-flex}.kb-multiselect-option-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kb-multiselect-empty{color:var(--kb-color-muted);font-family:var(--kb-font-sans);font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body)}.kb-multiselect-empty:not(:empty){padding:var(--kb-space-2) var(--kb-space-3)}.kb-multiselect-description{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-multiselect-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-danger);margin:0}@media (prefers-reduced-motion:reduce){.kb-multiselect-shell,.kb-multiselect-chip-remove,.kb-multiselect-clear,.kb-multiselect-trigger,.kb-multiselect-popup{transition-duration:0s}}@media (forced-colors:active){.kb-multiselect-shell,.kb-multiselect[data-readonly] .kb-multiselect-shell,.kb-multiselect:not([data-disabled]):not([data-readonly]):not([data-invalid]) .kb-multiselect-shell:hover:not(:focus-within){color:fieldtext;box-shadow:none;background:field;border-color:buttonborder}.kb-multiselect[data-invalid] .kb-multiselect-shell{border-color:highlight}.kb-multiselect:not([data-disabled]) .kb-multiselect-shell:focus-within,.kb-multiselect[data-invalid]:not([data-disabled]) .kb-multiselect-shell:focus-within,.kb-multiselect-chip:focus-visible,.kb-multiselect-chip-remove:focus-visible,.kb-multiselect-clear:focus-visible,.kb-multiselect-trigger:focus-visible{border-color:highlight;outline-color:highlight}.kb-multiselect-chip{color:buttontext;box-shadow:none;background:buttonface;border-color:buttonborder}.kb-multiselect-popup{color:canvastext;box-shadow:none;background:canvas;border-color:buttonborder}.kb-multiselect-option[data-highlighted]{color:highlighttext;forced-color-adjust:none;background:highlight}.kb-multiselect-option[data-highlighted] .kb-multiselect-option-indicator{color:highlighttext}.kb-multiselect[data-disabled] .kb-multiselect-shell,.kb-multiselect[data-disabled] .kb-multiselect-chip,.kb-multiselect-option[data-disabled]{opacity:1;color:graytext;border-color:graytext}}.kb-numberfield{gap:var(--kb-space-1);min-width:0;display:grid}.kb-numberfield-label{overflow-wrap:anywhere;color:var(--kb-color-fg);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong)}.kb-numberfield-editor{min-width:0}.kb-numberfield-group{grid-template-columns:var(--kb-numberfield-step-width) minmax(0, 1fr) var(--kb-numberfield-step-width);border:var(--kb-numberfield-border-width) solid var(--kb-numberfield-border);border-radius:var(--kb-numberfield-radius);background:var(--kb-numberfield-background);color:var(--kb-numberfield-color);align-items:stretch;min-width:0;display:grid}.kb-numberfield-input,.kb-numberfield-decrement,.kb-numberfield-increment{height:calc(var(--kb-numberfield-height-md) - 2 * var(--kb-numberfield-border-width));color:inherit;min-width:0;font-size:var(--kb-numberfield-font-size);background:0 0;border:0;font-family:inherit}.kb-numberfield-input{text-align:center;width:100%;padding:0 var(--kb-space-1);font-variant-numeric:tabular-nums}.kb-numberfield-decrement,.kb-numberfield-increment{cursor:pointer;border-radius:var(--kb-numberfield-radius);font-size:var(--kb-size-lg);justify-content:center;align-items:center;padding:0;display:inline-flex}.kb-numberfield-input:focus-visible,.kb-numberfield-decrement:focus-visible,.kb-numberfield-increment:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-numberfield-decrement[data-disabled],.kb-numberfield-increment[data-disabled]{opacity:.5;cursor:not-allowed}.kb-numberfield-description,.kb-numberfield-error{font-size:var(--kb-text-small-size);overflow-wrap:anywhere;margin:0}.kb-numberfield-description{color:var(--kb-color-muted)}.kb-numberfield-error{color:var(--kb-color-danger)}.kb-numberfield[data-invalid] .kb-numberfield-group{border-color:var(--kb-color-danger)}.kb-numberfield[data-disabled]{opacity:.5}.kb-numberfield[data-disabled] .kb-numberfield-input{cursor:not-allowed}.kb-numberfield[data-size=sm] .kb-numberfield-input,.kb-numberfield[data-size=sm] .kb-numberfield-decrement,.kb-numberfield[data-size=sm] .kb-numberfield-increment{height:calc(var(--kb-numberfield-height-sm) - 2 * var(--kb-numberfield-border-width))}.kb-numberfield[data-size=lg] .kb-numberfield-input,.kb-numberfield[data-size=lg] .kb-numberfield-decrement,.kb-numberfield[data-size=lg] .kb-numberfield-increment{height:calc(var(--kb-numberfield-height-lg) - 2 * var(--kb-numberfield-border-width))}@media (forced-colors:active){.kb-numberfield-group{color:canvastext;background:canvas;border-color:canvastext}.kb-numberfield[data-invalid] .kb-numberfield-group{border-color:highlight}.kb-numberfield-input:focus-visible,.kb-numberfield-decrement:focus-visible,.kb-numberfield-increment:focus-visible{outline-color:highlight}.kb-numberfield[data-disabled]{opacity:1}.kb-numberfield[data-disabled] .kb-numberfield-label,.kb-numberfield[data-disabled] .kb-numberfield-description,.kb-numberfield[data-disabled] .kb-numberfield-group,.kb-numberfield-decrement[data-disabled],.kb-numberfield-increment[data-disabled]{color:graytext;border-color:graytext}}.kb-panel{--_panel-bg:var(--kb-panel-background);--_panel-seam:var(--kb-panel-border);--_panel-rim-top:var(--kb-panel-rim-top);--_panel-rim-bottom:var(--kb-panel-rim-bottom);--_panel-highlight:var(--kb-panel-highlight);--_panel-sheen:var(--kb-panel-sheen);--_panel-shadow:var(--kb-panel-shadow);--_panel-glow:var(--kb-panel-glow);--_panel-rail:var(--kb-panel-rail);--_panel-gap:var(--kb-space-3);--_panel-pad:var(--kb-panel-padding);isolation:isolate;gap:var(--_panel-gap);padding:var(--_panel-pad);border-radius:var(--kb-panel-radius);color:var(--kb-color-fg);flex-direction:column;display:flex;position:relative}.kb-panel-glow{z-index:-2;background:radial-gradient(closest-side, var(--_panel-glow), transparent);filter:blur(var(--kb-panel-glow-blur));pointer-events:none;border-radius:50%;position:absolute;inset:15% 4% 0}.kb-panel-plate{z-index:-1;border-radius:inherit;background:linear-gradient(to bottom, var(--_panel-sheen), transparent 55%), var(--_panel-bg);box-shadow:inset 0 1px 0 var(--_panel-highlight), var(--_panel-shadow);backdrop-filter:var(--kb-panel-backdrop);pointer-events:none;transition:background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard);position:absolute;inset:0;overflow:hidden}.kb-panel-plate:before{content:"";z-index:1;padding:var(--kb-panel-seam);border-radius:inherit;background:linear-gradient(to bottom, var(--_panel-rim-top), var(--_panel-seam) 40%, var(--_panel-seam) 70%, var(--_panel-rim-bottom));position:absolute;inset:0;mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-position:0 0,0 0;mask-size:auto,auto;mask-repeat:repeat,repeat;mask-clip:content-box,border-box;mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.kb-panel[data-tone=quiet]{--_panel-bg:transparent;--_panel-seam:color-mix(in oklab, var(--kb-panel-border) 60%, transparent);--_panel-rim-top:var(--_panel-seam);--_panel-rim-bottom:var(--_panel-seam);--_panel-highlight:transparent;--_panel-sheen:transparent;--_panel-shadow:none;--_panel-glow:transparent}.kb-panel[data-tone=sunken]{--_panel-bg:var(--kb-panel-background-sunken);--_panel-rim-top:var(--kb-panel-border);--_panel-highlight:transparent;--_panel-shadow:var(--kb-material-field-shadow)}.kb-panel[data-tone=active]{--_panel-bg:var(--kb-panel-background-active);--_panel-rim-top:var(--kb-panel-border-active);--_panel-seam:color-mix(in oklab, var(--kb-panel-border-active) 35%, var(--kb-panel-border));--_panel-rail:var(--kb-panel-rail-active);--_panel-shadow:var(--kb-panel-shadow-active);--_panel-glow:var(--kb-panel-glow-active)}.kb-panel[data-tone=critical]{--_panel-rim-top:var(--kb-panel-border-critical);--_panel-seam:color-mix(in oklab, var(--kb-panel-border-critical) 35%, var(--kb-panel-border));--_panel-rail:var(--kb-panel-border-critical);--_panel-glow:var(--kb-panel-glow-critical)}.kb-panel[data-density=compact],.kb-panel[data-nested]{--_panel-gap:var(--kb-space-2);--_panel-pad:calc(var(--kb-panel-padding) / 2)}.kb-panel[data-nested]{--_panel-shadow:none;--_panel-glow:transparent}.kb-panel-rail{background:var(--_panel-rail);width:2px;position:absolute;inset-block:0;inset-inline-start:0}.kb-panel[data-rail=accent] .kb-panel-rail{background:var(--kb-panel-rail-active)}.kb-panel[data-rail=accent],.kb-panel[data-rail=status]{padding-inline-start:calc(var(--_panel-pad) + 2px)}.kb-panel-header{justify-content:space-between;align-items:center;gap:var(--kb-space-2);font-weight:var(--kb-font-weight-strong);flex-wrap:wrap;display:flex;position:relative}.kb-panel-header:after{content:"";inset-inline:calc(var(--kb-panel-seam) - var(--_panel-pad));background:var(--kb-panel-divider);pointer-events:none;height:1px;position:absolute;inset-block-end:calc(var(--_panel-gap) / -2)}.kb-panel[data-closed]>.kb-panel-header:after{display:none}:where(.kb-panel-header) :where(h1,h2,h3,h4,h5,h6){font-size:var(--kb-panel-title-size);font-weight:var(--kb-font-weight-strong);letter-spacing:-.015em;margin:0;line-height:1.35}.kb-panel-toolbar{align-items:center;gap:var(--kb-space-1);flex-wrap:wrap;margin-inline-start:auto;display:flex}.kb-panel-toggle{align-items:center;gap:var(--kb-space-1);height:var(--kb-panel-toggle-height);padding:0 var(--kb-space-2);border-radius:var(--kb-button-radius);background:var(--kb-material-raised-face);color:var(--kb-color-fg);font:inherit;font-size:var(--kb-size-sm);font-weight:var(--kb-font-weight-medium);cursor:pointer;border:1px solid #0000;border-color:var(--kb-material-raised-border);box-shadow:var(--kb-material-raised-shadow);display:inline-flex}.kb-panel-toggle:hover{border-color:var(--kb-color-muted)}.kb-panel-toggle:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-panel-body{gap:var(--kb-space-2);min-width:0;font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body);flex-direction:column;display:flex}.kb-panel-well{min-width:0;padding:var(--kb-space-3);border-radius:var(--kb-panel-well-radius);background:var(--kb-panel-well);box-shadow:var(--kb-panel-well-shadow);border:1px solid var(--kb-material-soft-border)}.kb-panel-footer{justify-content:flex-end;align-items:center;gap:var(--kb-space-2);flex-wrap:wrap;display:flex}.kb-panel-group{gap:var(--kb-space-3);flex-direction:column;display:flex}.kb-panel-group[data-direction=row]{flex-flow:wrap}.kb-panel-group[data-direction=row]>.kb-panel{flex:16rem;min-width:0}@media (prefers-reduced-motion:reduce){.kb-panel-plate{transition:none}}.kb-panel-toggle:active{box-shadow:var(--kb-material-pressed-shadow)}.kb-panel-group:has(>.kb-panel-handle){flex-wrap:nowrap;gap:0}.kb-panel-group:has(>.kb-panel-handle)>.kb-panel{flex:1 1 0;min-width:0;min-height:0}.kb-panel-group>.kb-panel:has(+.kb-panel-handle){flex:0 0 var(--kb-panel-size,50%)}.kb-panel-handle{flex:0 0 var(--kb-panel-handle-size);touch-action:none;user-select:none;justify-content:center;align-items:center;display:flex;position:relative}.kb-panel-handle:before{content:"";position:absolute;inset:0}.kb-panel-handle[data-orientation=vertical]{cursor:col-resize}.kb-panel-handle[data-orientation=vertical]:before{inset-inline:calc((var(--kb-panel-handle-hit) - var(--kb-panel-handle-size)) / -2)}.kb-panel-handle[data-orientation=horizontal]{cursor:row-resize}.kb-panel-handle[data-orientation=horizontal]:before{inset-block:calc((var(--kb-panel-handle-hit) - var(--kb-panel-handle-size)) / -2)}.kb-panel-handle:after{content:"";border-radius:var(--kb-radius-full);background:var(--kb-panel-handle-line);transition:background var(--kb-motion-duration-fast) var(--kb-motion-easing-standard)}.kb-panel-handle[data-orientation=vertical]:after{width:var(--kb-panel-handle-line-width);height:var(--kb-panel-handle-grip)}.kb-panel-handle[data-orientation=horizontal]:after{width:var(--kb-panel-handle-grip);height:var(--kb-panel-handle-line-width)}.kb-panel-handle:hover:after,.kb-panel-handle[data-dragging]:after{background:var(--kb-panel-handle-line-active)}.kb-panel-handle:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px;border-radius:var(--kb-radius-sm)}@media (prefers-reduced-motion:reduce){.kb-panel-handle:after{transition:none}}@media (forced-colors:active){.kb-panel-handle:after{background:buttontext}.kb-panel-handle:hover:after,.kb-panel-handle[data-dragging]:after{background:highlight}}.kb-progress{gap:var(--kb-space-1);flex-direction:column;min-width:0;display:flex}.kb-progress-head{justify-content:space-between;gap:var(--kb-space-2);font-size:var(--kb-size-sm);display:flex}.kb-progress-label{color:var(--kb-color-fg)}.kb-progress-value{color:var(--kb-color-muted);font-variant-numeric:tabular-nums}.kb-progress-track{height:var(--kb-progress-height);border-radius:var(--kb-progress-radius);background:var(--kb-progress-track);border:1px solid var(--kb-color-border);box-shadow:var(--kb-material-field-shadow)}.kb-progress-indicator{--_progress-fill:var(--kb-progress-fill);border-radius:inherit;background:var(--_progress-fill);height:100%;box-shadow:inset 0 1px 0 var(--kb-material-fill-highlight), inset 0 -1px 0 var(--kb-material-fill-shade), 0 0 var(--kb-progress-glow) var(--_progress-fill);transition:width var(--kb-motion-duration-base) var(--kb-motion-easing-standard);background-image:linear-gradient(180deg, var(--kb-material-fill-sheen), transparent)}.kb-progress[data-complete] .kb-progress-indicator{--_progress-fill:var(--kb-progress-fill-complete)}@media (prefers-reduced-motion:reduce){.kb-progress-indicator{transition:none}}.kb-radiogroup{color:var(--kb-color-fg);gap:var(--kb-radiogroup-gap);flex-direction:column;min-inline-size:0;display:flex}.kb-radiogroup-label{overflow-wrap:anywhere;color:var(--kb-color-fg);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong)}.kb-radiogroup-item{align-items:center;gap:var(--kb-space-2);min-block-size:var(--kb-input-height-md);padding-block:var(--kb-space-2);cursor:pointer;display:flex}.kb-radiogroup-control{inline-size:var(--kb-radiogroup-size);block-size:var(--kb-radiogroup-size);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-radius-full);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);color:inherit;flex:none;justify-content:center;align-items:center;display:inline-flex}.kb-radiogroup-control[data-checked]{color:var(--kb-color-accent-fg);background:var(--kb-color-accent);border-color:var(--kb-color-accent);box-shadow:var(--kb-material-pressed-shadow)}.kb-radiogroup-control:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-radiogroup-control[data-checked]:focus-visible{outline-color:var(--kb-color-accent-fg)}.kb-radiogroup[data-invalid] .kb-radiogroup-control:not([data-checked]){border-color:var(--kb-color-danger)}.kb-radiogroup-indicator{inline-size:var(--kb-space-2);block-size:var(--kb-space-2);border-radius:var(--kb-radius-full);background:currentColor}.kb-radiogroup-item:has(.kb-radiogroup-control[data-disabled]){opacity:.5;cursor:not-allowed}.kb-radiogroup-content{overflow-wrap:anywhere;min-inline-size:0;color:inherit;font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control)}.kb-radiogroup-description,.kb-radiogroup-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);margin:0}.kb-radiogroup-description{color:var(--kb-color-muted)}.kb-radiogroup-error{color:var(--kb-color-danger)}.kb-radiogroup-options{gap:var(--kb-radiogroup-gap);flex-direction:column;min-inline-size:0;display:flex}.kb-radiogroup[data-appearance=segmented]{--kb-radiogroup-selection-bg:var(--kb-radiogroup-primary-background);--kb-radiogroup-selection-fg:var(--kb-radiogroup-primary-color);--kb-radiogroup-selection-border:var(--kb-radiogroup-primary-background);--kb-radiogroup-selection-ring:var(--kb-radiogroup-primary-color)}.kb-radiogroup[data-appearance=segmented][data-selection-tone=neutral]{--kb-radiogroup-selection-bg:var(--kb-material-raised-face);--kb-radiogroup-selection-fg:var(--kb-color-fg);--kb-radiogroup-selection-border:var(--kb-material-control-border);--kb-radiogroup-selection-ring:var(--kb-color-ring)}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-options{isolation:isolate;gap:var(--kb-space-1);padding:var(--kb-space-1);border:1px solid var(--kb-color-border);border-radius:calc(var(--kb-input-height-md) / 2 + var(--kb-space-1) + 1px);background:var(--kb-material-recessed-face);flex-flow:wrap;position:relative}.kb-radiogroup[data-appearance=segmented][data-invalid] .kb-radiogroup-options{border-color:var(--kb-color-danger)}.kb-radiogroup-selection{z-index:-1;pointer-events:none;border:1px solid var(--kb-radiogroup-selection-border);border-radius:var(--kb-radius-full);background:var(--kb-radiogroup-selection-bg);box-shadow:var(--kb-material-inlay-shadow);position:absolute;top:0;left:0}.kb-radiogroup-selection[data-disabled]{opacity:.5}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item{min-inline-size:0;padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-full);text-align:center;overflow-wrap:anywhere;color:var(--kb-color-muted);background-color:#0000;border:1px solid #0000;flex:auto;justify-content:center;position:relative}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-control{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has([data-checked]){border-color:var(--kb-radiogroup-selection-border);background:var(--kb-radiogroup-selection-bg);color:var(--kb-radiogroup-selection-fg);box-shadow:var(--kb-material-inlay-shadow)}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-options[data-selection] .kb-radiogroup-item:has([data-checked]){box-shadow:none;background:0 0;border-color:#0000}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has(:focus-visible){outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has([data-checked]):has(:focus-visible){outline-color:var(--kb-radiogroup-selection-ring)}@media (hover:hover) and (pointer:fine) and (forced-colors:none){.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:not(:has([data-checked],[data-disabled])):hover{background-color:var(--kb-color-surface);color:var(--kb-color-fg)}}@media (prefers-reduced-motion:no-preference){.kb-radiogroup[data-selection-motion=slide] .kb-radiogroup-selection{transition-property:transform,width,height;transition-duration:calc(var(--kb-motion-duration-slow) + var(--kb-motion-duration-fast));transition-timing-function:var(--kb-motion-easing-smooth)}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item{transition:background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), border-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-base) var(--kb-motion-easing-standard)}}@media (forced-colors:active){.kb-radiogroup-control{color:canvastext;background:canvas;border-color:canvastext}.kb-radiogroup-control[data-checked]{color:highlighttext;forced-color-adjust:none;background:highlight;border-color:highlight}.kb-radiogroup-control[data-disabled]{color:graytext;border-color:graytext}.kb-radiogroup-control:focus-visible,.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has(:focus-visible){outline-color:highlight}.kb-radiogroup-control[data-checked]:focus-visible{outline-color:highlighttext}.kb-radiogroup[data-invalid] .kb-radiogroup-control:not([data-checked]),.kb-radiogroup[data-appearance=segmented][data-invalid] .kb-radiogroup-options{border-color:highlight}.kb-radiogroup-indicator{forced-color-adjust:none;background:currentColor}.kb-radiogroup-selection{display:none}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item{box-shadow:none;background-image:none}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has([data-checked]),.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-options[data-selection] .kb-radiogroup-item:has([data-checked]){color:highlighttext;forced-color-adjust:none;background:highlight;border-color:highlight}.kb-radiogroup[data-appearance=segmented] .kb-radiogroup-item:has([data-checked]):has(:focus-visible){outline-color:highlighttext}}.kb-scrollarea{border:1px solid var(--kb-color-border);border-radius:var(--kb-scrollarea-radius);background:var(--kb-material-recessed-face);min-width:0;box-shadow:var(--kb-material-field-shadow);position:relative}.kb-scrollarea-viewport{max-height:var(--_scrollarea-max-height,none);overscroll-behavior:contain;border-radius:inherit;padding:var(--kb-scrollarea-padding)}.kb-scrollarea-viewport:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-scrollarea-scrollbar{width:var(--kb-space-2);opacity:0;transition:opacity var(--kb-motion-duration-base) var(--kb-motion-easing-standard);padding:2px;display:flex}.kb-scrollarea:hover .kb-scrollarea-scrollbar,.kb-scrollarea-scrollbar[data-scrolling]{opacity:1}.kb-scrollarea-thumb{border-radius:var(--kb-radius-full);background:var(--kb-color-muted);box-shadow:var(--kb-material-scroll-thumb-shadow);flex:1}@media (prefers-reduced-motion:reduce){.kb-scrollarea-scrollbar{transition:none}}@media (forced-colors:active){.kb-scrollarea-viewport:focus-visible{outline-color:highlight}.kb-scrollarea-thumb{box-shadow:none;background:buttontext}}.kb-select{gap:var(--kb-space-1);flex-direction:column;min-width:0;display:flex}.kb-select-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);color:var(--kb-color-fg)}.kb-select-control{overflow-wrap:anywhere;justify-content:space-between;align-items:center;gap:var(--kb-space-2);width:100%;min-height:var(--kb-input-height-md);padding:var(--kb-space-2) var(--kb-space-3);border:1px solid var(--kb-color-border);border-radius:var(--kb-input-radius);background:var(--kb-material-recessed-face);color:var(--kb-color-fg);font:inherit;font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);box-shadow:var(--kb-material-field-shadow);border-color:var(--kb-material-control-border);text-align:start;cursor:pointer;transition:background-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), border-color var(--kb-motion-duration-base) var(--kb-motion-easing-standard);display:flex}.kb-select-control:focus-visible:not([data-pointer-focus]){outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-select-control[data-pointer-focus]{outline:none}.kb-select[data-invalid] .kb-select-control{border-color:var(--kb-color-danger)}.kb-select[data-disabled] .kb-select-control{opacity:.5;cursor:not-allowed}.kb-select-positioner{z-index:var(--kb-select-layer);max-width:var(--available-width)}.kb-select-portal{display:contents}.kb-select-popup{min-width:min(var(--anchor-width), var(--available-width));width:max(var(--anchor-width), var(--kb-select-popup-min-width));max-width:var(--available-width);border-radius:var(--kb-popup-radius);background:var(--kb-popup-background);color:var(--kb-color-fg);box-shadow:inset 0 0 0 1px var(--kb-popup-border), var(--kb-popup-shadow);padding:var(--kb-space-1);opacity:1;transition:opacity var(--kb-motion-duration-base) var(--kb-motion-easing-standard)}.kb-select-popup[data-starting-style],.kb-select-popup[data-ending-style]{opacity:0}.kb-select-list{max-height:min(var(--available-height), var(--kb-select-max-height));overflow:auto}.kb-select-item{justify-content:space-between;align-items:center;gap:var(--kb-space-3);padding:var(--kb-space-2) var(--kb-space-3);min-height:var(--kb-input-height-md);border-radius:var(--kb-radius-sm);font-size:var(--kb-text-control-size);cursor:default;overflow-wrap:anywhere;outline:none;display:flex}.kb-select-item[data-highlighted]{background:var(--kb-color-surface);box-shadow:inset 0 0 0 1px var(--kb-color-border)}.kb-select-item[data-disabled]{color:var(--kb-color-muted);opacity:.6}.kb-select-item:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-select-description,.kb-select-empty{overflow-wrap:anywhere;color:var(--kb-color-muted);font-size:var(--kb-text-small-size);margin:0}.kb-select-empty{padding:var(--kb-space-3)}.kb-select-error{overflow-wrap:anywhere;color:var(--kb-color-danger);font-size:var(--kb-text-small-size);margin:0}@media (prefers-reduced-motion:reduce){.kb-select-control,.kb-select-popup{transition:none}}@media (forced-colors:active){.kb-select-control:focus-visible:not([data-pointer-focus]),.kb-select-item:focus-visible{outline-color:highlight}.kb-select-control{border-color:buttontext}.kb-select[data-invalid] .kb-select-control{border-color:highlight}.kb-select[data-disabled] .kb-select-control,.kb-select-item[data-disabled]{color:graytext;opacity:1;border-color:graytext}.kb-select-popup{border:1px solid canvastext}.kb-select-item[data-highlighted]:not(:focus-visible){outline-offset:-1px;outline:1px solid highlight}}.kb-separator{box-sizing:border-box;border:0;border-block-start:var(--kb-separator-width) solid var(--kb-separator-color);flex-shrink:0;block-size:0;inline-size:100%;min-inline-size:0;margin:0;padding:0}.kb-separator[data-orientation=vertical]{block-size:auto;inline-size:0;min-block-size:var(--kb-separator-min-length);border-block-start:0;border-inline-start:var(--kb-separator-width) solid var(--kb-separator-color);align-self:stretch}@media (forced-colors:active){.kb-separator{border-color:canvastext}}.kb-split{--_split-threshold:var(--kb-split-collapse-md);--_split-gap:var(--kb-layout-gap-md);gap:var(--_split-gap);overflow-wrap:anywhere;flex-wrap:wrap;align-items:stretch;min-inline-size:0;display:flex}.kb-split>.kb-split-track{--_split-share:.5;box-sizing:border-box;flex-grow:1;flex-shrink:1;flex-basis:min(100%, max(calc((var(--_split-threshold) - 100%) * 99999), calc((100% - var(--_split-gap)) * var(--_split-share))));grid-template-columns:minmax(0,1fr);min-inline-size:0;max-inline-size:100%;display:grid}.kb-split[data-ratio=wide-start]>.kb-split-track:first-child,.kb-split[data-ratio=wide-end]>.kb-split-track:last-child{--_split-share:calc(2 / 3)}.kb-split[data-ratio=wide-start]>.kb-split-track:last-child,.kb-split[data-ratio=wide-end]>.kb-split-track:first-child{--_split-share:calc(1 / 3)}.kb-split[data-collapse=sm]{--_split-threshold:var(--kb-split-collapse-sm)}.kb-split[data-collapse=lg]{--_split-threshold:var(--kb-split-collapse-lg)}.kb-split[data-gap=none]{--_split-gap:0px}.kb-split[data-gap=sm]{--_split-gap:var(--kb-layout-gap-sm)}.kb-split[data-gap=lg]{--_split-gap:var(--kb-layout-gap-lg)}.kb-split[data-align=start]{align-items:flex-start}.kb-split[data-align=center]{align-items:center}.kb-split[data-align=end]{align-items:flex-end}.kb-split[data-align=baseline]{align-items:baseline}.kb-stat{gap:var(--kb-stat-gap);flex-direction:column;display:inline-flex}.kb-stat-label{color:var(--kb-color-muted);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-medium);letter-spacing:0;text-transform:none}.kb-stat-value{color:var(--kb-color-fg);font-size:var(--kb-stat-value-size);font-weight:var(--kb-font-weight-strong);font-variant-numeric:tabular-nums;letter-spacing:-.035em;line-height:1}.kb-stat[data-size=display] .kb-stat-value{font-size:var(--kb-stat-display-size);font-weight:var(--kb-stat-display-weight);letter-spacing:-.035em}.kb-status{--_status-ink:var(--kb-status-neutral);align-items:center;gap:var(--kb-space-2);font-size:var(--kb-text-caption-size);font-weight:var(--kb-font-weight-strong);color:var(--_status-ink);letter-spacing:0;line-height:1.25;display:inline-flex}.kb-status[data-tone=info]{--_status-ink:var(--kb-status-info)}.kb-status[data-tone=running]{--_status-ink:var(--kb-status-running)}.kb-status[data-tone=success]{--_status-ink:var(--kb-status-success)}.kb-status[data-tone=warning]{--_status-ink:var(--kb-status-warning)}.kb-status[data-tone=blocked]{--_status-ink:var(--kb-status-blocked)}.kb-status[data-appearance=chip]{padding:var(--kb-status-padding-block) var(--kb-status-padding-inline);border:1px solid color-mix(in oklab, var(--_status-ink) 45%, transparent);border-radius:var(--kb-status-radius);background:color-mix(in oklab, var(--_status-ink) 12%, transparent);color:color-mix(in oklab, var(--_status-ink) 70%, var(--kb-color-fg));gap:var(--kb-status-gap);background-image:linear-gradient(180deg, var(--kb-material-soft-sheen), transparent);box-shadow:var(--kb-material-inlay-shadow)}.kb-status[data-appearance=chip][data-compact]{padding:var(--kb-status-compact-padding-block) var(--kb-status-compact-padding-inline)}.kb-status[data-compact]{gap:var(--kb-status-compact-gap);font-size:var(--kb-status-compact-size)}.kb-status-icon{width:1em;height:1em;color:inherit;flex:none;display:inline-flex}.kb-status[data-appearance=chip]>.kb-status-icon{color:var(--_status-ink);filter:drop-shadow(0 0 var(--kb-status-glow) var(--_status-ink))}.kb-status-icon>*{width:100%;height:100%}.kb-status-text{white-space:nowrap}.kb-status[data-appearance=chip]:before{content:"";width:var(--kb-status-dot-size);height:var(--kb-status-dot-size);background:currentColor;border-radius:50%;flex:none}.kb-switch{--_switch-off-color:var(--kb-switch-off-color,var(--kb-color-accent));--_switch-on-color:var(--kb-switch-on-color,var(--kb-color-accent));gap:var(--kb-space-1);min-inline-size:0;color:var(--kb-color-fg);display:grid}.kb-fieldset .kb-switch:not([data-size]),.kb-switch[data-size=sm]{--kb-switch-width:var(--kb-switch-sm-width);--kb-switch-height:var(--kb-switch-sm-height);--kb-switch-inset:var(--kb-switch-sm-inset);--kb-switch-icon-size:var(--kb-switch-sm-icon-size)}.kb-switch[data-size=md]{--kb-switch-width:var(--kb-switch-md-width);--kb-switch-height:var(--kb-switch-md-height);--kb-switch-inset:var(--kb-switch-md-inset);--kb-switch-icon-size:var(--kb-switch-md-icon-size)}.kb-switch[data-size=lg]{--kb-switch-width:var(--kb-switch-lg-width);--kb-switch-height:var(--kb-switch-lg-height);--kb-switch-inset:var(--kb-switch-lg-inset);--kb-switch-icon-size:var(--kb-switch-lg-icon-size)}.kb-switch[data-off-tone=accent]{--_switch-off-color:var(--kb-color-accent)}.kb-switch[data-off-tone=info]{--_switch-off-color:var(--kb-color-info)}.kb-switch[data-off-tone=success]{--_switch-off-color:var(--kb-color-success)}.kb-switch[data-off-tone=warning]{--_switch-off-color:var(--kb-color-warning)}.kb-switch[data-off-tone=danger]{--_switch-off-color:var(--kb-color-danger)}.kb-switch[data-on-tone=accent]{--_switch-on-color:var(--kb-color-accent)}.kb-switch[data-on-tone=info]{--_switch-on-color:var(--kb-color-info)}.kb-switch[data-on-tone=success]{--_switch-on-color:var(--kb-color-success)}.kb-switch[data-on-tone=warning]{--_switch-on-color:var(--kb-color-warning)}.kb-switch[data-on-tone=danger]{--_switch-on-color:var(--kb-color-danger)}.kb-switch-field{align-items:center;gap:var(--kb-space-3);min-inline-size:0;display:flex}.kb-switch-target{min-inline-size:var(--kb-button-touch-min);min-block-size:var(--kb-button-touch-min);inline-size:var(--kb-switch-width);block-size:var(--kb-switch-height);flex:none;place-items:center;display:inline-grid;position:relative}.kb-switch-control{z-index:1;opacity:0;cursor:pointer;touch-action:manipulation;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.kb-switch-track{box-sizing:border-box;inline-size:var(--kb-switch-width);block-size:var(--kb-switch-height);padding:var(--kb-switch-inset);border:1px solid var(--kb-switch-track-border);border-radius:var(--kb-switch-radius);background:var(--kb-switch-track-background);box-shadow:var(--kb-switch-track-shadow);pointer-events:none;grid-template-columns:repeat(2,1fr);align-items:center;display:grid;position:relative}.kb-switch-thumb{box-sizing:border-box;inline-size:calc(var(--kb-switch-height) - var(--kb-switch-inset) * 2 - 2px);block-size:calc(var(--kb-switch-height) - var(--kb-switch-inset) * 2 - 2px);border:1px solid var(--kb-switch-thumb-border);border-radius:var(--kb-switch-radius);background:var(--kb-switch-thumb-background);box-shadow:var(--kb-switch-thumb-shadow);position:absolute;inset-block-start:var(--kb-switch-inset);inset-inline-start:var(--kb-switch-inset);transform:translate(0)}.kb-switch-off,.kb-switch-on{inline-size:var(--kb-switch-icon-size);block-size:var(--kb-switch-icon-size);justify-self:center;place-items:center;display:grid;position:relative}.kb-switch-off>*,.kb-switch-on>*{block-size:100%;inline-size:100%}.kb-switch-on{opacity:.55}:where(.kb-switch[data-off-tone]:not([data-off-tone=neutral])) .kb-switch-control:where(:not(:checked))+.kb-switch-track{background-color:color-mix(in oklab, var(--_switch-off-color) 28%, var(--kb-material-field-bg));background-image:linear-gradient(180deg, color-mix(in oklab, var(--_switch-off-color) 18%, transparent), color-mix(in oklab, var(--_switch-off-color) 32%, transparent));border-color:color-mix(in oklab, var(--_switch-off-color) 68%, var(--kb-material-raised-border))}:where(.kb-switch[data-off-tone]:not([data-off-tone=neutral])) .kb-switch-control:where(:not(:checked))+.kb-switch-track .kb-switch-thumb{border-color:color-mix(in oklab, var(--_switch-off-color) 55%, var(--kb-switch-thumb-border))}:where(.kb-switch[data-off-tone]:not([data-off-tone=neutral])) .kb-switch-control:where(:not(:checked))+.kb-switch-track .kb-switch-off{color:color-mix(in oklab, var(--_switch-off-color) 80%, var(--kb-color-fg))}:where(.kb-switch:not([data-on-tone=neutral])) .kb-switch-control:where(:checked)+.kb-switch-track{background-color:color-mix(in oklab, var(--_switch-on-color) 28%, var(--kb-material-field-bg));background-image:linear-gradient(180deg, color-mix(in oklab, var(--_switch-on-color) 18%, transparent), color-mix(in oklab, var(--_switch-on-color) 32%, transparent));border-color:color-mix(in oklab, var(--_switch-on-color) 68%, var(--kb-material-raised-border))}:where(.kb-switch:not([data-on-tone=neutral])) .kb-switch-control:where(:checked)+.kb-switch-track .kb-switch-thumb{border-color:color-mix(in oklab, var(--_switch-on-color) 55%, var(--kb-switch-thumb-border))}:where(.kb-switch:not([data-on-tone=neutral])) .kb-switch-control:where(:checked)+.kb-switch-track .kb-switch-on{color:color-mix(in oklab, var(--_switch-on-color) 80%, var(--kb-color-fg))}.kb-switch-control:checked+.kb-switch-track .kb-switch-off{opacity:.55}.kb-switch-control:checked+.kb-switch-track .kb-switch-on{opacity:1}.kb-switch-control:checked+.kb-switch-track .kb-switch-thumb{transform:translateX(calc(var(--kb-switch-width) - var(--kb-switch-height)))}.kb-switch:dir(rtl) .kb-switch-control:checked+.kb-switch-track .kb-switch-thumb{transform:translateX(calc(var(--kb-switch-height) - var(--kb-switch-width)))}.kb-switch-control:focus-visible+.kb-switch-track{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-switch[data-invalid] .kb-switch-track{border-color:var(--kb-color-danger)}.kb-switch-label{overflow-wrap:anywhere;min-inline-size:0;font-size:var(--kb-text-control-size);font-weight:var(--kb-font-weight-medium);line-height:var(--kb-text-leading-control);cursor:pointer}.kb-switch-description,.kb-switch-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-switch-error{color:var(--kb-color-danger)}.kb-switch-control[readonly],.kb-switch[data-readonly] .kb-switch-label{cursor:default}.kb-switch-control:disabled+.kb-switch-track,.kb-switch:has(.kb-switch-control:disabled) .kb-switch-label{opacity:.5}.kb-switch-control:disabled,.kb-switch:has(.kb-switch-control:disabled) .kb-switch-label{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){.kb-switch-thumb{transition:transform var(--kb-switch-duration) var(--kb-motion-easing-standard)}.kb-switch-track{transition:background-color var(--kb-switch-duration) var(--kb-motion-easing-standard), border-color var(--kb-switch-duration) var(--kb-motion-easing-standard), box-shadow var(--kb-switch-duration) var(--kb-motion-easing-standard)}.kb-switch-off,.kb-switch-on{transition:opacity var(--kb-switch-duration) var(--kb-motion-easing-smooth), color var(--kb-switch-duration) var(--kb-motion-easing-smooth)}}@media (forced-colors:active){.kb-switch,.kb-switch-description,.kb-switch-error,.kb-switch-off,.kb-switch-on{color:canvastext}.kb-switch .kb-switch-control+.kb-switch-track{box-shadow:none;background:canvas;border-color:buttontext}.kb-switch .kb-switch-control+.kb-switch-track .kb-switch-thumb{box-shadow:none;background:buttonface;border-color:buttontext}.kb-switch .kb-switch-control:checked+.kb-switch-track,.kb-switch[data-invalid] .kb-switch-control+.kb-switch-track{border-color:highlight}.kb-switch .kb-switch-control:focus-visible+.kb-switch-track{outline-color:highlight}.kb-switch .kb-switch-control:disabled+.kb-switch-track,.kb-switch .kb-switch-control:disabled+.kb-switch-track .kb-switch-thumb,.kb-switch:has(.kb-switch-control:disabled) .kb-switch-label,.kb-switch[data-disabled] .kb-switch-description{color:graytext;opacity:1;border-color:graytext}}.kb-text{min-inline-size:0;max-inline-size:var(--kb-text-measure);font-family:var(--kb-font-sans);font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-fg);overflow-wrap:anywhere;margin:0}.kb-text[data-size=sm]{font-size:var(--kb-text-small-size)}.kb-text[data-size=lg]{font-size:var(--kb-size-lg)}.kb-text[data-tone=muted]{color:var(--kb-text-muted)}.kb-textarea{gap:var(--kb-space-1);flex-direction:column;min-inline-size:0;display:flex}.kb-textarea-label{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-text-leading-control);color:var(--kb-color-fg)}.kb-textarea-control{box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;min-block-size:var(--kb-textarea-min-height);padding-block:var(--kb-textarea-padding-block);padding-inline:var(--kb-textarea-padding-inline);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-radius-md);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-body);resize:vertical}.kb-textarea[data-resize=none] .kb-textarea-control{resize:none}.kb-textarea[data-resize=both] .kb-textarea-control{resize:both}.kb-textarea-control::placeholder{color:var(--kb-color-muted)}@media (hover:hover) and (pointer:fine){.kb-textarea:not([data-invalid]) .kb-textarea-control:hover:not(:disabled):not(:focus-visible){border-color:var(--kb-color-muted)}}.kb-textarea[data-invalid] .kb-textarea-control{border-color:var(--kb-color-danger)}.kb-textarea-control:focus-visible,.kb-textarea[data-readonly] .kb-textarea-control:focus-visible,.kb-textarea[data-invalid] .kb-textarea-control:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px;border-color:var(--kb-color-ring);background:var(--kb-color-bg)}.kb-textarea[data-disabled],.kb-textarea:has(.kb-textarea-control:disabled){opacity:.5}.kb-textarea[data-disabled] .kb-textarea-control,.kb-textarea-control:disabled{cursor:not-allowed;box-shadow:none;resize:none}.kb-textarea[data-readonly] .kb-textarea-control,.kb-textarea-control[readonly]{background:var(--kb-color-surface);cursor:default}.kb-textarea-description,.kb-textarea-error{overflow-wrap:anywhere;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);margin:0}.kb-textarea-description{color:var(--kb-color-muted)}.kb-textarea-error{color:var(--kb-color-danger)}@media (prefers-reduced-motion:no-preference){.kb-textarea-control{transition:border-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-fast) var(--kb-motion-easing-standard)}}@media (forced-colors:active){.kb-textarea-control,.kb-textarea[data-readonly] .kb-textarea-control,.kb-textarea:not([data-invalid]) .kb-textarea-control:hover:not(:disabled):not(:focus-visible){color:fieldtext;box-shadow:none;background:field;border-color:buttontext}.kb-textarea[data-invalid] .kb-textarea-control{border-color:highlight}.kb-textarea-control:focus-visible,.kb-textarea[data-readonly] .kb-textarea-control:focus-visible,.kb-textarea[data-invalid] .kb-textarea-control:focus-visible{border-color:highlight;outline-color:highlight}.kb-textarea[data-disabled],.kb-textarea:has(.kb-textarea-control:disabled){opacity:1}.kb-textarea[data-disabled] .kb-textarea-label,.kb-textarea:has(.kb-textarea-control:disabled) .kb-textarea-label,.kb-textarea[data-disabled] .kb-textarea-description,.kb-textarea:has(.kb-textarea-control:disabled) .kb-textarea-description,.kb-textarea[data-disabled] .kb-textarea-control,.kb-textarea-control:disabled{color:graytext;opacity:1;border-color:graytext}}.kb-toolbar{align-items:center;gap:var(--kb-space-1);width:fit-content;max-width:100%;padding:var(--kb-toolbar-padding);border:1px solid var(--kb-color-border);border-radius:var(--kb-toolbar-radius);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);flex-wrap:wrap;display:flex}.kb-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch}.kb-toolbar-group{align-items:center;gap:var(--kb-space-1);flex-wrap:wrap;display:flex}.kb-toolbar-separator{width:1px;margin:var(--kb-space-1) var(--kb-space-1);background:var(--kb-color-border);align-self:stretch}.kb-toolbar[data-orientation=vertical] .kb-toolbar-separator{width:auto;height:1px}.kb-tooltip{max-width:18rem;padding:var(--kb-tooltip-padding-block) var(--kb-tooltip-padding-inline);border-radius:var(--kb-radius-sm);background:var(--kb-popup-background);box-shadow:var(--kb-popup-shadow);color:var(--kb-color-fg);font-size:var(--kb-text-small-size);opacity:1;transition:opacity var(--kb-popup-motion-duration) var(--kb-popup-motion-easing);border:1px solid var(--kb-popup-border);background-image:linear-gradient(180deg, color-mix(in srgb, var(--kb-material-raised-top) 25%, transparent), transparent);line-height:1.5}.kb-tooltip[data-starting-style],.kb-tooltip[data-ending-style]{opacity:0}@media (prefers-reduced-motion:reduce){.kb-tooltip{transition:none}}@media (forced-colors:active){.kb-tooltip{color:canvastext;box-shadow:none;background:canvas;border-color:canvastext}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kb.ui/css",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.10.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/KhallilB/kbui.git",
|
|
9
|
+
"directory": "packages/css"
|
|
10
|
+
},
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"sideEffects": [
|
|
15
|
+
"*.css"
|
|
16
|
+
],
|
|
17
|
+
"exports": {
|
|
18
|
+
"./styles.css": "./dist/styles.css",
|
|
19
|
+
"./reset.css": "./dist/reset.css",
|
|
20
|
+
"./components/*.css": "./dist/components/*.css"
|
|
21
|
+
},
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "bun scripts/build.ts",
|
|
24
|
+
"test": "bun test",
|
|
25
|
+
"typecheck": "tsc --noEmit -p tsconfig.json"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"lightningcss": "1.33.0"
|
|
29
|
+
}
|
|
30
|
+
}
|