use-wc 1.0.0-pre.37 → 1.0.0-pre.39

package/custom-elements.json

@@ -396,71 +396,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-calendarday/use-calendarday.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
-          "name": "UseCalendarday",
-          "slots": [
-            {
-              "description": "slot for custom day content (replaces the day number)",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "date"
-            },
-            {
-              "kind": "field",
-              "name": "day",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "date"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-calendarday",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseCalendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-calendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-input/use-date-input.ts",
@@ -587,6 +522,71 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-calendarday/use-calendarday.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
+          "name": "UseCalendarday",
+          "slots": [
+            {
+              "description": "slot for custom day content (replaces the day number)",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "date"
+            },
+            {
+              "kind": "field",
+              "name": "day",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "date"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-calendarday",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseCalendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-calendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-picker/use-date-picker.ts",
@@ -1986,7 +1986,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.",
+          "description": "Accessible grid component following [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).",
           "name": "UseGrid",
           "slots": [
             {
@@ -2177,6 +2177,7 @@
                 "text": "\"widget\" | \"action\" | \"default\""
               },
               "default": "\"default\"",
+              "description": "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.",
               "attribute": "mode",
               "reflects": true
             },
@@ -2230,6 +2231,7 @@
                 "text": "\"widget\" | \"action\" | \"default\""
               },
               "default": "\"default\"",
+              "description": "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.",
               "fieldName": "mode"
             }
           ],

package/dist/default-tokens.css

@@ -115,7 +115,7 @@
 
 :root {
   /* Layout */
-  --usewc-layout-document-text-size: var(--usewc-font-size-16);
+  --usewc-font-document-size: var(--usewc-font-size-16);
   --usewc-color-document-text: var(--usewc-color-gray-700);
   --usewc-color-document-text-muted: var(--usewc-color-gray-500);
   --usewc-color-document-background: var(--usewc-color-white);
@@ -128,14 +128,14 @@
   --usewc-font-input-family: inherit;
 
   /* Controls */
-  /* - Focus ring */
-  --usewc-color-focus-ring: var(--usewc-color-blue-500);
-  --usewc-layout-focus-ring-size: var(--usewc-space-2);
-  --usewc-layout-focus-ring-offset-outside: var(--usewc-space-2);
-  --usewc-layout-focus-ring-offset-inside: var(--usewc-space-none);
-  --usewc-effect-focus-ring-style: solid;
-  --usewc-transition-focus-ring: outline 0.05s ease-in-out;
-  --usewc-effect-control-opacity-disabled: 0.5;
+  /* - Outline (focus indicator) */
+  --usewc-color-outline: var(--usewc-color-blue-500);
+  --usewc-effect-outline-size: var(--usewc-space-2);
+  --usewc-effect-outline-offset: var(--usewc-space-2);
+  --usewc-effect-outline-offset-flush: var(--usewc-space-none);
+  --usewc-effect-outline-style: solid;
+  --usewc-effect-outline-transition: outline 0.05s ease-in-out;
+  --usewc-effect-form-opacity-disabled: 0.5;
   /* - Link */
   --usewc-color-link-text-static: var(--usewc-color-blue-500);
   --usewc-color-link-text-hover: var(--usewc-color-blue-600);
@@ -143,7 +143,6 @@
   --usewc-color-link-text-visited: var(--usewc-color-indigo-500);
   --usewc-color-link-text-visited-hover: var(--usewc-color-indigo-600);
   --usewc-color-link-text-visited-active: var(--usewc-color-indigo-700);
-  --usewc-color-link-text-visited-visited: var(--usewc-color-indigo-500);
   --usewc-effect-link-text-decoration: underline;
 
   /* Form */
@@ -175,7 +174,7 @@
   --usewc-color-input-segment-background-focus: var(--usewc-color-blue-100);
   --usewc-color-input-segment-text-focus: var(--usewc-color-gray-700);
   --usewc-effect-dropdown-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='rgba(255,255,255,0.5' /%3E%3C/svg%3E");
-  --usewc-effect-dropdown-trigger-side-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='M16 12L8.5 18.9282L8.5 5.0718Z' fill='rgba(255,255,255,0.5' /%3E%3C/svg%3E");
+  --usewc-effect-dropdown-trigger-nested-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='M16 12L8.5 18.9282L8.5 5.0718Z' fill='rgba(255,255,255,0.5' /%3E%3C/svg%3E");
   --usewc-effect-dropdown-trigger-background-size: 1em;
   --usewc-effect-dropdown-trigger-background-blend-mode: difference;
   --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='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
@@ -191,7 +190,6 @@
   /* - Effect */
   --usewc-effect-input-border-style: solid;
   --usewc-effect-input-border-radius: var(--usewc-effect-border-radius-4);
-  --usewc-effect-input-opacity-disabled: 0.5;
   /* - Font */
   --usewc-font-input-size: var(--usewc-font-size-16);
 
@@ -267,18 +265,18 @@
   --usewc-color-button-danger-text-static-auxiliary: var(--usewc-color-red-500);
   --usewc-color-button-danger-text-hover: var(--usewc-color-white);
   /* -- Cancel color */
-  --usewc-color-button-cancel-background-static: transaprent;
-  --usewc-color-button-cancel-background-static-auxiliary: transparent;
-  --usewc-color-button-cancel-background-hover: var(--usewc-color-gray-100);
-  --usewc-color-button-cancel-background-active: var(--usewc-color-gray-200);
-  --usewc-color-button-cancel-border-static: transparent;
-  --usewc-color-button-cancel-border-static-auxiliary: var(--usewc-color-gray-100);
-  --usewc-color-button-cancel-border-hover: transparent;
-  --usewc-color-button-cancel-border-active: transparent;
-  --usewc-color-button-cancel-text-static: var(--usewc-color-gray-700);
-  --usewc-color-button-cancel-text-static-auxiliary: var(--usewc-color-gray-700);
-  --usewc-color-button-cancel-text-hover: var(--usewc-color-gray-700);
-  --usewc-color-button-cancel-text-active: var(--usewc-color-gray-700);
+  --usewc-color-button-clear-background-static: transparent;
+  --usewc-color-button-clear-background-static-auxiliary: transparent;
+  --usewc-color-button-clear-background-hover: var(--usewc-color-gray-100);
+  --usewc-color-button-clear-background-active: var(--usewc-color-gray-200);
+  --usewc-color-button-clear-border-static: transparent;
+  --usewc-color-button-clear-border-static-auxiliary: var(--usewc-color-gray-100);
+  --usewc-color-button-clear-border-hover: transparent;
+  --usewc-color-button-clear-border-active: transparent;
+  --usewc-color-button-clear-text-static: var(--usewc-color-gray-700);
+  --usewc-color-button-clear-text-static-auxiliary: var(--usewc-color-gray-700);
+  --usewc-color-button-clear-text-hover: var(--usewc-color-gray-700);
+  --usewc-color-button-clear-text-active: var(--usewc-color-gray-700);
   /* - Layout */
   --usewc-layout-button-border: var(--usewc-space-1);
   --usewc-layout-button-background-size: calc(100% + var(--usewc-layout-button-border) * 2)
@@ -361,7 +359,7 @@
     --usewc-color-document-text-muted: var(--usewc-color-gray-300);
     --usewc-color-document-background: var(--usewc-color-gray-800);
     --usewc-color-canvas-background: var(--usewc-color-black);
-    --usewc-color-focus-ring: var(--usewc-color-blue-200);
+    --usewc-color-outline: var(--usewc-color-blue-200);
     --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-text-static: var(--usewc-color-gray-200);
@@ -381,12 +379,12 @@
     --usewc-color-button-base-border-hover: var(--usewc-color-gray-500);
     --usewc-color-button-base-border-active: var(--usewc-color-gray-400);
     --usewc-color-button-base-border-static-auxiliary: var(--usewc-color-gray-600);
-    --usewc-color-button-cancel-text-static: var(--usewc-color-gray-200);
-    --usewc-color-button-cancel-text-hover: var(--usewc-color-gray-200);
-    --usewc-color-button-cancel-background-hover: var(--usewc-color-gray-700);
-    --usewc-color-button-cancel-border-hover: var(--usewc-color-gray-700);
-    --usewc-color-button-cancel-text-static-auxiliary: var(--usewc-color-gray-300);
-    --usewc-color-button-cancel-border-static-auxiliary: var(--usewc-color-gray-600);
+    --usewc-color-button-clear-text-static: var(--usewc-color-gray-200);
+    --usewc-color-button-clear-text-hover: var(--usewc-color-gray-200);
+    --usewc-color-button-clear-background-hover: var(--usewc-color-gray-700);
+    --usewc-color-button-clear-border-hover: var(--usewc-color-gray-700);
+    --usewc-color-button-clear-text-static-auxiliary: var(--usewc-color-gray-300);
+    --usewc-color-button-clear-border-static-auxiliary: var(--usewc-color-gray-600);
     --usewc-color-button-primary-background-static: var(--usewc-color-blue-400);
     --usewc-color-button-primary-background-hover: var(--usewc-color-blue-500);
     --usewc-color-button-primary-background-active: var(--usewc-color-blue-600);

package/dist/design-system.css

@@ -11,7 +11,7 @@
     color: var(--usewc-color-document-text);
     background-color: var(--usewc-color-document-background);
     font-family: var(--usewc-font-document-family);
-    font-size: var(--usewc-layout-document-text-size);
+    font-size: var(--usewc-font-document-size);
   }
 
   :is(button, a, details summary, use-widget):not([data-appear-as="native"]):focus-visible,
@@ -19,9 +19,9 @@
   input[type="file"]:not([data-appear-as="native"]):focus-visible,
   use-dropdown:not([data-appear-as="native"])::part(trigger):focus-visible,
   [data-appear-as="input"]:has(input:focus) {
-    outline: var(--usewc-layout-focus-ring-size) var(--usewc-effect-focus-ring-style) var(--usewc-color-focus-ring);
-    outline-offset: var(--usewc-layout-focus-ring-offset-outside);
-    transition: var(--usewc-transition-focus-ring);
+    outline: var(--usewc-effect-outline-size) var(--usewc-effect-outline-style) var(--usewc-color-outline);
+    outline-offset: var(--usewc-effect-outline-offset);
+    transition: var(--usewc-effect-outline-transition);
   }
 
   :is(
@@ -54,13 +54,13 @@
 
     &:is(:focus, :has(input:focus), :focus-within) {
       border-color: var(--usewc-color-input-border-focus);
-      outline-offset: var(--usewc-layout-focus-ring-offset-inside);
+      outline-offset: var(--usewc-effect-outline-offset-flush);
     }
 
     &:disabled,
     &[aria-disabled="true"],
     &:has(:disabled, [aria-disabled="true"]) {
-      opacity: var(--usewc-effect-control-opacity-disabled);
+      opacity: var(--usewc-effect-form-opacity-disabled);
       pointer-events: none;
     }
 
@@ -140,7 +140,7 @@
     }
 
     &:disabled {
-      opacity: var(--usewc-effect-control-opacity-disabled);
+      opacity: var(--usewc-effect-form-opacity-disabled);
       pointer-events: none;
     }
 
@@ -284,7 +284,7 @@
 
     &:disabled,
     &[aria-disabled="true"] {
-      opacity: var(--usewc-effect-control-opacity-disabled);
+      opacity: var(--usewc-effect-form-opacity-disabled);
       pointer-events: none;
     }
 
@@ -322,21 +322,21 @@
       --usewc-theme-color-button-border-active: var(--usewc-color-button-danger-border-active);
     }
 
-    &.cancel {
-      --usewc-theme-color-button-text-static: var(--usewc-color-button-cancel-text-static);
-      --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-cancel-text-static-auxiliary);
-      --usewc-theme-color-button-background-static: var(--usewc-color-button-cancel-background-static);
+    &.clear {
+      --usewc-theme-color-button-text-static: var(--usewc-color-button-clear-text-static);
+      --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-clear-text-static-auxiliary);
+      --usewc-theme-color-button-background-static: var(--usewc-color-button-clear-background-static);
       --usewc-theme-color-button-background-static-auxiliary: var(
-        --usewc-color-button-cancel-background-static-auxiliary
+        --usewc-color-button-clear-background-static-auxiliary
       );
-      --usewc-theme-color-button-border-static: var(--usewc-color-button-cancel-border-static);
-      --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-cancel-border-static-auxiliary);
-      --usewc-theme-color-button-text-hover: var(--usewc-color-button-cancel-text-hover);
-      --usewc-theme-color-button-background-hover: var(--usewc-color-button-cancel-background-hover);
-      --usewc-theme-color-button-border-hover: var(--usewc-color-button-cancel-border-hover);
-      --usewc-theme-color-button-text-active: var(--usewc-color-button-cancel-text-active);
-      --usewc-theme-color-button-background-active: var(--usewc-color-button-cancel-background-active);
-      --usewc-theme-color-button-border-active: var(--usewc-color-button-cancel-border-active);
+      --usewc-theme-color-button-border-static: var(--usewc-color-button-clear-border-static);
+      --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-clear-border-static-auxiliary);
+      --usewc-theme-color-button-text-hover: var(--usewc-color-button-clear-text-hover);
+      --usewc-theme-color-button-background-hover: var(--usewc-color-button-clear-background-hover);
+      --usewc-theme-color-button-border-hover: var(--usewc-color-button-clear-border-hover);
+      --usewc-theme-color-button-text-active: var(--usewc-color-button-clear-text-active);
+      --usewc-theme-color-button-background-active: var(--usewc-color-button-clear-background-active);
+      --usewc-theme-color-button-border-active: var(--usewc-color-button-clear-border-active);
     }
 
     &.auxiliary:not(:is(:hover, :focus-visible, :active)) {
@@ -547,7 +547,7 @@
   }
 
   use-dropdown use-dropdown::part(trigger) {
-    background-image: var(--usewc-effect-dropdown-trigger-side-background-image);
+    background-image: var(--usewc-effect-dropdown-trigger-nested-background-image);
     background-position: right center;
   }
 
@@ -622,9 +622,9 @@
     &:focus-visible,
     &::part(trigger):focus-visible {
       background-color: var(--usewc-color-popover-menu-item-background-static);
-      outline: var(--usewc-layout-focus-ring-size) var(--usewc-effect-focus-ring-style) var(--usewc-color-focus-ring);
-      outline-offset: var(--usewc-layout-focus-ring-offset-inside);
-      transition: var(--usewc-transition-focus-ring);
+      outline: var(--usewc-effect-outline-size) var(--usewc-effect-outline-style) var(--usewc-color-outline);
+      outline-offset: var(--usewc-effect-outline-offset-flush);
+      transition: var(--usewc-effect-outline-transition);
       color: var(--usewc-color-popover-menu-item-text-focus);
     }
   }

package/dist/docs/use-calendarday.md

@@ -0,0 +1,22 @@
+# `use-calendarday`
+
+A helper component for customizing specific days within `use-calendar`.
+Content placed inside this element will replace the default day number display.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| date | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| day | - | - | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | slot for custom day content (replaces the day number) |

package/dist/docs/use-date-input.md

@@ -0,0 +1,23 @@
+# `use-date-input`
+
+Displays a date picker using segmented inputs for year, month, and day.
+
+Uses browser locale for formatting and ARIA labels.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | `boolean` | `false` | - |
+| readonly | `boolean` | `false` | - |
+| value | `string` | `YYYY-MM-DD` | - |
+| lang | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| yearInput | `HTMLInputElement` | - | - |
+| monthInput | `HTMLInputElement` | - | - |
+| dayInput | `HTMLInputElement` | - | - |
+| id | - | - | - |

package/dist/docs/use-date-picker.md

@@ -0,0 +1,44 @@
+# `use-date-picker`
+
+A day-granularity date picker. Value format: YYYY-MM-DD.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| year | `number` | - | 1970-9999 |
+| month | `number` | - | 1-12 |
+| controls | `boolean` | `false` | - |
+| navigation | `"nowrap" \| "off" \| "on"` | `"on"` | - |
+| hiddenmonths | `string` | `""` | - |
+| focusmode | `"cell" \| "control"` | `"cell"` | - |
+| name | `string \| undefined` | `""` | - |
+| min | `string \| undefined` | - | - |
+| max | `string \| undefined` | - | - |
+| start | `string \| undefined` | - | First date in the visible range. Accepts ISO 8601 date strings or `'min'` to use the same value as `min` |
+| end | `string \| undefined` | - | Last date in the visible range. Accepts ISO 8601 date strings or `'max'` to use the same value as `max` |
+| lang | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `string` | - | - |
+| navigationEnabled | - | - | - |
+| renderDay | `UseCalendarRenderDay` | - | - |
+
+## Events
+
+| Name | Type | Description |
+| --- | --- | --- |
+| use-change | `CustomEvent` | Fired on selection with detail `{ value: string }` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `header-start` | Content before the title in the header |
+| `title` | Title showing the month and year |
+| `controls` | Navigation controls (previous, today, next buttons) |
+| `header-end` | Content after the controls in the header |
+| `date-{YYYY-MM-DD}` | Per-date content that replaces the default day number |

package/dist/docs/use-datetime-input.md

@@ -0,0 +1,28 @@
+# `use-datetime-input`
+
+Displays a date and time picker by combining `use-date` and `use-time`.
+
+The value format is ISO 8601-like: `YYYY-MM-DDTHH:MM:SS.mmm`.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | `boolean` | - | - |
+| readonly | `boolean` | - | - |
+| hours | `boolean` | `false` | - |
+| minutes | `boolean` | `false` | - |
+| seconds | `boolean` | `false` | - |
+| fractionalSeconds | `boolean` | `false` | - |
+| dayPeriod | `boolean` | `false` | - |
+| hourFormat | `"12" \| "24" \| undefined` | - | - |
+| value | `string` | `''` | - |
+| lang | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| dateElement | `UseDateInput` | - | - |
+| timeElement | `UseTimeInput` | - | - |
+| id | - | - | - |

package/dist/docs/use-dropdown.md

@@ -0,0 +1,46 @@
+# `use-dropdown`
+
+When the popover is opened the tabbable elements are found and indexed for
+keyboard navigation. The first tabbable element is focused when the popover is opened. The
+following selector is used to find tabbable elements:
+
+```css
+:is(
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  use-menu
+):not(:is(
+  [disabled],
+  [hidden],
+  [inert],
+  [aria-hidden="true"]
+))
+```
+
+Menu items are not used for navigation, they are intended for related action
+items that allows a user to manipulate a user interface or content. Read the
+WCAG guidance for more details:
+[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | - | - | - |
+| label | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| trigger | `HTMLButtonElement \| null` | `null` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | - |
+| `trigger-content` | - |
+| `trigger-label` | - |
+| `trigger-arrow` | - |

package/dist/docs/use-duration-input.md

@@ -0,0 +1,39 @@
+# `use-duration-input`
+
+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).
+
+Uses the [`duration-fns`](https://www.npmjs.com/package/duration-fns) library for parsing ISO 8601 values.
+
+<baseline-status featureId="intl-duration-format"></baseline-status>
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| years | `boolean` | `false` | - |
+| months | `boolean` | `false` | - |
+| weeks | `boolean` | `false` | - |
+| days | `boolean` | `false` | - |
+| hours | `boolean` | `false` | - |
+| minutes | `boolean` | `false` | - |
+| seconds | `boolean` | `false` | - |
+| milliseconds | `boolean` | `false` | - |
+| disabled | `boolean` | `false` | - |
+| readonly | `boolean` | `false` | - |
+| value | `string` | `PT0S` | - |
+| format | `"long" \| "short" \| "narrow" \| "digital"` | `"short"` | - |
+| lang | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| yearInput | `HTMLInputElement` | - | - |
+| monthInput | `HTMLInputElement` | - | - |
+| weekInput | `HTMLInputElement` | - | - |
+| dayInput | `HTMLInputElement` | - | - |
+| hourInput | `HTMLInputElement` | - | - |
+| minuteInput | `HTMLInputElement` | - | - |
+| secondInput | `HTMLInputElement` | - | - |
+| millisecondInput | `HTMLInputElement` | - | - |
+| id | - | - | - |

package/dist/docs/use-focusgroup.md

@@ -0,0 +1,45 @@
+# `use-focusgroup`
+
+Nested controls are removed from the tab flow until the user navigates the nested controls with arrow keys.
+
+`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).
+
+## To do
+
+- [ ] add `grid` navigation feature
+- [ ] add `autofocus` attribute support
+
+## Long term plan
+
+This 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`.
+
+<baseline-status featureId="focusgroup_attribute"></baseline-status>
+
+## Sources
+
+- [Open UI focusgroup Explainer](https://open-ui.org/components/focusgroup.explainer/)
+- [tabbable](https://www.npmjs.com/package/tabbable)
+- [Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)
+- [@gfellerph/focusgroup-polyfill](https://github.com/gfellerph/focusgroup-polyfill)
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| features | `string` | `""` | A list of space-separated features that can be used to customize the behavior of the focusgroup.
+
+The following options are available:
+
+- `inline` opts into keyboard navigation via left and right arrow keys
+- `block` opts into keyboard navigation via up and down arrow keys
+- `wrap` arrow navigation should wrap around when reaching the end
+- `no-memory` whether the focusgroup should not remember the last focused element
+
+If nothing if neither `inline` nor `block` is specified, both are assumed. |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| focusedElement | `HTMLElement \| null` | `null` | The most recently focused element in the focusgroup. |
+| promoted | - | `false` | Whether the use-focusgroup is promoted to the top of the tab order inside a parent use-focusgroup. |

package/dist/docs/use-grid.md

@@ -0,0 +1,26 @@
+# `use-grid`
+
+Accessible grid component following [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selectmode | `"multiple" \| "single" \| "none"` | `"none"` | - |
+| name | `string` | `""` | - |
+| role | `string` | `"grid"` | - |
+| disabled | `boolean` | `false` | - |
+| readonly | `boolean` | `false` | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| internals | - | - | - |
+| value | `string[] \| string \| null` | - | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `` | Grid content (use-gridhead/use-gridbody rows) |

package/dist/docs/use-gridbody.md

@@ -0,0 +1 @@
+# `use-gridbody`

package/dist/docs/use-gridcell.md

@@ -0,0 +1,17 @@
+# `use-gridcell`
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| mode | `"widget" \| "action" \| "default"` | `"default"` | Determines how the cell behaves in terms of focus and interaction. The possible values are:
+
+- `'none'` - the cell itself is focusable and it does not contain any interactive elements.
+- `'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`.
+- `'action'` - the cell itself is not focusable and it contains a single interactive element. The user can tab to the interactive elements directly. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `undefined` | - |

package/dist/docs/use-gridhead.md

@@ -0,0 +1 @@
+# `use-gridhead`

package/dist/docs/use-gridrow.md

@@ -0,0 +1,10 @@
+# `use-gridrow`
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selected | `boolean` | `false` | - |
+| disabled | `boolean` | `false` | - |
+| readonly | `boolean` | `false` | - |
+| value | `string` | `""` | - |

package/dist/docs/use-intl-datetime.md

@@ -0,0 +1,23 @@
+# `use-intl-datetime`
+
+Displays a localized, human-readable representation of a date, time, or datetime.
+Renders a semantic `<time>` element in its shadow root with a machine-readable
+`datetime` attribute and formatted inner text.
+
+Set `datestyle`, `timestyle`, or both to control what is formatted and how.
+The presence of each attribute determines the format mode:
+- `datestyle` only → date formatting
+- `timestyle` only → time formatting
+- both → date and time formatting
+
+Locale is resolved from the nearest ancestor `[lang]` attribute, or
+`navigator.language` if none is found. Set `lang` directly on the element to override.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `string \| undefined` | - | ISO date/time string or Unix timestamp (ms) |
+| datestyle | `string \| undefined` | - | Date format style: `short` \| `medium` \| `long` \| `full` |
+| timestyle | `string \| undefined` | - | Time format style: `short` \| `medium` \| `long` \| `full` |
+| lang | `string` | - | BCP 47 locale tag. Inherits from nearest ancestor `[lang]` if not set. |

package/dist/docs/use-listbox-input.md

@@ -0,0 +1,34 @@
+# `use-listbox-input`
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | `string \| undefined` | - | - |
+| placeholder | `string` | `""` | - |
+| multiple | `boolean` | `false` | - |
+| disabled | - | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selected | - | - | UseOption[] |
+| firstSelected | - | - | - |
+| options | `Array<UseOption>` | - | - |
+| listbox | `HTMLDivElement` | - | - |
+| activeOption | - | - | - |
+| value | `FormData` | - | - |
+
+## Events
+
+| Name | Type | Description |
+| --- | --- | --- |
+| use-change | `CustomEvent` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | NodeList of `use-option` elements |
+| `arrow` | - |

package/dist/docs/use-menu.md

@@ -0,0 +1,41 @@
+# `use-menu`
+
+The first tabbable element is focused when the menu gains focus.
+
+Menu is not used for navigation, it is intended for related action items that
+allows a user to manipulate a user interface or content.
+
+The following selector is used to find tabbable elements:
+
+```css
+:is(
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  use-menu
+):not(:is(
+  [disabled],
+  [hidden],
+  [inert],
+  [aria-hidden="true"]
+))
+```
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | - | - | - |
+| label | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| trigger | `HTMLButtonElement \| null` | `null` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | - |

package/dist/docs/use-month-picker.md

@@ -0,0 +1,38 @@
+# `use-month-picker`
+
+A standalone form-associated year-month picker.
+Emits ISO 8601 `YYYY-MM` values.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| year | `number` | - | Year currently shown in the grid. Defaults to the current year, or the year of the initial value attribute. |
+| min | `string` | `""` | Minimum selectable year-month in `YYYY-MM` format (inclusive). |
+| max | `string` | `""` | Maximum selectable year-month in `YYYY-MM` format (inclusive). |
+| navigation | `"on" \| "nowrap" \| "off"` | `"on"` | Controls keyboard navigation within the grid.
+- `'on'` (default): navigation enabled, wraps from December → next year and January → previous year.
+- `'nowrap'`: navigation enabled, clamps at January and December without year-crossing.
+- `'off'`: keyboard navigation disabled entirely. |
+| disabled | `boolean` | - | Disables all interaction. Reflected to the `:state(disabled)` CSS pseudo-class. |
+| value | `string` | - | Selected ISO 8601 year-month (`YYYY-MM`). Empty string means no selection. |
+| lang | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| navigationEnabled | - | - | - |
+| renderMonth | `UseMonthPickerRenderMonth` | - | - |
+
+## Events
+
+| Name | Type | Description |
+| --- | --- | --- |
+| use-change | `CustomEvent` | Fired when the user selects a month. Detail: `{ value: string }` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `month-{YYYY-MM}` | Per-month content that replaces the default month name (e.g. `month-2026-03`) |

package/dist/docs/use-option.md

@@ -0,0 +1,20 @@
+# `use-option`
+
+`use-option` is a custom element that represents an option in a `use-select-input` custom element.
+
+The children of this element are the content of the option and must not contain any interactive elements.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selected | - | - | - |
+| disabled | - | - | - |
+| value | - | - | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `selected-indicator` | - |
+| `undefined` | - |

package/dist/docs/use-scrollarea.md

@@ -0,0 +1,17 @@
+# `use-scrollarea`
+
+A scroll container that exposes custom states for scroll edge detection.
+
+## Custom States
+The following CSS custom states are available for styling:
+
+- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)
+- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)
+- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)
+- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `` | Scrollable content |

package/dist/docs/use-select-input.md

@@ -0,0 +1,38 @@
+# `use-select-input`
+
+## Multiple
+
+The `use-listbox-input` provides an attribute for selecting multiple options.
+
+## Long term plan
+
+This web component was built with the intent to be replaced by browser-native `base-select` support once it becomes baseline.
+
+<baseline-status featureId="customizable-select"></baseline-status>
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | `string \| undefined` | - | - |
+| placeholder | `string` | `""` | - |
+| disabled | - | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selected | - | - | - |
+| firstSelected | - | - | - |
+| options | `Array<UseOption>` | - | - |
+| trigger | `HTMLButtonElement \| null` | `null` | - |
+| label | `HTMLSpanElement` | - | - |
+| activeOption | - | - | - |
+| value | `FormData` | - | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | NodeList of `use-option` elements |
+| `arrow` | - |

package/dist/docs/use-time-input.md

@@ -0,0 +1,38 @@
+# `use-time-input`
+
+Displays time picker using [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).
+
+Allows users to pick time values with proper localization and formatting.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| hours | `boolean` | `false` | - |
+| minutes | `boolean` | `false` | - |
+| seconds | `boolean` | `false` | - |
+| fractionalSeconds | `boolean` | `false` | - |
+| dayPeriod | `boolean` | `false` | - |
+| hourFormat | `"12" \| "24" \| undefined` | - | - |
+| disabled | `boolean` | `false` | - |
+| readonly | `boolean` | `false` | - |
+| value | `string` | `00:00:00` | - |
+| format | `"long" \| "short" \| "narrow" \| "digital"` | `"long"` | - |
+| lang | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | - | - | - |
+| hourInput | `HTMLInputElement` | - | - |
+| minuteInput | `HTMLInputElement` | - | - |
+| secondInput | `HTMLInputElement` | - | - |
+| fractionalSecondInput | `HTMLInputElement` | - | - |
+| dayPeriodInput | `HTMLInputElement` | - | - |
+
+## Events
+
+| Name | Type | Description |
+| --- | --- | --- |
+| input | `Event` | - |

package/dist/docs/use-tree.md

@@ -0,0 +1,30 @@
+# `use-tree`
+
+Custom input control for managing selected values in a hierarchy.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | `string \| undefined` | - | - |
+| multiple | `boolean` | `false` | - |
+| disabled | - | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selected | - | - | UseTreeItem[] |
+| firstSelected | - | - | - |
+| items | `Array<UseTreeitem>` | - | - |
+| tree | `HTMLDivElement` | - | - |
+| lazyItems | `Array<UseTreeitem>` | `[]` | - |
+| activeOption | - | - | - |
+| value | `FormData` | - | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | NodeList of `use-treeitem` elements |
+| `arrow` | - |

package/dist/docs/use-treeitem.md

@@ -0,0 +1,25 @@
+# `use-treeitem`
+
+`use-option` is a custom element that represents an option in a `use-select-input` custom element.
+
+The children of this element are the content of the option and must not contain any interactive elements.
+
+## To Do
+
+- [ ] When the parent is no longer disabled, update the items without their own `[disabled]`
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selected | - | - | - |
+| disabled | - | - | - |
+| expanded | - | - | - |
+| value | - | - | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `selected-indicator` | - |
+| `undefined` | - |

package/dist/docs/use-week-picker.md

@@ -0,0 +1,44 @@
+# `use-week-picker`
+
+A week-granularity date picker. Value format: YYYY-Www (ISO 8601 week).
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| year | `number` | - | 1970-9999 |
+| month | `number` | - | 1-12 |
+| controls | `boolean` | `false` | - |
+| navigation | `"nowrap" \| "off" \| "on"` | `"on"` | - |
+| hiddenmonths | `string` | `""` | - |
+| focusmode | `"cell" \| "control"` | `"cell"` | - |
+| name | `string \| undefined` | `""` | - |
+| min | `string \| undefined` | - | - |
+| max | `string \| undefined` | - | - |
+| start | `string \| undefined` | - | First date in the visible range. Accepts ISO 8601 date strings or `'min'` to use the same value as `min` |
+| end | `string \| undefined` | - | Last date in the visible range. Accepts ISO 8601 date strings or `'max'` to use the same value as `max` |
+| lang | `string` | - | - |
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `string` | - | - |
+| navigationEnabled | - | - | - |
+| renderDay | `UseCalendarRenderDay` | - | - |
+
+## Events
+
+| Name | Type | Description |
+| --- | --- | --- |
+| use-change | `CustomEvent` | Fired on selection with detail `{ value: string; dates: string[] }` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `header-start` | Content before the title in the header |
+| `title` | Title showing the month and year |
+| `controls` | Navigation controls (previous, today, next buttons) |
+| `header-end` | Content after the controls in the header |
+| `date-{YYYY-MM-DD}` | Per-date content that replaces the default day number |

package/dist/docs/use-widget.md

@@ -0,0 +1,21 @@
+# `use-widget`
+
+Nested controls are removed from the tab flow until the user activates the widget with `Enter` or `F2`. Clicking on a control will also activate the widget. Widgets are deactivated with `Escape` or `F2` keys or when the user clicks outside of the widget.
+
+`use-widget` can be used for easily navigating customizable dashboard widgets that contain multiple interactive elements. It can also be used for table and grid cells that contain multiple interactive elements, as described in the [WCAG Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
+
+## To do
+
+- [ ] Convert to a standard web component instead of LitElement
+- [ ] implement Arrow Key navigation for tabbable elements when activated
+
+## Sources
+
+- [tabbable](https://www.npmjs.com/package/tabbable)
+- [Grid (Interactive Tabular Data and Layout Containers) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `undefined` | - |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.37",
+  "version": "1.0.0-pre.39",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",
@@ -23,9 +23,10 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "pack": "tsc && vp run analyze && vp pack",
+    "pack": "tsc && vp run analyze && vp pack && vp run generate-docs",
     "preview": "vp preview",
     "analyze": "custom-elements-manifest analyze",
+    "generate-docs": "node scripts/generate-docs.mjs",
     "storybook": "storybook dev -p ${PORT:-6006}",
     "build": "vp run pack && storybook build",
     "test": "vp test",

package/vscode.html-custom-data.json

@@ -2,12 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "use-calendarday",
-      "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
-      "attributes": [{ "name": "date", "values": [] }],
-      "references": []
-    },
     {
       "name": "use-date-input",
       "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
@@ -19,6 +13,12 @@
       ],
       "references": []
     },
+    {
+      "name": "use-calendarday",
+      "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
+      "attributes": [{ "name": "date", "values": [] }],
+      "references": []
+    },
     {
       "name": "use-date-picker",
       "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",
@@ -123,7 +123,7 @@
     },
     {
       "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\n\n### **Slots:**\n - _default_ - Grid content (use-gridhead/use-gridbody rows)",
+      "description": "Accessible grid component following [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\n---\n\n\n### **Slots:**\n - _default_ - Grid content (use-gridhead/use-gridbody rows)",
       "attributes": [
         {
           "name": "selectmode",
@@ -152,6 +152,7 @@
       "attributes": [
         {
           "name": "mode",
+          "description": "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.",
           "values": [
             { "name": "widget" },
             { "name": "action" },