@leftium/nimble.css 0.2.0 → 0.3.0

package/README.md

@@ -1,22 +1,20 @@
 # nimble.css
 
-A minimal class/classless CSS library. Drop it in and your semantic HTML looks good — no classes required. ~3.3 KB brotli (core).
+Minimal CSS library for great-looking default HTML styles; no classes required. ~3.4 KB brotli (core).
 
-- **Classless by default** — style every standard HTML element with zero markup changes
-- **Automatic dark mode** — via `prefers-color-scheme` and `light-dark()`
-- **OKLCH color system** — perceptually uniform, fully customizable via SCSS config
+- **Classless** — every standard HTML element elegantly styled without classes
+- **Dark mode** — included (automatic and manual)
 - **Cascade layers** — plays nicely alongside your own styles
-- **Tiny** — core is 15.4 KB minified, ~3.3 KB brotli; full bundle is 18.9 KB minified, ~4 KB brotli
+- **Tiny** — core is only ~3.4 KB brotli (15.9 KB minified)
 
 ## Demos
 
 - [HTML5 Test Page](https://leftium.github.io/nimble.css/demo/) — every standard HTML element
+- [Pico CSS-style Demo](https://leftium.github.io/nimble.css/demo/pico.html) — Pico CSS-inspired page with forms, buttons, article, tables, and more
 - [Extended Demo](https://leftium.github.io/nimble.css/demo/extended.html) — layouts, utilities, button variants, forms, dark mode toggle
 
 ## Quick Start
 
-### npm
-
 ```bash
 npm install @leftium/nimble.css
 ```
@@ -33,7 +31,8 @@ Then import in your CSS, JS, or framework:
 import '@leftium/nimble.css';
 ```
 
-### CDN
+<details>
+<summary>Or use CDN</summary>
 
 Via jsDelivr (npm):
 
@@ -41,19 +40,14 @@ Via jsDelivr (npm):
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble.min.css">
 ```
 
-Or via GitHub (latest on `main`):
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Leftium/nimble.css@main/dist/nimble.min.css">
-```
-
-That's it. Write semantic HTML and it just works.
+</details>
 
-### Bundles
+<details>
+<summary>For 3.4 KB core size</summary>
 
-`nimble.min.css` (18.9 KB) includes everything.
+`nimble.min.css` (19.4 KB) includes everything.
 
-To trim size, use `nimble-core.min.css` (15.4 KB) + only the add-ons you need:
+To trim size, use `nimble-core.min.css` (15.9 KB) + only the add-ons you need:
 
 | Add-on | Minified |
 |---|---|
@@ -87,11 +81,15 @@ For advanced use, `nimble-core` is composed of these non-overlapping layers:
 | Sub-bundle | Minified | Contents |
 |---|---|---|
 | `nimble-reset.min.css` | 1.8 KB | Modern CSS reset |
-| `nimble-base.min.css` | 3.4 KB | Colors + document + typography |
+| `nimble-base.min.css` | 3.8 KB | Colors + document + typography |
 | `nimble-utilities.min.css` | 572 B | Utility classes |
 
 </details>
 
+</details>
+
+That's it. Write semantic HTML and it just works.
+
 ## Utility Classes
 
 Content is centered at `720px` by default — no class needed. These opt-in utilities handle the rest. Disable all with `$enable-utilities: false`.
@@ -110,85 +108,104 @@ Content is centered at `720px` by default — no class needed. These opt-in util
 
 ### CSS Custom Properties
 
-Override any property at runtime — no build step needed:
+Override at runtime — no build step needed. Hover and focus states auto-derive from the base color via [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors).
 
 ```css
 :root {
-  --nc-primary: oklch(0.50 0.15 150);
-  --nc-radius: 0.5rem;
-  --nc-spacing: 1.25rem;
+  /* Surface hue (shared by backgrounds, text, border) */
+  --nc-surface-hue: 250;
+
+  /* Primary accent (links, buttons, focus rings) — hover/focus auto-derive */
+  --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
+  --nc-primary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
+
+  /* Secondary accent (reset buttons) — hover/focus auto-derive */
+  --nc-secondary: light-dark(oklch(0.45 0.05 250), oklch(0.6 0.05 250));
+  --nc-secondary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
+
+  /* Validation colors */
+  --nc-valid: light-dark(oklch(0.52 0.17 145), oklch(0.65 0.2 145));
+  --nc-invalid: light-dark(oklch(0.55 0.22 25), oklch(0.65 0.22 25));
+
+  /* Font stacks */
+  --nc-font-sans: system-ui, sans-serif;
+  --nc-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+  /* Layout */
+  --nc-spacing: 1rem;
+  --nc-radius: 0.25rem;
+  --nc-content-width: 720px;
 }
 ```
 
-| Property | Description |
-|---|---|
-| `--nc-surface-1` .. `--nc-surface-4` | Background hierarchy (page, card, input, overlay) |
-| `--nc-text` | Text color (adapts to light/dark mode) |
-| `--nc-border` | Default border color |
-| `--nc-primary` | Accent color (links, buttons, focus rings) |
-| `--nc-primary-hover` | Accent hover state |
-| `--nc-primary-focus` | Accent focus ring (semi-transparent) |
-| `--nc-primary-contrast` | Text on primary backgrounds |
-| `--nc-secondary` | Secondary accent (reset buttons) |
-| `--nc-secondary-hover` | Secondary hover state |
-| `--nc-secondary-focus` | Secondary focus ring |
-| `--nc-secondary-contrast` | Text on secondary backgrounds |
-| `--nc-valid` | Validation success color |
-| `--nc-invalid` | Validation error color |
-| `--nc-font-sans` | Body font stack |
-| `--nc-font-mono` | Code font stack |
-| `--nc-spacing` | Base spacing unit |
-| `--nc-radius` | Border radius |
-| `--nc-content-width` | Max content width |
-
-### SCSS
-
-For build-time customization, override any SCSS config variable:
+These properties are auto-derived and available for use in your own components (no need to set them):
+
+`--nc-surface-1` .. `--nc-surface-4`, `--nc-text`, `--nc-border`, `--nc-primary-hover`, `--nc-primary-focus`, `--nc-secondary-hover`, `--nc-secondary-focus`
+
+<details>
+<summary>SCSS (advanced)</summary>
+
+Build a CSS file with new defaults. SCSS-unique options listed first; the rest mirror CSS custom properties above.
 
 ```scss
 @use 'nimble' with (
-  $primary-hue: 150,
-  $primary-chroma: 0.15,
-  $radius: 0.5rem,
-  $content-width: 960px,
-  $enable-dialog: false,
+  // --- SCSS-only (no CSS custom property equivalent) ---
+
+  $prefix: '--nc-',        // CSS custom property prefix
+  $wide-width: 1200px,     // wide layout max-width (used in utilities)
+
+  // Feature flags (tree-shake unused components)
+  $enable-utilities: true,
+  $enable-dialog: true,
+  $enable-switch: true,
+  $enable-details: true,
+
+  // Surface fine-tuning
+  $surface-chroma: 0.002,
+  $surface-light-base: 0.985,     // light mode base lightness
+  $surface-dark-base: 0.170,      // dark mode base lightness
+  $surface-offsets: (2: 0.03, 3: 0.06, 4: 0.10),
+  $surface-dark-chroma-boost: 0.003,
+  $surface-dark-hue-shift: 10,
+
+  // --- Same as CSS custom properties above ---
+
+  $surface-hue: 250,
+
+  // Primary accent (hue, chroma, lightness → --nc-primary)
+  $primary-hue: 250,
+  $primary-chroma: 0.2,
+  $primary-lightness: 0.50,
+
+  // Secondary accent (hue, chroma, lightness → --nc-secondary)
+  $secondary-hue: 250,
+  $secondary-chroma: 0.05,
+  $secondary-lightness: 0.45,
+
+  // Font stacks
+  $font-sans: (system-ui, sans-serif),
+  $font-mono: (ui-monospace, monospace),
+
+  // Layout
+  $spacing: 1rem,
+  $radius: 0.25rem,
+  $content-width: 720px,
 );
 ```
 
-### Config Variables
-
-| Variable | Default | Description |
-|---|---|---|
-| `$prefix` | `'--nc-'` | CSS custom property prefix |
-| `$primary-hue` | `250` | Primary accent hue (OKLCH) |
-| `$primary-chroma` | `0.2` | Primary accent chroma |
-| `$primary-lightness` | `0.50` | Primary accent lightness |
-| `$secondary-hue` | `250` | Secondary accent hue |
-| `$secondary-chroma` | `0.05` | Secondary accent chroma |
-| `$secondary-lightness` | `0.45` | Secondary accent lightness |
-| `$surface-hue` | `250` | Background surface hue |
-| `$font-sans` | `system-ui, sans-serif` | Body font stack |
-| `$font-mono` | `ui-monospace, ...` | Code font stack |
-| `$spacing` | `1rem` | Base spacing unit |
-| `$radius` | `0.25rem` | Border radius |
-| `$content-width` | `720px` | Max content width |
-| `$wide-width` | `1200px` | Wide layout max-width |
-| `$enable-utilities` | `true` | Include utility classes |
-| `$enable-dialog` | `true` | Include dialog styles |
-| `$enable-switch` | `true` | Include switch toggle |
-| `$enable-details` | `true` | Include details/summary |
+</details>
 
 ## Design Lineage
 
 nimble.css combines [Open Props](https://open-props.style/)'s design token philosophy with [PicoCSS](https://picocss.com/)'s classless aesthetics. Key concepts borrowed from Open Props:
 
-- **Surface hierarchy** (`surface-1` through `surface-4`) — layered backgrounds for page, card, input, and overlay contexts. Defined in `_colors.scss` from OKLCH parameters rather than imported at runtime.
+- **Surface hierarchy** (`surface-1` through `surface-4`) — layered backgrounds for page, card, input, and overlay contexts, all derived from a single `--nc-surface-hue`.
 - **Text color** (`text`) — single text color variable; muted text derived inline via `color-mix()`.
-- **OKLCH color space** — perceptually uniform color system. Change `$primary-hue` and the entire palette regenerates consistently.
+- **OKLCH color space** — perceptually uniform color system. Change `--nc-primary` and hover/focus states regenerate automatically via [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors).
 - **Curated scale values** — `$spacing: 1rem` (~Open Props `size-3`) and `$radius: 0.25rem` (~Open Props `radius-2`) are sourced from Open Props' scales.
 - **Minimal DevTools pollution** — ~20 semantic custom properties on `:root` plus scoped `--_` internals per component, rather than dumping hundreds of variables globally.
 
-The key architectural difference: nimble.css is self-contained SCSS with no runtime dependency on Open Props. Token values are baked in at compile time, and the SCSS parametric layer (change one hue, regenerate everything) goes beyond what pure CSS custom properties can offer.
+The key architectural difference: nimble.css is self-contained SCSS with no runtime dependency on Open Props. Color derivatives (hover, focus, surfaces) are expressed as native CSS relative colors and `calc()`, so runtime theming works without a build step.
 
 ## Building from Source
 

package/dist/nimble-base.css

@@ -2,19 +2,20 @@
 @layer nimble.base {
   :root {
     color-scheme: light dark;
-    --nc-surface-1: light-dark(oklch(0.985 0.002 250), oklch(0.17 0.005 260));
-    --nc-surface-2: light-dark(oklch(0.955 0.002 250), oklch(0.2 0.005 260));
-    --nc-surface-3: light-dark(oklch(0.925 0.002 250), oklch(0.23 0.005 260));
-    --nc-surface-4: light-dark(oklch(0.885 0.002 250), oklch(0.27 0.005 260));
-    --nc-text: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
-    --nc-border: light-dark(oklch(0.83 0.005 250), oklch(0.28 0.005 260));
+    --nc-surface-hue: 250;
+    --nc-surface-1: light-dark(oklch(0.985 0.002 var(--nc-surface-hue)), oklch(0.17 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-2: light-dark(oklch(0.955 0.002 var(--nc-surface-hue)), oklch(0.2 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-3: light-dark(oklch(0.925 0.002 var(--nc-surface-hue)), oklch(0.23 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-4: light-dark(oklch(0.885 0.002 var(--nc-surface-hue)), oklch(0.27 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-text: light-dark(oklch(0.28 0.005 var(--nc-surface-hue)), oklch(0.86 0.005 var(--nc-surface-hue)));
+    --nc-border: light-dark(oklch(0.83 0.005 var(--nc-surface-hue)), oklch(0.28 0.005 calc(var(--nc-surface-hue) + 10)));
     --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
-    --nc-primary-hover: light-dark(oklch(0.4 0.2 250), oklch(0.7 0.2 250));
-    --nc-primary-focus: oklch(0.5 0.2 250 / 0.4);
+    --nc-primary-hover: light-dark(oklch(from var(--nc-primary) calc(l - 0.1) c h), oklch(from var(--nc-primary) calc(l + 0.1) c h));
+    --nc-primary-focus: oklch(from var(--nc-primary) l c h / 0.4);
     --nc-primary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
     --nc-secondary: light-dark(oklch(0.45 0.05 250), oklch(0.6 0.05 250));
-    --nc-secondary-hover: light-dark(oklch(0.35 0.05 250), oklch(0.7 0.05 250));
-    --nc-secondary-focus: oklch(0.45 0.05 250 / 0.3);
+    --nc-secondary-hover: light-dark(oklch(from var(--nc-secondary) calc(l - 0.1) c h), oklch(from var(--nc-secondary) calc(l + 0.1) c h));
+    --nc-secondary-focus: oklch(from var(--nc-secondary) l c h / 0.3);
     --nc-secondary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
     --nc-valid: light-dark(oklch(0.52 0.17 145), oklch(0.65 0.2 145));
     --nc-invalid: light-dark(oklch(0.55 0.22 25), oklch(0.65 0.22 25));
@@ -48,6 +49,10 @@
     grid-column: 2;
     min-width: 0;
   }
+  body > [style*="display: contents"] > * {
+    grid-column: 2;
+    min-width: 0;
+  }
   ::selection {
     background-color: var(--nc-primary-focus);
     color: var(--nc-text);

package/dist/nimble-base.min.css

@@ -1 +1 @@
-@layer nimble.reset;@layer nimble.base{:root{color-scheme:light dark;--nc-surface-1:light-dark(oklch(98.5% .002 250),oklch(17% .005 260));--nc-surface-2:light-dark(oklch(95.5% .002 250),oklch(20% .005 260));--nc-surface-3:light-dark(oklch(92.5% .002 250),oklch(23% .005 260));--nc-surface-4:light-dark(oklch(88.5% .002 250),oklch(27% .005 260));--nc-text:light-dark(oklch(28% .005 250),oklch(86% .005 250));--nc-border:light-dark(oklch(83% .005 250),oklch(28% .005 260));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(40% .2 250),oklch(70% .2 250));--nc-primary-focus:oklch(50% .2 250/.4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(35% .05 250),oklch(70% .05 250));--nc-secondary-focus:oklch(45% .05 250/.3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*{grid-column:2;min-width:0}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}
+@layer nimble.reset;@layer nimble.base{:root{color-scheme:light dark;--nc-surface-hue:250;--nc-surface-1:light-dark(oklch(.985 .002 var(--nc-surface-hue)),oklch(.17 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-2:light-dark(oklch(.955 .002 var(--nc-surface-hue)),oklch(.2 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-3:light-dark(oklch(.925 .002 var(--nc-surface-hue)),oklch(.23 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-4:light-dark(oklch(.885 .002 var(--nc-surface-hue)),oklch(.27 .005 calc(var(--nc-surface-hue) + 10)));--nc-text:light-dark(oklch(.28 .005 var(--nc-surface-hue)),oklch(.86 .005 var(--nc-surface-hue)));--nc-border:light-dark(oklch(.83 .005 var(--nc-surface-hue)),oklch(.28 .005 calc(var(--nc-surface-hue) + 10)));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(from var(--nc-primary) calc(l - .1) c h),oklch(from var(--nc-primary) calc(l + .1) c h));--nc-primary-focus:oklch(from var(--nc-primary) l c h / .4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(from var(--nc-secondary) calc(l - .1) c h),oklch(from var(--nc-secondary) calc(l + .1) c h));--nc-secondary-focus:oklch(from var(--nc-secondary) l c h / .3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*,body>[style*="display: contents"]>*{grid-column:2;min-width:0}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}

package/dist/nimble-core.css

@@ -123,19 +123,20 @@
 @layer nimble.base {
   :root {
     color-scheme: light dark;
-    --nc-surface-1: light-dark(oklch(0.985 0.002 250), oklch(0.17 0.005 260));
-    --nc-surface-2: light-dark(oklch(0.955 0.002 250), oklch(0.2 0.005 260));
-    --nc-surface-3: light-dark(oklch(0.925 0.002 250), oklch(0.23 0.005 260));
-    --nc-surface-4: light-dark(oklch(0.885 0.002 250), oklch(0.27 0.005 260));
-    --nc-text: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
-    --nc-border: light-dark(oklch(0.83 0.005 250), oklch(0.28 0.005 260));
+    --nc-surface-hue: 250;
+    --nc-surface-1: light-dark(oklch(0.985 0.002 var(--nc-surface-hue)), oklch(0.17 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-2: light-dark(oklch(0.955 0.002 var(--nc-surface-hue)), oklch(0.2 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-3: light-dark(oklch(0.925 0.002 var(--nc-surface-hue)), oklch(0.23 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-4: light-dark(oklch(0.885 0.002 var(--nc-surface-hue)), oklch(0.27 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-text: light-dark(oklch(0.28 0.005 var(--nc-surface-hue)), oklch(0.86 0.005 var(--nc-surface-hue)));
+    --nc-border: light-dark(oklch(0.83 0.005 var(--nc-surface-hue)), oklch(0.28 0.005 calc(var(--nc-surface-hue) + 10)));
     --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
-    --nc-primary-hover: light-dark(oklch(0.4 0.2 250), oklch(0.7 0.2 250));
-    --nc-primary-focus: oklch(0.5 0.2 250 / 0.4);
+    --nc-primary-hover: light-dark(oklch(from var(--nc-primary) calc(l - 0.1) c h), oklch(from var(--nc-primary) calc(l + 0.1) c h));
+    --nc-primary-focus: oklch(from var(--nc-primary) l c h / 0.4);
     --nc-primary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
     --nc-secondary: light-dark(oklch(0.45 0.05 250), oklch(0.6 0.05 250));
-    --nc-secondary-hover: light-dark(oklch(0.35 0.05 250), oklch(0.7 0.05 250));
-    --nc-secondary-focus: oklch(0.45 0.05 250 / 0.3);
+    --nc-secondary-hover: light-dark(oklch(from var(--nc-secondary) calc(l - 0.1) c h), oklch(from var(--nc-secondary) calc(l + 0.1) c h));
+    --nc-secondary-focus: oklch(from var(--nc-secondary) l c h / 0.3);
     --nc-secondary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
     --nc-valid: light-dark(oklch(0.52 0.17 145), oklch(0.65 0.2 145));
     --nc-invalid: light-dark(oklch(0.55 0.22 25), oklch(0.65 0.22 25));
@@ -169,6 +170,10 @@
     grid-column: 2;
     min-width: 0;
   }
+  body > [style*="display: contents"] > * {
+    grid-column: 2;
+    min-width: 0;
+  }
   ::selection {
     background-color: var(--nc-primary-focus);
     color: var(--nc-text);
@@ -327,6 +332,18 @@
     box-shadow: 0 0 0 2px var(--nc-primary-focus);
     outline: none;
   }
+  :where([type=reset]) {
+    background-color: var(--nc-secondary);
+    border-color: var(--nc-secondary);
+    color: var(--nc-secondary-contrast);
+  }
+  :where([type=reset]):hover {
+    background-color: var(--nc-secondary-hover);
+    border-color: var(--nc-secondary-hover);
+  }
+  :where([type=reset]):focus-visible {
+    box-shadow: 0 0 0 2px var(--nc-secondary-focus);
+  }
   :where(button, [type=submit], [type=reset], [type=button], [role=button]).inline {
     --_btn-padding-v: 0.05em;
     --_btn-padding-h: 0.4em;
@@ -407,23 +424,31 @@
   }
 }
 @layer nimble.utilities {
-  .secondary {
+  .secondary:not(a:not([role=button])) {
     background-color: var(--nc-secondary);
     border-color: var(--nc-secondary);
     color: var(--nc-secondary-contrast);
   }
-  .secondary:hover {
+  .secondary:not(a:not([role=button])):hover {
     background-color: var(--nc-secondary-hover);
     border-color: var(--nc-secondary-hover);
   }
-  .secondary:focus-visible {
+  .secondary:not(a:not([role=button])):focus-visible {
     box-shadow: 0 0 0 2px var(--nc-secondary-focus);
   }
-  .outline {
+  a:not([role=button]).secondary {
+    color: var(--nc-secondary);
+    text-decoration-color: color-mix(in oklch, var(--nc-secondary), transparent 50%);
+  }
+  a:not([role=button]).secondary:hover {
+    color: var(--nc-secondary-hover);
+    text-decoration-color: var(--nc-secondary-hover);
+  }
+  .outline:not(a:not([role=button])) {
     background-color: transparent;
     color: var(--nc-primary);
   }
-  .outline:hover {
+  .outline:not(a:not([role=button])):hover {
     background-color: var(--nc-primary-focus);
     color: var(--nc-primary-hover);
     border-color: var(--nc-primary-hover);
@@ -479,6 +504,9 @@
   :where(label:has(+ input, + select, + textarea)) {
     font-weight: 600;
   }
+  :where(label:has(+ [type=file], + [type=range])) {
+    margin-bottom: 0.5em;
+  }
   :where(fieldset) {
     border: 1px solid var(--nc-border);
     border-radius: var(--nc-radius);
@@ -500,14 +528,19 @@
     display: flex;
     align-items: center;
     gap: 0.35em;
-    margin-bottom: var(--nc-spacing);
+    margin-bottom: 0.5em;
+  }
+  :where(label:has([type=checkbox], [type=radio]):last-child) {
+    margin-bottom: 0;
   }
-  :where(label:has([type=radio])) {
-    margin-bottom: 0.35em;
+  :where([type=search]) {
+    border-radius: 5rem;
+    padding-inline: 1.25em;
   }
   :where([type=range]) {
     accent-color: var(--nc-primary);
     width: 100%;
+    margin-bottom: var(--nc-spacing);
   }
   :where(input[list]) {
     width: auto;
@@ -517,6 +550,7 @@
     font: inherit;
     cursor: pointer;
     max-width: 100%;
+    margin-bottom: var(--nc-spacing);
   }
   :where([type=file])::file-selector-button {
     padding: 0.5em 1em;
@@ -540,6 +574,7 @@
   }
   :where([type=color]) {
     --_color-size: calc(1em * 1.5 + 1em + 2px);
+    margin-bottom: var(--nc-spacing);
     --_color-pad: 0.25em;
     height: var(--_color-size);
     width: calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad));
@@ -557,7 +592,7 @@
     border-radius: calc(var(--nc-radius) * 0.5);
   }
   :where(label:has([type=checkbox][role=switch])) {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.5em;
   }
@@ -658,12 +693,54 @@
     margin-top: 0.5em;
   }
 }
+@layer nimble.base {
+  :where(article) {
+    background-color: var(--nc-surface-1);
+    border: 1px solid var(--nc-border);
+    border-radius: var(--nc-radius);
+    padding: var(--nc-spacing);
+    margin-bottom: var(--nc-spacing);
+  }
+  :where(article > header),
+  :where(article > footer) {
+    background-color: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
+    padding: var(--nc-spacing);
+  }
+  :where(article > header) {
+    margin: calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1) var(--nc-spacing);
+    border-bottom: 1px solid var(--nc-border);
+    border-radius: var(--nc-radius) var(--nc-radius) 0 0;
+  }
+  :where(article > footer) {
+    margin: var(--nc-spacing) calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1);
+    border-top: 1px solid var(--nc-border);
+    border-radius: 0 0 var(--nc-radius) var(--nc-radius);
+  }
+  :where(article) > :last-child:not(footer) {
+    margin-bottom: 0;
+  }
+  :where(article > header, article > footer) > :last-child {
+    margin-bottom: 0;
+  }
+  :where(article > header, article > footer) > h1,
+  :where(article > header, article > footer) > h2,
+  :where(article > header, article > footer) > h3,
+  :where(article > header, article > footer) > h4,
+  :where(article > header, article > footer) > h5,
+  :where(article > header, article > footer) > h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
 @layer nimble.base {
   :where(details) {
     border: 1px solid var(--nc-border);
     border-radius: var(--nc-radius);
     padding: 0 1em;
   }
+  :where(details) {
+    margin-bottom: 0.5em;
+  }
   :where(summary) {
     cursor: pointer;
     font-weight: 600;

package/dist/nimble-core.min.css

@@ -1 +1 @@
-@layer nimble.reset{:where(:not(progress)),:where(),:where(){box-sizing:border-box;background-repeat:no-repeat}:where(html){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}:where(body){margin:0}:where(h1){margin-block:.67em;font-size:2em}:where(hr){height:0;color:inherit}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(pre){font-family:monospace;font-size:1em}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(sub,sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(iframe){border-style:none}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}:where(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;overflow:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(){-webkit-appearance:none}:where(),:where(){height:auto}:where(){-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(a,area,button,input,label,select,summary,textarea,[tabindex]){touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where([aria-busy=true]){cursor:progress}:where([aria-disabled=true],[disabled]){cursor:not-allowed}@media (prefers-reduced-motion:reduce){:where(*),:where(),:where(){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer nimble.base{:root{color-scheme:light dark;--nc-surface-1:light-dark(oklch(98.5% .002 250),oklch(17% .005 260));--nc-surface-2:light-dark(oklch(95.5% .002 250),oklch(20% .005 260));--nc-surface-3:light-dark(oklch(92.5% .002 250),oklch(23% .005 260));--nc-surface-4:light-dark(oklch(88.5% .002 250),oklch(27% .005 260));--nc-text:light-dark(oklch(28% .005 250),oklch(86% .005 250));--nc-border:light-dark(oklch(83% .005 250),oklch(28% .005 260));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(40% .2 250),oklch(70% .2 250));--nc-primary-focus:oklch(50% .2 250/.4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(35% .05 250),oklch(70% .05 250));--nc-secondary-focus:oklch(45% .05 250/.3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*{grid-column:2;min-width:0}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}:where(a:not([role=button])){color:var(--nc-primary);text-underline-offset:.15em;text-decoration:underline;-webkit-text-decoration-color:color-mix(in oklch, var(--nc-primary), transparent 50%);text-decoration-color:color-mix(in oklch, var(--nc-primary), transparent 50%);transition:color .2s,text-decoration-color .2s}:where(a:not([role=button])):visited{color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310));-webkit-text-decoration-color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310) 30%);text-decoration-color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310) 30%)}:where(a:not([role=button])):hover{color:var(--nc-primary-hover);-webkit-text-decoration-color:var(--nc-primary-hover);text-decoration-color:var(--nc-primary-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button]){--_btn-padding-v:.5em;--_btn-padding-h:1em;padding:var(--_btn-padding-v) var(--_btn-padding-h);background-color:var(--nc-primary);color:var(--nc-primary-contrast);border:1px solid var(--nc-primary);border-radius:var(--nc-radius);font:inherit;cursor:pointer;text-align:center;margin:0 .25em .25em 0;font-size:1rem;line-height:1.5;text-decoration:none;transition:background-color .2s,border-color .2s;display:inline-block}:where(button,[type=submit],[type=reset],[type=button],[role=button]):hover{background-color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button]):focus-visible{box-shadow:0 0 0 2px var(--nc-primary-focus);outline:none}:where(button,[type=submit],[type=reset],[type=button],[role=button]).inline{--_btn-padding-v:.05em;--_btn-padding-h:.4em;vertical-align:baseline;margin:.1em .15em;font-size:.875em}:where(button,[type=submit],[type=reset],[type=button],[role=button]):disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:where([role=group]){margin-bottom:var(--nc-spacing);display:inline-flex}[role=group]>*{border-radius:0;margin:0;position:relative}[role=group]>*+*{--_divider:""}[role=group]>*+:before{content:var(--_divider);inset-inline-start:0;pointer-events:none;background:#ffffff4d;width:1px;position:absolute;top:20%;bottom:20%}[role=group]>:not(.secondary):not(.outline)+.secondary,[role=group]>.secondary+:not(.secondary):not(.outline),[role=group]>:not(.secondary):not(.outline)+.outline,[role=group]>.outline+:not(.secondary):not(.outline),[role=group]>.secondary+.outline,[role=group]>.outline+.secondary,[role=group]>input+*,[role=group]>select+*{--_divider:none}[role=group]>:first-child{border-start-start-radius:var(--nc-radius);border-end-start-radius:var(--nc-radius)}[role=group]>:last-child{border-start-end-radius:var(--nc-radius);border-end-end-radius:var(--nc-radius)}[role=group]:has(.outline):not(:has(>:not(.outline))){border:1px solid var(--nc-primary);border-radius:var(--nc-radius)}[role=group]:has(.outline):not(:has(>:not(.outline)))>.outline{border:none}[role=group]>.outline+.outline:before{background:var(--nc-primary)}[role=search] [role=group]>:first-child{border-start-start-radius:5rem;border-end-start-radius:5rem;padding-inline-start:1.25em}[role=search] [role=group]>:last-child{border-start-end-radius:5rem;border-end-end-radius:5rem;padding-inline-end:1.25em}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset]),select,textarea){--_input-bg:color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);background-color:var(--_input-bg);border:1px solid var(--nc-border);border-radius:var(--nc-radius);min-height:calc(2.5em + 2px);color:var(--nc-text);font:inherit;padding:.5em .75em;font-size:1rem;transition:border-color .2s,box-shadow .2s}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=date],[type=month],[type=week],[type=time],[type=datetime-local]),select,textarea){width:100%;margin-bottom:var(--nc-spacing)}:where(input,select,textarea):focus-visible{border-color:var(--nc-primary);box-shadow:0 0 0 2px var(--nc-primary-focus);outline:none}:where(input,select,textarea)+:where(small){margin-top:calc(var(--nc-spacing) * -.75);margin-bottom:var(--nc-spacing);color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.875em;display:block}:where(input,select,textarea)[aria-invalid=false]{border-color:var(--nc-valid)}:where(input,select,textarea)[aria-invalid=true]{border-color:var(--nc-invalid)}:where(input,select,textarea)[aria-invalid=false]+:where(small){color:var(--nc-valid)}:where(input,select,textarea)[aria-invalid=true]+:where(small){color:var(--nc-invalid)}:where(label){margin-bottom:.25em;display:block}:where(label:has(+input,+select,+textarea)){font-weight:600}:where(fieldset){border:1px solid var(--nc-border);border-radius:var(--nc-radius);padding:var(--nc-spacing);min-width:0;max-width:100%}:where(legend){padding-inline:.25em;font-weight:600}:where([type=checkbox],[type=radio]){accent-color:var(--nc-primary);width:1.125em;height:1.125em;margin:0}:where(label:has([type=checkbox],[type=radio])){margin-bottom:var(--nc-spacing);align-items:center;gap:.35em;display:flex}:where(label:has([type=radio])){margin-bottom:.35em}:where([type=range]){accent-color:var(--nc-primary);width:100%}:where(input[list]){width:auto}:where([type=file]){color:var(--nc-text);font:inherit;cursor:pointer;max-width:100%}:where([type=file])::file-selector-button{margin-right:.75em;background-color:var(--nc-primary);color:var(--nc-primary-contrast);border:1px solid var(--nc-primary);border-radius:var(--nc-radius);font:inherit;cursor:pointer;margin-inline-end:.75em;padding:.5em 1em;transition:background-color .2s,border-color .2s}:where([type=file])::file-selector-button:hover{background-color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}:where([type=date],[type=month],[type=week],[type=time],[type=datetime-local]){min-width:10em;margin-bottom:var(--nc-spacing)}:where([type=color]){--_color-size:calc(1em * 1.5 + 1em + 2px);--_color-pad:.25em;height:var(--_color-size);width:calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad));padding:var(--_color-pad);background-color:color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);border:1px solid var(--nc-border);border-radius:var(--nc-radius);cursor:pointer}:where([type=color])::-webkit-color-swatch-wrapper{padding:0}:where([type=color])::-webkit-color-swatch{border-radius:calc(var(--nc-radius) * .5);border:none}:where(label:has([type=checkbox][role=switch])){align-items:center;gap:.5em;display:inline-flex}:where([type=checkbox][role=switch]){appearance:none;background-color:var(--nc-border);cursor:pointer;border-radius:1em;flex-shrink:0;width:2.5em;height:1.25em;margin:0;transition:background-color .2s;position:relative}:where([type=checkbox][role=switch]):before{content:"";background-color:#fff;border-radius:50%;width:calc(1.25em - 4px);height:calc(1.25em - 4px);transition:transform .2s;position:absolute;top:2px;left:2px}:where([type=checkbox][role=switch]):checked{background-color:var(--nc-primary)}:where([type=checkbox][role=switch]):checked:before{transform:translate(1.25em)}:where(table){border-collapse:collapse;width:100%}:where(th,td){border-bottom:1px solid color-mix(in oklch, var(--nc-border), transparent 40%);text-align:start;padding:.5em .75em}:where(thead th,thead td){background-color:var(--nc-surface-2);text-wrap:balance;border-bottom-width:2px;font-weight:600}:where(figure:has(table)){overflow-x:auto}:where(code,kbd,samp){font-family:var(--nc-font-mono);background-color:var(--nc-surface-2);border-radius:var(--nc-radius);padding:.15em .35em;font-size:.875em}:where(pre){background-color:var(--nc-surface-2);border-radius:var(--nc-radius);padding:var(--nc-spacing);overflow-x:auto}:where(pre code){font-size:inherit;background:0 0;padding:0}:where(kbd){border:1px solid var(--nc-border);border-bottom-width:2px}:where(img,video,canvas,svg){max-width:100%;height:auto}:where(figure){margin:0}:where(figcaption){color:color-mix(in oklch, var(--nc-text), transparent 40%);margin-top:.5em;font-size:.9em}:where(details){border:1px solid var(--nc-border);border-radius:var(--nc-radius);padding:0 1em}:where(summary){cursor:pointer;margin:0 -1em;padding:.75em 1em;font-weight:600;list-style-type:"▶ "}:where(details[open]>summary){list-style-type:"▼ "}:where(details[open]){padding-bottom:.75em}details :last-child{margin-bottom:0}:where(dialog){background-color:var(--nc-surface-4);border:1px solid var(--nc-border);border-radius:var(--nc-radius);max-width:min(90vw,40rem);padding:var(--nc-spacing)}dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;animation:.2s nc-backdrop-in}@keyframes nc-backdrop-in{0%{opacity:0}}}@layer nimble.utilities{.secondary{background-color:var(--nc-secondary);border-color:var(--nc-secondary);color:var(--nc-secondary-contrast)}.secondary:hover{background-color:var(--nc-secondary-hover);border-color:var(--nc-secondary-hover)}.secondary:focus-visible{box-shadow:0 0 0 2px var(--nc-secondary-focus)}.outline{color:var(--nc-primary);background-color:#0000}.outline:hover{background-color:var(--nc-primary-focus);color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}.container{max-width:var(--nc-content-width);padding-inline:var(--nc-spacing);margin-inline:auto}.fluid{max-width:none;padding-inline:var(--nc-spacing);display:block}.full-bleed{grid-column:1/-1}.wide{width:100%;max-width:1200px;padding-inline:var(--nc-spacing);grid-column:1/-1;margin-inline:auto}.striped :where(tbody tr:nth-child(2n)){background-color:var(--nc-surface-2)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.overflow-auto{overflow:auto}}[type=date],[type=month],[type=week],[type=time],[type=datetime-local]{appearance:none}@supports selector(details::details-content){details::details-content{transition:opacity .3s ease, content-visibility .3s ease allow-discrete;opacity:0}details[open]::details-content{opacity:1}@supports (interpolate-size:allow-keywords){details{interpolate-size:allow-keywords}details::details-content{transition:height .3s ease, opacity .3s ease, content-visibility .3s ease allow-discrete;height:0;overflow:clip}details[open]::details-content{height:auto}}}@media print{body{color:#000;background:#fff}a[href]:after{content:" (" attr(href) ")";color:#555;font-size:.85em}a[href^=\#]:after,a[href^=javascript\:]:after{content:none}pre,blockquote{page-break-inside:avoid}h2,h3,h4{page-break-after:avoid}img{max-width:100%!important}@page{margin:2cm}}
+@layer nimble.reset{:where(:not(progress)),:where(),:where(){box-sizing:border-box;background-repeat:no-repeat}:where(html){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}:where(body){margin:0}:where(h1){margin-block:.67em;font-size:2em}:where(hr){height:0;color:inherit}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(pre){font-family:monospace;font-size:1em}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(sub,sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(iframe){border-style:none}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}:where(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;overflow:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(){-webkit-appearance:none}:where(),:where(){height:auto}:where(){-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(a,area,button,input,label,select,summary,textarea,[tabindex]){touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where([aria-busy=true]){cursor:progress}:where([aria-disabled=true],[disabled]){cursor:not-allowed}@media (prefers-reduced-motion:reduce){:where(*),:where(),:where(){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer nimble.base{:root{color-scheme:light dark;--nc-surface-hue:250;--nc-surface-1:light-dark(oklch(.985 .002 var(--nc-surface-hue)),oklch(.17 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-2:light-dark(oklch(.955 .002 var(--nc-surface-hue)),oklch(.2 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-3:light-dark(oklch(.925 .002 var(--nc-surface-hue)),oklch(.23 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-4:light-dark(oklch(.885 .002 var(--nc-surface-hue)),oklch(.27 .005 calc(var(--nc-surface-hue) + 10)));--nc-text:light-dark(oklch(.28 .005 var(--nc-surface-hue)),oklch(.86 .005 var(--nc-surface-hue)));--nc-border:light-dark(oklch(.83 .005 var(--nc-surface-hue)),oklch(.28 .005 calc(var(--nc-surface-hue) + 10)));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(from var(--nc-primary) calc(l - .1) c h),oklch(from var(--nc-primary) calc(l + .1) c h));--nc-primary-focus:oklch(from var(--nc-primary) l c h / .4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(from var(--nc-secondary) calc(l - .1) c h),oklch(from var(--nc-secondary) calc(l + .1) c h));--nc-secondary-focus:oklch(from var(--nc-secondary) l c h / .3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*,body>[style*="display: contents"]>*{grid-column:2;min-width:0}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}:where(a:not([role=button])){color:var(--nc-primary);text-underline-offset:.15em;text-decoration:underline;-webkit-text-decoration-color:color-mix(in oklch, var(--nc-primary), transparent 50%);text-decoration-color:color-mix(in oklch, var(--nc-primary), transparent 50%);transition:color .2s,text-decoration-color .2s}:where(a:not([role=button])):visited{color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310));-webkit-text-decoration-color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310) 30%);text-decoration-color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310) 30%)}:where(a:not([role=button])):hover{color:var(--nc-primary-hover);-webkit-text-decoration-color:var(--nc-primary-hover);text-decoration-color:var(--nc-primary-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button]){--_btn-padding-v:.5em;--_btn-padding-h:1em;padding:var(--_btn-padding-v) var(--_btn-padding-h);background-color:var(--nc-primary);color:var(--nc-primary-contrast);border:1px solid var(--nc-primary);border-radius:var(--nc-radius);font:inherit;cursor:pointer;text-align:center;margin:0 .25em .25em 0;font-size:1rem;line-height:1.5;text-decoration:none;transition:background-color .2s,border-color .2s;display:inline-block}:where(button,[type=submit],[type=reset],[type=button],[role=button]):hover{background-color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button]):focus-visible{box-shadow:0 0 0 2px var(--nc-primary-focus);outline:none}:where([type=reset]){background-color:var(--nc-secondary);border-color:var(--nc-secondary);color:var(--nc-secondary-contrast)}:where([type=reset]):hover{background-color:var(--nc-secondary-hover);border-color:var(--nc-secondary-hover)}:where([type=reset]):focus-visible{box-shadow:0 0 0 2px var(--nc-secondary-focus)}:where(button,[type=submit],[type=reset],[type=button],[role=button]).inline{--_btn-padding-v:.05em;--_btn-padding-h:.4em;vertical-align:baseline;margin:.1em .15em;font-size:.875em}:where(button,[type=submit],[type=reset],[type=button],[role=button]):disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:where([role=group]){margin-bottom:var(--nc-spacing);display:inline-flex}[role=group]>*{border-radius:0;margin:0;position:relative}[role=group]>*+*{--_divider:""}[role=group]>*+:before{content:var(--_divider);inset-inline-start:0;pointer-events:none;background:#ffffff4d;width:1px;position:absolute;top:20%;bottom:20%}[role=group]>:not(.secondary):not(.outline)+.secondary,[role=group]>.secondary+:not(.secondary):not(.outline),[role=group]>:not(.secondary):not(.outline)+.outline,[role=group]>.outline+:not(.secondary):not(.outline),[role=group]>.secondary+.outline,[role=group]>.outline+.secondary,[role=group]>input+*,[role=group]>select+*{--_divider:none}[role=group]>:first-child{border-start-start-radius:var(--nc-radius);border-end-start-radius:var(--nc-radius)}[role=group]>:last-child{border-start-end-radius:var(--nc-radius);border-end-end-radius:var(--nc-radius)}[role=group]:has(.outline):not(:has(>:not(.outline))){border:1px solid var(--nc-primary);border-radius:var(--nc-radius)}[role=group]:has(.outline):not(:has(>:not(.outline)))>.outline{border:none}[role=group]>.outline+.outline:before{background:var(--nc-primary)}[role=search] [role=group]>:first-child{border-start-start-radius:5rem;border-end-start-radius:5rem;padding-inline-start:1.25em}[role=search] [role=group]>:last-child{border-start-end-radius:5rem;border-end-end-radius:5rem;padding-inline-end:1.25em}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset]),select,textarea){--_input-bg:color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);background-color:var(--_input-bg);border:1px solid var(--nc-border);border-radius:var(--nc-radius);min-height:calc(2.5em + 2px);color:var(--nc-text);font:inherit;padding:.5em .75em;font-size:1rem;transition:border-color .2s,box-shadow .2s}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=date],[type=month],[type=week],[type=time],[type=datetime-local]),select,textarea){width:100%;margin-bottom:var(--nc-spacing)}:where(input,select,textarea):focus-visible{border-color:var(--nc-primary);box-shadow:0 0 0 2px var(--nc-primary-focus);outline:none}:where(input,select,textarea)+:where(small){margin-top:calc(var(--nc-spacing) * -.75);margin-bottom:var(--nc-spacing);color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.875em;display:block}:where(input,select,textarea)[aria-invalid=false]{border-color:var(--nc-valid)}:where(input,select,textarea)[aria-invalid=true]{border-color:var(--nc-invalid)}:where(input,select,textarea)[aria-invalid=false]+:where(small){color:var(--nc-valid)}:where(input,select,textarea)[aria-invalid=true]+:where(small){color:var(--nc-invalid)}:where(label){margin-bottom:.25em;display:block}:where(label:has(+input,+select,+textarea)){font-weight:600}:where(label:has(+[type=file],+[type=range])){margin-bottom:.5em}:where(fieldset){border:1px solid var(--nc-border);border-radius:var(--nc-radius);padding:var(--nc-spacing);min-width:0;max-width:100%}:where(legend){padding-inline:.25em;font-weight:600}:where([type=checkbox],[type=radio]){accent-color:var(--nc-primary);width:1.125em;height:1.125em;margin:0}:where(label:has([type=checkbox],[type=radio])){align-items:center;gap:.35em;margin-bottom:.5em;display:flex}:where(label:has([type=checkbox],[type=radio]):last-child){margin-bottom:0}:where([type=search]){border-radius:5rem;padding-inline:1.25em}:where([type=range]){accent-color:var(--nc-primary);width:100%;margin-bottom:var(--nc-spacing)}:where(input[list]){width:auto}:where([type=file]){color:var(--nc-text);font:inherit;cursor:pointer;max-width:100%;margin-bottom:var(--nc-spacing)}:where([type=file])::file-selector-button{margin-right:.75em;background-color:var(--nc-primary);color:var(--nc-primary-contrast);border:1px solid var(--nc-primary);border-radius:var(--nc-radius);font:inherit;cursor:pointer;margin-inline-end:.75em;padding:.5em 1em;transition:background-color .2s,border-color .2s}:where([type=file])::file-selector-button:hover{background-color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}:where([type=date],[type=month],[type=week],[type=time],[type=datetime-local]){min-width:10em;margin-bottom:var(--nc-spacing)}:where([type=color]){--_color-size:calc(1em * 1.5 + 1em + 2px);margin-bottom:var(--nc-spacing);--_color-pad:.25em;height:var(--_color-size);width:calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad));padding:var(--_color-pad);background-color:color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);border:1px solid var(--nc-border);border-radius:var(--nc-radius);cursor:pointer}:where([type=color])::-webkit-color-swatch-wrapper{padding:0}:where([type=color])::-webkit-color-swatch{border-radius:calc(var(--nc-radius) * .5);border:none}:where(label:has([type=checkbox][role=switch])){align-items:center;gap:.5em;display:flex}:where([type=checkbox][role=switch]){appearance:none;background-color:var(--nc-border);cursor:pointer;border-radius:1em;flex-shrink:0;width:2.5em;height:1.25em;margin:0;transition:background-color .2s;position:relative}:where([type=checkbox][role=switch]):before{content:"";background-color:#fff;border-radius:50%;width:calc(1.25em - 4px);height:calc(1.25em - 4px);transition:transform .2s;position:absolute;top:2px;left:2px}:where([type=checkbox][role=switch]):checked{background-color:var(--nc-primary)}:where([type=checkbox][role=switch]):checked:before{transform:translate(1.25em)}:where(table){border-collapse:collapse;width:100%}:where(th,td){border-bottom:1px solid color-mix(in oklch, var(--nc-border), transparent 40%);text-align:start;padding:.5em .75em}:where(thead th,thead td){background-color:var(--nc-surface-2);text-wrap:balance;border-bottom-width:2px;font-weight:600}:where(figure:has(table)){overflow-x:auto}:where(code,kbd,samp){font-family:var(--nc-font-mono);background-color:var(--nc-surface-2);border-radius:var(--nc-radius);padding:.15em .35em;font-size:.875em}:where(pre){background-color:var(--nc-surface-2);border-radius:var(--nc-radius);padding:var(--nc-spacing);overflow-x:auto}:where(pre code){font-size:inherit;background:0 0;padding:0}:where(kbd){border:1px solid var(--nc-border);border-bottom-width:2px}:where(img,video,canvas,svg){max-width:100%;height:auto}:where(figure){margin:0}:where(figcaption){color:color-mix(in oklch, var(--nc-text), transparent 40%);margin-top:.5em;font-size:.9em}:where(article){background-color:var(--nc-surface-1);border:1px solid var(--nc-border);border-radius:var(--nc-radius);padding:var(--nc-spacing);margin-bottom:var(--nc-spacing)}:where(article>header),:where(article>footer){background-color:color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);padding:var(--nc-spacing)}:where(article>header){margin:calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1) var(--nc-spacing);border-bottom:1px solid var(--nc-border);border-radius:var(--nc-radius) var(--nc-radius) 0 0}:where(article>footer){margin:var(--nc-spacing) calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1);border-top:1px solid var(--nc-border);border-radius:0 0 var(--nc-radius) var(--nc-radius)}:where(article)>:last-child:not(footer),:where(article>header,article>footer)>:last-child{margin-bottom:0}:where(article>header,article>footer)>h1,:where(article>header,article>footer)>h2,:where(article>header,article>footer)>h3,:where(article>header,article>footer)>h4,:where(article>header,article>footer)>h5,:where(article>header,article>footer)>h6{margin-top:0;margin-bottom:0}:where(details){border:1px solid var(--nc-border);border-radius:var(--nc-radius);margin-bottom:.5em;padding:0 1em}:where(summary){cursor:pointer;margin:0 -1em;padding:.75em 1em;font-weight:600;list-style-type:"▶ "}:where(details[open]>summary){list-style-type:"▼ "}:where(details[open]){padding-bottom:.75em}details :last-child{margin-bottom:0}:where(dialog){background-color:var(--nc-surface-4);border:1px solid var(--nc-border);border-radius:var(--nc-radius);max-width:min(90vw,40rem);padding:var(--nc-spacing)}dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;animation:.2s nc-backdrop-in}@keyframes nc-backdrop-in{0%{opacity:0}}}@layer nimble.utilities{.secondary:not(a:not([role=button])){background-color:var(--nc-secondary);border-color:var(--nc-secondary);color:var(--nc-secondary-contrast)}.secondary:not(a:not([role=button])):hover{background-color:var(--nc-secondary-hover);border-color:var(--nc-secondary-hover)}.secondary:not(a:not([role=button])):focus-visible{box-shadow:0 0 0 2px var(--nc-secondary-focus)}a:not([role=button]).secondary{color:var(--nc-secondary);-webkit-text-decoration-color:color-mix(in oklch, var(--nc-secondary), transparent 50%);text-decoration-color:color-mix(in oklch, var(--nc-secondary), transparent 50%)}a:not([role=button]).secondary:hover{color:var(--nc-secondary-hover);-webkit-text-decoration-color:var(--nc-secondary-hover);text-decoration-color:var(--nc-secondary-hover)}.outline:not(a:not([role=button])){color:var(--nc-primary);background-color:#0000}.outline:not(a:not([role=button])):hover{background-color:var(--nc-primary-focus);color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}.container{max-width:var(--nc-content-width);padding-inline:var(--nc-spacing);margin-inline:auto}.fluid{max-width:none;padding-inline:var(--nc-spacing);display:block}.full-bleed{grid-column:1/-1}.wide{width:100%;max-width:1200px;padding-inline:var(--nc-spacing);grid-column:1/-1;margin-inline:auto}.striped :where(tbody tr:nth-child(2n)){background-color:var(--nc-surface-2)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.overflow-auto{overflow:auto}}[type=date],[type=month],[type=week],[type=time],[type=datetime-local]{appearance:none}@supports selector(details::details-content){details::details-content{transition:opacity .3s ease, content-visibility .3s ease allow-discrete;opacity:0}details[open]::details-content{opacity:1}@supports (interpolate-size:allow-keywords){details{interpolate-size:allow-keywords}details::details-content{transition:height .3s ease, opacity .3s ease, content-visibility .3s ease allow-discrete;height:0;overflow:clip}details[open]::details-content{height:auto}}}@media print{body{color:#000;background:#fff}a[href]:after{content:" (" attr(href) ")";color:#555;font-size:.85em}a[href^=\#]:after,a[href^=javascript\:]:after{content:none}pre,blockquote{page-break-inside:avoid}h2,h3,h4{page-break-after:avoid}img{max-width:100%!important}@page{margin:2cm}}

package/dist/nimble-select.css

@@ -13,6 +13,9 @@
       rotate: 180deg;
     }
     :where(select)::picker(select) {
+      position-area: block-end;
+      position-try-order: normal;
+      position-try-fallbacks: flip-block;
       border: 1px solid var(--nc-border);
       border-radius: var(--nc-radius);
       background-color: var(--nc-surface-1);

package/dist/nimble-select.min.css

@@ -1 +1 @@
-@layer nimble.reset;@layer nimble.base{@supports (appearance:base-select){:where(select){appearance:base-select}:where(select)::picker(select){appearance:base-select}:where(select)::picker-icon{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6'/%3E%3C/svg%3E");transition:rotate .4s}:where(select):open::picker-icon{rotate:180deg}:where(select)::picker(select){border:1px solid var(--nc-border);border-radius:var(--nc-radius);background-color:var(--nc-surface-1);opacity:0;transition:opacity .2s, overlay .2s allow-discrete, display .2s allow-discrete;padding:.25em}:where(select):open::picker(select){opacity:1}@starting-style{:where(select):open::picker(select){opacity:0}}:where(select) option{border-radius:var(--nc-radius);padding:.5em .75em;transition:background-color .15s}:where(select) option:hover{background-color:var(--nc-surface-2)}:where(select) option:checked{font-weight:600}}}
+@layer nimble.reset;@layer nimble.base{@supports (appearance:base-select){:where(select){appearance:base-select}:where(select)::picker(select){appearance:base-select}:where(select)::picker-icon{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6'/%3E%3C/svg%3E");transition:rotate .4s}:where(select):open::picker-icon{rotate:180deg}:where(select)::picker(select){position-area:block-end;position-try-order:normal;position-try-fallbacks:flip-block;border:1px solid var(--nc-border);border-radius:var(--nc-radius);background-color:var(--nc-surface-1);opacity:0;transition:opacity .2s, overlay .2s allow-discrete, display .2s allow-discrete;padding:.25em}:where(select):open::picker(select){opacity:1}@starting-style{:where(select):open::picker(select){opacity:0}}:where(select) option{border-radius:var(--nc-radius);padding:.5em .75em;transition:background-color .15s}:where(select) option:hover{background-color:var(--nc-surface-2)}:where(select) option:checked{font-weight:600}}}