@kb.ui/css 0.10.4 → 0.12.0
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 +39 -4
- package/dist/components/accordion.css +1 -0
- package/dist/components/avatar.css +1 -0
- package/dist/components/callout.css +1 -1
- package/dist/components/card.css +1 -1
- package/dist/components/code.css +1 -1
- package/dist/components/codeblock.css +1 -0
- package/dist/components/collection.css +1 -0
- package/dist/components/collectionlist.css +1 -0
- package/dist/components/collectionrow.css +1 -0
- package/dist/components/confirmaction.css +1 -0
- package/dist/components/copyabletext.css +1 -0
- package/dist/components/dashboard.css +1 -0
- package/dist/components/descriptionlist.css +1 -0
- package/dist/components/dialog.css +1 -1
- package/dist/components/disclosure.css +1 -0
- package/dist/components/emptystate.css +1 -0
- package/dist/components/errorsummary.css +1 -1
- package/dist/components/form.css +1 -0
- package/dist/components/formsection.css +1 -0
- package/dist/components/gallery.css +1 -0
- package/dist/components/grid.css +1 -1
- package/dist/components/image.css +1 -0
- package/dist/components/inline.css +1 -1
- package/dist/components/multiselect.css +1 -1
- package/dist/components/pageheader.css +1 -0
- package/dist/components/panel.css +1 -1
- package/dist/components/popover.css +1 -0
- package/dist/components/settings.css +1 -0
- package/dist/components/skeleton.css +1 -0
- package/dist/components/spinner.css +1 -0
- package/dist/components/stack.css +1 -0
- package/dist/components/statsrow.css +1 -0
- package/dist/components/status.css +1 -1
- package/dist/components/supportingpane.css +1 -0
- package/dist/components/table.css +1 -0
- package/dist/components/tabs.css +1 -0
- package/dist/components/thumbnail.css +1 -0
- package/dist/components/toast.css +1 -0
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,23 +32,43 @@ Plain HTML works as well:
|
|
|
32
32
|
<button class="kb-button" data-variant="secondary" data-size="sm">Cancel</button>
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
+
## Disclosure and overlays
|
|
36
|
+
|
|
37
|
+
`accordion.css` supplies `.kb-accordion`, `-item`, `-header`, `-trigger` and `-panel` parts. `disclosure.css` supplies `.kb-disclosure`, `-trigger` and `-panel`. Triggers use `data-panel-open` and `data-disabled`; closed panels must remain hidden or unmounted. Renderers own ARIA relationships and state.
|
|
38
|
+
|
|
39
|
+
`popover.css` supplies `.kb-popover-positioner`, `.kb-popover`, `-header`, `-body`, `-footer`, `-title` and `-description`. A positioning engine supplies `--available-width` and `--available-height`; open/starting/ending attributes control anchored motion. A direct Body child enables constrained content scrolling while Header/Footer remain visible. See the [overlay guide](../../docs/guides/forms-and-overlays.md) for portals, drawers and confirmation compositions.
|
|
40
|
+
|
|
35
41
|
## Components
|
|
36
42
|
|
|
37
|
-
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.
|
|
43
|
+
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.
|
|
38
44
|
|
|
39
45
|
| File | Expected markup |
|
|
40
46
|
|---|---|
|
|
47
|
+
| `tabs.css` | `.kb-tabs` with list, tab, indicator and panel parts; each part carries orientation, variant and size from its nearest root |
|
|
48
|
+
| `image.css` | `.kb-image` with ratio, fit and request state; visual fallback and native decorative img; renderer owns request lifecycle |
|
|
49
|
+
| `avatar.css` | `.kb-avatar` with `data-size` and `data-shape` (`circle`, `square`, `rounded`, `hexagon`, `diamond`); `.kb-avatar-media` inherits root radius and clips upright media for polygons; `.kb-avatar-initials` supplies fallback text; also load `image.css` |
|
|
50
|
+
| `thumbnail.css` | Native figure with media and caption/title/description; also load `image.css` |
|
|
51
|
+
| `collection.css` | `.kb-collection` with toolbar, filters, native table, page checkboxes, bulk actions and pagination; renderer owns state; partial imports need `Button`, `Checkbox`, `Input` and `Select` CSS |
|
|
41
52
|
| `container.css` | `.kb-container` with `data-size` (`sm`, `md`, `lg`, `full`) and optional `data-gutter="none"` |
|
|
53
|
+
| `dashboard.css` | `.kb-dashboard` page frame with `-header`, `-metrics` and `-panels` regions; `-primary` and `-secondary` sit two thirds and one third from 60rem of panels width and stack below it |
|
|
54
|
+
| `pageheader.css` | `.kb-pageheader` with `data-size` (`sm`, `md`, `lg`) and optional `data-divider`, wrapping `-navigation`, `-main`, `-heading`, `-eyebrow`, `-headline`, `-title`, `-meta`, `-description`, `-actions` and `-body` parts; actions wrap below the heading without media queries |
|
|
55
|
+
| `gallery.css` | `.kb-gallery` page frame (up to 80rem, gutters 1, 1.5 and 2rem from 48 and 64rem of viewport width) with `-header`, `-filters`, `-empty` and `-items` regions; `-items` is a `.kb-grid` list of `.kb-gallery-item` with optional `data-featured`. One to four columns from 30, 48 and 64rem of gallery width; item content stretches to the row height. Also load `grid.css` |
|
|
56
|
+
| `statsrow.css` | `.kb-statsrow` list with `data-appearance` (`plain`, `outlined`) and `.kb-statsrow-item` children holding a `.kb-stat`, `-trend` (`-change` with `data-trend`, `data-tone` and `-glyph`, `-context`) and `-link`; equal columns fill the region and wrap below `--kb-statsrow-item-min-width`; subgrid aligns parts across a row; also load `stat.css` |
|
|
57
|
+
| `grid.css` | `.kb-grid` with `data-layout` (`auto`, `stack`), `data-columns` (`auto`, `1`, `2`, `3`, `4`), `data-min-item-width` (`sm`, `md`, `lg`), `data-gap` (`none`, `sm`, `md`, `lg`) and `data-align`; resets native list markers and margins |
|
|
42
58
|
| `inline.css` | `.kb-inline` with `data-gap`, `data-align` and `data-justify`; wraps in source order |
|
|
59
|
+
| `stack.css` | `.kb-stack` with `data-gap`, `data-align` (`start`, `center`, `end`, `stretch`) and `data-justify`; flows top to bottom in source order; resets child block margins and native list markers |
|
|
43
60
|
| `split.css` | `.kb-split` with `data-ratio`, `data-collapse`, `data-gap` and `data-align`; two `.kb-split-track` children containing the column content |
|
|
44
|
-
| `
|
|
61
|
+
| `supportingpane.css` | `.kb-supportingpane` page frame (up to 80rem, gutters stepping at 48rem and 64rem of viewport) with `-main` and `-aside` regions; the aside sits beside main from 48rem of the pane's content width and below it under that |
|
|
62
|
+
| `separator.css` | Native hr with `.kb-separator` and `data-orientation`; decorative rules need `aria-hidden` and role none |
|
|
45
63
|
| `heading.css` | Native heading with `.kb-heading` and `data-size` (`sm`, `md`, `lg`, `xl`, `display`); rank follows document outline |
|
|
46
64
|
| `text.css` | `p`, `span` or `div` with `.kb-text`, `data-size` (`sm`, `md`, `lg`) and `data-tone` (`default`, `muted`) |
|
|
47
65
|
| `link.css` | Native anchor with href and `.kb-link`; underline and visible keyboard focus |
|
|
48
|
-
| `code.css` |
|
|
66
|
+
| `code.css` | Inline `code.kb-code` or `.kb-code[data-block]` wrapping `-header`, `-viewport`, `-pre`, `-content`, `-line` (`[data-highlighted]`), `-line-number`, `-line-text` and `[data-syntax]` spans |
|
|
67
|
+
| `copyabletext.css` | `.kb-copyabletext` with field/plain appearance, size, copy state, content tones, expandable full-value view and label/value/actions/toggle/copy/feedback/link/highlight/code slots; also load `link.css` and `code.css` for automatic recognition |
|
|
68
|
+
| `codeblock.css` | `.kb-codeblock` block toolbar; also import `code.css` for shared listing anatomy and tokens |
|
|
49
69
|
| `button.css` | `.kb-button` with `data-variant` (`primary`, `secondary`, `ghost`, `danger`), `data-size` (`sm`, `md`, `lg`, `icon`) and `data-disabled` |
|
|
50
70
|
| `numberfield.css` | `.kb-numberfield` with size/state attributes, label, grouped input/step controls and full-width help/error |
|
|
51
|
-
| `fileinput.css` | `.kb-fileinput` with labeled picker, retained list and named removal controls; also load Button CSS when importing parts |
|
|
71
|
+
| `fileinput.css` | `.kb-fileinput` with labeled picker, retained list and named removal controls; also load `Button` CSS when importing parts |
|
|
52
72
|
| `combobox.css` | `.kb-combobox` with labeled search input, clear/trigger actions, portaled listbox popup and polite empty status |
|
|
53
73
|
| `multiselect.css` | `.kb-multiselect` with labeled chip toolbar, removable selection chips, search input, clear/trigger actions and portaled listbox popup |
|
|
54
74
|
| `input.css` | `.kb-input` with `data-size`, `data-invalid` and `data-disabled`, wrapping `-label`, `-shell`, `-start`, `-control`, `-end`, `-description` and `-error` parts |
|
|
@@ -56,8 +76,20 @@ The first line of each stylesheet describes the markup it expects. The table sho
|
|
|
56
76
|
| `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 |
|
|
57
77
|
| `fieldset.css` | Native `fieldset` with `.kb-fieldset`, `data-disabled` and `data-invalid`, wrapping `-legend`, `-description`, `-fields` and `-error` parts |
|
|
58
78
|
| `formactions.css` | `.kb-formactions` with `data-align` (`end`, `start`, `between`) and optional `data-divider` |
|
|
79
|
+
| `formsection.css` | Native `fieldset` with `.kb-formsection`, optional `data-layout` (`stack`, `split`), `data-disabled` and `data-invalid`, wrapping `-header` (`-title`, `-description`) and `-body` (`-fields`, `-error`, `-actions`); sections inside `.kb-settings` split unless `data-layout` is set. Also load `formactions.css` and `heading.css` |
|
|
80
|
+
| `form.css` | Native `form` with `.kb-form` and `data-width` (`sm`, `md`, `full`), wrapping `-header`, `-body` and `-actions` regions; actions fill the row below 30rem. Also load `formactions.css` |
|
|
81
|
+
| `settings.css` | `.kb-settings` with `-header` and `-sections` regions and rules between sections |
|
|
59
82
|
| `errorsummary.css` | `.kb-errorsummary` alert container with `-title`, `-description`, `-list`, `-item` and `-link` parts |
|
|
83
|
+
| `emptystate.css` | `.kb-emptystate` with `data-size` (`sm`, `md`, `lg`), `data-variant` (`surface`, `subtle`, `plain`) and `data-tone` (`neutral`, `info`, `warning`, `danger`), wrapping `-icon`, `-header`, `-eyebrow`, `-title`, `-description`, `-body`, `-actions` and `-footer` parts |
|
|
84
|
+
| `spinner.css` | `.kb-spinner` with `data-size` (`sm`, `md`, `lg`), `data-tone` (`current`, `accent`, `neutral`, `info`, `success`, `warning`, `danger`), `data-variant` (`ring`, `orbit`, `dots`, `bars`), `data-appearance` (`plain`, `pill`) and optional `data-show-label`, wrapping `-icon` (`-track`, `-arc`, `-core`, `-dot`, `-bar`) and `-label` |
|
|
85
|
+
| `skeleton.css` | `.kb-skeleton` with `data-variant` (`text`, `rect`, `circle`, `pill`), `data-size` (`sm`, `md`, `lg`), `data-animation` (`shimmer`, `pulse`, `wave`), `data-tone` (`default`, `subtle`, `accent`) and `data-animated`, wrapping `-line` or `-content` parts |
|
|
86
|
+
| `toast.css` | Named `.kb-toast-viewport` with logical `data-placement`, `.kb-toast` tone/state attributes and content/title/description/action/close parts; renderer owns queue, announcements, timing and focus |
|
|
87
|
+
| `descriptionlist.css` | Native dl/dt/dd groups with responsive label/value columns, density and dividers |
|
|
88
|
+
| `collectionlist.css` | Native unordered/ordered record lists with immediate-row density and separators |
|
|
89
|
+
| `collectionrow.css` | Native li with aligned leading/content/aside slots, selected state, wrapping actions and responsive stacking |
|
|
90
|
+
| `table.css` | Native table parts with density, sorting, selected rows, sticky headers/edges, a keyboard-scrollable container and independent row actions; see [`Table` API](../react/docs/components/Table.md) |
|
|
60
91
|
| `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 |
|
|
92
|
+
| `confirmaction.css` | `.kb-confirmaction` on a `.kb-dialog-popup`, with `data-pending` and `-details` and `-error` parts; the error reuses `.kb-callout` |
|
|
61
93
|
|
|
62
94
|
## Build and test
|
|
63
95
|
|
|
@@ -76,3 +108,6 @@ The tests check that each component file starts with its `Anatomy:` line and sty
|
|
|
76
108
|
[Typography](../../docs/guides/typography.md) covers hierarchy, composition, plain HTML recipes and theme tokens.
|
|
77
109
|
|
|
78
110
|
See [Layout composition](../../docs/guides/layout.md) for widths, gutters, collapse thresholds and plain HTML recipes.
|
|
111
|
+
|
|
112
|
+
See [Loading and feedback](../../docs/guides/loading-and-feedback.md) for waiting, missing content, completion and recoverable failure recipes.
|
|
113
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-accordion{border:1px solid var(--kb-accordion-border);border-radius:var(--kb-accordion-radius);background:var(--kb-accordion-background);inline-size:100%;min-inline-size:0;color:var(--kb-accordion-color)}.kb-accordion-item+.kb-accordion-item{border-block-start:1px solid var(--kb-accordion-border)}.kb-accordion-header{font:inherit;margin:0}.kb-accordion-trigger{justify-content:space-between;align-items:center;gap:var(--kb-space-3);inline-size:100%;min-block-size:var(--kb-accordion-trigger-height);padding:var(--kb-space-3) var(--kb-accordion-padding);border-radius:var(--kb-accordion-radius);color:inherit;font:inherit;font-weight:var(--kb-font-weight-strong);text-align:start;overflow-wrap:anywhere;cursor:pointer;background:0 0;border:0;display:flex}.kb-accordion-trigger:after{content:"";inline-size:var(--kb-space-2);block-size:var(--kb-space-2);transition:transform var(--kb-accordion-motion-duration) var(--kb-accordion-motion-easing);border-block-end:1px solid;border-inline-end:1px solid;flex:none;margin-inline-end:var(--kb-space-1);transform:rotate(45deg)}.kb-accordion-trigger[data-panel-open]:after{transform:rotate(225deg)}.kb-accordion-trigger:hover:not([data-disabled]):not(:disabled){background:var(--kb-color-surface)}.kb-accordion-trigger:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px;position:relative}.kb-accordion-trigger[data-disabled],.kb-accordion-trigger:disabled{color:var(--kb-color-muted);cursor:not-allowed}.kb-accordion-panel{height:var(--accordion-panel-height);transition:height var(--kb-accordion-motion-duration) var(--kb-accordion-motion-easing);overflow:clip}.kb-accordion-panel[data-starting-style],.kb-accordion-panel[data-ending-style]{height:0}.kb-accordion-panel-content{padding:0 var(--kb-accordion-padding) var(--kb-accordion-padding);overflow-wrap:anywhere;font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body);display:flow-root}@media (prefers-reduced-motion:reduce){.kb-accordion-trigger:after,.kb-accordion-panel{transition:none}}@media (forced-colors:active){.kb-accordion{border-color:canvastext}.kb-accordion-trigger:focus-visible{outline-color:highlight}.kb-accordion-trigger[data-disabled],.kb-accordion-trigger:disabled{color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-avatar{inline-size:var(--kb-avatar-size);block-size:var(--kb-avatar-size);border-radius:var(--kb-avatar-radius);vertical-align:middle;font-size:var(--kb-avatar-font-size);font-weight:var(--kb-avatar-font-weight);flex:none;line-height:1;display:inline-flex}.kb-avatar[data-size=xs]{--kb-avatar-size:var(--kb-avatar-size-xs);--kb-avatar-font-size:var(--kb-avatar-font-size-xs)}.kb-avatar[data-size=sm]{--kb-avatar-size:var(--kb-avatar-size-sm);--kb-avatar-font-size:var(--kb-avatar-font-size-sm)}.kb-avatar[data-size=lg]{--kb-avatar-size:var(--kb-avatar-size-lg);--kb-avatar-font-size:var(--kb-avatar-font-size-lg)}.kb-avatar[data-size=xl]{--kb-avatar-size:var(--kb-avatar-size-xl);--kb-avatar-font-size:var(--kb-avatar-font-size-xl)}.kb-avatar[data-shape=square],.kb-avatar[data-shape=hexagon],.kb-avatar[data-shape=diamond]{border-radius:0}.kb-avatar[data-shape=rounded]{border-radius:var(--kb-avatar-square-radius)}.kb-avatar-media{--kb-image-background:var(--kb-avatar-background);--kb-image-color:var(--kb-avatar-color);--kb-image-border:var(--kb-avatar-border);--kb-image-fallback-padding:0;block-size:100%;box-shadow:var(--kb-avatar-shadow)}.kb-avatar>.kb-avatar-media{border-radius:inherit}.kb-avatar[data-shape=hexagon]>.kb-avatar-media{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}.kb-avatar[data-shape=diamond]>.kb-avatar-media{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}.kb-avatar-initials{font-size:var(--kb-avatar-font-size);font-weight:var(--kb-avatar-font-weight);letter-spacing:var(--kb-avatar-tracking);line-height:1}@media (forced-colors:active){.kb-avatar-media{box-shadow:none}}}
|
|
@@ -1 +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)
|
|
1
|
+
@layer kbui.components{.kb-callout{--_callout-ink:var(--kb-color-muted);--_callout-title:var(--kb-color-fg);gap:var(--kb-space-3);padding:var(--kb-callout-padding-block) var(--kb-callout-padding-inline);border:1px solid color-mix(in oklab, var(--_callout-ink) 65%, transparent);border-radius:var(--kb-callout-radius);background:color-mix(in oklab, var(--_callout-ink) 18%, var(--kb-material-surface-bg));box-shadow:var(--kb-material-inlay-shadow);color:var(--kb-color-fg);font-size:var(--kb-text-control-size);display:flex}.kb-callout:is([data-tone=info],[data-tone=success],[data-tone=warning],[data-tone=danger]){--_callout-title:var(--_callout-ink)}.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;flex:auto;min-width:0;display:flex}.kb-callout-title{color:var(--_callout-title);font-weight:var(--kb-font-weight-strong)}.kb-callout-actions{justify-content:flex-end;gap:var(--kb-space-2);margin-top:var(--kb-space-2);flex-wrap:wrap;display:flex}.kb-callout-actions .kb-button[data-variant=ghost]{color:color-mix(in oklab, var(--kb-color-muted) 60%, var(--kb-color-fg))}@media (forced-colors:active){.kb-callout{color:canvastext;background:canvas;border-color:canvastext}.kb-callout-icon,.kb-callout-title{color:canvastext}.kb-callout-actions .kb-button[data-variant=ghost]{color:buttontext}}}
|
package/dist/components/card.css
CHANGED
|
@@ -1 +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}}}
|
|
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)}}@container (width<=36.25rem){.kb-card{--kb-card-padding:var(--kb-card-padding-compact)}}@media (forced-colors:active){.kb-card{box-shadow:none;background-image:none}}}
|
package/dist/components/code.css
CHANGED
|
@@ -1 +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}}
|
|
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}.kb-code[data-block]{--_code-expanded-max-height:var(--kb-code-block-max-height);border:1px solid var(--kb-code-block-border);border-radius:var(--kb-code-block-radius);background:var(--kb-code-block-face), var(--kb-code-block-background);inline-size:100%;min-inline-size:0;max-inline-size:100%;box-shadow:var(--kb-code-block-shadow);color:var(--kb-color-fg);font-family:var(--kb-font-mono);font-size:var(--kb-code-block-font-size);line-height:var(--kb-code-block-leading);white-space:normal;overflow-wrap:normal;box-decoration-break:clone;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);flex-direction:column;padding:0;display:flex;position:relative;overflow:hidden}.kb-code[data-block]:hover,.kb-code[data-block]:focus-within{border-color:color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-code-block-border))}.kb-code-header{justify-content:space-between;align-items:center;gap:var(--kb-code-header-gap);min-inline-size:0;padding:var(--kb-code-header-padding-block) var(--kb-code-header-padding-inline);border-block-end:1px solid var(--kb-code-block-border);background:var(--kb-code-header-face), var(--kb-code-header-background);box-shadow:var(--kb-code-header-shadow);font-family:var(--kb-font-sans);font-size:var(--kb-code-title-size);line-height:var(--kb-text-leading-control);flex-wrap:wrap;display:flex}.kb-code[data-block]:not([data-collapsible]):not(:has(.kb-code-meta)) .kb-code-header{z-index:2;box-shadow:none;background:0 0;border-block-end:0;padding:0;position:absolute;inset-block-start:var(--kb-space-2);inset-inline-end:var(--kb-space-2)}.kb-code-meta{align-items:center;gap:var(--kb-space-2);flex-wrap:wrap;min-inline-size:0;display:inline-flex}.kb-code-title{align-items:center;gap:var(--kb-space-2);min-inline-size:0;color:var(--kb-color-fg);font-family:var(--kb-font-mono);font-size:var(--kb-code-title-size);font-weight:var(--kb-font-weight-strong);letter-spacing:-.01em;overflow-wrap:anywhere;display:inline-flex}.kb-code-title:before{content:"";inline-size:var(--kb-space-1);block-size:var(--kb-space-3);background:var(--kb-color-accent);border-radius:2px;flex:none}.kb-code-language{padding:var(--kb-code-badge-padding-block) var(--kb-code-badge-padding-inline);border:1px solid var(--kb-code-gutter-border);border-radius:var(--kb-code-badge-radius);background:var(--kb-code-block-background);box-shadow:var(--kb-material-inlay-shadow);color:var(--kb-color-muted);font-family:var(--kb-font-mono);font-size:var(--kb-size-xs);font-weight:var(--kb-font-weight-medium);letter-spacing:.06em;text-transform:uppercase;align-items:center;display:inline-flex}.kb-code-actions{justify-content:flex-end;align-items:center;gap:var(--kb-space-2);flex-wrap:wrap;max-inline-size:100%;margin-inline-start:auto;display:inline-flex}.kb-code-toggle,.kb-code-copy{justify-content:center;align-items:center;gap:var(--kb-code-action-gap);min-block-size:var(--kb-code-action-height);max-inline-size:100%;padding:var(--kb-space-1) var(--kb-code-action-padding-inline);border:1px solid color-mix(in srgb, var(--kb-material-control-border) 55%, var(--kb-code-block-border));border-radius:var(--kb-code-action-radius);background:var(--kb-material-raised-face);box-shadow:var(--kb-material-raised-shadow);color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-size-xs);font-weight:var(--kb-font-weight-medium);line-height:var(--kb-text-leading-control);white-space:normal;overflow-wrap:anywhere;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), box-shadow var(--kb-motion-duration-base) var(--kb-motion-easing-standard), color var(--kb-motion-duration-base) var(--kb-motion-easing-standard), transform var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);display:inline-flex}.kb-code-toggle{min-inline-size:min(var(--kb-code-toggle-min-width), 100%)}.kb-code-copy{min-inline-size:min(var(--kb-code-copy-min-width), 100%)}.kb-code-toggle svg,.kb-code-copy svg{inline-size:var(--kb-size-xs);block-size:var(--kb-size-xs);stroke:currentColor;fill:none;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;flex:none}.kb-code-toggle svg{transition:transform var(--kb-code-motion-duration) var(--kb-code-motion-easing)}.kb-code-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.kb-code-copy[data-copy-state=copied] svg,.kb-code-copy[data-copy-state=failed] svg{animation:kb-code-icon-pop var(--kb-motion-duration-base) var(--kb-motion-easing-enter)}@keyframes kb-code-icon-pop{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.kb-code-toggle:hover,.kb-code-copy:hover{border-color:var(--kb-material-control-border);background:var(--kb-material-raised-top)}.kb-code-toggle:active,.kb-code-copy:active{transform:translateY(var(--kb-button-press-offset));box-shadow:var(--kb-material-pressed-shadow)}.kb-code-copy[data-copy-state=copied]{border-color:var(--kb-color-success);background:color-mix(in srgb, var(--kb-color-success) 10%, var(--kb-material-raised-top));color:var(--kb-color-success)}.kb-code-copy[data-copy-state=failed]{border-color:var(--kb-color-danger);background:color-mix(in srgb, var(--kb-color-danger) 10%, var(--kb-material-raised-top));color:var(--kb-color-fg)}.kb-code-toggle:focus-visible,.kb-code-copy:focus-visible,.kb-code-copy[data-copy-state=copied]:focus-visible,.kb-code-copy[data-copy-state=failed]:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-code-viewport{min-inline-size:0;max-block-size:var(--_code-max-height,none);box-shadow:var(--kb-material-field-shadow);overscroll-behavior:contain;scrollbar-gutter:stable;transition:max-block-size var(--kb-code-motion-duration) var(--kb-code-motion-easing);position:relative;overflow:auto}.kb-code[data-collapsible] .kb-code-viewport{max-block-size:var(--_code-max-height,var(--_code-expanded-max-height))}.kb-code[data-collapsed] .kb-code-viewport{max-block-size:var(--kb-code-collapsed-max-height);overflow:hidden}.kb-code[data-collapsed][data-collapsed-lines] .kb-code-viewport{max-block-size:calc((var(--_code-collapsed-lines,5) * 1em * var(--kb-code-block-leading)) + (2 * var(--kb-code-block-padding-block)))}.kb-code[data-collapsible] .kb-code-viewport:after{content:"";block-size:var(--kb-space-8);background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--kb-code-block-background) 78%, transparent) 55%, var(--kb-code-block-background));opacity:0;transform:translateY(var(--kb-space-2));pointer-events:none;transition:opacity var(--kb-code-motion-duration) var(--kb-code-motion-easing), transform var(--kb-code-motion-duration) var(--kb-code-motion-easing);position:absolute;inset-block-end:0;inset-inline:0}.kb-code[data-collapsed] .kb-code-viewport:after{opacity:1;transform:translateY(0)}.kb-code-viewport:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-code-pre{padding-block:var(--kb-code-block-padding-block);box-sizing:border-box;inline-size:max-content;min-inline-size:100%;font-family:var(--kb-font-mono);font-size:var(--kb-code-block-font-size);line-height:var(--kb-code-block-leading);tab-size:2;margin:0;padding-inline:0}.kb-code[data-min-lines] .kb-code-pre{min-block-size:calc((var(--_code-min-lines,0) * 1em * var(--kb-code-block-leading)) + (2 * var(--kb-code-block-padding-block)))}.kb-code-content{min-inline-size:100%;padding-inline:var(--kb-code-line-padding-inline);box-sizing:border-box;font:inherit;color:inherit;white-space:pre;display:block}.kb-code-content:has(.kb-code-line){white-space:normal;padding-inline:0;display:grid}.kb-code-line{align-items:baseline;gap:var(--kb-code-gutter-gap);min-block-size:calc(1em * var(--kb-code-block-leading));padding-inline:var(--kb-code-line-padding-inline);transition:background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), box-shadow var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);display:flex}.kb-code[data-line-numbers] .kb-code-line:not([data-highlighted]):hover{background-color:color-mix(in srgb, var(--kb-color-fg) 4%, transparent)}.kb-code-line[data-highlighted]{background:linear-gradient(90deg, var(--kb-code-line-highlight-background), color-mix(in srgb, var(--kb-code-line-highlight-background) 35%, transparent));box-shadow:inset 3px 0 0 var(--kb-code-line-highlight-border)}.kb-code-line-number{inline-size:var(--kb-code-gutter-width);border-inline-end:1px solid var(--kb-code-gutter-border);box-sizing:border-box;color:var(--kb-code-gutter-color);text-align:end;font-variant-numeric:tabular-nums;user-select:none;transition:color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), border-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);flex:none;padding-inline-end:var(--kb-space-2)}.kb-code-line[data-highlighted] .kb-code-line-number{border-inline-end-color:color-mix(in srgb, var(--kb-code-line-highlight-border) 45%, var(--kb-code-gutter-border));color:var(--kb-color-accent-ink);font-weight:var(--kb-font-weight-medium)}.kb-code[data-line-numbers] .kb-code-line:not([data-highlighted]):hover .kb-code-line-number{color:var(--kb-color-fg)}.kb-code-line-number:before{content:attr(data-line-number)}.kb-code-line-text{white-space:pre;flex:1}.kb-code [data-syntax=keyword]{color:var(--kb-code-syntax-keyword);font-weight:var(--kb-font-weight-medium)}.kb-code [data-syntax=string]{color:var(--kb-code-syntax-string)}.kb-code [data-syntax=comment]{color:var(--kb-code-syntax-comment);font-style:italic}.kb-code [data-syntax=number]{color:var(--kb-code-syntax-number)}.kb-code [data-syntax=tag]{color:var(--kb-code-syntax-tag)}.kb-code [data-syntax=attribute]{color:var(--kb-code-syntax-attribute)}.kb-code [data-syntax=type]{color:var(--kb-code-syntax-type)}.kb-code [data-syntax=function]{color:var(--kb-code-syntax-function)}.kb-code [data-syntax=operator]{color:var(--kb-code-syntax-operator)}.kb-code [data-syntax=property]{color:var(--kb-code-syntax-property)}@media (prefers-reduced-motion:reduce){.kb-code[data-block],.kb-code-toggle,.kb-code-copy,.kb-code-toggle svg,.kb-code-viewport,.kb-code[data-collapsible] .kb-code-viewport:after,.kb-code-line,.kb-code-line-number{transition:none}.kb-code-copy[data-copy-state=copied] svg,.kb-code-copy[data-copy-state=failed] svg{animation:none}.kb-code-toggle:active,.kb-code-copy:active{transform:none}}@media (forced-colors:active){.kb-code[data-block],.kb-code[data-block]:hover,.kb-code[data-block]:focus-within{box-shadow:none;border-color:canvastext}.kb-code-title:before{background:highlight}.kb-code-line[data-highlighted]{forced-color-adjust:none;color:marktext;background:mark;box-shadow:inset 3px 0 highlight}.kb-code-line[data-highlighted] .kb-code-line-number,.kb-code-line[data-highlighted] [data-syntax]{color:marktext}.kb-code-toggle:focus-visible,.kb-code-copy:focus-visible,.kb-code-copy[data-copy-state=copied]:focus-visible,.kb-code-copy[data-copy-state=failed]:focus-visible,.kb-code-viewport:focus-visible{outline-color:highlight}}.kb-code-feedback:not(.kb-sr-only){padding:var(--kb-space-2) var(--kb-code-header-padding-inline);color:var(--kb-color-danger);font-family:var(--kb-font-sans);font-size:var(--kb-text-caption-size);overflow-wrap:anywhere}.kb-code-copy:disabled{color:var(--kb-color-muted);cursor:not-allowed;box-shadow:none}.kb-code-copy[aria-disabled=true]{cursor:progress}@media (forced-colors:active){.kb-code-copy:disabled{color:graytext;border-color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-codeblock[data-block]:not([data-collapsible]):not(:has(.kb-code-meta)) .kb-code-header{padding:var(--kb-code-header-padding-block) var(--kb-code-header-padding-inline);border-block-end:1px solid var(--kb-code-block-border);background:var(--kb-code-header-face), var(--kb-code-header-background);box-shadow:var(--kb-code-header-shadow);justify-content:flex-end;position:static}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-collection{gap:var(--kb-collection-gap);inline-size:100%;min-inline-size:0;color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-text-small-size);display:grid}.kb-collection-toolbar,.kb-collection-filters,.kb-collection-bulk,.kb-collection-pagination{align-items:center;gap:var(--kb-collection-gap);flex-wrap:wrap;min-inline-size:0;display:flex}.kb-collection-toolbar{align-items:end;gap:var(--kb-space-4)}.kb-collection-toolbar>.kb-input{flex:2 1 var(--kb-grid-min-item-width-sm);min-inline-size:min(100%, var(--kb-grid-min-item-width-sm))}.kb-collection-filters{flex:1 1 var(--kb-select-popup-min-width);gap:var(--kb-space-4)}.kb-collection-filters>.kb-select{flex:1 1 var(--kb-select-popup-min-width);min-inline-size:min(100%, var(--kb-select-popup-min-width));max-inline-size:100%}.kb-collection-viewport{border:1px solid var(--kb-collection-border);border-radius:var(--kb-collection-radius);overflow:auto}.kb-collection-table{border-collapse:collapse;min-inline-size:var(--kb-collection-table-min-width);text-align:start;inline-size:100%}.kb-collection-caption{padding:var(--kb-collection-cell-padding);font-weight:var(--kb-font-weight-strong);text-align:start;background:var(--kb-collection-header-background)}.kb-collection-head,.kb-collection-cell{padding:var(--kb-collection-cell-padding);border-block-start:1px solid var(--kb-collection-border);text-align:start;overflow-wrap:break-word}.kb-collection-head{font-weight:var(--kb-font-weight-strong)}.kb-collection-row[data-selected]{background:var(--kb-collection-selected-background)}.kb-collection-empty{padding:var(--kb-space-6);text-align:center}.kb-collection-status{color:var(--kb-color-muted);margin:0}.kb-collection-bulk>[role=status]:first-of-type{margin-inline-end:auto}.kb-collection-bulk>[role=status]:last-of-type:empty{margin-inline-start:calc(var(--kb-collection-gap) * -1)}.kb-collection-bulk{padding:var(--kb-space-2);border:1px solid var(--kb-collection-border);border-radius:var(--kb-collection-radius);margin:0}.kb-collection-pagination{justify-content:space-between;align-items:end;gap:var(--kb-space-4) var(--kb-space-6);font-variant-numeric:tabular-nums}.kb-collection-pagination>div{align-items:end;gap:var(--kb-space-4);flex-wrap:wrap;min-inline-size:0;display:flex}.kb-collection-pagination>div:last-child{align-items:center;gap:var(--kb-space-2);flex-wrap:nowrap;max-inline-size:100%;margin-inline-start:auto}.kb-collection-pagination>div>span{overflow-wrap:anywhere;min-inline-size:0}.kb-collection-pagination>div:last-child>span{text-align:center}.kb-collection-pagination>div:last-child>.kb-button{flex-shrink:0}.kb-collection-pagination>div:first-child>span{padding-block:var(--kb-space-3)}.kb-collection-pagination .kb-select{min-inline-size:calc(var(--kb-input-height-md) * 2);max-inline-size:100%}.kb-collection-bulk [role=alert]{color:var(--kb-color-danger);flex-basis:100%}.kb-collection-viewport:focus-visible{outline:2px solid var(--kb-color-accent);outline-offset:2px}@media (forced-colors:active){.kb-collection-row[data-selected]{outline-offset:-1px;outline:1px solid highlight}.kb-collection-viewport:focus-visible{outline-color:highlight}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-collectionlist{inline-size:100%;min-inline-size:0;color:var(--kb-color-fg);margin:0;padding:0;container:kb-collectionlist/inline-size}.kb-collectionlist:not([data-ordered]){list-style:none}.kb-collectionlist[data-ordered]{padding-inline-start:var(--kb-space-6)}.kb-collectionlist[data-density=dense]>.kb-collectionrow{padding-block:var(--kb-collectionrow-dense-padding-block)}.kb-collectionlist[data-dividers]>.kb-collectionrow+.kb-collectionrow{border-block-start:1px solid var(--kb-color-border)}@media (forced-colors:active){.kb-collectionlist[data-dividers]>.kb-collectionrow+.kb-collectionrow{border-color:canvastext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-collectionrow{min-inline-size:0;padding-block:var(--kb-collectionrow-padding-block);color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-size-sm);line-height:var(--kb-text-leading-body);overflow-wrap:anywhere;container:kb-collectionrow/inline-size}.kb-collectionrow-layout{--_collectionrow-leading:0px;--_collectionrow-aside:0px;grid-template-columns:minmax(var(--_collectionrow-leading), auto) minmax(0, 1fr) minmax(var(--_collectionrow-aside), auto);min-inline-size:0;padding-inline:var(--kb-collectionrow-padding-inline);align-items:start;display:grid}.kb-collectionrow[data-leading]>.kb-collectionrow-layout{--_collectionrow-leading:var(--kb-collectionrow-leading-width)}.kb-collectionrow[data-aside]>.kb-collectionrow-layout{--_collectionrow-aside:var(--kb-collectionrow-aside-width)}.kb-collectionlist:has(>.kb-collectionrow[data-leading])>.kb-collectionrow>.kb-collectionrow-layout{--_collectionrow-leading:var(--kb-collectionrow-leading-width)}.kb-collectionlist:has(>.kb-collectionrow[data-aside])>.kb-collectionrow>.kb-collectionrow-layout{--_collectionrow-aside:var(--kb-collectionrow-aside-width)}.kb-collectionrow-leading{min-inline-size:0;max-inline-size:40cqi;grid-column:1;padding-inline-end:var(--kb-collectionrow-gap)}.kb-collectionrow-content{grid-column:2;min-inline-size:0}.kb-collectionrow-title{font-weight:var(--kb-font-weight-strong)}.kb-collectionrow-description{color:var(--kb-color-muted);margin-block-start:var(--kb-space-1)}.kb-collectionrow-aside{justify-content:flex-end;align-items:center;gap:var(--kb-space-2);min-inline-size:0;max-inline-size:50cqi;text-align:end;flex-wrap:wrap;grid-column:3;padding-inline-start:var(--kb-collectionrow-gap);display:flex}.kb-collectionrow-metadata{min-inline-size:0;max-inline-size:100%;color:var(--kb-color-muted)}.kb-collectionrow .kb-status{max-inline-size:100%}.kb-collectionrow .kb-status-text{white-space:normal;min-inline-size:0}.kb-collectionrow-actions{justify-content:flex-end;gap:var(--kb-space-2);flex-wrap:wrap;min-inline-size:0;max-inline-size:100%;display:flex}.kb-collectionrow-actions>:where(button,a){white-space:normal;overflow-wrap:anywhere;max-inline-size:100%}.kb-collectionrow-actions>.kb-button{height:auto;min-block-size:var(--kb-button-height-md);padding-block:var(--kb-space-2)}.kb-collectionrow-actions>.kb-button[data-size=sm]{min-block-size:var(--kb-button-height-sm)}.kb-collectionrow-actions>.kb-button[data-size=lg]{min-block-size:var(--kb-button-height-lg)}.kb-collectionrow[data-selected]{background:var(--kb-color-surface)}@container kb-collectionrow (width<48rem){.kb-collectionrow>.kb-collectionrow-layout{grid-template-columns:minmax(var(--_collectionrow-leading), auto) minmax(0, 1fr);row-gap:var(--kb-collectionrow-gap)}.kb-collectionrow-aside{grid-column:2;max-inline-size:none;padding-inline-start:0}}@media (forced-colors:active){.kb-collectionrow[data-selected]{outline-offset:-1px;outline:1px solid highlight}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-confirmaction[data-pending]{cursor:progress}.kb-confirmaction-details{gap:var(--kb-space-2);color:var(--kb-color-fg);font-size:var(--kb-text-control-size);margin-block-end:var(--kb-space-4);line-height:1.6;display:grid}.kb-confirmaction-details>*{margin-block:0}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-copyabletext{--_copyabletext-ink:var(--kb-copyabletext-value-color);align-items:center;gap:var(--kb-space-2) var(--kb-copyabletext-gap);inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--kb-copyabletext-padding);border:1px solid var(--kb-copyabletext-border);border-radius:var(--kb-copyabletext-radius);background:var(--kb-copyabletext-background);box-shadow:var(--kb-material-field-shadow);color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-control);vertical-align:middle;text-align:start;grid-template-columns:minmax(0,1fr) auto;display:inline-grid}.kb-copyabletext-label{color:var(--kb-color-muted);font-size:var(--kb-text-caption-size);font-weight:var(--kb-font-weight-medium);overflow-wrap:anywhere;grid-column:1/-1}.kb-copyabletext-value{min-inline-size:0;color:var(--_copyabletext-ink);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;text-transform:none;letter-spacing:normal}.kb-copyabletext:not([data-mono]) .kb-copyabletext-value{line-height:var(--kb-text-leading-body)}.kb-copyabletext[data-mono] .kb-copyabletext-value{font-family:var(--kb-font-mono)}.kb-copyabletext[data-truncate] .kb-copyabletext-value{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kb-copyabletext-actions{align-items:center;gap:var(--kb-space-2);min-inline-size:0;display:flex}.kb-copyabletext[data-expandable] .kb-copyabletext-value,.kb-copyabletext[data-expandable] .kb-copyabletext-actions{grid-column:1/-1}.kb-copyabletext[data-expandable] .kb-copyabletext-actions{flex-wrap:wrap;justify-content:space-between}.kb-copyabletext-toggle{min-block-size:var(--kb-button-height-sm);max-inline-size:100%;padding:var(--kb-space-1) 0;border-radius:var(--kb-radius-sm);color:var(--kb-color-muted);font-family:var(--kb-font-sans);font-size:var(--kb-text-caption-size);line-height:var(--kb-text-leading-control);text-align:start;text-underline-offset:.2em;overflow-wrap:anywhere;cursor:pointer;background:0 0;border:0;text-decoration:underline}.kb-copyabletext-toggle:hover{color:var(--kb-color-fg)}.kb-copyabletext-toggle:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-copyabletext[data-tone=accent]{--_copyabletext-ink:var(--kb-color-accent-ink)}.kb-copyabletext[data-tone=info]{--_copyabletext-ink:var(--kb-color-info)}.kb-copyabletext[data-tone=success]{--_copyabletext-ink:var(--kb-color-success)}.kb-copyabletext[data-tone=warning]{--_copyabletext-ink:var(--kb-color-warning)}.kb-copyabletext[data-tone=danger]{--_copyabletext-ink:var(--kb-color-danger)}.kb-copyabletext:where([data-tone]:not([data-tone=neutral]):not([data-appearance=plain])){border-color:color-mix(in srgb, var(--_copyabletext-ink) 35%, var(--kb-copyabletext-border));background:color-mix(in srgb, var(--_copyabletext-ink) 4%, var(--kb-copyabletext-background))}.kb-copyabletext-copy{min-inline-size:var(--kb-copyabletext-copy-min-width);min-block-size:var(--kb-copyabletext-target-size);max-inline-size:100%;padding:var(--kb-space-1) var(--kb-space-3);border:1px solid var(--kb-material-control-border);border-radius:var(--kb-radius-md);background:var(--kb-material-raised-face);box-shadow:var(--kb-material-raised-shadow);color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-text-caption-size);font-weight:var(--kb-font-weight-medium);line-height:var(--kb-text-leading-control);white-space:normal;overflow-wrap:anywhere;cursor:pointer;transition:background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard);justify-content:center;align-items:center;margin-inline-start:auto;display:inline-flex}.kb-copyabletext-copy:not(:disabled):not([aria-disabled=true]):hover{background:var(--kb-material-raised-top)}.kb-copyabletext-copy:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}.kb-copyabletext[data-copy-state=copied] .kb-copyabletext-copy{border-color:var(--kb-color-success)}.kb-copyabletext[data-copy-state=failed] .kb-copyabletext-copy{border-color:var(--kb-color-danger)}.kb-copyabletext-feedback:not(.kb-sr-only){color:var(--kb-color-danger);font-family:var(--kb-font-sans);font-size:var(--kb-text-caption-size);overflow-wrap:anywhere;grid-column:1/-1}.kb-copyabletext-copy:disabled,.kb-copyabletext[data-disabled] .kb-copyabletext-copy{color:var(--kb-color-muted);cursor:not-allowed;box-shadow:none}.kb-copyabletext-copy[aria-disabled=true]{cursor:progress}.kb-copyabletext[data-size=sm]{padding:var(--kb-space-2);font-size:var(--kb-text-caption-size)}.kb-copyabletext[data-size=sm] .kb-copyabletext-copy{min-block-size:var(--kb-button-height-sm)}.kb-copyabletext[data-appearance=plain]{inline-size:auto;box-shadow:none;background:0 0;border-color:#0000;padding:0}@media (prefers-reduced-motion:reduce){.kb-copyabletext-copy{transition:none}}@media (forced-colors:active){.kb-copyabletext{box-shadow:none;background:canvas;border-color:canvastext}.kb-copyabletext[data-appearance=plain]{border-color:#0000}.kb-copyabletext-copy,.kb-copyabletext[data-copy-state=copied] .kb-copyabletext-copy,.kb-copyabletext[data-copy-state=failed] .kb-copyabletext-copy{box-shadow:none;border-color:buttontext}.kb-copyabletext-copy:disabled,.kb-copyabletext[data-disabled] .kb-copyabletext-copy{color:graytext;border-color:graytext}.kb-copyabletext-value{color:canvastext}.kb-copyabletext-toggle,.kb-copyabletext-toggle:hover{color:linktext}.kb-copyabletext-toggle:focus-visible,.kb-copyabletext-copy:focus-visible{outline-color:highlight}}.kb-copyabletext-highlight{border-radius:var(--kb-radius-sm);background:var(--kb-copyabletext-highlight-background);color:var(--kb-color-fg);font-weight:var(--kb-font-weight-strong);box-decoration-break:clone}@media (forced-colors:active){.kb-copyabletext-highlight{forced-color-adjust:none;color:marktext;background:mark}}.kb-copyabletext[data-format=code] .kb-copyabletext-value,.kb-copyabletext[data-format=code] .kb-copyabletext-actions{grid-column:1/-1}.kb-copyabletext[data-format=code] .kb-copyabletext-actions{justify-content:flex-end}.kb-copyabletext-code{font-size:inherit;overflow-wrap:anywhere}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-dashboard{gap:var(--kb-dashboard-gap);box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:var(--kb-dashboard-max-width);padding-inline:calc(var(--kb-dashboard-gutter-sm) + clamp(0px, (100% + 1px - var(--kb-dashboard-gutter-md-from)) * 99999, var(--kb-dashboard-gutter-md) - var(--kb-dashboard-gutter-sm)) + clamp(0px, (100% + 1px - var(--kb-dashboard-gutter-lg-from)) * 99999, var(--kb-dashboard-gutter-lg) - var(--kb-dashboard-gutter-md)));grid-template-columns:minmax(0,1fr);margin-inline:auto;display:grid}.kb-dashboard-header,.kb-dashboard-metrics{min-inline-size:0}.kb-dashboard-panels{align-items:flex-start;gap:var(--kb-dashboard-gap);flex-wrap:wrap;min-inline-size:0;display:flex}.kb-dashboard-primary,.kb-dashboard-secondary{--_dashboard-share:calc(2 / 3);gap:var(--kb-dashboard-gap);box-sizing:border-box;flex:100%;flex-basis:min(100%, max(calc((var(--kb-dashboard-collapse) - 100%) * 99999), calc((100% - var(--kb-dashboard-gap)) * var(--_dashboard-share) - .5px)));grid-template-columns:minmax(0,1fr);min-inline-size:0;max-inline-size:100%;display:grid}.kb-dashboard-secondary{--_dashboard-share:calc(1 / 3)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-descriptionlist{inline-size:100%;min-inline-size:0;color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-size-sm);line-height:var(--kb-text-leading-body);margin:0;container:kb-descriptionlist/inline-size}.kb-descriptionlist>.kb-descriptionlist-item{grid-template-columns:minmax(0, min(40%, var(--kb-descriptionlist-term-width))) minmax(0, 1fr);gap:var(--kb-descriptionlist-row-gap) var(--kb-descriptionlist-column-gap);padding-block:var(--kb-descriptionlist-padding-block);min-inline-size:0;display:grid}.kb-descriptionlist-term,.kb-descriptionlist-detail{overflow-wrap:anywhere;min-inline-size:0;margin:0}.kb-descriptionlist-term{color:var(--kb-color-muted);font-weight:var(--kb-font-weight-medium);grid-column:1}.kb-descriptionlist-detail{grid-column:2}.kb-descriptionlist .kb-status{max-inline-size:100%}.kb-descriptionlist .kb-status-text{white-space:normal;min-inline-size:0}.kb-descriptionlist[data-density=dense]>.kb-descriptionlist-item{padding-block:var(--kb-descriptionlist-dense-padding-block)}.kb-descriptionlist[data-layout=stacked]>.kb-descriptionlist-item{grid-template-columns:minmax(0,1fr)}.kb-descriptionlist[data-layout=stacked]>.kb-descriptionlist-item>:is(.kb-descriptionlist-term,.kb-descriptionlist-detail){grid-column:1}.kb-descriptionlist[data-dividers]>.kb-descriptionlist-item+.kb-descriptionlist-item{border-block-start:1px solid var(--kb-color-border)}@container kb-descriptionlist (width<32rem){.kb-descriptionlist[data-layout=responsive]>.kb-descriptionlist-item{grid-template-columns:minmax(0,1fr)}.kb-descriptionlist[data-layout=responsive]>.kb-descriptionlist-item>:is(.kb-descriptionlist-term,.kb-descriptionlist-detail){grid-column:1}}@media (forced-colors:active){.kb-descriptionlist[data-dividers]>.kb-descriptionlist-item+.kb-descriptionlist-item{border-color:canvastext}}}
|
|
@@ -1 +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(
|
|
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(100dvh - var(--kb-space-8));overscroll-behavior:contain;scroll-padding-block:var(--kb-space-4);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}.kb-dialog-popup[data-layout=drawer]{width:min(var(--kb-dialog-width), 100dvw);height:100dvh;max-height:100dvh;transition:opacity var(--kb-dialog-drawer-motion-duration) var(--kb-dialog-drawer-motion-easing), transform var(--kb-dialog-drawer-motion-duration) var(--kb-dialog-drawer-motion-easing);border-radius:0;flex-direction:column;padding:0;display:flex;inset-block:0;inset-inline:auto 0;transform:translate(0)}.kb-dialog-popup[data-layout=drawer][data-starting-style],.kb-dialog-popup[data-layout=drawer][data-ending-style]{transform:translate(100%)}.kb-dialog-popup[data-layout=drawer]:dir(rtl)[data-starting-style],.kb-dialog-popup[data-layout=drawer]:dir(rtl)[data-ending-style]{transform:translate(-100%)}.kb-dialog-popup[data-layout=drawer]>.kb-dialog-header,.kb-dialog-popup[data-layout=drawer]>.kb-dialog-footer{padding:var(--kb-dialog-padding);padding-left:max(var(--kb-dialog-padding), env(safe-area-inset-left));padding-right:max(var(--kb-dialog-padding), env(safe-area-inset-right));flex:none}.kb-dialog-popup[data-layout=drawer]>.kb-dialog-header{border-block-end:var(--kb-dialog-border-width) solid var(--kb-dialog-border);padding-block-start:max(var(--kb-dialog-padding), env(safe-area-inset-top))}.kb-dialog-popup[data-layout=drawer]>.kb-dialog-body{overscroll-behavior:contain;min-block-size:0;scroll-padding-block:var(--kb-space-4);padding:var(--kb-dialog-padding);padding-left:max(var(--kb-dialog-padding), env(safe-area-inset-left));padding-right:max(var(--kb-dialog-padding), env(safe-area-inset-right));flex:auto;overflow:auto}.kb-dialog-popup[data-layout=drawer]>.kb-dialog-footer{border-block-start:var(--kb-dialog-border-width) solid var(--kb-dialog-border);padding-block-end:max(var(--kb-dialog-padding), env(safe-area-inset-bottom))}.kb-dialog-popup[data-layout=drawer]>.kb-dialog-footer>.kb-dialog-actions{margin-block-start:0}@media (prefers-reduced-motion:reduce){.kb-dialog-backdrop,.kb-dialog-popup,.kb-dialog-popup[data-layout=drawer]{transition:none}.kb-dialog-popup[data-layout=drawer][data-starting-style],.kb-dialog-popup[data-layout=drawer][data-ending-style],.kb-dialog-popup[data-layout=drawer]:dir(rtl)[data-starting-style],.kb-dialog-popup[data-layout=drawer]:dir(rtl)[data-ending-style]{transform:none}}@media (forced-colors:active){.kb-dialog-popup{border:1px solid canvastext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-disclosure{border:1px solid var(--kb-disclosure-border);border-radius:var(--kb-disclosure-radius);background:var(--kb-disclosure-background);inline-size:100%;min-inline-size:0;color:var(--kb-disclosure-color)}.kb-disclosure-trigger{justify-content:space-between;align-items:center;gap:var(--kb-space-3);inline-size:100%;min-block-size:var(--kb-disclosure-trigger-height);padding:var(--kb-space-3) var(--kb-disclosure-padding);border-radius:var(--kb-disclosure-radius);color:inherit;font:inherit;font-weight:var(--kb-font-weight-strong);text-align:start;overflow-wrap:anywhere;cursor:pointer;background:0 0;border:0;display:flex}.kb-disclosure-trigger:after{content:"";inline-size:var(--kb-space-2);block-size:var(--kb-space-2);transition:transform var(--kb-disclosure-motion-duration) var(--kb-disclosure-motion-easing);border-block-end:1px solid;border-inline-end:1px solid;flex:none;margin-inline-end:var(--kb-space-1);transform:rotate(45deg)}.kb-disclosure-trigger[data-panel-open]:after{transform:rotate(225deg)}.kb-disclosure-trigger:hover:not([data-disabled]):not(:disabled){background:var(--kb-color-surface)}.kb-disclosure-trigger:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px;position:relative}.kb-disclosure-trigger[data-disabled],.kb-disclosure-trigger:disabled{color:var(--kb-color-muted);cursor:not-allowed}.kb-disclosure-panel{height:var(--collapsible-panel-height);transition:height var(--kb-disclosure-motion-duration) var(--kb-disclosure-motion-easing);overflow:clip}.kb-disclosure-panel[data-starting-style],.kb-disclosure-panel[data-ending-style]{height:0}.kb-disclosure-panel-content{padding:0 var(--kb-disclosure-padding) var(--kb-disclosure-padding);overflow-wrap:anywhere;font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body);display:flow-root}@media (prefers-reduced-motion:reduce){.kb-disclosure-trigger:after,.kb-disclosure-panel{transition:none}}@media (forced-colors:active){.kb-disclosure{border-color:canvastext}.kb-disclosure-trigger:focus-visible{outline-color:highlight}.kb-disclosure-trigger[data-disabled],.kb-disclosure-trigger:disabled{color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-emptystate{--_emptystate-padding:var(--kb-emptystate-padding-md);--_emptystate-icon-size:var(--kb-emptystate-icon-size-md);--_emptystate-icon-glyph:var(--kb-emptystate-icon-glyph-size-md);--_emptystate-title-size:var(--kb-text-h3-size);--_emptystate-ink:var(--kb-color-muted);text-align:center;align-items:center;gap:var(--kb-emptystate-gap);padding:var(--_emptystate-padding);border-radius:var(--kb-emptystate-radius);background:var(--kb-emptystate-background);border:1px solid var(--kb-emptystate-border);box-shadow:var(--kb-emptystate-shadow);color:var(--kb-color-fg);font-family:var(--kb-font-sans);flex-direction:column;inline-size:100%;min-inline-size:0;display:flex}.kb-emptystate[data-size=sm]{--_emptystate-padding:var(--kb-emptystate-padding-sm);--_emptystate-icon-size:var(--kb-emptystate-icon-size-sm);--_emptystate-icon-glyph:var(--kb-emptystate-icon-glyph-size-sm);--_emptystate-title-size:var(--kb-text-h4-size)}.kb-emptystate[data-size=md]{--_emptystate-padding:var(--kb-emptystate-padding-md)}.kb-emptystate[data-size=lg]{--_emptystate-padding:var(--kb-emptystate-padding-lg);--_emptystate-icon-size:var(--kb-emptystate-icon-size-lg);--_emptystate-icon-glyph:var(--kb-emptystate-icon-glyph-size-lg);--_emptystate-title-size:var(--kb-text-h2-size)}.kb-emptystate[data-variant=subtle]{background:color-mix(in srgb, var(--kb-color-surface) 65%, var(--kb-emptystate-background));box-shadow:none;border-style:dashed}.kb-emptystate[data-variant=plain]{box-shadow:none;background:0 0;border-color:#0000}.kb-emptystate[data-tone=info]{--_emptystate-ink:var(--kb-color-info)}.kb-emptystate[data-tone=warning]{--_emptystate-ink:var(--kb-color-warning)}.kb-emptystate[data-tone=danger]{--_emptystate-ink:var(--kb-color-danger)}.kb-emptystate[data-tone=info]:not([data-variant=plain]),.kb-emptystate[data-tone=warning]:not([data-variant=plain]),.kb-emptystate[data-tone=danger]:not([data-variant=plain]){border-color:color-mix(in oklab, var(--_emptystate-ink) 45%, var(--kb-emptystate-border))}.kb-emptystate-icon{inline-size:var(--_emptystate-icon-size);block-size:var(--_emptystate-icon-size);border-radius:var(--kb-emptystate-icon-radius);background:color-mix(in oklab, var(--_emptystate-ink) 14%, var(--kb-color-surface));border:1px solid color-mix(in oklab, var(--_emptystate-ink) 32%, transparent);color:var(--_emptystate-ink);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.kb-emptystate-icon>svg{inline-size:var(--_emptystate-icon-glyph);block-size:var(--_emptystate-icon-glyph)}.kb-emptystate-header{align-items:center;gap:var(--kb-emptystate-header-gap);max-inline-size:var(--kb-emptystate-max-width);flex-direction:column;display:flex}.kb-emptystate-eyebrow{font-family:var(--kb-font-mono);font-size:var(--kb-text-caption-size);font-weight:var(--kb-font-weight-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--_emptystate-ink);margin:0}.kb-emptystate-title{font-size:var(--_emptystate-title-size);font-weight:var(--kb-heading-weight);line-height:var(--kb-heading-leading);letter-spacing:var(--kb-heading-tracking);color:var(--kb-color-fg);margin:0}.kb-emptystate-description{font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);margin:0}.kb-emptystate-body{inline-size:100%;max-inline-size:var(--kb-emptystate-max-width);font-size:var(--kb-text-small-size);color:var(--kb-color-fg)}.kb-emptystate-actions{justify-content:center;align-items:center;gap:var(--kb-emptystate-actions-gap);flex-wrap:wrap;display:flex}.kb-emptystate-footer{max-inline-size:var(--kb-emptystate-max-width);font-size:var(--kb-text-caption-size);color:var(--kb-color-muted);margin:0}@media (prefers-reduced-motion:reduce){.kb-emptystate{transition:none}}@media (forced-colors:active){.kb-emptystate{color:canvastext;box-shadow:none;background:canvas;border:1px solid canvastext}.kb-emptystate[data-variant=plain]{border-color:#0000}.kb-emptystate-icon{color:canvastext;background:canvas;border:1px solid graytext}}}
|
|
@@ -1 +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}}}
|
|
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);margin:0}.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-form{gap:var(--kb-form-gap);min-inline-size:0;max-inline-size:var(--kb-form-width-md);grid-template-columns:minmax(0,1fr);margin:0;display:grid}.kb-form[data-width=sm]{max-inline-size:var(--kb-form-width-sm)}.kb-form[data-width=full]{max-inline-size:none}.kb-form-header,.kb-form-body{grid-template-columns:minmax(0,1fr);min-inline-size:0;display:grid}.kb-form-header{gap:var(--kb-space-2)}.kb-form-body{gap:var(--kb-form-gap)}.kb-form-actions{container:kb-form-actions/inline-size}@container kb-form-actions (width<30rem){.kb-form-actions>:is(.kb-button,button,a){flex:100%}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-formsection{--_formsection-column-gap:var(--kb-layout-gap-lg);align-items:flex-start;gap:var(--kb-formsection-gap) var(--_formsection-column-gap);min-inline-size:0;color:var(--kb-color-fg);border:0;flex-wrap:wrap;margin:0;padding:0;display:flex}.kb-formsection-header,.kb-formsection-body{--_formsection-share:calc(2 / 3);box-sizing:border-box;flex:100%;grid-template-columns:minmax(0,1fr);min-inline-size:0;max-inline-size:100%;display:grid}.kb-formsection-header{--_formsection-share:calc(1 / 3);gap:var(--kb-formsection-header-gap)}.kb-formsection-body{gap:var(--kb-formsection-fields-gap)}.kb-formsection[data-layout=split]>:is(.kb-formsection-header,.kb-formsection-body),.kb-settings .kb-formsection:not([data-layout])>:is(.kb-formsection-header,.kb-formsection-body){flex-basis:min(100%, max(calc((var(--kb-formsection-collapse) - 100%) * 99999), calc((100% - var(--_formsection-column-gap)) * var(--_formsection-share))))}.kb-formsection-description,.kb-formsection-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-formsection-description{color:var(--kb-color-muted)}.kb-formsection-fields{gap:var(--kb-formsection-fields-gap);min-inline-size:0;display:grid}.kb-formsection-error{color:var(--kb-color-danger)}.kb-formsection-actions{container:kb-formsection-actions/inline-size}@container kb-formsection-actions (width<30rem){.kb-formsection-actions>:is(.kb-button,button,a){flex:100%}}.kb-formsection:is(:disabled,[data-disabled])>.kb-formsection-header{opacity:.5}@media (forced-colors:active){.kb-formsection,.kb-formsection-description,.kb-formsection-error{color:canvastext}.kb-formsection:is(:disabled,[data-disabled])>.kb-formsection-header{opacity:1}.kb-formsection:is(:disabled,[data-disabled]) :is(.kb-formsection-title,.kb-formsection-description){color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-gallery{box-sizing:border-box;gap:var(--kb-gallery-gap);inline-size:100%;min-inline-size:0;max-inline-size:var(--kb-gallery-max-width);padding-inline:var(--kb-gallery-gutter-sm);grid-template-columns:minmax(0,1fr);margin-inline:auto;display:grid;container:kb-gallery/inline-size}@media (width>=48rem){.kb-gallery{padding-inline:var(--kb-gallery-gutter-md)}}@media (width>=64rem){.kb-gallery{padding-inline:var(--kb-gallery-gutter-lg)}}.kb-gallery-header,.kb-gallery-empty{min-inline-size:0}.kb-gallery-filters{align-items:end;gap:var(--kb-gallery-filters-gap);flex-wrap:wrap;min-inline-size:0;display:flex}.kb-gallery-filters>*{flex:1 1 var(--kb-gallery-filter-min-width);min-inline-size:0}.kb-gallery>.kb-gallery-items{grid-template-columns:minmax(0,1fr)}.kb-gallery-item{display:grid}@container kb-gallery (width>=30rem){.kb-gallery>.kb-gallery-items{grid-template-columns:repeat(2,minmax(0,1fr))}.kb-gallery-item[data-featured]{grid-column:span 2}}@container kb-gallery (width>=48rem){.kb-gallery>.kb-gallery-items{grid-template-columns:repeat(3,minmax(0,1fr))}}@container kb-gallery (width>=64rem){.kb-gallery>.kb-gallery-items{grid-template-columns:repeat(4,minmax(0,1fr))}}}
|
package/dist/components/grid.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer kbui.components{.kb-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--
|
|
1
|
+
@layer kbui.components{.kb-grid{--_grid-min-width:var(--kb-grid-min-item-width);--_grid-gap:var(--kb-grid-gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--_grid-min-width)), 1fr));gap:var(--_grid-gap);overflow-wrap:anywhere;align-items:stretch;min-inline-size:0;margin:0;padding:0;list-style:none;display:grid}.kb-grid>*{min-inline-size:0;max-inline-size:100%;margin:0}.kb-grid[data-min-item-width=sm]{--_grid-min-width:var(--kb-grid-min-item-width-sm)}.kb-grid[data-min-item-width=md]{--_grid-min-width:var(--kb-grid-min-item-width-md)}.kb-grid[data-min-item-width=lg]{--_grid-min-width:var(--kb-grid-min-item-width-lg)}.kb-grid[data-columns="2"]{--_grid-columns:2}.kb-grid[data-columns="3"]{--_grid-columns:3}.kb-grid[data-columns="4"]{--_grid-columns:4}.kb-grid:is([data-columns="2"],[data-columns="3"],[data-columns="4"]){grid-template-columns:repeat(auto-fill, minmax(min(100%, max(calc((100% - (var(--_grid-columns) - 1) * var(--_grid-gap)) / var(--_grid-columns) - .5px), calc((30rem - 100%) * 99999))), 1fr))}.kb-grid[data-layout=stack],.kb-grid[data-columns="1"]{grid-template-columns:minmax(0,1fr)}.kb-grid[data-gap=none]{--_grid-gap:0px}.kb-grid[data-gap=sm]{--_grid-gap:var(--kb-layout-gap-sm)}.kb-grid[data-gap=md]{--_grid-gap:var(--kb-layout-gap-md)}.kb-grid[data-gap=lg]{--_grid-gap:var(--kb-layout-gap-lg)}.kb-grid[data-align=start]{align-items:start}.kb-grid[data-align=center]{align-items:center}.kb-grid[data-align=end]{align-items:end}.kb-grid[data-align=baseline]{align-items:baseline}.kb-grid[data-align=stretch]{align-items:stretch}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-image{inline-size:100%;min-inline-size:0;aspect-ratio:var(--kb-image-ratio);isolation:isolate;vertical-align:middle;border:1px solid var(--kb-image-border);border-radius:var(--kb-image-radius);background:var(--kb-image-background);color:var(--kb-image-color);display:inline-grid;position:relative;overflow:hidden}.kb-image[data-ratio=square]{aspect-ratio:1}.kb-image[data-ratio=portrait]{aspect-ratio:3/4}.kb-image[data-ratio=wide]{aspect-ratio:16/9}.kb-image-fallback{padding:var(--kb-image-fallback-padding);font-size:var(--kb-text-small-size);font-weight:var(--kb-font-weight-medium);text-align:center;overflow-wrap:anywhere;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.kb-image-fallback>svg{inline-size:var(--kb-image-icon-size);max-inline-size:100%}.kb-image-image{object-fit:cover;visibility:hidden;block-size:100%;inline-size:100%;display:block;position:absolute;inset:0}.kb-image[data-fit=contain]>.kb-image-image{object-fit:contain}.kb-image[data-state=loaded]>.kb-image-image{visibility:visible}.kb-image[data-state=loaded]>.kb-image-fallback{visibility:hidden}@media (forced-colors:active){.kb-image{color:canvastext;background:canvas;border-color:canvastext}}}
|
|
@@ -1 +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}}
|
|
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>li{margin-block:0}.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}}
|
|
@@ -1 +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}}}
|
|
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-checkbox-size) 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:before{content:"";inline-size:var(--kb-checkbox-size);block-size:var(--kb-checkbox-size);border:1px solid var(--kb-color-muted);border-radius:var(--kb-radius-sm);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow);grid-area:1/1}.kb-multiselect-option[data-selected]{background-color:var(--kb-color-surface);font-weight:var(--kb-font-weight-strong)}@supports (background-color:color-mix(in oklab, red, blue)){.kb-multiselect-option[data-selected]{background-color:color-mix(in oklab, var(--kb-color-accent) 20%, var(--kb-popup-background))}}.kb-multiselect-option[data-selected]:before{border:2px solid var(--kb-color-ring);background:var(--kb-color-action);box-shadow:var(--kb-material-pressed-shadow)}.kb-multiselect-option[data-highlighted]{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-multiselect-option[data-disabled]{color:var(--kb-color-muted);opacity:.6;cursor:not-allowed}.kb-multiselect-option-indicator{visibility:hidden;color:var(--kb-color-action-fg);font-weight:var(--kb-font-weight-strong);grid-area:1/1;justify-content:center;align-items:center;display:inline-flex}.kb-multiselect-option[data-selected] .kb-multiselect-option-indicator{visibility:visible}.kb-multiselect-option-label{text-overflow:ellipsis;white-space:nowrap;grid-area:1/2;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:before{box-shadow:none;forced-color-adjust:none;background:canvas;border-color:buttonborder}.kb-multiselect-option[data-selected]{color:canvastext;background:canvas}.kb-multiselect-option[data-selected]:before{background:highlight;border-color:highlight}.kb-multiselect-option[data-highlighted]{color:highlighttext;forced-color-adjust:none;background:highlight;outline-color:highlight}.kb-multiselect-option[data-selected] .kb-multiselect-option-indicator{color:highlighttext;forced-color-adjust:none}.kb-multiselect-option[data-selected][data-highlighted]:before{border-color:highlighttext}.kb-multiselect-option[data-disabled]:before{border-color:graytext}.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-pageheader{--_pageheader-title-size:var(--kb-pageheader-title-size-md);--_pageheader-description-size:var(--kb-text-body-size);gap:var(--kb-pageheader-gap);inline-size:100%;min-inline-size:0;color:var(--kb-color-fg);font-family:var(--kb-font-sans);flex-direction:column;display:flex;container:kb-pageheader/inline-size}.kb-pageheader[data-size=sm]{--_pageheader-title-size:var(--kb-pageheader-title-size-sm);--_pageheader-description-size:var(--kb-text-small-size)}.kb-pageheader[data-size=md]{--_pageheader-title-size:var(--kb-pageheader-title-size-md)}.kb-pageheader[data-size=lg]{--_pageheader-title-size:var(--kb-pageheader-title-size-lg)}.kb-pageheader[data-divider]{border-block-end:1px solid var(--kb-pageheader-divider);padding-block-end:var(--kb-pageheader-divider-gap)}.kb-pageheader-navigation{align-items:center;gap:var(--kb-pageheader-actions-gap);min-inline-size:0;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-control);color:var(--kb-color-muted);flex-wrap:wrap;display:flex}.kb-pageheader-main{justify-content:space-between;align-items:flex-start;gap:var(--kb-pageheader-main-gap);flex-wrap:wrap;min-inline-size:0;display:flex}.kb-pageheader-heading{flex:1 1 var(--kb-pageheader-heading-min-width);gap:var(--kb-pageheader-heading-gap);flex-direction:column;min-inline-size:0;display:flex}.kb-pageheader-eyebrow{font-family:var(--kb-font-mono);font-size:var(--kb-text-caption-size);font-weight:var(--kb-font-weight-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--kb-color-muted);margin:0}.kb-pageheader-headline{align-items:center;gap:var(--kb-pageheader-headline-gap);flex-wrap:wrap;min-inline-size:0;display:flex}.kb-pageheader-title{min-inline-size:0;font-size:var(--_pageheader-title-size);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-pageheader-meta{align-items:center;gap:var(--kb-pageheader-actions-gap);flex-wrap:wrap;min-inline-size:0;display:inline-flex}.kb-pageheader-description{max-inline-size:var(--kb-pageheader-description-max-width);font-size:var(--_pageheader-description-size);line-height:var(--kb-text-leading-body);color:var(--kb-color-muted);overflow-wrap:anywhere;margin:0}.kb-pageheader-actions{justify-content:flex-end;align-items:center;gap:var(--kb-pageheader-actions-gap);flex-wrap:wrap;flex:0 auto;min-inline-size:0;margin-inline-start:auto;display:flex}@container kb-pageheader (width<40rem){.kb-pageheader-actions{flex-basis:100%}}.kb-pageheader-body{min-inline-size:0}}
|
|
@@ -1 +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}}}
|
|
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[data-opaque]>.kb-panel-plate{background:linear-gradient(to bottom, var(--_panel-sheen), transparent 55%), linear-gradient(var(--_panel-bg) 0 0), var(--kb-panel-background-opaque);backdrop-filter:none}.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-header>.kb-panel-toggle{margin-inline-start:auto}.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-popover-positioner{max-inline-size:var(--available-width);isolation:isolate}.kb-popover{box-sizing:border-box;inline-size:var(--kb-popover-width);max-inline-size:min(var(--available-width), calc(100vw - var(--kb-space-4)));max-block-size:var(--available-height);overscroll-behavior:contain;scroll-padding-block:var(--kb-space-2);padding:var(--kb-popover-padding);border:1px solid var(--kb-popover-border);border-radius:var(--kb-popover-radius);background:var(--kb-popover-background);color:var(--kb-popover-color);box-shadow:var(--kb-popover-shadow);font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body);overflow-wrap:anywhere;opacity:1;transform-origin:var(--transform-origin);transition:opacity var(--kb-popover-motion-duration) var(--kb-popover-motion-easing), transform var(--kb-popover-motion-duration) var(--kb-popover-motion-easing);overflow:auto;transform:scale(1)}.kb-popover:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-popover:has(>.kb-popover-body){flex-direction:column;display:flex}.kb-popover-header,.kb-popover-footer{flex:none}.kb-popover-body{overscroll-behavior:contain;min-block-size:0;min-inline-size:0;scroll-padding-block:var(--kb-space-2);flex:auto;overflow:auto}.kb-popover-body:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-popover-footer{justify-content:flex-end;gap:var(--kb-space-2);border-block-start:1px solid var(--kb-popover-border);flex-wrap:wrap;margin-block-start:var(--kb-space-3);padding-block-start:var(--kb-space-3);display:flex}.kb-popover[data-starting-style],.kb-popover[data-ending-style]{opacity:0;transform:scale(var(--kb-popover-enter-scale))}.kb-popover[data-side=bottom][data-starting-style],.kb-popover[data-side=bottom][data-ending-style]{transform:translateY(calc(-1 * var(--kb-popover-enter-offset))) scale(var(--kb-popover-enter-scale))}.kb-popover[data-side=top][data-starting-style],.kb-popover[data-side=top][data-ending-style]{transform:translateY(var(--kb-popover-enter-offset)) scale(var(--kb-popover-enter-scale))}.kb-popover[data-side=left][data-starting-style],.kb-popover[data-side=left][data-ending-style],.kb-popover[data-side=inline-start]:where(:dir(ltr))[data-starting-style],.kb-popover[data-side=inline-start]:where(:dir(ltr))[data-ending-style],.kb-popover[data-side=inline-end]:where(:dir(rtl))[data-starting-style],.kb-popover[data-side=inline-end]:where(:dir(rtl))[data-ending-style]{transform:translateX(var(--kb-popover-enter-offset)) scale(var(--kb-popover-enter-scale))}.kb-popover[data-side=right][data-starting-style],.kb-popover[data-side=right][data-ending-style],.kb-popover[data-side=inline-end]:where(:dir(ltr))[data-starting-style],.kb-popover[data-side=inline-end]:where(:dir(ltr))[data-ending-style],.kb-popover[data-side=inline-start]:where(:dir(rtl))[data-starting-style],.kb-popover[data-side=inline-start]:where(:dir(rtl))[data-ending-style]{transform:translateX(calc(-1 * var(--kb-popover-enter-offset))) scale(var(--kb-popover-enter-scale))}.kb-popover-title{margin:0 0 var(--kb-space-2);font:inherit;font-weight:var(--kb-font-weight-strong)}.kb-popover-description{margin:0 0 var(--kb-space-3);color:var(--kb-color-muted)}@media (prefers-reduced-motion:reduce){.kb-popover{transition:none}.kb-popover[data-side][data-starting-style],.kb-popover[data-side][data-ending-style]{transform:none}}@media (forced-colors:active){.kb-popover{border-color:canvastext}.kb-popover:focus-visible,.kb-popover-body:focus-visible{outline-color:highlight}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-settings{gap:var(--kb-settings-gap);grid-template-columns:minmax(0,1fr);min-inline-size:0;display:grid;container:kb-settings/inline-size}.kb-settings-header{gap:var(--kb-space-2);min-inline-size:0;display:grid}.kb-settings-sections{gap:var(--kb-settings-gap);grid-template-columns:minmax(0,1fr);min-inline-size:0;display:grid}.kb-settings-sections>*+*{border-block-start:1px solid var(--kb-settings-divider);padding-block-start:var(--kb-settings-gap)}.kb-settings .kb-collectionrow-aside{text-align:end}.kb-settings .kb-collectionrow-actions{justify-content:flex-end}@container kb-settings (width>=40rem){.kb-settings .kb-collectionrow-layout{grid-template-columns:var(--_collectionrow-leading) minmax(0, 1fr) auto}.kb-settings .kb-collectionrow-aside{flex-wrap:wrap;grid-column:3;justify-content:flex-end;align-items:center;padding-inline-start:var(--kb-collectionrow-gap);display:flex}}@media (forced-colors:active){.kb-settings-sections>*+*{border-block-start-color:canvastext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{@keyframes kb-skeleton-shimmer{0%,10%{transform:translate(-100%)}85%,to{transform:translate(100%)}}@keyframes kb-skeleton-pulse{0%,to{opacity:1}50%{opacity:.76}}.kb-skeleton{--_skeleton-height:var(--kb-skeleton-height-md);--_skeleton-radius:var(--kb-skeleton-radius-sm);--_skeleton-avatar-size:var(--kb-skeleton-avatar-size-md);--_skeleton-base:var(--kb-skeleton-base);--_skeleton-highlight:var(--kb-skeleton-highlight);--_skeleton-border:var(--kb-skeleton-border);gap:var(--kb-skeleton-gap);flex-direction:column;inline-size:100%;min-inline-size:0;display:flex}.kb-skeleton[data-size=sm]{--_skeleton-height:var(--kb-skeleton-height-sm);--_skeleton-avatar-size:var(--kb-skeleton-avatar-size-sm)}.kb-skeleton[data-size=md]{--_skeleton-height:var(--kb-skeleton-height-md);--_skeleton-avatar-size:var(--kb-skeleton-avatar-size-md)}.kb-skeleton[data-size=lg]{--_skeleton-height:var(--kb-skeleton-height-lg);--_skeleton-avatar-size:var(--kb-skeleton-avatar-size-lg)}.kb-skeleton[data-tone=subtle]{--_skeleton-base:color-mix(in oklab, var(--kb-skeleton-base) 58%, transparent);--_skeleton-border:color-mix(in oklab, var(--kb-skeleton-border) 55%, transparent)}.kb-skeleton[data-tone=accent]{--_skeleton-base:color-mix(in oklab, var(--kb-color-accent) 10%, var(--kb-skeleton-base));--_skeleton-highlight:color-mix(in oklab, var(--kb-color-accent) 24%, var(--kb-skeleton-highlight));--_skeleton-border:color-mix(in oklab, var(--kb-color-accent) 32%, var(--kb-skeleton-border))}.kb-skeleton-line{inline-size:100%;block-size:var(--_skeleton-height);border-radius:var(--_skeleton-radius);background:var(--_skeleton-base);border:1px solid var(--_skeleton-border);box-shadow:var(--kb-material-inlay-shadow);display:block;position:relative;overflow:hidden}.kb-skeleton[data-variant=text] .kb-skeleton-line:last-child:not(:first-child){inline-size:72%}.kb-skeleton[data-variant=rect]{--_skeleton-radius:var(--kb-skeleton-radius-md)}.kb-skeleton[data-variant=rect] .kb-skeleton-line{block-size:var(--kb-skeleton-block-height)}.kb-skeleton[data-variant=circle]{--_skeleton-radius:var(--kb-skeleton-radius-full);inline-size:var(--_skeleton-avatar-size);flex:none}.kb-skeleton[data-variant=circle] .kb-skeleton-line{inline-size:var(--_skeleton-avatar-size);block-size:var(--_skeleton-avatar-size)}.kb-skeleton[data-variant=pill]{--_skeleton-radius:var(--kb-skeleton-radius-full);inline-size:var(--kb-skeleton-pill-width)}.kb-skeleton[data-animated] .kb-skeleton-line:after{content:"";background:linear-gradient(105deg, transparent 12%, color-mix(in oklab, var(--_skeleton-highlight) 35%, transparent) 32%, var(--_skeleton-highlight) 47%, var(--kb-skeleton-sheen) 50%, var(--_skeleton-highlight) 53%, color-mix(in oklab, var(--_skeleton-highlight) 35%, transparent) 68%, transparent 88%);animation:kb-skeleton-shimmer var(--kb-skeleton-duration) var(--kb-skeleton-easing) infinite;position:absolute;inset:0;transform:translate(-100%)}.kb-skeleton[data-animation=pulse][data-animated] .kb-skeleton-line{animation:kb-skeleton-pulse var(--kb-skeleton-pulse-duration) var(--kb-skeleton-easing) infinite}.kb-skeleton[data-animation=pulse][data-animated] .kb-skeleton-line:after{display:none}.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line{animation:kb-skeleton-pulse var(--kb-skeleton-pulse-duration) var(--kb-skeleton-easing) infinite}.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line:nth-child(2),.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line:nth-child(2):after{animation-delay:var(--kb-skeleton-stagger)}.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line:nth-child(3),.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line:nth-child(3):after{animation-delay:calc(var(--kb-skeleton-stagger) * 2)}.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line:nth-child(4),.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line:nth-child(4):after{animation-delay:calc(var(--kb-skeleton-stagger) * 3)}.kb-skeleton[data-loaded]{display:contents}.kb-skeleton-content{min-inline-size:0}@property --_skeleton-sweep{syntax:"<percentage>";inherits:true;initial-value:100%}@property --_skeleton-fade{syntax:"<number>";inherits:true;initial-value:1}@keyframes kb-skeleton-sweep{0%,10%{--_skeleton-sweep:100%}85%,to{--_skeleton-sweep:0%}}@keyframes kb-skeleton-fade{0%,to{--_skeleton-fade:1}50%{--_skeleton-fade:.76}}.kb-skeleton[data-variant=auto]{display:contents}.kb-skeleton[data-variant=auto][data-animated]:not([data-loaded])>.kb-skeleton-content{animation:kb-skeleton-sweep var(--kb-skeleton-duration) var(--kb-skeleton-easing) infinite}.kb-skeleton[data-variant=auto][data-animation=pulse][data-animated]:not([data-loaded])>.kb-skeleton-content,.kb-skeleton[data-variant=auto][data-animation=wave][data-animated]:not([data-loaded])>.kb-skeleton-content{animation:kb-skeleton-fade var(--kb-skeleton-pulse-duration) var(--kb-skeleton-easing) infinite}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-avatar,.kb-button,.kb-badge,.kb-status,.kb-image,.kb-thumbnail-media,.kb-input-shell,.kb-textarea-control,.kb-select-control,.kb-checkbox-mark,.kb-heading,.kb-text,.kb-stat-label,.kb-stat-value,.kb-thumbnail-title,.kb-thumbnail-description,.kb-input-label,.kb-textarea-label,.kb-select-label,.kb-checkbox-label),.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,figcaption):not([class*=kb-]){color:#0000;background-color:var(--_skeleton-base);background-image:linear-gradient(105deg, transparent 40%, var(--_skeleton-highlight) 50%, transparent 60%);background-position:var(--_skeleton-sweep) 0;border-color:var(--_skeleton-border);box-shadow:none;text-shadow:none;opacity:var(--_skeleton-fade);background-repeat:no-repeat;background-size:250% 100%}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-avatar,.kb-button,.kb-badge,.kb-status,.kb-image,.kb-thumbnail-media,.kb-input-shell,.kb-textarea-control,.kb-select-control,.kb-checkbox-mark,.kb-heading,.kb-text,.kb-stat-label,.kb-stat-value,.kb-thumbnail-title,.kb-thumbnail-description,.kb-input-label,.kb-textarea-label,.kb-select-label,.kb-checkbox-label):empty:before,.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,figcaption):not([class*=kb-]):empty:before{content:" "}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-avatar,.kb-button,.kb-badge,.kb-status,.kb-image,.kb-thumbnail-media,.kb-input-shell,.kb-textarea-control,.kb-select-control,.kb-checkbox-mark)>*{visibility:hidden}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-avatar,.kb-button,.kb-badge,.kb-status,.kb-image,.kb-thumbnail-media,.kb-input-shell,.kb-textarea-control,.kb-select-control,.kb-checkbox-mark):empty{min-inline-size:var(--kb-skeleton-pill-width)}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-heading,.kb-text,.kb-stat-label,.kb-stat-value,.kb-thumbnail-title,.kb-thumbnail-description,.kb-input-label,.kb-textarea-label,.kb-select-label,.kb-checkbox-label),.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,figcaption):not([class*=kb-]){border-radius:var(--_skeleton-radius);mask-image:repeating-linear-gradient(#0000 0 .15lh,#000 .15lh .85lh,#0000 .85lh 1lh)}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-heading,.kb-text,.kb-stat-label,.kb-stat-value,.kb-thumbnail-title,.kb-thumbnail-description,.kb-input-label,.kb-textarea-label,.kb-select-label,.kb-checkbox-label) *,.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,figcaption):not([class*=kb-]) *{color:#0000;box-shadow:none;background:0 0;border-color:#0000}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-heading,h1,h2,h3,h4,h5,h6):empty{inline-size:55%}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-text,p):empty{inline-size:85%}@media (prefers-reduced-motion:reduce){.kb-skeleton[data-variant=auto][data-animation][data-animated]:not([data-loaded])>.kb-skeleton-content,.kb-skeleton[data-animated] .kb-skeleton-line,.kb-skeleton[data-animation=pulse][data-animated] .kb-skeleton-line,.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line{animation:none}.kb-skeleton[data-animated] .kb-skeleton-line:after{background:0 0;animation:none;transform:none}}@media (forced-colors:active){.kb-skeleton[data-variant=auto][data-animation][data-animated]:not([data-loaded])>.kb-skeleton-content{animation:none}.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(.kb-avatar,.kb-button,.kb-badge,.kb-status,.kb-image,.kb-thumbnail-media,.kb-input-shell,.kb-textarea-control,.kb-select-control,.kb-checkbox-mark,.kb-heading,.kb-text,.kb-stat-label,.kb-stat-value,.kb-thumbnail-title,.kb-thumbnail-description,.kb-input-label,.kb-textarea-label,.kb-select-label,.kb-checkbox-label),.kb-skeleton[data-variant=auto]:not([data-loaded]) .kb-skeleton-content :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,figcaption):not([class*=kb-]){forced-color-adjust:none;color:#0000;background:graytext}.kb-skeleton-line{box-shadow:none;background:canvas;border:1px solid graytext}.kb-skeleton[data-animated] .kb-skeleton-line,.kb-skeleton[data-animation=pulse][data-animated] .kb-skeleton-line,.kb-skeleton[data-animation=wave][data-animated] .kb-skeleton-line{animation:none}.kb-skeleton[data-animated] .kb-skeleton-line:after{display:none}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{@keyframes kb-spinner-rotate{to{transform:rotate(360deg)}}@keyframes kb-spinner-counter-rotate{to{transform:rotate(-360deg)}}@keyframes kb-spinner-sweep{0%{stroke-dasharray:12 88;stroke-dashoffset:0}50%{stroke-dasharray:68 32;stroke-dashoffset:-24px}to{stroke-dasharray:12 88;stroke-dashoffset:-100px}}@keyframes kb-spinner-dot-wave{0%,60%,to{opacity:.5;transform:translateY(15%)scale(.8)}30%{opacity:1;transform:translateY(-50%)scale(1)}}@keyframes kb-spinner-pulse{0%,to{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes kb-spinner-bar-wave{0%,to{opacity:.55;transform:scaleY(.3)}50%{opacity:1;transform:scaleY(1)}}.kb-spinner{--_spinner-size:var(--kb-spinner-size-md);--_spinner-ink:var(--kb-color-accent);vertical-align:middle;align-items:center;gap:var(--kb-spinner-gap);color:var(--kb-color-fg);font-family:var(--kb-font-sans);font-size:var(--kb-size-sm);line-height:1.25;display:inline-flex}.kb-spinner[data-size=sm]{--_spinner-size:var(--kb-spinner-size-sm);font-size:var(--kb-size-xs)}.kb-spinner[data-size=md]{--_spinner-size:var(--kb-spinner-size-md)}.kb-spinner[data-size=lg]{--_spinner-size:var(--kb-spinner-size-lg);font-size:var(--kb-size-md)}.kb-spinner[data-tone=current]{--_spinner-ink:currentColor;color:inherit}.kb-spinner[data-tone=accent]{--_spinner-ink:var(--kb-color-accent)}.kb-spinner[data-tone=neutral]{--_spinner-ink:var(--kb-color-muted)}.kb-spinner[data-tone=info]{--_spinner-ink:var(--kb-color-info)}.kb-spinner[data-tone=success]{--_spinner-ink:var(--kb-color-success)}.kb-spinner[data-tone=warning]{--_spinner-ink:var(--kb-color-warning)}.kb-spinner[data-tone=danger]{--_spinner-ink:var(--kb-color-danger)}.kb-spinner[data-appearance=pill]{padding:var(--kb-spinner-pill-padding-block) var(--kb-spinner-pill-padding-inline);border:1px solid color-mix(in oklab, var(--_spinner-ink) 28%, var(--kb-color-border));border-radius:var(--kb-spinner-pill-radius);background:color-mix(in oklab, var(--_spinner-ink) 8%, var(--kb-material-surface-bg));background-image:linear-gradient(180deg, var(--kb-material-soft-sheen), transparent);box-shadow:var(--kb-material-inlay-shadow);color:color-mix(in oklab, var(--_spinner-ink) 70%, var(--kb-color-fg))}.kb-spinner-icon{inline-size:var(--_spinner-size);block-size:var(--_spinner-size);color:var(--_spinner-ink);transform-origin:50%;animation:kb-spinner-rotate var(--kb-spinner-duration) var(--kb-spinner-easing) infinite;flex:none;overflow:visible}.kb-spinner[data-variant=orbit] .kb-spinner-icon,.kb-spinner[data-appearance=pill] .kb-spinner-icon{filter:drop-shadow(0 0 var(--kb-spinner-glow) color-mix(in oklab, var(--_spinner-ink) 42%, transparent))}.kb-spinner[data-variant=orbit] .kb-spinner-icon,.kb-spinner[data-variant=dots] .kb-spinner-icon,.kb-spinner[data-variant=bars] .kb-spinner-icon{animation:none}.kb-spinner-track{fill:none;stroke:currentColor;stroke-width:var(--kb-spinner-stroke-width);opacity:var(--kb-spinner-track-opacity)}.kb-spinner-arc{fill:none;stroke:currentColor;stroke-width:var(--kb-spinner-stroke-width);stroke-linecap:round;stroke-dasharray:25 75;transform-origin:50%;animation:kb-spinner-sweep calc(var(--kb-spinner-duration) * 3) var(--kb-spinner-pulse-easing) infinite}.kb-spinner[data-variant=orbit] .kb-spinner-arc:first-of-type{animation:kb-spinner-rotate var(--kb-spinner-duration) var(--kb-spinner-easing) infinite, kb-spinner-sweep calc(var(--kb-spinner-duration) * 3) var(--kb-spinner-pulse-easing) infinite}.kb-spinner[data-variant=orbit] .kb-spinner-arc:last-of-type{animation:kb-spinner-counter-rotate var(--kb-spinner-orbit-duration) var(--kb-spinner-easing) infinite, kb-spinner-sweep calc(var(--kb-spinner-duration) * 3) var(--kb-spinner-pulse-easing) infinite reverse}.kb-spinner-core{fill:currentColor;transform-origin:50%;animation:kb-spinner-pulse var(--kb-spinner-pulse-duration) var(--kb-spinner-pulse-easing) infinite}.kb-spinner-dot{fill:currentColor;transform-origin:50%;transform-box:fill-box;animation:kb-spinner-dot-wave var(--kb-spinner-pulse-duration) var(--kb-spinner-pulse-easing) infinite;animation-delay:calc(var(--kb-spinner-stagger) * -3)}.kb-spinner-dot:nth-of-type(2){animation-delay:calc(var(--kb-spinner-stagger) * -2)}.kb-spinner-dot:nth-of-type(3){animation-delay:calc(var(--kb-spinner-stagger) * -1)}.kb-spinner-bar{fill:currentColor;transform-origin:50%;transform-box:fill-box;animation:kb-spinner-bar-wave var(--kb-spinner-pulse-duration) var(--kb-spinner-pulse-easing) infinite;animation-delay:calc(var(--kb-spinner-stagger) * -3)}.kb-spinner-bar:nth-of-type(2){animation-delay:calc(var(--kb-spinner-stagger) * -2)}.kb-spinner-bar:nth-of-type(3){animation-delay:calc(var(--kb-spinner-stagger) * -1)}.kb-spinner-bar:nth-of-type(4){animation-delay:0s}.kb-spinner-label{color:var(--kb-color-muted);font-weight:var(--kb-font-weight-medium)}.kb-spinner[data-appearance=pill] .kb-spinner-label{color:inherit;font-weight:var(--kb-font-weight-strong)}.kb-spinner[data-tone=current] .kb-spinner-label{color:inherit}@media (prefers-reduced-motion:reduce){.kb-spinner-icon,.kb-spinner-arc,.kb-spinner[data-variant=orbit] .kb-spinner-arc:first-of-type,.kb-spinner[data-variant=orbit] .kb-spinner-arc:last-of-type,.kb-spinner-core,.kb-spinner-dot,.kb-spinner-bar{animation:none}}@media (forced-colors:active){.kb-spinner{--_spinner-ink:CanvasText;color:canvastext}.kb-spinner[data-appearance=pill]{box-shadow:none;color:canvastext;background:canvas;border-color:canvastext}.kb-spinner-icon,.kb-spinner[data-variant=orbit] .kb-spinner-icon,.kb-spinner[data-appearance=pill] .kb-spinner-icon{color:highlight;filter:none}.kb-spinner[data-tone=current] .kb-spinner-icon{color:currentColor}.kb-spinner-label,.kb-spinner[data-appearance=pill] .kb-spinner-label{color:canvastext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-stack{gap:var(--kb-layout-gap-md);overflow-wrap:anywhere;flex-direction:column;justify-content:flex-start;align-items:stretch;min-inline-size:0;margin:0;padding:0;list-style:none;display:flex}.kb-stack>*{min-inline-size:0;max-inline-size:100%;margin-block:0}.kb-stack[data-gap=none]{gap:0}.kb-stack[data-gap=sm]{gap:var(--kb-layout-gap-sm)}.kb-stack[data-gap=lg]{gap:var(--kb-layout-gap-lg)}.kb-stack[data-align=start]{align-items:flex-start}.kb-stack[data-align=center]{align-items:center}.kb-stack[data-align=end]{align-items:flex-end}.kb-stack[data-justify=center]{justify-content:center}.kb-stack[data-justify=end]{justify-content:flex-end}.kb-stack[data-justify=between]{justify-content:space-between}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-statsrow{--_statsrow-tracks:2;grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--kb-statsrow-item-min-width)), 1fr));gap:var(--kb-statsrow-row-gap) var(--kb-statsrow-column-gap);inline-size:100%;min-inline-size:0;color:var(--kb-color-fg);font-family:var(--kb-font-sans);margin:0;padding:0;list-style:none;display:grid}.kb-statsrow:has(>.kb-statsrow-item>.kb-statsrow-trend),.kb-statsrow:has(>.kb-statsrow-item>.kb-statsrow-link){--_statsrow-tracks:3}.kb-statsrow:has(>.kb-statsrow-item>.kb-statsrow-trend):has(>.kb-statsrow-item>.kb-statsrow-link){--_statsrow-tracks:4}.kb-statsrow-item{grid-row:span var(--_statsrow-tracks);grid-template-rows:subgrid;row-gap:var(--kb-statsrow-item-gap);overflow-wrap:anywhere;align-content:start;min-inline-size:0;margin:0;display:grid}.kb-statsrow-item>.kb-stat{display:contents}.kb-statsrow-item .kb-stat-label{grid-row:1}.kb-statsrow-item .kb-stat-value{grid-row:2;align-self:end}.kb-statsrow-trend{align-items:baseline;gap:var(--kb-space-1) var(--kb-space-2);min-inline-size:0;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-control);color:var(--kb-color-muted);flex-wrap:wrap;grid-row:3;margin:0;display:flex}.kb-statsrow-change{align-items:center;gap:var(--kb-space-1);font-weight:var(--kb-font-weight-strong);font-variant-numeric:tabular-nums;color:var(--kb-statsrow-neutral);display:inline-flex}.kb-statsrow-change[data-tone=positive]{color:var(--kb-statsrow-positive)}.kb-statsrow-change[data-tone=negative]{color:var(--kb-statsrow-negative)}.kb-statsrow-glyph{flex:none;block-size:.875em;inline-size:.875em}.kb-statsrow-link{min-inline-size:0;font-size:var(--kb-text-small-size);line-height:var(--kb-text-leading-control);grid-row:-2}.kb-statsrow[data-appearance=outlined]>.kb-statsrow-item{padding:var(--kb-statsrow-item-padding);border:var(--kb-statsrow-item-border-width) solid var(--kb-statsrow-item-border);border-radius:var(--kb-statsrow-item-radius);background-color:var(--kb-statsrow-item-background)}@supports not ((grid-template-rows:subgrid) and selector(:has(*))){.kb-statsrow-item{gap:var(--kb-statsrow-item-gap);flex-direction:column;display:flex}.kb-statsrow-link{margin-block-start:auto}}}
|
|
@@ -1 +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}}
|
|
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]:not(:has(>.kb-status-icon)):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-supportingpane{box-sizing:border-box;align-items:flex-start;gap:var(--kb-supportingpane-gap);inline-size:100%;max-inline-size:var(--kb-supportingpane-max-width);padding-inline:var(--kb-supportingpane-gutter-sm);overflow-wrap:anywhere;flex-wrap:wrap;margin-inline:auto;display:flex;container:kb-supportingpane/inline-size}@media (width>=48rem){.kb-supportingpane{padding-inline:var(--kb-supportingpane-gutter-md)}}@media (width>=64rem){.kb-supportingpane{padding-inline:var(--kb-supportingpane-gutter-lg)}}.kb-supportingpane-main,.kb-supportingpane-aside{align-content:start;gap:var(--kb-supportingpane-gap);flex:100%;grid-template-columns:minmax(0,1fr);min-inline-size:0;display:grid}@container kb-supportingpane (width>=48rem){.kb-supportingpane-main{flex:1 1 0}.kb-supportingpane-aside{flex:0 0 var(--kb-supportingpane-aside-width)}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-table-scroll{isolation:isolate;border:1px solid var(--kb-table-border);border-radius:var(--kb-table-radius);background:var(--kb-table-background);min-inline-size:0;max-inline-size:100%;overflow:auto}.kb-table{--_table-padding-block:var(--kb-table-cell-padding-block);border-collapse:separate;border-spacing:0;inline-size:100%;color:var(--kb-color-fg);background:var(--kb-table-background);font-family:var(--kb-font-sans);font-size:var(--kb-size-sm);text-align:start}.kb-table[data-layout=fixed]{table-layout:fixed}.kb-table[data-density=dense]{--_table-padding-block:var(--kb-table-dense-padding-block)}.kb-table-caption{padding:var(--kb-table-cell-padding-block) var(--kb-table-cell-padding-inline);text-align:start;font-weight:var(--kb-font-weight-strong);color:var(--kb-color-fg);background:var(--kb-table-background)}.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell{padding:var(--_table-padding-block,var(--kb-table-cell-padding-block)) var(--kb-table-cell-padding-inline);border-block-end:1px solid var(--kb-table-border);vertical-align:middle;text-align:start;overflow-wrap:break-word;background:var(--kb-table-background)}.kb-table[data-layout=fixed]>:is(.kb-table-head,.kb-table-body,.kb-table-foot)>.kb-table-row>:is(.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell){overflow-wrap:anywhere}.kb-table-columnheader,.kb-table-rowheader{font-weight:var(--kb-font-weight-strong)}.kb-table-columnheader[data-sortable]{block-size:1px;padding:0}.kb-table-head>.kb-table-row>.kb-table-columnheader,.kb-table-foot>.kb-table-row>.kb-table-cell,.kb-table-foot>.kb-table-row>.kb-table-rowheader{background:var(--kb-table-header-background)}:is(.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell)[data-align=center]{text-align:center}:is(.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell)[data-align=end]{text-align:end}.kb-table-row[data-selected]>:is(.kb-table-cell,.kb-table-rowheader){background:var(--kb-table-selected-background)}.kb-table[data-sticky-header]>.kb-table-head{z-index:2;position:sticky;inset-block-start:0}:is(.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell)[data-sticky]{z-index:1;position:sticky}:is(.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell)[data-sticky=start]{border-inline-end:1px solid var(--kb-table-border);inset-inline-start:0}:is(.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell)[data-sticky=end]{border-inline-start:1px solid var(--kb-table-border);inset-inline-end:0}.kb-table-sort-button{align-items:center;gap:var(--kb-space-2);block-size:100%;inline-size:100%;min-inline-size:var(--kb-table-sort-target);min-block-size:calc(var(--kb-table-sort-target) + 2 * var(--_table-padding-block,var(--kb-table-cell-padding-block)));padding:var(--_table-padding-block,var(--kb-table-cell-padding-block)) var(--kb-table-cell-padding-inline);border-radius:var(--kb-radius-sm);color:inherit;font:inherit;text-align:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;display:flex}:is(.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell)[data-align=center]>.kb-table-sort-button{justify-content:center}:is(.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell)[data-align=end]>.kb-table-sort-button{justify-content:flex-end}.kb-table[data-layout=fixed]>:is(.kb-table-head,.kb-table-body,.kb-table-foot)>.kb-table-row>.kb-table-columnheader>.kb-table-sort-button{white-space:normal;overflow-wrap:anywhere}.kb-table-sort-icon{color:var(--kb-color-muted);flex-shrink:0;display:inline-flex}.kb-table-columnheader[aria-sort] .kb-table-sort-icon,.kb-table-sort-button:disabled .kb-table-sort-icon{color:inherit}.kb-table-columnheader[data-align=end]>.kb-table-sort-button>.kb-table-sort-icon{order:-1}.kb-table-sort-button:hover:not(:disabled){background:color-mix(in oklab, var(--kb-color-fg) 6%, transparent);text-decoration:underline}.kb-table-sort-button:disabled{color:var(--kb-color-muted);cursor:default}.kb-table-sort-button:focus-visible,.kb-table-scroll:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-table-rowactions{justify-content:flex-end;align-items:center;gap:var(--kb-space-2);flex-wrap:wrap;display:flex}@media (forced-colors:active){.kb-table-scroll,.kb-table-columnheader,.kb-table-rowheader,.kb-table-cell{border-color:canvastext}.kb-table-row[data-selected]>:is(.kb-table-cell,.kb-table-rowheader){outline-offset:-1px;outline:1px solid highlight}.kb-table-sort-button:focus-visible,.kb-table-scroll:focus-visible{outline-color:highlight}.kb-table-sort-button:disabled{color:graytext}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-tabs{inline-size:100%;min-inline-size:0;color:var(--kb-color-fg);flex-direction:column;display:flex}.kb-tabs[data-orientation=vertical]{align-items:flex-start;gap:var(--kb-space-4);flex-flow:wrap}.kb-tabs-list{align-items:center;gap:var(--kb-space-1);scrollbar-width:thin;border-block-end:1px solid var(--kb-color-border);min-inline-size:0;display:flex;position:relative;overflow-x:auto}.kb-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:1px solid var(--kb-color-border);flex-direction:column;flex-shrink:0;align-items:stretch;overflow-x:visible}.kb-tabs-list[data-variant=pill]{inline-size:fit-content;max-inline-size:100%;padding:var(--kb-tabs-list-padding);border:1px solid var(--kb-color-border);border-radius:var(--kb-tabs-radius);background:var(--kb-material-recessed-face);box-shadow:var(--kb-material-field-shadow)}.kb-tabs-tab{z-index:1;justify-content:center;align-items:center;gap:var(--kb-space-2);min-block-size:var(--kb-tabs-tab-height-md);padding-inline:var(--kb-space-3);padding-block:var(--kb-space-1);border-radius:var(--kb-radius-sm) var(--kb-radius-sm) 0 0;color:var(--kb-color-muted);font:inherit;font-size:var(--kb-text-control-size);font-weight:var(--kb-font-weight-medium);line-height:var(--kb-text-leading-control);white-space:nowrap;cursor:pointer;user-select:none;background:0 0;border:1px solid #0000;flex-shrink:0;text-decoration:none;display:inline-flex;position:relative}.kb-tabs-tab[data-size=sm]{min-block-size:var(--kb-tabs-tab-height-sm);padding-inline:var(--kb-space-2);font-size:var(--kb-text-small-size)}.kb-tabs-tab[data-orientation=vertical]{border-radius:var(--kb-radius-sm) 0 0 var(--kb-radius-sm);justify-content:flex-start;inline-size:100%}.kb-tabs-tab[data-variant=pill]{border-radius:calc(var(--kb-tabs-radius) - 2px)}.kb-tabs-tab:hover:not(:disabled):not([data-disabled]){color:var(--kb-color-fg);background:color-mix(in srgb, var(--kb-color-fg) 5%, transparent)}.kb-tabs-tab[data-active]{color:var(--kb-color-fg);font-weight:var(--kb-font-weight-strong)}.kb-tabs-tab[data-variant=line][data-active]{color:var(--kb-color-accent-ink)}.kb-tabs-tab[data-variant=pill][data-active]:not(:has(~.kb-tabs-indicator)){border-color:var(--kb-material-raised-border);background:var(--kb-material-raised-face);box-shadow:var(--kb-material-raised-shadow)}.kb-tabs-tab[data-variant=line][data-active]:not(:has(~.kb-tabs-indicator)){box-shadow:inset 0 calc(-1 * var(--kb-tabs-indicator-thickness)) 0 var(--kb-color-accent)}.kb-tabs-tab[data-variant=line][data-orientation=vertical][data-active]:not(:has(~.kb-tabs-indicator)){box-shadow:inset calc(-1 * var(--kb-tabs-indicator-thickness)) 0 0 var(--kb-color-accent)}.kb-tabs-tab:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:-2px}.kb-tabs-tab:disabled,.kb-tabs-tab[data-disabled]{opacity:.5;cursor:not-allowed}.kb-tabs-tab-icon{color:currentColor;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.kb-tabs-tab-label{min-inline-size:0}.kb-tabs-tab-badge{padding-inline:var(--kb-space-1);border-radius:var(--kb-radius-sm);background:color-mix(in srgb, currentColor 12%, transparent);font-size:var(--kb-text-caption-size);font-variant-numeric:tabular-nums;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.kb-tabs-indicator{z-index:0;pointer-events:none;left:var(--active-tab-left,0px);inline-size:var(--active-tab-width,0px);position:absolute}.kb-tabs-indicator[data-variant=pill]{block-size:var(--active-tab-height,calc(100% - 2 * var(--kb-tabs-list-padding)));border:1px solid var(--kb-material-raised-border);border-radius:calc(var(--kb-tabs-radius) - 2px);background:var(--kb-material-raised-face);box-shadow:var(--kb-material-raised-shadow);inset-block-start:var(--active-tab-top,var(--kb-tabs-list-padding))}.kb-tabs-indicator[data-variant=line][data-orientation=horizontal]{block-size:var(--kb-tabs-indicator-thickness);border-radius:var(--kb-radius-full);background:var(--kb-color-accent);inset-block-end:0}.kb-tabs-indicator[data-variant=line][data-orientation=vertical]{left:auto;inline-size:var(--kb-tabs-indicator-thickness);block-size:var(--active-tab-height,0px);border-radius:var(--kb-radius-full);background:var(--kb-color-accent);inset-block-start:var(--active-tab-top,0px);inset-inline-end:0}.kb-tabs-panel{min-inline-size:0;color:var(--kb-color-fg);font-size:var(--kb-text-body-size);line-height:var(--kb-text-leading-body);flex:auto;padding-block-start:var(--kb-tabs-panel-padding)}.kb-tabs-panel[data-orientation=vertical]{flex-basis:max(479952rem - 999900%,0px);padding-block-start:0}.kb-tabs-panel[hidden],.kb-tabs-panel[data-hidden],.kb-tabs-panel[data-ending-style]{display:none}.kb-tabs-panel:focus-visible{border-radius:var(--kb-radius-sm);outline:2px solid var(--kb-color-ring);outline-offset:2px}@media (prefers-reduced-motion:no-preference){.kb-tabs-tab{transition:color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard), background-color var(--kb-motion-duration-fast) var(--kb-motion-easing-standard)}.kb-tabs-indicator{transition:left var(--kb-motion-duration-base) var(--kb-motion-easing-standard), inset-block-start var(--kb-motion-duration-base) var(--kb-motion-easing-standard), inline-size var(--kb-motion-duration-base) var(--kb-motion-easing-standard), block-size var(--kb-motion-duration-base) var(--kb-motion-easing-standard)}}@media (pointer:coarse){.kb-tabs-tab,.kb-tabs-tab[data-size=sm]{min-block-size:var(--kb-button-touch-min)}}@media (forced-colors:active){.kb-tabs-list[data-variant=pill]{box-shadow:none;background:canvas;border-color:buttonborder}.kb-tabs-tab,.kb-tabs-tab:hover:not(:disabled):not([data-disabled]){color:buttontext}.kb-tabs-tab[data-active],.kb-tabs-tab[data-variant][data-active],.kb-tabs-tab[data-variant][data-active]:not(:has(~.kb-tabs-indicator)),.kb-tabs-tab[data-variant][data-orientation][data-active]:not(:has(~.kb-tabs-indicator)){color:highlighttext;box-shadow:none;forced-color-adjust:none;background:highlight;border-color:highlight}.kb-tabs-tab:focus-visible,.kb-tabs-panel:focus-visible{outline-color:highlight}.kb-tabs-tab:disabled,.kb-tabs-tab[data-disabled]{opacity:1;color:graytext}.kb-tabs-tab[data-active]:focus-visible{outline-color:highlighttext}.kb-tabs-indicator{display:none}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-thumbnail{align-content:start;gap:var(--kb-thumbnail-gap);min-inline-size:0;color:var(--kb-thumbnail-color);margin:0;display:grid}.kb-thumbnail-media{--kb-image-radius:var(--kb-thumbnail-radius)}.kb-thumbnail-caption{gap:var(--kb-thumbnail-caption-gap);min-inline-size:0;display:grid}.kb-thumbnail-title{font-size:var(--kb-thumbnail-title-size);font-weight:var(--kb-font-weight-strong);line-height:var(--kb-text-leading-control);overflow-wrap:anywhere}.kb-thumbnail-description{font-size:var(--kb-thumbnail-description-size);line-height:var(--kb-text-leading-control);color:var(--kb-thumbnail-muted);overflow-wrap:anywhere}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer kbui.components{.kb-toast-viewport{z-index:var(--kb-toast-z-index);gap:var(--kb-toast-gap);inline-size:min(var(--kb-toast-width), calc(100% - var(--kb-toast-gutter) * 2));max-block-size:calc(100dvh - var(--kb-toast-gutter) * 2);overscroll-behavior:contain;pointer-events:none;padding:var(--kb-space-1);scroll-padding:var(--kb-space-1);flex-direction:column;display:flex;position:fixed;overflow:auto}.kb-toast-viewport[data-placement^=top]{--_toast-enter-y:calc(-1 * var(--kb-toast-enter-offset));inset-block-start:var(--kb-toast-gutter)}.kb-toast-viewport[data-placement^=bottom]{inset-block-end:var(--kb-toast-gutter)}.kb-toast-viewport[data-placement$=start]{inset-inline-start:var(--kb-toast-gutter)}.kb-toast-viewport[data-placement$=end]{inset-inline-end:var(--kb-toast-gutter)}.kb-toast-viewport[data-placement=inline]{z-index:auto;max-block-size:none;inline-size:100%;position:relative;overflow:visible}.kb-toast{--_toast-ink:var(--kb-toast-border);height:var(--toast-height,auto);align-items:start;gap:var(--kb-space-3);min-block-size:0;padding:var(--kb-toast-padding);border:1px solid var(--kb-toast-border);border-inline-start:var(--kb-space-1) solid var(--_toast-ink);border-radius:var(--kb-toast-radius);background:var(--kb-toast-background);color:var(--kb-toast-color);box-shadow:var(--kb-toast-shadow);font-size:var(--kb-text-control-size);line-height:var(--kb-text-leading-control);overflow-wrap:anywhere;pointer-events:auto;opacity:1;animation:kb-toast-enter var(--kb-toast-motion-duration) var(--kb-toast-motion-easing) backwards;transition:opacity var(--kb-toast-motion-duration) var(--kb-toast-motion-easing), transform var(--kb-toast-motion-duration) var(--kb-toast-motion-easing), height var(--kb-toast-motion-duration) var(--kb-toast-motion-easing), padding-block var(--kb-toast-motion-duration) var(--kb-toast-motion-easing), border-block-width var(--kb-toast-motion-duration) var(--kb-toast-motion-easing), margin-block-end var(--kb-toast-motion-duration) var(--kb-toast-motion-easing);flex:none;grid-template-columns:minmax(0,1fr) auto;margin-block-end:0;display:grid;transform:translateY(0)scale(1)}.kb-toast[data-tone=info]{--_toast-ink:var(--kb-color-info)}.kb-toast[data-tone=success]{--_toast-ink:var(--kb-color-success)}.kb-toast[data-tone=warning]{--_toast-ink:var(--kb-color-warning)}.kb-toast[data-tone=danger]{--_toast-ink:var(--kb-color-danger)}.kb-toast[data-limited]{display:none}@keyframes kb-toast-enter{0%{opacity:0;transform:translateY(var(--_toast-enter-y,var(--kb-toast-enter-offset))) scale(var(--kb-toast-enter-scale));margin-block-end:calc(-1 * (var(--toast-height,0px) + var(--kb-toast-gap)))}to{opacity:1;margin-block-end:0;transform:translateY(0)scale(1)}}.kb-toast[data-swiping]{animation:none}.kb-toast[data-ending-style]{height:0;opacity:0;transform:translateY(calc(-1 * var(--kb-toast-enter-offset))) scale(var(--kb-toast-enter-scale));pointer-events:none;transition-duration:var(--kb-toast-exit-duration);border-block-width:0;margin-block-end:calc(-1 * var(--kb-toast-gap));padding-block:0;animation:none;overflow:clip}.kb-toast[data-ending-style][data-swipe-direction=right]{transform:translateX(calc(var(--toast-swipe-movement-x) + 100%))}.kb-toast[data-ending-style][data-swipe-direction=left]{transform:translateX(calc(var(--toast-swipe-movement-x) - 100%))}.kb-toast[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 100%))}.kb-toast[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 100%))}.kb-toast-content{gap:var(--kb-space-2);min-inline-size:0;display:grid}.kb-toast-title{font:inherit;font-weight:var(--kb-font-weight-strong);margin:0}.kb-toast-description{color:var(--kb-toast-color)}.kb-toast-action,.kb-toast-close{min-block-size:var(--kb-toast-control-size);min-inline-size:var(--kb-toast-control-size);padding:var(--kb-space-1) var(--kb-space-2);border:1px solid var(--kb-toast-border);border-radius:var(--kb-radius-sm);color:var(--kb-toast-color);background:var(--kb-toast-background);font:inherit;cursor:pointer;transition:background-color var(--kb-motion-duration-fast) var(--kb-toast-motion-easing), color var(--kb-motion-duration-fast) var(--kb-toast-motion-easing), border-color var(--kb-motion-duration-fast) var(--kb-toast-motion-easing);justify-content:center;justify-self:start;align-items:center;display:inline-flex}.kb-toast-action{justify-self:end}.kb-toast-action:disabled,.kb-toast-action[data-disabled],.kb-toast-close:disabled,.kb-toast-close[data-disabled]{color:var(--kb-color-muted);cursor:not-allowed}.kb-toast-action:hover:not(:disabled):not([data-disabled]),.kb-toast-close:hover:not(:disabled):not([data-disabled]){background:var(--kb-color-surface)}.kb-toast:focus-visible,.kb-toast-viewport:focus-visible,.kb-toast-action:focus-visible,.kb-toast-close:focus-visible{outline:2px solid var(--kb-color-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.kb-toast,.kb-toast-action,.kb-toast-close{transition:none;animation:none}.kb-toast,.kb-toast[data-starting-style],.kb-toast[data-ending-style],.kb-toast[data-ending-style][data-swipe-direction]{transform:none}}@media (forced-colors:active){.kb-toast{color:canvastext;box-shadow:none;background:canvas;border-color:canvastext}.kb-toast-description{color:canvastext}.kb-toast-action,.kb-toast-close{color:buttontext;background:buttonface;border-color:buttontext}.kb-toast-action:hover:not(:disabled):not([data-disabled]),.kb-toast-close:hover:not(:disabled):not([data-disabled]){color:highlighttext;background:highlight}.kb-toast-action:disabled,.kb-toast-action[data-disabled],.kb-toast-close:disabled,.kb-toast-close[data-disabled]{color:graytext;border-color:graytext}.kb-toast:focus-visible,.kb-toast-viewport:focus-visible,.kb-toast-action:focus-visible,.kb-toast-close:focus-visible{outline-color:highlight}}}
|