@skdx/skins 0.27.0 → 0.29.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.
Files changed (106) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +158 -154
  3. package/dist/base.css +1 -1
  4. package/dist/components/accordion.css +1 -1
  5. package/dist/components/alert.css +1 -1
  6. package/dist/components/angle-slider.css +1 -1
  7. package/dist/components/aspect-ratio.css +1 -1
  8. package/dist/components/autocomplete.css +1 -1
  9. package/dist/components/avatar.css +1 -1
  10. package/dist/components/badge.css +1 -1
  11. package/dist/components/box.css +1 -0
  12. package/dist/components/breadcrumb.css +1 -1
  13. package/dist/components/button.css +1 -1
  14. package/dist/components/calendar.css +1 -1
  15. package/dist/components/card.css +1 -1
  16. package/dist/components/carousel.css +1 -1
  17. package/dist/components/checkbox-card.css +1 -1
  18. package/dist/components/checkbox-group.css +1 -1
  19. package/dist/components/checkbox.css +1 -1
  20. package/dist/components/clipboard.css +1 -1
  21. package/dist/components/collapsible.css +1 -1
  22. package/dist/components/color-picker.css +1 -1
  23. package/dist/components/combobox.css +1 -1
  24. package/dist/components/command.css +1 -1
  25. package/dist/components/date-field.css +1 -1
  26. package/dist/components/date-picker.css +1 -1
  27. package/dist/components/dialog.css +1 -1
  28. package/dist/components/divider.css +1 -0
  29. package/dist/components/drawer.css +1 -1
  30. package/dist/components/editable.css +1 -1
  31. package/dist/components/field.css +1 -1
  32. package/dist/components/file-upload.css +1 -1
  33. package/dist/components/floating-panel.css +1 -1
  34. package/dist/components/form.css +1 -1
  35. package/dist/components/heading.css +1 -0
  36. package/dist/components/image.css +1 -0
  37. package/dist/components/kbd.css +1 -1
  38. package/dist/components/link.css +1 -0
  39. package/dist/components/list.css +1 -0
  40. package/dist/components/listbox.css +1 -1
  41. package/dist/components/loading-overlay.css +1 -1
  42. package/dist/components/mentions.css +1 -0
  43. package/dist/components/menu.css +1 -0
  44. package/dist/components/menubar.css +1 -1
  45. package/dist/components/navigation-menu.css +1 -1
  46. package/dist/components/number-field.css +1 -1
  47. package/dist/components/pagination.css +1 -1
  48. package/dist/components/password-input.css +1 -1
  49. package/dist/components/pin-input.css +1 -1
  50. package/dist/components/popover.css +1 -1
  51. package/dist/components/progress.css +1 -1
  52. package/dist/components/radio-card.css +1 -1
  53. package/dist/components/radio-group.css +1 -1
  54. package/dist/components/rating.css +1 -1
  55. package/dist/components/resizable.css +1 -1
  56. package/dist/components/scroll-area.css +1 -1
  57. package/dist/components/select.css +1 -1
  58. package/dist/components/skeleton.css +1 -1
  59. package/dist/components/slider.css +1 -1
  60. package/dist/components/speed-dial.css +1 -1
  61. package/dist/components/spinner.css +1 -1
  62. package/dist/components/split-button.css +1 -1
  63. package/dist/components/stepper.css +1 -0
  64. package/dist/components/switch.css +1 -1
  65. package/dist/components/table.css +1 -1
  66. package/dist/components/tabs.css +1 -1
  67. package/dist/components/tag-group.css +1 -1
  68. package/dist/components/tags-input.css +1 -1
  69. package/dist/components/text-field.css +1 -1
  70. package/dist/components/text.css +1 -0
  71. package/dist/components/textarea.css +1 -1
  72. package/dist/components/time.css +1 -0
  73. package/dist/components/timeline.css +1 -1
  74. package/dist/components/toast.css +1 -1
  75. package/dist/components/toggle-group.css +1 -1
  76. package/dist/components/toggle.css +1 -1
  77. package/dist/components/toolbar.css +1 -1
  78. package/dist/components/tour.css +1 -1
  79. package/dist/components/transfer.css +1 -1
  80. package/dist/components/tree-select.css +1 -1
  81. package/dist/components/tree.css +1 -1
  82. package/dist/index.css +1 -1
  83. package/dist/internal/_actuator.css +1 -1
  84. package/dist/internal/_arrow.css +1 -0
  85. package/dist/internal/_collection.css +1 -1
  86. package/dist/internal/_hit-target.css +1 -0
  87. package/dist/internal/_overlay.css +1 -1
  88. package/dist/internal/_status.css +1 -1
  89. package/dist/internal/_trigger.css +1 -1
  90. package/dist/structure.css +1 -0
  91. package/dist/utilities.css +1 -1
  92. package/dist/web-components.css +1 -0
  93. package/package.json +12 -9
  94. package/dist/components/affix.css +0 -1
  95. package/dist/components/alert-dialog.css +0 -1
  96. package/dist/components/context-menu.css +0 -1
  97. package/dist/components/data-list.css +0 -1
  98. package/dist/components/dropdown-menu.css +0 -1
  99. package/dist/components/hover-card.css +0 -1
  100. package/dist/components/meter.css +0 -1
  101. package/dist/components/multi-select.css +0 -1
  102. package/dist/components/segmented-control.css +0 -1
  103. package/dist/components/separator.css +0 -1
  104. package/dist/components/steps.css +0 -1
  105. package/dist/components/tag.css +0 -1
  106. package/dist/components/tooltip.css +0 -1
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 SkandaDX
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,208 +1,188 @@
1
1
  # @skdx/skins
2
2
 
3
- The default SkandaDX component skin: framework-neutral CSS that turns the
4
- headless components into finished ones.
3
+ Framework-neutral CSS that styles the SkandaDX core components. No JavaScript, no framework dependency, no runtime style injection. Works with React, Vue, Svelte, Angular and Web Components, in SSR.
5
4
 
5
+ ```text
6
+ core component + component skin + design tokens = styled component
6
7
  ```
7
- headless component + component skin + design tokens = styled component
8
- ```
9
-
10
- No JavaScript. No framework dependency. Works with React, Vue, Svelte, Angular
11
- and Web Components, in SSR, with no runtime style injection.
12
8
 
13
9
  ## Install
14
10
 
15
11
  ```sh
16
- pnpm add @skdx/skins @skdx/tokens
12
+ pnpm add @skdx/skins
13
+ ```
14
+
15
+ Optionally, add design tokens for colour and motion:
16
+
17
+ ```sh
18
+ pnpm add @skdx/tokens
17
19
  ```
18
20
 
19
21
  ## Use
20
22
 
23
+ **Tokens then skin**, in that order — every colour in the skin resolves through a `--skdx-*` custom property the tokens declare:
24
+
21
25
  ```ts
22
- import '@skdx/tokens/css'; // required this package declares no colours
26
+ import '@skdx/tokens/css'; // optional; see "Without tokens" below
23
27
  import '@skdx/skins/all.css';
28
+ ```
24
29
 
30
+ Then render a component in your framework of choice. The skin brings no framework dependency, so the same stylesheet works everywhere:
31
+
32
+ ```tsx
33
+ // React
25
34
  import { Button } from '@skdx/react';
26
35
 
27
36
  export function Example() {
28
- return (
29
- <Button variant="primary" size="md" className="product-save-button">
30
- Save changes
31
- </Button>
32
- );
37
+ return <Button>Save</Button>;
33
38
  }
34
39
  ```
35
40
 
36
- Per component, to ship less CSS:
41
+ ```vue
42
+ <!-- Vue -->
43
+ <script setup>
44
+ import { SkdxButton } from '@skdx/vue';
45
+ </script>
46
+ <template>
47
+ <SkdxButton>Save</SkdxButton>
48
+ </template>
49
+ ```
50
+
51
+ ```svelte
52
+ <!-- Svelte -->
53
+ <script>
54
+ import { Button } from '@skdx/svelte';
55
+ </script>
56
+
57
+ <Button>Save</Button>
58
+ ```
37
59
 
38
60
  ```ts
39
- import '@skdx/tokens/css';
40
- import '@skdx/skins/components/button.css';
61
+ // Angular
62
+ import { Component } from '@angular/core';
63
+
64
+ import { SkdxButtonComponent } from '@skdx/angular';
65
+
66
+ @Component({
67
+ selector: 'app-example',
68
+ standalone: true,
69
+ imports: [SkdxButtonComponent],
70
+ template: '<skdx-button>Save</skdx-button>',
71
+ })
72
+ export class ExampleComponent {}
41
73
  ```
42
74
 
43
- Each component file imports the shared primitives it needs, so a single import
44
- works on its own. The bundle inlines each shared file exactly once.
75
+ ```html
76
+ <!-- Web Components -->
77
+ <script type="module">
78
+ import '@skdx/web-components/button';
79
+ </script>
80
+ <skdx-button>Save</skdx-button>
81
+ ```
45
82
 
46
- ## Without tokens
83
+ ## Styling variants
47
84
 
48
- `@skdx/tokens` is a peer dependency, not a hard requirement. Import the skin
49
- alone and you still get a usable interface:
85
+ Style a component with its appearance props (`variant`, `size`, …) or with the matching `data-` attributes — either input renders the same, because the component writes the prop to the attribute the skin reads:
50
86
 
51
- ```ts
52
- import '@skdx/skins/all.css'; // no tokens
87
+ ```tsx
88
+ <Button
89
+ data-variant="primary"
90
+ data-size="lg"
91
+ >
92
+ Save
93
+ </Button>
53
94
  ```
54
95
 
55
- Geometry, type and motion come through in fullthey are the measurements the
56
- rules were written against, not palette decisions. Colour falls back to the
57
- **CSS system colours** (`Canvas`, `Field`, `AccentColor`, `Highlight`…), which
58
- the platform supplies and which already follow the user's OS light/dark and
59
- contrast settings. It looks like well-spaced native controls, which is the
60
- honest rendering of "no theme installed".
96
+ **Buttons and similar controls:** `data-variant` (`primary`, `secondary`default, `outline`, `ghost`, `danger`), `data-size` (`sm`, `md` — default, `lg`), `data-icon-only` (square icon-only control; also needs an `aria-label`).
61
97
 
62
- Two things degrade, because the platform has no keyword for them:
98
+ **Status families** (Alert, Badge, Toast): `data-status` (`info`, `success`, `warning`, `danger`); neutral is the unmarked default.
63
99
 
64
- - **Status colour collapses to neutral.** Alerts and badges keep their icon,
65
- border and text — the signals that were never colour-only — and stop being
66
- tinted.
67
- - **Shadows and the modal scrim are dropped.** Both need alpha, which no system
68
- colour provides. Overlays keep their border, which is what separates them from
69
- the page.
100
+ **State attributes** are written by the component, not by you: `data-state`, `data-disabled`, `data-invalid`, `data-highlighted`, `data-side`, `data-orientation`.
70
101
 
71
- Add `@skdx/tokens/css` and the theme takes over automatically: tokens are
72
- declared **unlayered**, and an unlayered declaration beats the skin's layered
73
- fallbacks regardless of specificity. Nothing detects anything, and there is no
74
- literal fallback inlined next to any `var()` — a colour smuggled in that way
75
- would win silently whenever a token failed to load, hiding the breakage.
102
+ ## Entry points
76
103
 
77
- Enforced by `tests/standalone.test.ts`: every token the stylesheets read has a
78
- fallback, every runtime property is read with an inline default, and the
79
- fallback block may name only platform colours.
104
+ | Import | Contents |
105
+ | ----------------------------------- | --------------------------------------------------- |
106
+ | `@skdx/skins/all.css` | Everything 91 component families |
107
+ | `@skdx/skins/base.css` | Layer order, control metrics, focus ring, keyframes |
108
+ | `@skdx/skins/components/<name>.css` | One component |
109
+ | `@skdx/skins/utilities.css` | `skdx-visually-hidden` and friends |
110
+ | `@skdx/skins/structure.css` | The same rules with every paint declaration removed |
111
+ | `@skdx/skins/web-components.css` | `:not(:defined)` box reservation — see below |
80
112
 
81
- ## Entry points
113
+ `web-components.css` is deliberately outside `all.css`. Its `:not(:defined)` rules reserve the
114
+ control box until a custom element upgrades, and `@skdx/angular` uses the same `skdx-*` tag names
115
+ as component selectors without registering them — so in an Angular app those hosts would stay
116
+ hidden forever. Import it only alongside `@skdx/web-components`:
82
117
 
83
- | Import | Contents |
84
- | --- | --- |
85
- | `@skdx/skins/all.css` | Everything — 84 components, ~166 kB unminified |
86
- | `@skdx/skins/base.css` | Layer order, control metrics, focus ring, keyframes |
87
- | `@skdx/skins/components/{name}.css` | One component |
88
- | `@skdx/skins/utilities.css` | `skdx-visually-hidden` and friends |
118
+ ```ts
119
+ import '@skdx/skins/all.css';
120
+ import '@skdx/skins/web-components.css';
121
+ ```
89
122
 
90
- ## How it is built
123
+ Per-component imports reduce bundle size. Each component file imports the shared primitives it needs, and re-importing base is a no-op:
124
+
125
+ ```ts
126
+ import '@skdx/tokens/css';
127
+ import '@skdx/skins/components/button.css';
128
+ ```
91
129
 
92
- **Cascade layers.** `@layer skdx-reset, skdx-base, skdx-components, skdx-utilities;`
93
- is declared once, before any rule. Component rules live in `skdx-components` and
94
- are wrapped in `:where()`, so they carry zero specificity and anything you write
95
- outside a layer beats them — no `!important`, ever.
96
-
97
- **Tokens only.** Every colour resolves through a `--skdx-color-*` custom property.
98
- There is no hex, `rgb()`, `hsl()` or `oklch()` anywhere in this package, and
99
- Stylelint fails the build if one appears. `currentColor` and `transparent` are
100
- permitted where they express inheritance or absence; CSS system colours are
101
- permitted inside `@media (forced-colors: active)`.
102
-
103
- **Logical properties.** `padding-inline`, `inset-inline-start`,
104
- `border-start-start-radius` throughout, so RTL works without a second
105
- stylesheet.
106
-
107
- **Restrained motion.** Only `opacity` and `transform` animate. All keyframes are
108
- `skdx-` prefixed. `prefers-reduced-motion` collapses durations to 1ms rather than
109
- to zero, so `animationend` still fires and overlays still unmount.
110
-
111
- **Accessible states.** Disabled is a colour change, not opacity — opacity over an
112
- unknown backdrop has an unknowable contrast ratio. Invalid is a thicker border
113
- *and* a colour. Selected is weight *and* ink. Nothing is signalled by colour
114
- alone.
115
-
116
- **Contrast is enforced, not assumed.** `tests/contrast.test.ts` resolves the
117
- token graph for all 38 themes and asserts every foreground/background pairing
118
- the stylesheets rely on — 1,600 assertions, 4.5:1 for text and 3:1 for
119
- boundaries, on every build. It was written after measuring that 22 of the 38
120
- themes had at least one failure, including a tooltip at 1.00:1 in every dark
121
- theme. Two theme-limited exceptions are recorded with their measured values so
122
- they cannot silently absorb a regression.
123
-
124
- One consequence is visible in the design: **a filled primary button keeps the
125
- same fill on hover and press**, signalling state with elevation, a darker rim
126
- and a 1px displacement instead. `primary-600` is the only ramp step whose
127
- contrast with the themes' inverted ink clears 4.5:1 in all 38 of them, so
128
- shifting the fill would make the label fail in roughly a third of themes at the
129
- moment the user is aiming at it.
130
+ ## Structure without paint
130
131
 
131
- ## Checking it
132
+ Several parts have no intrinsic content and therefore no intrinsic size: a slider track and thumb, a switch thumb, the progress indicator, the spinner, the skeleton, the radio indicator, and every overlay arrow. A component rendered with no stylesheet at all draws them at zero by zero. That is correct — the packages ship no appearance — but it is a poor place to start writing a skin from.
132
133
 
133
- ```sh
134
- pnpm --filter @skdx/skins run test # contrast, coverage, dead selectors, standalone
135
- pnpm --filter @skdx/skins run test:e2e # the browser sweep
136
- pnpm --filter @skdx/skins run preview # look at it yourself
134
+ `@skdx/skins/structure.css` is this stylesheet with every paint declaration removed: geometry, layout and motion, no colour, no background, no shadow.
135
+
136
+ ```ts
137
+ import '@skdx/tokens/css'; // optional base.css falls back without it
138
+ import '@skdx/skins/structure.css';
139
+ import './my-colours.css';
137
140
  ```
138
141
 
139
- All three render the same surface: every demo under `apps/docs/src/demos`,
140
- through the real components, against the built stylesheets. Nothing here is
141
- hand-written markup, so the preview cannot drift from what the gate measures —
142
- an earlier hand-written audit page had, and it showed `<label class="skdx-checkbox">`
143
- where the component renders `<button role="checkbox">`.
142
+ It is generated from the same source as `all.css` rather than maintained by hand, so its geometry is the geometry the real skin ships. Import one or the other, never both — it is a subset of the same rules, not a layer on top of them.
144
143
 
145
- `test:e2e` measures what only a browser can answer whether a focus ring that
146
- exists in the stylesheet is *visible* once overflow, stacking and inline styles
147
- have had their say — and reports `hover-no-feedback`, `focus-ring-missing`,
148
- `focus-ring-contrast`, `focus-ring-clipped`, `pressed-no-feedback` and
149
- `disabled-not-announced` per part. It forces states by rewriting `:hover`,
150
- `:focus-visible` and `:active` into attributes rather than driving a pointer, so
151
- a state that only exists while a menu is open can still be measured.
144
+ The one place a colour keyword survives is inside `mask-image`, where `transparent` and `currentColor` are alpha stops that clip a shape (the spinner's ring, the half-star rating) rather than something the element is painted in.
152
145
 
153
- `preview` opens the same page with controls for the axes a person needs and a
154
- test cannot show: all 38 themes, both directions, the skin on and off, the
155
- tokens on and off, a filter, and the interaction states held still. Settings
156
- live in the URL, so a configuration is a link you can paste into an issue.
146
+ ## Without tokens
157
147
 
158
- ## Sizes and variants
148
+ `@skdx/tokens` is an optional peer dependency, not a requirement. The skin renders a usable, themed, accessible interface with no tokens on the page — it falls back to **CSS system colours** (`Canvas`, `Field`, `AccentColor`, `Highlight`, `Mark`, `MarkText`), which the platform supplies and which already follow the user's OS light/dark and contrast settings.
159
149
 
160
- Variants and sizes are attributes you set, not component props — the headless
161
- packages ship no variant API:
150
+ Geometry, type and motion come through in full. Two things degrade:
162
151
 
163
- ```tsx
164
- <Button data-variant="primary" data-size="lg">Save</Button>
165
- ```
152
+ - **Status colour collapses to neutral.** Alerts and badges keep their icon, border and text — the signals that were never colour-only — and stop being tinted red, green, amber or blue.
153
+ - **Shadows and the modal scrim are dropped.** Both need alpha, which no system colour provides. Overlays keep their border, which is what separates them from the page.
166
154
 
167
- `data-variant`: `primary`, `secondary` (default), `outline`, `ghost`, `danger`.
168
- `data-size`: `sm`, `md` (default), `lg`.
155
+ Add `@skdx/tokens/css` and the theme takes over automatically: tokens are declared **unlayered**, so they beat the skin's layered fallbacks regardless of specificity. Nothing detects anything, and there is no fallback inlined next to any `var()` — a colour leaked that way would win silently whenever a token failed to load, hiding the breakage.
169
156
 
170
- ## Adopting the skin on an existing app
157
+ Verified by `tests/standalone.test.ts`: every token the stylesheets read has a fallback, every runtime property is read with an inline default, and the fallback block may name only platform colours.
171
158
 
172
- Adding this package to an app that already has its own CSS is **not visually
173
- inert**. Every rule here is inside `@layer skdx-components` and wrapped in
174
- `:where()`, so your unlayered CSS wins wherever it speaks — but wherever it is
175
- *silent*, the skin now speaks instead of the browser default.
159
+ ## How it is built
176
160
 
177
- The cases that move things are the containers that become flex:
161
+ **Cascade layers:** `@layer skdx-reset, skdx-base, skdx-components, skdx-utilities;` is declared once, before any rule. Component rules live in `skdx-components` and wrapped in `:where()`, so they carry zero specificity — anything you write outside a layer beats them with no `!important`.
178
162
 
179
- | Part | What the skin sets | What changes |
180
- | --- | --- | --- |
181
- | `CardHeader` | `display: flex; flex-direction: column` | children stack and stretch instead of flowing |
182
- | `CardFooter` | `display: flex` (row) | a `<p>` in a footer stops wrapping and sits on one line |
183
- | `NavigationMenuItem` | `display: flex` | a block child is blockified onto the item's axis |
163
+ **Variables only.** Every colour resolves through a `--skdx-color-*` custom property, and `!important` appears nowhere in the package. One file carries literal colours — `components/color-picker.css`, where the swatch and hue gradients _are_ the subject and no theme should move them. `currentColor` and `transparent` are permitted where they express inheritance or absence; CSS system colours are permitted inside `@media (forced-colors: active)`.
184
164
 
185
- None of that is a bug a skin that did not lay its own parts out would not be
186
- a skin. But it means the migration step is: render each page, find the places
187
- that used to rely on the browser's block layout, and **declare the layout you
188
- want on your own class**, not on the `.skdx-*` one:
165
+ **Logical properties.** `padding-inline`, `inset-inline-start`, `border-start-start-radius` throughout, so RTL works without a second stylesheet.
189
166
 
190
- ```css
191
- /* Yes — your class, unlayered, so it wins with no !important. */
192
- .footer__col {
193
- display: block;
194
- }
167
+ **Restrained motion.** Only `opacity` and `transform` animate. All keyframes are `skdx-` prefixed. `prefers-reduced-motion` collapses durations to 1ms rather than to zero, so `animationend` still fires and overlays still unmount.
195
168
 
196
- /* Nothis is fighting the skin, and it is the thing you never have to do. */
197
- .skdx-navigation-menu {
198
- display: block !important;
199
- }
169
+ **Accessible states.** Disabled is a colour change, not opacity opacity over an unknown backdrop has an unknowable contrast ratio. Invalid is a thicker border _and_ a colour. Selected is weight _and_ ink. Nothing is signalled by colour alone.
170
+
171
+ **Contrast enforced.** `tests/contrast.test.ts` resolves the token graph for all 38 themes and asserts every foreground/background pairing the stylesheets rely on — over 1,600 assertions at 4.5:1 for text and 3:1 for boundaries, on every build.
172
+
173
+ ## Checking it
174
+
175
+ ```sh
176
+ pnpm --filter @skdx/skins run test # contrast, coverage, dead selectors, standalone
177
+ pnpm --filter @skdx/skins run test:e2e # the browser sweep
178
+ pnpm --filter @skdx/skins run preview # look at it yourself
200
179
  ```
201
180
 
202
- One related trap: a component whose children *replace* what the skin draws
203
- says so in its slot documentation. `Spinner`'s default slot is "an optional
204
- custom spinner graphic; omit to style via CSS only"pass children and you get
205
- your graphic, not your graphic inside the skin's rotating ring.
181
+ All three render the same surface: every demo under `apps/docs/src/demos`, through the real components, against the built stylesheets.
182
+
183
+ `test:e2e` measures what only a browser can answer whether a focus ring that exists in the stylesheet is _visible_ once overflow, stacking and inline styles have had their say and reports per-part visibility issues. It forces states by rewriting `:hover`, `:focus-visible` and `:active` into attributes, so a state that only exists while a menu is open can still be measured.
184
+
185
+ `preview` opens the same page with controls for the axes a person needs and a test cannot show: all 38 themes, both directions, the skin on and off, the tokens on and off, a filter, and the interaction states held still.
206
186
 
207
187
  ## Customising
208
188
 
@@ -215,12 +195,36 @@ Retune a metric rather than rewriting a rule:
215
195
  }
216
196
  ```
217
197
 
218
- Recolour through the theme, not through this package see
219
- [skin-token-map.md](../../docs/architecture/skin-token-map.md).
198
+ Recolour through the theme, not through this package: the aliases and what each resolves to live in [`@skdx/tokens`](../tokens/src/utils/aliases.ts).
220
199
 
221
200
  ## Documentation
222
201
 
223
- - [Component styling contract](../../docs/architecture/component-styling-contract.md) — the classes and attributes, and their stability
224
- - [Skin token map](../../docs/architecture/skin-token-map.md) — every alias and what it resolves to
225
- - [React skin audit](../../docs/architecture/react-skin-audit.md) — per-component parts, states and coverage
226
- - [Migration guide](../../docs/migrations/react-skins.md)
202
+ - [Overview](https://ui.skandadx.dev/skins/) — what the skin is and what it does
203
+ - [Install and cascade order](https://ui.skandadx.dev/skins/install/) — the two imports and the four layers
204
+ - [Per-component styling](https://ui.skandadx.dev/skins/per-component/) — which classes and parts each component exposes
205
+ - [Styling vocabulary](https://ui.skandadx.dev/skins/vocabulary/) — `data-variant`, `data-size`, `data-status` and all the attributes
206
+ - [Without tokens](https://ui.skandadx.dev/skins/without-tokens/) — how the skin works when `@skdx/tokens` is not installed
207
+ - [Writing your own](https://ui.skandadx.dev/skins/write-your-own/) — the patterns for authoring a custom skin
208
+ - [Styling hooks](https://ui.skandadx.dev/styling-hooks/) — the generated `::part()` ↔ `data-skdx-*` translation for the Web Components build
209
+
210
+ ## Package layout
211
+
212
+ ```text
213
+ packages/skins/
214
+ ├── src/
215
+ │ ├── components/ 91 component families, one .css file each,
216
+ │ │ plus six _-prefixed shared partials
217
+ │ │ (_trigger, _status, _overlay, _actuator,
218
+ │ │ _card-control, _collection) that are not exported
219
+ │ ├── _foundation-fallback.css geometry, type and motion, generated from @skdx/tokens
220
+ │ ├── base.css layer order, the system-colour palette, control metrics
221
+ │ ├── utilities.css accessibility helpers
222
+ │ └── web-components.css :not(:defined) box reservation, web-components only
223
+ └── dist/ built .css files; all.css is dist/index.css and
224
+ structure.css is that bundle minus every paint
225
+ declaration (scripts/strip-paint.mjs)
226
+ ```
227
+
228
+ ---
229
+
230
+ Copyright © SkandaDX. Licensed under the MIT License — see [LICENSE](../../LICENSE) in the repository root.
package/dist/base.css CHANGED
@@ -1 +1 @@
1
- @layer skdx-reset,skdx-base,skdx-components,skdx-utilities;@layer skdx-reset{:root{--skdx-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--skdx-font-family-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;--skdx-font-size-xs: .75rem;--skdx-font-size-sm: .875rem;--skdx-font-size-md: 1rem;--skdx-font-size-lg: 1.125rem;--skdx-font-size-xl: 1.25rem;--skdx-font-size-2xl: 1.5rem;--skdx-font-size-3xl: 1.875rem;--skdx-font-weight-regular: 400;--skdx-font-weight-medium: 500;--skdx-font-weight-semibold: 600;--skdx-font-weight-bold: 700;--skdx-font-line-height-tight: 1.25;--skdx-font-line-height-snug: 1.43;--skdx-font-line-height-normal: 1.5;--skdx-font-line-height-relaxed: 1.75;--skdx-font-letter-spacing-tight: -.015em;--skdx-font-letter-spacing-normal: 0em;--skdx-font-letter-spacing-wide: .025em;--skdx-font-letter-spacing-wider: .05em;--skdx-space-1: .25rem;--skdx-space-2: .5rem;--skdx-space-3: .75rem;--skdx-space-4: 1rem;--skdx-space-5: 1.25rem;--skdx-space-6: 1.5rem;--skdx-space-8: 2rem;--skdx-space-10: 2.5rem;--skdx-space-12: 3rem;--skdx-space-16: 4rem;--skdx-radius-sm: .25rem;--skdx-radius-inner: .375rem;--skdx-radius-md: .5rem;--skdx-radius-lg: .75rem;--skdx-radius-xl: 1rem;--skdx-radius-full: 9999px;--skdx-motion-duration-instant: 0ms;--skdx-motion-duration-fast: .1s;--skdx-motion-duration-normal: .2s;--skdx-motion-duration-slow: .3s;--skdx-motion-easing: cubic-bezier(.16, 1, .3, 1);--skdx-motion-easing-exit: cubic-bezier(.4, 0, 1, 1);--skdx-motion-easing-steady: cubic-bezier(.4, 0, .2, 1);--skdx-motion-easing-linear: linear;--skdx-motion-stagger-tight: 4ms;--skdx-motion-stagger-loose: 40ms;--skdx-z-index-base: 0;--skdx-z-index-dropdown: 10;--skdx-z-index-sticky: 20;--skdx-z-index-overlay: 30;--skdx-z-index-modal: 35;--skdx-z-index-popover: 40;--skdx-z-index-toast: 50;--skdx-z-index-max: 9999;--skdx-focus-ring-width: 2px;--skdx-focus-ring-offset: 2px;--skdx-focus-ring-offset-inset: calc(-1 * var(--skdx-focus-ring-width));--skdx-border-width-thin: 1px;--skdx-border-width-thick: 2px;--skdx-border-width-thicker: 4px;--skdx-opacity-disabled: .5;--skdx-opacity-scrim: .6;--skdx-control-height-sm: 1.875rem;--skdx-control-height-md: 2.25rem;--skdx-control-height-lg: 2.625rem;--skdx-control-height-compact: 2rem;--skdx-control-padding-sm: .625rem;--skdx-control-padding-md: var(--skdx-space-3);--skdx-control-padding-lg: var(--skdx-space-4);--skdx-control-gap-sm: var(--skdx-space-1);--skdx-control-gap-md: var(--skdx-space-2);--skdx-control-gap-lg: var(--skdx-space-2);--skdx-icon-size-sm: 1rem;--skdx-icon-size-md: 1.25rem;--skdx-icon-size-lg: 1.5rem;--skdx-indicator-size-sm: 1rem;--skdx-indicator-size-md: 1.25rem;--skdx-indicator-size-lg: 1.5rem;--skdx-item-height-sm: 1.75rem;--skdx-item-height-md: 2.25rem;--skdx-item-height-lg: 2.5rem;--skdx-item-gap: 2px;--skdx-overlay-padding: var(--skdx-space-1);--skdx-overlay-radius: var(--skdx-radius-lg);--skdx-overlay-min-width: 7.5rem;--skdx-field-gap: var(--skdx-space-1);--skdx-field-label-gap: var(--skdx-space-1);--skdx-target-min: 24px}@media(pointer:coarse){:root{--skdx-control-height-sm: 2.25rem;--skdx-control-height-md: 2.75rem;--skdx-control-height-lg: 3rem;--skdx-control-height-compact: 2.75rem;--skdx-item-height-sm: 2.25rem;--skdx-item-height-md: 2.75rem;--skdx-item-height-lg: 3rem;--skdx-target-min: 44px}}}@layer skdx-reset,skdx-base,skdx-components,skdx-utilities;@layer skdx-reset{:root{--skdx-shadow-sm: none;--skdx-shadow-md: none;--skdx-shadow-lg: none;--skdx-shadow-overlay: none;--skdx-color-surface-page: Canvas;--skdx-color-surface-raised: Canvas;--skdx-color-surface-default: ButtonFace;--skdx-color-surface-sunken: ButtonFace;--skdx-color-surface-hover: color-mix(in srgb, CanvasText 8%, Canvas);--skdx-color-surface-pressed: color-mix(in srgb, CanvasText 16%, Canvas);--skdx-color-surface-selected: Highlight;--skdx-color-surface-disabled: ButtonFace;--skdx-color-surface-inverse: CanvasText;--skdx-color-text-on-inverse: Canvas;--skdx-color-text-default: CanvasText;--skdx-color-text-muted: GrayText;--skdx-color-text-disabled: GrayText;--skdx-color-text-placeholder: GrayText;--skdx-color-text-on-accent: AccentColorText;--skdx-color-text-accent: LinkText;--skdx-color-text-danger: CanvasText;--skdx-color-text-success: CanvasText;--skdx-color-text-warning: CanvasText;--skdx-color-text-info: CanvasText;--skdx-color-border-default: color-mix(in srgb, CanvasText 45%, Canvas);--skdx-color-border-strong: CanvasText;--skdx-color-border-subtle: color-mix(in srgb, CanvasText 25%, Canvas);--skdx-color-border-accent: AccentColor;--skdx-color-border-disabled: GrayText;--skdx-color-border-danger: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-border-success: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-border-warning: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-action-primary-bg: AccentColor;--skdx-color-action-primary-bg-hover: AccentColor;--skdx-color-action-primary-bg-pressed: AccentColor;--skdx-color-action-primary-text: AccentColorText;--skdx-color-action-primary-border: AccentColor;--skdx-color-action-primary-border-hover: CanvasText;--skdx-color-action-secondary-bg: ButtonFace;--skdx-color-action-secondary-bg-hover: ButtonFace;--skdx-color-action-secondary-bg-pressed: ButtonFace;--skdx-color-action-secondary-text: ButtonText;--skdx-color-action-secondary-border: ButtonBorder;--skdx-color-action-outline-text: ButtonText;--skdx-color-action-outline-border: ButtonBorder;--skdx-color-action-outline-bg-hover: ButtonFace;--skdx-color-action-outline-bg-pressed: ButtonFace;--skdx-color-action-ghost-text: ButtonText;--skdx-color-action-ghost-bg-hover: ButtonFace;--skdx-color-action-ghost-bg-pressed: ButtonFace;--skdx-color-action-danger-bg: ButtonFace;--skdx-color-action-danger-bg-hover: ButtonFace;--skdx-color-action-danger-bg-pressed: ButtonFace;--skdx-color-action-danger-text: ButtonText;--skdx-color-action-danger-border: CanvasText;--skdx-color-action-disabled-bg: ButtonFace;--skdx-color-action-disabled-text: GrayText;--skdx-color-action-disabled-border: GrayText;--skdx-color-field-bg: Field;--skdx-color-field-bg-hover: ButtonFace;--skdx-color-field-bg-disabled: ButtonFace;--skdx-color-field-bg-readonly: ButtonFace;--skdx-color-field-text: FieldText;--skdx-color-field-border: ButtonBorder;--skdx-color-field-border-hover: AccentColor;--skdx-color-field-border-focus: Highlight;--skdx-color-field-border-invalid: CanvasText;--skdx-color-selection-bg: AccentColor;--skdx-color-selection-bg-hover: AccentColor;--skdx-color-selection-mark: AccentColorText;--skdx-color-highlight-bg: Highlight;--skdx-color-highlight-text: HighlightText;--skdx-color-status-info-bg: Canvas;--skdx-color-status-info-border: ButtonBorder;--skdx-color-status-info-text: CanvasText;--skdx-color-status-info-icon: CanvasText;--skdx-color-status-success-bg: Canvas;--skdx-color-status-success-border: ButtonBorder;--skdx-color-status-success-text: CanvasText;--skdx-color-status-success-icon: CanvasText;--skdx-color-status-warning-bg: Canvas;--skdx-color-status-warning-border: ButtonBorder;--skdx-color-status-warning-text: CanvasText;--skdx-color-status-warning-icon: CanvasText;--skdx-color-status-danger-bg: Canvas;--skdx-color-status-danger-border: ButtonBorder;--skdx-color-status-danger-text: CanvasText;--skdx-color-status-danger-icon: CanvasText;--skdx-color-status-neutral-bg: ButtonFace;--skdx-color-status-neutral-border: ButtonBorder;--skdx-color-status-neutral-text: ButtonText;--skdx-color-status-neutral-icon: GrayText;--skdx-color-focus-ring: CanvasText;--skdx-color-focus-ring-offset: Canvas;--skdx-color-separator: ButtonBorder;--skdx-color-track: ButtonFace;--skdx-color-track-fill: AccentColor;--skdx-color-skeleton: ButtonFace;--skdx-color-skeleton-sheen: Canvas;--skdx-color-neutral-50: Canvas;--skdx-color-neutral-950: CanvasText;--skdx-color-surface-overlay: transparent}:where([class*=skdx-]):is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul,menu,fieldset){margin:0}:where([class*=skdx-]):is(ol,ul,menu){padding-inline-start:0;list-style:none}}@layer skdx-reset{:where([class^=skdx-],[class*=" skdx-"]),:where([class^=skdx-],[class*=" skdx-"]):before,:where([class^=skdx-],[class*=" skdx-"]):after{box-sizing:border-box}:where(button,input,select,textarea)[class*=skdx-]{font:inherit;color:inherit;letter-spacing:inherit}}@layer skdx-base{:where([class^=skdx-],[class*=" skdx-"]):focus-visible{outline:var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);outline-offset:var(--skdx-focus-ring-offset)}:where([class^=skdx-],[class*=" skdx-"]):is(button,summary,a[href],[role=button],[role=link],[data-skdx-control=actuator]):hover:not(:disabled,[data-disabled],[aria-disabled=true]){background-color:var(--skdx-color-surface-hover)}:where([class^=skdx-],[class*=" skdx-"]):is(input,textarea,select):hover:not(:disabled,[readonly],[data-readonly],[data-disabled]){border-color:var(--skdx-color-field-border-hover);background-color:var(--skdx-color-field-bg-hover)}:where(.skdx-number-field,.skdx-tags-input,.skdx-pin-input__field,.skdx-multi-select__trigger,.skdx-form__control):hover:not([data-disabled],[data-readonly]){border-color:var(--skdx-color-field-border-hover)}:where([class^=skdx-],[class*=" skdx-"]):is(button,summary,a[href],[role=button],[role=link],[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio],[role=option],[role=tab],[role=checkbox],[role=radio],[role=switch],[data-skdx-control]):active:not(:disabled,[data-disabled],[aria-disabled=true]){translate:0 1px}}@layer skdx-utilities{@media(prefers-reduced-motion:reduce){:where([class^=skdx-],[class*=" skdx-"]),:where([class^=skdx-],[class*=" skdx-"]):before,:where([class^=skdx-],[class*=" skdx-"]):after{animation-duration:1ms;animation-iteration-count:1;transition-duration:1ms;scroll-behavior:auto}}}@keyframes skdx-fade-in{0%{opacity:0}}@keyframes skdx-fade-out{to{opacity:0}}@keyframes skdx-zoom-in{0%{opacity:0;transform:scale(.96)}}@keyframes skdx-zoom-out{to{opacity:0;transform:scale(.96)}}@keyframes skdx-slide-in-from-top{0%{opacity:0;transform:translateY(-.5rem)}}@keyframes skdx-slide-in-from-bottom{0%{opacity:0;transform:translateY(.5rem)}}@keyframes skdx-slide-in-from-start{0%{opacity:0;transform:translate(-.5rem)}}@keyframes skdx-slide-in-from-end{0%{opacity:0;transform:translate(.5rem)}}@keyframes skdx-spin{to{transform:rotate(360deg)}}@keyframes skdx-pulse{50%{opacity:.5}}@keyframes skdx-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}
1
+ @layer skdx-reset,skdx-base,skdx-components,skdx-utilities;@layer skdx-reset{:root{--skdx-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--skdx-font-family-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;--skdx-font-size-xs: .75rem;--skdx-font-size-sm: .875rem;--skdx-font-size-md: 1rem;--skdx-font-size-lg: 1.125rem;--skdx-font-size-xl: 1.25rem;--skdx-font-size-2xl: 1.5rem;--skdx-font-size-3xl: 1.875rem;--skdx-font-weight-regular: 400;--skdx-font-weight-medium: 500;--skdx-font-weight-semibold: 600;--skdx-font-weight-bold: 700;--skdx-font-line-height-tight: 1.25;--skdx-font-line-height-snug: 1.43;--skdx-font-line-height-normal: 1.5;--skdx-font-line-height-relaxed: 1.75;--skdx-font-letter-spacing-tight: -.015em;--skdx-font-letter-spacing-normal: 0em;--skdx-font-letter-spacing-wide: .025em;--skdx-font-letter-spacing-wider: .05em;--skdx-space-1: .25rem;--skdx-space-2: .5rem;--skdx-space-3: .75rem;--skdx-space-4: 1rem;--skdx-space-5: 1.25rem;--skdx-space-6: 1.5rem;--skdx-space-8: 2rem;--skdx-space-10: 2.5rem;--skdx-space-12: 3rem;--skdx-space-16: 4rem;--skdx-radius-sm: .25rem;--skdx-radius-inner: .375rem;--skdx-radius-md: .5rem;--skdx-radius-lg: .75rem;--skdx-radius-xl: 1rem;--skdx-radius-full: 9999px;--skdx-motion-duration-instant: 0ms;--skdx-motion-duration-fast: .1s;--skdx-motion-duration-normal: .2s;--skdx-motion-duration-slow: .3s;--skdx-motion-easing: cubic-bezier(.16, 1, .3, 1);--skdx-motion-easing-exit: cubic-bezier(.4, 0, 1, 1);--skdx-motion-easing-steady: cubic-bezier(.4, 0, .2, 1);--skdx-motion-easing-linear: linear;--skdx-motion-stagger-tight: 4ms;--skdx-motion-stagger-loose: 40ms;--skdx-z-index-base: 0;--skdx-z-index-dropdown: 10;--skdx-z-index-sticky: 20;--skdx-z-index-overlay: 30;--skdx-z-index-modal: 35;--skdx-z-index-popover: 40;--skdx-z-index-toast: 50;--skdx-z-index-max: 9999;--skdx-focus-ring-width: 2px;--skdx-focus-ring-offset: 2px;--skdx-focus-ring-offset-inset: calc(-1 * var(--skdx-focus-ring-width));--skdx-border-width-thin: 1px;--skdx-border-width-thick: 2px;--skdx-border-width-thicker: 4px;--skdx-opacity-disabled: .5;--skdx-opacity-scrim: .6;--skdx-control-height-sm: 1.875rem;--skdx-control-height-md: 2.25rem;--skdx-control-height-lg: 2.625rem;--skdx-control-height-compact: 2rem;--skdx-control-padding-sm: .625rem;--skdx-control-padding-md: var(--skdx-space-3);--skdx-control-padding-lg: var(--skdx-space-4);--skdx-control-gap-sm: var(--skdx-space-1);--skdx-control-gap-md: var(--skdx-space-2);--skdx-control-gap-lg: var(--skdx-space-2);--skdx-icon-size-sm: 1rem;--skdx-icon-size-md: 1.25rem;--skdx-icon-size-lg: 1.5rem;--skdx-indicator-size-sm: 1rem;--skdx-indicator-size-md: 1.25rem;--skdx-indicator-size-lg: 1.5rem;--skdx-item-height-sm: 1.75rem;--skdx-item-height-md: 2.25rem;--skdx-item-height-lg: 2.5rem;--skdx-item-gap: 2px;--skdx-overlay-padding: var(--skdx-space-1);--skdx-overlay-radius: var(--skdx-radius-lg);--skdx-overlay-min-width: 7.5rem;--skdx-field-gap: var(--skdx-space-1);--skdx-field-label-gap: var(--skdx-space-1);--skdx-target-min: 24px}@media(pointer:coarse){:root{--skdx-control-height-sm: 2.25rem;--skdx-control-height-md: 2.75rem;--skdx-control-height-lg: 3rem;--skdx-control-height-compact: 2.75rem;--skdx-item-height-sm: 2.25rem;--skdx-item-height-md: 2.75rem;--skdx-item-height-lg: 3rem;--skdx-target-min: 44px}}}@layer skdx-reset,skdx-base,skdx-components,skdx-utilities;@layer skdx-reset{:root{--skdx-shadow-sm: none;--skdx-shadow-md: none;--skdx-shadow-lg: none;--skdx-shadow-overlay: none;--skdx-color-surface-page: Canvas;--skdx-color-surface-raised: Canvas;--skdx-color-surface-default: ButtonFace;--skdx-color-surface-sunken: ButtonFace;--skdx-color-surface-hover: color-mix(in srgb, CanvasText 8%, Canvas);--skdx-color-surface-pressed: color-mix(in srgb, CanvasText 16%, Canvas);--skdx-color-surface-selected: Highlight;--skdx-color-surface-disabled: ButtonFace;--skdx-color-surface-inverse: CanvasText;--skdx-color-text-on-inverse: Canvas;--skdx-color-text-default: CanvasText;--skdx-color-text-muted: GrayText;--skdx-color-text-disabled: GrayText;--skdx-color-text-placeholder: GrayText;--skdx-color-text-on-accent: AccentColorText;--skdx-color-text-accent: LinkText;--skdx-color-text-danger: CanvasText;--skdx-color-text-success: CanvasText;--skdx-color-text-warning: CanvasText;--skdx-color-text-info: CanvasText;--skdx-color-border-default: color-mix(in srgb, CanvasText 45%, Canvas);--skdx-color-border-strong: CanvasText;--skdx-color-border-subtle: color-mix(in srgb, CanvasText 25%, Canvas);--skdx-color-border-accent: AccentColor;--skdx-color-border-disabled: GrayText;--skdx-color-border-danger: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-border-success: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-border-warning: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-action-primary-bg: AccentColor;--skdx-color-action-primary-bg-hover: AccentColor;--skdx-color-action-primary-text: AccentColorText;--skdx-color-action-primary-border: AccentColor;--skdx-color-action-primary-border-hover: CanvasText;--skdx-color-action-secondary-bg: ButtonFace;--skdx-color-action-secondary-bg-hover: ButtonFace;--skdx-color-action-secondary-bg-pressed: ButtonFace;--skdx-color-action-secondary-text: ButtonText;--skdx-color-action-secondary-border: ButtonBorder;--skdx-color-action-outline-text: ButtonText;--skdx-color-action-outline-border: ButtonBorder;--skdx-color-action-outline-bg-hover: ButtonFace;--skdx-color-action-outline-bg-pressed: ButtonFace;--skdx-color-action-ghost-text: ButtonText;--skdx-color-action-ghost-bg-hover: ButtonFace;--skdx-color-action-ghost-bg-pressed: ButtonFace;--skdx-color-action-danger-bg: ButtonFace;--skdx-color-action-danger-bg-hover: ButtonFace;--skdx-color-action-danger-bg-pressed: ButtonFace;--skdx-color-action-danger-text: ButtonText;--skdx-color-action-danger-border: CanvasText;--skdx-color-action-disabled-bg: ButtonFace;--skdx-color-action-disabled-text: GrayText;--skdx-color-action-disabled-border: GrayText;--skdx-color-field-bg: Field;--skdx-color-field-bg-hover: ButtonFace;--skdx-color-field-bg-disabled: ButtonFace;--skdx-color-field-bg-readonly: ButtonFace;--skdx-color-field-text: FieldText;--skdx-color-field-border: ButtonBorder;--skdx-color-field-border-hover: AccentColor;--skdx-color-field-border-focus: Highlight;--skdx-color-field-border-invalid: CanvasText;--skdx-color-selection-bg: AccentColor;--skdx-color-selection-mark: AccentColorText;--skdx-color-highlight-bg: Highlight;--skdx-color-highlight-text: HighlightText;--skdx-color-status-info-bg: Canvas;--skdx-color-status-info-border: ButtonBorder;--skdx-color-status-info-text: CanvasText;--skdx-color-status-info-icon: CanvasText;--skdx-color-status-success-bg: Canvas;--skdx-color-status-success-border: ButtonBorder;--skdx-color-status-success-text: CanvasText;--skdx-color-status-success-icon: CanvasText;--skdx-color-status-warning-bg: Canvas;--skdx-color-status-warning-border: ButtonBorder;--skdx-color-status-warning-text: CanvasText;--skdx-color-status-warning-icon: CanvasText;--skdx-color-status-danger-bg: Canvas;--skdx-color-status-danger-border: ButtonBorder;--skdx-color-status-danger-text: CanvasText;--skdx-color-status-danger-icon: CanvasText;--skdx-color-status-neutral-bg: ButtonFace;--skdx-color-status-neutral-border: ButtonBorder;--skdx-color-status-neutral-text: ButtonText;--skdx-color-status-neutral-icon: GrayText;--skdx-color-focus-ring: CanvasText;--skdx-color-separator: ButtonBorder;--skdx-color-track: ButtonFace;--skdx-color-track-fill: AccentColor;--skdx-color-skeleton: ButtonFace;--skdx-color-neutral-50: Canvas;--skdx-color-neutral-950: CanvasText;--skdx-color-surface-overlay: transparent}:where([class*=skdx-]):is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul,menu,fieldset){margin:0}:where([class*=skdx-]):is(ol,ul,menu){padding-inline-start:0;list-style:none}}@layer skdx-reset{:where([class^=skdx-],[class*=" skdx-"]),:where([class^=skdx-],[class*=" skdx-"]):before,:where([class^=skdx-],[class*=" skdx-"]):after{box-sizing:border-box}:where(button,input,select,textarea)[class*=skdx-]{font:inherit;color:inherit;letter-spacing:inherit}}@layer skdx-base{:where([class^=skdx-],[class*=" skdx-"]):focus-visible{outline:var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);outline-offset:var(--skdx-focus-ring-offset)}:where([class^=skdx-],[class*=" skdx-"]):is(button,summary,a[href],[role=button],[role=link],[data-skdx-control=actuator]):hover:not(:disabled,[data-disabled],[aria-disabled=true]){background-color:var(--skdx-color-surface-hover)}:where([class^=skdx-],[class*=" skdx-"]):is(input,textarea,select):hover:not(:disabled,[readonly],[data-readonly],[data-disabled]){border-color:var(--skdx-color-field-border-hover);background-color:var(--skdx-color-field-bg-hover)}:where(.skdx-number-field,.skdx-tags-input,.skdx-pin-input__field,.skdx-select__trigger,.skdx-form__control):hover:not([data-disabled],[data-readonly]){border-color:var(--skdx-color-field-border-hover)}:where([class^=skdx-],[class*=" skdx-"]):is(button,summary,a[href],[role=button],[role=link],[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio],[role=option],[role=tab],[role=checkbox],[role=radio],[role=switch],[data-skdx-control]):active:not(:disabled,[data-disabled],[aria-disabled=true]){translate:0 1px}}@layer skdx-utilities{@media(prefers-reduced-motion:reduce){:where([class^=skdx-],[class*=" skdx-"]),:where([class^=skdx-],[class*=" skdx-"]):before,:where([class^=skdx-],[class*=" skdx-"]):after{animation-duration:1ms;animation-iteration-count:1;transition-duration:1ms;scroll-behavior:auto}}}@keyframes skdx-fade-in{0%{opacity:0}}@keyframes skdx-fade-out{to{opacity:0;visibility:hidden}}@keyframes skdx-zoom-in{0%{opacity:0;transform:scale(.96)}}@keyframes skdx-zoom-out{to{opacity:0;transform:scale(.96);visibility:hidden}}@keyframes skdx-slide-in-from-top{0%{opacity:0;transform:translateY(-.5rem)}}@keyframes skdx-slide-in-from-bottom{0%{opacity:0;transform:translateY(.5rem)}}@keyframes skdx-slide-in-from-start{0%{opacity:0;transform:translate(-.5rem)}}@keyframes skdx-slide-in-from-end{0%{opacity:0;transform:translate(.5rem)}}@keyframes skdx-spin{to{transform:rotate(360deg)}}@keyframes skdx-pulse{50%{opacity:.5}}@keyframes skdx-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}
@@ -1 +1 @@
1
- @import"../base.css";@layer skdx-components{:where(.skdx-accordion){display:flex;flex-direction:column;border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-md);overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset)}:where(.skdx-accordion__item)+:where(.skdx-accordion__item){border-block-start:var(--skdx-border-width-thin) solid var(--skdx-color-border-default)}:where(.skdx-accordion__header){margin:0}:where(.skdx-accordion__trigger){display:flex;align-items:center;justify-content:space-between;gap:var(--skdx-space-3);inline-size:100%;min-block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-space-4);color:var(--skdx-color-text-default);background:transparent;border:0;font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);text-align:start;cursor:pointer;transition:background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-accordion__trigger):hover:not([data-disabled]){background-color:var(--skdx-color-surface-hover)}:where(.skdx-accordion__trigger)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}:where(.skdx-accordion__content){padding-inline:var(--skdx-space-4);padding-block-end:var(--skdx-space-4);font-size:var(--skdx-font-size-sm);line-height:var(--skdx-font-line-height-relaxed);color:var(--skdx-color-text-muted)}:where(.skdx-accordion__indicator){flex:none;display:inline-flex;color:var(--skdx-color-text-muted);transition:rotate var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-accordion__trigger)[data-state=open] :where(.skdx-accordion__indicator){rotate:180deg}}
1
+ @import"../base.css";@layer skdx-components{:where(.skdx-accordion){display:flex;flex-direction:column;border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-md);overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset)}:where(.skdx-accordion__item)+:where(.skdx-accordion__item){border-block-start:var(--skdx-border-width-thin) solid var(--skdx-color-border-default)}:where(.skdx-accordion__header){margin:0}:where(.skdx-accordion__trigger){display:flex;align-items:center;justify-content:space-between;gap:var(--skdx-space-3);inline-size:100%;min-block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-space-4);color:var(--skdx-color-text-default);background:transparent;border:0;font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);text-align:start;cursor:pointer;transition:background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-accordion__trigger):hover:not([data-disabled]){background-color:color-mix(in srgb,var(--skdx-color-surface-hover) 50%,transparent)}:where(.skdx-accordion__trigger)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}:where(.skdx-accordion__content){padding-inline:var(--skdx-space-4);padding-block-end:var(--skdx-space-4);font-size:var(--skdx-font-size-sm);line-height:var(--skdx-font-line-height-relaxed);color:var(--skdx-color-text-muted)}:where(.skdx-accordion__indicator){flex:none;display:inline-flex;color:var(--skdx-color-text-muted);transition:rotate var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-accordion__trigger)[data-state=open] :where(.skdx-accordion__indicator){rotate:180deg}}
@@ -1 +1 @@
1
- @import"../internal/_status.css";@layer skdx-components{:where(.skdx-alert){display:grid;grid-template-columns:auto 1fr auto auto;align-items:start;gap:var(--skdx-space-2);padding:var(--skdx-space-3);color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border:var(--skdx-border-width-thin) solid var(--skdx-status-border, var(--skdx-color-status-neutral-border));border-inline-start-width:var(--skdx-border-width-thicker);border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm);line-height:var(--skdx-font-line-height-normal)}:where(.skdx-alert)[hidden]{display:none}:where(.skdx-alert__icon){grid-column:1;grid-row:1;inline-size:var(--skdx-icon-size-md);block-size:var(--skdx-icon-size-md);color:var(--skdx-status-icon, var(--skdx-color-status-neutral-icon))}:where(.skdx-alert__title){grid-column:2;grid-row:1;margin:0;font-weight:var(--skdx-font-weight-semibold);line-height:var(--skdx-font-line-height-tight)}:where(.skdx-alert__description){grid-column:2;grid-row:2;color:currentColor}:where(.skdx-alert__action){grid-column:3;grid-row:1;align-self:center;display:inline-flex;align-items:center;gap:var(--skdx-space-3)}:where(.skdx-alert__close){grid-column:4;grid-row:1;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);color:currentColor;background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}@media(forced-colors:active){:where(.skdx-alert){border-color:CanvasText}}:where(.skdx-alert__content){grid-column:2;grid-row:1;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skdx-space-1)}}
1
+ @import"../internal/_status.css";@layer skdx-components{:where(.skdx-alert){display:grid;grid-template-columns:auto 1fr auto auto;align-items:start;gap:var(--skdx-space-2);padding:var(--skdx-space-3);color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border:var(--skdx-border-width-thin) solid var(--skdx-status-border, var(--skdx-color-status-neutral-border));border-inline-start-width:var(--skdx-border-width-thicker);border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm);line-height:var(--skdx-font-line-height-normal)}:where(.skdx-alert)[data-variant=solid]{background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg))}:where(.skdx-alert)[data-variant=outline]{background-color:transparent}:where(.skdx-alert)[hidden]{display:none}:where(.skdx-alert__icon){grid-column:1;grid-row:1;inline-size:var(--skdx-icon-size-md);block-size:var(--skdx-icon-size-md);color:var(--skdx-status-icon, var(--skdx-color-status-neutral-icon))}:where(.skdx-alert__title){grid-column:2;grid-row:1;margin:0;font-weight:var(--skdx-font-weight-semibold);line-height:var(--skdx-font-line-height-tight)}:where(.skdx-alert__description){grid-column:2;grid-row:2;color:currentColor}:where(.skdx-alert__action){grid-column:3;grid-row:1;align-self:center;display:inline-flex;align-items:center;gap:var(--skdx-space-3)}:where(.skdx-alert__close){grid-column:4;grid-row:1;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);color:currentColor;background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}@media(forced-colors:active){:where(.skdx-alert){border-color:CanvasText}}:where(.skdx-alert__content){grid-column:2;grid-row:1;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skdx-space-1)}}
@@ -1 +1 @@
1
- @import"../base.css";@layer skdx-components{:where(.skdx-angle-slider){position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:6rem;block-size:6rem;background-color:var(--skdx-color-surface-sunken);border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-full);touch-action:none}:where(.skdx-angle-slider__thumb){position:absolute;inline-size:var(--skdx-indicator-size-md);block-size:var(--skdx-indicator-size-md);background-color:var(--skdx-color-track-fill);border-radius:var(--skdx-radius-full);cursor:grab}:where(.skdx-angle-slider__marks){position:absolute;inset:0;border-radius:var(--skdx-radius-full);pointer-events:none}:where(.skdx-angle-slider__mark){position:absolute;inline-size:var(--skdx-border-width-thin);block-size:var(--skdx-space-1);background-color:var(--skdx-color-border-strong)}:where(.skdx-angle-slider)[data-disabled] :where(.skdx-angle-slider__thumb){background-color:var(--skdx-color-border-disabled);cursor:not-allowed}}
1
+ @import"../base.css";@layer skdx-components{:where(.skdx-angle-slider){position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:6rem;block-size:6rem;--skdx-angle-slider-radius: 2.5rem;background-color:var(--skdx-color-surface-sunken);border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-full);touch-action:none}:where(.skdx-angle-slider__thumb){position:absolute;inline-size:var(--skdx-indicator-size-md);block-size:var(--skdx-indicator-size-md);background-color:var(--skdx-color-track-fill);border-radius:var(--skdx-radius-full);cursor:grab;transform:rotate(var(--skdx-angle-slider-angle, 0deg)) translateY(calc(-1 * var(--skdx-angle-slider-radius)))}:where(.skdx-angle-slider__marks){position:absolute;inset:0;border-radius:var(--skdx-radius-full);pointer-events:none}:where(.skdx-angle-slider__mark){position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:var(--skdx-border-width-thin);block-size:var(--skdx-space-1);background-color:var(--skdx-color-border-strong);transform-origin:center;transform:translate(-50%,-50%) rotate(var(--skdx-angle-slider-mark-angle, 0deg)) translateY(calc(-1 * var(--skdx-angle-slider-radius)))}:where(.skdx-angle-slider)[data-dragging] :where(.skdx-angle-slider__thumb){cursor:grabbing;transition:none}:where(.skdx-angle-slider)[data-readonly]{border-color:var(--skdx-color-border-subtle)}:where(.skdx-angle-slider)[data-readonly] :where(.skdx-angle-slider__thumb){cursor:default}:where(.skdx-angle-slider__mark)[data-state=active]{background-color:var(--skdx-color-track-fill)}:where(.skdx-angle-slider__mark):not(:empty){background-color:transparent;inline-size:auto;block-size:auto}:where(.skdx-angle-slider)[data-disabled] :where(.skdx-angle-slider__thumb){background-color:var(--skdx-color-border-disabled);cursor:not-allowed}@media(forced-colors:active){:where(.skdx-angle-slider){border-color:CanvasText}:where(.skdx-angle-slider__thumb){background-color:Highlight;outline:var(--skdx-border-width-thin) solid CanvasText}:where(.skdx-angle-slider__mark){background-color:CanvasText}:where(.skdx-angle-slider__mark)[data-state=active]{background-color:Highlight}}}
@@ -1 +1 @@
1
- @import"../base.css";@layer skdx-components{:where(.skdx-aspect-ratio){overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset)}:where(.skdx-aspect-ratio:not(skdx-aspect-ratio)){position:absolute;inset:0}:where(.skdx-aspect-ratio)>:where(img,video,iframe,canvas,svg){display:block;inline-size:100%;block-size:100%;object-fit:cover}}
1
+ @import"../base.css";@layer skdx-components{:where(.skdx-aspect-ratio){overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset)}:where(.skdx-aspect-ratio)>:where(img,video,iframe,canvas,svg){display:block;inline-size:100%;block-size:100%;object-fit:cover}}
@@ -1 +1 @@
1
- @import"../internal/_overlay.css";@import"../internal/_collection.css";@layer skdx-components{:where(.skdx-autocomplete__content){padding:var(--skdx-overlay-padding)}:where(.skdx-autocomplete__input){inline-size:100%;block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);color:var(--skdx-color-field-text);background-color:var(--skdx-color-field-bg);border:var(--skdx-border-width-thin) solid var(--skdx-color-field-border);border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm)}:where(.skdx-autocomplete__input):focus-visible{border-color:var(--skdx-color-field-border-focus)}:where(.skdx-autocomplete__list){display:flex;flex-direction:column;padding:var(--skdx-space-1)}:where(.skdx-autocomplete__highlight){font-weight:var(--skdx-font-weight-semibold);color:var(--skdx-color-text-accent);background:transparent}}
1
+ @import"../internal/_trigger.css";@import"../internal/_overlay.css";@import"../internal/_collection.css";@layer skdx-components{:where(.skdx-autocomplete__content){padding:var(--skdx-overlay-padding)}:where(.skdx-autocomplete__field){position:relative}:where(.skdx-autocomplete__input){inline-size:100%;block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);color:var(--skdx-color-field-text);background-color:var(--skdx-color-field-bg);border:var(--skdx-border-width-thin) solid var(--skdx-color-field-border);border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm)}:where(.skdx-autocomplete__field)[data-clearable] :where(.skdx-autocomplete__input){padding-inline-end:calc(var(--skdx-target-min) + var(--skdx-space-1))}:where(.skdx-autocomplete__input)::placeholder{color:var(--skdx-color-text-placeholder);opacity:1}:where(.skdx-autocomplete__input):focus-visible{border-color:var(--skdx-color-field-border-focus)}:where(.skdx-autocomplete__input)[data-invalid]{border-color:var(--skdx-color-field-border-invalid);border-width:var(--skdx-border-width-thick)}:where(.skdx-autocomplete__input):disabled{color:var(--skdx-color-text-disabled);background-color:var(--skdx-color-field-bg-disabled);cursor:not-allowed}:where(.skdx-autocomplete__list){display:flex;flex-direction:column;padding:var(--skdx-space-1)}:where(.skdx-autocomplete__highlight){font-weight:var(--skdx-font-weight-semibold);color:var(--skdx-color-text-accent);background:transparent}:where(.skdx-autocomplete__field) :where(.skdx-autocomplete__clear){position:absolute;inset-block:0;inset-inline-end:var(--skdx-space-1);margin-block:auto}:where(.skdx-autocomplete__clear){display:inline-flex;align-items:center;justify-content:center;color:var(--skdx-color-text-muted);background:transparent;border:0;cursor:pointer}:where(.skdx-autocomplete__clear):hover:not(:disabled){color:var(--skdx-color-text-danger)}:where(.skdx-autocomplete__clear):disabled{color:var(--skdx-color-text-disabled);cursor:default}}
@@ -1 +1 @@
1
- @import"../base.css";@layer skdx-components{:where(.skdx-avatar){position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--skdx-control-height-md);block-size:var(--skdx-control-height-md);overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);border-radius:var(--skdx-radius-full);color:var(--skdx-color-text-muted);background-color:var(--skdx-color-surface-sunken);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);user-select:none}:where(.skdx-avatar__image){inline-size:100%;block-size:100%;object-fit:cover}:where(.skdx-avatar__fallback){display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;text-transform:uppercase}:where(.skdx-avatar)[data-size=sm]{inline-size:var(--skdx-control-height-sm);block-size:var(--skdx-control-height-sm);font-size:var(--skdx-font-size-xs)}:where(.skdx-avatar)[data-size=lg]{inline-size:var(--skdx-control-height-lg);block-size:var(--skdx-control-height-lg);font-size:var(--skdx-font-size-md)}:where(.skdx-avatar)[data-shape=square]{border-radius:var(--skdx-radius-md)}}
1
+ @import"../base.css";@layer skdx-components{:where(.skdx-avatar){position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--skdx-control-height-md);block-size:var(--skdx-control-height-md);overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);border-radius:var(--skdx-radius-full);color:var(--skdx-color-text-muted);background-color:var(--skdx-color-surface-sunken);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);user-select:none}:where(.skdx-avatar__image){inline-size:100%;block-size:100%;object-fit:cover}:where(.skdx-avatar__fallback){display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;text-transform:uppercase}:where(.skdx-avatar)[data-size=md]{inline-size:var(--skdx-control-height-md);block-size:var(--skdx-control-height-md);font-size:var(--skdx-font-size-sm)}:where(.skdx-avatar)[data-size=sm]{inline-size:var(--skdx-control-height-sm);block-size:var(--skdx-control-height-sm);font-size:var(--skdx-font-size-xs)}:where(.skdx-avatar)[data-size=lg]{inline-size:var(--skdx-control-height-lg);block-size:var(--skdx-control-height-lg);font-size:var(--skdx-font-size-md)}:where(.skdx-avatar)[data-shape=circle]{border-radius:var(--skdx-radius-full)}:where(.skdx-avatar)[data-shape=rounded]{border-radius:var(--skdx-radius-lg)}:where(.skdx-avatar)[data-shape=square]{border-radius:var(--skdx-radius-md)}}
@@ -1 +1 @@
1
- @import"../internal/_status.css";@layer skdx-components{:where(.skdx-badge){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-space-1);min-inline-size:var(--skdx-indicator-size-md);padding-inline:var(--skdx-space-2);padding-block:var(--skdx-border-width-thick);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium);line-height:var(--skdx-font-line-height-tight);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border:var(--skdx-border-width-thin) solid var(--skdx-status-border, var(--skdx-color-status-neutral-border));border-radius:var(--skdx-radius-full)}:where(.skdx-badge)[data-variant=solid]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-badge)[data-variant=dot]{inline-size:var(--skdx-space-2);min-inline-size:0;block-size:var(--skdx-space-2);padding:0;overflow:hidden;font-size:0}@media(forced-colors:active){:where(.skdx-badge){border-color:CanvasText}}}
1
+ @import"../internal/_status.css";@import"../internal/_hit-target.css";@layer skdx-components{:where(.skdx-badge){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-space-1);min-inline-size:var(--skdx-indicator-size-md);padding-inline:var(--skdx-space-2);padding-block:var(--skdx-border-width-thick);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium);line-height:var(--skdx-font-line-height-tight);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border:var(--skdx-border-width-thin) solid var(--skdx-status-border, var(--skdx-color-status-neutral-border));border-radius:var(--skdx-radius-full)}:where(.skdx-badge)[data-variant=solid]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-badge)[data-variant=outline]{color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:transparent;border-color:var(--skdx-status-border, var(--skdx-color-status-neutral-border))}:where(.skdx-badge)[data-variant=subtle]{color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border-color:transparent}:where(.skdx-badge)[data-dot]{inline-size:var(--skdx-space-2);min-inline-size:0;block-size:var(--skdx-space-2);padding:0;overflow:hidden;font-size:0;border-radius:var(--skdx-radius-full)}:where(.skdx-badge)[data-shape=pill]{border-radius:var(--skdx-radius-full)}:where(.skdx-badge)[data-shape=rounded]{border-radius:var(--skdx-radius-sm)}:where(.skdx-badge)[data-size=sm]{min-block-size:var(--skdx-control-height-sm);padding-inline:var(--skdx-space-2);font-size:var(--skdx-font-size-xs)}:where(.skdx-badge)[data-size=md]{min-block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-space-3);font-size:var(--skdx-font-size-sm)}:where(.skdx-badge)[data-size=lg]{min-block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-space-4);font-size:var(--skdx-font-size-md)}:where(.skdx-badge__leading),:where(.skdx-badge__trailing){display:inline-flex;align-items:center;justify-content:center;flex:none}:where(.skdx-badge__label){min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.skdx-badge)[data-selected]{background-color:var(--skdx-color-surface-selected);border-color:var(--skdx-color-border-accent);color:var(--skdx-color-text-accent)}:where(.skdx-badge)[data-disabled]{color:var(--skdx-color-text-disabled);background-color:var(--skdx-color-surface-disabled);border-color:var(--skdx-color-border-disabled);cursor:not-allowed}:where(.skdx-badge__delete){position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-icon-size-sm);block-size:var(--skdx-icon-size-sm);padding:0;color:currentColor;background:transparent;border:0;border-radius:var(--skdx-radius-full);cursor:pointer}:where(.skdx-badge__delete):hover{color:var(--skdx-color-text-danger)}@media(forced-colors:active){:where(.skdx-badge){border-color:CanvasText}}}
@@ -0,0 +1 @@
1
+ @import"../base.css";
@@ -1 +1 @@
1
- @import"../base.css";@layer skdx-components{:where(.skdx-breadcrumb__list){display:flex;align-items:center;flex-wrap:wrap;gap:var(--skdx-space-2);margin:0;padding:0;list-style:none;font-size:var(--skdx-font-size-sm)}:where(.skdx-breadcrumb__item){display:inline-flex;align-items:center;gap:var(--skdx-space-2);min-inline-size:0}:where(.skdx-breadcrumb__link){color:var(--skdx-color-text-muted);text-decoration:none;overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);text-overflow:ellipsis;white-space:nowrap}:where(.skdx-breadcrumb__link):hover{color:var(--skdx-color-text-default);text-decoration:underline}:where(.skdx-breadcrumb__link)[aria-current=page],:where(.skdx-breadcrumb__page){color:var(--skdx-color-text-default);font-weight:var(--skdx-font-weight-medium);text-decoration:none}:where(.skdx-breadcrumb__separator){display:inline-flex;color:var(--skdx-color-text-muted);rotate:0deg}:where(.skdx-breadcrumb__ellipsis){color:var(--skdx-color-text-muted)}}
1
+ @import"../base.css";@layer skdx-components{:where(.skdx-breadcrumb__list){display:flex;align-items:center;flex-wrap:wrap;gap:var(--skdx-space-2);margin:0;padding:0;list-style:none;font-size:var(--skdx-font-size-sm)}:where(.skdx-breadcrumb__item){display:inline-flex;align-items:center;gap:var(--skdx-space-2);min-inline-size:0}:where(.skdx-breadcrumb__link){color:var(--skdx-color-text-muted);text-decoration:none;overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);text-overflow:ellipsis;white-space:nowrap}:where(.skdx-breadcrumb__link):hover{color:var(--skdx-color-text-default);text-decoration:underline}:where(.skdx-breadcrumb__link)[aria-current=page],:where(.skdx-breadcrumb__page){color:var(--skdx-color-text-default);font-weight:var(--skdx-font-weight-medium);text-decoration:none}:where(.skdx-breadcrumb__separator){display:inline-flex;color:var(--skdx-color-text-muted)}:where([dir=rtl]) :where(.skdx-breadcrumb__separator){scale:-1 1}:where(.skdx-breadcrumb__ellipsis){color:var(--skdx-color-text-muted)}}
@@ -1 +1 @@
1
- @import"../base.css";@layer skdx-components{:where(.skdx-button){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-control-gap-md);min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);line-height:var(--skdx-font-line-height-snug);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),box-shadow var(--skdx-motion-duration-fast) var(--skdx-motion-easing),translate var(--skdx-motion-duration-fast) var(--skdx-motion-easing),color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);color:var(--skdx-color-action-secondary-text);background-color:var(--skdx-color-action-secondary-bg);border-color:var(--skdx-color-action-secondary-border)}:where(.skdx-button):hover{background-color:var(--skdx-color-action-secondary-bg-hover);border-color:var(--skdx-color-field-border-hover)}:where(.skdx-button):active,:where(.skdx-button)[data-pressed]{background-color:var(--skdx-color-action-secondary-bg-pressed)}:where(.skdx-button)[data-size=sm]{block-size:var(--skdx-control-height-sm);padding-inline:var(--skdx-control-padding-sm);gap:var(--skdx-control-gap-sm);font-size:var(--skdx-font-size-xs)}:where(.skdx-button)[data-size=lg]{block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-control-padding-lg);gap:var(--skdx-control-gap-lg);font-size:var(--skdx-font-size-md)}:where(.skdx-button)[data-variant=primary]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-border)}:where(.skdx-button)[data-variant=primary]:hover{border-color:var(--skdx-color-action-primary-border-hover);box-shadow:var(--skdx-shadow-sm)}:where(.skdx-button)[data-variant=primary]:active,:where(.skdx-button)[data-variant=primary][data-pressed]{border-color:var(--skdx-color-action-primary-border-hover);box-shadow:none;translate:0 1px}:where(.skdx-button)[data-variant=danger]{color:var(--skdx-color-action-danger-text);background-color:var(--skdx-color-action-danger-bg);border-color:var(--skdx-color-action-danger-border)}:where(.skdx-button)[data-variant=danger]:hover{background-color:var(--skdx-color-action-danger-bg-hover);border-color:var(--skdx-color-action-danger-bg-hover)}:where(.skdx-button)[data-variant=danger]:active,:where(.skdx-button)[data-variant=danger][data-pressed]{background-color:var(--skdx-color-action-danger-bg-pressed);border-color:var(--skdx-color-action-danger-bg-pressed)}:where(.skdx-button)[data-variant=outline]{color:var(--skdx-color-action-outline-text);background-color:transparent;border-color:var(--skdx-color-action-outline-border)}:where(.skdx-button)[data-variant=outline]:hover{background-color:var(--skdx-color-action-outline-bg-hover)}:where(.skdx-button)[data-variant=outline]:active,:where(.skdx-button)[data-variant=outline][data-pressed]{background-color:var(--skdx-color-action-outline-bg-pressed)}:where(.skdx-button)[data-variant=ghost]{color:var(--skdx-color-action-ghost-text);background-color:transparent;border-color:transparent}:where(.skdx-button)[data-variant=ghost]:hover{background-color:var(--skdx-color-action-ghost-bg-hover)}:where(.skdx-button)[data-variant=ghost]:active,:where(.skdx-button)[data-variant=ghost][data-pressed]{background-color:var(--skdx-color-action-ghost-bg-pressed)}:where(.skdx-button):disabled,:where(.skdx-button)[data-disabled]{color:var(--skdx-color-action-disabled-text);background-color:var(--skdx-color-action-disabled-bg);border-color:var(--skdx-color-action-disabled-border);cursor:not-allowed}:where(.skdx-button)[data-loading]{cursor:progress}:where(.skdx-button)[data-icon-only]{padding-inline:0;aspect-ratio:1}@media(forced-colors:active){:where(.skdx-button){border-color:ButtonBorder}:where(.skdx-button):disabled,:where(.skdx-button)[data-disabled]{color:GrayText;border-color:GrayText}}:where(.skdx-button__icon){display:inline-flex;flex:none;inline-size:var(--skdx-icon-size-md);block-size:var(--skdx-icon-size-md)}:where(.skdx-button)[data-size=sm] :where(.skdx-button__icon){inline-size:var(--skdx-icon-size-sm);block-size:var(--skdx-icon-size-sm)}:where(.skdx-button)[data-size=lg] :where(.skdx-button__icon){inline-size:var(--skdx-icon-size-lg);block-size:var(--skdx-icon-size-lg)}:where(.skdx-button__label){overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);text-overflow:ellipsis;white-space:nowrap}}
1
+ @import"../base.css";@import"../internal/_status.css";@layer skdx-components{:where(.skdx-button){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-control-gap-md);min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);line-height:var(--skdx-font-line-height-snug);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),box-shadow var(--skdx-motion-duration-fast) var(--skdx-motion-easing),translate var(--skdx-motion-duration-fast) var(--skdx-motion-easing),color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);color:var(--skdx-color-action-secondary-text);background-color:var(--skdx-color-action-secondary-bg);border-color:var(--skdx-color-action-secondary-border)}:where(.skdx-button):hover{background-color:var(--skdx-color-action-secondary-bg-hover);border-color:var(--skdx-color-field-border-hover)}:where(.skdx-button):active,:where(.skdx-button)[aria-pressed=true]{background-color:var(--skdx-color-action-secondary-bg-pressed)}:where(.skdx-button)[data-size=md]{block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);gap:var(--skdx-control-gap-md);font-size:var(--skdx-font-size-sm)}:where(.skdx-button)[data-size=sm]{block-size:var(--skdx-control-height-sm);padding-inline:var(--skdx-control-padding-sm);gap:var(--skdx-control-gap-sm);font-size:var(--skdx-font-size-xs)}:where(.skdx-button)[data-size=lg]{block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-control-padding-lg);gap:var(--skdx-control-gap-lg);font-size:var(--skdx-font-size-md)}:where(.skdx-button)[data-variant=secondary]{color:var(--skdx-color-action-secondary-text);background-color:var(--skdx-color-action-secondary-bg);border-color:var(--skdx-color-action-secondary-border)}:where(.skdx-button)[data-variant=secondary]:hover{background-color:var(--skdx-color-action-secondary-bg-hover);border-color:var(--skdx-color-field-border-hover)}:where(.skdx-button)[data-variant=secondary]:active,:where(.skdx-button)[data-variant=secondary][aria-pressed=true]{background-color:var(--skdx-color-action-secondary-bg-pressed)}:where(.skdx-button)[data-variant=primary]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-border)}:where(.skdx-button)[data-variant=primary]:hover{border-color:var(--skdx-color-action-primary-border-hover);box-shadow:var(--skdx-shadow-sm)}:where(.skdx-button)[data-variant=primary]:active,:where(.skdx-button)[data-variant=primary][aria-pressed=true]{border-color:var(--skdx-color-action-primary-border-hover);box-shadow:none;translate:0 1px}:where(.skdx-button)[data-variant=danger]{color:var(--skdx-color-action-danger-text);background-color:var(--skdx-color-action-danger-bg);border-color:var(--skdx-color-action-danger-border)}:where(.skdx-button)[data-variant=danger]:hover{background-color:var(--skdx-color-action-danger-bg-hover);border-color:var(--skdx-color-action-danger-bg-hover)}:where(.skdx-button)[data-variant=danger]:active,:where(.skdx-button)[data-variant=danger][aria-pressed=true]{background-color:var(--skdx-color-action-danger-bg-pressed);border-color:var(--skdx-color-action-danger-bg-pressed)}:where(.skdx-button)[data-variant=outline]{color:var(--skdx-color-action-outline-text);background-color:transparent;border-color:var(--skdx-color-action-outline-border)}:where(.skdx-button)[data-variant=outline]:hover{background-color:var(--skdx-color-action-outline-bg-hover)}:where(.skdx-button)[data-variant=outline][data-status=success]{border-color:var(--skdx-color-border-success)}:where(.skdx-button)[data-variant=outline][data-status=warning]{border-color:var(--skdx-color-border-warning)}:where(.skdx-button)[data-variant=outline]:active,:where(.skdx-button)[data-variant=outline][aria-pressed=true]{background-color:var(--skdx-color-action-outline-bg-pressed)}:where(.skdx-button)[data-variant=ghost]{color:var(--skdx-color-action-ghost-text);background-color:transparent;border-color:transparent}:where(.skdx-button)[data-variant=ghost]:hover{background-color:var(--skdx-color-action-ghost-bg-hover)}:where(.skdx-button)[data-variant=ghost]:active,:where(.skdx-button)[data-variant=ghost][aria-pressed=true]{background-color:var(--skdx-color-action-ghost-bg-pressed)}:where(.skdx-button)[data-status=neutral]{--skdx-status-bg: var(--skdx-color-action-secondary-bg);--skdx-status-border: var(--skdx-color-action-secondary-border);--skdx-status-text: var(--skdx-color-action-secondary-text)}:where(.skdx-button)[data-status=brand]{--skdx-status-bg: var(--skdx-color-action-primary-bg);--skdx-status-border: var(--skdx-color-action-primary-border);--skdx-status-text: var(--skdx-color-action-primary-text)}:where(.skdx-button)[data-status]{color:var(--skdx-status-text, var(--skdx-color-action-secondary-text));background-color:var(--skdx-status-bg, var(--skdx-color-action-secondary-bg));border-color:var(--skdx-status-border, var(--skdx-color-action-secondary-border))}:where(.skdx-button)[data-status]:hover:not(:disabled,[data-disabled],[aria-disabled=true]){border-color:var(--skdx-status-text, var(--skdx-color-action-secondary-text));box-shadow:var(--skdx-shadow-sm)}:where(.skdx-button)[data-status=neutral]:hover:not(:disabled,[data-disabled],[aria-disabled=true]){border-color:var(--skdx-color-field-border-hover)}:where(.skdx-button)[data-status]:active,:where(.skdx-button)[data-status][aria-pressed=true]{box-shadow:none;translate:0 1px}:where(.skdx-button)[data-status][data-variant=outline]{background-color:transparent}:where(.skdx-button)[data-status][data-variant=ghost]{background-color:transparent;border-color:transparent}:where(.skdx-button):disabled,:where(.skdx-button)[data-disabled]{color:var(--skdx-color-action-disabled-text);background-color:var(--skdx-color-action-disabled-bg);border-color:var(--skdx-color-action-disabled-border);cursor:not-allowed}:where(.skdx-button)[data-loading]{cursor:progress}:where(.skdx-button)[data-loading]:before{content:"";inline-size:var(--skdx-icon-size-sm);block-size:var(--skdx-icon-size-sm);border:var(--skdx-border-width-thick) solid currentColor;border-inline-end-color:transparent;border-radius:var(--skdx-radius-full);animation:skdx-spin var(--skdx-motion-duration-slow) var(--skdx-motion-easing-linear) infinite}:where(.skdx-button)[data-icon-only]{padding-inline:0;aspect-ratio:1}@media(forced-colors:active){:where(.skdx-button){border-color:ButtonBorder}:where(.skdx-button):disabled,:where(.skdx-button)[data-disabled]{color:GrayText;border-color:GrayText}}:where(.skdx-button__icon){display:inline-flex;flex:none;inline-size:var(--skdx-icon-size-md);block-size:var(--skdx-icon-size-md)}:where(.skdx-button)[data-size=sm] :where(.skdx-button__icon){inline-size:var(--skdx-icon-size-sm);block-size:var(--skdx-icon-size-sm)}:where(.skdx-button)[data-size=lg] :where(.skdx-button__icon){inline-size:var(--skdx-icon-size-lg);block-size:var(--skdx-icon-size-lg)}:where(.skdx-button__label){overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);text-overflow:ellipsis;white-space:nowrap}}
@@ -1 +1 @@
1
- @import"../base.css";@layer skdx-components{:where(.skdx-calendar){display:inline-flex;flex-direction:column;gap:var(--skdx-space-2);padding:var(--skdx-space-3)}:where(.skdx-calendar__header){display:flex;align-items:center;justify-content:space-between;gap:var(--skdx-space-2)}:where(.skdx-calendar__heading){font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-semibold)}:where(.skdx-calendar__previous-button),:where(.skdx-calendar__next-button){display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);color:var(--skdx-color-text-muted);background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}:where(.skdx-calendar__previous-button):hover,:where(.skdx-calendar__next-button):hover{background-color:var(--skdx-color-surface-hover);color:var(--skdx-color-text-default)}:where(.skdx-calendar__grid){border-collapse:collapse}:where(.skdx-calendar__week-day){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium);color:var(--skdx-color-text-muted)}:where(.skdx-calendar__cell,.skdx-calendar__day){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);block-size:var(--skdx-item-height-md);color:var(--skdx-color-text-default);background:transparent;border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-sm);font-size:var(--skdx-font-size-sm);font-variant-numeric:tabular-nums;cursor:pointer}:where(.skdx-calendar__cell,.skdx-calendar__day):hover:not([data-disabled]){background-color:var(--skdx-color-surface-hover)}:where(.skdx-calendar__cell,.skdx-calendar__day)[data-today]{border-color:var(--skdx-color-border-accent);font-weight:var(--skdx-font-weight-semibold)}:where(.skdx-calendar__cell,.skdx-calendar__day)[data-state=selected]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-calendar__cell,.skdx-calendar__day)[data-range-middle]{background-color:var(--skdx-color-surface-selected);border-radius:0}:where(.skdx-calendar__cell,.skdx-calendar__day)[data-outside-month]{color:var(--skdx-color-text-muted)}:where(.skdx-calendar__cell,.skdx-calendar__day)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}@media(forced-colors:active){:where(.skdx-calendar__cell,.skdx-calendar__day)[data-state=selected]{background-color:Highlight;color:HighlightText}:where(.skdx-calendar__cell,.skdx-calendar__day)[data-today]{border-color:CanvasText}}:where(.skdx-calendar__grid-head){color:var(--skdx-color-text-muted);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium)}}
1
+ @import"../base.css";@layer skdx-components{:where(.skdx-calendar){display:inline-flex;flex-direction:column;gap:var(--skdx-space-2);padding:var(--skdx-space-3)}:where(.skdx-calendar__header){display:flex;align-items:center;justify-content:space-between;gap:var(--skdx-space-2)}:where(.skdx-calendar__heading){display:inline-flex;align-items:center;gap:var(--skdx-space-2);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-semibold);color:var(--skdx-color-text-default);background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}:where(.skdx-calendar__previous-button),:where(.skdx-calendar__next-button){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-space-2);min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);color:var(--skdx-color-text-muted);background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}:where(.skdx-calendar__heading):hover,:where(.skdx-calendar__previous-button):hover,:where(.skdx-calendar__next-button):hover{background-color:var(--skdx-color-surface-hover);color:var(--skdx-color-text-default)}:where(.skdx-calendar__grid){border-collapse:collapse}:where(.skdx-calendar):has(.skdx-calendar__grid~.skdx-calendar__grid){display:inline-grid;grid-auto-flow:column;align-items:start;gap:var(--skdx-space-2) var(--skdx-space-4)}:where(.skdx-calendar):has(.skdx-calendar__grid~.skdx-calendar__grid)>.skdx-calendar__header{grid-column:1 / -1;grid-row:1}:where(.skdx-calendar):has(.skdx-calendar__grid~.skdx-calendar__grid)>.skdx-calendar__heading{grid-row:2}:where(.skdx-calendar):has(.skdx-calendar__grid~.skdx-calendar__grid)>.skdx-calendar__grid{grid-row:3}:where(.skdx-calendar__row){display:flex;flex-wrap:nowrap}:where(.skdx-calendar__week-day){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium);color:var(--skdx-color-text-muted)}:where(.skdx-calendar__cell){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);block-size:var(--skdx-item-height-md);gap:var(--skdx-space-1);color:var(--skdx-color-text-default);background:transparent;border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-sm);font-size:var(--skdx-font-size-sm);font-variant-numeric:tabular-nums;cursor:pointer}:where(.skdx-calendar__cell)>svg{flex:none}:where(.skdx-calendar__cell):hover:not([data-disabled]){background-color:var(--skdx-color-surface-hover)}:where(.skdx-calendar__cell)[data-today]{border-color:var(--skdx-color-border-accent);font-weight:var(--skdx-font-weight-semibold)}:where(.skdx-calendar__cell)[data-state=selected]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-calendar__cell)[data-range-middle]{background-color:var(--skdx-color-surface-selected);border-radius:0}:where(.skdx-calendar__cell)[data-range-start]{border-start-end-radius:0;border-end-end-radius:0}:where(.skdx-calendar__cell)[data-range-end]{border-start-start-radius:0;border-end-start-radius:0}:where(.skdx-calendar__cell)[data-outside-month]{color:var(--skdx-color-text-muted)}:where(.skdx-calendar__cell)[data-unavailable]{text-decoration:line-through;text-decoration-thickness:var(--skdx-border-width-thick);cursor:not-allowed}:where(.skdx-calendar__cell)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}@media(forced-colors:active){:where(.skdx-calendar__cell)[data-state=selected]{background-color:Highlight;color:HighlightText}:where(.skdx-calendar__cell)[data-today]{border-color:CanvasText}:where(.skdx-calendar__cell)[data-range-middle]{background-color:Highlight;color:HighlightText}:where(.skdx-calendar__cell)[data-unavailable]{text-decoration-color:CanvasText}}:where(.skdx-calendar__month-grid,.skdx-calendar__year-grid){display:grid;grid-template-columns:repeat(4,1fr);gap:var(--skdx-space-1)}:where(.skdx-calendar__month-grid,.skdx-calendar__year-grid)>[role=rowgroup],:where(.skdx-calendar__month-grid,.skdx-calendar__year-grid)>*>[role=row]{display:contents}:where(.skdx-calendar__view-cell){display:inline-flex;align-items:center;justify-content:center;padding-block:var(--skdx-space-2);padding-inline:var(--skdx-space-1);color:var(--skdx-color-text-default);background:transparent;border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-sm);font-size:var(--skdx-font-size-sm);font-variant-numeric:tabular-nums;cursor:pointer}:where(.skdx-calendar__view-cell):hover:not([data-disabled]){background-color:var(--skdx-color-surface-hover)}:where(.skdx-calendar__view-cell)[data-today]{border-color:var(--skdx-color-border-accent);font-weight:var(--skdx-font-weight-semibold)}:where(.skdx-calendar__view-cell)[data-state=selected]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-calendar__view-cell)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}:where(.skdx-calendar__week-number,.skdx-calendar__week-number-header){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);color:var(--skdx-color-text-muted);font-size:var(--skdx-font-size-xs);font-variant-numeric:tabular-nums}:where(.skdx-calendar__grid-head){color:var(--skdx-color-text-muted);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium)}}
@@ -1 +1 @@
1
- @import"../base.css";@layer skdx-components{:where(.skdx-card){display:flex;flex-direction:column;background-color:var(--skdx-color-surface-raised);border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-lg);color:var(--skdx-color-text-default)}:where(.skdx-card)[data-elevated]{box-shadow:var(--skdx-shadow-md)}:where(.skdx-card)[data-interactive]{cursor:pointer;transition:border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-card)[data-interactive]:hover{border-color:var(--skdx-color-border-strong);background-color:var(--skdx-color-surface-hover)}:where(.skdx-card)[data-selected]{border-color:var(--skdx-color-border-accent);background-color:var(--skdx-color-surface-selected)}:where(.skdx-card__header){display:flex;flex-direction:column;gap:var(--skdx-space-2);padding:var(--skdx-space-4)}:where(.skdx-card__title){margin:0;font-size:var(--skdx-font-size-md);font-weight:var(--skdx-font-weight-semibold);line-height:var(--skdx-font-line-height-tight)}:where(.skdx-card__description){margin:0;font-size:var(--skdx-font-size-sm);color:var(--skdx-color-text-muted)}:where(.skdx-card__content){padding:var(--skdx-space-4);padding-block-start:0}:where(.skdx-card__footer){display:flex;align-items:center;gap:var(--skdx-space-2);padding:var(--skdx-space-4);padding-block-start:0}@media(forced-colors:active){:where(.skdx-card){border-color:CanvasText}}}
1
+ @import"../base.css";@layer skdx-components{:where(.skdx-card){display:flex;flex-direction:column;--skdx-card-padding: var(--skdx-space-4);--skdx-card-radius: var(--skdx-radius-lg);background-color:var(--skdx-color-surface-raised);border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-card-radius);color:var(--skdx-color-text-default)}:where(.skdx-card)[data-elevation=raised]{box-shadow:var(--skdx-shadow-md)}:where(.skdx-card)[data-interactive]{cursor:pointer;transition:border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-card)[data-interactive]:hover{border-color:var(--skdx-color-border-strong);background-color:var(--skdx-color-surface-hover)}:where(.skdx-card)[data-interactive]:focus-visible{border-color:var(--skdx-color-border-strong);background-color:var(--skdx-color-surface-hover)}:where(.skdx-card)[data-selected]{border-color:var(--skdx-color-border-accent);background-color:var(--skdx-color-surface-selected);box-shadow:inset 0 0 0 var(--skdx-border-width-thin) var(--skdx-color-border-accent)}:where(.skdx-card__media){overflow:hidden;border-start-start-radius:calc(var(--skdx-card-radius) - var(--skdx-border-width-thin));border-start-end-radius:calc(var(--skdx-card-radius) - var(--skdx-border-width-thin))}:where(.skdx-card__media)>:where(img,video,picture,canvas,svg){display:block;inline-size:100%;block-size:auto;object-fit:cover}:where(.skdx-card__header){display:flex;flex-direction:column;gap:var(--skdx-space-2);padding:var(--skdx-card-padding)}:where(.skdx-card__title){margin:0;font-size:var(--skdx-font-size-md);font-weight:var(--skdx-font-weight-semibold);line-height:var(--skdx-font-line-height-tight)}:where(.skdx-card__description){margin:0;font-size:var(--skdx-font-size-sm);color:var(--skdx-color-text-muted)}:where(.skdx-card__content){padding:var(--skdx-card-padding);padding-block-start:0}:where(.skdx-card__footer){display:flex;align-items:center;gap:var(--skdx-space-2);padding:var(--skdx-card-padding);padding-block-start:0}@media(forced-colors:active){:where(.skdx-card){border-color:CanvasText}:where(.skdx-card)[data-selected]{box-shadow:inset 0 0 0 var(--skdx-border-width-thin) Highlight;outline:var(--skdx-border-width-thin) solid Highlight}}}