use-wc 1.0.0-pre.69 → 1.0.0-pre.70

package/custom-elements.json

@@ -89,76 +89,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-avatar/use-avatar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.",
-          "name": "UseAvatar",
-          "cssParts": [
-            {
-              "description": "The span that renders the `name` fallback.",
-              "name": "initials"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "name",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "name"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-avatar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseAvatar",
-          "declaration": {
-            "name": "UseAvatar",
-            "module": "src/elements/use-avatar/use-avatar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-avatar",
-          "declaration": {
-            "name": "UseAvatar",
-            "module": "src/elements/use-avatar/use-avatar.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-badge/use-badge.ts",
@@ -302,6 +232,76 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-avatar/use-avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.",
+          "name": "UseAvatar",
+          "cssParts": [
+            {
+              "description": "The span that renders the `name` fallback.",
+              "name": "initials"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "name",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseAvatar",
+          "declaration": {
+            "name": "UseAvatar",
+            "module": "src/elements/use-avatar/use-avatar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-avatar",
+          "declaration": {
+            "name": "UseAvatar",
+            "module": "src/elements/use-avatar/use-avatar.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-calendar-base/use-calendar-base.ts",
@@ -3667,63 +3667,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-option/use-option.ts",
@@ -3838,6 +3781,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-time-input/use-time-input.ts",

package/dist/design-system.css

@@ -232,7 +232,7 @@
       all: revert-layer;
     }
 
-    &:hover:not(:disabled, [aria-disabled="true"], [aria-readonly="true"], :checked) {
+    &:hover:not(:disabled, [aria-disabled="true"], [aria-readonly="true"], :checked, :indeterminate) {
       --usewc-color-selector-border: var(--usewc-color-selector-border-hover);
       --usewc-color-selector-background: var(--usewc-color-selector-background-hover);
     }
@@ -1995,11 +1995,11 @@
    Five variant classes name what the container *is*, and its semantic `<figure>` / `<header>` /
    `<main>` / `<footer>` regions are arranged to match:
 
-     use-layout.page      an app frame      — ruled topbar and footer, roomy
+     use-layout.page      an app frame      — a topbar and footer over the body, roomy
      use-layout.entry     a row in a list   — a leading avatar rail with the regions beside it
      use-layout.message   a chat or comment — `.entry`'s layout at chat density
-     use-layout.card      a panel           — avatar + hgroup + actions, end-aligned ruled
-                                              footer, compact, plus the chrome at end of file
+     use-layout.card      a panel           — avatar + hgroup + actions, end-aligned footer,
+                                              compact, plus the chrome at end of file
      use-layout.media     a media object    — a rail cell beside an anonymous body cell holding
                                               the stacked regions (à la Bootstrap 3's .media)
 
@@ -2008,13 +2008,22 @@
    order is canonical — figure, header, main, footer — and a variant may re-position regions
    visually but never asks an author to reorder markup.
 
-   Rather than five arrangements, a variant class sets *only* a density scale on itself
-   (`--usewc-layout-region-padding`, `-gap`, `-avatar-size`, `--usewc-layout-header-rule`,
-   `-footer-rule`, `--usewc-layout-footer-justify`, `-row-gap`) and one generic set of region
-   rules reads them. Only a couple of arrangements can't be said in a property — the entry and
-   message rail, the media object's table cells, and message's inline hgroup — and those follow
-   as structural overrides. The mechanic isn't repeated per variant either: a `use-layout.page` is a
-   `use-layout`, so the base pin/grow rules above already cover it.
+   A variant's own density sets *only* two axes on itself — `--usewc-layout-region-padding` (the
+   inline inset) and `--usewc-layout-region-gap` (everything block: internal spacing within a
+   region, and the padding a region gets on its own block edges) — plus `-avatar-size`,
+   `--usewc-layout-footer-justify` and `-row-gap`. Reusing `-gap` as the block padding isn't a
+   shortcut: it's the same "how far apart do things stack" value either way, so a region's own
+   padding and the room it leaves around its neighbours always agree. One generic set of region
+   rules reads these; the arrangement itself (flex vs. grid vs. table, where the avatar sits,
+   which edge a footer aligns to) stays with each variant or, where a property can't say it, a
+   structural override. A `use-layout.page` is a `use-layout`, so the base pin/grow rules above
+   already cover it too.
+
+   `.page` and `.card` also take `.divided`, which rules a header/footer off from the body — opt-in,
+   not a variant default. Undivided, the container's stacking gap does the separating, on top of
+   each region's own padding. `.divided` turns that gap off and draws a border on whichever region
+   isn't first instead, so the padding alone (never the gap) is what holds the line clear of its
+   neighbour — the two mechanisms are never both in play at once.
 
    Every selector stays compound (`use-layout.page`, never a bare `.page`) so none of these
    common words can collide with an author's own class of the same name.
@@ -2212,11 +2221,9 @@
      order by source position, later winning. */
   use-layout.page {
     --usewc-layout-region-padding: var(--usewc-layout-page-padding);
-    --usewc-layout-region-padding-block: var(--usewc-layout-page-padding-block);
     --usewc-layout-region-gap: var(--usewc-layout-page-gap);
+    --usewc-layout-region-row-gap: var(--usewc-layout-page-gap);
     --usewc-layout-region-avatar-size: var(--usewc-layout-page-avatar-size);
-    --usewc-layout-header-rule: var(--usewc-layout-region-rule);
-    --usewc-layout-footer-rule: var(--usewc-layout-region-rule);
     --usewc-layout-footer-justify: space-between;
 
     use-theme-escape & {
@@ -2252,8 +2259,8 @@
   use-layout.card {
     --usewc-layout-region-padding: var(--usewc-layout-card-padding);
     --usewc-layout-region-gap: var(--usewc-layout-card-gap);
+    --usewc-layout-region-row-gap: var(--usewc-layout-card-gap);
     --usewc-layout-region-avatar-size: var(--usewc-layout-card-avatar-size);
-    --usewc-layout-footer-rule: var(--usewc-layout-region-rule);
     --usewc-layout-footer-justify: flex-end;
 
     use-theme-escape & {
@@ -2276,10 +2283,39 @@
     }
   }
 
-  /* A rule token carries the whole border value, not just its colour, so a variant that never
-     names one gets `0 solid transparent` — no width. Declaring only a colour and leaving the
-     width at 1px would give every ruleless header and footer an invisible pixel of border, which
-     is enough to push a 36px control into a 37px region. */
+  /* `.divided` rules a region off from the one before it by position, not by tag — the border and
+     the padding that keeps it clear of its neighbour both land on "whichever child isn't first",
+     so a `<figure>`, an author's own `<section>`, or any other stand-in divides exactly like
+     `header`/`main`/`footer` do, with nothing to name per tag. It only makes sense for `.page` and
+     `.card`, the two plain-column variants where "the next region" is unambiguous; `.entry`,
+     `.message` and `.media` arrange their regions structurally instead, so a rule between them
+     isn't a single boundary to draw. Turning the stacking gap off is what makes this exclusive
+     with the undivided case — the border and the padding are the only spacing here, never the
+     gap too. */
+  use-layout:is(.page, .card).divided {
+    --usewc-layout-region-row-gap: 0;
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+
+    & > * {
+      padding-block: var(--usewc-layout-region-gap);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+
+    & > :not(:first-child) {
+      border-block-start: var(--usewc-layout-region-rule);
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+  }
+
   /* ── Generic regions ────────────────────────────────────────────────────────────────────────
      One ruleset for every variant, reading the properties above. Nested under the shared variant
      list rather than repeating it on every selector, so it stays in one place as variants are
@@ -2287,6 +2323,7 @@
      hairline by naming one rather than by having a rule of its own. */
   :where(use-layout:is(.page, .entry, .message, .card, .media)) {
     min-block-size: 0;
+    gap: var(--usewc-layout-region-row-gap);
 
     use-theme-escape & {
       all: revert-layer;
@@ -2294,7 +2331,8 @@
 
     & > use-layout[fill] {
       overflow: auto;
-      padding: var(--usewc-layout-region-padding);
+      padding-inline: var(--usewc-layout-region-padding);
+      padding-block: var(--usewc-layout-region-gap);
 
       use-theme-escape & {
         all: revert-layer;
@@ -2302,7 +2340,8 @@
     }
 
     & > main {
-      padding: var(--usewc-layout-region-padding);
+      padding-inline: var(--usewc-layout-region-padding);
+      padding-block: var(--usewc-layout-region-gap);
 
       use-theme-escape & {
         all: revert-layer;
@@ -2329,18 +2368,6 @@
       }
     }
 
-    /* A header already supplies the block-start padding, so the body region drops its own and
-       the two read as one padded column rather than a double gap under the header. A scrolling
-       `use-layout[fill]` keeps its padding, though — with `overflow: auto` a zeroed start edge
-       clips the focus ring of whatever sits at the top of the scroll. */
-    & > header + main {
-      padding-block-start: 0;
-
-      use-theme-escape & {
-        all: revert-layer;
-      }
-    }
-
     & > figure {
       margin: 0;
 
@@ -2365,9 +2392,8 @@
       align-items: center;
       justify-content: flex-start;
       gap: var(--usewc-layout-region-gap);
-      padding-block: var(--usewc-layout-region-padding-block, var(--usewc-layout-region-padding));
       padding-inline: var(--usewc-layout-region-padding);
-      border-block-end: var(--usewc-layout-header-rule, 0 solid transparent);
+      padding-block: var(--usewc-layout-region-gap);
 
       use-theme-escape & {
         all: revert-layer;
@@ -2379,9 +2405,8 @@
       align-items: center;
       justify-content: var(--usewc-layout-footer-justify, flex-end);
       gap: var(--usewc-layout-region-gap);
-      padding-block: var(--usewc-layout-region-padding-block, var(--usewc-layout-region-padding));
       padding-inline: var(--usewc-layout-region-padding);
-      border-block-start: var(--usewc-layout-footer-rule, 0 solid transparent);
+      padding-block: var(--usewc-layout-region-gap);
 
       use-theme-escape & {
         all: revert-layer;
@@ -2535,7 +2560,8 @@
     grid-template-columns: var(--usewc-layout-region-avatar-size) 1fr;
     column-gap: var(--usewc-layout-region-gap);
     row-gap: var(--usewc-layout-region-row-gap);
-    padding: var(--usewc-layout-region-padding);
+    padding-inline: var(--usewc-layout-region-padding);
+    padding-block: var(--usewc-layout-region-gap);
 
     use-theme-escape & {
       all: revert-layer;
@@ -2668,7 +2694,8 @@
     display: table;
     inline-size: 100%;
     border-spacing: 0;
-    padding: var(--usewc-layout-region-padding);
+    padding-inline: var(--usewc-layout-region-padding);
+    padding-block: var(--usewc-layout-region-gap);
 
     use-theme-escape & {
       all: revert-layer;

package/dist/tokens.css

@@ -732,7 +732,6 @@
   );
 
   --usewc-layout-page-padding: var(--usewc-space-20);
-  --usewc-layout-page-padding-block: var(--usewc-space-12);
   --usewc-layout-page-gap: var(--usewc-space-12);
   --usewc-layout-page-avatar-size: var(--usewc-layout-region-title-block-size);
 

package/dist/use-wc.d.mts

@@ -1604,4 +1604,122 @@ declare global {
   }
 }
 //#endregion
-export { UseAnchored, UseAvatar, UseBadge, UseCalendarBase, UseCalendarRenderDay, UseCaret, UseDateInput, UseDatePicker, UseDatetimeInput, UseDurationInput, UseFocusgroup, UseIntlDatetime, UseIntlNumber, UseListboxInput, UseMenu, UseMonthPicker, UseMonthPickerRenderMonth, UseOption, UseScrollarea, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };
+//#region src/elements/use-grid/constants.d.ts
+declare const SELECTION_CELL_ATTRIBUTE = "data-usewc-selection-cell";
+//#endregion
+//#region src/elements/use-grid/use-grid.d.ts
+/** Accepted `selectwith` values — `"none"` alone, or `"row"` and/or `"control"` (canonical order). */
+type SelectWith = "none" | "row" | "control" | "row control";
+/**
+ * Accessible grid component following [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
+ *
+ * ## Grid Cell Modes
+ * The `mode` attribute of the `use-gridcell` element 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.
+ *
+ * ## Accessible Label
+ * Provide `aria-label` or `aria-labelledby` on the `use-grid` element so screen readers can identify the grid.
+ *
+ * @slot - Grid content (use-gridhead/use-gridbody rows)
+ */
+declare class UseGrid extends LitElement {
+  #private;
+  static formAssociated: boolean;
+  get internals(): ElementInternals;
+  selectmode: "multiple" | "single" | "none";
+  selectwith: SelectWith;
+  name: string;
+  role: string;
+  disabled: boolean;
+  readonly: boolean;
+  constructor();
+  /** `true` when `selectmode="multiple"`. Read by `use-gridcell` selection cells. */
+  get isMultiSelect(): boolean;
+  /**
+   * `true` when a checkbox/radio selection column should exist (`selectmode` on and `selectwith`
+   * includes `control`). Read by `use-gridrow.reconcileSelectorCell`.
+   */
+  get injectsSelectionColumn(): boolean;
+  /**
+   * The shared `name` for injected radio controls — the grid's `name` when set, otherwise a stable
+   * generated id. Lazily created so single-select grids without a `name` still group correctly.
+   */
+  get selectionGroupName(): string;
+  isRowDisabled(row: Element | null | undefined): boolean;
+  set value(value: string[] | string);
+  get value(): string[] | string | null;
+  updated(changedProps: Map<string, unknown>): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  render(): TemplateResult$1<1>;
+  static styles: import("lit").CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "use-grid": UseGrid;
+  }
+}
+//#endregion
+//#region src/elements/use-grid/use-gridhead.d.ts
+declare class UseGridHead extends HTMLElement {
+  connectedCallback(): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "use-gridhead": UseGridHead;
+  }
+}
+//#endregion
+//#region src/elements/use-grid/use-gridbody.d.ts
+declare class UseGridBody extends HTMLElement {
+  connectedCallback(): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "use-gridbody": UseGridBody;
+  }
+}
+//#endregion
+//#region src/elements/use-grid/use-gridrow.d.ts
+declare class UseGridRow extends LitElement {
+  #private;
+  selected: boolean;
+  disabled: boolean;
+  readonly: boolean;
+  value: string;
+  firstUpdated(): void;
+  updated(): void;
+  reconcileSelectorCell(): void;
+  render(): TemplateResult$1<1>;
+  static styles: import("lit").CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "use-gridrow": UseGridRow;
+  }
+}
+//#endregion
+//#region src/elements/use-grid/use-gridcell.d.ts
+declare class UseGridCell extends UseWidget {
+  #private;
+  /**
+   * 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.
+   */
+  mode: "widget" | "action" | "default";
+  connectedCallback(): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "use-gridcell": UseGridCell;
+  }
+}
+//#endregion
+export { SELECTION_CELL_ATTRIBUTE, UseAnchored, UseAvatar, UseBadge, UseCalendarBase, UseCalendarRenderDay, UseCaret, UseDateInput, UseDatePicker, UseDatetimeInput, UseDurationInput, UseFocusgroup, UseGrid, UseGridBody, UseGridCell, UseGridHead, UseGridRow, UseIntlDatetime, UseIntlNumber, UseListboxInput, UseMenu, UseMonthPicker, UseMonthPickerRenderMonth, UseOption, UseScrollarea, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };