use-wc 1.0.0-pre.74 → 1.0.0-pre.76

package/custom-elements.json

@@ -1841,6 +1841,88 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-focusgroup/use-focusgroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.\n\n`use-focusgroup` is most useful for things like WYSIWYG toolbars, sets of tabs, or lists of navigation links (like a list of emails in a master detail layout).\n\n## To do\n\n- [ ] add `grid` navigation feature\n- [ ] add `autofocus` attribute support\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native focusgroup support once it becomes baseline. Hopefully migration will be as simple as changing the tag name from `use-focusgroup` to `div` and the `options` attribute to `focusgroup`.\n\n<baseline-status featureId=\"focusgroup_attribute\"></baseline-status>\n\n## Sources\n\n- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)\n- [tabbable](https://www.npmjs.com/package/tabbable)\n- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)\n- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)",
+          "name": "UseFocusgroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "features",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
+              "attribute": "features"
+            },
+            {
+              "kind": "field",
+              "name": "focusedElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null",
+              "description": "The most recently focused element in the focusgroup."
+            },
+            {
+              "kind": "method",
+              "name": "focus"
+            },
+            {
+              "kind": "field",
+              "name": "promoted",
+              "description": "Whether the use-focusgroup is promoted to the top of the tab order inside a parent use-focusgroup.",
+              "readonly": true,
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "promote",
+              "description": "Promotes the use-focusgroup to the top of the tab order inside a parent use-focusgroup."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "features",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
+              "fieldName": "features"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "use-focusgroup",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseFocusgroup",
+          "declaration": {
+            "name": "UseFocusgroup",
+            "module": "src/elements/use-focusgroup/use-focusgroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-focusgroup",
+          "declaration": {
+            "name": "UseFocusgroup",
+            "module": "src/elements/use-focusgroup/use-focusgroup.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-duration-input/use-duration-input.ts",
@@ -2155,88 +2237,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-focusgroup/use-focusgroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.\n\n`use-focusgroup` is most useful for things like WYSIWYG toolbars, sets of tabs, or lists of navigation links (like a list of emails in a master detail layout).\n\n## To do\n\n- [ ] add `grid` navigation feature\n- [ ] add `autofocus` attribute support\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native focusgroup support once it becomes baseline. Hopefully migration will be as simple as changing the tag name from `use-focusgroup` to `div` and the `options` attribute to `focusgroup`.\n\n<baseline-status featureId=\"focusgroup_attribute\"></baseline-status>\n\n## Sources\n\n- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)\n- [tabbable](https://www.npmjs.com/package/tabbable)\n- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)\n- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)",
-          "name": "UseFocusgroup",
-          "members": [
-            {
-              "kind": "field",
-              "name": "features",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
-              "attribute": "features"
-            },
-            {
-              "kind": "field",
-              "name": "focusedElement",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "default": "null",
-              "description": "The most recently focused element in the focusgroup."
-            },
-            {
-              "kind": "method",
-              "name": "focus"
-            },
-            {
-              "kind": "field",
-              "name": "promoted",
-              "description": "Whether the use-focusgroup is promoted to the top of the tab order inside a parent use-focusgroup.",
-              "readonly": true,
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "promote",
-              "description": "Promotes the use-focusgroup to the top of the tab order inside a parent use-focusgroup."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "features",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
-              "fieldName": "features"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "use-focusgroup",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseFocusgroup",
-          "declaration": {
-            "name": "UseFocusgroup",
-            "module": "src/elements/use-focusgroup/use-focusgroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-focusgroup",
-          "declaration": {
-            "name": "UseFocusgroup",
-            "module": "src/elements/use-focusgroup/use-focusgroup.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-grid/constants.ts",
@@ -4016,63 +4016,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-scrollarea/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseScrollarea",
-          "declaration": {
-            "name": "UseScrollarea",
-            "module": "./use-scrollarea"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-scrollarea/use-scrollarea.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)",
-          "name": "UseScrollarea",
-          "slots": [
-            {
-              "description": "Scrollable content",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-scrollarea",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseScrollarea",
-          "declaration": {
-            "name": "UseScrollarea",
-            "module": "src/elements/use-scrollarea/use-scrollarea.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-scrollarea",
-          "declaration": {
-            "name": "UseScrollarea",
-            "module": "src/elements/use-scrollarea/use-scrollarea.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-time-input/use-time-input.ts",
@@ -4338,6 +4281,63 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-scrollarea/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseScrollarea",
+          "declaration": {
+            "name": "UseScrollarea",
+            "module": "./use-scrollarea"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-scrollarea/use-scrollarea.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)",
+          "name": "UseScrollarea",
+          "slots": [
+            {
+              "description": "Scrollable content",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-scrollarea",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseScrollarea",
+          "declaration": {
+            "name": "UseScrollarea",
+            "module": "src/elements/use-scrollarea/use-scrollarea.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-scrollarea",
+          "declaration": {
+            "name": "UseScrollarea",
+            "module": "src/elements/use-scrollarea/use-scrollarea.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-tree/use-tree.ts",

package/dist/design-system.css

@@ -68,7 +68,13 @@
       --usewc-color-input-border: var(--usewc-color-input-border-hover);
     }
 
-    &:where(:focus, :has(input:focus), :focus-within) {
+    /* Matches the hover rule's own specificity (a real pseudo-class, not `:where()`-zeroed) so
+       that when both apply at once — hovering a focused control — source order decides and this,
+       declared after, wins; wrapping this in `:where()` as before let hover's specificity beat
+       it regardless of order. */
+    &:focus,
+    &:focus-within,
+    &:has(input:focus) {
       --usewc-color-input-border: var(--usewc-color-input-border-focus);
       --usewc-effect-outline-width: var(--usewc-effect-outline-size);
     }
@@ -313,7 +319,7 @@
 
 @layer use-theme.link {
   :is(nav, header, footer, [role="navigation"], [role="menubar"], [role="tablist"], [role="toolbar"]) {
-    --usewc-effect-link-decoration: var(--usewc-effect-link-chrome-text-decoration);
+    --usewc-local-link-decoration-line: var(--usewc-effect-link-chrome-text-decoration);
   }
 
   :is(a:not([class*="appearance-"]), .appearance-a) {
@@ -321,11 +327,23 @@
       all: unset;
     }
 
-    --usewc-color-link-text: var(--usewc-color-link-text-static);
+    /* `--usewc-local-*` names the variables below as rule-scoped plumbing rather than themeable
+       tokens — set here to thread the current state (hover/active, chrome context, sidebar) into
+       the properties further down, as opposed to the real tokens in `semantic.css` they read
+       from. `--usewc-local-link-decoration-color` in particular has to be derived here rather
+       than hoisted into `semantic.css`: relative-color syntax reading a `var()` only resolves
+       once the referenced custom property is defined on the same element/rule, and
+       `--usewc-local-link-text` only ever exists on this one. */
+    --usewc-local-link-text: var(--usewc-color-link-text-static);
+    --usewc-local-link-decoration-opacity: var(--usewc-effect-link-decoration-opacity);
+    --usewc-local-link-decoration-color: oklch(
+      from var(--usewc-local-link-text) l c h / var(--usewc-local-link-decoration-opacity)
+    );
     --usewc-effect-outline-width: 0;
 
-    color: var(--usewc-color-link-text);
-    text-decoration: var(--usewc-effect-link-decoration, var(--usewc-effect-link-text-decoration));
+    color: var(--usewc-local-link-text);
+    text-decoration: var(--usewc-local-link-decoration-line, var(--usewc-effect-link-text-decoration));
+    text-decoration-color: var(--usewc-local-link-decoration-color);
     cursor: pointer;
     outline: var(--usewc-effect-outline-width) var(--usewc-effect-outline-style) var(--usewc-color-outline);
     outline-offset: var(--usewc-effect-outline-offset);
@@ -336,7 +354,7 @@
     }
 
     &:is(:hover, :focus-visible) {
-      --usewc-color-link-text: var(--usewc-color-link-text-hover);
+      --usewc-local-link-text: var(--usewc-color-link-text-hover);
     }
 
     &:focus-visible {
@@ -344,12 +362,15 @@
     }
 
     &:active {
-      --usewc-color-link-text: var(--usewc-color-link-text-active);
+      --usewc-local-link-text: var(--usewc-color-link-text-active);
+      /* Pressed reads as committed rather than merely hinted at, so the underline matches the
+         text exactly here instead of staying a lighter tint of it. */
+      --usewc-local-link-decoration-opacity: 1;
     }
 
     nav.sidebar > & {
       display: block;
-      /* Swapping these source tokens, rather than the resolved `--usewc-color-link-text` slot
+      /* Swapping these source tokens, rather than the resolved `--usewc-local-link-text` slot
          itself, means the existing `:hover`/`:active` rules above keep working unmodified — they
          already read through `-hover`/`-active`, so overriding what those resolve to here is
          enough to recolor every state at once. */
@@ -1401,6 +1422,24 @@
     }
   }
 
+  /* A link inside a cell reads as the cell's own text rather than the document's default link
+     blue — the grid draws attention with its row/selection bands, not link-colored text, so a
+     link that broke from the cell's color would read as an anomaly instead of an affordance.
+     Hover/active still need to move, the same as the default link darkening through
+     blue-600/700/800 — `currentColor` alone can't step down like that, so each state is the
+     cell's own color with its lightness nudged instead. `link.css`'s own decoration-color rule
+     already derives from `--usewc-local-link-text`, so the underline follows every step here for
+     free, staying a lighter tint of whichever shade the text itself is in. */
+  use-gridcell :is(a:not([class*="appearance-"]), .appearance-a) {
+    --usewc-color-link-text-static: currentColor;
+    --usewc-color-link-text-hover: oklch(
+      from currentColor calc(l + var(--usewc-color-grid-cell-link-hover-lightness-shift)) c h
+    );
+    --usewc-color-link-text-active: oklch(
+      from currentColor calc(l + var(--usewc-color-grid-cell-link-active-lightness-shift)) c h
+    );
+  }
+
   use-grid:not(.chips, .list, .appearance-native) {
     display: block;
     overflow: clip;
@@ -1495,6 +1534,11 @@
        border-inline-start so it can sit shorter than the cell rather than spanning it. */
     use-gridhead use-gridcell[role="columnheader"] {
       position: relative;
+      /* A header with no label has no line box, so its own height (and the divider's `%`
+         height off it) would otherwise collapse to just the cell's own block padding —
+         reserve the same total height a labeled cell gets (padding plus a full line) so an
+         unlabeled column still gets a full-height divider next to its neighbors. */
+      min-block-size: calc(var(--usewc-layout-grid-cell-line-height) + var(--usewc-layout-grid-cell-padding-block) * 2);
 
       use-theme-escape & {
         all: revert-layer;
@@ -2261,6 +2305,17 @@
     min-inline-size: 0;
   }
 
+  /* `--usewc-layout-region-gap`/`-padding` are custom properties, which inherit by default — left
+     alone, a nested `use-layout` would pick up its ancestor's density instead of its own default
+     of "no gap/padding of its own." Resetting them here, at `:where()`'s zero specificity, stops
+     that inheritance at every `use-layout` boundary without affecting a variant class or a
+     `gap`/`padding` attribute below, both of which carry real specificity and still win on the
+     element they target. */
+  :where(use-layout) {
+    --usewc-layout-region-gap: initial;
+    --usewc-layout-region-padding: initial;
+  }
+
   /* ── Variant density ────────────────────────────────────────────────────────────────────────
      A variant class sets its own scale and nothing else; the generic region rules below read
      these properties. Keeping the arrangement in one ruleset rather than four means a future
@@ -2277,6 +2332,14 @@
     --usewc-layout-footer-justify: space-between;
   }
 
+  /* A page's own `h1` — its title, wherever it sits in the topbar — reads at the page's title
+     size and weight rather than the browser's default heading style. Matched at any depth, since
+     a topbar routinely nests it a `<section>` or an `<hgroup>` down. */
+  use-layout.page h1 {
+    font-size: var(--usewc-font-page-title-size);
+    font-weight: var(--usewc-font-page-title-weight);
+  }
+
   use-layout.entry {
     --usewc-layout-region-padding: var(--usewc-layout-entry-padding);
     --usewc-layout-region-gap: var(--usewc-layout-entry-gap);

package/dist/tokens.css

@@ -37,6 +37,7 @@
   --usewc-font-size-18: 1.125rem;
   --usewc-font-size-20: 1.25rem;
   --usewc-font-size-24: 1.5rem;
+  --usewc-font-size-28: 1.75rem;
 
   /** Font weight */
   --usewc-font-weight-light: 300;
@@ -203,6 +204,12 @@
   --usewc-color-link-text-visited-hover: var(--usewc-color-indigo-600);
   --usewc-color-link-text-visited-active: var(--usewc-color-indigo-700);
   --usewc-effect-link-text-decoration: underline;
+  /* The underline is always this much fainter than whatever the link's own text color resolves
+     to, in whichever state — a plain number rather than a full `oklch(from ...)` expression,
+     since relative-color syntax reading a `var()` only resolves reliably when the referenced
+     custom property lives on the same rule; `link.css` does the actual derivation locally,
+     alongside the (also local) `--usewc-local-link-text` it reads from. */
+  --usewc-effect-link-decoration-opacity: 0.3;
   --usewc-effect-link-chrome-text-decoration: none;
   /* - Sidebar nav item */
   /* A sidebar item reads as chrome, not a hyperlink, so its text stays the document's own ink
@@ -578,6 +585,15 @@
   --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 link inside a cell inherits its resting color from the cell (`currentColor`), so hover/active
+     can't reach for a fixed color the way the default link does — they shift that same color's own
+     lightness instead. Light mode's cell text is usually dark, so darkening it further (moving
+     toward black) reads as pressed, the same direction the default link's blue-600/700/800
+     progression darkens on hover/active; the dark-mode block below flips both to lighten instead,
+     since a light-on-dark cell darkening toward the page background would lose contrast rather
+     than gain it — the same reason `button.css`'s own hover/active derivation carries a shift. */
+  --usewc-color-grid-cell-link-hover-lightness-shift: -0.08;
+  --usewc-color-grid-cell-link-active-lightness-shift: -0.16;
   /* 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);
@@ -756,6 +772,8 @@
   --usewc-layout-page-padding: var(--usewc-space-20);
   --usewc-layout-page-gap: var(--usewc-space-12);
   --usewc-layout-page-avatar-size: var(--usewc-layout-region-title-block-size);
+  --usewc-font-page-title-size: var(--usewc-font-size-28);
+  --usewc-font-page-title-weight: var(--usewc-font-weight-medium);
 
   --usewc-layout-card-padding: var(--usewc-space-16);
   --usewc-layout-card-gap: var(--usewc-space-10);
@@ -817,7 +835,7 @@
     --usewc-color-outline: var(--usewc-color-blue-400);
     --usewc-color-prose-code-background: var(--usewc-color-gray-900);
     --usewc-color-input-background-static: oklch(from var(--usewc-color-gray-100) l c h / 0.025);
-    --usewc-color-input-border-static: var(--usewc-color-gray-600);
+    --usewc-color-input-border-static: var(--usewc-color-gray-800);
     --usewc-color-input-text-static: var(--usewc-color-gray-200);
     --usewc-color-input-text-placeholder: var(--usewc-color-gray-500);
     --usewc-color-form-label-text: var(--usewc-color-gray-100);
@@ -875,8 +893,9 @@
     --usewc-color-link-text-static: var(--usewc-color-blue-400);
     --usewc-color-link-text-hover: var(--usewc-color-blue-500);
     --usewc-color-link-text-active: var(--usewc-color-blue-600);
+    --usewc-effect-link-decoration-opacity: 0.5;
     --usewc-color-code-text: var(--usewc-color-red-200);
-    --usewc-color-input-border-hover: var(--usewc-color-gray-500);
+    --usewc-color-input-border-hover: var(--usewc-color-gray-700);
     --usewc-color-input-border-focus: var(--usewc-color-blue-400);
     --usewc-color-input-border-invalid: var(--usewc-color-red-300);
     --usewc-color-input-segment-background-focus: var(--usewc-color-blue-100);
@@ -898,6 +917,11 @@
     --usewc-color-grid-header-text: var(--usewc-color-gray-200);
     --usewc-color-avatar-background: var(--usewc-color-gray-800);
     --usewc-color-avatar-text: var(--usewc-color-gray-200);
+    /* A cell's own text is usually light against a dark page, so hover/active need to lighten it
+       further instead of darkening it toward the background — the opposite direction from light
+       mode, same as the sign flip below. */
+    --usewc-color-grid-cell-link-hover-lightness-shift: 0.08;
+    --usewc-color-grid-cell-link-active-lightness-shift: 0.16;
   }
 }
 

package/dist/use-wc.mjs

@@ -5223,13 +5223,7 @@ let UseGridCell = class UseGridCell extends UseWidget {
 		this.#action = null;
 		this.#actionsInitialized = false;
 		this.#handleFocusIn = () => {
-			if (!this.#actionsInitialized) {
-				focusable(this).forEach((el) => {
-					el.tabIndex = -1;
-					if (!this.#action) this.#action = el;
-				});
-				this.#actionsInitialized = true;
-			}
+			this.#initializeAction();
 			if (this.#action) {
 				this.#action.focus();
 				this.tabIndex = -1;
@@ -5246,10 +5240,19 @@ let UseGridCell = class UseGridCell extends UseWidget {
 		if (!this.hasAttribute("role")) this.setAttribute("role", this.closest("use-gridhead") ? "columnheader" : "gridcell");
 		this.tabIndex = -1;
 		if (this.mode === "action") {
+			queueMicrotask(() => this.#initializeAction());
 			this.addEventListener("focusin", this.#handleFocusIn);
 			this.addEventListener("focusout", this.#handleFocusOut);
 		}
 	}
+	#initializeAction() {
+		if (this.#actionsInitialized) return;
+		focusable(this).forEach((el) => {
+			el.tabIndex = -1;
+			if (!this.#action) this.#action = el;
+		});
+		this.#actionsInitialized = true;
+	}
 	#handleFocusIn;
 	#handleFocusOut;
 };

package/package.json

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

package/vscode.html-custom-data.json

@@ -139,6 +139,18 @@
       ],
       "references": []
     },
+    {
+      "name": "use-focusgroup",
+      "description": "Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.\n\n`use-focusgroup` is most useful for things like WYSIWYG toolbars, sets of tabs, or lists of navigation links (like a list of emails in a master detail layout).\n\n## To do\n\n- [ ] add `grid` navigation feature\n- [ ] add `autofocus` attribute support\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native focusgroup support once it becomes baseline. Hopefully migration will be as simple as changing the tag name from `use-focusgroup` to `div` and the `options` attribute to `focusgroup`.\n\n<baseline-status featureId=\"focusgroup_attribute\"></baseline-status>\n\n## Sources\n\n- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)\n- [tabbable](https://www.npmjs.com/package/tabbable)\n- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)\n- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)\n---\n\n\n### **Methods:**\n - **promote()** - Promotes the use-focusgroup to the top of the tab order inside a parent use-focusgroup.",
+      "attributes": [
+        {
+          "name": "features",
+          "description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "use-duration-input",
       "description": "Displays the parts of an ISO 8601 duration string using [`Intl.DurationFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat).\n\nUses the [`duration-fns`](https://www.npmjs.com/package/duration-fns) library for parsing ISO 8601 values.\n\n<baseline-status featureId=\"intl-duration-format\"></baseline-status>\n---\n",
@@ -167,18 +179,6 @@
       ],
       "references": []
     },
-    {
-      "name": "use-focusgroup",
-      "description": "Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.\n\n`use-focusgroup` is most useful for things like WYSIWYG toolbars, sets of tabs, or lists of navigation links (like a list of emails in a master detail layout).\n\n## To do\n\n- [ ] add `grid` navigation feature\n- [ ] add `autofocus` attribute support\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native focusgroup support once it becomes baseline. Hopefully migration will be as simple as changing the tag name from `use-focusgroup` to `div` and the `options` attribute to `focusgroup`.\n\n<baseline-status featureId=\"focusgroup_attribute\"></baseline-status>\n\n## Sources\n\n- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)\n- [tabbable](https://www.npmjs.com/package/tabbable)\n- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)\n- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)\n---\n\n\n### **Methods:**\n - **promote()** - Promotes the use-focusgroup to the top of the tab order inside a parent use-focusgroup.",
-      "attributes": [
-        {
-          "name": "features",
-          "description": "A list of space-separated features that can be used to customize the behavior of the focusgroup.\n\nThe following options are available:\n\n- `inline` opts into keyboard navigation via left and right arrow keys\n- `block` opts into keyboard navigation via up and down arrow keys\n- `wrap` arrow navigation should wrap around when reaching the end\n- `no-memory` whether the focusgroup should not remember the last focused element\n\nIf nothing if neither `inline` nor `block` is specified, both are assumed.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "use-grid",
       "description": "Accessible grid component following [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\n\n## Grid Cell Modes\nThe `mode` attribute of the `use-gridcell` element determines how the cell behaves in terms of focus and interaction. The possible values are:\n\n- `'none'` - the cell itself is focusable and it does not contain any interactive elements.\n- `'widget'` - the cell itself is focusable and it contains more than one interactive element. To access the interactive elements, the user must press `Enter` or `F2`, and to restore focus to the cell, the user must press `Esc` or `F2`.\n- `'action'` - the cell itself is not focusable and it contains a single interactive element. The user can tab to the interactive elements directly.\n\n## Accessible Label\nProvide `aria-label` or `aria-labelledby` on the `use-grid` element so screen readers can identify the grid.\n---\n\n\n### **Slots:**\n - _default_ - Grid content (use-gridhead/use-gridbody rows)",
@@ -452,12 +452,6 @@
       ],
       "references": []
     },
-    {
-      "name": "use-scrollarea",
-      "description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)\n---\n\n\n### **Slots:**\n - _default_ - Scrollable content",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "use-time-input",
       "description": "Displays time picker using [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).\n\nAllows users to pick time values with proper localization and formatting.\n---\n\n\n### **Events:**\n - **input**",
@@ -487,6 +481,12 @@
       ],
       "references": []
     },
+    {
+      "name": "use-scrollarea",
+      "description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)\n---\n\n\n### **Slots:**\n - _default_ - Scrollable content",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "use-tree",
       "description": "Custom input control for managing selected values in a hierarchy.\n\nA convenience for distributing a custom indicator to every item at once: slot an icon into\n`use-tree` itself under `expanded-indicator`, `collapsed-indicator`, `selected-indicator`, or\n`deselected-indicator`, and it's cloned into each lazily-discovered `use-treeitem`'s matching\nslot. This is per-item slotting, just done once for the whole tree — it doesn't replace\n`use-treeitem`'s own static hooks (`expandedIcon`, `collapsedIcon`, `selectedIcon`,\n`deselectedIcon`), which still apply for indicators the tree hasn't cloned one over.\n---\n\n\n### **Slots:**\n - **default** - NodeList of `use-treeitem` elements\n- **expanded-indicator** - Cloned into every item's `expanded-indicator` slot.\n- **collapsed-indicator** - Cloned into every item's `collapsed-indicator` slot.\n- **selected-indicator** - Cloned into every item's `selected-indicator` slot.\n- **deselected-indicator** - Cloned into every item's `deselected-indicator` slot.",