use-wc 1.0.0-pre.75 → 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);
     }
@@ -1528,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;

package/dist/tokens.css

@@ -209,7 +209,7 @@
      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.5;
+  --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
@@ -835,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);
@@ -893,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.75",
+  "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.",