defuss-shadcn 0.8.2 → 0.8.3

package/dist/components/button-group/button-group.css

@@ -10,13 +10,17 @@
       margin-inline-start: -1px;
     }
 
-    /* Remove internal radii for connected appearance */
-    & > .btn:not(:first-child):not(:has(+ [role="separator"])) {
+    /* Remove internal radii for connected appearance. The orientation gate is
+       :where()-wrapped so these INLINE-corner rules only ever apply to
+       horizontal groups; ungated they also squared vertical buttons' corners
+       at a higher specificity than the vertical block below, leaving "Top"
+       with a rounded top-left but a square top-right (issue #13). */
+    &:where(:not([data-orientation="vertical"])) > .btn:not(:first-child):not(:has(+ [role="separator"])) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
 
-    & > .btn:not(:last-child):not([role="separator"] + .btn) {
+    &:where(:not([data-orientation="vertical"])) > .btn:not(:last-child):not([role="separator"] + .btn) {
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
@@ -61,26 +65,21 @@
         margin-top: -1px;
       }
 
+      /* Square exactly the BLOCK corners that touch a neighbour — a
+         non-first button squares its top edge, a non-last its bottom
+         edge; the base .btn radius keeps every outer corner rounded on
+         both sides. No per-corner "restore" overrides: the last block's
+         restores re-rounded a corner the previous block had just
+         squared, which (together with the ungated horizontal rules)
+         produced the asymmetric Top/Middle corners of issue #13. */
       & > .btn:not(:first-child) {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
-        border-end-start-radius: var(--radius-md);
       }
 
       & > .btn:not(:last-child) {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
-        border-start-end-radius: var(--radius-md);
-      }
-
-      & > .btn:first-child {
-        border-start-start-radius: var(--radius-md);
-        border-start-end-radius: var(--radius-md);
-      }
-
-      & > .btn:last-child {
-        border-end-start-radius: var(--radius-md);
-        border-end-end-radius: var(--radius-md);
       }
 
       & > [role="separator"] {

package/dist/components/label/component-skill.md

@@ -10,6 +10,9 @@ supportedStates: default
 
 ## Native basis
 `<label>` element. Browser provides built-in click-to-focus association with form controls.
+The association is the `for`↔`id` pairing: the label's `for` and the control's `id`
+must be the exact same string — click-to-focus and the accessible name both exist
+only because of it.
 
 ---
 
@@ -25,6 +28,7 @@ supportedStates: default
 
 ### Basic
 ```html
+<!-- for and id are one value in two places — keep them identical -->
 <label class="label" for="email">Email</label>
 <input class="input" id="email" type="email">
 ```
@@ -91,7 +95,8 @@ The label auto-dims when the adjacent control is disabled — no `data-disabled`
 |-----------|------|-------|
 | `for` | Always | Matches the `id` of the associated form control |
 
-- Clicking the label focuses the associated input — this is native `<label>` behavior.
+- **One value, written twice:** the label's `for` and the control's `id` must be the exact same string. A mismatch fails silently — the label renders and styles normally but no longer focuses the field or names it for assistive technology. When renaming a control's `id`, update every `for` that pointed at it.
+- Clicking the label focuses the associated input — native `<label>` behavior, and the practical proof the pairing is intact.
 - The required indicator `*` uses `aria-hidden="true"` since the `required` attribute on the input already conveys the requirement to assistive technology.
 - Do not use `<label>` without a `for` attribute or a nested input.
 - In `forced-colors` mode, label text maps to system `LinkText` color.

package/dist/components/select/component-skill.md

@@ -22,10 +22,12 @@ supportedStates: default
 ## Structure
 
 ### Basic
+The empty-value placeholder stays selectable (no `disabled`) so it doubles as
+the clear/reset entry — re-choosing it empties the box again.
 ```html
 <label class="label" for="fruit">Fruit</label>
 <select class="select" id="fruit">
-  <option value="" disabled selected>Select a fruit</option>
+  <option value="" selected>Select a fruit</option>
   <option value="apple">Apple</option>
   <option value="banana">Banana</option>
   <option value="cherry">Cherry</option>
@@ -52,7 +54,11 @@ supportedStates: default
 
 - Native `<select>` provides full keyboard navigation (arrow keys, type-ahead).
 - Use `<label>` with `for` for description.
-- Use `disabled` on `<option>` elements for placeholder text.
+- The placeholder is `<option value="" selected>` **without** `disabled`: a
+  disabled placeholder can't be re-selected, so a made selection could never be
+  cleared. Keep it selectable and add `required` to the `<select>` when an empty
+  value must not submit — native validation then blocks submission while the
+  placeholder is still the selection.
 
 ---
 
@@ -73,5 +79,8 @@ Set `data-size` on the `.select` trigger button.
 ## Notes
 
 - Uses `appearance: none` with a custom chevron via `background-image` SVG.
+- While the empty option is selected, the closed control renders in
+  `--muted-foreground` (`:has(> option[value=""]:checked)`) so it reads as a
+  placeholder; a real value restores `--foreground`.
 - The dropdown list is rendered by the browser — it cannot be styled.
 - For a fully custom dropdown, use the Combobox component instead.

package/dist/components/select/select.css

@@ -23,6 +23,16 @@
     background-position: right 0.5rem center;
     background-size: 1rem;
 
+    /* Placeholder = the empty-value option. It stays selectable (no
+       `disabled`) so it doubles as the clear/reset entry — choosing it
+       again empties the box (issue #32). While it is the selection the
+       closed control reads as a placeholder; a real value restores
+       --foreground because the base rule's color wins over this one.
+       option:checked matches the *selected* option in every engine. */
+    &:has(> option[value=""]:checked) {
+      color: var(--muted-foreground);
+    }
+
     &:focus {
       border-color: var(--ring);
       box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);

package/dist/components/toggle-group/toggle-group.css

@@ -55,29 +55,33 @@
       flex-direction: column;
     }
 
-    /* -- Connected borders: merge adjacent toggle radii --------- */
-    & > .toggle:not(:first-child) {
+    /* -- Connected borders: merge adjacent toggle radii ---------
+       Square only the corners that actually touch a neighbour:
+       inline corners horizontally, block corners vertically. The
+       orientation attribute is wrapped in :where() so every rule
+       keeps one-class-plus-one-pseudo specificity — the later
+       [data-spacing] radius restore must still win the tie.
+       (The previous per-corner "restore" overrides let the
+       :not(:last-child) block re-round a middle item's top-right
+       corner — issue #12.) */
+    &:where(:not([data-orientation="vertical"])) > .toggle:not(:first-child) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
 
-    & > .toggle:not(:last-child) {
+    &:where(:not([data-orientation="vertical"])) > .toggle:not(:last-child) {
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="vertical"] {
-      & > .toggle:not(:first-child) {
-        border-start-start-radius: 0;
-        border-start-end-radius: 0;
-        border-end-start-radius: var(--radius-md);
-      }
+    &:where([data-orientation="vertical"]) > .toggle:not(:first-child) {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
 
-      & > .toggle:not(:last-child) {
-        border-end-start-radius: 0;
-        border-end-end-radius: 0;
-        border-start-end-radius: var(--radius-md);
-      }
+    &:where([data-orientation="vertical"]) > .toggle:not(:last-child) {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
     }
 
     /* -- Spacing: adds gap and restores individual radii --------- */

package/dist/documentation/button-group.html

@@ -322,13 +322,17 @@
       margin-inline-start: -1px;
     }
 
-    /* Remove internal radii for connected appearance */
-    & > .btn:not(:first-child):not(:has(+ [role="separator"])) {
+    /* Remove internal radii for connected appearance. The orientation gate is
+       :where()-wrapped so these INLINE-corner rules only ever apply to
+       horizontal groups; ungated they also squared vertical buttons' corners
+       at a higher specificity than the vertical block below, leaving "Top"
+       with a rounded top-left but a square top-right (issue #13). */
+    &:where(:not([data-orientation="vertical"])) > .btn:not(:first-child):not(:has(+ [role="separator"])) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
 
-    & > .btn:not(:last-child):not([role="separator"] + .btn) {
+    &:where(:not([data-orientation="vertical"])) > .btn:not(:last-child):not([role="separator"] + .btn) {
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
@@ -373,26 +377,21 @@
         margin-top: -1px;
       }
 
+      /* Square exactly the BLOCK corners that touch a neighbour — a
+         non-first button squares its top edge, a non-last its bottom
+         edge; the base .btn radius keeps every outer corner rounded on
+         both sides. No per-corner "restore" overrides: the last block's
+         restores re-rounded a corner the previous block had just
+         squared, which (together with the ungated horizontal rules)
+         produced the asymmetric Top/Middle corners of issue #13. */
       & > .btn:not(:first-child) {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
-        border-end-start-radius: var(--radius-md);
       }
 
       & > .btn:not(:last-child) {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
-        border-start-end-radius: var(--radius-md);
-      }
-
-      & > .btn:first-child {
-        border-start-start-radius: var(--radius-md);
-        border-start-end-radius: var(--radius-md);
-      }
-
-      & > .btn:last-child {
-        border-end-start-radius: var(--radius-md);
-        border-end-end-radius: var(--radius-md);
       }
 
       & > [role="separator"] {

package/dist/documentation/changelog.html

@@ -109,6 +109,20 @@
 
   <!-- CHANGELOG_ENTRIES -->
 
+  <div style="margin-bottom:2.5rem;">
+    <div class="flex items-center gap-3 mb-2">
+      <h2 style="font-family:var(--font-display);font-size:1.375rem;font-weight:400;letter-spacing:-0.02em;margin:0;">v0.8.3</h2>
+      <span class="badge" data-variant="outline" style="font-family:var(--font-mono);">September 08, 2026</span> <code class="changelog-hash">ba23256</code>
+    </div>
+    <ul style="margin:0;padding-left:1.25rem;" class="text-sm text-muted-foreground flex flex-col gap-1">
+      <li>fix(button-group): vertical group had asymmetric corners — Top rounded left, square right (issue #13)</li>
+      <li>fix(select): placeholder option must stay selectable so a selection can be cleared (issue #32)</li>
+      <li>docs(label): state the for↔id equality contract (issue #17)</li>
+      <li>fix(toggle-group): middle item of a vertical group had a rounded top-right corner (issue #12)</li>
+      <li>chore(purge-cdn): purge the complete dist payload, not just components+theme</li>
+    </ul>
+  </div>
+
   <div style="margin-bottom:2.5rem;">
     <div class="flex items-center gap-3 mb-2">
       <h2 style="font-family:var(--font-display);font-size:1.375rem;font-weight:400;letter-spacing:-0.02em;margin:0;">v0.8.2</h2>

package/dist/documentation/js/layout.js

@@ -14,7 +14,7 @@
     // "version consistency" gate fails if it (or any other version literal in
     // this file) drifts from package.json — the footer once froze an old number
     // forever because it was a second, un-synchronised literal.
-    var SITE_VERSION = 'v0.8.2';
+    var SITE_VERSION = 'v0.8.3';
     /* -- Wide mode (must run before first paint, like dark mode) ---
        Strips the content max-width so wide layouts (the marketing blocks)
        render at full width. Persisted per-origin, same key discipline as

package/dist/documentation/js/search-index.js

@@ -5,4 +5,4 @@
 // doc-site data, not a shipped component contract (AGENTS.md "No window globals").
 globalThis._defussShadcn = globalThis._defussShadcn || {};
 globalThis._defussShadcn.docs = globalThis._defussShadcn.docs || {};
-globalThis._defussShadcn.docs.searchIndex = [{"t":"Introduction","h":"index.html","s":"Overview"},{"t":"Built on five layers.","h":"index.html#toc-built-on-five-layers","s":"Introduction"},{"t":"Installation","h":"installation.html","s":"Overview"},{"t":"Quick start","h":"installation.html#toc-quick-start","s":"Installation"},{"t":"Pinning a version","h":"installation.html#toc-pinning-a-version","s":"Installation"},{"t":"Self-hosting","h":"installation.html#toc-self-hosting","s":"Installation"},{"t":"Component folder structure","h":"installation.html#toc-component-folder-structure","s":"Installation"},{"t":"Theming","h":"theming.html","s":"Overview"},{"t":"Surface / Foreground pairs","h":"theming.html#toc-surface-foreground-pairs","s":"Theming"},{"t":"Utility tokens","h":"theming.html#toc-utility-tokens","s":"Theming"},{"t":"Radius scale","h":"theming.html#toc-radius-scale","s":"Theming"},{"t":"Sidebar tokens","h":"theming.html#toc-sidebar-tokens","s":"Theming"},{"t":"Chart tokens","h":"theming.html#toc-chart-tokens","s":"Theming"},{"t":"Typography tokens","h":"theming.html#toc-typography-tokens","s":"Theming"},{"t":"Shadow scale","h":"theming.html#toc-shadow-scale","s":"Theming"},{"t":"Spacing & Tracking","h":"theming.html#toc-spacing-tracking","s":"Theming"},{"t":"Customization","h":"theming.html#toc-customization","s":"Theming"},{"t":"Dark mode","h":"theming.html#toc-dark-mode","s":"Theming"},{"t":"Dark Mode","h":"dark-mode.html","s":"Overview"},{"t":"How it works","h":"dark-mode.html#toc-how-it-works","s":"Dark Mode"},{"t":"Token pairs","h":"dark-mode.html#toc-token-pairs","s":"Dark Mode"},{"t":"Color scheme declaration","h":"dark-mode.html#toc-color-scheme-declaration","s":"Dark Mode"},{"t":"System preference detection","h":"dark-mode.html#toc-system-preference-detection","s":"Dark Mode"},{"t":"Persistence","h":"dark-mode.html#toc-persistence","s":"Dark Mode"},{"t":"Adding a toggle button","h":"dark-mode.html#toc-adding-a-toggle-button","s":"Dark Mode"},{"t":"Custom themes","h":"dark-mode.html#toc-custom-themes","s":"Dark Mode"},{"t":"Data Attribute API","h":"data-attribute-api.html","s":"Overview"},{"t":"Props → Data Attributes","h":"data-attribute-api.html#toc-props-data-attributes","s":"Data Attribute API"},{"t":"How it works","h":"data-attribute-api.html#toc-how-it-works","s":"Data Attribute API"},{"t":"Why data attributes instead of modifier classes?","h":"data-attribute-api.html#toc-why-data-attributes-instead-of-modifier-classes","s":"Data Attribute API"},{"t":"Styling attributes","h":"data-attribute-api.html#toc-styling-attributes","s":"Data Attribute API"},{"t":"Behavioral attributes","h":"data-attribute-api.html#toc-behavioral-attributes","s":"Data Attribute API"},{"t":"State attributes","h":"data-attribute-api.html#toc-state-attributes","s":"Data Attribute API"},{"t":"ARIA attributes as styling hooks","h":"data-attribute-api.html#toc-aria-attributes-as-styling-hooks","s":"Data Attribute API"},{"t":"The pattern at a glance","h":"data-attribute-api.html#toc-the-pattern-at-a-glance","s":"Data Attribute API"},{"t":"Architecture","h":"architecture.html","s":"Overview"},{"t":"1. AGENTS.md — the philosophy/instruction layer","h":"architecture.html#toc-1-agents-md-the-philosophy-instruction-layer","s":"Architecture"},{"t":"2. The deterministic verifier — an authority layer","h":"architecture.html#toc-2-the-deterministic-verifier-an-authority-layer","s":"Architecture"},{"t":"3. AGENTS.md defers: verifier output is authoritative","h":"architecture.html#toc-3-agents-md-defers-verifier-output-is-authoritative","s":"Architecture"},{"t":"4. The surrounding gates — suppressing hallucination, AI slop and overstating claims","h":"architecture.html#toc-4-the-surrounding-gates-suppressing-hallucination-ai-slop-and-overstating-claims","s":"Architecture"},{"t":"The proof loop","h":"architecture.html#toc-the-proof-loop","s":"Architecture"},{"t":"5. Human expert final review before release","h":"architecture.html#toc-5-human-expert-final-review-before-release","s":"Architecture"},{"t":"Cascade Layers","h":"cascade-layers.html","s":"Overview"},{"t":"What is @layer?","h":"cascade-layers.html#toc-what-is-layer","s":"Cascade Layers"},{"t":"How defuss-shadcn uses it","h":"cascade-layers.html#toc-how-defuss-shadcn-uses-it","s":"Cascade Layers"},{"t":"The cascade order","h":"cascade-layers.html#toc-the-cascade-order","s":"Cascade Layers"},{"t":"Overriding component styles","h":"cascade-layers.html#toc-overriding-component-styles","s":"Cascade Layers"},{"t":"Using with other CSS frameworks","h":"cascade-layers.html#toc-using-with-other-css-frameworks","s":"Cascade Layers"},{"t":"Why not just write unlayered CSS?","h":"cascade-layers.html#toc-why-not-just-write-unlayered-css","s":"Cascade Layers"},{"t":"Why not @scope or Web Components?","h":"cascade-layers.html#toc-why-not-scope-or-web-components","s":"Cascade Layers"},{"t":"Browser support","h":"cascade-layers.html#toc-browser-support","s":"Cascade Layers"},{"t":"ES Modules","h":"es-modules.html","s":"Overview"},{"t":"What is type=\"module\"?","h":"es-modules.html#toc-what-is-type-module","s":"ES Modules"},{"t":"No import, no export","h":"es-modules.html#toc-no-import-no-export","s":"ES Modules"},{"t":"Static pages vs. SPAs","h":"es-modules.html#toc-static-pages-vs-spas","s":"ES Modules"},{"t":"Which components need JS?","h":"es-modules.html#toc-which-components-need-js","s":"ES Modules"},{"t":"Serving locally","h":"es-modules.html#toc-serving-locally","s":"ES Modules"},{"t":"Browser support","h":"es-modules.html#toc-browser-support","s":"ES Modules"},{"t":"Native Web APIs","h":"native-web-apis.html","s":"Overview"},{"t":"The native-first principle","h":"native-web-apis.html#toc-the-native-first-principle","s":"Native Web APIs"},{"t":"API reference","h":"native-web-apis.html#toc-api-reference","s":"Native Web APIs"},{"t":"Animations","h":"animations.html","s":"Overview"},{"t":"The challenge","h":"animations.html#toc-the-challenge","s":"Animations"},{"t":"@starting-style","h":"animations.html#toc-starting-style","s":"Animations"},{"t":"allow-discrete transitions","h":"animations.html#toc-allow-discrete-transitions","s":"Animations"},{"t":"Popover & dialog animation pattern","h":"animations.html#toc-popover-dialog-animation-pattern","s":"Animations"},{"t":"Dialog & sheet animations","h":"animations.html#toc-dialog-sheet-animations","s":"Animations"},{"t":"Accordion animations","h":"animations.html#toc-accordion-animations","s":"Animations"},{"t":"Programmatic exit animations","h":"animations.html#toc-programmatic-exit-animations","s":"Animations"},{"t":"Animation summary","h":"animations.html#toc-animation-summary","s":"Animations"},{"t":"Accessibility","h":"accessibility.html","s":"Overview"},{"t":"Semantic HTML first","h":"accessibility.html#toc-semantic-html-first","s":"Accessibility"},{"t":"ARIA roles","h":"accessibility.html#toc-aria-roles","s":"Accessibility"},{"t":"State attributes","h":"accessibility.html#toc-state-attributes","s":"Accessibility"},{"t":"Relationship attributes","h":"accessibility.html#toc-relationship-attributes","s":"Accessibility"},{"t":"Keyboard navigation","h":"accessibility.html#toc-keyboard-navigation","s":"Accessibility"},{"t":"Roving tabindex","h":"accessibility.html#toc-roving-tabindex","s":"Accessibility"},{"t":"Focus management","h":"accessibility.html#toc-focus-management","s":"Accessibility"},{"t":"Live regions","h":"accessibility.html#toc-live-regions","s":"Accessibility"},{"t":"Screen reader considerations","h":"accessibility.html#toc-screen-reader-considerations","s":"Accessibility"},{"t":"Component Skills","h":"component-skills.html","s":"Overview"},{"t":"What is a component skill?","h":"component-skills.html#toc-what-is-a-component-skill","s":"Component Skills"},{"t":"The SKILL.md index","h":"component-skills.html#toc-the-skill-md-index","s":"Component Skills"},{"t":"Skill file structure","h":"component-skills.html#toc-skill-file-structure","s":"Component Skills"},{"t":"Example: Badge skill file","h":"component-skills.html#toc-example-badge-skill-file","s":"Component Skills"},{"t":"Using skills with AI assistants","h":"component-skills.html#toc-using-skills-with-ai-assistants","s":"Component Skills"},{"t":"Using skills as a human reference","h":"component-skills.html#toc-using-skills-as-a-human-reference","s":"Component Skills"},{"t":"Available skills","h":"component-skills.html#toc-available-skills","s":"Component Skills"},{"t":"Changelog","h":"changelog.html","s":"Overview"},{"t":"v0.8.2","h":"changelog.html#toc-v0-8-2","s":"Changelog"},{"t":"v0.8.1","h":"changelog.html#toc-v0-8-1","s":"Changelog"},{"t":"v0.8.0","h":"changelog.html#toc-v0-8-0","s":"Changelog"},{"t":"v0.7.19","h":"changelog.html#toc-v0-7-19","s":"Changelog"},{"t":"v0.7.18","h":"changelog.html#toc-v0-7-18","s":"Changelog"},{"t":"v0.7.17","h":"changelog.html#toc-v0-7-17","s":"Changelog"},{"t":"v0.7.16","h":"changelog.html#toc-v0-7-16","s":"Changelog"},{"t":"v0.7.15","h":"changelog.html#toc-v0-7-15","s":"Changelog"},{"t":"v0.7.14","h":"changelog.html#toc-v0-7-14","s":"Changelog"},{"t":"v0.7.13-alpha","h":"changelog.html#toc-v0-7-13-alpha","s":"Changelog"},{"t":"v0.7.12-alpha","h":"changelog.html#toc-v0-7-12-alpha","s":"Changelog"},{"t":"v0.7.11-alpha","h":"changelog.html#toc-v0-7-11-alpha","s":"Changelog"},{"t":"v0.7.10-alpha","h":"changelog.html#toc-v0-7-10-alpha","s":"Changelog"},{"t":"v0.7.9-alpha","h":"changelog.html#toc-v0-7-9-alpha","s":"Changelog"},{"t":"v0.7.8-alpha","h":"changelog.html#toc-v0-7-8-alpha","s":"Changelog"},{"t":"v0.7.7-alpha","h":"changelog.html#toc-v0-7-7-alpha","s":"Changelog"},{"t":"v0.7.6-alpha","h":"changelog.html#toc-v0-7-6-alpha","s":"Changelog"},{"t":"v0.7.5-alpha","h":"changelog.html#toc-v0-7-5-alpha","s":"Changelog"},{"t":"v0.7.4-alpha","h":"changelog.html#toc-v0-7-4-alpha","s":"Changelog"},{"t":"v0.7.3-alpha","h":"changelog.html#toc-v0-7-3-alpha","s":"Changelog"},{"t":"v0.7.2-alpha","h":"changelog.html#toc-v0-7-2-alpha","s":"Changelog"},{"t":"v0.7.1-alpha","h":"changelog.html#toc-v0-7-1-alpha","s":"Changelog"},{"t":"v0.7.0-alpha","h":"changelog.html#toc-v0-7-0-alpha","s":"Changelog"},{"t":"v0.6.0-alpha","h":"changelog.html#toc-v0-6-0-alpha","s":"Changelog"},{"t":"v0.5.0-alpha","h":"changelog.html#toc-v0-5-0-alpha","s":"Changelog"},{"t":"v0.4.0-alpha","h":"changelog.html#toc-v0-4-0-alpha","s":"Changelog"},{"t":"v0.3.0","h":"changelog.html#toc-v0-3-0","s":"Changelog"},{"t":"v0.2.1","h":"changelog.html#toc-v0-2-1","s":"Changelog"},{"t":"v0.2.0","h":"changelog.html#toc-v0-2-0","s":"Changelog"},{"t":"Typography","h":"typography.html","s":"Primitives"},{"t":"h2 — The People of the Kingdom","h":"typography.html#toc-h2-the-people-of-the-kingdom","s":"Typography"},{"t":"The King's Plan","h":"typography.html#toc-the-king-s-plan","s":"Typography"},{"t":"CSS view file","h":"typography.html#toc-css-view-file","s":"Typography"},{"t":"Separator","h":"separator.html","s":"Primitives"},{"t":"CSS view file","h":"separator.html#toc-css-view-file","s":"Separator"},{"t":"Icon","h":"icon.html","s":"Primitives"},{"t":"CSS view file","h":"icon.html#toc-css-view-file","s":"Icon"},{"t":"Button","h":"button.html","s":"Actions"},{"t":"CSS view file","h":"button.html#toc-css-view-file","s":"Button"},{"t":"Toggle","h":"toggle.html","s":"Actions"},{"t":"States","h":"toggle.html#toc-states","s":"Toggle"},{"t":"CSS view file","h":"toggle.html#toc-css-view-file","s":"Toggle"},{"t":"JavaScript view file","h":"toggle.html#toc-javascript-view-file","s":"Toggle"},{"t":"Toggle Group","h":"toggle-group.html","s":"Actions"},{"t":"States","h":"toggle-group.html#toc-states","s":"Toggle Group"},{"t":"CSS view file","h":"toggle-group.html#toc-css-view-file","s":"Toggle Group"},{"t":"JavaScript view file","h":"toggle-group.html#toc-javascript-view-file","s":"Toggle Group"},{"t":"Button Group","h":"button-group.html","s":"Actions"},{"t":"CSS view file","h":"button-group.html#toc-css-view-file","s":"Button Group"},{"t":"Toolbar","h":"toolbar.html","s":"Actions"},{"t":"States","h":"toolbar.html#toc-states","s":"Toolbar"},{"t":"CSS view file","h":"toolbar.html#toc-css-view-file","s":"Toolbar"},{"t":"JavaScript view file","h":"toolbar.html#toc-javascript-view-file","s":"Toolbar"},{"t":"Label","h":"label.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"label.html#toc-css-view-file","s":"Label"},{"t":"Input","h":"input.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"input.html#toc-css-view-file","s":"Input"},{"t":"Textarea","h":"textarea.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"textarea.html#toc-css-view-file","s":"Textarea"},{"t":"Checkbox","h":"checkbox.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"checkbox.html#toc-css-view-file","s":"Checkbox"},{"t":"Radio Group","h":"radio.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"radio.html#toc-css-view-file","s":"Radio Group"},{"t":"Switch","h":"switch.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"switch.html#toc-css-view-file","s":"Switch"},{"t":"Slider","h":"slider.html","s":"Forms & Inputs"},{"t":"States","h":"slider.html#toc-states","s":"Slider"},{"t":"CSS view file","h":"slider.html#toc-css-view-file","s":"Slider"},{"t":"JS view file","h":"slider.html#toc-js-view-file","s":"Slider"},{"t":"Select","h":"select.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"select.html#toc-css-view-file","s":"Select"},{"t":"Number Input","h":"number-input.html","s":"Forms & Inputs"},{"t":"States","h":"number-input.html#toc-states","s":"Number Input"},{"t":"CSS view file","h":"number-input.html#toc-css-view-file","s":"Number Input"},{"t":"JavaScript view file","h":"number-input.html#toc-javascript-view-file","s":"Number Input"},{"t":"File Input","h":"file-input.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"file-input.html#toc-css-view-file","s":"File Input"},{"t":"Color Picker","h":"color-picker.html","s":"Forms & Inputs"},{"t":"States","h":"color-picker.html#toc-states","s":"Color Picker"},{"t":"CSS view file","h":"color-picker.html#toc-css-view-file","s":"Color Picker"},{"t":"JavaScript view file","h":"color-picker.html#toc-javascript-view-file","s":"Color Picker"},{"t":"Date Picker","h":"date-picker.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"date-picker.html#toc-css-view-file","s":"Date Picker"},{"t":"Combobox","h":"combobox.html","s":"Forms & Inputs"},{"t":"States","h":"combobox.html#toc-states","s":"Combobox"},{"t":"CSS view file","h":"combobox.html#toc-css-view-file","s":"Combobox"},{"t":"JavaScript view file","h":"combobox.html#toc-javascript-view-file","s":"Combobox"},{"t":"Form","h":"form.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"form.html#toc-css-view-file","s":"Form"},{"t":"Badge","h":"badge.html","s":"Data Display"},{"t":"CSS view file","h":"badge.html#toc-css-view-file","s":"Badge"},{"t":"Avatar","h":"avatar.html","s":"Data Display"},{"t":"States","h":"avatar.html#toc-states","s":"Avatar"},{"t":"CSS view file","h":"avatar.html#toc-css-view-file","s":"Avatar"},{"t":"JavaScript view file","h":"avatar.html#toc-javascript-view-file","s":"Avatar"},{"t":"Card","h":"card.html","s":"Data Display"},{"t":"CSS view file","h":"card.html#toc-css-view-file","s":"Card"},{"t":"Image","h":"image.html","s":"Data Display"},{"t":"States","h":"image.html#toc-states","s":"Image"},{"t":"CSS view file","h":"image.html#toc-css-view-file","s":"Image"},{"t":"JavaScript view file","h":"image.html#toc-javascript-view-file","s":"Image"},{"t":"Statistic","h":"statistic.html","s":"Data Display"},{"t":"CSS view file","h":"statistic.html#toc-css-view-file","s":"Statistic"},{"t":"Table","h":"table.html","s":"Data Display"},{"t":"CSS view file","h":"table.html#toc-css-view-file","s":"Table"},{"t":"Collapsible","h":"collapsible.html","s":"Data Display"},{"t":"CSS view file","h":"collapsible.html#toc-css-view-file","s":"Collapsible"},{"t":"Timeline","h":"timeline.html","s":"Data Display"},{"t":"CSS view file","h":"timeline.html#toc-css-view-file","s":"Timeline"},{"t":"Tree View","h":"tree-view.html","s":"Data Display"},{"t":"States","h":"tree-view.html#toc-states","s":"Tree View"},{"t":"CSS view file","h":"tree-view.html#toc-css-view-file","s":"Tree View"},{"t":"JavaScript view file","h":"tree-view.html#toc-javascript-view-file","s":"Tree View"},{"t":"Calendar","h":"calendar.html","s":"Data Display"},{"t":"States","h":"calendar.html#toc-states","s":"Calendar"},{"t":"CSS view file","h":"calendar.html#toc-css-view-file","s":"Calendar"},{"t":"JavaScript view file","h":"calendar.html#toc-javascript-view-file","s":"Calendar"},{"t":"Carousel","h":"carousel.html","s":"Data Display"},{"t":"States","h":"carousel.html#toc-states","s":"Carousel"},{"t":"CSS view file","h":"carousel.html#toc-css-view-file","s":"Carousel"},{"t":"JavaScript view file","h":"carousel.html#toc-javascript-view-file","s":"Carousel"},{"t":"Scroll Area","h":"scroll-area.html","s":"Data Display"},{"t":"CSS view file","h":"scroll-area.html#toc-css-view-file","s":"Scroll Area"},{"t":"Sortable","h":"sortable.html","s":"Data Display"},{"t":"States","h":"sortable.html#toc-states","s":"Sortable"},{"t":"CSS view file","h":"sortable.html#toc-css-view-file","s":"Sortable"},{"t":"JavaScript view file","h":"sortable.html#toc-javascript-view-file","s":"Sortable"},{"t":"Spinner","h":"spinner.html","s":"Feedback & Status"},{"t":"CSS view file","h":"spinner.html#toc-css-view-file","s":"Spinner"},{"t":"Skeleton","h":"skeleton.html","s":"Feedback & Status"},{"t":"CSS view file","h":"skeleton.html#toc-css-view-file","s":"Skeleton"},{"t":"Progress","h":"progress.html","s":"Feedback & Status"},{"t":"CSS view file","h":"progress.html#toc-css-view-file","s":"Progress"},{"t":"Alert","h":"alert.html","s":"Feedback & Status"},{"t":"CSS view file","h":"alert.html#toc-css-view-file","s":"Alert"},{"t":"Alert Dialog","h":"alert-dialog.html","s":"Feedback & Status"},{"t":"Are you absolutely sure?","h":"alert-dialog.html#ad1-title","s":"Alert Dialog"},{"t":"Publish this post?","h":"alert-dialog.html#ad2-title","s":"Alert Dialog"},{"t":"States","h":"alert-dialog.html#toc-states","s":"Alert Dialog"},{"t":"CSS view file","h":"alert-dialog.html#toc-css-view-file","s":"Alert Dialog"},{"t":"JavaScript view file","h":"alert-dialog.html#toc-javascript-view-file","s":"Alert Dialog"},{"t":"Toast","h":"toast.html","s":"Feedback & Status"},{"t":"States","h":"toast.html#toc-states","s":"Toast"},{"t":"CSS view file","h":"toast.html#toc-css-view-file","s":"Toast"},{"t":"JavaScript view file","h":"toast.html#toc-javascript-view-file","s":"Toast"},{"t":"Popover","h":"popover.html","s":"Overlays"},{"t":"States","h":"popover.html#toc-states","s":"Popover"},{"t":"CSS view file","h":"popover.html#toc-css-view-file","s":"Popover"},{"t":"JavaScript view file","h":"popover.html#toc-javascript-view-file","s":"Popover"},{"t":"Tooltip","h":"tooltip.html","s":"Overlays"},{"t":"States","h":"tooltip.html#toc-states","s":"Tooltip"},{"t":"CSS view file","h":"tooltip.html#toc-css-view-file","s":"Tooltip"},{"t":"JavaScript view file","h":"tooltip.html#toc-javascript-view-file","s":"Tooltip"},{"t":"Context Menu","h":"context-menu.html","s":"Overlays"},{"t":"States","h":"context-menu.html#toc-states","s":"Context Menu"},{"t":"CSS view file","h":"context-menu.html#toc-css-view-file","s":"Context Menu"},{"t":"JavaScript view file","h":"context-menu.html#toc-javascript-view-file","s":"Context Menu"},{"t":"Dialog","h":"dialog.html","s":"Overlays"},{"t":"States","h":"dialog.html#toc-states","s":"Dialog"},{"t":"CSS view file","h":"dialog.html#toc-css-view-file","s":"Dialog"},{"t":"JavaScript view file","h":"dialog.html#toc-javascript-view-file","s":"Dialog"},{"t":"CSS view file","h":"dialog.html#toc-css-view-file","s":"Dialog"},{"t":"JavaScript view file","h":"dialog.html#toc-javascript-view-file","s":"Dialog"},{"t":"Edit Profile","h":"dialog.html#demo-title","s":"Dialog"},{"t":"Delete account?","h":"dialog.html#confirm-title","s":"Dialog"},{"t":"Sheet","h":"sheet.html","s":"Overlays"},{"t":"States","h":"sheet.html#toc-states","s":"Sheet"},{"t":"CSS view file","h":"sheet.html#toc-css-view-file","s":"Sheet"},{"t":"JavaScript view file","h":"sheet.html#toc-javascript-view-file","s":"Sheet"},{"t":"Edit Profile","h":"sheet.html#sheet-right-title","s":"Sheet"},{"t":"Navigation","h":"sheet.html#sheet-left-title","s":"Sheet"},{"t":"Notifications","h":"sheet.html#sheet-top-title","s":"Sheet"},{"t":"Cookie Preferences","h":"sheet.html#sheet-bottom-title","s":"Sheet"},{"t":"Accordion","h":"accordion.html","s":"Overlays"},{"t":"States","h":"accordion.html#toc-states","s":"Accordion"},{"t":"CSS view file","h":"accordion.html#toc-css-view-file","s":"Accordion"},{"t":"JavaScript view file","h":"accordion.html#toc-javascript-view-file","s":"Accordion"},{"t":"CSS view file","h":"accordion.html#toc-css-view-file","s":"Accordion"},{"t":"JavaScript view file","h":"accordion.html#toc-javascript-view-file","s":"Accordion"},{"t":"Command","h":"command.html","s":"Overlays"},{"t":"States","h":"command.html#toc-states","s":"Command"},{"t":"CSS view file","h":"command.html#toc-css-view-file","s":"Command"},{"t":"JavaScript view file","h":"command.html#toc-javascript-view-file","s":"Command"},{"t":"Breadcrumb","h":"breadcrumb.html","s":"Navigation"},{"t":"CSS view file","h":"breadcrumb.html#toc-css-view-file","s":"Breadcrumb"},{"t":"Pagination","h":"pagination.html","s":"Navigation"},{"t":"CSS view file","h":"pagination.html#toc-css-view-file","s":"Pagination"},{"t":"Steps","h":"steps.html","s":"Navigation"},{"t":"CSS view file","h":"steps.html#toc-css-view-file","s":"Steps"},{"t":"Tabs","h":"tabs.html","s":"Navigation"},{"t":"States","h":"tabs.html#toc-states","s":"Tabs"},{"t":"CSS view file","h":"tabs.html#toc-css-view-file","s":"Tabs"},{"t":"JavaScript view file","h":"tabs.html#toc-javascript-view-file","s":"Tabs"},{"t":"Dropdown Menu","h":"dropdown.html","s":"Navigation"},{"t":"States","h":"dropdown.html#toc-states","s":"Dropdown Menu"},{"t":"CSS view file","h":"dropdown.html#toc-css-view-file","s":"Dropdown Menu"},{"t":"JavaScript view file","h":"dropdown.html#toc-javascript-view-file","s":"Dropdown Menu"},{"t":"Navigation Menu","h":"navigation-menu.html","s":"Navigation"},{"t":"States","h":"navigation-menu.html#toc-states","s":"Navigation Menu"},{"t":"CSS view file","h":"navigation-menu.html#toc-css-view-file","s":"Navigation Menu"},{"t":"JavaScript view file","h":"navigation-menu.html#toc-javascript-view-file","s":"Navigation Menu"},{"t":"Sidebar","h":"sidebar.html","s":"Application"},{"t":"States","h":"sidebar.html#toc-states","s":"Sidebar"},{"t":"CSS view file","h":"sidebar.html#toc-css-view-file","s":"Sidebar"},{"t":"JavaScript view file","h":"sidebar.html#toc-javascript-view-file","s":"Sidebar"},{"t":"Site Header","h":"site-header.html","s":"Marketing"},{"t":"CSS view file","h":"site-header.html#toc-css-view-file","s":"Site Header"},{"t":"Hero","h":"hero.html","s":"Marketing"},{"t":"CSS view file","h":"hero.html#toc-css-view-file","s":"Hero"},{"t":"Product Showcase","h":"product-showcase.html","s":"Marketing"},{"t":"CSS view file","h":"product-showcase.html#toc-css-view-file","s":"Product Showcase"},{"t":"States","h":"product-showcase.html#toc-states","s":"Product Showcase"},{"t":"JavaScript view file","h":"product-showcase.html#toc-javascript-view-file","s":"Product Showcase"},{"t":"Brand Logos","h":"brand-logos.html","s":"Marketing"},{"t":"CSS view file","h":"brand-logos.html#toc-css-view-file","s":"Brand Logos"},{"t":"Feature Details","h":"feature-details.html","s":"Marketing"},{"t":"AI That Works Your Way","h":"feature-details.html#toc-ai-that-works-your-way","s":"Feature Details"},{"t":"CSS view file","h":"feature-details.html#toc-css-view-file","s":"Feature Details"},{"t":"Testimonials","h":"testimonials.html","s":"Marketing"},{"t":"CSS view file","h":"testimonials.html#toc-css-view-file","s":"Testimonials"},{"t":"Stats","h":"stats.html","s":"Marketing"},{"t":"Trusted by Teams Everywhere","h":"stats.html#toc-trusted-by-teams-everywhere","s":"Stats"},{"t":"CSS view file","h":"stats.html#toc-css-view-file","s":"Stats"},{"t":"Pricing","h":"pricing.html","s":"Marketing"},{"t":"Simple Pricing, Smarter Work","h":"pricing.html#toc-simple-pricing-smarter-work","s":"Pricing"},{"t":"CSS view file","h":"pricing.html#toc-css-view-file","s":"Pricing"},{"t":"Blog","h":"blog.html","s":"Marketing"},{"t":"Acme Insights","h":"blog.html#toc-acme-insights","s":"Blog"},{"t":"CSS view file","h":"blog.html#toc-css-view-file","s":"Blog"},{"t":"FAQ","h":"faq.html","s":"Marketing"},{"t":"Frequently Asked Questions","h":"faq.html#toc-frequently-asked-questions","s":"FAQ"},{"t":"CSS view file","h":"faq.html#toc-css-view-file","s":"FAQ"},{"t":"Get In Touch","h":"get-in-touch.html","s":"Marketing"},{"t":"Want to know more?","h":"get-in-touch.html#toc-want-to-know-more","s":"Get In Touch"},{"t":"CSS view file","h":"get-in-touch.html#toc-css-view-file","s":"Get In Touch"},{"t":"Newsletter","h":"newsletter.html","s":"Marketing"},{"t":"Stay in the loop","h":"newsletter.html#toc-stay-in-the-loop","s":"Newsletter"},{"t":"CSS view file","h":"newsletter.html#toc-css-view-file","s":"Newsletter"},{"t":"Site Footer","h":"site-footer.html","s":"Marketing"},{"t":"CSS view file","h":"site-footer.html#toc-css-view-file","s":"Site Footer"}];
+globalThis._defussShadcn.docs.searchIndex = [{"t":"Introduction","h":"index.html","s":"Overview"},{"t":"Built on five layers.","h":"index.html#toc-built-on-five-layers","s":"Introduction"},{"t":"Installation","h":"installation.html","s":"Overview"},{"t":"Quick start","h":"installation.html#toc-quick-start","s":"Installation"},{"t":"Pinning a version","h":"installation.html#toc-pinning-a-version","s":"Installation"},{"t":"Self-hosting","h":"installation.html#toc-self-hosting","s":"Installation"},{"t":"Component folder structure","h":"installation.html#toc-component-folder-structure","s":"Installation"},{"t":"Theming","h":"theming.html","s":"Overview"},{"t":"Surface / Foreground pairs","h":"theming.html#toc-surface-foreground-pairs","s":"Theming"},{"t":"Utility tokens","h":"theming.html#toc-utility-tokens","s":"Theming"},{"t":"Radius scale","h":"theming.html#toc-radius-scale","s":"Theming"},{"t":"Sidebar tokens","h":"theming.html#toc-sidebar-tokens","s":"Theming"},{"t":"Chart tokens","h":"theming.html#toc-chart-tokens","s":"Theming"},{"t":"Typography tokens","h":"theming.html#toc-typography-tokens","s":"Theming"},{"t":"Shadow scale","h":"theming.html#toc-shadow-scale","s":"Theming"},{"t":"Spacing & Tracking","h":"theming.html#toc-spacing-tracking","s":"Theming"},{"t":"Customization","h":"theming.html#toc-customization","s":"Theming"},{"t":"Dark mode","h":"theming.html#toc-dark-mode","s":"Theming"},{"t":"Dark Mode","h":"dark-mode.html","s":"Overview"},{"t":"How it works","h":"dark-mode.html#toc-how-it-works","s":"Dark Mode"},{"t":"Token pairs","h":"dark-mode.html#toc-token-pairs","s":"Dark Mode"},{"t":"Color scheme declaration","h":"dark-mode.html#toc-color-scheme-declaration","s":"Dark Mode"},{"t":"System preference detection","h":"dark-mode.html#toc-system-preference-detection","s":"Dark Mode"},{"t":"Persistence","h":"dark-mode.html#toc-persistence","s":"Dark Mode"},{"t":"Adding a toggle button","h":"dark-mode.html#toc-adding-a-toggle-button","s":"Dark Mode"},{"t":"Custom themes","h":"dark-mode.html#toc-custom-themes","s":"Dark Mode"},{"t":"Data Attribute API","h":"data-attribute-api.html","s":"Overview"},{"t":"Props → Data Attributes","h":"data-attribute-api.html#toc-props-data-attributes","s":"Data Attribute API"},{"t":"How it works","h":"data-attribute-api.html#toc-how-it-works","s":"Data Attribute API"},{"t":"Why data attributes instead of modifier classes?","h":"data-attribute-api.html#toc-why-data-attributes-instead-of-modifier-classes","s":"Data Attribute API"},{"t":"Styling attributes","h":"data-attribute-api.html#toc-styling-attributes","s":"Data Attribute API"},{"t":"Behavioral attributes","h":"data-attribute-api.html#toc-behavioral-attributes","s":"Data Attribute API"},{"t":"State attributes","h":"data-attribute-api.html#toc-state-attributes","s":"Data Attribute API"},{"t":"ARIA attributes as styling hooks","h":"data-attribute-api.html#toc-aria-attributes-as-styling-hooks","s":"Data Attribute API"},{"t":"The pattern at a glance","h":"data-attribute-api.html#toc-the-pattern-at-a-glance","s":"Data Attribute API"},{"t":"Architecture","h":"architecture.html","s":"Overview"},{"t":"1. AGENTS.md — the philosophy/instruction layer","h":"architecture.html#toc-1-agents-md-the-philosophy-instruction-layer","s":"Architecture"},{"t":"2. The deterministic verifier — an authority layer","h":"architecture.html#toc-2-the-deterministic-verifier-an-authority-layer","s":"Architecture"},{"t":"3. AGENTS.md defers: verifier output is authoritative","h":"architecture.html#toc-3-agents-md-defers-verifier-output-is-authoritative","s":"Architecture"},{"t":"4. The surrounding gates — suppressing hallucination, AI slop and overstating claims","h":"architecture.html#toc-4-the-surrounding-gates-suppressing-hallucination-ai-slop-and-overstating-claims","s":"Architecture"},{"t":"The proof loop","h":"architecture.html#toc-the-proof-loop","s":"Architecture"},{"t":"5. Human expert final review before release","h":"architecture.html#toc-5-human-expert-final-review-before-release","s":"Architecture"},{"t":"Cascade Layers","h":"cascade-layers.html","s":"Overview"},{"t":"What is @layer?","h":"cascade-layers.html#toc-what-is-layer","s":"Cascade Layers"},{"t":"How defuss-shadcn uses it","h":"cascade-layers.html#toc-how-defuss-shadcn-uses-it","s":"Cascade Layers"},{"t":"The cascade order","h":"cascade-layers.html#toc-the-cascade-order","s":"Cascade Layers"},{"t":"Overriding component styles","h":"cascade-layers.html#toc-overriding-component-styles","s":"Cascade Layers"},{"t":"Using with other CSS frameworks","h":"cascade-layers.html#toc-using-with-other-css-frameworks","s":"Cascade Layers"},{"t":"Why not just write unlayered CSS?","h":"cascade-layers.html#toc-why-not-just-write-unlayered-css","s":"Cascade Layers"},{"t":"Why not @scope or Web Components?","h":"cascade-layers.html#toc-why-not-scope-or-web-components","s":"Cascade Layers"},{"t":"Browser support","h":"cascade-layers.html#toc-browser-support","s":"Cascade Layers"},{"t":"ES Modules","h":"es-modules.html","s":"Overview"},{"t":"What is type=\"module\"?","h":"es-modules.html#toc-what-is-type-module","s":"ES Modules"},{"t":"No import, no export","h":"es-modules.html#toc-no-import-no-export","s":"ES Modules"},{"t":"Static pages vs. SPAs","h":"es-modules.html#toc-static-pages-vs-spas","s":"ES Modules"},{"t":"Which components need JS?","h":"es-modules.html#toc-which-components-need-js","s":"ES Modules"},{"t":"Serving locally","h":"es-modules.html#toc-serving-locally","s":"ES Modules"},{"t":"Browser support","h":"es-modules.html#toc-browser-support","s":"ES Modules"},{"t":"Native Web APIs","h":"native-web-apis.html","s":"Overview"},{"t":"The native-first principle","h":"native-web-apis.html#toc-the-native-first-principle","s":"Native Web APIs"},{"t":"API reference","h":"native-web-apis.html#toc-api-reference","s":"Native Web APIs"},{"t":"Animations","h":"animations.html","s":"Overview"},{"t":"The challenge","h":"animations.html#toc-the-challenge","s":"Animations"},{"t":"@starting-style","h":"animations.html#toc-starting-style","s":"Animations"},{"t":"allow-discrete transitions","h":"animations.html#toc-allow-discrete-transitions","s":"Animations"},{"t":"Popover & dialog animation pattern","h":"animations.html#toc-popover-dialog-animation-pattern","s":"Animations"},{"t":"Dialog & sheet animations","h":"animations.html#toc-dialog-sheet-animations","s":"Animations"},{"t":"Accordion animations","h":"animations.html#toc-accordion-animations","s":"Animations"},{"t":"Programmatic exit animations","h":"animations.html#toc-programmatic-exit-animations","s":"Animations"},{"t":"Animation summary","h":"animations.html#toc-animation-summary","s":"Animations"},{"t":"Accessibility","h":"accessibility.html","s":"Overview"},{"t":"Semantic HTML first","h":"accessibility.html#toc-semantic-html-first","s":"Accessibility"},{"t":"ARIA roles","h":"accessibility.html#toc-aria-roles","s":"Accessibility"},{"t":"State attributes","h":"accessibility.html#toc-state-attributes","s":"Accessibility"},{"t":"Relationship attributes","h":"accessibility.html#toc-relationship-attributes","s":"Accessibility"},{"t":"Keyboard navigation","h":"accessibility.html#toc-keyboard-navigation","s":"Accessibility"},{"t":"Roving tabindex","h":"accessibility.html#toc-roving-tabindex","s":"Accessibility"},{"t":"Focus management","h":"accessibility.html#toc-focus-management","s":"Accessibility"},{"t":"Live regions","h":"accessibility.html#toc-live-regions","s":"Accessibility"},{"t":"Screen reader considerations","h":"accessibility.html#toc-screen-reader-considerations","s":"Accessibility"},{"t":"Component Skills","h":"component-skills.html","s":"Overview"},{"t":"What is a component skill?","h":"component-skills.html#toc-what-is-a-component-skill","s":"Component Skills"},{"t":"The SKILL.md index","h":"component-skills.html#toc-the-skill-md-index","s":"Component Skills"},{"t":"Skill file structure","h":"component-skills.html#toc-skill-file-structure","s":"Component Skills"},{"t":"Example: Badge skill file","h":"component-skills.html#toc-example-badge-skill-file","s":"Component Skills"},{"t":"Using skills with AI assistants","h":"component-skills.html#toc-using-skills-with-ai-assistants","s":"Component Skills"},{"t":"Using skills as a human reference","h":"component-skills.html#toc-using-skills-as-a-human-reference","s":"Component Skills"},{"t":"Available skills","h":"component-skills.html#toc-available-skills","s":"Component Skills"},{"t":"Changelog","h":"changelog.html","s":"Overview"},{"t":"v0.8.3","h":"changelog.html#toc-v0-8-3","s":"Changelog"},{"t":"v0.8.2","h":"changelog.html#toc-v0-8-2","s":"Changelog"},{"t":"v0.8.1","h":"changelog.html#toc-v0-8-1","s":"Changelog"},{"t":"v0.8.0","h":"changelog.html#toc-v0-8-0","s":"Changelog"},{"t":"v0.7.19","h":"changelog.html#toc-v0-7-19","s":"Changelog"},{"t":"v0.7.18","h":"changelog.html#toc-v0-7-18","s":"Changelog"},{"t":"v0.7.17","h":"changelog.html#toc-v0-7-17","s":"Changelog"},{"t":"v0.7.16","h":"changelog.html#toc-v0-7-16","s":"Changelog"},{"t":"v0.7.15","h":"changelog.html#toc-v0-7-15","s":"Changelog"},{"t":"v0.7.14","h":"changelog.html#toc-v0-7-14","s":"Changelog"},{"t":"v0.7.13-alpha","h":"changelog.html#toc-v0-7-13-alpha","s":"Changelog"},{"t":"v0.7.12-alpha","h":"changelog.html#toc-v0-7-12-alpha","s":"Changelog"},{"t":"v0.7.11-alpha","h":"changelog.html#toc-v0-7-11-alpha","s":"Changelog"},{"t":"v0.7.10-alpha","h":"changelog.html#toc-v0-7-10-alpha","s":"Changelog"},{"t":"v0.7.9-alpha","h":"changelog.html#toc-v0-7-9-alpha","s":"Changelog"},{"t":"v0.7.8-alpha","h":"changelog.html#toc-v0-7-8-alpha","s":"Changelog"},{"t":"v0.7.7-alpha","h":"changelog.html#toc-v0-7-7-alpha","s":"Changelog"},{"t":"v0.7.6-alpha","h":"changelog.html#toc-v0-7-6-alpha","s":"Changelog"},{"t":"v0.7.5-alpha","h":"changelog.html#toc-v0-7-5-alpha","s":"Changelog"},{"t":"v0.7.4-alpha","h":"changelog.html#toc-v0-7-4-alpha","s":"Changelog"},{"t":"v0.7.3-alpha","h":"changelog.html#toc-v0-7-3-alpha","s":"Changelog"},{"t":"v0.7.2-alpha","h":"changelog.html#toc-v0-7-2-alpha","s":"Changelog"},{"t":"v0.7.1-alpha","h":"changelog.html#toc-v0-7-1-alpha","s":"Changelog"},{"t":"v0.7.0-alpha","h":"changelog.html#toc-v0-7-0-alpha","s":"Changelog"},{"t":"v0.6.0-alpha","h":"changelog.html#toc-v0-6-0-alpha","s":"Changelog"},{"t":"v0.5.0-alpha","h":"changelog.html#toc-v0-5-0-alpha","s":"Changelog"},{"t":"v0.4.0-alpha","h":"changelog.html#toc-v0-4-0-alpha","s":"Changelog"},{"t":"v0.3.0","h":"changelog.html#toc-v0-3-0","s":"Changelog"},{"t":"v0.2.1","h":"changelog.html#toc-v0-2-1","s":"Changelog"},{"t":"v0.2.0","h":"changelog.html#toc-v0-2-0","s":"Changelog"},{"t":"Typography","h":"typography.html","s":"Primitives"},{"t":"h2 — The People of the Kingdom","h":"typography.html#toc-h2-the-people-of-the-kingdom","s":"Typography"},{"t":"The King's Plan","h":"typography.html#toc-the-king-s-plan","s":"Typography"},{"t":"CSS view file","h":"typography.html#toc-css-view-file","s":"Typography"},{"t":"Separator","h":"separator.html","s":"Primitives"},{"t":"CSS view file","h":"separator.html#toc-css-view-file","s":"Separator"},{"t":"Icon","h":"icon.html","s":"Primitives"},{"t":"CSS view file","h":"icon.html#toc-css-view-file","s":"Icon"},{"t":"Button","h":"button.html","s":"Actions"},{"t":"CSS view file","h":"button.html#toc-css-view-file","s":"Button"},{"t":"Toggle","h":"toggle.html","s":"Actions"},{"t":"States","h":"toggle.html#toc-states","s":"Toggle"},{"t":"CSS view file","h":"toggle.html#toc-css-view-file","s":"Toggle"},{"t":"JavaScript view file","h":"toggle.html#toc-javascript-view-file","s":"Toggle"},{"t":"Toggle Group","h":"toggle-group.html","s":"Actions"},{"t":"States","h":"toggle-group.html#toc-states","s":"Toggle Group"},{"t":"CSS view file","h":"toggle-group.html#toc-css-view-file","s":"Toggle Group"},{"t":"JavaScript view file","h":"toggle-group.html#toc-javascript-view-file","s":"Toggle Group"},{"t":"Button Group","h":"button-group.html","s":"Actions"},{"t":"CSS view file","h":"button-group.html#toc-css-view-file","s":"Button Group"},{"t":"Toolbar","h":"toolbar.html","s":"Actions"},{"t":"States","h":"toolbar.html#toc-states","s":"Toolbar"},{"t":"CSS view file","h":"toolbar.html#toc-css-view-file","s":"Toolbar"},{"t":"JavaScript view file","h":"toolbar.html#toc-javascript-view-file","s":"Toolbar"},{"t":"Label","h":"label.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"label.html#toc-css-view-file","s":"Label"},{"t":"Input","h":"input.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"input.html#toc-css-view-file","s":"Input"},{"t":"Textarea","h":"textarea.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"textarea.html#toc-css-view-file","s":"Textarea"},{"t":"Checkbox","h":"checkbox.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"checkbox.html#toc-css-view-file","s":"Checkbox"},{"t":"Radio Group","h":"radio.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"radio.html#toc-css-view-file","s":"Radio Group"},{"t":"Switch","h":"switch.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"switch.html#toc-css-view-file","s":"Switch"},{"t":"Slider","h":"slider.html","s":"Forms & Inputs"},{"t":"States","h":"slider.html#toc-states","s":"Slider"},{"t":"CSS view file","h":"slider.html#toc-css-view-file","s":"Slider"},{"t":"JS view file","h":"slider.html#toc-js-view-file","s":"Slider"},{"t":"Select","h":"select.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"select.html#toc-css-view-file","s":"Select"},{"t":"Number Input","h":"number-input.html","s":"Forms & Inputs"},{"t":"States","h":"number-input.html#toc-states","s":"Number Input"},{"t":"CSS view file","h":"number-input.html#toc-css-view-file","s":"Number Input"},{"t":"JavaScript view file","h":"number-input.html#toc-javascript-view-file","s":"Number Input"},{"t":"File Input","h":"file-input.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"file-input.html#toc-css-view-file","s":"File Input"},{"t":"Color Picker","h":"color-picker.html","s":"Forms & Inputs"},{"t":"States","h":"color-picker.html#toc-states","s":"Color Picker"},{"t":"CSS view file","h":"color-picker.html#toc-css-view-file","s":"Color Picker"},{"t":"JavaScript view file","h":"color-picker.html#toc-javascript-view-file","s":"Color Picker"},{"t":"Date Picker","h":"date-picker.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"date-picker.html#toc-css-view-file","s":"Date Picker"},{"t":"Combobox","h":"combobox.html","s":"Forms & Inputs"},{"t":"States","h":"combobox.html#toc-states","s":"Combobox"},{"t":"CSS view file","h":"combobox.html#toc-css-view-file","s":"Combobox"},{"t":"JavaScript view file","h":"combobox.html#toc-javascript-view-file","s":"Combobox"},{"t":"Form","h":"form.html","s":"Forms & Inputs"},{"t":"CSS view file","h":"form.html#toc-css-view-file","s":"Form"},{"t":"Badge","h":"badge.html","s":"Data Display"},{"t":"CSS view file","h":"badge.html#toc-css-view-file","s":"Badge"},{"t":"Avatar","h":"avatar.html","s":"Data Display"},{"t":"States","h":"avatar.html#toc-states","s":"Avatar"},{"t":"CSS view file","h":"avatar.html#toc-css-view-file","s":"Avatar"},{"t":"JavaScript view file","h":"avatar.html#toc-javascript-view-file","s":"Avatar"},{"t":"Card","h":"card.html","s":"Data Display"},{"t":"CSS view file","h":"card.html#toc-css-view-file","s":"Card"},{"t":"Image","h":"image.html","s":"Data Display"},{"t":"States","h":"image.html#toc-states","s":"Image"},{"t":"CSS view file","h":"image.html#toc-css-view-file","s":"Image"},{"t":"JavaScript view file","h":"image.html#toc-javascript-view-file","s":"Image"},{"t":"Statistic","h":"statistic.html","s":"Data Display"},{"t":"CSS view file","h":"statistic.html#toc-css-view-file","s":"Statistic"},{"t":"Table","h":"table.html","s":"Data Display"},{"t":"CSS view file","h":"table.html#toc-css-view-file","s":"Table"},{"t":"Collapsible","h":"collapsible.html","s":"Data Display"},{"t":"CSS view file","h":"collapsible.html#toc-css-view-file","s":"Collapsible"},{"t":"Timeline","h":"timeline.html","s":"Data Display"},{"t":"CSS view file","h":"timeline.html#toc-css-view-file","s":"Timeline"},{"t":"Tree View","h":"tree-view.html","s":"Data Display"},{"t":"States","h":"tree-view.html#toc-states","s":"Tree View"},{"t":"CSS view file","h":"tree-view.html#toc-css-view-file","s":"Tree View"},{"t":"JavaScript view file","h":"tree-view.html#toc-javascript-view-file","s":"Tree View"},{"t":"Calendar","h":"calendar.html","s":"Data Display"},{"t":"States","h":"calendar.html#toc-states","s":"Calendar"},{"t":"CSS view file","h":"calendar.html#toc-css-view-file","s":"Calendar"},{"t":"JavaScript view file","h":"calendar.html#toc-javascript-view-file","s":"Calendar"},{"t":"Carousel","h":"carousel.html","s":"Data Display"},{"t":"States","h":"carousel.html#toc-states","s":"Carousel"},{"t":"CSS view file","h":"carousel.html#toc-css-view-file","s":"Carousel"},{"t":"JavaScript view file","h":"carousel.html#toc-javascript-view-file","s":"Carousel"},{"t":"Scroll Area","h":"scroll-area.html","s":"Data Display"},{"t":"CSS view file","h":"scroll-area.html#toc-css-view-file","s":"Scroll Area"},{"t":"Sortable","h":"sortable.html","s":"Data Display"},{"t":"States","h":"sortable.html#toc-states","s":"Sortable"},{"t":"CSS view file","h":"sortable.html#toc-css-view-file","s":"Sortable"},{"t":"JavaScript view file","h":"sortable.html#toc-javascript-view-file","s":"Sortable"},{"t":"Spinner","h":"spinner.html","s":"Feedback & Status"},{"t":"CSS view file","h":"spinner.html#toc-css-view-file","s":"Spinner"},{"t":"Skeleton","h":"skeleton.html","s":"Feedback & Status"},{"t":"CSS view file","h":"skeleton.html#toc-css-view-file","s":"Skeleton"},{"t":"Progress","h":"progress.html","s":"Feedback & Status"},{"t":"CSS view file","h":"progress.html#toc-css-view-file","s":"Progress"},{"t":"Alert","h":"alert.html","s":"Feedback & Status"},{"t":"CSS view file","h":"alert.html#toc-css-view-file","s":"Alert"},{"t":"Alert Dialog","h":"alert-dialog.html","s":"Feedback & Status"},{"t":"Are you absolutely sure?","h":"alert-dialog.html#ad1-title","s":"Alert Dialog"},{"t":"Publish this post?","h":"alert-dialog.html#ad2-title","s":"Alert Dialog"},{"t":"States","h":"alert-dialog.html#toc-states","s":"Alert Dialog"},{"t":"CSS view file","h":"alert-dialog.html#toc-css-view-file","s":"Alert Dialog"},{"t":"JavaScript view file","h":"alert-dialog.html#toc-javascript-view-file","s":"Alert Dialog"},{"t":"Toast","h":"toast.html","s":"Feedback & Status"},{"t":"States","h":"toast.html#toc-states","s":"Toast"},{"t":"CSS view file","h":"toast.html#toc-css-view-file","s":"Toast"},{"t":"JavaScript view file","h":"toast.html#toc-javascript-view-file","s":"Toast"},{"t":"Popover","h":"popover.html","s":"Overlays"},{"t":"States","h":"popover.html#toc-states","s":"Popover"},{"t":"CSS view file","h":"popover.html#toc-css-view-file","s":"Popover"},{"t":"JavaScript view file","h":"popover.html#toc-javascript-view-file","s":"Popover"},{"t":"Tooltip","h":"tooltip.html","s":"Overlays"},{"t":"States","h":"tooltip.html#toc-states","s":"Tooltip"},{"t":"CSS view file","h":"tooltip.html#toc-css-view-file","s":"Tooltip"},{"t":"JavaScript view file","h":"tooltip.html#toc-javascript-view-file","s":"Tooltip"},{"t":"Context Menu","h":"context-menu.html","s":"Overlays"},{"t":"States","h":"context-menu.html#toc-states","s":"Context Menu"},{"t":"CSS view file","h":"context-menu.html#toc-css-view-file","s":"Context Menu"},{"t":"JavaScript view file","h":"context-menu.html#toc-javascript-view-file","s":"Context Menu"},{"t":"Dialog","h":"dialog.html","s":"Overlays"},{"t":"States","h":"dialog.html#toc-states","s":"Dialog"},{"t":"CSS view file","h":"dialog.html#toc-css-view-file","s":"Dialog"},{"t":"JavaScript view file","h":"dialog.html#toc-javascript-view-file","s":"Dialog"},{"t":"CSS view file","h":"dialog.html#toc-css-view-file","s":"Dialog"},{"t":"JavaScript view file","h":"dialog.html#toc-javascript-view-file","s":"Dialog"},{"t":"Edit Profile","h":"dialog.html#demo-title","s":"Dialog"},{"t":"Delete account?","h":"dialog.html#confirm-title","s":"Dialog"},{"t":"Sheet","h":"sheet.html","s":"Overlays"},{"t":"States","h":"sheet.html#toc-states","s":"Sheet"},{"t":"CSS view file","h":"sheet.html#toc-css-view-file","s":"Sheet"},{"t":"JavaScript view file","h":"sheet.html#toc-javascript-view-file","s":"Sheet"},{"t":"Edit Profile","h":"sheet.html#sheet-right-title","s":"Sheet"},{"t":"Navigation","h":"sheet.html#sheet-left-title","s":"Sheet"},{"t":"Notifications","h":"sheet.html#sheet-top-title","s":"Sheet"},{"t":"Cookie Preferences","h":"sheet.html#sheet-bottom-title","s":"Sheet"},{"t":"Accordion","h":"accordion.html","s":"Overlays"},{"t":"States","h":"accordion.html#toc-states","s":"Accordion"},{"t":"CSS view file","h":"accordion.html#toc-css-view-file","s":"Accordion"},{"t":"JavaScript view file","h":"accordion.html#toc-javascript-view-file","s":"Accordion"},{"t":"CSS view file","h":"accordion.html#toc-css-view-file","s":"Accordion"},{"t":"JavaScript view file","h":"accordion.html#toc-javascript-view-file","s":"Accordion"},{"t":"Command","h":"command.html","s":"Overlays"},{"t":"States","h":"command.html#toc-states","s":"Command"},{"t":"CSS view file","h":"command.html#toc-css-view-file","s":"Command"},{"t":"JavaScript view file","h":"command.html#toc-javascript-view-file","s":"Command"},{"t":"Breadcrumb","h":"breadcrumb.html","s":"Navigation"},{"t":"CSS view file","h":"breadcrumb.html#toc-css-view-file","s":"Breadcrumb"},{"t":"Pagination","h":"pagination.html","s":"Navigation"},{"t":"CSS view file","h":"pagination.html#toc-css-view-file","s":"Pagination"},{"t":"Steps","h":"steps.html","s":"Navigation"},{"t":"CSS view file","h":"steps.html#toc-css-view-file","s":"Steps"},{"t":"Tabs","h":"tabs.html","s":"Navigation"},{"t":"States","h":"tabs.html#toc-states","s":"Tabs"},{"t":"CSS view file","h":"tabs.html#toc-css-view-file","s":"Tabs"},{"t":"JavaScript view file","h":"tabs.html#toc-javascript-view-file","s":"Tabs"},{"t":"Dropdown Menu","h":"dropdown.html","s":"Navigation"},{"t":"States","h":"dropdown.html#toc-states","s":"Dropdown Menu"},{"t":"CSS view file","h":"dropdown.html#toc-css-view-file","s":"Dropdown Menu"},{"t":"JavaScript view file","h":"dropdown.html#toc-javascript-view-file","s":"Dropdown Menu"},{"t":"Navigation Menu","h":"navigation-menu.html","s":"Navigation"},{"t":"States","h":"navigation-menu.html#toc-states","s":"Navigation Menu"},{"t":"CSS view file","h":"navigation-menu.html#toc-css-view-file","s":"Navigation Menu"},{"t":"JavaScript view file","h":"navigation-menu.html#toc-javascript-view-file","s":"Navigation Menu"},{"t":"Sidebar","h":"sidebar.html","s":"Application"},{"t":"States","h":"sidebar.html#toc-states","s":"Sidebar"},{"t":"CSS view file","h":"sidebar.html#toc-css-view-file","s":"Sidebar"},{"t":"JavaScript view file","h":"sidebar.html#toc-javascript-view-file","s":"Sidebar"},{"t":"Site Header","h":"site-header.html","s":"Marketing"},{"t":"CSS view file","h":"site-header.html#toc-css-view-file","s":"Site Header"},{"t":"Hero","h":"hero.html","s":"Marketing"},{"t":"CSS view file","h":"hero.html#toc-css-view-file","s":"Hero"},{"t":"Product Showcase","h":"product-showcase.html","s":"Marketing"},{"t":"CSS view file","h":"product-showcase.html#toc-css-view-file","s":"Product Showcase"},{"t":"States","h":"product-showcase.html#toc-states","s":"Product Showcase"},{"t":"JavaScript view file","h":"product-showcase.html#toc-javascript-view-file","s":"Product Showcase"},{"t":"Brand Logos","h":"brand-logos.html","s":"Marketing"},{"t":"CSS view file","h":"brand-logos.html#toc-css-view-file","s":"Brand Logos"},{"t":"Feature Details","h":"feature-details.html","s":"Marketing"},{"t":"AI That Works Your Way","h":"feature-details.html#toc-ai-that-works-your-way","s":"Feature Details"},{"t":"CSS view file","h":"feature-details.html#toc-css-view-file","s":"Feature Details"},{"t":"Testimonials","h":"testimonials.html","s":"Marketing"},{"t":"CSS view file","h":"testimonials.html#toc-css-view-file","s":"Testimonials"},{"t":"Stats","h":"stats.html","s":"Marketing"},{"t":"Trusted by Teams Everywhere","h":"stats.html#toc-trusted-by-teams-everywhere","s":"Stats"},{"t":"CSS view file","h":"stats.html#toc-css-view-file","s":"Stats"},{"t":"Pricing","h":"pricing.html","s":"Marketing"},{"t":"Simple Pricing, Smarter Work","h":"pricing.html#toc-simple-pricing-smarter-work","s":"Pricing"},{"t":"CSS view file","h":"pricing.html#toc-css-view-file","s":"Pricing"},{"t":"Blog","h":"blog.html","s":"Marketing"},{"t":"Acme Insights","h":"blog.html#toc-acme-insights","s":"Blog"},{"t":"CSS view file","h":"blog.html#toc-css-view-file","s":"Blog"},{"t":"FAQ","h":"faq.html","s":"Marketing"},{"t":"Frequently Asked Questions","h":"faq.html#toc-frequently-asked-questions","s":"FAQ"},{"t":"CSS view file","h":"faq.html#toc-css-view-file","s":"FAQ"},{"t":"Get In Touch","h":"get-in-touch.html","s":"Marketing"},{"t":"Want to know more?","h":"get-in-touch.html#toc-want-to-know-more","s":"Get In Touch"},{"t":"CSS view file","h":"get-in-touch.html#toc-css-view-file","s":"Get In Touch"},{"t":"Newsletter","h":"newsletter.html","s":"Marketing"},{"t":"Stay in the loop","h":"newsletter.html#toc-stay-in-the-loop","s":"Newsletter"},{"t":"CSS view file","h":"newsletter.html#toc-css-view-file","s":"Newsletter"},{"t":"Site Footer","h":"site-footer.html","s":"Marketing"},{"t":"CSS view file","h":"site-footer.html#toc-css-view-file","s":"Site Footer"}];

package/dist/documentation/label.html

@@ -107,7 +107,7 @@
         <h1 style="font-family:var(--font-display);font-size:2.5rem;font-weight:400;letter-spacing:-0.035em;margin:0 0 0.75rem;">Label</h1>
         <p class="text-muted-foreground leading-relaxed mb-6">
           Renders an accessible label associated with form controls. Built on the native <code>&lt;label&gt;</code> element
-          with <code>:has()</code> for focus-reactive styling. No JavaScript required.
+          with <code>:has()</code> for focus-reactive styling. No JavaScript required. The label’s <code>for</code> and the control’s <code>id</code> must carry the <strong>exact same value</strong> — that pairing <em>is</em> the association: it is what makes clicking the label focus the field and lets a screen reader announce the control’s name. Change one side and leave the other, and the label keeps looking right while quietly stopping working.
         </p>
         <!-- Component Skill -->
         <details style="margin-bottom:2rem;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;">
@@ -135,6 +135,7 @@
             </div>
 
             <p style="margin:0 0 0.5rem;font-weight:600;font-size:0.8125rem;font-family:var(--font-mono);">Accessibility</p>
+            <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• <strong>One value, written twice:</strong> the label’s <code>for</code> and the control’s <code>id</code> must be the exact same string. A mismatch fails silently — the label renders and styles normally but no longer focuses the field or names it for assistive technology.</p>
             <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• Clicking the label focuses the associated input — this is native <code>&lt;label&gt;</code> behavior.</p>
             <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• The required indicator <code>*</code> uses <code>aria-hidden=&quot;true&quot;</code> since the <code>required</code> attribute on the input already conveys the requirement to assistive technology.</p>
             <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• Do not use <code>&lt;label&gt;</code> without a <code>for</code> attribute or a nested input.</p>
@@ -152,7 +153,7 @@
 
         <!-- Basic -->
         <p class="text-sm font-medium mb-2 mt-6">Default</p>
-        <p class="text-xs text-muted-foreground mb-3">Basic label paired with an input. Click the label to focus the input.</p>
+        <p class="text-xs text-muted-foreground mb-3">Basic label paired with an input. Click the label to focus the input — <code>for="demo-email"</code> and <code>id="demo-email"</code> must always match; changing one without the other breaks the link.</p>
         <div class="preview">
           <div style="width:100%;max-width:20rem;">
             <label class="label" for="demo-email">Email</label>
@@ -164,7 +165,8 @@
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
             Copy
           </button>
-          <pre><code class="language-markup">&lt;label class="label" for="email"&gt;Email&lt;/label&gt;
+          <pre><code class="language-markup">&lt;! for and id are one value in two places — keep them identical --&gt;
+&lt;label class="label" for="email"&gt;Email&lt;/label&gt;
 &lt;input class="input" type="email" id="email" placeholder="you@example.com"&gt;</code></pre>
         </div>
 

package/dist/documentation/select.html

@@ -106,7 +106,7 @@
         </div>
         <h1 style="font-family:var(--font-display);font-size:2.5rem;font-weight:400;letter-spacing:-0.035em;margin:0 0 0.75rem;">Select</h1>
         <p class="text-muted-foreground leading-relaxed mb-6">
-          A native dropdown for choosing from a list of options. Built on <code>&lt;select&gt;</code> with <code>appearance: none</code> and a custom chevron.
+          A native dropdown for choosing from a list of options. Built on <code>&lt;select&gt;</code> with <code>appearance: none</code> and a custom chevron. The empty-value placeholder option stays selectable, so it doubles as the clear/reset entry: re-choosing it empties the box again (add <code>required</code> for mandatory fields).
         </p>
         <!-- Component Skill -->
         <details style="margin-bottom:2rem;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;">
@@ -138,23 +138,24 @@
             <p style="margin:0 0 0.5rem;font-weight:600;font-size:0.8125rem;font-family:var(--font-mono);">Accessibility</p>
             <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• Native <code>&lt;select&gt;</code> provides full keyboard navigation (arrow keys, type-ahead).</p>
             <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• Use <code>&lt;label&gt;</code> with <code>for</code> for description.</p>
-            <p class="text-muted-foreground" style="margin:0 0 0;">• Use <code>disabled</code> on <code>&lt;option&gt;</code> elements for placeholder text.</p>
+            <p class="text-muted-foreground" style="margin:0 0 0;">• The placeholder is a <code>&lt;option value="" selected&gt;</code> <strong>without</strong> <code>disabled</code> — a disabled placeholder cannot be re-selected, so a made selection could never be cleared (issue #32). Keep it selectable and mark the field <code>required</code> if empty must not submit; the control reads as a placeholder while the empty option is selected (muted text via <code>:has(option:checked)</code>).</p>
 
 
             <p style="margin:0 0 0.5rem;font-weight:600;font-size:0.8125rem;font-family:var(--font-mono);">Notes</p>
             <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• Uses <code>appearance: none</code> with a custom chevron via <code>background-image</code> SVG.</p>
             <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• The dropdown list is rendered by the browser — it cannot be styled.</p>
-            <p class="text-muted-foreground" style="margin:0 0 0;">• For a fully custom dropdown, use the Combobox component instead.</p>
+            <p class="text-muted-foreground" style="margin:0 0 0.25rem;">• For a fully custom dropdown, use the Combobox component instead.</p>
+            <p class="text-muted-foreground" style="margin:0 0 0;">• While the empty option is selected the closed control renders muted (<code>:has(> option[value=""]:checked)</code>); choosing a value restores the foreground color.</p>
           </div>
         </details>
       </div>
         <p class="text-sm font-medium mb-2 mt-6">Default</p>
-        <p class="text-xs text-muted-foreground mb-3">Native select with placeholder.</p>
+        <p class="text-xs text-muted-foreground mb-3">Native select with a clearable placeholder — re-choose "Select a fruit" to empty it again.</p>
         <div class="preview">
           <div style="width:100%;max-width:16rem;">
             <label class="label" for="d-fruit">Fruit</label>
             <select class="select" id="d-fruit">
-              <option value="" disabled selected>Select a fruit</option>
+              <option value="" selected>Select a fruit</option>
               <option value="apple">Apple</option>
               <option value="banana">Banana</option>
               <option value="cherry">Cherry</option>
@@ -168,7 +169,7 @@
             Copy
           </button>
           <pre><code class="language-markup">&lt;select class="select"&gt;
-  &lt;option value="" disabled selected&gt;Select a fruit&lt;/option&gt;
+  &lt;option value="" selected&gt;Select a fruit&lt;/option&gt;
   &lt;option value="apple"&gt;Apple&lt;/option&gt;
   ...
 &lt;/select&gt;</code></pre>
@@ -178,7 +179,7 @@
         <div class="preview">
           <div style="width:100%;max-width:16rem;">
             <select class="select">
-              <option value="" disabled selected>Select timezone</option>
+              <option value="" selected>Select timezone</option>
               <optgroup label="Americas">
                 <option>New York</option>
                 <option>Los Angeles</option>
@@ -251,6 +252,16 @@
     background-position: right 0.5rem center;
     background-size: 1rem;
 
+    /* Placeholder = the empty-value option. It stays selectable (no
+       `disabled`) so it doubles as the clear/reset entry — choosing it
+       again empties the box (issue #32). While it is the selection the
+       closed control reads as a placeholder; a real value restores
+       --foreground because the base rule's color wins over this one.
+       option:checked matches the *selected* option in every engine. */
+    &amp;:has(&gt; option[value=&quot;&quot;]:checked) {
+      color: var(--muted-foreground);
+    }
+
     &amp;:focus {
       border-color: var(--ring);
       box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);