use-wc 1.0.0-pre.63 → 1.0.0-pre.65

package/custom-elements.json

@@ -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

@@ -1439,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 {
@@ -1489,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
@@ -1595,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
@@ -1966,9 +1986,27 @@
      anchored" signal — so a standalone `[popover]` or modal `<dialog>` elsewhere keeps its UA
      centering. `margin-block` (both edges) so the gap survives a `position-try` flip to the
      other side. The open-state check mirrors the positioning util: `:popover-open` for a
-     popover, `[open]` for a `<dialog>`. */
+     popover, `[open]` for a `<dialog>`.
+
+     The `max-block-size` override is what lets it flip on scroll instead of shrinking.
+     `popover.css` / `dialog.css` cap the surface at `min(80dvh, 100% - <pad>)`, where `100%`
+     is the free space on the anchor's *current* side — so as the anchor nears a viewport edge
+     that cap shrinks with it, the surface never overflows, and `position-try` never sees the
+     overflow it needs to flip (or to flip back). Reworking the cap to
+     `min(80dvh, max(45dvh, 100% - <pad>))` keeps the surface willing to be at least 45dvh: a
+     side smaller than that overflows and triggers a flip, and since sibling sides sum to nearly
+     the full viewport a 45dvh surface always fits the other one, so the flip lands on-screen.
+     Where a side has more than 45dvh the `100%` term still tracks it, up to 80dvh. Left at the
+     default `position-try-order` (not `most-block-size`) so the surface stays on the block-end
+     (below) side whenever the content fits there, only flipping above when it doesn't — rather
+     than jumping to whichever side merely has more room. `overflow` (otherwise `hidden`)
+     scrolls the content once the cap bites; a `use-shell-fill` layout already scrolls its own
+     fill region (`shell.css`), so the surface itself never overflows there and this `overflow`
+     is inert. */
   use-anchored > :is(dialog, [popover]):not(use-menu, .appearance-native):is([open], :popover-open) {
     margin-block: var(--usewc-layout-surface-anchor-offset);
+    max-block-size: min(80dvh, max(45dvh, 100% - var(--usewc-space-surface-padding) * 2));
+    overflow: auto;
 
     use-theme-escape & {
       all: revert-layer;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.63",
+  "version": "1.0.0-pre.65",
   "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": [] },