use-wc 1.0.0-pre.59 → 1.0.0-pre.60

package/custom-elements.json

@@ -89,6 +89,149 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-badge/use-badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`use-badge` renders a small indicator anchored to another element's corner, using\n[CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)\ninstead of the classic `position: absolute` + negative-offset trick. This lets the badge live\nanywhere in the DOM rather than being a child of the element it decorates. A badge's shape,\ncolor, and positioning ship built in — reading from the design system's tokens when\n`tokens.css` is loaded, and falling back to sensible defaults otherwise — so no theme is\nrequired to get a working, visible badge.\n\nPoint a badge at its target with the `anchortarget` attribute, set to the target's `id`\n(named to avoid colliding with the `anchor` content attribute HTML is gaining natively):\n\n```html\n<button type=\"button\" id=\"inbox\">Inbox</button>\n<use-badge anchortarget=\"inbox\">99+</use-badge>\n```\n\nThe badge and its anchor must live in the same DOM tree — a badge cannot reach an anchor\ninside another component's shadow root, and an anchor's `anchor-name` set inside a shadow\ntree's stylesheet is not visible here. No positioned ancestor or shared containing block is\nrequired: anchor positioning resolves the badge's location straight from the anchor's own\ngeometry, so the badge can sit anywhere else in the DOM tree.\n\nWithout a resolved anchor — `anchortarget` unset, pointing at a missing id, or `anchorElement`\nnever assigned — the badge has no `:state(anchored)` and renders as a plain inline chip in\nnormal document flow, still using the same color/shape styling.\n\nSome components render their host as `display: contents`, which has no box of its own for CSS\nanchor positioning to resolve against. If the anchor computes a non-empty `--usewc-anchor-name`\ncustom property, the badge uses that dashed-ident as its `position-anchor` directly instead of\ngenerating and writing its own onto the anchor — letting a component publish the name of a\nreal, box-generating part of itself (already established for its own purposes) for badges to\ntarget instead of its host, even though that part lives inside the component's own shadow root.\nThis mechanism is shared with `use-menu`/`use-anchored` via `AnchorController`; components\nwithout a `display: contents` host don't need to publish anything.\n\n**Known Firefox limitation:** anchoring across a shadow root boundary this way — the case\n`--usewc-anchor-name` exists for — is mispositioned in Firefox as of this writing. Verified\ndirectly: `anchor()`'s logical `start`/`end` keywords resolve backwards on both axes\nspecifically for a cross-shadow-root anchor reference, in Firefox only — the same anchor()\ncalls resolve correctly for a same-tree anchor in Firefox, and cross-shadow anchoring resolves\ncorrectly in Chromium and Safari. A badge anchored to a plain element (button, input, anything\nthat isn't itself relying on this escape hatch) is unaffected in every engine, including\nFirefox.\n\n## Side effects\n\nThe badge is a sibling of its anchor rather than a child, so **as a side effect, a badge\nmutates its anchor element**: it appends its own id to the anchor's `aria-describedby`\n(preserving any ids already there, the same way `anchor-name` is appended rather than\nreplaced) to keep its content connected to the anchor for assistive technology. This means a\nbadge's content, or its `aria-label` when set, is announced as part of interacting with the\nanchor, e.g. \"Inbox button, 3\". A `dot` badge has no content of its own, so set `aria-label`\ndirectly on `<use-badge>` for a meaningful description (e.g. `aria-label=\"3 unread messages\"`);\nwithout one, the description contributes nothing and the anchor announces as before.\n\nAvoid adding `aria-hidden` to `<use-badge>` if you rely on this: while the description\ncomputation is specified to still read a hidden node when it's the direct target of\n`aria-describedby`, support for that specific case is inconsistent across browsers and screen\nreaders.\n\nSet `options=\"noaria\"` to opt a badge out of this and leave the anchor's `aria-describedby`\nuntouched, e.g. when the anchor already documents the badge's meaning some other way.",
+          "name": "UseBadge",
+          "slots": [
+            {
+              "description": "Badge content, e.g. a count or short label. Ignored when `dot` is set.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "anchortarget",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "anchortarget",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dot",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "blockalign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "attribute": "blockalign",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inlinealign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"end\"",
+              "attribute": "inlinealign",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "options",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "anchorElement",
+              "description": "The element this badge is anchored to. Reading returns whatever element was last resolved,\neither from the `anchortarget` id or set here directly. Setting it anchors to that element\ninstead of resolving `anchortarget`, for cases where the target has no id to reference."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Id of the element to anchor to, resolved in the badge's own tree.",
+              "name": "anchortarget",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "anchortarget"
+            },
+            {
+              "description": "Renders as a fixed-size dot instead of the slotted content.",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dot"
+            },
+            {
+              "description": "`\"start\" | \"end\"`: Aligns the badge along the block axis relative to its anchor.",
+              "name": "blockalign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "fieldName": "blockalign"
+            },
+            {
+              "description": "`\"start\" | \"end\"`: Aligns the badge along the inline axis relative to its anchor.",
+              "name": "inlinealign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"end\"",
+              "fieldName": "inlinealign"
+            },
+            {
+              "description": "Space-separated feature flags. `noaria` opts out of the automatic `aria-describedby` wiring described above.",
+              "name": "options",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "options"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseBadge",
+          "declaration": {
+            "name": "UseBadge",
+            "module": "src/elements/use-badge/use-badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-badge",
+          "declaration": {
+            "name": "UseBadge",
+            "module": "src/elements/use-badge/use-badge.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-calendar-base/use-calendar-base.ts",
@@ -488,151 +631,8 @@
           "kind": "js",
           "name": "UseCalendarBase",
           "declaration": {
-            "name": "UseCalendarBase",
-            "module": "src/elements/use-calendar-base/use-calendar-base.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-badge/use-badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`use-badge` renders a small indicator anchored to another element's corner, using\n[CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)\ninstead of the classic `position: absolute` + negative-offset trick. This lets the badge live\nanywhere in the DOM rather than being a child of the element it decorates. A badge's shape,\ncolor, and positioning ship built in — reading from the design system's tokens when\n`tokens.css` is loaded, and falling back to sensible defaults otherwise — so no theme is\nrequired to get a working, visible badge.\n\nPoint a badge at its target with the `anchortarget` attribute, set to the target's `id`\n(named to avoid colliding with the `anchor` content attribute HTML is gaining natively):\n\n```html\n<button type=\"button\" id=\"inbox\">Inbox</button>\n<use-badge anchortarget=\"inbox\">99+</use-badge>\n```\n\nThe badge and its anchor must live in the same DOM tree — a badge cannot reach an anchor\ninside another component's shadow root, and an anchor's `anchor-name` set inside a shadow\ntree's stylesheet is not visible here. No positioned ancestor or shared containing block is\nrequired: anchor positioning resolves the badge's location straight from the anchor's own\ngeometry, so the badge can sit anywhere else in the DOM tree.\n\nWithout a resolved anchor — `anchortarget` unset, pointing at a missing id, or `anchorElement`\nnever assigned — the badge has no `:state(anchored)` and renders as a plain inline chip in\nnormal document flow, still using the same color/shape styling.\n\nSome components render their host as `display: contents`, which has no box of its own for CSS\nanchor positioning to resolve against. If the anchor computes a non-empty `--usewc-anchor-name`\ncustom property, the badge uses that dashed-ident as its `position-anchor` directly instead of\ngenerating and writing its own onto the anchor — letting a component publish the name of a\nreal, box-generating part of itself (already established for its own purposes) for badges to\ntarget instead of its host, even though that part lives inside the component's own shadow root.\nThis mechanism is shared with `use-menu`/`use-anchored` via `AnchorController`; components\nwithout a `display: contents` host don't need to publish anything.\n\n**Known Firefox limitation:** anchoring across a shadow root boundary this way — the case\n`--usewc-anchor-name` exists for — is mispositioned in Firefox as of this writing. Verified\ndirectly: `anchor()`'s logical `start`/`end` keywords resolve backwards on both axes\nspecifically for a cross-shadow-root anchor reference, in Firefox only — the same anchor()\ncalls resolve correctly for a same-tree anchor in Firefox, and cross-shadow anchoring resolves\ncorrectly in Chromium and Safari. A badge anchored to a plain element (button, input, anything\nthat isn't itself relying on this escape hatch) is unaffected in every engine, including\nFirefox.\n\n## Side effects\n\nThe badge is a sibling of its anchor rather than a child, so **as a side effect, a badge\nmutates its anchor element**: it appends its own id to the anchor's `aria-describedby`\n(preserving any ids already there, the same way `anchor-name` is appended rather than\nreplaced) to keep its content connected to the anchor for assistive technology. This means a\nbadge's content, or its `aria-label` when set, is announced as part of interacting with the\nanchor, e.g. \"Inbox button, 3\". A `dot` badge has no content of its own, so set `aria-label`\ndirectly on `<use-badge>` for a meaningful description (e.g. `aria-label=\"3 unread messages\"`);\nwithout one, the description contributes nothing and the anchor announces as before.\n\nAvoid adding `aria-hidden` to `<use-badge>` if you rely on this: while the description\ncomputation is specified to still read a hidden node when it's the direct target of\n`aria-describedby`, support for that specific case is inconsistent across browsers and screen\nreaders.\n\nSet `options=\"noaria\"` to opt a badge out of this and leave the anchor's `aria-describedby`\nuntouched, e.g. when the anchor already documents the badge's meaning some other way.",
-          "name": "UseBadge",
-          "slots": [
-            {
-              "description": "Badge content, e.g. a count or short label. Ignored when `dot` is set.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "anchortarget",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "anchortarget",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "dot",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "blockalign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"start\"",
-              "attribute": "blockalign",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "inlinealign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"end\"",
-              "attribute": "inlinealign",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "options",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "options",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "anchorElement",
-              "description": "The element this badge is anchored to. Reading returns whatever element was last resolved,\neither from the `anchortarget` id or set here directly. Setting it anchors to that element\ninstead of resolving `anchortarget`, for cases where the target has no id to reference."
-            }
-          ],
-          "attributes": [
-            {
-              "description": "Id of the element to anchor to, resolved in the badge's own tree.",
-              "name": "anchortarget",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "anchortarget"
-            },
-            {
-              "description": "Renders as a fixed-size dot instead of the slotted content.",
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dot"
-            },
-            {
-              "description": "`\"start\" | \"end\"`: Aligns the badge along the block axis relative to its anchor.",
-              "name": "blockalign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"start\"",
-              "fieldName": "blockalign"
-            },
-            {
-              "description": "`\"start\" | \"end\"`: Aligns the badge along the inline axis relative to its anchor.",
-              "name": "inlinealign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"end\"",
-              "fieldName": "inlinealign"
-            },
-            {
-              "description": "Space-separated feature flags. `noaria` opts out of the automatic `aria-describedby` wiring described above.",
-              "name": "options",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "options"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseBadge",
-          "declaration": {
-            "name": "UseBadge",
-            "module": "src/elements/use-badge/use-badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-badge",
-          "declaration": {
-            "name": "UseBadge",
-            "module": "src/elements/use-badge/use-badge.ts"
+            "name": "UseCalendarBase",
+            "module": "src/elements/use-calendar-base/use-calendar-base.ts"
           }
         }
       ]
@@ -767,132 +767,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-date-input/use-date-input.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.",
-          "name": "UseDateInput",
-          "members": [
-            {
-              "kind": "field",
-              "name": "yearInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "monthInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dayInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "id"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "disabled"
-            },
-            {
-              "kind": "field",
-              "name": "readOnly",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "readonly"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "YYYY-MM-DD",
-              "attribute": "value"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "disabled"
-            },
-            {
-              "name": "readonly",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "readOnly"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "YYYY-MM-DD",
-              "fieldName": "value"
-            },
-            {
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "lang",
-              "inheritedFrom": {
-                "name": "UseLocaleElement",
-                "module": "src/elements/use-locale-element/use-locale-element.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "UseLocaleElement",
-            "module": "/src/elements/use-locale-element/use-locale-element"
-          },
-          "tagName": "use-date-input",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseDateInput",
-          "declaration": {
-            "name": "UseDateInput",
-            "module": "src/elements/use-date-input/use-date-input.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-date-input",
-          "declaration": {
-            "name": "UseDateInput",
-            "module": "src/elements/use-date-input/use-date-input.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-picker/use-date-picker.ts",
@@ -1556,6 +1430,132 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-date-input/use-date-input.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.",
+          "name": "UseDateInput",
+          "members": [
+            {
+              "kind": "field",
+              "name": "yearInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "monthInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dayInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "readOnly",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "YYYY-MM-DD",
+              "attribute": "value"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "readOnly"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "YYYY-MM-DD",
+              "fieldName": "value"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
+          },
+          "tagName": "use-date-input",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseDateInput",
+          "declaration": {
+            "name": "UseDateInput",
+            "module": "src/elements/use-date-input/use-date-input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-date-input",
+          "declaration": {
+            "name": "UseDateInput",
+            "module": "src/elements/use-date-input/use-date-input.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-datetime-input/use-datetime-input.ts",

package/dist/design-system.css

@@ -232,12 +232,13 @@
       all: revert-layer;
     }
 
-    &:hover:not(:disabled):not(:checked) {
+    &:hover:not(:disabled, [aria-disabled="true"], [aria-readonly="true"], :checked) {
       --usewc-color-selector-border: var(--usewc-color-selector-border-hover);
       --usewc-color-selector-background: var(--usewc-color-selector-background-hover);
     }
 
-    &:checked {
+    &:checked,
+    &:indeterminate {
       --usewc-color-selector-border: var(--usewc-color-selector-border-checked);
       --usewc-color-selector-background: var(--usewc-color-selector-background-checked);
     }
@@ -252,6 +253,12 @@
       --usewc-effect-pointer-events: none;
     }
 
+    /* Readonly reads at full strength but can't be toggled by pointer (keyboard is caught by the
+       host). Kept focusable so its state is still announced. */
+    &[aria-readonly="true"] {
+      --usewc-effect-pointer-events: none;
+    }
+
     &::after {
       content: "";
       position: absolute;
@@ -278,6 +285,18 @@
       }
     }
 
+    &[type="checkbox"]:indeterminate::after {
+      display: block;
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 20%;
+      width: 60%;
+      height: 0;
+      transform: translateY(-50%);
+      border-block-start: var(--usewc-layout-selector-checkbox-icon-border-size) solid
+        var(--usewc-color-selector-icon-fill);
+    }
+
     &[type="radio"] {
       border-radius: 50%;
 
@@ -1241,8 +1260,13 @@
   }
 }
 
-/* Grid — a cell holding a use-intl-number reads as tabular data, so it defaults to end-aligned
-   text with tabular-nums, which locks every digit to the same width so values stack and compare
+/* Grid — `.table` is the default treatment a bare `use-grid` gets (bordered surface, a muted
+   header, rounded per-row hover/selected bands, roomy cells); `.chips` and `.list` opt out of it
+   into their own layouts. `use-gridhead`/`use-gridbody`/`use-gridcell` all render into light DOM,
+   so this layer styles them directly; `use-gridrow` has a shadow root but its host is styleable.
+
+   A cell holding a use-intl-number reads as tabular data, so it defaults to end-aligned text
+   with tabular-nums, which locks every digit to the same width so values stack and compare
    cleanly down a column. text-align and font-variant-numeric are both inherited, so setting them
    on use-gridcell reaches the formatted text inside use-intl-number's shadow root without needing
    a rule scoped to use-intl-number itself. */
@@ -1255,6 +1279,446 @@
       all: revert-layer;
     }
   }
+
+  use-grid:not(.chips, .list, .appearance-native) {
+    display: block;
+    overflow: clip;
+    border: var(--usewc-layout-grid-border) solid var(--usewc-color-grid-border);
+    border-radius: var(--usewc-effect-grid-border-radius);
+    background: var(--usewc-color-grid-background);
+    color: var(--usewc-color-document-text);
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+
+    /* `.compact` just re-points the cell/gap tokens every rule below already reads — the box
+       model is unchanged, the rows are simply shorter. */
+    &.compact {
+      --usewc-layout-grid-cell-line-height: var(--usewc-layout-grid-compact-cell-line-height);
+      --usewc-layout-grid-cell-padding-block: var(--usewc-layout-grid-compact-cell-padding-block);
+      --usewc-layout-grid-cell-padding-inline: var(--usewc-layout-grid-compact-cell-padding-inline);
+      --usewc-layout-grid-row-gap: var(--usewc-layout-grid-compact-row-gap);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* The body insets its rows from the grid edge (`--grid-body-inset`) and spaces them with a real
+       `gap`; the row edge is where the hover/selected band aligns, so no extra ::before layer. */
+    use-gridbody {
+      display: flex;
+      flex-direction: column;
+      gap: var(--usewc-layout-grid-row-gap);
+      padding-block: var(--usewc-layout-grid-body-padding-block);
+      padding-inline: var(--usewc-layout-grid-body-inset);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* Inline padding is the breathing room between the row edge (band edge) and the text. Header
+       rows take the same inline padding, plus the head's own `--grid-body-inset`, so a header cell
+       lines up with the body cell below it. No block padding — cell padding sets the row height. */
+    use-gridrow {
+      padding-inline: var(--usewc-layout-grid-row-padding-inline);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* The hover/selected band is painted straight onto the body row now (no ::before layer). This
+       rule owns every `background` / `border-radius` declaration; the hover/selected/consecutive
+       rules below only re-point the `--usewc-grid-row-*` variables it reads, so inside
+       `use-theme-escape` the `all: revert-layer` here drops the paint and those variable writes
+       have nothing to feed. Corner variables default to the full radius; the consecutive-selected
+       rules square off just the shared edge. */
+    use-gridbody use-gridrow {
+      border-start-start-radius: var(--usewc-grid-row-corner-start-start, var(--usewc-effect-grid-row-border-radius));
+      border-start-end-radius: var(--usewc-grid-row-corner-start-end, var(--usewc-effect-grid-row-border-radius));
+      border-end-start-radius: var(--usewc-grid-row-corner-end-start, var(--usewc-effect-grid-row-border-radius));
+      border-end-end-radius: var(--usewc-grid-row-corner-end-end, var(--usewc-effect-grid-row-border-radius));
+      background: var(--usewc-color-grid-row-background, transparent);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    use-gridhead {
+      display: block;
+      background: var(--usewc-color-grid-header-background);
+      border-block-end: var(--usewc-layout-grid-border) solid var(--usewc-color-grid-border);
+      color: var(--usewc-color-grid-header-text);
+      font-weight: var(--usewc-font-grid-header-weight);
+      /* Same block padding as the body — clears the grid's `overflow: clip` edge so a focused
+         header cell's outline isn't sheared off at the top. */
+      padding-block: var(--usewc-layout-grid-body-padding-block);
+      padding-inline: var(--usewc-layout-grid-body-inset);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* A short vertical rule between column headers — a centred ::before rather than a
+       border-inline-start so it can sit shorter than the cell rather than spanning it. */
+    use-gridhead use-gridcell[role="columnheader"] {
+      position: relative;
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+
+      & + use-gridcell[role="columnheader"]::before {
+        content: "";
+        position: absolute;
+        inset-inline-start: 0;
+        inset-block-start: 50%;
+        transform: translateY(-50%);
+        block-size: var(--usewc-layout-grid-header-divider-height);
+        inline-size: var(--usewc-layout-grid-border);
+        background: var(--usewc-color-grid-border);
+      }
+
+      use-theme-escape & + use-gridcell[role="columnheader"]::before {
+        all: revert-layer;
+      }
+    }
+
+    /* ...but not right after a selection header cell — a select column reads as separate from the
+       data columns without a rule between it and the first one. `use-grid` injects the leading
+       cell with `data-usewc-selection-cell` (a real select-all checkbox, or an inert hidden radio
+       spacer in single-select mode); a dev driving selection by hand uses a bare checkbox/radio. */
+    use-gridhead
+      use-gridcell:is([data-usewc-selection-cell], :has(> input:is([type="checkbox"], [type="radio"])))
+      + use-gridcell[role="columnheader"]::before {
+      content: none;
+    }
+
+    use-theme-escape
+      use-gridhead
+      use-gridcell:is([data-usewc-selection-cell], :has(> input:is([type="checkbox"], [type="radio"])))
+      + use-gridcell[role="columnheader"]::before {
+      all: revert-layer;
+    }
+
+    use-gridcell {
+      line-height: var(--usewc-layout-grid-cell-line-height);
+      padding: var(--usewc-layout-grid-cell-padding-block) var(--usewc-layout-grid-cell-padding-inline);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* A cell whose only content is a selection control sizes to that control instead of taking
+       an equal flex share like a data column (use-gridrow's shadow makes every cell `flex: 1 1 0`
+       by default), and tightens its inline padding so the checkbox doesn't sit in a wide gutter.
+       This hits both the body checkbox/radio and a "select all" box in the matching header cell,
+       so the column lines up. */
+    use-gridcell[data-usewc-selection-cell],
+    use-gridcell:has(> input:is([type="checkbox"], [type="radio"]):only-child),
+    use-gridcell:has(> label:only-child > input:is([type="checkbox"], [type="radio"])) {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-inline-start: var(--usewc-layout-grid-selector-cell-padding-inline);
+      padding-inline-end: 0;
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* The row lays its indicator slots and cells out as flex items; the slots carry a fixed
+       1lh size, so `align-self` centres the slot in the row, and flexing whichever slot is
+       showing centres the masked glyph inside it (no inline-block `vertical-align` guesswork).
+       The `[selected]` / `:not([selected])` split keeps the hidden slot on the shadow's
+       `display: none`; the `:not([selectmode="none"])` guard keeps a selection-less grid blank, and
+       `use-gridrow:not([data-usewc-selection-column])` (an attribute use-grid sets on every row it
+       injects a checkbox/radio cell into) keeps it blank when that control is the indicator —
+       otherwise the empty 1lh slot renders as a ghost column left of the control.
+
+       The leading gutter matches the injected checkbox/radio cell's inline padding, so the ✔ glyph
+       and a native selection control land in the same column position across grids. */
+    use-gridrow::part(selected-indicator),
+    use-gridrow::part(deselected-indicator) {
+      align-self: center;
+      margin-inline-start: var(--usewc-layout-grid-selector-cell-padding-inline);
+    }
+
+    &:not([selectmode="none"]) use-gridrow:not([data-usewc-selection-column])[selected]::part(selected-indicator),
+    &:not([selectmode="none"])
+      use-gridrow:not([data-usewc-selection-column]):not([selected])::part(deselected-indicator) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Swap the built-in ✔ / blank glyphs for the same masked checkmark shape use-option and
+       use-treeitem render, so a theme recolours or reshapes every selection indicator from one
+       set of tokens. use-grid clones its default indicator spans into each body row as light-DOM
+       children carrying `part="selected-indicator-default"` / `-deselected-indicator-default`;
+       a custom indicator slotted by the author has no such part, so this never clobbers it. */
+    use-gridrow > [part~="selected-indicator-default"],
+    use-gridrow > [part~="deselected-indicator-default"] {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-indent: 100%;
+      inline-size: var(--usewc-layout-selected-indicator-size);
+      block-size: var(--usewc-layout-selected-indicator-size);
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    use-gridrow > [part~="selected-indicator-default"] {
+      background-color: var(--usewc-effect-selected-indicator-color, currentColor);
+      mask-image: var(--usewc-effect-selected-indicator-mask-image, none);
+    }
+
+    use-gridrow > [part~="deselected-indicator-default"] {
+      background-color: var(--usewc-effect-deselected-indicator-color, transparent);
+      mask-image: var(--usewc-effect-deselected-indicator-mask-image, none);
+    }
+  }
+
+  /* A row counts as selected when use-grid's own `selectmode` marked it `[selected]`, or when the
+     dev drove selection themselves with a native checkbox/radio in a cell (`selectmode="none"`,
+     the row's `:checked` box is the only selection control). Both light the same band. These
+     rules only move `--usewc-color-grid-row-background` — the body-row rule above reads it into
+     `background` and carries the `use-theme-escape` revert. */
+  use-grid:not(.chips, .list) use-gridbody use-gridrow:is([selected], :has(> use-gridcell input:checked)) {
+    --usewc-color-grid-row-background: var(--usewc-color-grid-row-background-selected);
+  }
+
+  /* Within a run of consecutive selected rows the bands keep their gap but nearly square off the
+     shared edge, so the run reads as grouped without merging into one shape. The "followed by a
+     selected row" test is spelled out as two `:has()` alternatives rather than
+     `:has(+ :is([selected], :has(…)))` because `:has()` can't be nested inside `:has()`. */
+  use-grid:not(.chips, .list)
+    use-gridbody
+    use-gridrow:is([selected], :has(> use-gridcell input:checked)):is(
+      :has(+ use-gridrow[selected]),
+      :has(+ use-gridrow > use-gridcell input:checked)
+    ) {
+    --usewc-grid-row-corner-end-start: var(--usewc-effect-grid-row-border-radius-sequential);
+    --usewc-grid-row-corner-end-end: var(--usewc-effect-grid-row-border-radius-sequential);
+  }
+
+  use-grid:not(.chips, .list)
+    use-gridbody
+    use-gridrow:is([selected], :has(> use-gridcell input:checked))
+    + use-gridrow:is([selected], :has(> use-gridcell input:checked)) {
+    --usewc-grid-row-corner-start-start: var(--usewc-effect-grid-row-border-radius-sequential);
+    --usewc-grid-row-corner-start-end: var(--usewc-effect-grid-row-border-radius-sequential);
+  }
+
+  /* Whole-row hover band applies where a row click actually selects — `selectmode` is on and
+     `selectwith` still includes the row gesture (absent attribute means the default, `row`). A
+     disabled row (the `disabled` prop, or a bare `aria-disabled="true"`) never gets it. */
+  use-grid:not(.chips, .list):not([selectmode="none"]):is(:not([selectwith]), [selectwith~="row"])
+    use-gridbody
+    use-gridrow:not([disabled], [aria-disabled="true"]):hover,
+  /* ...and also where the row carries a selection control (injected column or a hand-placed
+     checkbox/radio), so hovering the row surfaces the control even when the row isn't clickable. */
+  use-grid:not(.chips, .list)
+    use-gridbody
+    use-gridrow:not([disabled], [aria-disabled="true"]):has(
+      > use-gridcell input:is([type="checkbox"], [type="radio"])
+    ):hover {
+    --usewc-color-grid-row-background: var(--usewc-color-grid-row-background-hover);
+  }
+
+  use-grid:not(.chips, .list)
+    use-gridbody
+    use-gridrow:not([disabled], [aria-disabled="true"]):is([selected], :has(> use-gridcell input:checked)):hover {
+    --usewc-color-grid-row-background: var(--usewc-color-grid-row-background-selected-hover);
+  }
+
+  /* Cursor for a selectable, non-disabled row body. */
+  use-grid:not(.chips, .list):not([selectmode="none"]):is(:not([selectwith]), [selectwith~="row"])
+    use-gridbody
+    use-gridrow:not([disabled], [aria-disabled="true"]) {
+    cursor: default;
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+  }
+
+  /* A disabled row — the `disabled` prop (which the component also reflects to `aria-disabled`),
+     or a bare `aria-disabled="true"` a dev sets directly. The component shadow already dims it;
+     this aligns that with the form-control disabled opacity token. It stays keyboard-navigable
+     and AT-perceivable — the component only blocks the selection gestures. An injected
+     checkbox/radio in the row carries `disabled`, so selector.css fades and inerts it too. */
+  use-grid:not(.chips, .list) use-gridbody use-gridrow:is([disabled], [aria-disabled="true"]) {
+    opacity: var(--usewc-effect-form-opacity-disabled);
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+  }
+
+  /* The themed focus ring on the cells of the table and list variants; chips ring the whole pill
+     (its row) instead, in its own block below. */
+  use-grid:not(.appearance-native, .chips) use-gridcell {
+    --usewc-effect-outline-width: 0;
+
+    outline: var(--usewc-effect-outline-width) var(--usewc-effect-outline-style) var(--usewc-color-outline);
+    outline-offset: var(--usewc-effect-outline-offset-flush);
+    transition: var(--usewc-effect-outline-transition);
+
+    &:focus-visible {
+      --usewc-effect-outline-width: var(--usewc-effect-outline-size);
+    }
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+  }
+
+  /* The data column right after a selection checkbox/radio sits flush against it, so inset that
+     cell's ring by the ring width — otherwise it paints over the control. */
+  use-grid:not(.chips, .list)
+    use-gridcell:is([data-usewc-selection-cell], :has(> input:is([type="checkbox"], [type="radio"])))
+    + use-gridcell {
+    outline-offset: calc(-1 * var(--usewc-effect-outline-size));
+  }
+
+  /* Chips — rows flow as inline pills; the select/deselect indicators are hidden since a chip
+     conveys membership by simply existing (and usually carrying its own remove control). */
+  use-grid.chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--usewc-layout-grid-chip-gap);
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+
+    use-gridrow {
+      display: inline-flex;
+      align-items: center;
+      border: var(--usewc-layout-grid-border) solid var(--usewc-color-grid-chip-border);
+      border-radius: var(--usewc-effect-grid-chip-border-radius);
+      background: var(--usewc-color-grid-chip-background);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    use-gridcell {
+      /* Content-sized, not an equal flex share — otherwise a multi-cell chip (label + a remove
+         button) splits the pill and wraps the label. */
+      flex: 0 0 auto;
+      padding: var(--usewc-layout-grid-chip-padding-block) var(--usewc-layout-grid-chip-padding-inline);
+      /* The pill (its row) carries the focus ring instead, so drop the cell's own — otherwise the
+         browser's default outline stacks on top of it. */
+      outline: none;
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* A leading cell followed by another (the label before a remove button) drops its trailing
+       padding to a hair, and the trailing cell drops its leading padding to nothing and keeps only
+       a hair from the pill's end — so the label and the compact button sit close together. */
+    use-gridcell:has(+ use-gridcell) {
+      padding-inline-end: var(--usewc-layout-grid-chip-padding-block);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    use-gridcell + use-gridcell {
+      padding-inline: 0 var(--usewc-layout-grid-chip-padding-block);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* A themed button in a chip (the remove control) is a square, dropped to zero inline padding
+       and rounded to the pill's radius, so it reads as part of the chip rather than a stray
+       button. `1lh` (its own line-height) drives a clean square that scales with the text. */
+    use-gridcell button {
+      --usewc-layout-button-padding-inline: 0;
+      --usewc-layout-button-padding-block: 0;
+      --usewc-effect-button-radius: var(--usewc-effect-grid-chip-border-radius);
+
+      inline-size: 1lh;
+      block-size: 1lh;
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    /* Focusing a cell rings the whole pill — the pill is the unit, and its border-radius rounds
+       the outline for free. */
+    use-gridrow:has(> use-gridcell:focus-visible) {
+      outline: var(--usewc-effect-outline-size) var(--usewc-effect-outline-style) var(--usewc-color-outline);
+      outline-offset: var(--usewc-effect-outline-offset);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    use-gridrow::part(selected-indicator),
+    use-gridrow::part(deselected-indicator) {
+      display: none;
+    }
+  }
+
+  /* List — the master/detail layout (a stacked row with its own internal grid-template). The
+     row-internal template still lives in author CSS; this block only supplies the shared chrome
+     (row padding, hover, and a selected-row marker). WIP: the `.list` class is still being
+     defined, so expect this to grow. */
+  use-grid.list {
+    display: flex;
+    flex-direction: column;
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+
+    use-gridrow {
+      padding: var(--usewc-layout-grid-list-row-padding);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+
+      &:is(:hover, :focus-within) {
+        background: var(--usewc-color-grid-list-row-background-hover);
+      }
+
+      &[selected] {
+        box-shadow: inset var(--usewc-layout-grid-list-row-selected-marker) 0 0 0
+          var(--usewc-color-grid-list-row-selected-marker);
+      }
+    }
+
+    use-gridrow::part(selected-indicator),
+    use-gridrow::part(deselected-indicator) {
+      display: none;
+    }
+  }
 }
 
 /* Card — `use-card` is a theme-only tag, styled like `use-field`/`use-selector` with no

package/dist/tokens.css

@@ -136,7 +136,10 @@
   --usewc-icon-caret-block-start: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8L18.9282 15.5L5.0718 15.5L12 8Z' fill='black' /%3E%3C/svg%3E");
   --usewc-icon-caret-inline-end: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12L8.5 18.9282L8.5 5.0718Z' fill='black' /%3E%3C/svg%3E");
   --usewc-icon-caret-inline-start: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12L15.5 5.0718L15.5 18.9282Z' fill='black' /%3E%3C/svg%3E");
-  --usewc-icon-checkmark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L10 18L19 7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
+  /* The checkmark path is lifted ~2 units above the geometric centre of the 24×24 box: a
+     checkmark's visual mass sits toward its lower vertex, so it needs the optical nudge to read
+     as centred wherever it's masked (use-option, use-treeitem, use-grid selection indicators). */
+  --usewc-icon-checkmark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11L10 16L19 5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
 
   /** Motion */
   --usewc-transition-duration-fast: 120ms;
@@ -544,6 +547,63 @@
   --usewc-font-badge-weight: var(--usewc-font-weight-medium);
   --usewc-effect-badge-border-radius: var(--usewc-effect-border-radius-pill);
 
+  /* Grid — `.table` is the default treatment a bare `use-grid` gets; `.chips` and `.list`
+     (the latter still being defined) opt into their own layouts instead. */
+  --usewc-color-grid-border: var(--usewc-color-button-base-border-static);
+  /* The table itself and its header paint no fill — only the hover and selected row bands do. */
+  --usewc-color-grid-background: transparent;
+  --usewc-color-grid-header-background: transparent;
+  --usewc-color-grid-header-text: var(--usewc-color-gray-600);
+  --usewc-color-grid-row-background-hover: oklch(from var(--usewc-color-gray-300) l c h / 0.55);
+  /* A super-light tint of the primary — its hue and a whisper of its chroma, floated up to
+     near-white — so it tracks the primary even if that's overridden. */
+  --usewc-color-grid-row-background-selected: oklch(from var(--usewc-color-brand-primary) 0.96 0.03 h);
+  /* Same tint, a touch deeper, for a hover landing on an already-selected row. */
+  --usewc-color-grid-row-background-selected-hover: oklch(from var(--usewc-color-brand-primary) 0.93 0.045 h);
+  --usewc-layout-grid-border: var(--usewc-space-1);
+  --usewc-layout-grid-header-divider-height: 60%;
+  --usewc-layout-grid-body-inset: var(--usewc-space-4);
+  /* Clear space between the header divider (and the grid's bottom edge) and the first/last row
+     band. Matches the row gap so the body's inset reads as uniform with the space between rows. */
+  --usewc-layout-grid-body-padding-block: var(--usewc-space-4);
+  --usewc-layout-grid-row-padding-inline: var(--usewc-space-4);
+  /* The visible gap between two body rows' bands, applied as a real `gap` on the body flex column. */
+  --usewc-layout-grid-row-gap: var(--usewc-space-4);
+  --usewc-effect-grid-row-border-radius: var(--usewc-effect-border-radius-6);
+  /* The edge a selected-row band shares with an adjacent selected row: nearly square, but a hair
+     of rounding rather than a hard corner. */
+  --usewc-effect-grid-row-border-radius-sequential: var(--usewc-effect-border-radius-2);
+  /* Cells follow the same box model as input/button: a fixed line-height plus symmetric block
+     padding sets a predictable control-height per row, and the header cells take the identical
+     values so the header row is exactly as tall as a body row. */
+  --usewc-layout-grid-cell-line-height: var(--usewc-line-height-24);
+  --usewc-layout-grid-cell-padding-block: var(--usewc-space-6);
+  --usewc-layout-grid-cell-padding-inline: var(--usewc-space-12);
+  /* A cell holding only a selection checkbox/radio — no data column padding, just enough to keep
+     the control off the row edge. The column divider that would sit between it and the first data
+     column is dropped, so its trailing edge doesn't need extra room. */
+  --usewc-layout-grid-selector-cell-padding-inline: var(--usewc-space-4);
+  --usewc-font-grid-header-weight: var(--usewc-font-weight-medium);
+  --usewc-effect-grid-border-radius: var(--usewc-effect-border-radius-8);
+  /* -- Compact variant (`.compact`): a shorter line-height and tighter block padding / row gap,
+     the same way button's small size steps down from its base. */
+  --usewc-layout-grid-compact-cell-line-height: var(--usewc-line-height-20);
+  --usewc-layout-grid-compact-cell-padding-block: var(--usewc-space-4);
+  --usewc-layout-grid-compact-cell-padding-inline: var(--usewc-space-8);
+  --usewc-layout-grid-compact-row-gap: var(--usewc-space-2);
+  /* -- Chips variant */
+  --usewc-layout-grid-chip-gap: var(--usewc-space-8);
+  --usewc-layout-grid-chip-padding-block: var(--usewc-space-2);
+  --usewc-layout-grid-chip-padding-inline: var(--usewc-space-8);
+  --usewc-color-grid-chip-border: var(--usewc-color-grid-border);
+  --usewc-color-grid-chip-background: var(--usewc-color-canvas-background);
+  --usewc-effect-grid-chip-border-radius: var(--usewc-effect-border-radius-pill);
+  /* -- List variant (WIP) */
+  --usewc-layout-grid-list-row-padding: var(--usewc-space-8);
+  --usewc-color-grid-list-row-background-hover: var(--usewc-color-grid-row-background-hover);
+  --usewc-color-grid-list-row-selected-marker: var(--usewc-color-brand-accent);
+  --usewc-layout-grid-list-row-selected-marker: var(--usewc-space-2);
+
   /* Menu */
   --usewc-layout-popover-menu-item-padding-inline: var(--usewc-space-4);
   --usewc-layout-popover-menu-item-padding-block: var(--usewc-space-2);
@@ -679,6 +739,12 @@
     --usewc-effect-select-trigger-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='rgb(229,231,235)' /%3E%3C/svg%3E");
     --usewc-effect-menu-item-checkmark-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L10 18L19 7' stroke='rgb(229,231,235)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
     --usewc-color-surface-backdrop: oklch(0% 0 0 / 0.6);
+    /* "Super light" can't float up on a near-black page — hold the primary's hue and chroma
+       but drop the lightness so the tint reads as a dark primary wash instead. */
+    --usewc-color-grid-row-background-selected: oklch(from var(--usewc-color-brand-primary) 0.3 0.05 h);
+    --usewc-color-grid-row-background-selected-hover: oklch(from var(--usewc-color-brand-primary) 0.36 0.06 h);
+    --usewc-color-grid-row-background-hover: oklch(from var(--usewc-color-gray-800) l c h / 0.6);
+    --usewc-color-grid-header-text: var(--usewc-color-gray-200);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.59",
+  "version": "1.0.0-pre.60",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",

package/vscode.html-custom-data.json

@@ -63,17 +63,6 @@
       "attributes": [],
       "references": []
     },
-    {
-      "name": "use-date-input",
-      "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
-      "attributes": [
-        { "name": "disabled", "values": [] },
-        { "name": "readonly", "values": [] },
-        { "name": "value", "values": [] },
-        { "name": "lang", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "use-date-picker",
       "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n\nCustomize day rendering on an instance:\n```ts\ndatePicker.renderDay = ({ day, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${day}</strong>` : String(day);\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyDatePicker extends UseDatePicker {\n  renderDay(data: { day: number; date: string }, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.day}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\n\n### **Methods:**\n - **renderDay(data: _{ day: number; date: string }_, _html: _LitHtml_): _TemplateResult | string_** - See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",
@@ -107,6 +96,17 @@
       ],
       "references": []
     },
+    {
+      "name": "use-date-input",
+      "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
+      "attributes": [
+        { "name": "disabled", "values": [] },
+        { "name": "readonly", "values": [] },
+        { "name": "value", "values": [] },
+        { "name": "lang", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "use-datetime-input",
       "description": "Displays a date and time picker by combining `use-date` and `use-time`.\n\nThe value format is ISO 8601-like: `YYYY-MM-DDTHH:MM:SS.mmm`.\n---\n",