use-wc 1.0.0-pre.62 → 1.0.0-pre.64

package/custom-elements.json

@@ -89,149 +89,6 @@
         }
       ]
     },
-    {
-      "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",
@@ -637,6 +494,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-calendarday/use-calendarday.ts",
@@ -2167,6 +2167,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-grid/constants.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SELECTION_CELL_ATTRIBUTE",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"data-usewc-selection-cell\""
+        },
+        {
+          "kind": "variable",
+          "name": "SELECTION_COLUMN_ATTRIBUTE",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"data-usewc-selection-column\""
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SELECTION_CELL_ATTRIBUTE",
+          "declaration": {
+            "name": "SELECTION_CELL_ATTRIBUTE",
+            "module": "src/elements/use-grid/constants.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SELECTION_COLUMN_ATTRIBUTE",
+          "declaration": {
+            "name": "SELECTION_COLUMN_ATTRIBUTE",
+            "module": "src/elements/use-grid/constants.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-grid/index.ts",
@@ -2244,6 +2284,16 @@
               "attribute": "selectmode",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "selectwith",
+              "type": {
+                "text": "SelectWith"
+              },
+              "default": "\"row\"",
+              "attribute": "selectwith",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "name",
@@ -2284,6 +2334,36 @@
               "attribute": "readonly",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "isMultiSelect",
+              "description": "`true` when `selectmode=\"multiple\"`. Read by `use-gridcell` selection cells.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "injectsSelectionColumn",
+              "description": "`true` when a checkbox/radio selection column should exist (`selectmode` on and `selectwith`\nincludes `control`). Read by `use-gridrow.reconcileSelectorCell`.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "selectionGroupName",
+              "description": "The shared `name` for injected radio controls — the grid's `name` when set, otherwise a stable\ngenerated id. Lazily created so single-select grids without a `name` still group correctly.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "isRowDisabled",
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "Element | null | undefined"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "value",
@@ -2301,6 +2381,14 @@
               "default": "\"none\"",
               "fieldName": "selectmode"
             },
+            {
+              "name": "selectwith",
+              "type": {
+                "text": "SelectWith"
+              },
+              "default": "\"row\"",
+              "fieldName": "selectwith"
+            },
             {
               "name": "name",
               "type": {
@@ -2343,6 +2431,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "SELECTION_CELL_ATTRIBUTE",
+          "declaration": {
+            "name": "SELECTION_CELL_ATTRIBUTE",
+            "module": "src/elements/use-grid/use-grid.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "UseGrid",
@@ -2586,6 +2682,10 @@
               "default": "\"\"",
               "attribute": "value",
               "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "reconcileSelectorCell"
             }
           ],
           "attributes": [

package/dist/design-system.css

@@ -977,6 +977,7 @@
     padding: var(--usewc-layout-popover-menu-padding);
     background: var(--usewc-color-popover-menu-background);
     border-radius: var(--usewc-effect-popover-menu-border-radius);
+    box-shadow: var(--usewc-effect-popover-menu-shadow);
 
     @supports (min-block-size: calc-size(fit-content, min(size, 1px))) {
       min-block-size: calc-size(fit-content, min(size, var(--min-size)));
@@ -1059,9 +1060,19 @@
 
   /* use-option's own checkmark now renders in-flow (a slot, not a background-image), so it
    already reserves its own leading space via the shared gap/padding above — no extra reservation
-   needed here. This block only concerns the native [role="menuitemcheckbox"/"menuitemradio"]
-   items, whose checkmark is still theme.css's own background-image on the host. */
-  use-menu :is([role="menuitemcheckbox"], [role="menuitemradio"]),
+   needed here. This block only concerns the native [role="menuitemcheckbox"/"menuitemradio"] and
+   [aria-selected] items, whose checkmark is theme.css's own ::before on the host. */
+  use-menu :is([role="menuitemcheckbox"], [role="menuitemradio"], [aria-selected]) {
+    &:has(+ :where([role="menuitemcheckbox"], [role="menuitemradio"], [aria-selected])),
+    & + :where([role="menuitemcheckbox"], [role="menuitemradio"], [aria-selected]) {
+      padding-inline-start: calc(var(--usewc-layout-input-padding-inline) * 2 + var(--usewc-layout-selector-width));
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+  }
+
   use-listbox-input {
     &:has(+ :where([role="menuitemcheckbox"], [role="menuitemradio"])),
     & + :where([role="menuitemcheckbox"], [role="menuitemradio"]) {
@@ -1130,19 +1141,46 @@
   }
 
   /* use-option's own checkmark is themed separately, in icon.css, as a mask on its
-   selected-indicator part rather than a background-image on the host — this rule only concerns
-   the native [aria-checked] menu items, which have no shadow part to target. */
-  use-menu [aria-checked="true"] {
-    background-image: var(--usewc-effect-menu-item-checkmark-background-image, none);
-    /* TODO use logical position */
-    background-position: left var(--usewc-layout-input-padding-inline) center;
-    background-repeat: no-repeat;
-    background-size: var(--usewc-effect-menu-item-checkmark-background-size, 1em);
+   selected-indicator part rather than a ::before on the host — this rule only concerns the
+   native [aria-checked] / [aria-selected] menu items, which have no shadow part to target. The
+   mark is the shared checkmark SVG masked and painted with its own color token (currentColor by
+   default, so it adapts to light/dark on its own), sitting in the leading gutter the
+   padding-reservation block above already carves out. */
+  use-menu :is([aria-checked="true"], [aria-selected="true"]) {
+    position: relative;
+    /* Reserve the gutter unconditionally so the mark never lands on the label, even for a lone
+     marked item with no marked sibling to trigger the adjacency reservation above. */
+    padding-inline-start: calc(var(--usewc-layout-input-padding-inline) * 2 + var(--usewc-layout-selector-width));
 
-    use-theme-escape & {
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: var(--usewc-layout-input-padding-inline);
+      margin-block: auto;
+      inline-size: var(--usewc-layout-menu-item-checkmark-size);
+      block-size: var(--usewc-layout-menu-item-checkmark-size);
+      background-color: var(--usewc-effect-menu-item-checkmark-color, currentColor);
+      mask-image: var(--usewc-effect-menu-item-checkmark-mask-image, var(--usewc-icon-checkmark));
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+    }
+
+    use-theme-escape &,
+    use-theme-escape &::before {
       all: revert-layer;
     }
   }
+
+  /* Before it upgrades, a popover-bound use-menu has no [popover] attribute yet — the element
+   injects it in connectedCallback — and isn't :defined, so its slotted items would flash as
+   block content on load. Hide it until then. Once upgraded it's :defined (this rule stops
+   matching) and the injected [popover] keeps it hidden while closed. A standalone always-visible
+   use-menu is hidden only for the few milliseconds until it upgrades. */
+  use-menu:not([popover]):not(:defined) {
+    display: none;
+  }
 }
 
 /* Badge — use-badge.ts ships fixed, literal default styles with no knowledge of the token
@@ -1401,9 +1439,10 @@
     }
 
     /* ...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. */
+       data columns without a rule between it and the first one. `use-gridrow` provisions 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 {
@@ -1451,8 +1490,8 @@
        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 —
+       `use-gridrow:not([data-usewc-selection-column])` (an attribute the row sets on itself while
+       it holds a checkbox/radio cell) 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
@@ -1557,6 +1596,25 @@
     --usewc-color-grid-row-background: var(--usewc-color-grid-row-background-selected-hover);
   }
 
+  /* In the `row control` combo mode a whole-row hover both lights the row band (above) and
+     previews the selection control, so the injected checkbox/radio picks up its own hover
+     treatment even though the pointer is over the row rather than the control itself. Mirrors the
+     `:not(...)` guards in selector.css — a disabled/readonly/checked control keeps its resting
+     state — and wins over that rule because `use-theme.grid` imports after `use-theme.selector`. */
+  use-grid:not(.chips, .list)[selectwith~="row"][selectwith~="control"]
+    use-gridbody
+    use-gridrow:not([disabled], [aria-disabled="true"]):hover
+    use-gridcell[data-usewc-selection-cell]
+    input:is([type="checkbox"], [type="radio"]):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);
+  }
+
   /* Cursor for a selectable, non-disabled row body. */
   use-grid:not(.chips, .list):not([selectmode="none"]):is(:not([selectwith]), [selectwith~="row"])
     use-gridbody

package/dist/docs/use-grid.md

@@ -17,6 +17,7 @@ Provide `aria-label` or `aria-labelledby` on the `use-grid` element so screen re
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | selectmode | `"multiple" \| "single" \| "none"` | `"none"` | - |
+| selectwith | `SelectWith` | `"row"` | - |
 | name | `string` | `""` | - |
 | role | `string` | `"grid"` | - |
 | disabled | `boolean` | `false` | - |
@@ -27,8 +28,19 @@ Provide `aria-label` or `aria-labelledby` on the `use-grid` element so screen re
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | internals | - | - | - |
+| isMultiSelect | - | - | `true` when `selectmode="multiple"`. Read by `use-gridcell` selection cells. |
+| injectsSelectionColumn | - | - | `true` when a checkbox/radio selection column should exist (`selectmode` on and `selectwith`
+includes `control`). Read by `use-gridrow.reconcileSelectorCell`. |
+| selectionGroupName | - | - | The shared `name` for injected radio controls — the grid's `name` when set, otherwise a stable
+generated id. Lazily created so single-select grids without a `name` still group correctly. |
 | value | `string[] \| string \| null` | - | - |
 
+## Methods
+
+| Name | Signature | Description |
+| --- | --- | --- |
+| isRowDisabled | `(row: Element \| null \| undefined)` | - |
+
 ## Slots
 
 | Name | Description |

package/dist/docs/use-gridrow.md

@@ -8,3 +8,9 @@
 | disabled | `boolean` | `false` | - |
 | readonly | `boolean` | `false` | - |
 | value | `string` | `""` | - |
+
+## Methods
+
+| Name | Signature | Description |
+| --- | --- | --- |
+| reconcileSelectorCell | `()` | - |

package/dist/tokens.css

@@ -238,8 +238,9 @@
   --usewc-layout-dropdown-trigger-icon-size: 1em;
   --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(55,65,81)' /%3E%3C/svg%3E");
   --usewc-effect-select-trigger-background-size: 1em;
-  --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(55,65,81)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
-  --usewc-effect-menu-item-checkmark-background-size: 1em;
+  --usewc-effect-menu-item-checkmark-mask-image: var(--usewc-icon-checkmark);
+  --usewc-effect-menu-item-checkmark-color: currentColor;
+  --usewc-layout-menu-item-checkmark-size: var(--usewc-layout-selected-indicator-size);
   --usewc-effect-tree-item-expanded-indicator-mask-image: var(--usewc-icon-caret-block-end);
   --usewc-effect-tree-item-expanded-indicator-color: currentColor;
   --usewc-effect-tree-item-collapsed-indicator-mask-image: var(--usewc-icon-caret-inline-end);
@@ -618,6 +619,7 @@
   --usewc-color-popover-menu-background: var(--usewc-color-canvas-background);
   --usewc-color-popover-menu-border: var(--usewc-color-button-base-border-static);
   --usewc-effect-popover-menu-border-radius: var(--usewc-effect-border-radius-8);
+  --usewc-effect-popover-menu-shadow: var(--usewc-effect-surface-shadow);
   --usewc-font-popover-menu-header-size: var(--usewc-font-size-14);
   --usewc-font-popover-menu-header-weight: var(--usewc-font-weight-medium);
   --usewc-color-popover-menu-header-text: var(--usewc-color-gray-400);
@@ -738,7 +740,6 @@
     --usewc-color-range-track-border-hover: var(--usewc-color-gray-600);
     --usewc-color-selector-background-hover: oklch(from var(--usewc-color-gray-700) l c h / 0.5);
     --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. */

package/package.json

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

package/vscode.html-custom-data.json

@@ -179,6 +179,7 @@
             { "name": "none" }
           ]
         },
+        { "name": "selectwith", "values": [{ "name": "SelectWith" }] },
         { "name": "name", "values": [] },
         { "name": "role", "values": [] },
         { "name": "disabled", "values": [] },