@helixui/library 3.6.0 → 3.7.0

package/custom-elements.json

@@ -4,462 +4,196 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/components/hx-action-bar/hx-action-bar.ts",
+      "path": "src/components/hx-accordion/hx-accordion-item.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A horizontal toolbar container for grouping related action buttons and controls.\nImplements the ARIA toolbar pattern with roving tabindex keyboard navigation.",
-          "name": "HelixActionBar",
+          "description": "An individual accordion item with collapsible content.\n\n## Architecture Note: Slot Projection vs. Host-Canonical (group-4 round-1)\n\n`hx-accordion-item` deliberately does NOT participate in the\nhost-canonical / `internals.ariaLabelledByElements` pattern used by every\nother group-2/3/4 component. Rationale:\n\n  1. The trigger label comes from `<slot name=\"trigger\">` — consumer\n     light-DOM projected directly into the `<summary>` element. AT reads\n     the slot-projected text natively because slot projection preserves\n     accessible name (the `<summary>` IS the heading and consumes the\n     slotted text in its own accessible name computation).\n  2. `aria-labelledby=\"${_uid}-trigger\"` on the inner content region and\n     `aria-controls=\"${_uid}-content\"` on the summary BOTH resolve\n     same-shadow-root, which works correctly across every AT — these\n     IDREFs never cross a shadow boundary.\n  3. Pushing these ids through `internals.ariaLabelledByElements` would\n     either duplicate the wiring (heading announced twice) or break the\n     native `<details>/<summary>` toggle semantics (the host carrying\n     `role=\"heading\"` would shadow the summary's own heading projection).\n\n`role=\"heading\"` on `<summary>` (with `aria-level=N`) is the APG-canonical\nAccordion pattern. Per the APG note, `<summary>` MUST be a direct child\nof `<details>` for the native toggle to function — wrapping it in an\n`<h3>` would forfeit native disclosure. The role-on-summary approach is\nthe authoritative compromise. NVDA, JAWS, and VoiceOver all announce the\nsummary as a heading at the configured level when this pattern is used.\n\n`aria-controls` on the summary points at the shadow-internal content\nregion; APG marks the relationship as implicit via the heading + region\nstructure, so AT not following the IDREF still announces correctly. The\nIDREF is a hint, not a requirement — and because both ids are in the\nsame shadow root, it resolves cleanly when AT does follow it. This\nmatches the popover/dropdown intentional `aria-controls` omission for\nthe cross-shadow case (see those components' code comments).",
+          "name": "HelixAccordionItem",
           "cssProperties": [
             {
-              "description": "Bar background color (default variant).",
-              "name": "--hx-action-bar-bg",
-              "default": "transparent"
-            },
-            {
-              "description": "Bar border (default variant).",
-              "name": "--hx-action-bar-border",
-              "default": "none"
-            },
-            {
-              "description": "Inner padding.",
-              "name": "--hx-action-bar-padding",
-              "default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
-            },
-            {
-              "description": "Gap between slotted items.",
-              "name": "--hx-action-bar-gap",
-              "default": "var(--hx-space-2,0.5rem)"
-            },
-            {
-              "description": "Z-index when sticky or bottom position.",
-              "name": "--hx-action-bar-z-index",
-              "default": "10"
-            },
-            {
-              "description": "Padding.",
-              "name": "--hx-action-bar-padding-block-start",
-              "default": "0px"
-            },
-            {
-              "description": "Padding.",
-              "name": "--hx-action-bar-padding-block-end",
-              "default": "0px"
-            },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-border-radius-md"
-            },
-            {
-              "description": "Width.",
-              "name": "--hx-border-width-thin"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-0"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-200"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-neutral-50"
+              "description": "Border color between items.",
+              "name": "--hx-accordion-border-color",
+              "default": "var(--hx-color-neutral-200)"
             },
             {
-              "description": "Size token.",
-              "name": "--hx-size-8"
+              "description": "Trigger padding.",
+              "name": "--hx-accordion-trigger-padding",
+              "default": "var(--hx-space-4)"
             },
             {
-              "description": "Size token.",
-              "name": "--hx-size-10"
+              "description": "Trigger text color.",
+              "name": "--hx-accordion-trigger-color",
+              "default": "var(--hx-color-neutral-800)"
             },
             {
-              "description": "Size token.",
-              "name": "--hx-size-12"
+              "description": "Trigger background color.",
+              "name": "--hx-accordion-trigger-bg",
+              "default": "transparent"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-1"
+              "description": "Trigger hover background.",
+              "name": "--hx-accordion-trigger-hover-bg",
+              "default": "var(--hx-color-neutral-50)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-2"
+              "description": "Icon color.",
+              "name": "--hx-accordion-icon-color",
+              "default": "var(--hx-color-neutral-500)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-3"
+              "description": "Content padding.",
+              "name": "--hx-accordion-content-padding",
+              "default": "0 var(--hx-space-4) var(--hx-space-4)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-4"
+              "description": "Content text color.",
+              "name": "--hx-accordion-content-color",
+              "default": "var(--hx-color-neutral-600)"
             }
           ],
           "cssParts": [
             {
-              "description": "The root toolbar container element.",
-              "name": "base"
-            },
-            {
-              "description": "The start (left) slot wrapper.",
-              "name": "start"
+              "description": "The outer details element container.",
+              "name": "item"
             },
             {
-              "description": "The center (default) slot wrapper.",
-              "name": "center"
+              "description": "The summary/trigger element.",
+              "name": "trigger"
             },
             {
-              "description": "The end (right) slot wrapper.",
-              "name": "end"
+              "description": "The collapsible content area.",
+              "name": "content"
             },
             {
-              "description": "The overflow slot wrapper (hidden when no overflow content).",
-              "name": "overflow"
+              "description": "The expand/collapse icon.",
+              "name": "icon"
             }
           ],
           "slots": [
             {
-              "description": "Left-aligned actions.",
-              "name": "start"
+              "description": "The heading/trigger content for this item.",
+              "name": "trigger"
             },
             {
-              "description": "Center content (default slot).",
+              "description": "Default slot for the collapsible body content.",
               "name": ""
-            },
-            {
-              "description": "Right-aligned actions.",
-              "name": "end"
-            },
-            {
-              "description": "Actions revealed when the bar is constrained for space.",
-              "name": "overflow"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
+              "name": "expanded",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "boolean"
               },
-              "default": "'md'",
-              "description": "Size of the action bar — propagated as a data attribute to slotted children.",
-              "attribute": "hx-size",
+              "default": "false",
+              "description": "Whether this item is expanded.",
+              "attribute": "expanded",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "disabled",
               "type": {
-                "text": "'default' | 'outlined' | 'filled'"
+                "text": "boolean"
               },
-              "default": "'default'",
-              "description": "Visual variant controlling the bar background.",
-              "attribute": "variant",
+              "default": "false",
+              "description": "Whether this item is disabled (cannot be toggled).",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "level",
               "type": {
-                "text": "'top' | 'bottom' | 'sticky'"
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
               },
-              "default": "'top'",
-              "description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n  scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
-              "attribute": "position",
-              "reflects": true
+              "default": "3",
+              "description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
+              "attribute": "level"
+            }
+          ],
+          "events": [
+            {
+              "name": "hx-expand",
+              "type": {
+                "text": "CustomEvent<{expanded: boolean, itemId: string}>"
+              },
+              "description": "Dispatched when the item is expanded."
             },
             {
-              "kind": "field",
-              "name": "accessibleLabel",
+              "name": "hx-collapse",
               "type": {
-                "text": "string"
+                "text": "CustomEvent<{expanded: boolean, itemId: string}>"
               },
-              "default": "''",
-              "description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
-              "attribute": "accessible-label"
+              "description": "Dispatched when the item is collapsed."
             }
           ],
           "attributes": [
             {
-              "name": "hx-size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'md'",
-              "description": "Size of the action bar — propagated as a data attribute to slotted children.",
-              "fieldName": "size",
-              "attribute": "hx-size"
-            },
-            {
-              "name": "variant",
+              "name": "expanded",
               "type": {
-                "text": "'default' | 'outlined' | 'filled'"
+                "text": "boolean"
               },
-              "default": "'default'",
-              "description": "Visual variant controlling the bar background.",
-              "fieldName": "variant",
-              "attribute": "variant"
+              "default": "false",
+              "description": "Whether this item is expanded.",
+              "fieldName": "expanded",
+              "attribute": "expanded"
             },
             {
-              "name": "position",
+              "name": "disabled",
               "type": {
-                "text": "'top' | 'bottom' | 'sticky'"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n  scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
-              "fieldName": "position",
-              "attribute": "position"
+              "default": "false",
+              "description": "Whether this item is disabled (cannot be toggled).",
+              "fieldName": "disabled",
+              "attribute": "disabled"
             },
             {
-              "name": "accessible-label",
+              "name": "level",
               "type": {
-                "text": "string"
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
               },
-              "default": "''",
-              "description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
-              "fieldName": "accessibleLabel",
-              "attribute": "accessible-label"
+              "default": "3",
+              "description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
+              "fieldName": "level",
+              "attribute": "level"
             }
           ],
           "superclass": {
             "name": "HelixElement",
             "module": "/src/base/index.js"
           },
-          "tagName": "hx-action-bar",
+          "tagName": "hx-accordion-item",
           "customElement": true,
-          "summary": "Horizontal action bar for grouping related controls.",
-          "helixMeta": {
-            "priorityTier": "P0"
-          }
+          "summary": "Collapsible panel that can be expanded or collapsed."
+        },
+        {
+          "kind": "variable",
+          "name": "detail",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ expanded, itemId: this.id || '' }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "HelixActionBar",
+          "name": "HelixAccordionItem",
           "declaration": {
-            "name": "HelixActionBar",
-            "module": "src/components/hx-action-bar/hx-action-bar.ts"
+            "name": "HelixAccordionItem",
+            "module": "src/components/hx-accordion/hx-accordion-item.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "hx-action-bar",
+          "name": "hx-accordion-item",
           "declaration": {
-            "name": "HelixActionBar",
-            "module": "src/components/hx-action-bar/hx-action-bar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/hx-action-bar/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "HelixActionBar",
-          "declaration": {
-            "name": "HelixActionBar",
-            "module": "./hx-action-bar.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/hx-accordion/hx-accordion-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An individual accordion item with collapsible content.\n\n## Architecture Note: Slot Projection vs. Host-Canonical (group-4 round-1)\n\n`hx-accordion-item` deliberately does NOT participate in the\nhost-canonical / `internals.ariaLabelledByElements` pattern used by every\nother group-2/3/4 component. Rationale:\n\n  1. The trigger label comes from `<slot name=\"trigger\">` — consumer\n     light-DOM projected directly into the `<summary>` element. AT reads\n     the slot-projected text natively because slot projection preserves\n     accessible name (the `<summary>` IS the heading and consumes the\n     slotted text in its own accessible name computation).\n  2. `aria-labelledby=\"${_uid}-trigger\"` on the inner content region and\n     `aria-controls=\"${_uid}-content\"` on the summary BOTH resolve\n     same-shadow-root, which works correctly across every AT — these\n     IDREFs never cross a shadow boundary.\n  3. Pushing these ids through `internals.ariaLabelledByElements` would\n     either duplicate the wiring (heading announced twice) or break the\n     native `<details>/<summary>` toggle semantics (the host carrying\n     `role=\"heading\"` would shadow the summary's own heading projection).\n\n`role=\"heading\"` on `<summary>` (with `aria-level=N`) is the APG-canonical\nAccordion pattern. Per the APG note, `<summary>` MUST be a direct child\nof `<details>` for the native toggle to function — wrapping it in an\n`<h3>` would forfeit native disclosure. The role-on-summary approach is\nthe authoritative compromise. NVDA, JAWS, and VoiceOver all announce the\nsummary as a heading at the configured level when this pattern is used.\n\n`aria-controls` on the summary points at the shadow-internal content\nregion; APG marks the relationship as implicit via the heading + region\nstructure, so AT not following the IDREF still announces correctly. The\nIDREF is a hint, not a requirement — and because both ids are in the\nsame shadow root, it resolves cleanly when AT does follow it. This\nmatches the popover/dropdown intentional `aria-controls` omission for\nthe cross-shadow case (see those components' code comments).",
-          "name": "HelixAccordionItem",
-          "cssProperties": [
-            {
-              "description": "Border color between items.",
-              "name": "--hx-accordion-border-color",
-              "default": "var(--hx-color-neutral-200)"
-            },
-            {
-              "description": "Trigger padding.",
-              "name": "--hx-accordion-trigger-padding",
-              "default": "var(--hx-space-4)"
-            },
-            {
-              "description": "Trigger text color.",
-              "name": "--hx-accordion-trigger-color",
-              "default": "var(--hx-color-neutral-800)"
-            },
-            {
-              "description": "Trigger background color.",
-              "name": "--hx-accordion-trigger-bg",
-              "default": "transparent"
-            },
-            {
-              "description": "Trigger hover background.",
-              "name": "--hx-accordion-trigger-hover-bg",
-              "default": "var(--hx-color-neutral-50)"
-            },
-            {
-              "description": "Icon color.",
-              "name": "--hx-accordion-icon-color",
-              "default": "var(--hx-color-neutral-500)"
-            },
-            {
-              "description": "Content padding.",
-              "name": "--hx-accordion-content-padding",
-              "default": "0 var(--hx-space-4) var(--hx-space-4)"
-            },
-            {
-              "description": "Content text color.",
-              "name": "--hx-accordion-content-color",
-              "default": "var(--hx-color-neutral-600)"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The outer details element container.",
-              "name": "item"
-            },
-            {
-              "description": "The summary/trigger element.",
-              "name": "trigger"
-            },
-            {
-              "description": "The collapsible content area.",
-              "name": "content"
-            },
-            {
-              "description": "The expand/collapse icon.",
-              "name": "icon"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The heading/trigger content for this item.",
-              "name": "trigger"
-            },
-            {
-              "description": "Default slot for the collapsible body content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether this item is expanded.",
-              "attribute": "expanded",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether this item is disabled (cannot be toggled).",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "default": "3",
-              "description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
-              "attribute": "level"
-            }
-          ],
-          "events": [
-            {
-              "name": "hx-expand",
-              "type": {
-                "text": "CustomEvent<{expanded: boolean, itemId: string}>"
-              },
-              "description": "Dispatched when the item is expanded."
-            },
-            {
-              "name": "hx-collapse",
-              "type": {
-                "text": "CustomEvent<{expanded: boolean, itemId: string}>"
-              },
-              "description": "Dispatched when the item is collapsed."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether this item is expanded.",
-              "fieldName": "expanded",
-              "attribute": "expanded"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether this item is disabled (cannot be toggled).",
-              "fieldName": "disabled",
-              "attribute": "disabled"
-            },
-            {
-              "name": "level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "default": "3",
-              "description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
-              "fieldName": "level",
-              "attribute": "level"
-            }
-          ],
-          "superclass": {
-            "name": "HelixElement",
-            "module": "/src/base/index.js"
-          },
-          "tagName": "hx-accordion-item",
-          "customElement": true,
-          "summary": "Collapsible panel that can be expanded or collapsed."
-        },
-        {
-          "kind": "variable",
-          "name": "detail",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ expanded, itemId: this.id || '' }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "HelixAccordionItem",
-          "declaration": {
-            "name": "HelixAccordionItem",
-            "module": "src/components/hx-accordion/hx-accordion-item.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "hx-accordion-item",
-          "declaration": {
-            "name": "HelixAccordionItem",
-            "module": "src/components/hx-accordion/hx-accordion-item.ts"
+            "name": "HelixAccordionItem",
+            "module": "src/components/hx-accordion/hx-accordion-item.ts"
           }
         }
       ]
@@ -593,187 +327,79 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/hx-alert/hx-alert.ts",
+      "path": "src/components/hx-action-bar/hx-action-bar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A feedback component for communicating status messages, warnings, and errors.\nCritical for healthcare patient safety alerts.",
-          "name": "HelixAlert",
+          "description": "A horizontal toolbar container for grouping related action buttons and controls.\nImplements the ARIA toolbar pattern with roving tabindex keyboard navigation.",
+          "name": "HelixActionBar",
           "cssProperties": [
             {
-              "description": "Alert background color.",
-              "name": "--hx-alert-bg",
-              "default": "var(--hx-color-info-50)"
+              "description": "Bar background color (default variant).",
+              "name": "--hx-action-bar-bg",
+              "default": "transparent"
             },
             {
-              "description": "Alert text color.",
-              "name": "--hx-alert-color",
-              "default": "var(--hx-color-info-800)"
+              "description": "Bar border (default variant).",
+              "name": "--hx-action-bar-border",
+              "default": "none"
             },
             {
-              "description": "Alert border color.",
-              "name": "--hx-alert-border-color",
-              "default": "var(--hx-color-info-200)"
+              "description": "Inner padding.",
+              "name": "--hx-action-bar-padding",
+              "default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
             },
             {
-              "description": "Alert border radius.",
-              "name": "--hx-alert-border-radius",
-              "default": "var(--hx-border-radius-md)"
+              "description": "Gap between slotted items.",
+              "name": "--hx-action-bar-gap",
+              "default": "var(--hx-space-2,0.5rem)"
             },
             {
-              "description": "Alert border width.",
-              "name": "--hx-alert-border-width",
-              "default": "var(--hx-border-width-thin)"
+              "description": "Z-index when sticky or bottom position.",
+              "name": "--hx-action-bar-z-index",
+              "default": "10"
             },
             {
-              "description": "Alert padding.",
-              "name": "--hx-alert-padding",
-              "default": "var(--hx-space-4)"
+              "description": "Padding.",
+              "name": "--hx-action-bar-padding-block-start",
+              "default": "0px"
             },
             {
-              "description": "Gap between alert elements.",
-              "name": "--hx-alert-gap",
-              "default": "var(--hx-space-3)"
-            },
-            {
-              "description": "Alert icon color.",
-              "name": "--hx-alert-icon-color",
-              "default": "var(--hx-color-info-500)"
-            },
-            {
-              "description": "Alert font family.",
-              "name": "--hx-alert-font-family",
-              "default": "var(--hx-font-family-sans)"
-            },
-            {
-              "description": "Minimum touch target size for the close button.",
-              "name": "--hx-touch-target-size",
-              "default": "44px"
-            },
-            {
-              "description": "Width of the left border accent stripe.",
-              "name": "--hx-alert-accent-width",
-              "default": "4px"
+              "description": "Padding.",
+              "name": "--hx-action-bar-padding-block-end",
+              "default": "0px"
             },
             {
               "description": "CSS custom property.",
               "name": "--hx-border-radius-md"
             },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-border-radius-sm"
-            },
             {
               "description": "Width.",
               "name": "--hx-border-width-thin"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-error-200"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-error-50"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-error-500"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-error-800"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-info-200"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-info-50"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-info-500"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-info-800"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-primary-400"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-success-200"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-success-50"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-success-500"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-success-800"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-warning-200"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-warning-50"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-warning-500"
+              "name": "--hx-color-neutral-0"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-warning-800"
+              "name": "--hx-color-neutral-200"
             },
             {
               "description": "Color.",
-              "name": "--hx-focus-ring-color"
-            },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-focus-ring-offset"
-            },
-            {
-              "description": "Width.",
-              "name": "--hx-focus-ring-width"
-            },
-            {
-              "description": "Font family.",
-              "name": "--hx-font-family-sans"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-md"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-sm"
-            },
-            {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-semibold"
+              "name": "--hx-color-neutral-50"
             },
             {
-              "description": "Line height.",
-              "name": "--hx-line-height-normal"
+              "description": "Size token.",
+              "name": "--hx-size-8"
             },
             {
-              "description": "Opacity.",
-              "name": "--hx-opacity-100"
+              "description": "Size token.",
+              "name": "--hx-size-10"
             },
             {
-              "description": "Opacity.",
-              "name": "--hx-opacity-75"
+              "description": "Size token.",
+              "name": "--hx-size-12"
             },
             {
               "description": "Spacing token.",
@@ -790,135 +416,509 @@
             {
               "description": "Spacing token.",
               "name": "--hx-space-4"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-5"
-            },
-            {
-              "description": "Transition timing.",
-              "name": "--hx-transition-fast"
             }
           ],
           "cssParts": [
             {
-              "description": "The outer alert container.",
-              "name": "alert"
-            },
-            {
-              "description": "The title/headline container.",
-              "name": "title"
+              "description": "The root toolbar container element.",
+              "name": "base"
             },
             {
-              "description": "The icon container.",
-              "name": "icon"
+              "description": "The start (left) slot wrapper.",
+              "name": "start"
             },
             {
-              "description": "The message content area.",
-              "name": "message"
+              "description": "The center (default) slot wrapper.",
+              "name": "center"
             },
             {
-              "description": "The dismiss button (only rendered when dismissible).",
-              "name": "close-button"
+              "description": "The end (right) slot wrapper.",
+              "name": "end"
             },
             {
-              "description": "The actions container.",
-              "name": "actions"
+              "description": "The overflow slot wrapper (hidden when no overflow content).",
+              "name": "overflow"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for alert message content.",
-              "name": ""
+              "description": "Left-aligned actions.",
+              "name": "start"
             },
             {
-              "description": "Optional title/headline for the alert.",
-              "name": "title"
+              "description": "Center content (default slot).",
+              "name": ""
             },
             {
-              "description": "Custom icon to override the default variant icon.",
-              "name": "icon"
+              "description": "Right-aligned actions.",
+              "name": "end"
             },
             {
-              "description": "Action buttons rendered within the alert.",
-              "name": "actions"
+              "description": "Actions revealed when the bar is constrained for space.",
+              "name": "overflow"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "'info' | 'success' | 'warning' | 'error'"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "default": "'info'",
-              "description": "Visual variant of the alert that determines colors and ARIA semantics.",
-              "attribute": "variant",
+              "default": "'md'",
+              "description": "Size of the action bar — propagated as a data attribute to slotted children.",
+              "attribute": "hx-size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "dismissible",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "'default' | 'outlined' | 'filled'"
               },
-              "default": "false",
-              "description": "Whether the alert can be dismissed by the user.",
-              "attribute": "dismissible",
+              "default": "'default'",
+              "description": "Visual variant controlling the bar background.",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "heading",
+              "name": "position",
               "type": {
-                "text": "string"
+                "text": "'top' | 'bottom' | 'sticky'"
               },
-              "default": "''",
-              "description": "Optional heading text that provides context for the close button's accessible label.\nWhen provided, the close button is announced as \"Close [heading] alert\".\nWhen absent, the close button falls back to \"Close alert\".",
-              "attribute": "heading"
+              "default": "'top'",
+              "description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n  scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
+              "attribute": "position",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "labelClose",
+              "name": "accessibleLabel",
               "type": {
                 "text": "string"
               },
-              "default": "'Close alert'",
-              "description": "Accessible label for the close button. Override for i18n.",
-              "attribute": "label-close"
-            },
+              "default": "''",
+              "description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
+              "attribute": "accessible-label"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "open",
+              "name": "hx-size",
               "type": {
-                "text": "boolean"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "default": "false",
-              "description": "Whether the alert is visible. Add the `open` attribute to show the alert.",
-              "attribute": "open",
-              "reflects": true
+              "default": "'md'",
+              "description": "Size of the action bar — propagated as a data attribute to slotted children.",
+              "fieldName": "size",
+              "attribute": "hx-size"
             },
             {
-              "kind": "field",
-              "name": "showIcon",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "'default' | 'outlined' | 'filled'"
               },
-              "default": "false",
-              "description": "Whether to show the default variant icon. Add `show-icon` attribute to display the icon.",
-              "attribute": "show-icon",
-              "reflects": true
+              "default": "'default'",
+              "description": "Visual variant controlling the bar background.",
+              "fieldName": "variant",
+              "attribute": "variant"
             },
             {
-              "kind": "field",
-              "name": "accent",
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "'top' | 'bottom' | 'sticky'"
               },
-              "default": "false",
-              "description": "When true, applies a left border accent stripe instead of a full border.\nCommon healthcare/enterprise dashboard pattern for visual distinction of alert types.",
-              "attribute": "accent",
-              "reflects": true
+              "default": "'top'",
+              "description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n  scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
+              "fieldName": "position",
+              "attribute": "position"
+            },
+            {
+              "name": "accessible-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
+              "fieldName": "accessibleLabel",
+              "attribute": "accessible-label"
+            }
+          ],
+          "superclass": {
+            "name": "HelixElement",
+            "module": "/src/base/index.js"
+          },
+          "tagName": "hx-action-bar",
+          "customElement": true,
+          "summary": "Horizontal action bar for grouping related controls.",
+          "helixMeta": {
+            "priorityTier": "P0"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HelixActionBar",
+          "declaration": {
+            "name": "HelixActionBar",
+            "module": "src/components/hx-action-bar/hx-action-bar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "hx-action-bar",
+          "declaration": {
+            "name": "HelixActionBar",
+            "module": "src/components/hx-action-bar/hx-action-bar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/hx-action-bar/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HelixActionBar",
+          "declaration": {
+            "name": "HelixActionBar",
+            "module": "./hx-action-bar.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/hx-alert/hx-alert.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A feedback component for communicating status messages, warnings, and errors.\nCritical for healthcare patient safety alerts.",
+          "name": "HelixAlert",
+          "cssProperties": [
+            {
+              "description": "Alert background color.",
+              "name": "--hx-alert-bg",
+              "default": "var(--hx-color-info-50)"
+            },
+            {
+              "description": "Alert text color.",
+              "name": "--hx-alert-color",
+              "default": "var(--hx-color-info-800)"
+            },
+            {
+              "description": "Alert border color.",
+              "name": "--hx-alert-border-color",
+              "default": "var(--hx-color-info-200)"
+            },
+            {
+              "description": "Alert border radius.",
+              "name": "--hx-alert-border-radius",
+              "default": "var(--hx-border-radius-md)"
+            },
+            {
+              "description": "Alert border width.",
+              "name": "--hx-alert-border-width",
+              "default": "var(--hx-border-width-thin)"
+            },
+            {
+              "description": "Alert padding.",
+              "name": "--hx-alert-padding",
+              "default": "var(--hx-space-4)"
+            },
+            {
+              "description": "Gap between alert elements.",
+              "name": "--hx-alert-gap",
+              "default": "var(--hx-space-3)"
+            },
+            {
+              "description": "Alert icon color.",
+              "name": "--hx-alert-icon-color",
+              "default": "var(--hx-color-info-500)"
+            },
+            {
+              "description": "Alert font family.",
+              "name": "--hx-alert-font-family",
+              "default": "var(--hx-font-family-sans)"
+            },
+            {
+              "description": "Minimum touch target size for the close button.",
+              "name": "--hx-touch-target-size",
+              "default": "44px"
+            },
+            {
+              "description": "Width of the left border accent stripe.",
+              "name": "--hx-alert-accent-width",
+              "default": "4px"
+            },
+            {
+              "description": "CSS custom property.",
+              "name": "--hx-border-radius-md"
+            },
+            {
+              "description": "CSS custom property.",
+              "name": "--hx-border-radius-sm"
+            },
+            {
+              "description": "Width.",
+              "name": "--hx-border-width-thin"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-error-200"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-error-50"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-error-500"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-error-800"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-info-200"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-info-50"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-info-500"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-info-800"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-primary-400"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-success-200"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-success-50"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-success-500"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-success-800"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-warning-200"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-warning-50"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-warning-500"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-warning-800"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-focus-ring-color"
+            },
+            {
+              "description": "CSS custom property.",
+              "name": "--hx-focus-ring-offset"
+            },
+            {
+              "description": "Width.",
+              "name": "--hx-focus-ring-width"
+            },
+            {
+              "description": "Font family.",
+              "name": "--hx-font-family-sans"
+            },
+            {
+              "description": "Font size.",
+              "name": "--hx-font-size-md"
+            },
+            {
+              "description": "Font size.",
+              "name": "--hx-font-size-sm"
+            },
+            {
+              "description": "Font weight.",
+              "name": "--hx-font-weight-semibold"
+            },
+            {
+              "description": "Line height.",
+              "name": "--hx-line-height-normal"
+            },
+            {
+              "description": "Opacity.",
+              "name": "--hx-opacity-100"
+            },
+            {
+              "description": "Opacity.",
+              "name": "--hx-opacity-75"
+            },
+            {
+              "description": "Spacing token.",
+              "name": "--hx-space-1"
+            },
+            {
+              "description": "Spacing token.",
+              "name": "--hx-space-2"
+            },
+            {
+              "description": "Spacing token.",
+              "name": "--hx-space-3"
+            },
+            {
+              "description": "Spacing token.",
+              "name": "--hx-space-4"
+            },
+            {
+              "description": "Spacing token.",
+              "name": "--hx-space-5"
+            },
+            {
+              "description": "Transition timing.",
+              "name": "--hx-transition-fast"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The outer alert container.",
+              "name": "alert"
+            },
+            {
+              "description": "The title/headline container.",
+              "name": "title"
+            },
+            {
+              "description": "The icon container.",
+              "name": "icon"
+            },
+            {
+              "description": "The message content area.",
+              "name": "message"
+            },
+            {
+              "description": "The dismiss button (only rendered when dismissible).",
+              "name": "close-button"
+            },
+            {
+              "description": "The actions container.",
+              "name": "actions"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for alert message content.",
+              "name": ""
+            },
+            {
+              "description": "Optional title/headline for the alert.",
+              "name": "title"
+            },
+            {
+              "description": "Custom icon to override the default variant icon.",
+              "name": "icon"
+            },
+            {
+              "description": "Action buttons rendered within the alert.",
+              "name": "actions"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'info'",
+              "description": "Visual variant of the alert that determines colors and ARIA semantics.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the alert can be dismissed by the user.",
+              "attribute": "dismissible",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional heading text that provides context for the close button's accessible label.\nWhen provided, the close button is announced as \"Close [heading] alert\".\nWhen absent, the close button falls back to \"Close alert\".",
+              "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "labelClose",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close alert'",
+              "description": "Accessible label for the close button. Override for i18n.",
+              "attribute": "label-close"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the alert is visible. Add the `open` attribute to show the alert.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "showIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show the default variant icon. Add `show-icon` attribute to display the icon.",
+              "attribute": "show-icon",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "accent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, applies a left border accent stripe instead of a full border.\nCommon healthcare/enterprise dashboard pattern for visual distinction of alert types.",
+              "attribute": "accent",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1054,8 +1054,48 @@
           "tagName": "hx-alert",
           "customElement": true,
           "summary": "Feedback alert for status messages with variant-based styling and ARIA live regions.",
+          "aaaCertified": true,
+          "aaaCertifiedDate": "2026-05-08",
           "helixMeta": {
-            "priorityTier": "P0"
+            "keyboardContract": {
+              "dismiss": [
+                "Escape"
+              ]
+            },
+            "ariaPattern": "alert",
+            "ariaPatternSource": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/",
+            "forcedColorsSupported": true,
+            "stability": "stable",
+            "since": "3.6.0",
+            "formAssociated": false,
+            "themeAware": true,
+            "brandAware": true,
+            "drupalSdcEligible": true,
+            "reactWrapperStatus": "complete",
+            "priorityTier": "P0",
+            "phiHandles": false,
+            "clinicalContext": "none",
+            "aaa": {
+              "certified": true,
+              "certifiedDate": "2026-05-08",
+              "criteria": [
+                "1.4.6",
+                "1.4.9",
+                "2.1.3",
+                "2.3.3",
+                "2.4.12",
+                "2.4.13",
+                "2.5.5",
+                "3.2.5",
+                "3.3.6",
+                "forced-colors",
+                "apg-keyboard"
+              ],
+              "auditUrl": "src/components/hx-alert/AAA-AUDIT.md"
+            },
+            "figma": {
+              "componentName": "hx-alert"
+            }
           }
         }
       ],
@@ -3350,8 +3390,50 @@
           "tagName": "hx-button",
           "customElement": true,
           "summary": "Primary interactive element for triggering actions and form submission.",
+          "aaaCertified": true,
+          "aaaCertifiedDate": "2026-05-08",
           "helixMeta": {
-            "priorityTier": "P0"
+            "keyboardContract": {
+              "activate": [
+                "Enter",
+                "Space"
+              ],
+              "disabledSuppresses": true
+            },
+            "ariaPattern": "button",
+            "ariaPatternSource": "https://www.w3.org/WAI/ARIA/apg/patterns/button/",
+            "forcedColorsSupported": true,
+            "stability": "stable",
+            "since": "3.6.0",
+            "formAssociated": true,
+            "themeAware": true,
+            "brandAware": true,
+            "drupalSdcEligible": true,
+            "reactWrapperStatus": "complete",
+            "priorityTier": "P0",
+            "phiHandles": false,
+            "clinicalContext": "none",
+            "aaa": {
+              "certified": true,
+              "certifiedDate": "2026-05-08",
+              "criteria": [
+                "1.4.6",
+                "1.4.9",
+                "2.1.3",
+                "2.3.3",
+                "2.4.12",
+                "2.4.13",
+                "2.5.5",
+                "3.2.5",
+                "3.3.6",
+                "forced-colors",
+                "apg-keyboard"
+              ],
+              "auditUrl": "src/components/hx-button/AAA-AUDIT.md"
+            },
+            "figma": {
+              "componentName": "hx-button"
+            }
           }
         }
       ],
@@ -5143,8 +5225,49 @@
           "tagName": "hx-checkbox",
           "customElement": true,
           "summary": "Form-associated checkbox with built-in label, error, and help text.",
+          "aaaCertified": true,
+          "aaaCertifiedDate": "2026-05-08",
           "helixMeta": {
-            "priorityTier": "P0"
+            "keyboardContract": {
+              "activate": [
+                "Space"
+              ],
+              "disabledSuppresses": true
+            },
+            "ariaPattern": "checkbox",
+            "ariaPatternSource": "https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/",
+            "forcedColorsSupported": true,
+            "stability": "stable",
+            "since": "3.6.0",
+            "formAssociated": true,
+            "themeAware": true,
+            "brandAware": true,
+            "drupalSdcEligible": true,
+            "reactWrapperStatus": "complete",
+            "priorityTier": "P0",
+            "phiHandles": false,
+            "clinicalContext": "none",
+            "aaa": {
+              "certified": true,
+              "certifiedDate": "2026-05-08",
+              "criteria": [
+                "1.4.6",
+                "1.4.9",
+                "2.1.3",
+                "2.3.3",
+                "2.4.12",
+                "2.4.13",
+                "2.5.5",
+                "3.2.5",
+                "3.3.6",
+                "forced-colors",
+                "apg-keyboard"
+              ],
+              "auditUrl": "src/components/hx-checkbox/AAA-AUDIT.md"
+            },
+            "figma": {
+              "componentName": "hx-checkbox"
+            }
           }
         }
       ],
@@ -9171,1349 +9294,1349 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/hx-date-picker/hx-date-picker.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Date picker component for selecting dates with keyboard-accessible calendar popup.",
-          "name": "HelixDatePicker",
-          "cssProperties": [
-            {
-              "description": "Input background color.",
-              "name": "--hx-date-picker-bg",
-              "default": "var(--hx-color-neutral-0)"
-            },
-            {
-              "description": "Input text color.",
-              "name": "--hx-date-picker-color",
-              "default": "var(--hx-color-neutral-800)"
-            },
-            {
-              "description": "Border color.",
-              "name": "--hx-date-picker-border-color",
-              "default": "var(--hx-color-neutral-300)"
-            },
+      "path": "src/components/hx-data-table/hx-data-table.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An enterprise data table with sorting, row selection, and keyboard navigation.",
+          "name": "HelixDataTable",
+          "cssProperties": [
             {
-              "description": "Border radius.",
-              "name": "--hx-date-picker-border-radius",
-              "default": "var(--hx-border-radius-md)"
+              "description": "Header background color.",
+              "name": "--hx-data-table-header-bg",
+              "default": "var(--hx-color-neutral-50)"
             },
             {
-              "description": "Font family.",
-              "name": "--hx-date-picker-font-family",
-              "default": "var(--hx-font-family-sans)"
+              "description": "Header text color.",
+              "name": "--hx-data-table-header-color",
+              "default": "var(--hx-color-neutral-700)"
             },
             {
-              "description": "Focus ring color.",
-              "name": "--hx-date-picker-focus-ring-color",
-              "default": "var(--hx-focus-ring-color)"
+              "description": "Cell text color.",
+              "name": "--hx-data-table-cell-color",
+              "default": "var(--hx-color-neutral-900)"
             },
             {
-              "description": "Error state color.",
-              "name": "--hx-date-picker-error-color",
-              "default": "var(--hx-color-error-500)"
+              "description": "Row border color.",
+              "name": "--hx-data-table-border-color",
+              "default": "var(--hx-color-neutral-200)"
             },
             {
-              "description": "Label text color.",
-              "name": "--hx-date-picker-label-color",
-              "default": "var(--hx-color-neutral-700)"
+              "description": "Row hover background.",
+              "name": "--hx-data-table-row-hover-bg",
+              "default": "var(--hx-color-neutral-50)"
             },
             {
-              "description": "Trigger icon color.",
-              "name": "--hx-date-picker-trigger-color",
-              "default": "var(--hx-color-neutral-500)"
+              "description": "Selected row background.",
+              "name": "--hx-data-table-row-selected-bg",
+              "default": "var(--hx-color-primary-50)"
             },
             {
-              "description": "Calendar background color.",
-              "name": "--hx-date-picker-calendar-bg",
-              "default": "var(--hx-color-neutral-0)"
+              "description": "Empty state text color.",
+              "name": "--hx-data-table-empty-color",
+              "default": "var(--hx-color-neutral-600)"
             },
             {
-              "description": "Calendar border color.",
-              "name": "--hx-date-picker-calendar-border-color",
-              "default": "var(--hx-color-neutral-200)"
+              "description": "Minimum table width before horizontal scrolling.",
+              "name": "--hx-data-table-min-width",
+              "default": "600px"
             },
             {
-              "description": "Calendar minimum width.",
-              "name": "--hx-date-picker-calendar-min-width",
-              "default": "18rem"
+              "description": "CSS custom property.",
+              "name": "--hx-data-table-font-family",
+              "default": "var(--hx-font-family-sans)"
             },
             {
-              "description": "Selected day background.",
-              "name": "--hx-date-picker-selected-bg",
-              "default": "var(--hx-color-primary-500)"
+              "description": "CSS custom property.",
+              "name": "--hx-data-table-shimmer-duration",
+              "default": "1.5s"
             },
             {
-              "description": "Selected day text color.",
-              "name": "--hx-date-picker-selected-color",
-              "default": "var(--hx-color-neutral-0)"
+              "description": "Font family.",
+              "name": "--hx-font-family-sans"
             },
             {
-              "description": "Today indicator color.",
-              "name": "--hx-date-picker-today-color",
-              "default": "var(--hx-color-primary-600)"
+              "description": "Font size.",
+              "name": "--hx-font-size-sm"
             },
             {
-              "description": "Calendar popup box shadow.",
-              "name": "--hx-date-picker-calendar-shadow",
-              "default": "0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)"
+              "description": "Spacing token.",
+              "name": "--hx-space-3"
             },
             {
-              "description": "Border radius.",
-              "name": "--hx-date-picker-calendar-border-radius",
-              "default": "var(--hx-border-radius-lg)"
+              "description": "Spacing token.",
+              "name": "--hx-space-4"
             },
             {
-              "description": "Background color.",
-              "name": "--hx-date-picker-selected-hover-bg",
-              "default": "var(--hx-color-primary-600)"
+              "description": "Width.",
+              "name": "--hx-border-width-thin"
             },
             {
-              "description": "Color.",
-              "name": "--hx-date-picker-trigger-hover-color",
-              "default": "var(--hx-color-neutral-700)"
+              "description": "Font weight.",
+              "name": "--hx-font-weight-semibold"
             },
             {
-              "description": "CSS custom property.",
-              "name": "--hx-border-radius-lg"
+              "description": "Minimum touch target size.",
+              "name": "--hx-touch-target-min"
             },
             {
-              "description": "CSS custom property.",
-              "name": "--hx-border-radius-md"
+              "description": "Spacing token.",
+              "name": "--hx-space-2"
             },
             {
-              "description": "CSS custom property.",
-              "name": "--hx-border-radius-sm"
+              "description": "Spacing token.",
+              "name": "--hx-space-1"
             },
             {
               "description": "Width.",
-              "name": "--hx-border-width-thin"
-            },
-            {
-              "description": "Color.",
-              "name": "--hx-color-error-500"
+              "name": "--hx-focus-ring-width"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-error-text"
+              "name": "--hx-focus-ring-color"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-0"
+              "description": "CSS custom property.",
+              "name": "--hx-focus-ring-offset"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-100"
+              "description": "CSS custom property.",
+              "name": "--hx-border-radius-sm"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-200"
+              "description": "Opacity.",
+              "name": "--hx-opacity-25"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-300"
+              "description": "Transition timing.",
+              "name": "--hx-transition-fast"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-400"
+              "description": "Opacity.",
+              "name": "--hx-opacity-100"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-neutral-500"
+              "name": "--hx-color-primary-500"
             },
             {
-              "description": "Color.",
-              "name": "--hx-color-neutral-600"
+              "description": "Size token.",
+              "name": "--hx-size-4"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-neutral-700"
+              "name": "--hx-color-neutral-50"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-neutral-800"
+              "name": "--hx-color-neutral-200"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-neutral-900"
+              "name": "--hx-color-neutral-100"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-primary-400"
+              "name": "--hx-color-neutral-700"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-primary-500"
+              "name": "--hx-color-neutral-900"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-primary-600"
+              "name": "--hx-color-neutral-600"
             },
             {
               "description": "Color.",
-              "name": "--hx-focus-ring-color"
-            },
-            {
-              "description": "CSS custom property.",
-              "name": "--hx-focus-ring-opacity"
-            },
-            {
-              "description": "Width.",
-              "name": "--hx-focus-ring-width"
-            },
-            {
-              "description": "Font family.",
-              "name": "--hx-font-family-sans"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-lg"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-md"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-sm"
-            },
-            {
-              "description": "Font size.",
-              "name": "--hx-font-size-xs"
-            },
-            {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-bold"
-            },
-            {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-medium"
-            },
-            {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-semibold"
-            },
-            {
-              "description": "Line height.",
-              "name": "--hx-line-height-normal"
+              "name": "--hx-color-primary-50"
             },
             {
               "description": "Opacity.",
-              "name": "--hx-opacity-disabled"
-            },
-            {
-              "description": "Box shadow.",
-              "name": "--hx-shadow-md"
-            },
-            {
-              "description": "Size token.",
-              "name": "--hx-size-10"
-            },
-            {
-              "description": "Size token.",
-              "name": "--hx-size-8"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-1"
-            },
-            {
-              "description": "Spacing token.",
-              "name": "--hx-space-2"
+              "name": "--hx-opacity-50"
             },
             {
               "description": "Spacing token.",
-              "name": "--hx-space-3"
-            },
-            {
-              "description": "Minimum touch target size.",
-              "name": "--hx-touch-target-min"
-            },
-            {
-              "description": "Transition timing.",
-              "name": "--hx-transition-fast"
-            },
-            {
-              "description": "Z-index layer.",
-              "name": "--hx-z-index-dropdown"
+              "name": "--hx-space-8"
             }
           ],
           "cssParts": [
             {
-              "description": "The outer field container.",
-              "name": "field"
-            },
-            {
-              "description": "The label element.",
-              "name": "label"
-            },
-            {
-              "description": "The wrapper around input and trigger.",
-              "name": "input-wrapper"
+              "description": "The `<table>` element.",
+              "name": "table"
             },
             {
-              "description": "The readonly text input displaying the formatted date.",
-              "name": "input"
+              "description": "The `<thead>` element.",
+              "name": "thead"
             },
             {
-              "description": "The calendar icon button.",
-              "name": "trigger"
+              "description": "The `<tbody>` element.",
+              "name": "tbody"
             },
             {
-              "description": "The calendar popup dialog.",
-              "name": "calendar"
+              "description": "Each `<tr>` element.",
+              "name": "tr"
             },
             {
-              "description": "The month navigation header.",
-              "name": "month-nav"
+              "description": "Each `<th>` element.",
+              "name": "th"
             },
             {
-              "description": "An individual day button in the calendar grid.",
-              "name": "day"
+              "description": "Each `<td>` element.",
+              "name": "td"
             },
             {
-              "description": "The help text container.",
-              "name": "help-text"
+              "description": "The sort indicator icon `<span>` inside sortable headers.",
+              "name": "sort-icon"
             },
             {
-              "description": "The error message container.",
-              "name": "error"
+              "description": "Each `<input type=\"checkbox\">` element.",
+              "name": "checkbox"
             }
           ],
           "slots": [
             {
-              "description": "Custom label content (overrides the label property).",
-              "name": "label"
+              "description": "Content rendered above the table (e.g., search, actions).",
+              "name": "toolbar"
             },
             {
-              "description": "Custom help text content (overrides the helpText property).",
-              "name": "help-text"
+              "description": "Custom empty-state content rendered when `rows` is empty and not loading.",
+              "name": "empty"
             },
             {
-              "description": "Custom error content (overrides the error property).",
-              "name": "error"
+              "description": "Custom loading content rendered when `loading` is true.",
+              "name": "loading"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the field, used for form submission.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
+              "name": "columns",
               "type": {
-                "text": "string"
+                "text": "HxDataTableColumn[]"
               },
-              "default": "''",
-              "description": "The current value as an ISO 8601 date string (e.g. 2026-03-04).",
-              "attribute": "value"
+              "default": "[]",
+              "description": "Column definitions. Each item: `{ key, label, sortable?, width? }`.\nCan be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).",
+              "attribute": "columns"
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "rows",
               "type": {
-                "text": "string"
+                "text": "Record<string, unknown>[]"
               },
-              "default": "''",
-              "description": "The minimum selectable date as an ISO 8601 string.",
-              "attribute": "min"
+              "default": "[]",
+              "description": "Row data. Each item is a plain object keyed by column `key` values.\nCan be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).",
+              "attribute": "rows"
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "selectable",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The maximum selectable date as an ISO 8601 string.",
-              "attribute": "max"
+              "default": "false",
+              "description": "When true, renders a checkbox column for row selection.",
+              "attribute": "selectable",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "sortKey",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The visible label text.",
-              "attribute": "label"
+              "description": "The column key currently used for sorting.",
+              "attribute": "sort-key"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "sortDirection",
               "type": {
-                "text": "boolean"
+                "text": "'asc' | 'desc'"
               },
-              "default": "false",
-              "description": "Whether the field is required for form submission.",
-              "attribute": "required",
-              "reflects": true
+              "default": "'asc'",
+              "description": "Current sort direction.",
+              "attribute": "sort-direction"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the field is disabled.",
-              "attribute": "disabled",
+              "description": "When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.",
+              "attribute": "loading",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "emptyLabel",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Error message to display. When set, the field enters an error state.",
-              "attribute": "error"
+              "default": "'No data'",
+              "description": "Text displayed in the default empty state when `rows` is empty and not loading.",
+              "attribute": "empty-label"
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Help text displayed below the field for guidance.",
-              "attribute": "help-text"
-            },
-            {
-              "kind": "field",
-              "name": "format",
-              "type": {
-                "text": "string"
-              },
-              "default": "'MM/DD/YYYY'",
-              "description": "Display format hint shown as placeholder (e.g. MM/DD/YYYY).",
-              "attribute": "format"
-            },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "'en-US'",
-              "description": "Locale string used for formatting the display value.",
-              "attribute": "locale"
-            },
-            {
-              "kind": "field",
-              "name": "requiredMessage",
-              "type": {
-                "text": "string"
-              },
-              "default": "'This field is required.'",
-              "description": "Validation message shown when the field is required but empty.",
-              "attribute": "required-message"
-            },
-            {
-              "kind": "field",
-              "name": "chooseDateLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Choose a date'",
-              "description": "Accessible label for the calendar dialog.",
-              "attribute": "choose-date-label"
-            },
-            {
-              "kind": "field",
-              "name": "openCalendarLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Open calendar'",
-              "description": "Accessible label for the calendar trigger button when the calendar is closed.",
-              "attribute": "open-calendar-label"
-            },
-            {
-              "kind": "field",
-              "name": "closeCalendarLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Close calendar'",
-              "description": "Accessible label for the calendar trigger button when the calendar is open.",
-              "attribute": "close-calendar-label"
-            },
-            {
-              "kind": "field",
-              "name": "previousMonthLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Previous month'",
-              "description": "Accessible label for the previous month navigation button.",
-              "attribute": "previous-month-label"
+              "description": "Accessible name for the table. Exposed via `aria-label` on the `<table>` element.\nRequired when the table has columns — a missing label is a WCAG 4.1.2 violation.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "nextMonthLabel",
+              "name": "selectAllLabel",
               "type": {
                 "text": "string"
               },
-              "default": "'Next month'",
-              "description": "Accessible label for the next month navigation button.",
-              "attribute": "next-month-label"
+              "default": "'Select all rows'",
+              "description": "Accessible label for the \"select all rows\" checkbox in the table header.",
+              "attribute": "select-all-label"
             },
             {
               "kind": "field",
-              "name": "accessibleLabel",
+              "name": "stickyHeader",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Accessible name for screen readers, if different from the visible label.\nUses `accessible-label` attribute instead of `aria-label` to avoid\nARIAMixin shadowing on the host element. Highest-precedence naming source.",
-              "attribute": "accessible-label"
+              "default": "false",
+              "description": "When true, the header row is sticky (position: sticky; top: 0).",
+              "attribute": "sticky-header",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_handleDocumentClick",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "name": "hx-change",
-              "type": {
-                "text": "CustomEvent<{value: string, date: Date | null}>"
-              },
-              "description": "Emitted when the selected date changes."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the field, used for form submission.",
-              "fieldName": "name",
-              "attribute": "name"
-            },
-            {
-              "name": "value",
+              "name": "page",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The current value as an ISO 8601 date string (e.g. 2026-03-04).",
-              "fieldName": "value",
-              "attribute": "value"
+              "default": "1",
+              "description": "Current page (1-based). Set to 0 or leave at default (0) to disable pagination.",
+              "attribute": "page"
             },
             {
-              "name": "min",
+              "kind": "field",
+              "name": "pageSize",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The minimum selectable date as an ISO 8601 string.",
-              "fieldName": "min",
-              "attribute": "min"
-            },
+              "default": "0",
+              "description": "Number of rows per page. Set to 0 to disable pagination (show all rows).",
+              "attribute": "page-size"
+            }
+          ],
+          "events": [
             {
-              "name": "max",
+              "name": "hx-sort",
               "type": {
-                "text": "string"
+                "text": "CustomEvent<HxDataTableSortState>"
               },
-              "default": "''",
-              "description": "The maximum selectable date as an ISO 8601 string.",
-              "fieldName": "max",
-              "attribute": "max"
+              "description": "Dispatched when a sortable column header is clicked."
             },
             {
-              "name": "label",
+              "name": "hx-row-click",
               "type": {
-                "text": "string"
+                "text": "CustomEvent<{row: Record<string, unknown>, index: number}>"
               },
-              "default": "''",
-              "description": "The visible label text.",
-              "fieldName": "label",
-              "attribute": "label"
+              "description": "Dispatched when a data row is clicked."
             },
             {
-              "name": "required",
+              "name": "hx-select",
               "type": {
-                "text": "boolean"
+                "text": "CustomEvent<{selectedRows: Record<string, unknown>[]}>"
               },
-              "default": "false",
-              "description": "Whether the field is required for form submission.",
-              "fieldName": "required",
-              "attribute": "required"
-            },
+              "description": "Dispatched when row selection changes."
+            }
+          ],
+          "attributes": [
             {
-              "name": "disabled",
+              "name": "columns",
               "type": {
-                "text": "boolean"
+                "text": "HxDataTableColumn[]"
               },
-              "default": "false",
-              "description": "Whether the field is disabled.",
-              "fieldName": "disabled",
-              "attribute": "disabled"
+              "default": "[]",
+              "description": "Column definitions. Each item: `{ key, label, sortable?, width? }`.\nCan be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).",
+              "fieldName": "columns",
+              "attribute": "columns"
             },
             {
-              "name": "error",
+              "name": "rows",
               "type": {
-                "text": "string"
+                "text": "Record<string, unknown>[]"
               },
-              "default": "''",
-              "description": "Error message to display. When set, the field enters an error state.",
-              "fieldName": "error",
-              "attribute": "error"
+              "default": "[]",
+              "description": "Row data. Each item is a plain object keyed by column `key` values.\nCan be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).",
+              "fieldName": "rows",
+              "attribute": "rows"
             },
             {
-              "name": "help-text",
+              "name": "selectable",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Help text displayed below the field for guidance.",
-              "fieldName": "helpText",
-              "attribute": "help-text"
+              "default": "false",
+              "description": "When true, renders a checkbox column for row selection.",
+              "fieldName": "selectable",
+              "attribute": "selectable"
             },
             {
-              "name": "format",
+              "name": "sort-key",
               "type": {
                 "text": "string"
               },
-              "default": "'MM/DD/YYYY'",
-              "description": "Display format hint shown as placeholder (e.g. MM/DD/YYYY).",
-              "fieldName": "format",
-              "attribute": "format"
+              "default": "''",
+              "description": "The column key currently used for sorting.",
+              "fieldName": "sortKey",
+              "attribute": "sort-key"
             },
             {
-              "name": "locale",
+              "name": "sort-direction",
               "type": {
-                "text": "string"
+                "text": "'asc' | 'desc'"
               },
-              "default": "'en-US'",
-              "description": "Locale string used for formatting the display value.",
-              "fieldName": "locale",
-              "attribute": "locale"
+              "default": "'asc'",
+              "description": "Current sort direction.",
+              "fieldName": "sortDirection",
+              "attribute": "sort-direction"
             },
             {
-              "name": "required-message",
+              "name": "loading",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'This field is required.'",
-              "description": "Validation message shown when the field is required but empty.",
-              "fieldName": "requiredMessage",
-              "attribute": "required-message"
+              "default": "false",
+              "description": "When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.",
+              "fieldName": "loading",
+              "attribute": "loading"
             },
             {
-              "name": "choose-date-label",
+              "name": "empty-label",
               "type": {
                 "text": "string"
               },
-              "default": "'Choose a date'",
-              "description": "Accessible label for the calendar dialog.",
-              "fieldName": "chooseDateLabel",
-              "attribute": "choose-date-label"
+              "default": "'No data'",
+              "description": "Text displayed in the default empty state when `rows` is empty and not loading.",
+              "fieldName": "emptyLabel",
+              "attribute": "empty-label"
             },
             {
-              "name": "open-calendar-label",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "default": "'Open calendar'",
-              "description": "Accessible label for the calendar trigger button when the calendar is closed.",
-              "fieldName": "openCalendarLabel",
-              "attribute": "open-calendar-label"
+              "default": "''",
+              "description": "Accessible name for the table. Exposed via `aria-label` on the `<table>` element.\nRequired when the table has columns — a missing label is a WCAG 4.1.2 violation.",
+              "fieldName": "label",
+              "attribute": "label"
             },
             {
-              "name": "close-calendar-label",
+              "name": "select-all-label",
               "type": {
                 "text": "string"
               },
-              "default": "'Close calendar'",
-              "description": "Accessible label for the calendar trigger button when the calendar is open.",
-              "fieldName": "closeCalendarLabel",
-              "attribute": "close-calendar-label"
+              "default": "'Select all rows'",
+              "description": "Accessible label for the \"select all rows\" checkbox in the table header.",
+              "fieldName": "selectAllLabel",
+              "attribute": "select-all-label"
             },
             {
-              "name": "previous-month-label",
+              "name": "sticky-header",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'Previous month'",
-              "description": "Accessible label for the previous month navigation button.",
-              "fieldName": "previousMonthLabel",
-              "attribute": "previous-month-label"
+              "default": "false",
+              "description": "When true, the header row is sticky (position: sticky; top: 0).",
+              "fieldName": "stickyHeader",
+              "attribute": "sticky-header"
             },
             {
-              "name": "next-month-label",
+              "name": "page",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'Next month'",
-              "description": "Accessible label for the next month navigation button.",
-              "fieldName": "nextMonthLabel",
-              "attribute": "next-month-label"
+              "default": "1",
+              "description": "Current page (1-based). Set to 0 or leave at default (0) to disable pagination.",
+              "fieldName": "page",
+              "attribute": "page"
             },
             {
-              "name": "accessible-label",
+              "name": "page-size",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Accessible name for screen readers, if different from the visible label.\nUses `accessible-label` attribute instead of `aria-label` to avoid\nARIAMixin shadowing on the host element. Highest-precedence naming source.",
-              "fieldName": "accessibleLabel",
-              "attribute": "accessible-label"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormMixin",
-              "module": "/src/mixins/FormMixin.js"
+              "default": "0",
+              "description": "Number of rows per page. Set to 0 to disable pagination (show all rows).",
+              "fieldName": "pageSize",
+              "attribute": "page-size"
             }
           ],
           "superclass": {
             "name": "HelixElement",
             "module": "/src/base/index.js"
           },
-          "tagName": "hx-date-picker",
+          "tagName": "hx-data-table",
           "customElement": true,
-          "summary": "Form-associated date picker with calendar popup and WCAG 2.1 AA accessibility.",
+          "summary": "Enterprise data table with sorting, selection, and responsive scroll.",
           "helixMeta": {
-            "priorityTier": "P0"
+            "priorityTier": "P1"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "HelixDatePicker",
+          "name": "HelixDataTable",
           "declaration": {
-            "name": "HelixDatePicker",
-            "module": "src/components/hx-date-picker/hx-date-picker.ts"
+            "name": "HelixDataTable",
+            "module": "src/components/hx-data-table/hx-data-table.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "hx-date-picker",
+          "name": "hx-data-table",
           "declaration": {
-            "name": "HelixDatePicker",
-            "module": "src/components/hx-date-picker/hx-date-picker.ts"
+            "name": "HelixDataTable",
+            "module": "src/components/hx-data-table/hx-data-table.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/hx-date-picker/index.ts",
+      "path": "src/components/hx-data-table/index.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "HelixDatePicker",
+          "name": "HelixDataTable",
           "declaration": {
-            "name": "HelixDatePicker",
-            "module": "./hx-date-picker.js"
+            "name": "HelixDataTable",
+            "module": "./hx-data-table.js"
           }
         },
         {
           "kind": "js",
-          "name": "HxDatePickerChangeDetail",
+          "name": "HxDataTableColumn",
           "declaration": {
-            "name": "HxDatePickerChangeDetail",
-            "module": "./hx-date-picker.js"
+            "name": "HxDataTableColumn",
+            "module": "./hx-data-table.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HxDataTableSortState",
+          "declaration": {
+            "name": "HxDataTableSortState",
+            "module": "./hx-data-table.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HxDataTableSelectDetail",
+          "declaration": {
+            "name": "HxDataTableSelectDetail",
+            "module": "./hx-data-table.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HxDataTableRowClickDetail",
+          "declaration": {
+            "name": "HxDataTableRowClickDetail",
+            "module": "./hx-data-table.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/hx-data-table/hx-data-table.ts",
+      "path": "src/components/hx-date-picker/hx-date-picker.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "An enterprise data table with sorting, row selection, and keyboard navigation.",
-          "name": "HelixDataTable",
+          "description": "Date picker component for selecting dates with keyboard-accessible calendar popup.",
+          "name": "HelixDatePicker",
           "cssProperties": [
             {
-              "description": "Header background color.",
-              "name": "--hx-data-table-header-bg",
-              "default": "var(--hx-color-neutral-50)"
-            },
-            {
-              "description": "Header text color.",
-              "name": "--hx-data-table-header-color",
-              "default": "var(--hx-color-neutral-700)"
+              "description": "Input background color.",
+              "name": "--hx-date-picker-bg",
+              "default": "var(--hx-color-neutral-0)"
             },
             {
-              "description": "Cell text color.",
-              "name": "--hx-data-table-cell-color",
-              "default": "var(--hx-color-neutral-900)"
+              "description": "Input text color.",
+              "name": "--hx-date-picker-color",
+              "default": "var(--hx-color-neutral-800)"
             },
             {
-              "description": "Row border color.",
-              "name": "--hx-data-table-border-color",
-              "default": "var(--hx-color-neutral-200)"
+              "description": "Border color.",
+              "name": "--hx-date-picker-border-color",
+              "default": "var(--hx-color-neutral-300)"
             },
             {
-              "description": "Row hover background.",
-              "name": "--hx-data-table-row-hover-bg",
-              "default": "var(--hx-color-neutral-50)"
+              "description": "Border radius.",
+              "name": "--hx-date-picker-border-radius",
+              "default": "var(--hx-border-radius-md)"
             },
             {
-              "description": "Selected row background.",
-              "name": "--hx-data-table-row-selected-bg",
-              "default": "var(--hx-color-primary-50)"
+              "description": "Font family.",
+              "name": "--hx-date-picker-font-family",
+              "default": "var(--hx-font-family-sans)"
             },
             {
-              "description": "Empty state text color.",
-              "name": "--hx-data-table-empty-color",
-              "default": "var(--hx-color-neutral-600)"
+              "description": "Focus ring color.",
+              "name": "--hx-date-picker-focus-ring-color",
+              "default": "var(--hx-focus-ring-color)"
             },
             {
-              "description": "Minimum table width before horizontal scrolling.",
-              "name": "--hx-data-table-min-width",
-              "default": "600px"
+              "description": "Error state color.",
+              "name": "--hx-date-picker-error-color",
+              "default": "var(--hx-color-error-500)"
             },
             {
-              "description": "CSS custom property.",
-              "name": "--hx-data-table-font-family",
-              "default": "var(--hx-font-family-sans)"
+              "description": "Label text color.",
+              "name": "--hx-date-picker-label-color",
+              "default": "var(--hx-color-neutral-700)"
             },
             {
-              "description": "CSS custom property.",
-              "name": "--hx-data-table-shimmer-duration",
-              "default": "1.5s"
+              "description": "Trigger icon color.",
+              "name": "--hx-date-picker-trigger-color",
+              "default": "var(--hx-color-neutral-500)"
             },
             {
-              "description": "Font family.",
-              "name": "--hx-font-family-sans"
+              "description": "Calendar background color.",
+              "name": "--hx-date-picker-calendar-bg",
+              "default": "var(--hx-color-neutral-0)"
             },
             {
-              "description": "Font size.",
-              "name": "--hx-font-size-sm"
+              "description": "Calendar border color.",
+              "name": "--hx-date-picker-calendar-border-color",
+              "default": "var(--hx-color-neutral-200)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-3"
+              "description": "Calendar minimum width.",
+              "name": "--hx-date-picker-calendar-min-width",
+              "default": "18rem"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-4"
+              "description": "Selected day background.",
+              "name": "--hx-date-picker-selected-bg",
+              "default": "var(--hx-color-primary-500)"
             },
             {
-              "description": "Width.",
-              "name": "--hx-border-width-thin"
+              "description": "Selected day text color.",
+              "name": "--hx-date-picker-selected-color",
+              "default": "var(--hx-color-neutral-0)"
             },
             {
-              "description": "Font weight.",
-              "name": "--hx-font-weight-semibold"
+              "description": "Today indicator color.",
+              "name": "--hx-date-picker-today-color",
+              "default": "var(--hx-color-primary-600)"
             },
             {
-              "description": "Minimum touch target size.",
-              "name": "--hx-touch-target-min"
+              "description": "Calendar popup box shadow.",
+              "name": "--hx-date-picker-calendar-shadow",
+              "default": "0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-2"
+              "description": "Border radius.",
+              "name": "--hx-date-picker-calendar-border-radius",
+              "default": "var(--hx-border-radius-lg)"
             },
             {
-              "description": "Spacing token.",
-              "name": "--hx-space-1"
+              "description": "Background color.",
+              "name": "--hx-date-picker-selected-hover-bg",
+              "default": "var(--hx-color-primary-600)"
             },
             {
-              "description": "Width.",
-              "name": "--hx-focus-ring-width"
+              "description": "Color.",
+              "name": "--hx-date-picker-trigger-hover-color",
+              "default": "var(--hx-color-neutral-700)"
             },
             {
-              "description": "Color.",
-              "name": "--hx-focus-ring-color"
+              "description": "CSS custom property.",
+              "name": "--hx-border-radius-lg"
             },
             {
               "description": "CSS custom property.",
-              "name": "--hx-focus-ring-offset"
+              "name": "--hx-border-radius-md"
             },
             {
               "description": "CSS custom property.",
               "name": "--hx-border-radius-sm"
             },
             {
-              "description": "Opacity.",
-              "name": "--hx-opacity-25"
+              "description": "Width.",
+              "name": "--hx-border-width-thin"
             },
             {
-              "description": "Transition timing.",
-              "name": "--hx-transition-fast"
+              "description": "Color.",
+              "name": "--hx-color-error-500"
             },
             {
-              "description": "Opacity.",
-              "name": "--hx-opacity-100"
+              "description": "Color.",
+              "name": "--hx-color-error-text"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-primary-500"
+              "name": "--hx-color-neutral-0"
             },
             {
-              "description": "Size token.",
-              "name": "--hx-size-4"
+              "description": "Color.",
+              "name": "--hx-color-neutral-100"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-neutral-50"
+              "name": "--hx-color-neutral-200"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-neutral-200"
+              "name": "--hx-color-neutral-300"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-neutral-100"
+              "name": "--hx-color-neutral-400"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-neutral-500"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-neutral-600"
             },
             {
               "description": "Color.",
               "name": "--hx-color-neutral-700"
             },
+            {
+              "description": "Color.",
+              "name": "--hx-color-neutral-800"
+            },
             {
               "description": "Color.",
               "name": "--hx-color-neutral-900"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-neutral-600"
+              "name": "--hx-color-primary-400"
             },
             {
               "description": "Color.",
-              "name": "--hx-color-primary-50"
+              "name": "--hx-color-primary-500"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-color-primary-600"
+            },
+            {
+              "description": "Color.",
+              "name": "--hx-focus-ring-color"
+            },
+            {
+              "description": "CSS custom property.",
+              "name": "--hx-focus-ring-opacity"
+            },
+            {
+              "description": "Width.",
+              "name": "--hx-focus-ring-width"
+            },
+            {
+              "description": "Font family.",
+              "name": "--hx-font-family-sans"
+            },
+            {
+              "description": "Font size.",
+              "name": "--hx-font-size-lg"
+            },
+            {
+              "description": "Font size.",
+              "name": "--hx-font-size-md"
+            },
+            {
+              "description": "Font size.",
+              "name": "--hx-font-size-sm"
+            },
+            {
+              "description": "Font size.",
+              "name": "--hx-font-size-xs"
+            },
+            {
+              "description": "Font weight.",
+              "name": "--hx-font-weight-bold"
+            },
+            {
+              "description": "Font weight.",
+              "name": "--hx-font-weight-medium"
+            },
+            {
+              "description": "Font weight.",
+              "name": "--hx-font-weight-semibold"
+            },
+            {
+              "description": "Line height.",
+              "name": "--hx-line-height-normal"
             },
             {
               "description": "Opacity.",
-              "name": "--hx-opacity-50"
+              "name": "--hx-opacity-disabled"
+            },
+            {
+              "description": "Box shadow.",
+              "name": "--hx-shadow-md"
+            },
+            {
+              "description": "Size token.",
+              "name": "--hx-size-10"
+            },
+            {
+              "description": "Size token.",
+              "name": "--hx-size-8"
             },
             {
               "description": "Spacing token.",
-              "name": "--hx-space-8"
+              "name": "--hx-space-1"
+            },
+            {
+              "description": "Spacing token.",
+              "name": "--hx-space-2"
+            },
+            {
+              "description": "Spacing token.",
+              "name": "--hx-space-3"
+            },
+            {
+              "description": "Minimum touch target size.",
+              "name": "--hx-touch-target-min"
+            },
+            {
+              "description": "Transition timing.",
+              "name": "--hx-transition-fast"
+            },
+            {
+              "description": "Z-index layer.",
+              "name": "--hx-z-index-dropdown"
             }
           ],
           "cssParts": [
             {
-              "description": "The `<table>` element.",
-              "name": "table"
+              "description": "The outer field container.",
+              "name": "field"
             },
             {
-              "description": "The `<thead>` element.",
-              "name": "thead"
+              "description": "The label element.",
+              "name": "label"
             },
             {
-              "description": "The `<tbody>` element.",
-              "name": "tbody"
+              "description": "The wrapper around input and trigger.",
+              "name": "input-wrapper"
+            },
+            {
+              "description": "The readonly text input displaying the formatted date.",
+              "name": "input"
+            },
+            {
+              "description": "The calendar icon button.",
+              "name": "trigger"
             },
             {
-              "description": "Each `<tr>` element.",
-              "name": "tr"
+              "description": "The calendar popup dialog.",
+              "name": "calendar"
             },
             {
-              "description": "Each `<th>` element.",
-              "name": "th"
+              "description": "The month navigation header.",
+              "name": "month-nav"
             },
             {
-              "description": "Each `<td>` element.",
-              "name": "td"
+              "description": "An individual day button in the calendar grid.",
+              "name": "day"
             },
             {
-              "description": "The sort indicator icon `<span>` inside sortable headers.",
-              "name": "sort-icon"
+              "description": "The help text container.",
+              "name": "help-text"
             },
             {
-              "description": "Each `<input type=\"checkbox\">` element.",
-              "name": "checkbox"
+              "description": "The error message container.",
+              "name": "error"
             }
           ],
           "slots": [
             {
-              "description": "Content rendered above the table (e.g., search, actions).",
-              "name": "toolbar"
+              "description": "Custom label content (overrides the label property).",
+              "name": "label"
             },
             {
-              "description": "Custom empty-state content rendered when `rows` is empty and not loading.",
-              "name": "empty"
+              "description": "Custom help text content (overrides the helpText property).",
+              "name": "help-text"
             },
             {
-              "description": "Custom loading content rendered when `loading` is true.",
-              "name": "loading"
+              "description": "Custom error content (overrides the error property).",
+              "name": "error"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "columns",
+              "name": "name",
               "type": {
-                "text": "HxDataTableColumn[]"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Column definitions. Each item: `{ key, label, sortable?, width? }`.\nCan be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).",
-              "attribute": "columns"
+              "default": "''",
+              "description": "The name of the field, used for form submission.",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "rows",
+              "name": "value",
               "type": {
-                "text": "Record<string, unknown>[]"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Row data. Each item is a plain object keyed by column `key` values.\nCan be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).",
-              "attribute": "rows"
+              "default": "''",
+              "description": "The current value as an ISO 8601 date string (e.g. 2026-03-04).",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "selectable",
+              "name": "min",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When true, renders a checkbox column for row selection.",
-              "attribute": "selectable",
-              "reflects": true
+              "default": "''",
+              "description": "The minimum selectable date as an ISO 8601 string.",
+              "attribute": "min"
             },
             {
               "kind": "field",
-              "name": "sortKey",
+              "name": "max",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The column key currently used for sorting.",
-              "attribute": "sort-key"
+              "description": "The maximum selectable date as an ISO 8601 string.",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "sortDirection",
+              "name": "label",
               "type": {
-                "text": "'asc' | 'desc'"
+                "text": "string"
               },
-              "default": "'asc'",
-              "description": "Current sort direction.",
-              "attribute": "sort-direction"
+              "default": "''",
+              "description": "The visible label text.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.",
-              "attribute": "loading",
+              "description": "Whether the field is required for form submission.",
+              "attribute": "required",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "emptyLabel",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is disabled.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "error",
               "type": {
                 "text": "string"
               },
-              "default": "'No data'",
-              "description": "Text displayed in the default empty state when `rows` is empty and not loading.",
-              "attribute": "empty-label"
+              "default": "''",
+              "description": "Error message to display. When set, the field enters an error state.",
+              "attribute": "error"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "helpText",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible name for the table. Exposed via `aria-label` on the `<table>` element.\nRequired when the table has columns — a missing label is a WCAG 4.1.2 violation.",
-              "attribute": "label"
+              "description": "Help text displayed below the field for guidance.",
+              "attribute": "help-text"
             },
             {
               "kind": "field",
-              "name": "selectAllLabel",
+              "name": "format",
               "type": {
                 "text": "string"
               },
-              "default": "'Select all rows'",
-              "description": "Accessible label for the \"select all rows\" checkbox in the table header.",
-              "attribute": "select-all-label"
+              "default": "'MM/DD/YYYY'",
+              "description": "Display format hint shown as placeholder (e.g. MM/DD/YYYY).",
+              "attribute": "format"
             },
             {
               "kind": "field",
-              "name": "stickyHeader",
+              "name": "locale",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When true, the header row is sticky (position: sticky; top: 0).",
-              "attribute": "sticky-header",
-              "reflects": true
+              "default": "'en-US'",
+              "description": "Locale string used for formatting the display value.",
+              "attribute": "locale"
             },
             {
               "kind": "field",
-              "name": "page",
+              "name": "requiredMessage",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Current page (1-based). Set to 0 or leave at default (0) to disable pagination.",
-              "attribute": "page"
+              "default": "'This field is required.'",
+              "description": "Validation message shown when the field is required but empty.",
+              "attribute": "required-message"
+            },
+            {
+              "kind": "field",
+              "name": "chooseDateLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Choose a date'",
+              "description": "Accessible label for the calendar dialog.",
+              "attribute": "choose-date-label"
+            },
+            {
+              "kind": "field",
+              "name": "openCalendarLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Open calendar'",
+              "description": "Accessible label for the calendar trigger button when the calendar is closed.",
+              "attribute": "open-calendar-label"
+            },
+            {
+              "kind": "field",
+              "name": "closeCalendarLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close calendar'",
+              "description": "Accessible label for the calendar trigger button when the calendar is open.",
+              "attribute": "close-calendar-label"
+            },
+            {
+              "kind": "field",
+              "name": "previousMonthLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Previous month'",
+              "description": "Accessible label for the previous month navigation button.",
+              "attribute": "previous-month-label"
+            },
+            {
+              "kind": "field",
+              "name": "nextMonthLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Next month'",
+              "description": "Accessible label for the next month navigation button.",
+              "attribute": "next-month-label"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Accessible name for screen readers, if different from the visible label.\nUses `accessible-label` attribute instead of `aria-label` to avoid\nARIAMixin shadowing on the host element. Highest-precedence naming source.",
+              "attribute": "accessible-label"
+            },
+            {
+              "kind": "field",
+              "name": "_handleDocumentClick",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "hx-change",
+              "type": {
+                "text": "CustomEvent<{value: string, date: Date | null}>"
+              },
+              "description": "Emitted when the selected date changes."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the field, used for form submission.",
+              "fieldName": "name",
+              "attribute": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value as an ISO 8601 date string (e.g. 2026-03-04).",
+              "fieldName": "value",
+              "attribute": "value"
             },
             {
-              "kind": "field",
-              "name": "pageSize",
+              "name": "min",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "Number of rows per page. Set to 0 to disable pagination (show all rows).",
-              "attribute": "page-size"
-            }
-          ],
-          "events": [
+              "default": "''",
+              "description": "The minimum selectable date as an ISO 8601 string.",
+              "fieldName": "min",
+              "attribute": "min"
+            },
             {
-              "name": "hx-sort",
+              "name": "max",
               "type": {
-                "text": "CustomEvent<HxDataTableSortState>"
+                "text": "string"
               },
-              "description": "Dispatched when a sortable column header is clicked."
+              "default": "''",
+              "description": "The maximum selectable date as an ISO 8601 string.",
+              "fieldName": "max",
+              "attribute": "max"
             },
             {
-              "name": "hx-row-click",
+              "name": "label",
               "type": {
-                "text": "CustomEvent<{row: Record<string, unknown>, index: number}>"
+                "text": "string"
               },
-              "description": "Dispatched when a data row is clicked."
+              "default": "''",
+              "description": "The visible label text.",
+              "fieldName": "label",
+              "attribute": "label"
             },
             {
-              "name": "hx-select",
+              "name": "required",
               "type": {
-                "text": "CustomEvent<{selectedRows: Record<string, unknown>[]}>"
+                "text": "boolean"
               },
-              "description": "Dispatched when row selection changes."
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Whether the field is required for form submission.",
+              "fieldName": "required",
+              "attribute": "required"
+            },
             {
-              "name": "columns",
+              "name": "disabled",
               "type": {
-                "text": "HxDataTableColumn[]"
+                "text": "boolean"
               },
-              "default": "[]",
-              "description": "Column definitions. Each item: `{ key, label, sortable?, width? }`.\nCan be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).",
-              "fieldName": "columns",
-              "attribute": "columns"
+              "default": "false",
+              "description": "Whether the field is disabled.",
+              "fieldName": "disabled",
+              "attribute": "disabled"
             },
             {
-              "name": "rows",
+              "name": "error",
               "type": {
-                "text": "Record<string, unknown>[]"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Row data. Each item is a plain object keyed by column `key` values.\nCan be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).",
-              "fieldName": "rows",
-              "attribute": "rows"
+              "default": "''",
+              "description": "Error message to display. When set, the field enters an error state.",
+              "fieldName": "error",
+              "attribute": "error"
             },
             {
-              "name": "selectable",
+              "name": "help-text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When true, renders a checkbox column for row selection.",
-              "fieldName": "selectable",
-              "attribute": "selectable"
+              "default": "''",
+              "description": "Help text displayed below the field for guidance.",
+              "fieldName": "helpText",
+              "attribute": "help-text"
             },
             {
-              "name": "sort-key",
+              "name": "format",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The column key currently used for sorting.",
-              "fieldName": "sortKey",
-              "attribute": "sort-key"
+              "default": "'MM/DD/YYYY'",
+              "description": "Display format hint shown as placeholder (e.g. MM/DD/YYYY).",
+              "fieldName": "format",
+              "attribute": "format"
             },
             {
-              "name": "sort-direction",
+              "name": "locale",
               "type": {
-                "text": "'asc' | 'desc'"
+                "text": "string"
               },
-              "default": "'asc'",
-              "description": "Current sort direction.",
-              "fieldName": "sortDirection",
-              "attribute": "sort-direction"
+              "default": "'en-US'",
+              "description": "Locale string used for formatting the display value.",
+              "fieldName": "locale",
+              "attribute": "locale"
             },
             {
-              "name": "loading",
+              "name": "required-message",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.",
-              "fieldName": "loading",
-              "attribute": "loading"
+              "default": "'This field is required.'",
+              "description": "Validation message shown when the field is required but empty.",
+              "fieldName": "requiredMessage",
+              "attribute": "required-message"
             },
             {
-              "name": "empty-label",
+              "name": "choose-date-label",
               "type": {
                 "text": "string"
               },
-              "default": "'No data'",
-              "description": "Text displayed in the default empty state when `rows` is empty and not loading.",
-              "fieldName": "emptyLabel",
-              "attribute": "empty-label"
+              "default": "'Choose a date'",
+              "description": "Accessible label for the calendar dialog.",
+              "fieldName": "chooseDateLabel",
+              "attribute": "choose-date-label"
             },
             {
-              "name": "label",
+              "name": "open-calendar-label",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Accessible name for the table. Exposed via `aria-label` on the `<table>` element.\nRequired when the table has columns — a missing label is a WCAG 4.1.2 violation.",
-              "fieldName": "label",
-              "attribute": "label"
+              "default": "'Open calendar'",
+              "description": "Accessible label for the calendar trigger button when the calendar is closed.",
+              "fieldName": "openCalendarLabel",
+              "attribute": "open-calendar-label"
             },
             {
-              "name": "select-all-label",
+              "name": "close-calendar-label",
               "type": {
                 "text": "string"
               },
-              "default": "'Select all rows'",
-              "description": "Accessible label for the \"select all rows\" checkbox in the table header.",
-              "fieldName": "selectAllLabel",
-              "attribute": "select-all-label"
+              "default": "'Close calendar'",
+              "description": "Accessible label for the calendar trigger button when the calendar is open.",
+              "fieldName": "closeCalendarLabel",
+              "attribute": "close-calendar-label"
             },
             {
-              "name": "sticky-header",
+              "name": "previous-month-label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When true, the header row is sticky (position: sticky; top: 0).",
-              "fieldName": "stickyHeader",
-              "attribute": "sticky-header"
+              "default": "'Previous month'",
+              "description": "Accessible label for the previous month navigation button.",
+              "fieldName": "previousMonthLabel",
+              "attribute": "previous-month-label"
             },
             {
-              "name": "page",
+              "name": "next-month-label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Current page (1-based). Set to 0 or leave at default (0) to disable pagination.",
-              "fieldName": "page",
-              "attribute": "page"
+              "default": "'Next month'",
+              "description": "Accessible label for the next month navigation button.",
+              "fieldName": "nextMonthLabel",
+              "attribute": "next-month-label"
             },
             {
-              "name": "page-size",
+              "name": "accessible-label",
               "type": {
-                "text": "number"
+                "text": "string | null"
               },
-              "default": "0",
-              "description": "Number of rows per page. Set to 0 to disable pagination (show all rows).",
-              "fieldName": "pageSize",
-              "attribute": "page-size"
+              "default": "null",
+              "description": "Accessible name for screen readers, if different from the visible label.\nUses `accessible-label` attribute instead of `aria-label` to avoid\nARIAMixin shadowing on the host element. Highest-precedence naming source.",
+              "fieldName": "accessibleLabel",
+              "attribute": "accessible-label"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormMixin",
+              "module": "/src/mixins/FormMixin.js"
             }
           ],
           "superclass": {
             "name": "HelixElement",
             "module": "/src/base/index.js"
           },
-          "tagName": "hx-data-table",
+          "tagName": "hx-date-picker",
           "customElement": true,
-          "summary": "Enterprise data table with sorting, selection, and responsive scroll.",
+          "summary": "Form-associated date picker with calendar popup and WCAG 2.1 AA accessibility.",
           "helixMeta": {
-            "priorityTier": "P1"
+            "priorityTier": "P0"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "HelixDataTable",
+          "name": "HelixDatePicker",
           "declaration": {
-            "name": "HelixDataTable",
-            "module": "src/components/hx-data-table/hx-data-table.ts"
+            "name": "HelixDatePicker",
+            "module": "src/components/hx-date-picker/hx-date-picker.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "hx-data-table",
+          "name": "hx-date-picker",
           "declaration": {
-            "name": "HelixDataTable",
-            "module": "src/components/hx-data-table/hx-data-table.ts"
+            "name": "HelixDatePicker",
+            "module": "src/components/hx-date-picker/hx-date-picker.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/hx-data-table/index.ts",
+      "path": "src/components/hx-date-picker/index.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "HelixDataTable",
-          "declaration": {
-            "name": "HelixDataTable",
-            "module": "./hx-data-table.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "HxDataTableColumn",
-          "declaration": {
-            "name": "HxDataTableColumn",
-            "module": "./hx-data-table.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "HxDataTableSortState",
-          "declaration": {
-            "name": "HxDataTableSortState",
-            "module": "./hx-data-table.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "HxDataTableSelectDetail",
+          "name": "HelixDatePicker",
           "declaration": {
-            "name": "HxDataTableSelectDetail",
-            "module": "./hx-data-table.js"
+            "name": "HelixDatePicker",
+            "module": "./hx-date-picker.js"
           }
         },
         {
           "kind": "js",
-          "name": "HxDataTableRowClickDetail",
+          "name": "HxDatePickerChangeDetail",
           "declaration": {
-            "name": "HxDataTableRowClickDetail",
-            "module": "./hx-data-table.js"
+            "name": "HxDatePickerChangeDetail",
+            "module": "./hx-date-picker.js"
           }
         }
       ]
@@ -10985,8 +11108,49 @@
           "tagName": "hx-dialog",
           "customElement": true,
           "summary": "Accessible dialog overlay for confirmations, forms, and detailed content.",
+          "aaaCertified": true,
+          "aaaCertifiedDate": "2026-05-08",
           "helixMeta": {
-            "priorityTier": "P0"
+            "keyboardContract": {
+              "dismiss": [
+                "Escape"
+              ],
+              "trapFocus": "true"
+            },
+            "ariaPattern": "dialog",
+            "ariaPatternSource": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/",
+            "forcedColorsSupported": true,
+            "stability": "stable",
+            "since": "3.6.0",
+            "formAssociated": false,
+            "themeAware": true,
+            "brandAware": true,
+            "drupalSdcEligible": true,
+            "reactWrapperStatus": "complete",
+            "priorityTier": "P0",
+            "phiHandles": false,
+            "clinicalContext": "none",
+            "aaa": {
+              "certified": true,
+              "certifiedDate": "2026-05-08",
+              "criteria": [
+                "1.4.6",
+                "1.4.9",
+                "2.1.3",
+                "2.3.3",
+                "2.4.12",
+                "2.4.13",
+                "2.5.5",
+                "3.2.5",
+                "3.3.6",
+                "forced-colors",
+                "apg-keyboard"
+              ],
+              "auditUrl": "src/components/hx-dialog/AAA-AUDIT.md"
+            },
+            "figma": {
+              "componentName": "hx-dialog"
+            }
           }
         }
       ],
@@ -30719,8 +30883,49 @@
           "tagName": "hx-text-input",
           "customElement": true,
           "summary": "Form-associated text input with built-in label, error, and help text.",
+          "aaaCertified": true,
+          "aaaCertifiedDate": "2026-05-08",
           "helixMeta": {
-            "priorityTier": "P0"
+            "keyboardContract": {
+              "activate": [
+                "character-input"
+              ],
+              "disabledSuppresses": true
+            },
+            "ariaPattern": "textbox",
+            "ariaPatternSource": "https://www.w3.org/TR/wai-aria-1.2/#textbox",
+            "forcedColorsSupported": true,
+            "stability": "stable",
+            "since": "3.6.0",
+            "formAssociated": true,
+            "themeAware": true,
+            "brandAware": true,
+            "drupalSdcEligible": true,
+            "reactWrapperStatus": "complete",
+            "priorityTier": "P0",
+            "phiHandles": false,
+            "clinicalContext": "none",
+            "aaa": {
+              "certified": true,
+              "certifiedDate": "2026-05-08",
+              "criteria": [
+                "1.4.6",
+                "1.4.9",
+                "2.1.3",
+                "2.3.3",
+                "2.4.12",
+                "2.4.13",
+                "2.5.5",
+                "3.2.5",
+                "3.3.6",
+                "forced-colors",
+                "apg-keyboard"
+              ],
+              "auditUrl": "src/components/hx-text-input/AAA-AUDIT.md"
+            },
+            "figma": {
+              "componentName": "hx-text-input"
+            }
           }
         }
       ],