@latty-ds/web 0.10.4 → 1.0.0

package/custom-elements.json

@@ -9,7 +9,7 @@
         {
           "kind": "variable",
           "name": "accordionStyles",
-          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } details { border-radius: var(--lt-border-radius); transition: background-color 120ms ease, border-color 120ms ease; } summary { cursor: pointer; list-style: none; user-select: none; border-radius: var(--lt-border-radius); overflow: hidden; } summary::-webkit-details-marker { display: none; } .summary-content { align-items: center; display: flex; gap: var(--lt-spacing-3); justify-content: space-between; padding: var(--lt-accordion-summary-padding, var(--lt-spacing-4)); } .start-icon { color: var(--lt-text-subtle); flex-shrink: 0; font-size: 1.25rem; } .summary-text { color: var(--lt-accordion-header-color, var(--lt-text-default)); flex: 1; } .summary-text::part(base) { font-size: var(--lt-accordion-header-font-size, 1rem); font-weight: var(--lt-accordion-header-font-weight, 600); } .chevron { color: var(--lt-text-subtle); flex-shrink: 0; height: 20px; transition: transform 200ms ease; width: 20px; } details[open] .chevron { transform: rotate(180deg); } summary:hover .chevron { color: var(--lt-text-default); } summary:focus-visible { outline: 2px solid var(--lt-border-focus); outline-offset: 2px; border-radius: var(--lt-border-radius); } .content { height: 0; overflow: hidden; transition: height 200ms ease; } .content-inner { color: var(--lt-text-subtle); font-size: 0.9375rem; line-height: 1.6; padding: var(--lt-accordion-content-padding, 0 var(--lt-spacing-4) var(--lt-spacing-4)); } /* Variant: default */ :host([appearance='default']) details { background: var(--lt-bg-subtle); border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='default']) details:hover { border-color: var(--lt-border-strong); } /* Variant: filled */ :host([appearance='filled']) details { background: var(--lt-bg-surface); border: none; } :host([appearance='filled']) details:hover { background: var(--lt-bg-overlay); } /* Variant: outlined */ :host([appearance='outlined']) details { background: transparent; border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='outlined']) details:hover { border-color: var(--lt-border-strong); } /* Variant: clean */ :host([appearance='clean']) details { background: transparent; border: none; } /* Disabled state */ :host([disabled]) details { opacity: 0.6; pointer-events: none; } :host([uppercase]) .summary-text::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
+          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } details { border-radius: var(--lt-border-radius); transition: background-color 120ms ease, border-color 120ms ease; } summary { cursor: pointer; list-style: none; user-select: none; border-radius: var(--lt-border-radius); overflow: hidden; } summary::-webkit-details-marker { display: none; } .summary-content { align-items: center; display: flex; gap: var(--lt-spacing-3); justify-content: space-between; padding: var(--lt-accordion-summary-padding, var(--lt-spacing-4)); } .start-icon { color: var(--lt-text-subtle); flex-shrink: 0; font-size: 1.25rem; } .summary-text { color: var(--lt-accordion-header-color, var(--lt-text-default)); flex: 1; } .summary-text::part(base) { font-size: var(--lt-accordion-header-font-size, 1rem); font-weight: var(--lt-accordion-header-font-weight, 600); } .chevron { color: var(--lt-text-subtle); flex-shrink: 0; height: 20px; transition: transform 200ms ease; width: 20px; } details[open] .chevron { transform: rotate(180deg); } summary:hover .chevron { color: var(--lt-text-default); } summary:focus-visible { outline: 2px solid var(--lt-border-focus); outline-offset: 2px; border-radius: var(--lt-border-radius); } .content { height: 0; overflow: hidden; transition: height 200ms ease; } .content-inner { color: var(--lt-text-subtle); font-size: 0.9375rem; line-height: 1.6; padding: var(--lt-accordion-content-padding, 0 var(--lt-spacing-4) var(--lt-spacing-4)); } /* Variant: default */ :host([appearance='default']) details { background: var(--lt-bg-subtle); border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='default']) details:hover { border-color: var(--lt-border-strong); } /* Variant: filled */ :host([appearance='filled']) details { background: var(--lt-bg-surface); border: none; } :host([appearance='filled']) details:hover { background: var(--lt-bg-overlay); } /* Variant: outlined */ :host([appearance='outlined']) details { background: transparent; border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='outlined']) details:hover { border-color: var(--lt-border-strong); } /* Variant: clean */ :host([appearance='clean']) details { background: transparent; border: none; } /* Disabled state */ :host([disabled]) details { opacity: 0.6; pointer-events: none; } :host([uppercase]) .summary-text::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { details, .chevron { transition: none; } /* .content's height transition can't just be removed — accordion.ts's handleTransitionEnd() clears _animating and finalizes styles only when the CSS transition actually completes; transition:none fires no transitionend at all, leaving _animating stuck true after the very first toggle and silently breaking every subsequent open/close. A 1ms duration is imperceptible (satisfies the reduced-motion intent) but still fires the event the component's own state machine depends on. */ .content { transition: height 1ms; } } `"
         }
       ],
       "exports": [
@@ -166,6 +166,14 @@
               "kind": "method",
               "name": "handleTransitionEnd",
               "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "TransitionEvent"
+                  }
+                }
+              ],
               "description": "Handles the end of the transition to clear inline styles."
             },
             {
@@ -231,7 +239,7 @@
         {
           "kind": "variable",
           "name": "alertStyles",
-          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 200ms ease; /* Default variant tokens — public props override first, then variant defaults */ --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-neutral-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-inverse)); --_border: var(--lt-alert-border-color, var(--lt-border-strong)); --_color: var(--lt-alert-color, var(--lt-text-default)); --_color-solid: var(--lt-alert-color, var(--lt-text-inverse)); } :host([dismissed]) { opacity: 0; transform: translateY(-4px); } /* ── Per-variant tokens ──────────────────────────────────── */ :host([variant='success']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-success-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-success)); --_border: var(--lt-alert-border-color, var(--lt-border-success-strong)); --_color: var(--lt-alert-color, var(--lt-text-success)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-success)); } :host([variant='warning']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-warning-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-warning)); --_border: var(--lt-alert-border-color, var(--lt-border-warning-strong)); --_color: var(--lt-alert-color, var(--lt-text-warning)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-warning)); } :host([variant='error']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-error-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-error)); --_border: var(--lt-alert-border-color, var(--lt-border-error-strong)); --_color: var(--lt-alert-color, var(--lt-text-error)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-error)); } :host([variant='info']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-info-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-info)); --_border: var(--lt-alert-border-color, var(--lt-border-info-strong)); --_color: var(--lt-alert-color, var(--lt-text-info)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-info)); } /* ── Layout ──────────────────────────────────────────────── */ .inner { align-items: flex-start; border-radius: var(--lt-border-radius); display: flex; gap: var(--lt-spacing-3); padding: var(--lt-spacing-3) var(--lt-spacing-4); } /* ── Appearances ─────────────────────────────────────────── */ /* filled (default) — subtle tinted bg + full border */ :host([appearance='filled']) .inner, :host(:not([appearance])) .inner { background: var(--_bg-subtle); border: var(--lt-border-width, 1px) solid var(--_border); color: var(--_color); } /* outlined — white bg + colored border */ :host([appearance='outlined']) .inner { background: var(--lt-bg-default); border: var(--lt-border-width, 1px) solid var(--_border); color: var(--_color); } /* solid — solid color bg, no border */ :host([appearance='solid']) .inner { background: var(--_bg-solid); border: none; color: var(--_color-solid); } /* ── Icon ────────────────────────────────────────────────── */ .icon { flex-shrink: 0; font-size: 1.125rem; margin-top: 1px; } /* ── Body ────────────────────────────────────────────────── */ .body { flex: 1; min-width: 0; } .title { margin: 0 0 var(--lt-spacing-1); } .content { font-size: 0.875rem; line-height: 1.5; } .title + .content { opacity: 0.8; } /* ── Close button ────────────────────────────────────────── */ .close { flex-shrink: 0; margin-top: 1px; opacity: 0.7; } .close:hover { opacity: 1; } :host([uppercase]) .title::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
+          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 200ms ease; /* Default variant tokens — public props override first, then variant defaults */ --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-neutral-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-inverse)); --_border: var(--lt-alert-border-color, var(--lt-border-strong)); --_color: var(--lt-alert-color, var(--lt-text-default)); --_color-solid: var(--lt-alert-color, var(--lt-text-inverse)); } :host([dismissed]) { opacity: 0; transform: translateY(-4px); } /* Hidden once the fade above finishes. Not removed from the DOM — see the open property's doc comment. */ :host(:not([open])) { display: none; } /* ── Per-variant tokens ──────────────────────────────────── */ :host([variant='success']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-success-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-interactive-success-bg)); --_border: var(--lt-alert-border-color, var(--lt-border-success-strong)); --_color: var(--lt-alert-color, var(--lt-text-success)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-success)); } :host([variant='warning']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-warning-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-interactive-warning-bg)); --_border: var(--lt-alert-border-color, var(--lt-border-warning-strong)); --_color: var(--lt-alert-color, var(--lt-text-warning)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-warning)); } :host([variant='error']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-error-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-interactive-error-bg)); --_border: var(--lt-alert-border-color, var(--lt-border-error-strong)); --_color: var(--lt-alert-color, var(--lt-text-error)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-error)); } :host([variant='info']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-info-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-interactive-info-bg)); --_border: var(--lt-alert-border-color, var(--lt-border-info-strong)); --_color: var(--lt-alert-color, var(--lt-text-info)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-info)); } /* ── Layout ──────────────────────────────────────────────── */ .inner { align-items: flex-start; border-radius: var(--lt-border-radius); display: flex; gap: var(--lt-spacing-3); padding: var(--lt-spacing-3) var(--lt-spacing-4); } /* ── Appearances ─────────────────────────────────────────── */ /* filled (default) — subtle tinted bg + full border */ :host([appearance='filled']) .inner, :host(:not([appearance])) .inner { background: var(--_bg-subtle); border: var(--lt-border-width, 1px) solid var(--_border); color: var(--_color); } /* outlined — white bg + colored border */ :host([appearance='outlined']) .inner { background: var(--lt-bg-default); border: var(--lt-border-width, 1px) solid var(--_border); color: var(--_color); } /* solid — solid color bg, no border. Fills come from the interactive tokens, the same ones the on-colour is picked against, so the text holds AA; body text is never dimmed with opacity, which would only lower it. */ :host([appearance='solid']) .inner { background: var(--_bg-solid); border: none; color: var(--_color-solid); } /* ── Icon ────────────────────────────────────────────────── */ .icon { flex-shrink: 0; font-size: 1.125rem; margin-top: 1px; } /* ── Body ────────────────────────────────────────────────── */ .body { flex: 1; min-width: 0; } .title { margin: 0 0 var(--lt-spacing-1); } .content { font-size: 0.875rem; line-height: 1.5; } /* ── Close button ────────────────────────────────────────── */ .close { flex-shrink: 0; margin-top: 1px; opacity: 0.7; } .close:hover { opacity: 1; } :host([uppercase]) .title::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :host { transition: none; } } `"
         }
       ],
       "exports": [
@@ -286,13 +294,21 @@
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "heading",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Optional bold heading above the body content."
             },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "deprecated": "Use `heading` instead. `title` collides with the browser's own native tooltip attribute — every\nHTML element has one regardless of custom-element status, so `<lt-alert title=\"…\">` made hovering anywhere\nover the alert show a browser tooltip, and assistive tech could read it as a duplicate description (ALR-3).\nThis alias keeps existing markup/JS working; the native `title` attribute is always stripped as soon as\nit's read, so the tooltip never appears."
+            },
             {
               "kind": "field",
               "name": "icon",
@@ -309,7 +325,16 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show a dismiss button. Clicking it fires lt-close and removes the element."
+              "description": "Show a dismiss button. Clicking it fires `close` and hides the element (sets `open` to false)."
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether the alert is visible. Defaults to true, so existing markup with no attribute keeps showing.\nDismissing (or setting this to false directly) hides the alert but does not remove it from the DOM —\nthat choice is left to the consumer, since a framework that owns this node would otherwise fight the\nalert over removing it out from under its own reconciliation."
             },
             {
               "kind": "field",
@@ -327,7 +352,25 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Renders the title in small caps with wider letter spacing."
+              "description": "Renders the heading in small caps with wider letter spacing."
+            },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<AlertLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the dismiss button's accessible name), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "AlertLabels"
+              },
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -345,6 +388,27 @@
               "name": "_handleClose",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "PropertyValues<this>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_role",
+              "type": {
+                "text": "'alert' | 'status'"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_resolvedIcon",
@@ -361,7 +425,7 @@
           ],
           "events": [
             {
-              "description": "Fired when the dismiss button is clicked, just before the element is removed.",
+              "description": "Fired when the dismiss button is clicked, just before the element is hidden. Cancelable.",
               "name": "close"
             }
           ],
@@ -523,6 +587,18 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "willUpdate",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "PropertyValues<this>"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_handleImgError",
@@ -747,7 +823,7 @@
         {
           "kind": "variable",
           "name": "breadcrumbItemStyles",
-          "default": "css` :host { align-items: center; display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; } [part='link'] { color: var(--lt-interactive-primary-bg); text-decoration: none; transition: color 120ms ease; } [part='link']:hover { color: var(--lt-interactive-primary-bg-hover); text-decoration: underline; } [part='text'] { color: var(--lt-text-default); font-weight: 600; } [part='separator'] { color: var(--lt-text-muted); margin-inline: var(--lt-spacing-2); user-select: none; } [part='separator']::after { content: var(--lt-breadcrumb-separator, '/'); } :host(:last-child) [part='separator'] { display: none; } `"
+          "default": "css` :host { align-items: center; display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; } [part='link'] { color: var(--lt-text-primary); text-decoration: none; transition: color 120ms ease; } [part='link']:hover { text-decoration: underline; } [part='text'] { color: var(--lt-text-default); font-weight: 600; } [part='separator'] { color: var(--lt-text-muted); margin-inline: var(--lt-spacing-2); user-select: none; } [part='separator']::after { content: var(--lt-breadcrumb-separator, '/'); } :host(:last-child) [part='separator'] { display: none; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [part='link'] { transition: none; } } `"
         }
       ],
       "exports": [
@@ -793,6 +869,24 @@
               "default": "'/'",
               "description": "The character or element to use as a separator between breadcrumb items.\nThis is passed down to all children items via CSS variables."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<BreadcrumbLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the breadcrumb nav's landmark label), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "BreadcrumbLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "updated",
@@ -925,7 +1019,7 @@
         {
           "kind": "variable",
           "name": "buttonStyles",
-          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-on-primary); --_bg: var(--lt-interactive-primary-bg); --_border-color: transparent; --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([full-width]) { display: block; width: 100%; } :host([full-width]) [part='base'] { width: 100%; } [part='base'] { align-items: center; background: var(--lt-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-button-color, var(--_color)); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 400; gap: var(--lt-spacing-2); justify-content: center; line-height: 1; min-width: var(--lt-button-min-width, 88px); user-select: none; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; } [part='base']:active { transform: translateY(1px); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled], [part='base'][aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; pointer-events: none; transform: none; } /* anchor reset — browsers apply link color + underline by default */ a[part='base'] { text-decoration: none; } /* sizes */ :host([size='sm']) [part='base'] { font-size: 0.875rem; height: 32px; padding-inline: var(--lt-spacing-3); } :host([size='md']) [part='base'] { font-size: 1rem; height: 40px; padding-inline: var(--lt-spacing-4); } :host([size='lg']) [part='base'] { font-size: 1.0625rem; height: 48px; padding-inline: var(--lt-spacing-5); } /* variants — solid */ :host([variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([variant='neutral']) { --_bg: var(--lt-interactive-neutral-bg); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-interactive-neutral-bg-hover); --_active-bg: var(--lt-interactive-neutral-bg-active); } :host([variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_active-bg: var(--lt-interactive-success-bg-active); } :host([variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_active-bg: var(--lt-interactive-error-bg-active); } :host([variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_active-bg: var(--lt-interactive-info-bg-active); } [part='base']:hover:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_hover-bg)); } [part='base']:active:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_active-bg)); } /* outlined appearance */ :host([appearance='outlined'][variant='primary']) { --_bg: transparent; --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_bg: transparent; --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_bg: transparent; --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_active-bg: var(--lt-bg-surface); } :host([appearance='outlined'][variant='success']) { --_bg: transparent; --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_bg: transparent; --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_bg: transparent; --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_bg: transparent; --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_active-bg: var(--lt-bg-info-subtle); } /* ghost appearance — transparent background, no border, low-emphasis text button */ :host([appearance='ghost'][variant='primary']) { --_bg: transparent; --_color: var(--lt-text-primary); --_hover-bg: var(--lt-bg-primary-subtle); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='ghost'][variant='secondary']) { --_bg: transparent; --_color: var(--lt-text-secondary); --_hover-bg: var(--lt-bg-secondary-subtle); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='ghost'][variant='neutral']) { --_bg: transparent; --_color: var(--lt-text-neutral); --_hover-bg: var(--lt-bg-subtle); --_active-bg: var(--lt-bg-surface); } :host([appearance='ghost'][variant='success']) { --_bg: transparent; --_color: var(--lt-text-success); --_hover-bg: var(--lt-bg-success-subtle); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='ghost'][variant='warning']) { --_bg: transparent; --_color: var(--lt-text-warning); --_hover-bg: var(--lt-bg-warning-subtle); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='ghost'][variant='error']) { --_bg: transparent; --_color: var(--lt-text-error); --_hover-bg: var(--lt-bg-error-subtle); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='ghost'][variant='info']) { --_bg: transparent; --_color: var(--lt-text-info); --_hover-bg: var(--lt-bg-info-subtle); --_active-bg: var(--lt-bg-info-subtle); } :host([appearance='outlined']) [part='base']:active:not([disabled]):not([aria-disabled='true']), :host([appearance='ghost']) [part='base']:active:not([disabled]):not([aria-disabled='true']) { opacity: 0.8; } /* bordered — adds a border on top of whatever appearance is active; a no-op on outlined, which already sets the same border color. */ :host([bordered][variant='primary']) { --_border-color: var(--lt-border-primary-strong); } :host([bordered][variant='secondary']) { --_border-color: var(--lt-border-secondary-strong); } :host([bordered][variant='neutral']) { --_border-color: var(--lt-border-strong); } :host([bordered][variant='success']) { --_border-color: var(--lt-border-success-strong); } :host([bordered][variant='warning']) { --_border-color: var(--lt-border-warning-strong); } :host([bordered][variant='error']) { --_border-color: var(--lt-border-error-strong); } :host([bordered][variant='info']) { --_border-color: var(--lt-border-info-strong); } /* loading */ .spinner { animation: spin 700ms linear infinite; border-radius: 999px; border-right-color: transparent; border: 2px solid currentColor; height: 1em; width: 1em; } @keyframes spin { to { transform: rotate(360deg); } } .icon, .end { align-items: center; display: inline-flex; justify-content: center; } :host([uppercase]) [part='base'] { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
+          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-on-primary); --_bg: var(--lt-interactive-primary-bg); --_border-color: transparent; --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([full-width]) { display: block; width: 100%; } :host([full-width]) [part='base'] { width: 100%; } [part='base'] { align-items: center; background: var(--lt-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-button-color, var(--_color)); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 400; gap: var(--lt-spacing-2); justify-content: center; line-height: 1; min-width: var(--lt-button-min-width, 88px); position: relative; user-select: none; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; } /* Wraps the icons/slot so it can be hidden (opacity, not display/visibility — that would drop it from the accessibility tree too) while loading without collapsing the button's width or its accessible name. */ .label { align-items: center; display: inline-flex; gap: inherit; } .label.is-loading { opacity: 0; } /* Centered over the (invisible but still laid-out) label, not laid out alongside it. */ .spinner { inset: 0; margin: auto; position: absolute; } [part='base']:active { transform: translateY(1px); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled], [part='base'][aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; pointer-events: none; transform: none; } /* anchor reset — browsers apply link color + underline by default */ a[part='base'] { text-decoration: none; } /* sizes */ :host([size='sm']) [part='base'] { font-size: 0.875rem; height: 32px; padding-inline: var(--lt-spacing-3); } :host([size='md']) [part='base'] { font-size: 1rem; height: 40px; padding-inline: var(--lt-spacing-4); } :host([size='lg']) [part='base'] { font-size: 1.0625rem; height: 48px; padding-inline: var(--lt-spacing-5); } /* variants — solid */ :host([variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([variant='neutral']) { --_bg: var(--lt-interactive-neutral-bg); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-interactive-neutral-bg-hover); --_active-bg: var(--lt-interactive-neutral-bg-active); } :host([variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_active-bg: var(--lt-interactive-success-bg-active); } :host([variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_active-bg: var(--lt-interactive-error-bg-active); } :host([variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_active-bg: var(--lt-interactive-info-bg-active); } [part='base']:hover:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_hover-bg)); } [part='base']:active:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_active-bg)); } /* outlined appearance */ :host([appearance='outlined'][variant='primary']) { --_bg: transparent; --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_bg: transparent; --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_bg: transparent; --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_active-bg: var(--lt-bg-surface); } :host([appearance='outlined'][variant='success']) { --_bg: transparent; --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_bg: transparent; --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_bg: transparent; --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_bg: transparent; --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_active-bg: var(--lt-bg-info-subtle); } /* ghost appearance — transparent background, no border, low-emphasis text button */ :host([appearance='ghost'][variant='primary']) { --_bg: transparent; --_color: var(--lt-text-primary); --_hover-bg: var(--lt-bg-primary-subtle); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='ghost'][variant='secondary']) { --_bg: transparent; --_color: var(--lt-text-secondary); --_hover-bg: var(--lt-bg-secondary-subtle); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='ghost'][variant='neutral']) { --_bg: transparent; --_color: var(--lt-text-neutral); --_hover-bg: var(--lt-bg-subtle); --_active-bg: var(--lt-bg-surface); } :host([appearance='ghost'][variant='success']) { --_bg: transparent; --_color: var(--lt-text-success); --_hover-bg: var(--lt-bg-success-subtle); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='ghost'][variant='warning']) { --_bg: transparent; --_color: var(--lt-text-warning); --_hover-bg: var(--lt-bg-warning-subtle); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='ghost'][variant='error']) { --_bg: transparent; --_color: var(--lt-text-error); --_hover-bg: var(--lt-bg-error-subtle); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='ghost'][variant='info']) { --_bg: transparent; --_color: var(--lt-text-info); --_hover-bg: var(--lt-bg-info-subtle); --_active-bg: var(--lt-bg-info-subtle); } :host([appearance='outlined']) [part='base']:active:not([disabled]):not([aria-disabled='true']), :host([appearance='ghost']) [part='base']:active:not([disabled]):not([aria-disabled='true']) { opacity: 0.8; } /* bordered — adds a border on top of whatever appearance is active; a no-op on outlined, which already sets the same border color. */ :host([bordered][variant='primary']) { --_border-color: var(--lt-border-primary-strong); } :host([bordered][variant='secondary']) { --_border-color: var(--lt-border-secondary-strong); } :host([bordered][variant='neutral']) { --_border-color: var(--lt-border-strong); } :host([bordered][variant='success']) { --_border-color: var(--lt-border-success-strong); } :host([bordered][variant='warning']) { --_border-color: var(--lt-border-warning-strong); } :host([bordered][variant='error']) { --_border-color: var(--lt-border-error-strong); } :host([bordered][variant='info']) { --_border-color: var(--lt-border-info-strong); } /* loading */ .spinner { animation: spin 700ms linear infinite; border-radius: 999px; border-right-color: transparent; border: 2px solid currentColor; height: 1em; width: 1em; } @keyframes spin { to { transform: rotate(360deg); } } .icon, .end { align-items: center; display: inline-flex; justify-content: center; } :host([uppercase]) [part='base'] { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [part='base'] { transition: none; } .spinner { animation: none; } } `"
         }
       ],
       "exports": [
@@ -976,6 +1070,15 @@
               "static": true,
               "default": "true"
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
             {
               "kind": "field",
               "name": "_internals",
@@ -990,6 +1093,29 @@
               "privacy": "private",
               "default": "new AriaForwardingController(this, () => this.shadowRoot?.querySelector('[part=\"base\"]'))"
             },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_blockClickWhileBusy",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -1116,6 +1242,52 @@
               "default": "'button'",
               "description": "Form behaviour when the button is inside a `<form>`.\n`submit` triggers form validation and submission; `reset` restores initial values."
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name submitted alongside `value` when this button triggers a form submission (`type=\"submit\"`), matching a\nnative `<button name value>` — only included in the submitted data for the button that actually triggered\nthe submission, not every submit button in the form."
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Value submitted alongside `name`. See `name`."
+            },
+            {
+              "kind": "field",
+              "name": "formAction",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Overrides the form's own `action` for a submission triggered by this button, matching a native\n`<button formaction>`. Only applies when `type=\"submit\"`."
+            },
+            {
+              "kind": "field",
+              "name": "_proxySubmitBtn",
+              "type": {
+                "text": "HTMLButtonElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "_getProxySubmitBtn",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLButtonElement"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_handleClick",
@@ -1199,7 +1371,7 @@
         {
           "kind": "variable",
           "name": "calendarStyles",
-          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .calendar { background: var(--lt-bg-default); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); display: flex; flex-direction: column; gap: var(--lt-spacing-2); padding: var(--lt-spacing-3); width: 17.25rem; } /* ── Header ── */ .header { align-items: center; display: flex; justify-content: space-between; } .month-label-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: var(--lt-spacing-1); letter-spacing: 0.01em; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease; } .month-label-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn--open { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn:disabled { cursor: not-allowed; opacity: 0.6; } .picker-chevron { color: var(--lt-text-subtle); transition: transform 150ms ease; } .month-label-btn--open .picker-chevron { transform: rotate(180deg); } .nav-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-subtle); cursor: pointer; display: inline-flex; height: 2rem; justify-content: center; padding: 0; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; width: 2rem; } .nav-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); color: var(--lt-text-default); } .nav-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; } /* ── Weekday headers ── */ .weekdays { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); } .weekday { color: var(--lt-text-muted); font-size: 0.75rem; font-weight: 500; text-align: center; } /* ── Day grid ── */ .grid { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--lt-spacing-1); } [role='row'] { display: contents; } /* Day button — strip layer in range mode */ .day { align-items: center; background: transparent; border: none; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.8125rem; font-weight: 400; height: 2.25rem; justify-content: center; outline: none; padding: 0; transition: background 100ms ease; width: 100%; } .day:disabled { cursor: not-allowed; } /* Day inner — the visible circle */ .day__inner { align-items: center; background: transparent; border: 2px solid transparent; border-radius: 50%; color: inherit; display: inline-flex; font-size: inherit; font-weight: inherit; height: 2.25rem; justify-content: center; transition: background 100ms ease, border-color 100ms ease, color 100ms ease; width: 2.25rem; } .day:hover:not(:disabled) .day__inner { background: var(--lt-bg-neutral-subtle); } .day:focus-visible .day__inner { outline: 2px solid var(--lt-border-focus); outline-offset: 1px; } /* Today ring */ .day--today .day__inner { border-color: var(--lt-border-primary); font-weight: 600; } /* Single-mode selected */ .day--selected .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--selected:hover:not(:disabled) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Outside days — dimmed by the muted text color alone. They're enabled, clickable buttons, and a 0.5 opacity on top of muted text took them to ~2:1 (WCAG AA needs 4.5:1). */ .day--outside { color: var(--lt-text-muted); } /* Empty filler cell */ .day--empty { background: transparent; border: none; cursor: default; pointer-events: none; } .day:disabled .day__inner { color: var(--lt-text-disabled); opacity: 0.4; } /* ── Range strips (on .day button = strip layer) ── */ /* Start: transparent on left, strip on right */ .day--range-left { background: linear-gradient(to right, transparent 50%, var(--lt-bg-primary-subtle) 50%); } /* End: strip on left, transparent on right */ .day--range-right { background: linear-gradient(to right, var(--lt-bg-primary-subtle) 50%, transparent 50%); } /* Same-day start+end — no strip needed */ .day--range-left.day--range-right { background: transparent; } /* Days between confirmed endpoints */ .day--in-range { background: var(--lt-bg-primary-subtle); } .day--in-range:hover:not(:disabled) .day__inner { background: var(--lt-bg-neutral-subtle); } /* Days between hover preview endpoints */ .day--in-hover-range { background: var(--lt-bg-primary-subtle); opacity: 0.45; } /* Confirmed range endpoint circle */ .day--range-confirmed .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--range-confirmed:hover:not(:disabled) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Hover preview endpoint circle (semi-transparent) */ .day--range-hover .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); opacity: 0.5; } /* ── Multi-month layout ── */ .calendar--multi { width: auto; } .month-label-row { display: flex; flex: 1; justify-content: space-around; } .month-label { color: var(--lt-text-default); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; } .month-panels { display: flex; gap: var(--lt-spacing-4); } .month-col { width: 17.25rem; } /* ── Month/year picker ── */ .picker-months { display: grid; gap: var(--lt-spacing-1); grid-template-columns: repeat(3, 1fr); } .picker-month-btn { background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 400; padding: var(--lt-spacing-2) 0; text-align: center; transition: background 100ms ease, border-color 100ms ease; } .picker-month-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .picker-month-btn--current { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .picker-month-btn--current:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); } .picker-month-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } /* ── Footer ── */ .footer { border-top: 1px solid var(--lt-border-subtle); display: flex; justify-content: flex-end; padding-top: var(--lt-spacing-1); } .today-btn { background: transparent; border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-subtle); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 500; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .today-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-strong); color: var(--lt-text-default); } .today-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } `"
+          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .calendar { background: var(--lt-bg-default); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); display: flex; flex-direction: column; gap: var(--lt-spacing-2); padding: var(--lt-spacing-3); width: 17.25rem; } /* ── Header ── */ .header { align-items: center; display: flex; justify-content: space-between; } .month-label-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: var(--lt-spacing-1); letter-spacing: 0.01em; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease; } .month-label-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn--open { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn:disabled { cursor: not-allowed; opacity: 0.6; } .picker-chevron { color: var(--lt-text-subtle); transition: transform 150ms ease; } .month-label-btn--open .picker-chevron { transform: rotate(180deg); } .nav-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-subtle); cursor: pointer; display: inline-flex; height: 2rem; justify-content: center; padding: 0; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; width: 2rem; } .nav-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); color: var(--lt-text-default); } .nav-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; } /* ── Weekday headers ── */ .weekdays { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); } .weekday { color: var(--lt-text-muted); font-size: 0.75rem; font-weight: 500; text-align: center; } /* ── Day grid ── */ .grid { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--lt-spacing-1); } [role='row'] { display: contents; } /* Day button — strip layer in range mode */ .day { align-items: center; background: transparent; border: none; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.8125rem; font-weight: 400; height: 2.25rem; justify-content: center; outline: none; padding: 0; transition: background 100ms ease; width: 100%; } /* aria-disabled, not the disabled attribute — a disabled day stays focusable, so keyboard users can arrow through it instead of the roving tabindex skipping straight over it (it just can't be selected). */ .day[aria-disabled='true'] { cursor: not-allowed; } /* Day inner — the visible circle */ .day__inner { align-items: center; background: transparent; border: 2px solid transparent; border-radius: 50%; color: inherit; display: inline-flex; font-size: inherit; font-weight: inherit; height: 2.25rem; justify-content: center; transition: background 100ms ease, border-color 100ms ease, color 100ms ease; width: 2.25rem; } .day:hover:not([aria-disabled='true']) .day__inner { background: var(--lt-bg-neutral-subtle); } .day:focus-visible .day__inner { outline: 2px solid var(--lt-border-focus); outline-offset: 1px; } /* Today ring */ .day--today .day__inner { border-color: var(--lt-border-primary); font-weight: 600; } /* Single-mode selected */ .day--selected .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--selected:hover:not([aria-disabled='true']) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Outside days — dimmed by the muted text color alone. They're enabled, clickable buttons, and a 0.5 opacity on top of muted text took them to ~2:1 (WCAG AA needs 4.5:1). */ .day--outside { color: var(--lt-text-muted); } /* Empty filler cell */ .day--empty { background: transparent; border: none; cursor: default; pointer-events: none; } .day[aria-disabled='true'] .day__inner { color: var(--lt-text-disabled); opacity: 0.4; } /* ── Range strips (on .day button = strip layer) ── */ /* Start: transparent on left, strip on right */ .day--range-left { background: linear-gradient(to right, transparent 50%, var(--lt-bg-primary-subtle) 50%); } /* End: strip on left, transparent on right */ .day--range-right { background: linear-gradient(to right, var(--lt-bg-primary-subtle) 50%, transparent 50%); } /* Same-day start+end — no strip needed */ .day--range-left.day--range-right { background: transparent; } /* Days between confirmed endpoints */ .day--in-range { background: var(--lt-bg-primary-subtle); } .day--in-range:hover:not([aria-disabled='true']) .day__inner { background: var(--lt-bg-neutral-subtle); } /* Days between hover preview endpoints */ .day--in-hover-range { background: var(--lt-bg-primary-subtle); opacity: 0.45; } /* Confirmed range endpoint circle */ .day--range-confirmed .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--range-confirmed:hover:not([aria-disabled='true']) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Hover preview endpoint circle (semi-transparent) */ .day--range-hover .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); opacity: 0.5; } /* ── Multi-month layout ── */ .calendar--multi { width: auto; } .month-label-row { display: flex; flex: 1; justify-content: space-around; } .month-label { color: var(--lt-text-default); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; } .month-panels { display: flex; gap: var(--lt-spacing-4); } .month-col { width: 17.25rem; } /* ── Month/year picker ── */ .picker-months { display: grid; gap: var(--lt-spacing-1); grid-template-columns: repeat(3, 1fr); } .picker-month-btn { background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 400; padding: var(--lt-spacing-2) 0; text-align: center; transition: background 100ms ease, border-color 100ms ease; } .picker-month-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .picker-month-btn--current { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .picker-month-btn--current:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); } .picker-month-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } /* ── Footer ── */ .footer { border-top: 1px solid var(--lt-border-subtle); display: flex; justify-content: flex-end; padding-top: var(--lt-spacing-1); } .today-btn { background: transparent; border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-subtle); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 500; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .today-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-strong); color: var(--lt-text-default); } .today-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .month-label-btn, .picker-chevron, .nav-btn, .day, .day__inner, .picker-month-btn, .today-btn { transition: none; } } `"
         }
       ],
       "exports": [
@@ -1294,11 +1466,20 @@
             {
               "kind": "field",
               "name": "weekStart",
+              "type": {
+                "text": "CalendarWeekStart | undefined"
+              },
+              "description": "First day of the week (0 = Sunday … 6 = Saturday). Defaults to whatever `locale` implies (via\n`Intl.Locale#getWeekInfo`, falling back to Sunday) — set this explicitly only to override that."
+            },
+            {
+              "kind": "field",
+              "name": "_weekStart",
               "type": {
                 "text": "CalendarWeekStart"
               },
-              "default": "'0'",
-              "description": "First day of the week. 0 = Sunday, 1 = Monday."
+              "privacy": "private",
+              "description": "`weekStart` if explicitly set, otherwise derived from `locale`. Internal code should always read this, never `weekStart` directly.",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -1334,7 +1515,25 @@
                 "text": "Date[]"
               },
               "default": "[]",
-              "description": "Specific dates to disable, as an array of Date objects. Not reflected as an attribute."
+              "description": "Specific dates to disable, as an array of Date objects. Set as a JS property (`.disabledDates`)."
+            },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<CalendarLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (nav button labels, the \"Today\" footer button, the month/year picker toggle), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "CalendarLabels"
+              },
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -1679,9 +1878,9 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<{valueStart: string, valueEnd: string}>"
+                "text": "CustomEvent<{value: string} | {valueStart: string, valueEnd: string}>"
               },
-              "description": "Fired when a full range is selected (mode=\"range\").",
+              "description": "Fired when a date is selected (mode=\"single\", detail `{ value }`) or when a full range is selected (mode=\"range\", detail `{ valueStart, valueEnd }`).",
               "name": "change"
             },
             {
@@ -1689,7 +1888,7 @@
                 "text": "CustomEvent<{year: number, month: number}>"
               },
               "description": "Fired when the viewed month changes.",
-              "name": "month-change"
+              "name": "monthchange"
             }
           ],
           "superclass": {
@@ -1733,7 +1932,7 @@
         {
           "kind": "variable",
           "name": "checkboxStyles",
-          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .checkbox-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } .box { display: inline-flex; flex-shrink: 0; position: relative; } :host([label-position='left']) .checkbox-wrapper { flex-direction: row-reverse; } :host([disabled]) .checkbox-wrapper { cursor: not-allowed; opacity: 0.6; } input[type='checkbox'] { appearance: none; border-radius: calc(var(--lt-border-radius) * 0.5); border: 2px solid var(--lt-border-strong); cursor: pointer; margin: 0; position: relative; transition: background-color 120ms ease, border-color 120ms ease; } input[type='checkbox']:hover:not(:disabled) { border-color: var(--lt-color-neutral-600); } input[type='checkbox']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='checkbox']:disabled { cursor: not-allowed; } .checkmark { align-items: center; color: white; display: none; inset: 0; justify-content: center; pointer-events: none; position: absolute; } input[type='checkbox']:checked ~ .checkmark, input[type='checkbox']:indeterminate ~ .checkmark { display: flex; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='checkbox'] { height: 16px; width: 16px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='checkbox'] { height: 20px; width: 20px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='checkbox'] { height: 24px; width: 24px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='checkbox']:checked, :host([variant='primary']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-primary-bg); border-color: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='primary']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); border-color: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='checkbox']:checked, :host([variant='secondary']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-secondary-bg); border-color: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='secondary']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); border-color: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='checkbox']:checked, :host([variant='success']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-success-bg); border-color: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='success']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); border-color: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='checkbox']:checked, :host([variant='error']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-error-bg); border-color: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='error']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); border-color: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='checkbox']:checked, :host([variant='info']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-info-bg); border-color: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='info']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); border-color: var(--lt-interactive-info-bg-hover); } `"
+          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .checkbox-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } .box { display: inline-flex; flex-shrink: 0; position: relative; } :host([label-position='left']) .checkbox-wrapper { flex-direction: row-reverse; } /* :host(:disabled) — the browser matches this automatically for a form-associated element inside a disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */ :host([disabled]) .checkbox-wrapper, :host(:disabled) .checkbox-wrapper { cursor: not-allowed; opacity: 0.6; } input[type='checkbox'] { appearance: none; border-radius: calc(var(--lt-border-radius) * 0.5); border: 2px solid var(--lt-border-strong); cursor: pointer; margin: 0; position: relative; transition: background-color 120ms ease, border-color 120ms ease; } input[type='checkbox']:hover:not(:disabled) { border-color: var(--lt-color-neutral-600); } input[type='checkbox']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='checkbox']:disabled { cursor: not-allowed; } .checkmark { align-items: center; color: white; display: none; inset: 0; justify-content: center; pointer-events: none; position: absolute; } input[type='checkbox']:checked ~ .checkmark, input[type='checkbox']:indeterminate ~ .checkmark { display: flex; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='checkbox'] { height: 16px; width: 16px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='checkbox'] { height: 20px; width: 20px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='checkbox'] { height: 24px; width: 24px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='checkbox']:checked, :host([variant='primary']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-primary-bg); border-color: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='primary']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); border-color: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='checkbox']:checked, :host([variant='secondary']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-secondary-bg); border-color: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='secondary']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); border-color: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='checkbox']:checked, :host([variant='success']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-success-bg); border-color: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='success']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); border-color: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='checkbox']:checked, :host([variant='error']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-error-bg); border-color: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='error']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); border-color: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='checkbox']:checked, :host([variant='info']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-info-bg); border-color: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='info']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); border-color: var(--lt-interactive-info-bg-hover); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { input[type='checkbox'] { transition: none; } } `"
         }
       ],
       "exports": [
@@ -1779,6 +1978,18 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.checked)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -1804,7 +2015,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the checkbox is checked."
+              "description": "Whether the checkbox is checked. Not reflected as an attribute — a native checkbox's `checked` _content_\nattribute stays fixed at the markup default and never tracks interaction (that's what `defaultChecked` is\nfor); reflecting it live meant `formResetCallback` could no longer tell what the original default was. Read\nthe property, or the `change` event's `detail.checked`, instead of `[checked]`/`hasAttribute('checked')`."
             },
             {
               "kind": "field",
@@ -1869,6 +2080,24 @@
               "default": "'on'",
               "description": "Value attribute for form submission."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<CheckboxLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "CheckboxLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "input",
@@ -1894,6 +2123,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -1923,6 +2174,11 @@
               "privacy": "private",
               "description": "Renders the checkbox icon based on state.\nShows checkmark when checked, minus when indeterminate."
             },
+            {
+              "kind": "method",
+              "name": "firstUpdated",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "render"
@@ -2002,7 +2258,7 @@
         {
           "kind": "variable",
           "name": "chipStyles",
-          "default": "css` :host { display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-chip-bg); border-radius: 999px; /* Chips are small pills (as short as 20px tall at size=\"sm\") — a \"thick\" (4px) themed border eats too much of that height and reads as compressed/squished, so cap what the chip actually renders at \"medium\" (2px) regardless of the theme's configured border width. */ border: min(var(--lt-border-width, 1px), 2px) solid var(--lt-chip-border-color, transparent); color: var(--lt-chip-color); box-sizing: border-box; display: inline-flex; font-weight: 400; line-height: 1; transition: background-color 120ms ease, border-color 120ms ease; user-select: none; white-space: nowrap; } ::slotted([slot='icon']) { flex-shrink: 0; } .delete { align-items: center; background: none; border-radius: 999px; border: none; color: inherit; cursor: pointer; display: inline-flex; flex-shrink: 0; justify-content: center; opacity: 0.6; padding: 0; transition: opacity 120ms ease, background-color 120ms ease; } .delete:hover:not(:disabled) { opacity: 1; } .delete:disabled { cursor: not-allowed; } :host([disabled]) span[part='base'] { cursor: not-allowed; opacity: 0.5; pointer-events: none; } /* ── Sizes ────────────────────────────────────────────────────────────── */ :host([size='sm']) span[part='base'] { font-size: 0.75rem; gap: var(--lt-spacing-1); height: 20px; padding-inline: var(--lt-spacing-2); } :host([size='md']) span[part='base'] { font-size: 0.8125rem; gap: var(--lt-spacing-1); height: 26px; padding-inline: var(--lt-spacing-3); } :host([size='lg']) span[part='base'] { font-size: 0.9375rem; gap: var(--lt-spacing-2); height: 32px; padding-inline: var(--lt-spacing-4); } /* ── Filled (tinted bg, colored border, dark text) ───────────────────── */ :host([appearance='filled'][variant='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-text-primary); } :host([appearance='filled'][variant='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); border-color: var(--lt-border-secondary); color: var(--lt-text-secondary); } :host([appearance='filled'][variant='neutral']) span[part='base'] { background: var(--lt-bg-surface); border-color: var(--lt-border-default); color: var(--lt-text-neutral); } :host([appearance='filled'][variant='success']) span[part='base'] { background: var(--lt-bg-success-subtle); border-color: var(--lt-border-success); color: var(--lt-text-success); } :host([appearance='filled'][variant='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); border-color: var(--lt-border-warning); color: var(--lt-text-warning); } :host([appearance='filled'][variant='error']) span[part='base'] { background: var(--lt-bg-error-subtle); border-color: var(--lt-border-error); color: var(--lt-text-error); } :host([appearance='filled'][variant='info']) span[part='base'] { background: var(--lt-bg-info-subtle); border-color: var(--lt-border-info); color: var(--lt-text-info); } /* ── Outlined (transparent bg, colored border and text) ──────────────── */ :host([appearance='outlined'][variant='primary']) span[part='base'] { background: transparent; border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([appearance='outlined'][variant='secondary']) span[part='base'] { background: transparent; border-color: var(--lt-border-secondary-strong); color: var(--lt-text-secondary); } :host([appearance='outlined'][variant='neutral']) span[part='base'] { background: transparent; border-color: var(--lt-border-strong); color: var(--lt-text-neutral); } :host([appearance='outlined'][variant='success']) span[part='base'] { background: transparent; border-color: var(--lt-border-success-strong); color: var(--lt-text-success); } :host([appearance='outlined'][variant='warning']) span[part='base'] { background: transparent; border-color: var(--lt-border-warning-strong); color: var(--lt-text-warning); } :host([appearance='outlined'][variant='error']) span[part='base'] { background: transparent; border-color: var(--lt-border-error-strong); color: var(--lt-text-error); } :host([appearance='outlined'][variant='info']) span[part='base'] { background: transparent; border-color: var(--lt-border-info-strong); color: var(--lt-text-info); } `"
+          "default": "css` :host { display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-chip-bg); border-radius: 999px; /* Chips are small pills (as short as 20px tall at size=\"sm\") — a \"thick\" (4px) themed border eats too much of that height and reads as compressed/squished, so cap what the chip actually renders at \"medium\" (2px) regardless of the theme's configured border width. */ border: min(var(--lt-border-width, 1px), 2px) solid var(--lt-chip-border-color, transparent); color: var(--lt-chip-color); box-sizing: border-box; display: inline-flex; font-weight: 400; line-height: 1; transition: background-color 120ms ease, border-color 120ms ease; user-select: none; white-space: nowrap; } ::slotted([slot='icon']) { flex-shrink: 0; } .delete { align-items: center; background: none; border-radius: 999px; border: none; color: inherit; cursor: pointer; display: inline-flex; flex-shrink: 0; justify-content: center; /* WCAG 2.5.8: a 24px target. The negative margin gives the extra size back, so the chip layout is unchanged. */ margin: -6px; min-height: 24px; min-width: 24px; opacity: 0.6; padding: 0; transition: opacity 120ms ease, background-color 120ms ease; } /* The large chip's icon is 16px rather than 12px, so it needs less negative margin to keep the same layout. */ :host([size='lg']) .delete { margin: -4px; } .delete:hover:not(:disabled) { opacity: 1; } .delete:disabled { cursor: not-allowed; } :host([disabled]) span[part='base'] { cursor: not-allowed; opacity: 0.5; pointer-events: none; } /* ── Sizes ────────────────────────────────────────────────────────────── */ :host([size='sm']) span[part='base'] { font-size: 0.75rem; gap: var(--lt-spacing-1); height: 20px; padding-inline: var(--lt-spacing-2); } :host([size='md']) span[part='base'] { font-size: 0.8125rem; gap: var(--lt-spacing-1); height: 26px; padding-inline: var(--lt-spacing-3); } :host([size='lg']) span[part='base'] { font-size: 0.9375rem; gap: var(--lt-spacing-2); height: 32px; padding-inline: var(--lt-spacing-4); } /* ── Filled (tinted bg, colored border, dark text) ───────────────────── */ :host([appearance='filled'][variant='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-text-primary); } :host([appearance='filled'][variant='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); border-color: var(--lt-border-secondary); color: var(--lt-text-secondary); } :host([appearance='filled'][variant='neutral']) span[part='base'] { background: var(--lt-bg-surface); border-color: var(--lt-border-default); color: var(--lt-text-neutral); } :host([appearance='filled'][variant='success']) span[part='base'] { background: var(--lt-bg-success-subtle); border-color: var(--lt-border-success); color: var(--lt-text-success); } :host([appearance='filled'][variant='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); border-color: var(--lt-border-warning); color: var(--lt-text-warning); } :host([appearance='filled'][variant='error']) span[part='base'] { background: var(--lt-bg-error-subtle); border-color: var(--lt-border-error); color: var(--lt-text-error); } :host([appearance='filled'][variant='info']) span[part='base'] { background: var(--lt-bg-info-subtle); border-color: var(--lt-border-info); color: var(--lt-text-info); } /* ── Outlined (transparent bg, colored border and text) ──────────────── */ :host([appearance='outlined'][variant='primary']) span[part='base'] { background: transparent; border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([appearance='outlined'][variant='secondary']) span[part='base'] { background: transparent; border-color: var(--lt-border-secondary-strong); color: var(--lt-text-secondary); } :host([appearance='outlined'][variant='neutral']) span[part='base'] { background: transparent; border-color: var(--lt-border-strong); color: var(--lt-text-neutral); } :host([appearance='outlined'][variant='success']) span[part='base'] { background: transparent; border-color: var(--lt-border-success-strong); color: var(--lt-text-success); } :host([appearance='outlined'][variant='warning']) span[part='base'] { background: transparent; border-color: var(--lt-border-warning-strong); color: var(--lt-text-warning); } :host([appearance='outlined'][variant='error']) span[part='base'] { background: transparent; border-color: var(--lt-border-error-strong); color: var(--lt-text-error); } :host([appearance='outlined'][variant='info']) span[part='base'] { background: transparent; border-color: var(--lt-border-info-strong); color: var(--lt-text-info); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { span[part='base'], .delete { transition: none; } } `"
         }
       ],
       "exports": [
@@ -2095,6 +2351,24 @@
               "default": "''",
               "description": "Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600)."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<ChipLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the delete button's accessible name), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "ChipLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_deleteIconSize",
@@ -2182,7 +2456,7 @@
         {
           "kind": "variable",
           "name": "colorInputStyles",
-          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); width: 100%; cursor: pointer; } :host([disabled]) .wrapper { cursor: not-allowed; } .label { color: var(--lt-text-subtle); } .input-container { position: relative; display: flex; align-items: center; background: var(--lt-bg-subtle); border: var(--lt-border-width, 1px) solid var(--lt-border-default); border-radius: var(--lt-border-radius); box-sizing: border-box; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; overflow: hidden; } .input-container:hover:not(:has(.native-picker:disabled)) { border-color: var(--lt-border-strong); } .input-container:focus-within { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); outline: none; } :host([disabled]) .input-container { background: var(--lt-bg-surface); } .color-swatch { flex-shrink: 0; border-radius: 50%; border: 1.5px solid rgb(0 0 0 / 0.15); box-sizing: border-box; } .color-swatch.empty { border-style: dashed; border-color: var(--lt-border-default); background: repeating-conic-gradient(var(--lt-bg-muted) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px; } .display-value { flex: 1; color: var(--lt-text-default); font-family: inherit; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .display-value.is-placeholder { color: var(--lt-text-muted); } :host([disabled]) .display-value { color: var(--lt-text-muted); } .icon-end { flex-shrink: 0; color: var(--lt-text-muted); pointer-events: none; } /* The native picker is invisible but covers the entire container to handle all click/keyboard events */ .native-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } .native-picker:disabled { cursor: not-allowed; } /* ── sizes ───────────────────────────────────────────────────────────────── */ :host([size='sm']) .input-container { height: 32px; padding-inline: var(--lt-spacing-3); gap: var(--lt-spacing-2); font-size: 0.875rem; } :host([size='sm']) .color-swatch { width: 14px; height: 14px; } :host([size='md']) .input-container { height: 40px; padding-inline: var(--lt-spacing-4); gap: var(--lt-spacing-2); font-size: 1rem; } :host([size='md']) .color-swatch { width: 16px; height: 16px; } :host([size='lg']) .input-container { height: 48px; padding-inline: var(--lt-spacing-5); gap: var(--lt-spacing-3); font-size: 1.0625rem; } :host([size='lg']) .color-swatch { width: 20px; height: 20px; } :host([size='lg']) .icon-end { width: 24px; height: 24px; } `"
+          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); width: 100%; cursor: pointer; } /* :host(:disabled) — the browser matches this automatically for a form-associated element inside a disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */ :host([disabled]) .wrapper, :host(:disabled) .wrapper { cursor: not-allowed; } .label { color: var(--lt-text-subtle); } .input-container { position: relative; display: flex; align-items: center; background: var(--lt-bg-subtle); border: var(--lt-border-width, 1px) solid var(--lt-border-default); border-radius: var(--lt-border-radius); box-sizing: border-box; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; overflow: hidden; } .input-container:hover:not(:has(.native-picker:disabled)) { border-color: var(--lt-border-strong); } .input-container:focus-within { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); outline: none; } :host([disabled]) .input-container, :host(:disabled) .input-container { background: var(--lt-bg-surface); } .color-swatch { flex-shrink: 0; border-radius: 50%; border: 1.5px solid rgb(0 0 0 / 0.15); box-sizing: border-box; } .color-swatch.empty { border-style: dashed; border-color: var(--lt-border-default); background: repeating-conic-gradient(var(--lt-bg-muted) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px; } .display-value { flex: 1; color: var(--lt-text-default); font-family: inherit; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .display-value.is-placeholder { color: var(--lt-text-muted); } :host([disabled]) .display-value, :host(:disabled) .display-value { color: var(--lt-text-muted); } .icon-end { flex-shrink: 0; color: var(--lt-text-muted); pointer-events: none; } /* The native picker is invisible but covers the entire container to handle all click/keyboard events */ .native-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } .native-picker:disabled { cursor: not-allowed; } /* ── sizes ───────────────────────────────────────────────────────────────── */ :host([size='sm']) .input-container { height: 32px; padding-inline: var(--lt-spacing-3); gap: var(--lt-spacing-2); font-size: 0.875rem; } :host([size='sm']) .color-swatch { width: 14px; height: 14px; } :host([size='md']) .input-container { height: 40px; padding-inline: var(--lt-spacing-4); gap: var(--lt-spacing-2); font-size: 1rem; } :host([size='md']) .color-swatch { width: 16px; height: 16px; } :host([size='lg']) .input-container { height: 48px; padding-inline: var(--lt-spacing-5); gap: var(--lt-spacing-3); font-size: 1.0625rem; } :host([size='lg']) .color-swatch { width: 20px; height: 20px; } :host([size='lg']) .icon-end { width: 24px; height: 24px; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .input-container { transition: none; } } `"
         }
       ],
       "exports": [
@@ -2228,6 +2502,18 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.value)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -2235,7 +2521,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The current color value. Accepts hex (`#7c3aed`), rgb (`rgb(124, 58, 237)`),\nor hsl (`hsl(263, 70%, 58%)`). Emitted values match the `format` prop."
+              "description": "The current color value. Accepts hex (`#7c3aed`), rgb (`rgb(124, 58, 237)`),\nor hsl (`hsl(263, 70%, 58%)`). Emitted values match the `format` prop. Not reflected as an attribute —\nread the property, or the `change` event's `detail.value`, instead of `getAttribute('value')`/`[value]`."
             },
             {
               "kind": "field",
@@ -2300,6 +2586,24 @@
               "default": "'md'",
               "description": "Size of the input — affects height and padding."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<ColorInputLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "ColorInputLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "updated"
@@ -2308,6 +2612,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -2387,7 +2713,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[ floatingPanelReset, css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); position: relative; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); } .required-indicator { color: var(--lt-color-error-500); margin-left: 2px; } .input-wrap { align-items: center; background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); cursor: text; display: flex; gap: var(--lt-spacing-2); overflow: hidden; position: relative; transition: border-color 150ms ease, box-shadow 150ms ease; } :host([open]) .input-wrap, .input-wrap:focus-within { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } :host([variant='error']) .input-wrap { border-color: var(--lt-color-error-500); } :host([variant='error'][open]) .input-wrap, :host([variant='error']) .input-wrap:focus-within { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } :host([variant='success']) .input-wrap { border-color: var(--lt-color-success-500); } :host([variant='warning']) .input-wrap { border-color: var(--lt-color-warning-500); } :host([disabled]) .input-wrap { background: var(--lt-bg-neutral-subtle); cursor: not-allowed; pointer-events: none; } input { background: transparent; border: none; color: var(--lt-text-default); flex: 1; font-family: inherit; min-width: 0; outline: none; } input::placeholder { color: var(--lt-text-placeholder, var(--lt-color-neutral-400)); } :host([disabled]) input { color: var(--lt-text-subtle); cursor: not-allowed; } /* Sizes */ :host([size='sm']) .input-wrap { height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='sm']) input { font-size: 0.8125rem; } :host([size='md']) .input-wrap, :host(:not([size])) .input-wrap { height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='md']) input, :host(:not([size])) input { font-size: 0.9375rem; } :host([size='lg']) .input-wrap { height: 48px; padding: 0 var(--lt-spacing-4); } :host([size='lg']) input { font-size: 1rem; } .chevron { color: var(--lt-text-subtle); flex-shrink: 0; pointer-events: none; transition: transform 150ms ease; } :host([open]) .chevron { transform: rotate(180deg); } .dropdown { background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-shadow: var(--lt-shadow-md); max-height: 240px; overflow-y: auto; z-index: 100; } .option { align-items: center; background: transparent; border: none; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; font-size: 0.9375rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); text-align: left; width: 100%; } .option:hover { background: var(--lt-bg-neutral-subtle); } .option[aria-selected='true'] { background: var(--lt-bg-primary-subtle); color: var(--lt-color-primary-700); font-weight: 500; } .option[disabled] { color: var(--lt-text-subtle); cursor: not-allowed; pointer-events: none; } .no-results { color: var(--lt-text-subtle); font-size: 0.875rem; padding: var(--lt-spacing-3); text-align: center; } .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-color-error-600); } :host([variant='success']) .helper-text { color: var(--lt-color-success-600); } :host([variant='warning']) .helper-text { color: var(--lt-color-warning-700); } ` ]"
+          "default": "[ floatingPanelReset, css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); position: relative; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); } .required-indicator { color: var(--lt-text-error); margin-inline-start: 2px; } .input-wrap { align-items: center; background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); cursor: text; display: flex; gap: var(--lt-spacing-2); overflow: hidden; position: relative; transition: border-color 150ms ease, box-shadow 150ms ease; } :host([open]) .input-wrap, .input-wrap:focus-within { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } :host([variant='error']) .input-wrap { border-color: var(--lt-text-error); } :host([variant='error'][open]) .input-wrap, :host([variant='error']) .input-wrap:focus-within { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } :host([variant='success']) .input-wrap { border-color: var(--lt-color-success-500); } :host([variant='warning']) .input-wrap { border-color: var(--lt-color-warning-500); } /* :host(:disabled) — the browser matches this automatically for a form-associated element inside a disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */ :host([disabled]) .input-wrap, :host(:disabled) .input-wrap { background: var(--lt-bg-neutral-subtle); cursor: not-allowed; pointer-events: none; } input { background: transparent; border: none; color: var(--lt-text-default); flex: 1; font-family: inherit; min-width: 0; outline: none; } input::placeholder { color: var(--lt-text-placeholder, var(--lt-color-neutral-400)); } :host([disabled]) input, :host(:disabled) input { color: var(--lt-text-subtle); cursor: not-allowed; } /* Sizes */ :host([size='sm']) .input-wrap { height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='sm']) input { font-size: 0.8125rem; } :host([size='md']) .input-wrap, :host(:not([size])) .input-wrap { height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='md']) input, :host(:not([size])) input { font-size: 0.9375rem; } :host([size='lg']) .input-wrap { height: 48px; padding: 0 var(--lt-spacing-4); } :host([size='lg']) input { font-size: 1rem; } .chevron { color: var(--lt-text-subtle); flex-shrink: 0; pointer-events: none; transition: transform 150ms ease; } :host([open]) .chevron { transform: rotate(180deg); } .dropdown { background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-shadow: var(--lt-shadow-md); max-height: 240px; overflow-y: auto; z-index: 100; } .option { align-items: center; background: transparent; border: none; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; font-size: 0.9375rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); text-align: start; width: 100%; } .option:hover { background: var(--lt-bg-neutral-subtle); } .option[data-active='true'] { background: var(--lt-bg-neutral-subtle); outline: 2px solid var(--lt-interactive-primary-bg); outline-offset: -2px; } .option[aria-selected='true'] { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); font-weight: 500; } .option[disabled] { color: var(--lt-text-subtle); cursor: not-allowed; pointer-events: none; } .no-results { color: var(--lt-text-subtle); font-size: 0.875rem; padding: var(--lt-spacing-3); text-align: center; } .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-text-error); } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .input-wrap, .chevron { transition: none; } } ` ]"
         }
       ],
       "exports": [
@@ -2435,9 +2761,28 @@
             },
             {
               "kind": "field",
-              "name": "options",
-              "type": {
-                "text": "ComboboxOption[]"
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.value)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_uid",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`lt-combobox-${comboboxCount++}`"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "ComboboxOption[]"
               },
               "default": "[]",
               "description": "Array of selectable options. Set as a JS property (`.options`)."
@@ -2449,7 +2794,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Currently selected value."
+              "description": "Currently selected value. Not reflected as an attribute — read the property, or the `change` event's\n`detail.value`, instead of `getAttribute('value')`/`[value]` (consistent with the rest of the form\ncontrols; see `lt-textfield`'s equivalent doc comment for why)."
             },
             {
               "kind": "field",
@@ -2523,6 +2868,24 @@
               "default": "''",
               "description": "Name used in form submission."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<ComboboxLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (validation message, \"no results\" text), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "ComboboxLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "query",
@@ -2568,6 +2931,12 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_fieldIds",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "selectedLabel",
@@ -2586,6 +2955,46 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "enabledOpts",
+              "type": {
+                "text": "ComboboxOption[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_idFor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "opt",
+                  "type": {
+                    "text": "ComboboxOption"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_preventFocusSteal",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "openDropdown",
@@ -2640,6 +3049,11 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "_onFocusOut",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "updated"
@@ -2648,6 +3062,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -2738,7 +3174,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[ floatingPanelReset, css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); cursor: default; } .required-indicator { color: var(--lt-color-error-500); margin-left: 2px; } /* ── Field ── */ .field { position: relative; } .field-btn { align-items: center; background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; justify-content: space-between; outline: none; text-align: left; transition: border-color 150ms ease, box-shadow 150ms ease; width: 100%; } .field-btn:focus-visible { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } .field-btn:disabled { background: var(--lt-bg-neutral-subtle); color: var(--lt-text-subtle); cursor: not-allowed; } .display-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .display-value--placeholder { color: var(--lt-text-muted); } .calendar-icon { color: var(--lt-text-subtle); flex-shrink: 0; line-height: 0; margin-left: var(--lt-spacing-2); } /* ── Sizes ── */ :host([size='sm']) .field-btn { font-size: 0.8125rem; height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='md']) .field-btn, :host(:not([size])) .field-btn { font-size: 0.9375rem; height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='lg']) .field-btn { font-size: 1rem; height: 48px; padding: 0 var(--lt-spacing-4); } /* ── Variants ── */ :host([variant='success']) .field-btn { border-color: var(--lt-color-success-500); } :host([variant='success']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) .field-btn { border-color: var(--lt-color-warning-500); } :host([variant='warning']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) .field-btn { border-color: var(--lt-color-error-500); } :host([variant='error']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } /* ── Dropdown ── */ .dropdown { display: none; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08)); z-index: 9999; } /* ── Helper text ── */ .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-color-error-600); } :host([variant='success']) .helper-text { color: var(--lt-color-success-600); } :host([variant='warning']) .helper-text { color: var(--lt-color-warning-700); } ` ]"
+          "default": "[ floatingPanelReset, css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); cursor: default; } .required-indicator { color: var(--lt-text-error); margin-inline-start: 2px; } /* ── Field ── */ .field { position: relative; } .field-btn { align-items: center; background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; justify-content: space-between; outline: none; text-align: start; transition: border-color 150ms ease, box-shadow 150ms ease; width: 100%; } .field-btn:focus-visible { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } .field-btn:disabled { background: var(--lt-bg-neutral-subtle); color: var(--lt-text-subtle); cursor: not-allowed; } .display-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .display-value--placeholder { color: var(--lt-text-muted); } .calendar-icon { color: var(--lt-text-subtle); flex-shrink: 0; line-height: 0; margin-inline-start: var(--lt-spacing-2); } /* ── Sizes ── */ :host([size='sm']) .field-btn { font-size: 0.8125rem; height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='md']) .field-btn, :host(:not([size])) .field-btn { font-size: 0.9375rem; height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='lg']) .field-btn { font-size: 1rem; height: 48px; padding: 0 var(--lt-spacing-4); } /* ── Variants ── */ :host([variant='success']) .field-btn { border-color: var(--lt-color-success-500); } :host([variant='success']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) .field-btn { border-color: var(--lt-color-warning-500); } :host([variant='warning']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) .field-btn { border-color: var(--lt-text-error); } :host([variant='error']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } /* ── Dropdown ── */ .dropdown { display: none; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08)); z-index: 9999; } /* ── Helper text ── */ .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-text-error); } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .field-btn { transition: none; } } ` ]"
         }
       ],
       "exports": [
@@ -2784,6 +3220,18 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.value)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -2791,7 +3239,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Selected date in ISO format (YYYY-MM-DD)."
+              "description": "Selected date in ISO format (YYYY-MM-DD). Not reflected as an attribute — read the property, or the\n`change` event's `detail.value`, instead of `getAttribute('value')`/`[value]`."
             },
             {
               "kind": "field",
@@ -2833,10 +3281,9 @@
               "kind": "field",
               "name": "weekStart",
               "type": {
-                "text": "'0' | '1'"
+                "text": "CalendarWeekStart | undefined"
               },
-              "default": "'0'",
-              "description": "First day of the week in the calendar. 0 = Sunday, 1 = Monday."
+              "description": "First day of the week in the calendar (0 = Sunday … 6 = Saturday). Defaults to whatever `locale` implies —\nset this explicitly only to override that. Forwarded as-is to the internal `lt-calendar`, which does the\nactual derivation when this is left unset."
             },
             {
               "kind": "field",
@@ -2908,7 +3355,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Name used in form submission via a hidden input."
+              "description": "Name used in form submission (through `ElementInternals`, so no hidden input is rendered)."
             },
             {
               "kind": "field",
@@ -2917,7 +3364,25 @@
                 "text": "Calendar['disabledDates']"
               },
               "default": "[]",
-              "description": "Individual dates to disable in the calendar, as Date objects."
+              "description": "Individual dates to disable in the calendar, as Date objects. Set as a JS property (`.disabledDates`)."
+            },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<DateInputLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (validation message, calendar popover's accessible label), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "DateInputLabels"
+              },
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -2946,6 +3411,12 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_fieldIds",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_displayValue",
@@ -2993,12 +3464,42 @@
             },
             {
               "kind": "method",
-              "name": "updated"
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "Map<string, unknown>"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -3086,7 +3587,7 @@
         {
           "kind": "variable",
           "name": "datepickerStyles",
-          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); display: flex; flex-direction: column; gap: var(--lt-spacing-1); } .required-indicator { color: var(--lt-color-error-500); } input { background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-default); font-family: inherit; font-size: 0.9375rem; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; width: 100%; box-sizing: border-box; } input:focus { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } input:disabled { background: var(--lt-bg-neutral-subtle); color: var(--lt-text-subtle); cursor: not-allowed; } /* Sizes */ :host([size='sm']) input { font-size: 0.8125rem; height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='md']) input, :host(:not([size])) input { font-size: 0.9375rem; height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='lg']) input { font-size: 1rem; height: 48px; padding: 0 var(--lt-spacing-4); } /* Variants */ :host([variant='success']) input { border-color: var(--lt-color-success-500); } :host([variant='success']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) input { border-color: var(--lt-color-warning-500); } :host([variant='warning']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) input { border-color: var(--lt-color-error-500); } :host([variant='error']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-color-error-600); } :host([variant='success']) .helper-text { color: var(--lt-color-success-600); } :host([variant='warning']) .helper-text { color: var(--lt-color-warning-700); } `"
+          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); display: flex; flex-direction: column; gap: var(--lt-spacing-1); } .required-indicator { color: var(--lt-text-error); } input { background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-default); font-family: inherit; font-size: 0.9375rem; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; width: 100%; box-sizing: border-box; } input:focus { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } input:disabled { background: var(--lt-bg-neutral-subtle); color: var(--lt-text-subtle); cursor: not-allowed; } /* Sizes */ :host([size='sm']) input { font-size: 0.8125rem; height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='md']) input, :host(:not([size])) input { font-size: 0.9375rem; height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='lg']) input { font-size: 1rem; height: 48px; padding: 0 var(--lt-spacing-4); } /* Variants */ :host([variant='success']) input { border-color: var(--lt-color-success-500); } :host([variant='success']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) input { border-color: var(--lt-color-warning-500); } :host([variant='warning']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) input { border-color: var(--lt-text-error); } :host([variant='error']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-text-error); } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { input { transition: none; } } `"
         }
       ],
       "exports": [
@@ -3132,6 +3633,18 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.value)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
             {
               "kind": "field",
               "name": "type",
@@ -3148,7 +3661,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Current value in the format required by the native input (`YYYY-MM-DD`, `HH:MM`, or `YYYY-MM-DDTHH:MM`)."
+              "description": "Current value in the format required by the native input (`YYYY-MM-DD`, `HH:MM`, or `YYYY-MM-DDTHH:MM`).\nNot reflected as an attribute — read the property, or the `change` event's `detail.value`, instead of\n`getAttribute('value')`/`[value]`."
             },
             {
               "kind": "field",
@@ -3186,6 +3699,12 @@
               "default": "''",
               "description": "Helper or error text displayed below the input."
             },
+            {
+              "kind": "field",
+              "name": "_fieldIds",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -3265,6 +3784,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -3276,12 +3817,28 @@
             {
               "kind": "method",
               "name": "handleChange",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
               "name": "handleInput",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -3369,7 +3926,7 @@
         {
           "kind": "variable",
           "name": "dialogStyles",
-          "default": "css` :host { font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } /* Backdrop */ .backdrop { align-items: center; background: rgba(0, 0, 0, var(--lt-dialog-overlay-opacity, 0.5)); display: flex; height: 100vh; justify-content: center; left: 0; opacity: 0; padding: var(--lt-spacing-4); position: fixed; top: 0; transition: opacity 200ms ease; width: 100vw; z-index: 1000; } :host([open]) .backdrop { opacity: 1; } :host(:not([open])) .backdrop { pointer-events: none; } /* lt-surface host — flex item inside .backdrop, sized per size variant */ lt-surface { width: 100%; } :host([size='sm']) lt-surface { max-width: 400px; } :host([size='md']) lt-surface { max-width: 600px; } :host([size='lg']) lt-surface { max-width: 800px; } :host([size='xl']) lt-surface { max-width: 1000px; } :host([size='fullscreen']) .backdrop { padding: 0; } :host([size='fullscreen']) lt-surface { height: 100vh; max-height: 100vh; max-width: 100vw; } /* lt-surface inner div — layout and animation */ lt-surface::part(surface) { display: flex; flex-direction: column; max-height: calc(100vh - var(--lt-spacing-8)); opacity: 0; position: relative; transform: translateY(16px); transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1); } :host([open]) lt-surface::part(surface) { opacity: 1; transform: translateY(0); } :host([size='fullscreen']) lt-surface::part(surface) { border-radius: 0; max-height: 100vh; } /* Header */ .header { align-items: center; border-bottom: 1px solid var(--lt-border-default); display: flex; gap: var(--lt-spacing-4); padding: var(--lt-spacing-5); position: relative; } .header-content { flex: 1; } .title { color: var(--lt-text-default); } .close-button { flex-shrink: 0; } /* Body */ .body { color: var(--lt-color-neutral-700); flex: 1; overflow-y: auto; padding: var(--lt-spacing-5); } /* Footer */ .footer { border-top: 1px solid var(--lt-border-default); display: flex; gap: var(--lt-spacing-3); justify-content: flex-end; padding: var(--lt-spacing-5); } :host([uppercase]) .title::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
+          "default": "css` :host { font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } /* The native <dialog> is the modal surface now — its own showModal()/close() give the top-layer stacking, focus trap and inert background for free (DLG-1). Reset its UA-default border/padding/background (a native <dialog> renders with a visible border and white background by default) so lt-surface, not the browser's own chrome, controls how it looks. Width/height are viewport-relative with a spacing-4 inset on each side (matching the old .backdrop's padding), capped per size variant below. */ dialog { background: transparent; border: none; max-height: calc(100vh - var(--lt-spacing-8)); overflow: visible; padding: 0; width: calc(100vw - var(--lt-spacing-8)); /* display/overlay (top-layer membership) are the only things animated on <dialog> itself — the entrance/exit motion (opacity + translateY) lives on lt-surface below, unaffected by any of this. Without these, close() would remove the dialog (and its ::backdrop) from rendering instantly, cutting that motion off partway through; allow-discrete keeps it rendered for the transition's duration instead, then removes it. */ transition: display 220ms allow-discrete, overlay 220ms allow-discrete; } :host([size='sm']) dialog { max-width: 400px; } :host([size='md']) dialog { max-width: 600px; } :host([size='lg']) dialog { max-width: 800px; } :host([size='xl']) dialog { max-width: 1000px; } :host([size='fullscreen']) dialog { height: 100vh; max-height: 100vh; max-width: 100vw; width: 100vw; } /* ::backdrop replaces the old .backdrop div — it's a real paintable box (just not a real DOM node), so its own background-color transition plays independently of lt-surface's. */ dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background-color 200ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete; } dialog[open]::backdrop { background: rgba(0, 0, 0, var(--lt-dialog-overlay-opacity, 0.5)); } /* lt-surface — fills the <dialog>, sized by it (max-width/height above); the entrance/exit animation */ lt-surface { display: flex; flex-direction: column; height: 100%; opacity: 0; transform: translateY(16px); transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1); width: 100%; } dialog[open] lt-surface { opacity: 1; transform: translateY(0); } lt-surface::part(surface) { display: flex; flex: 1; flex-direction: column; min-height: 0; } /* Header */ .header { align-items: center; border-bottom: 1px solid var(--lt-border-default); display: flex; gap: var(--lt-spacing-4); padding: var(--lt-spacing-5); position: relative; } .header-content { flex: 1; } .title { color: var(--lt-text-default); } .close-button { flex-shrink: 0; } /* Body */ .body { color: var(--lt-text-neutral); flex: 1; overflow-y: auto; padding: var(--lt-spacing-5); } /* Footer */ .footer { border-top: 1px solid var(--lt-border-default); display: flex; gap: var(--lt-spacing-3); justify-content: flex-end; padding: var(--lt-spacing-5); } :host([uppercase]) .title::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { dialog, dialog::backdrop, lt-surface { transition: none; } } `"
         }
       ],
       "exports": [
@@ -3389,7 +3946,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Dialog component (modal) with backdrop, animations, and accessibility features.",
+          "description": "Dialog component (modal) built on the native `<dialog>` element, with a backdrop, animations, and full\naccessibility features for free — top-layer stacking, a real focus trap, an inert page background, and\nEscape-to-close all come from the platform (`showModal()`), not from anything this component builds itself\n(DLG-1). Body scroll locking is the one thing native `<dialog>` doesn't do on its own — this component keeps\nits own ref-counted lock for that (DLG-3, see `shared/scroll-lock.ts`).",
           "name": "Dialog",
           "slots": [
             {
@@ -3397,7 +3954,7 @@
               "name": ""
             },
             {
-              "description": "Custom header content (overrides title prop)",
+              "description": "Custom header content (overrides heading prop)",
               "name": "header"
             },
             {
@@ -3435,12 +3992,20 @@
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "heading",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Dialog title displayed in the header."
+              "description": "Dialog heading displayed in the header."
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "deprecated": "Use `heading` instead. `title` collides with the browser's own native tooltip attribute — every\nHTML element has one regardless of custom-element status, so `<lt-dialog title=\"…\">` made hovering anywhere\nover the dialog show a browser tooltip, and assistive tech could read it as a duplicate description (DLG-6).\nThis alias keeps existing markup/JS working; the native `title` attribute is always stripped as soon as\nit's read, so the tooltip never appears."
             },
             {
               "kind": "field",
@@ -3476,7 +4041,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Renders the dialog title in small caps with wider letter spacing."
+              "description": "Renders the dialog heading in small caps with wider letter spacing."
             },
             {
               "kind": "field",
@@ -3505,11 +4070,29 @@
               "default": "'filled'",
               "description": "Visual appearance of the internal surface, matching `lt-surface`'s vocabulary."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<DialogLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the close button's accessible name), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "DialogLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "dialogElement",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "HTMLDialogElement | undefined"
               },
               "privacy": "private"
             },
@@ -3521,6 +4104,24 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_scrollLocked",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_skipNextOpenChange",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
             {
               "kind": "method",
               "name": "show",
@@ -3539,6 +4140,11 @@
               "privacy": "public",
               "description": "Toggles the dialog open/closed state."
             },
+            {
+              "kind": "method",
+              "name": "firstUpdated",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "updated",
@@ -3546,7 +4152,7 @@
                 {
                   "name": "changedProperties",
                   "type": {
-                    "text": "Map<string, unknown>"
+                    "text": "PropertyValues<this>"
                   }
                 }
               ]
@@ -3568,21 +4174,18 @@
             },
             {
               "kind": "field",
-              "name": "handleKeydown",
+              "name": "_handleCancel",
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "handleBackdropClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_handleNativeClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_handleDialogClick",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -3614,29 +4217,18 @@
           ],
           "events": [
             {
-              "name": "dialog-open",
+              "name": "open",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when dialog opens (deprecated, use `open`)"
+              "description": "Fired when dialog opens"
             },
             {
               "name": "close",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when dialog closes"
-            },
-            {
-              "name": "dialog-close",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired when dialog closes (deprecated, use `close`)"
-            },
-            {
-              "description": "Fired when dialog opens",
-              "name": "open"
+              "description": "Fired when dialog closes (however it closed — the close button, Escape, a backdrop click, or setting `open` to `false` directly)"
             }
           ],
           "superclass": {
@@ -3688,7 +4280,7 @@
         {
           "kind": "variable",
           "name": "dividerStyles",
-          "default": "css` :host { display: block; } :host([orientation='vertical']) { align-self: stretch; display: inline-flex; width: auto; } /* ── Horizontal ─────────────────────────────────────────────────────────── */ :host([orientation='horizontal']) [part='base'], :host(:not([orientation])) [part='base'] { align-items: center; display: flex; width: 100%; } :host([orientation='horizontal']) [part='base']::before, :host(:not([orientation])) [part='base']::before, :host([orientation='horizontal']) [part='base']::after, :host(:not([orientation])) [part='base']::after { border-top: 1px solid var(--lt-border-default); border-top-style: var(--_divider-style, solid); content: ''; flex: 1; } /* ── Vertical ───────────────────────────────────────────────────────────── */ :host([orientation='vertical']) [part='base'] { align-items: center; display: flex; flex-direction: column; height: 100%; } :host([orientation='vertical']) [part='base']::before, :host([orientation='vertical']) [part='base']::after { border-left: 1px solid var(--lt-border-default); border-left-style: var(--_divider-style, solid); content: ''; flex: 1; } /* ── Label ──────────────────────────────────────────────────────────────── */ [part='label'] { color: var(--lt-text-subtle); font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.75rem; font-weight: 600; padding-inline: var(--lt-spacing-3); white-space: nowrap; } :host([orientation='vertical']) [part='label'] { padding-block: var(--lt-spacing-3); padding-inline: 0; } /* ── Appearances ────────────────────────────────────────────────────────── */ :host([appearance='solid']) { --_divider-style: solid; } :host([appearance='dashed']) { --_divider-style: dashed; } :host([appearance='dotted']) { --_divider-style: dotted; } `"
+          "default": "css` :host { display: block; } :host([orientation='vertical']) { align-self: stretch; display: inline-flex; width: auto; } /* ── Horizontal ─────────────────────────────────────────────────────────── */ :host([orientation='horizontal']) [part='base'], :host(:not([orientation])) [part='base'] { align-items: center; display: flex; width: 100%; } :host([orientation='horizontal']) [part='base']::before, :host(:not([orientation])) [part='base']::before, :host([orientation='horizontal']) [part='base']::after, :host(:not([orientation])) [part='base']::after { border-top: 1px solid var(--lt-border-default); border-top-style: var(--_divider-style, solid); content: ''; flex: 1; } /* ── Vertical ───────────────────────────────────────────────────────────── */ :host([orientation='vertical']) [part='base'] { align-items: center; display: flex; flex-direction: column; height: 100%; } :host([orientation='vertical']) [part='base']::before, :host([orientation='vertical']) [part='base']::after { border-inline-start: 1px solid var(--lt-border-default); border-inline-start-style: var(--_divider-style, solid); content: ''; flex: 1; } /* ── Label ──────────────────────────────────────────────────────────────── */ [part='label'] { color: var(--lt-text-subtle); font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.75rem; font-weight: 600; padding-inline: var(--lt-spacing-3); white-space: nowrap; } :host([orientation='vertical']) [part='label'] { padding-block: var(--lt-spacing-3); padding-inline: 0; } /* ── Appearances ────────────────────────────────────────────────────────── */ :host([appearance='solid']) { --_divider-style: solid; } :host([appearance='dashed']) { --_divider-style: dashed; } :host([appearance='dotted']) { --_divider-style: dotted; } `"
         }
       ],
       "exports": [
@@ -3806,7 +4398,7 @@
         {
           "kind": "variable",
           "name": "dropdownItemStyles",
-          "default": "css` :host { display: block; } .item { align-items: center; background: none; border: none; border-radius: 0; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; gap: var(--lt-spacing-2); padding: var(--lt-spacing-2) var(--lt-spacing-4); text-align: left; text-decoration: none; width: 100%; } .item:hover, .item:focus-visible { background: var(--lt-bg-neutral-subtle); outline: none; } .item:active { background: var(--lt-bg-overlay); } :host([selected]) .item { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); font-weight: 600; } :host([disabled]) { pointer-events: none; } :host([disabled]) .item { color: var(--lt-text-disabled); cursor: not-allowed; } `"
+          "default": "css` :host { display: block; } .item { align-items: center; background: none; border: none; border-radius: 0; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; gap: var(--lt-spacing-2); padding: var(--lt-spacing-2) var(--lt-spacing-4); text-align: start; text-decoration: none; width: 100%; } .item:hover, .item:focus-visible { background: var(--lt-bg-neutral-subtle); outline: none; } .item:active { background: var(--lt-bg-overlay); } :host([selected]) .item { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); font-weight: 600; } :host([disabled]) { pointer-events: none; } :host([disabled]) .item { color: var(--lt-text-disabled); cursor: not-allowed; } `"
         }
       ],
       "exports": [
@@ -3922,7 +4514,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[ floatingPanelReset, css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .trigger-wrap { display: contents; } lt-surface.menu { display: none; min-width: 10rem; z-index: 1000; } lt-surface.menu::part(surface) { overflow: hidden; padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2)); } ` ]"
+          "default": "[ floatingPanelReset, css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .trigger-wrap { display: contents; } lt-surface.menu { display: none; min-width: 10rem; z-index: 1000; } lt-surface.menu::part(surface) { max-height: var(--lt-dropdown-max-height, min(24rem, 60vh)); overflow-x: hidden; overflow-y: auto; padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2)); } ` ]"
         }
       ],
       "exports": [
@@ -3948,6 +4540,11 @@
             {
               "description": "Overrides the menu surface's default vertical padding.",
               "name": "--lt-dropdown-menu-padding"
+            },
+            {
+              "description": "Tallest the menu grows before it scrolls.",
+              "name": "--lt-dropdown-max-height",
+              "default": "min(24rem, 60vh)"
             }
           ],
           "slots": [
@@ -4001,6 +4598,25 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_skipNextOpenChange",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
+            {
+              "kind": "method",
+              "name": "_syncTriggerAria",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onFocusOut",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "updated",
@@ -4238,7 +4854,7 @@
         {
           "kind": "variable",
           "name": "iconButtonStyles",
-          "default": "css` :host { display: inline-flex; /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-subtle); --_bg: transparent; --_border-color: transparent; --_hover-bg: var(--lt-bg-subtle); --_hover-color: var(--lt-text-default); --_active-bg: var(--lt-bg-subtle); } [part='base'] { align-items: center; background: var(--lt-icon-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-icon-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-icon-button-color, var(--_color)); cursor: pointer; display: inline-flex; justify-content: center; padding: 0; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; user-select: none; } [part='base']:hover:not([disabled]) { background: var(--lt-icon-button-hover-bg, var(--_hover-bg)); color: var(--lt-icon-button-hover-color, var(--lt-icon-button-color, var(--_hover-color))); } [part='base']:active { transform: translateY(1px); } [part='base']:active:not([disabled]) { background: var(--lt-icon-button-hover-bg, var(--_active-bg)); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled] { cursor: not-allowed; opacity: 0.5; pointer-events: none; transform: none; } a[part='base'] { text-decoration: none; } /* sizes */ :host([size='sm']) [part='base'] { height: 28px; width: 28px; } :host([size='md']) [part='base'] { height: 36px; width: 36px; } :host([size='lg']) [part='base'] { height: 44px; width: 44px; } /* ── ghost ────────────────────────────────────────────────── */ :host([appearance='ghost'][variant='primary']) { --_color: var(--lt-text-primary); --_hover-bg: var(--lt-bg-primary-subtle); --_hover-color: var(--lt-text-primary); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='ghost'][variant='secondary']) { --_color: var(--lt-text-secondary); --_hover-bg: var(--lt-bg-secondary-subtle); --_hover-color: var(--lt-text-secondary); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='ghost'][variant='success']) { --_color: var(--lt-text-success); --_hover-bg: var(--lt-bg-success-subtle); --_hover-color: var(--lt-text-success); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='ghost'][variant='warning']) { --_color: var(--lt-text-warning); --_hover-bg: var(--lt-bg-warning-subtle); --_hover-color: var(--lt-text-warning); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='ghost'][variant='error']) { --_color: var(--lt-text-error); --_hover-bg: var(--lt-bg-error-subtle); --_hover-color: var(--lt-text-error); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='ghost'][variant='info']) { --_color: var(--lt-text-info); --_hover-bg: var(--lt-bg-info-subtle); --_hover-color: var(--lt-text-info); --_active-bg: var(--lt-bg-info-subtle); } /* ── filled ───────────────────────────────────────────────── */ :host([appearance='filled'][variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_hover-color: var(--lt-text-on-primary); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([appearance='filled'][variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_hover-color: var(--lt-text-on-secondary); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([appearance='filled'][variant='neutral']) { --_bg: var(--lt-interactive-neutral-bg); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-interactive-neutral-bg-hover); --_hover-color: var(--lt-color-neutral-50); --_active-bg: var(--lt-interactive-neutral-bg-active); } :host([appearance='filled'][variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_hover-color: var(--lt-text-on-success); --_active-bg: var(--lt-interactive-success-bg-active); } :host([appearance='filled'][variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_hover-color: var(--lt-text-on-warning); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([appearance='filled'][variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_hover-color: var(--lt-text-on-error); --_active-bg: var(--lt-interactive-error-bg-active); } :host([appearance='filled'][variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_hover-color: var(--lt-text-on-info); --_active-bg: var(--lt-interactive-info-bg-active); } /* ── outlined ─────────────────────────────────────────────── */ :host([appearance='outlined'][variant='primary']) { --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_hover-color: var(--lt-text-primary); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_hover-color: var(--lt-text-secondary); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_hover-color: var(--lt-text-default); --_active-bg: var(--lt-bg-subtle); } :host([appearance='outlined'][variant='success']) { --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_hover-color: var(--lt-text-success); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_hover-color: var(--lt-text-warning); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_hover-color: var(--lt-text-error); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_hover-color: var(--lt-text-info); --_active-bg: var(--lt-bg-info-subtle); } /* bordered — adds a border on top of whatever appearance is active; a no-op on outlined, which already sets the same border color. */ :host([bordered][variant='primary']) { --_border-color: var(--lt-border-primary-strong); } :host([bordered][variant='secondary']) { --_border-color: var(--lt-border-secondary-strong); } :host([bordered][variant='neutral']) { --_border-color: var(--lt-border-strong); } :host([bordered][variant='success']) { --_border-color: var(--lt-border-success-strong); } :host([bordered][variant='warning']) { --_border-color: var(--lt-border-warning-strong); } :host([bordered][variant='error']) { --_border-color: var(--lt-border-error-strong); } :host([bordered][variant='info']) { --_border-color: var(--lt-border-info-strong); } /* round shape */ :host([round]) [part='base'] { border-radius: 50%; } `"
+          "default": "css` :host { display: inline-flex; /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-subtle); --_bg: transparent; --_border-color: transparent; --_hover-bg: var(--lt-bg-subtle); --_hover-color: var(--lt-text-default); --_active-bg: var(--lt-bg-subtle); } [part='base'] { align-items: center; background: var(--lt-icon-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-icon-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-icon-button-color, var(--_color)); cursor: pointer; display: inline-flex; justify-content: center; padding: 0; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; user-select: none; } [part='base']:hover:not([disabled]) { background: var(--lt-icon-button-hover-bg, var(--_hover-bg)); color: var(--lt-icon-button-hover-color, var(--lt-icon-button-color, var(--_hover-color))); } [part='base']:active { transform: translateY(1px); } [part='base']:active:not([disabled]) { background: var(--lt-icon-button-hover-bg, var(--_active-bg)); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled] { cursor: not-allowed; opacity: 0.5; pointer-events: none; transform: none; } a[part='base'] { text-decoration: none; } /* sizes */ :host([size='sm']) [part='base'] { height: 28px; width: 28px; } :host([size='md']) [part='base'] { height: 36px; width: 36px; } :host([size='lg']) [part='base'] { height: 44px; width: 44px; } /* ── ghost ────────────────────────────────────────────────── */ :host([appearance='ghost'][variant='primary']) { --_color: var(--lt-text-primary); --_hover-bg: var(--lt-bg-primary-subtle); --_hover-color: var(--lt-text-primary); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='ghost'][variant='secondary']) { --_color: var(--lt-text-secondary); --_hover-bg: var(--lt-bg-secondary-subtle); --_hover-color: var(--lt-text-secondary); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='ghost'][variant='success']) { --_color: var(--lt-text-success); --_hover-bg: var(--lt-bg-success-subtle); --_hover-color: var(--lt-text-success); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='ghost'][variant='warning']) { --_color: var(--lt-text-warning); --_hover-bg: var(--lt-bg-warning-subtle); --_hover-color: var(--lt-text-warning); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='ghost'][variant='error']) { --_color: var(--lt-text-error); --_hover-bg: var(--lt-bg-error-subtle); --_hover-color: var(--lt-text-error); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='ghost'][variant='info']) { --_color: var(--lt-text-info); --_hover-bg: var(--lt-bg-info-subtle); --_hover-color: var(--lt-text-info); --_active-bg: var(--lt-bg-info-subtle); } /* ── filled ───────────────────────────────────────────────── */ :host([appearance='filled'][variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_hover-color: var(--lt-text-on-primary); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([appearance='filled'][variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_hover-color: var(--lt-text-on-secondary); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([appearance='filled'][variant='neutral']) { --_bg: var(--lt-interactive-neutral-bg); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-interactive-neutral-bg-hover); --_hover-color: var(--lt-color-neutral-50); --_active-bg: var(--lt-interactive-neutral-bg-active); } :host([appearance='filled'][variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_hover-color: var(--lt-text-on-success); --_active-bg: var(--lt-interactive-success-bg-active); } :host([appearance='filled'][variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_hover-color: var(--lt-text-on-warning); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([appearance='filled'][variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_hover-color: var(--lt-text-on-error); --_active-bg: var(--lt-interactive-error-bg-active); } :host([appearance='filled'][variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_hover-color: var(--lt-text-on-info); --_active-bg: var(--lt-interactive-info-bg-active); } /* ── outlined ─────────────────────────────────────────────── */ :host([appearance='outlined'][variant='primary']) { --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_hover-color: var(--lt-text-primary); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_hover-color: var(--lt-text-secondary); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_hover-color: var(--lt-text-default); --_active-bg: var(--lt-bg-subtle); } :host([appearance='outlined'][variant='success']) { --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_hover-color: var(--lt-text-success); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_hover-color: var(--lt-text-warning); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_hover-color: var(--lt-text-error); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_hover-color: var(--lt-text-info); --_active-bg: var(--lt-bg-info-subtle); } /* bordered — adds a border on top of whatever appearance is active; a no-op on outlined, which already sets the same border color. */ :host([bordered][variant='primary']) { --_border-color: var(--lt-border-primary-strong); } :host([bordered][variant='secondary']) { --_border-color: var(--lt-border-secondary-strong); } :host([bordered][variant='neutral']) { --_border-color: var(--lt-border-strong); } :host([bordered][variant='success']) { --_border-color: var(--lt-border-success-strong); } :host([bordered][variant='warning']) { --_border-color: var(--lt-border-warning-strong); } :host([bordered][variant='error']) { --_border-color: var(--lt-border-error-strong); } :host([bordered][variant='info']) { --_border-color: var(--lt-border-info-strong); } /* round shape */ :host([round]) [part='base'] { border-radius: 50%; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [part='base'] { transition: none; } } `"
         }
       ],
       "exports": [
@@ -4336,6 +4952,16 @@
               "default": "false",
               "description": "Whether the button is disabled."
             },
+            {
+              "kind": "method",
+              "name": "firstUpdated",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_blockClickWhileDisabled",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "href",
@@ -4443,7 +5069,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A thin wrapper around `<img>` with rounded corners, responsive fill support,\nnative lazy loading, and an error fallback mechanism.\n\nNative `load`/`error` events don't cross the shadow boundary, so they are\nre-dispatched as composed `lt-load`/`lt-error` custom events. When a load\nfails, the `fallback` slot is shown in place of the broken image; setting a\nnew `src` retries.",
+          "description": "A thin wrapper around `<img>` with rounded corners, responsive fill support,\nnative lazy loading, and an error fallback mechanism.\n\nThe inner `<img>`'s `load`/`error` events don't leave the shadow root, so they\nare re-dispatched on the host under the same native names, with the `src` in\n`detail`. Like the native ones they don't bubble, so listen on `<lt-image>`\nitself. When a load fails, the `fallback` slot is shown in place of the broken\nimage; setting a new `src` retries.",
           "name": "Image",
           "cssParts": [
             {
@@ -4540,19 +5166,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "_dispatch",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "'lt-load' | 'lt-error'"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "_handleLoad",
@@ -4570,24 +5183,18 @@
           ],
           "events": [
             {
-              "name": "name",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
+              "name": "load",
               "type": {
                 "text": "CustomEvent<{ src: string }>"
               },
-              "description": "Fired when the image loads successfully",
-              "name": "lt-load"
+              "description": "Fired when the image loads successfully"
             },
             {
+              "name": "error",
               "type": {
                 "text": "CustomEvent<{ src: string }>"
               },
-              "description": "Fired when the image fails to load",
-              "name": "lt-error"
+              "description": "Fired when the image fails to load"
             }
           ],
           "superclass": {
@@ -4763,7 +5370,7 @@
         {
           "kind": "variable",
           "name": "listItemStyles",
-          "default": "css` :host { display: list-item; margin: 0; padding: 0; } .inner { display: flex; align-items: flex-start; gap: var(--lt-spacing-2); } /* Keep the slotted content as a single flex item so rich inline markup (strong, code, multiple text runs) flows as normal prose instead of each node becoming its own shrunk flex item. min-width: 0 lets it wrap. */ .content { flex: 1 1 auto; min-width: 0; } lt-icon { flex-shrink: 0; color: var(--lt-color-neutral-500); font-size: inherit; } /* interactive rows — native button/anchor reset + states */ a.inner, button.inner { background: transparent; border: none; border-radius: var(--lt-border-radius); box-sizing: border-box; color: inherit; cursor: pointer; font: inherit; margin: 0; padding: var(--lt-spacing-2); text-align: start; text-decoration: none; transition: background-color 120ms ease; width: 100%; } a.inner:hover:not([aria-disabled='true']), button.inner:hover:not([disabled]) { background: var(--lt-list-item-hover-bg, var(--lt-bg-subtle)); } a.inner:active:not([aria-disabled='true']), button.inner:active:not([disabled]) { background: var(--lt-list-item-active-bg, var(--lt-bg-surface)); } a.inner:focus-visible, button.inner:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: -3px; } button.inner[disabled], a.inner[aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; pointer-events: none; } `"
+          "default": "css` :host { display: list-item; margin: 0; padding: 0; } .inner { display: flex; align-items: flex-start; gap: var(--lt-spacing-2); } /* Keep the slotted content as a single flex item so rich inline markup (strong, code, multiple text runs) flows as normal prose instead of each node becoming its own shrunk flex item. min-width: 0 lets it wrap. */ .content { flex: 1 1 auto; min-width: 0; } lt-icon { flex-shrink: 0; color: var(--lt-text-muted); font-size: inherit; } /* interactive rows — native button/anchor reset + states */ a.inner, button.inner { background: transparent; border: none; border-radius: var(--lt-border-radius); box-sizing: border-box; color: inherit; cursor: pointer; font: inherit; margin: 0; padding: var(--lt-spacing-2); text-align: start; text-decoration: none; transition: background-color 120ms ease; width: 100%; } a.inner:hover:not([aria-disabled='true']), button.inner:hover:not([disabled]) { background: var(--lt-list-item-hover-bg, var(--lt-bg-subtle)); } a.inner:active:not([aria-disabled='true']), button.inner:active:not([disabled]) { background: var(--lt-list-item-active-bg, var(--lt-bg-surface)); } a.inner:focus-visible, button.inner:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: -3px; } button.inner[disabled], a.inner[aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; pointer-events: none; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { a.inner, button.inner { transition: none; } } `"
         }
       ],
       "exports": [
@@ -4898,7 +5505,7 @@
         {
           "kind": "variable",
           "name": "listStyles",
-          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); --list-marker-color: var(--lt-color-neutral-500); } [part='list'] { margin: 0; padding: 0 0 0 var(--lt-spacing-5); list-style-position: outside; list-style-type: disc; color: var(--lt-text-default); } :host([type='ordered']) [part='list'] { list-style-type: decimal; } ::slotted(li), ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-2); } ::slotted(li:last-child), ::slotted(lt-list-item:last-child) { margin-bottom: 0; } ::slotted(lt-list) { display: block; margin-top: var(--lt-spacing-2); margin-bottom: var(--lt-spacing-2); padding-left: var(--lt-spacing-5); font-size: 0.9em; } /* No marker */ :host([no-marker]) [part='list'] { list-style: none; padding-left: 0; } /* Divider */ :host([divider]) ::slotted(lt-list-item) { border-bottom: 1px solid var(--lt-border-default); padding-bottom: var(--lt-spacing-2); } :host([divider]) ::slotted(lt-list-item:last-child) { border-bottom: none; padding-bottom: 0; } ::slotted(lt-list:first-child) { margin-top: var(--lt-spacing-2); } ::slotted(lt-list:last-child) { margin-bottom: 0; } [part='list'] ::slotted(li)::marker { color: var(--list-marker-color); } /* Size variants */ :host([size='sm']) [part='list'] { font-size: 0.875rem; line-height: 1.5; } :host([size='sm']) ::slotted(li), :host([size='sm']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-1); } :host([size='md']) [part='list'] { font-size: 1rem; line-height: 1.6; } :host([size='md']) ::slotted(li), :host([size='md']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-2); } :host([size='lg']) [part='list'] { font-size: 1.125rem; line-height: 1.7; } :host([size='lg']) ::slotted(li), :host([size='lg']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-3); } `"
+          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); --list-marker-color: var(--lt-color-neutral-500); } [part='list'] { margin: 0; padding-block: 0; padding-inline: var(--lt-spacing-5) 0; list-style-position: outside; list-style-type: disc; color: var(--lt-text-default); } :host([type='ordered']) [part='list'] { list-style-type: decimal; } ::slotted(li), ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-2); } ::slotted(li:last-child), ::slotted(lt-list-item:last-child) { margin-bottom: 0; } ::slotted(lt-list) { display: block; margin-top: var(--lt-spacing-2); margin-bottom: var(--lt-spacing-2); padding-inline-start: var(--lt-spacing-5); font-size: 0.9em; } /* No marker */ :host([no-marker]) [part='list'] { list-style: none; padding-inline-start: 0; } /* Divider */ :host([divider]) ::slotted(lt-list-item) { border-bottom: 1px solid var(--lt-border-default); padding-bottom: var(--lt-spacing-2); } :host([divider]) ::slotted(lt-list-item:last-child) { border-bottom: none; padding-bottom: 0; } ::slotted(lt-list:first-child) { margin-top: var(--lt-spacing-2); } ::slotted(lt-list:last-child) { margin-bottom: 0; } [part='list'] ::slotted(li)::marker { color: var(--list-marker-color); } /* Size variants */ :host([size='sm']) [part='list'] { font-size: 0.875rem; line-height: 1.5; } :host([size='sm']) ::slotted(li), :host([size='sm']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-1); } :host([size='md']) [part='list'] { font-size: 1rem; line-height: 1.6; } :host([size='md']) ::slotted(li), :host([size='md']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-2); } :host([size='lg']) [part='list'] { font-size: 1.125rem; line-height: 1.7; } :host([size='lg']) ::slotted(li), :host([size='lg']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-3); } `"
         }
       ],
       "exports": [
@@ -5051,7 +5658,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A single navigation item. Can render as an anchor link or a collapsible group header\nwhen children are slotted.\n\nWhen slotted inside `<lt-nav orientation=\"horizontal\">`, top-level items lay out in a row\nand nested children appear as a dropdown panel. In vertical mode, nested children\ncollapse/expand inline.\n\nSPA router integration: `nav-item-click` is cancelable — call `event.preventDefault()`\nto stop the anchor's native navigation, navigate programmatically, and drive the\nhighlighted item via the `active` property (which also sets `aria-current=\"page\"`).",
+          "description": "A single navigation item. Can render as an anchor link or a collapsible group header\nwhen children are slotted.\n\nWhen slotted inside `<lt-nav orientation=\"horizontal\">`, top-level items lay out in a row\nand nested children appear as a dropdown panel. In vertical mode, nested children\ncollapse/expand inline.\n\nSPA router integration: items use the native `click` — listen for it on the `<lt-nav>` (or the item),\ncall `event.preventDefault()` to stop the anchor's native navigation, and read the item from\n`event.target.closest('lt-nav-item')` (its `href` and `label`). Modifier keys (`event.metaKey`, …) come\nthrough as on any link. Drive the highlighted item via the `active` property (which also sets\n`aria-current=\"page\"`).",
           "name": "NavItem",
           "slots": [
             {
@@ -5167,6 +5774,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_syncInitialHeight",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "updated",
@@ -5210,18 +5822,11 @@
           ],
           "events": [
             {
-              "name": "nav-item-click",
-              "type": {
-                "text": "CustomEvent<{ href: string; label: string }>"
-              },
-              "description": "Fired when the item is clicked (even when it has no href). Cancelable: `preventDefault()` stops the native anchor navigation so an SPA router can handle it."
-            },
-            {
-              "name": "nav-collapse",
+              "name": "toggle",
               "type": {
                 "text": "CustomEvent<{ open: boolean }>"
               },
-              "description": "Fired when a collapsible item is opened or closed."
+              "description": "Fired when a collapsible item is opened or closed, like the native `toggle` of `<details>`."
             }
           ],
           "superclass": {
@@ -5255,7 +5860,7 @@
         {
           "kind": "variable",
           "name": "navItemStyles",
-          "default": "css` :host { display: contents; } .item-root { position: relative; display: flex; flex-direction: column; } /* Trigger row: link + optional chevron */ .item-trigger { display: flex; align-items: center; gap: var(--lt-spacing-2); width: 100%; padding: var(--lt-nav-item-padding, var(--lt-spacing-2) var(--lt-spacing-3)); border-radius: 6px; border: none; background: none; cursor: pointer; color: inherit; font-size: var(--lt-nav-item-font-size, 0.9375rem); font-family: inherit; text-decoration: none; text-align: left; transition: background 120ms; white-space: nowrap; } .item-trigger:hover { background: color-mix(in srgb, currentColor 10%, transparent); } .item-trigger:active { background: color-mix(in srgb, currentColor 18%, transparent); } :host([active]) .item-trigger { background: var(--lt-nav-item-active-bg, color-mix(in srgb, currentColor 15%, transparent)); color: var(--lt-nav-item-active-color, inherit); font-weight: 600; } :host([disabled]) .item-trigger { opacity: 0.4; pointer-events: none; } .label { flex: 1; } .icon-start { flex-shrink: 0; color: inherit; } /* Chevron rotates when open */ .chevron { flex-shrink: 0; color: inherit; opacity: 0.6; transition: transform 180ms ease; } :host([open]) .chevron { transform: rotate(180deg); } /* Collapsible children */ .children { overflow: hidden; height: 0; transition: height 200ms ease; } .children-inner { padding-left: var(--lt-spacing-4); padding-top: var(--lt-spacing-1); padding-bottom: var(--lt-spacing-1); display: flex; flex-direction: column; } /* In horizontal nav, top-level items lay out row-style */ :host([orientation='horizontal']) .item-root { flex-direction: row; align-items: center; } /* Horizontal children drop down as a popover-style panel */ :host([orientation='horizontal']) .children { position: absolute; top: 100%; left: 0; min-width: 160px; background: var(--lt-bg-default); color: var(--lt-color-neutral-700); border: var(--lt-border-width, 1px) solid var(--lt-color-neutral-200); border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05); z-index: 100; height: auto !important; display: none; } :host([orientation='horizontal'][open]) .children { display: block; } :host([orientation='horizontal']) .children-inner { padding: var(--lt-spacing-2); } `"
+          "default": "css` :host { display: contents; } .item-root { position: relative; display: flex; flex-direction: column; } /* Trigger row: link + optional chevron */ .item-trigger { display: flex; align-items: center; gap: var(--lt-spacing-2); width: 100%; padding: var(--lt-nav-item-padding, var(--lt-spacing-2) var(--lt-spacing-3)); border-radius: 6px; border: none; background: none; cursor: pointer; color: inherit; font-size: var(--lt-nav-item-font-size, 0.9375rem); font-family: inherit; text-decoration: none; text-align: start; transition: background 120ms; white-space: nowrap; } .item-trigger:hover { background: color-mix(in srgb, currentColor 10%, transparent); } .item-trigger:active { background: color-mix(in srgb, currentColor 18%, transparent); } :host([active]) .item-trigger { background: var(--lt-nav-item-active-bg, color-mix(in srgb, currentColor 15%, transparent)); color: var(--lt-nav-item-active-color, inherit); font-weight: 600; } :host([disabled]) .item-trigger { opacity: 0.4; pointer-events: none; } .label { flex: 1; } .icon-start { flex-shrink: 0; color: inherit; } /* Chevron rotates when open */ .chevron { flex-shrink: 0; color: inherit; opacity: 0.6; transition: transform 180ms ease; } :host([open]) .chevron { transform: rotate(180deg); } /* Collapsible children */ .children { overflow: hidden; height: 0; transition: height 200ms ease; } .children-inner { padding-inline-start: var(--lt-spacing-4); padding-top: var(--lt-spacing-1); padding-bottom: var(--lt-spacing-1); display: flex; flex-direction: column; } /* In horizontal nav, top-level items lay out row-style */ :host([orientation='horizontal']) .item-root { flex-direction: row; align-items: center; } /* Horizontal children drop down as a popover-style panel */ :host([orientation='horizontal']) .children { position: absolute; top: 100%; inset-inline-start: 0; min-width: 160px; background: var(--lt-bg-default); color: var(--lt-text-neutral); border: var(--lt-border-width, 1px) solid var(--lt-border-default); border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05); z-index: 100; height: auto !important; display: none; } :host([orientation='horizontal'][open]) .children { display: block; } :host([orientation='horizontal']) .children-inner { padding: var(--lt-spacing-2); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .item-trigger, .chevron { transition: none; } /* .children's height transition can't just be removed — nav-item.ts's _handleTransitionEnd() only finalizes the open height to 'auto' (letting it respond to later content changes) once the CSS transition actually completes; transition:none fires no transitionend at all, leaving it stuck at a fixed pixel height forever. A 1ms duration is imperceptible (satisfies the reduced-motion intent) but still fires the event the component depends on — same reasoning as lt-accordion's .content. */ .children { transition: height 1ms; } } `"
         }
       ],
       "exports": [
@@ -5388,7 +5993,7 @@
         {
           "kind": "variable",
           "name": "paginationStyles",
-          "default": "css` :host { display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } nav { align-items: center; display: flex; gap: var(--lt-spacing-1); } button { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 500; justify-content: center; line-height: 1; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; user-select: none; } /* Sizes */ :host([size='sm']) button { font-size: 0.75rem; height: 28px; min-width: 28px; padding: 0 var(--lt-spacing-1); } :host([size='md']) button, :host(:not([size])) button { font-size: 0.8125rem; height: 36px; min-width: 36px; padding: 0 var(--lt-spacing-2); } :host([size='lg']) button { font-size: 0.9375rem; height: 44px; min-width: 44px; padding: 0 var(--lt-spacing-3); } button:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } button[aria-current='page'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-color-primary-700); font-weight: 600; } button.ellipsis { cursor: default; pointer-events: none; } button:disabled { color: var(--lt-color-neutral-400); cursor: not-allowed; } :host([disabled]) button { color: var(--lt-color-neutral-400); cursor: not-allowed; pointer-events: none; } `"
+          "default": "css` :host { display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } nav { align-items: center; display: flex; gap: var(--lt-spacing-1); } button { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 500; justify-content: center; line-height: 1; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; user-select: none; } /* Sizes */ :host([size='sm']) button { font-size: 0.75rem; height: 28px; min-width: 28px; padding: 0 var(--lt-spacing-1); } :host([size='md']) button, :host(:not([size])) button { font-size: 0.8125rem; height: 36px; min-width: 36px; padding: 0 var(--lt-spacing-2); } :host([size='lg']) button { font-size: 0.9375rem; height: 44px; min-width: 44px; padding: 0 var(--lt-spacing-3); } button:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } button[aria-current='page'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-text-primary); font-weight: 600; } button.ellipsis { cursor: default; pointer-events: none; } button:disabled { color: var(--lt-text-disabled); cursor: not-allowed; } :host([disabled]) button { color: var(--lt-text-disabled); cursor: not-allowed; pointer-events: none; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { button { transition: none; } } `"
         }
       ],
       "exports": [
@@ -5453,6 +6058,44 @@
               "default": "false",
               "description": "Disable all controls."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<PaginationLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (nav landmark label, control button labels), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "PaginationLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_total",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "`total-pages` as a whole number >= 1: NaN, zero and negatives collapse to a single page.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_current",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "`page` clamped into 1.._total, so `page=\"99\"` on a 10-page set is the last page, not \"no page selected\".",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_go",
@@ -5547,7 +6190,7 @@
         {
           "kind": "variable",
           "name": "progressStyles",
-          "default": "css` :host { display: block; } :host { --_fill-color: var(--lt-interactive-primary-bg); } :host([variant='primary']) { --_fill-color: var(--lt-interactive-primary-bg); } :host([variant='success']) { --_fill-color: var(--lt-interactive-success-bg); } :host([variant='warning']) { --_fill-color: var(--lt-interactive-warning-bg); } :host([variant='error']) { --_fill-color: var(--lt-interactive-error-bg); } :host([variant='neutral']) { --_fill-color: var(--lt-color-neutral-600); } [part='track'] { background: var(--lt-progress-track-color, var(--lt-color-neutral-200)); border-radius: 999px; overflow: hidden; width: 100%; } [part='fill'] { background: var(--lt-progress-color, var(--_fill-color)); border-radius: 999px; height: 100%; transition: width 300ms ease; } /* ── Sizes ──────────────────────────────────────────────────────────────── */ :host([size='sm']) [part='track'] { height: var(--lt-progress-height, 4px); } :host([size='md']) [part='track'] { height: var(--lt-progress-height, 8px); } :host([size='lg']) [part='track'] { height: var(--lt-progress-height, 12px); } /* ── Indeterminate ──────────────────────────────────────────────────────── */ :host([indeterminate]) [part='fill'] { animation: indeterminate 1.5s ease-in-out infinite; width: 40%; } @keyframes indeterminate { 0% { transform: translateX(-250%); } 100% { transform: translateX(350%); } } @media (prefers-reduced-motion: reduce) { [part='fill'] { transition: none; } :host([indeterminate]) [part='fill'] { animation: none; width: 100%; } } `"
+          "default": "css` :host { display: block; } :host { --_fill-color: var(--lt-interactive-primary-bg); } :host([variant='primary']) { --_fill-color: var(--lt-interactive-primary-bg); } :host([variant='success']) { --_fill-color: var(--lt-interactive-success-bg); } :host([variant='warning']) { --_fill-color: var(--lt-interactive-warning-bg); } :host([variant='error']) { --_fill-color: var(--lt-interactive-error-bg); } :host([variant='neutral']) { --_fill-color: var(--lt-interactive-neutral-bg); } [part='track'] { background: var(--lt-progress-track-color, var(--lt-bg-overlay)); border-radius: 999px; overflow: hidden; width: 100%; } [part='fill'] { background: var(--lt-progress-color, var(--_fill-color)); border-radius: 999px; height: 100%; transition: width 300ms ease; } /* ── Sizes ──────────────────────────────────────────────────────────────── */ :host([size='sm']) [part='track'] { height: var(--lt-progress-height, 4px); } :host([size='md']) [part='track'] { height: var(--lt-progress-height, 8px); } :host([size='lg']) [part='track'] { height: var(--lt-progress-height, 12px); } /* ── Indeterminate ──────────────────────────────────────────────────────── */ :host([indeterminate]) [part='fill'] { animation: indeterminate 1.5s ease-in-out infinite; width: 40%; } @keyframes indeterminate { 0% { transform: translateX(-250%); } 100% { transform: translateX(350%); } } @media (prefers-reduced-motion: reduce) { [part='fill'] { transition: none; } :host([indeterminate]) [part='fill'] { animation: none; width: 100%; } } /* ── Forced colors (Windows High Contrast) ───────────────────────────────── Under forced-colors, both the track's neutral background and the fill's variant-coloured background are flattened to Canvas, with no border on the track to fall back on — the whole bar disappears. A border on the track (its boundary) plus a Highlight-coloured fill (the OS's own \"active/selected\" system color, exempt from the flattening) keeps the progress amount legible regardless of which variant was set — forced-colors mode overrides variant branding anyway, by design. ───────────────────────────────────────── */ @media (forced-colors: active) { [part='track'] { border: 1px solid CanvasText; } [part='fill'] { background: Highlight; } } `"
         }
       ],
       "exports": [
@@ -5612,6 +6255,24 @@
               "default": "''",
               "description": "Accessible label for screen readers."
             },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The value `value` is measured against (0–100 becomes 0–max). Ignored when `indeterminate` is true."
+            },
+            {
+              "kind": "field",
+              "name": "valueText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Overrides the spoken value with a custom string (e.g. \"3 of 5 steps\") for scales a bare percentage\ndoesn't describe well. Leave unset to let `aria-valuenow`/`aria-valuemax` speak for themselves."
+            },
             {
               "kind": "field",
               "name": "indeterminate",
@@ -5621,6 +6282,11 @@
               "default": "false",
               "description": "When true the bar animates continuously without a set value."
             },
+            {
+              "kind": "method",
+              "name": "firstUpdated",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "render"
@@ -5675,7 +6341,7 @@
         {
           "kind": "variable",
           "name": "radioGroupStyles",
-          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .radio-group { display: flex; flex-direction: column; gap: var(--lt-spacing-2); } .label { color: var(--lt-text-default); margin-bottom: var(--lt-spacing-1); } .required-indicator { color: var(--lt-color-error-500); margin-left: var(--lt-spacing-1); } .radios-container { display: flex; gap: var(--lt-spacing-3); } :host([orientation='vertical']) .radios-container { flex-direction: column; } :host([orientation='horizontal']) .radios-container { flex-direction: row; flex-wrap: wrap; } .helper-text { color: var(--lt-text-subtle); margin-top: var(--lt-spacing-1); } .helper-text::part(base) { font-weight: 200; } :host([error]) .helper-text { color: var(--lt-text-error); } `"
+          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .radio-group { display: flex; flex-direction: column; gap: var(--lt-spacing-2); } .label { color: var(--lt-text-default); margin-bottom: var(--lt-spacing-1); } .required-indicator { color: var(--lt-text-error); margin-inline-start: var(--lt-spacing-1); } .radios-container { display: flex; gap: var(--lt-spacing-3); } :host([orientation='vertical']) .radios-container { flex-direction: column; } :host([orientation='horizontal']) .radios-container { flex-direction: row; flex-wrap: wrap; } .helper-text { color: var(--lt-text-subtle); margin-top: var(--lt-spacing-1); } .helper-text::part(base) { font-weight: 200; } :host([error]) .helper-text { color: var(--lt-text-error); } `"
         }
       ],
       "exports": [
@@ -5746,14 +6412,21 @@
               "default": "'vertical'",
               "description": "Layout orientation of the radio buttons."
             },
+            {
+              "kind": "field",
+              "name": "_fieldIds",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Helper text displayed below the radio group.",
+              "default": "''"
+            },
             {
               "kind": "field",
               "name": "helperText",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Helper text displayed below the radio group."
+              "default": "''"
             },
             {
               "kind": "field",
@@ -5784,9 +6457,10 @@
             },
             {
               "kind": "field",
-              "name": "_attached",
+              "name": "_radioObserver",
               "privacy": "private",
-              "default": "new WeakSet<Radio>()"
+              "readonly": true,
+              "default": "new MutationObserver(() => this._syncRadios())"
             },
             {
               "kind": "method",
@@ -5795,13 +6469,28 @@
             {
               "kind": "method",
               "name": "_syncRadios",
-              "privacy": "private"
+              "privacy": "private",
+              "description": "Wires each radio's `name`, roving tabindex, and listeners, and drives `checked` from this group's `value` —\nthe direction a consumer setting `group.value = '…'` needs, since that's a plain property assignment on the\ngroup, not a native input event any individual radio would otherwise react to."
+            },
+            {
+              "kind": "method",
+              "name": "_select",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "radio",
+                  "type": {
+                    "text": "Radio"
+                  }
+                }
+              ],
+              "description": "Selects a radio (used by both the native-change and keyboard-navigation handlers below)."
             },
             {
               "kind": "field",
               "name": "handleRadioChange",
               "privacy": "private",
-              "description": "Handles change events from individual radio buttons.\nUpdates the group value and ensures only one radio is checked.",
+              "description": "Handles change events from individual radio buttons.",
               "parameters": [
                 {
                   "description": "The change event from a radio button",
@@ -5809,12 +6498,32 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "handleRadioKeydown",
+              "privacy": "private",
+              "description": "Arrow keys move the roving tab stop and, per the native radiogroup's automatic-activation model, select the\nradio moved to — matching a real `<input type=\"radio\">` group, where arrowing both moves focus and checks\nthe newly-focused button. All four directions move (Right/Down forward, Left/Up back), disabled radios are\nskipped entirely, and it wraps at both ends."
+            },
             {
               "kind": "method",
               "name": "handleSlotChange",
               "privacy": "private",
               "description": "Handles slot changes to update radios when content changes."
             },
+            {
+              "kind": "method",
+              "name": "updated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "Map<string, unknown>"
+                  }
+                }
+              ],
+              "description": "A group `value` set by the consumer (`group.value = '…'`) is a plain property assignment — it doesn't pass\nthrough any radio's own change handling, so this is what drives `checked` on the radios to match it."
+            },
             {
               "kind": "method",
               "name": "render"
@@ -5822,11 +6531,11 @@
           ],
           "events": [
             {
+              "name": "change",
               "type": {
                 "text": "CustomEvent<{value: string}>"
               },
-              "description": "Dispatched when a radio in the group is selected",
-              "name": "change"
+              "description": "Dispatched when a radio in the group is selected"
             }
           ],
           "superclass": {
@@ -5894,7 +6603,7 @@
         {
           "kind": "variable",
           "name": "radioStyles",
-          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .radio-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } .radio-container { display: inline-flex; position: relative; } :host([label-position='left']) .radio-wrapper { flex-direction: row-reverse; } :host([disabled]) .radio-wrapper { cursor: not-allowed; opacity: 0.6; } input[type='radio'] { appearance: none; border-radius: 50%; border: 2px solid var(--lt-border-strong); cursor: pointer; flex-shrink: 0; margin: 0; position: relative; transition: background-color 120ms ease, border-color 120ms ease; } input[type='radio']:hover:not(:disabled) { border-color: var(--lt-color-neutral-600); } input[type='radio']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='radio']:disabled { cursor: not-allowed; } .dot { background: white; border-radius: 50%; display: none; pointer-events: none; position: absolute; } input[type='radio']:checked ~ .dot { display: block; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='radio'] { height: 16px; width: 16px; } :host([size='sm']) .dot { height: 8px; width: 8px; left: 4px; top: 4px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='radio'] { height: 20px; width: 20px; } :host([size='md']) .dot { height: 10px; width: 10px; left: 5px; top: 5px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='radio'] { height: 24px; width: 24px; } :host([size='lg']) .dot { height: 12px; width: 12px; left: 6px; top: 6px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='radio']:checked { background: var(--lt-interactive-primary-bg); border-color: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); border-color: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='radio']:checked { background: var(--lt-interactive-secondary-bg); border-color: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); border-color: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='radio']:checked { background: var(--lt-interactive-success-bg); border-color: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); border-color: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='radio']:checked { background: var(--lt-interactive-error-bg); border-color: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); border-color: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='radio']:checked { background: var(--lt-interactive-info-bg); border-color: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); border-color: var(--lt-interactive-info-bg-hover); } `"
+          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .radio-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } .radio-container { display: inline-flex; position: relative; } :host([label-position='left']) .radio-wrapper { flex-direction: row-reverse; } /* :host(:disabled) — the browser matches this automatically for a form-associated element inside a disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */ :host([disabled]) .radio-wrapper, :host(:disabled) .radio-wrapper { cursor: not-allowed; opacity: 0.6; } input[type='radio'] { appearance: none; border-radius: 50%; border: 2px solid var(--lt-border-strong); cursor: pointer; flex-shrink: 0; margin: 0; position: relative; transition: background-color 120ms ease, border-color 120ms ease; } input[type='radio']:hover:not(:disabled) { border-color: var(--lt-color-neutral-600); } input[type='radio']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='radio']:disabled { cursor: not-allowed; } .dot { background: white; border-radius: 50%; display: none; pointer-events: none; position: absolute; } input[type='radio']:checked ~ .dot { display: block; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='radio'] { height: 16px; width: 16px; } :host([size='sm']) .dot { height: 8px; width: 8px; inset-inline-start: 4px; top: 4px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='radio'] { height: 20px; width: 20px; } :host([size='md']) .dot { height: 10px; width: 10px; inset-inline-start: 5px; top: 5px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='radio'] { height: 24px; width: 24px; } :host([size='lg']) .dot { height: 12px; width: 12px; inset-inline-start: 6px; top: 6px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='radio']:checked { background: var(--lt-interactive-primary-bg); border-color: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); border-color: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='radio']:checked { background: var(--lt-interactive-secondary-bg); border-color: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); border-color: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='radio']:checked { background: var(--lt-interactive-success-bg); border-color: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); border-color: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='radio']:checked { background: var(--lt-interactive-error-bg); border-color: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); border-color: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='radio']:checked { background: var(--lt-interactive-info-bg); border-color: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); border-color: var(--lt-interactive-info-bg-hover); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { input[type='radio'] { transition: none; } } /* ── Forced colors (Windows High Contrast) ───────────────────────────────── Under forced-colors, any author background-color (including every variant's token-resolved fill above) is flattened to Canvas — the checked indicator is a plain background:white .dot with no border of its own, so it disappears into the input's own (also-flattened) background, leaving checked and unchecked visually identical. System color keywords are exempt from that flattening and always resolve to the OS's own guaranteed-contrasting palette, regardless of which variant was selected — Highlight/HighlightText is the canonical \"selected state\" pairing (the same pair the OS uses for native text selection), unaffected by this component's own --lt-* tokens, which forced-colors mode is specifically overriding. !important is needed since a variant rule like :host([variant='primary']) input:checked outranks a bare input[type='radio']:checked in specificity — this is the standard, accepted use of !important for a forced-colors override (overriding the page's own author styling is the entire point). ─────────────────── */ @media (forced-colors: active) { input[type='radio']:checked { background: Highlight !important; border-color: Highlight !important; } .dot { background: HighlightText !important; } } `"
         }
       ],
       "exports": [
@@ -5932,6 +6641,15 @@
               "static": true,
               "default": "true"
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
             {
               "kind": "field",
               "name": "_internals",
@@ -5940,6 +6658,44 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_group",
+              "type": {
+                "text": "Set<Radio> | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.checked)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
+            {
+              "kind": "method",
+              "name": "willUpdate",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "PropertyValues<this>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_joinGroup",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -5965,7 +6721,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the radio is checked."
+              "description": "Whether the radio is checked. Not reflected as an attribute — a native radio's `checked` _content_\nattribute stays fixed at the markup default and never tracks interaction; reflecting it live meant\n`formResetCallback` could no longer tell what the original default was. Read the property, or the `change`\nevent's `detail.checked`, instead of `[checked]`/`hasAttribute('checked')`."
             },
             {
               "kind": "field",
@@ -6021,6 +6777,33 @@
               "default": "''",
               "description": "Value attribute for form submission."
             },
+            {
+              "kind": "field",
+              "name": "tabbable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether this radio is reachable with Tab. Defaults to true for a standalone radio; `lt-radio-group` drives\nthis itself for its managed radios — a roving tabindex (only the checked radio, or the first enabled one,\nis a Tab stop), matching the native radiogroup pattern."
+            },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<RadioLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "RadioLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "updated"
@@ -6029,6 +6812,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -6134,7 +6939,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[ floatingPanelReset, css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); position: relative; width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-2); } label { color: var(--lt-text-default); } .required-indicator { color: var(--lt-color-error-500); margin-left: var(--lt-spacing-1); } .select-container { position: relative; width: 100%; } .select-trigger { align-items: center; background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-sizing: border-box; cursor: pointer; display: flex; font-family: inherit; justify-content: space-between; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; } .select-trigger:hover:not([aria-disabled='true']) { border-color: var(--lt-border-strong); } .select-trigger:focus-visible { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-border-focus); outline: none; } .select-trigger[aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; } .select-value { color: var(--lt-text-default); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select-value.placeholder { color: var(--lt-text-muted); } .icon-end { color: var(--lt-text-subtle); flex-shrink: 0; transition: transform 120ms ease; } :host([open]) .icon-end { transform: rotate(180deg); } .dropdown { display: none; max-height: 300px; z-index: 1000; } .options-container { max-height: 300px; overflow: hidden auto; } .option { align-items: center; background: transparent; border: none; border-radius: var(--lt-border-radius); box-sizing: border-box; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; text-align: left; transition: background-color 80ms ease; width: 100%; } .option:hover:not([disabled]) { background: var(--lt-bg-surface); } .option:focus-visible { background: var(--lt-bg-surface); outline: 2px solid var(--lt-interactive-primary-bg); outline-offset: -2px; } .option[aria-selected='true'] { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); font-weight: 600; } .option[disabled] { color: var(--lt-text-muted); cursor: not-allowed; opacity: 0.6; } .helper-text::part(base) { font-weight: 200; } /* Size variants */ :host([size='sm']) .select-trigger { font-size: 0.875rem; height: 32px; padding: 0 var(--lt-spacing-3); } :host([size='sm']) .option { font-size: 0.875rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([size='md']) .select-trigger { font-size: 1rem; height: 40px; padding: 0 var(--lt-spacing-4); } :host([size='md']) .option { font-size: 1rem; padding: var(--lt-spacing-3) var(--lt-spacing-4); } :host([size='lg']) .select-trigger { font-size: 1.0625rem; height: 48px; padding: 0 var(--lt-spacing-5); } :host([size='lg']) .option { font-size: 1.0625rem; padding: var(--lt-spacing-4) var(--lt-spacing-5); } /* Variant styles */ :host([variant='success']) .select-trigger { border-color: var(--lt-border-success-strong); } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .select-trigger { border-color: var(--lt-border-warning-strong); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } :host([variant='error']) .select-trigger { border-color: var(--lt-border-error-strong); } :host([variant='error']) .helper-text { color: var(--lt-text-error); } :host([variant='default']) .helper-text { color: var(--lt-text-subtle); } ` ]"
+          "default": "[ floatingPanelReset, css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); position: relative; width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-2); } label { color: var(--lt-text-default); } .required-indicator { color: var(--lt-text-error); margin-inline-start: var(--lt-spacing-1); } .select-container { position: relative; width: 100%; } .select-trigger { align-items: center; background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-sizing: border-box; cursor: pointer; display: flex; font-family: inherit; justify-content: space-between; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; } .select-trigger:hover:not([aria-disabled='true']) { border-color: var(--lt-border-strong); } .select-trigger:focus-visible { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-border-focus); outline: none; } .select-trigger[aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; } .select-value { color: var(--lt-text-default); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select-value.placeholder { color: var(--lt-text-muted); } .icon-end { color: var(--lt-text-subtle); flex-shrink: 0; transition: transform 120ms ease; } :host([open]) .icon-end { transform: rotate(180deg); } .dropdown { display: none; max-height: 300px; z-index: 1000; } .options-container { max-height: 300px; overflow: hidden auto; } .option { align-items: center; background: transparent; border: none; border-radius: var(--lt-border-radius); box-sizing: border-box; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; text-align: start; transition: background-color 80ms ease; width: 100%; } .option:hover:not([disabled]) { background: var(--lt-bg-surface); } .option[data-active='true'] { background: var(--lt-bg-surface); outline: 2px solid var(--lt-interactive-primary-bg); outline-offset: -2px; } .option[aria-selected='true'] { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); font-weight: 600; } .option[disabled] { color: var(--lt-text-muted); cursor: not-allowed; opacity: 0.6; } .helper-text::part(base) { font-weight: 200; } /* Size variants */ :host([size='sm']) .select-trigger { font-size: 0.875rem; height: 32px; padding: 0 var(--lt-spacing-3); } :host([size='sm']) .option { font-size: 0.875rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([size='md']) .select-trigger { font-size: 1rem; height: 40px; padding: 0 var(--lt-spacing-4); } :host([size='md']) .option { font-size: 1rem; padding: var(--lt-spacing-3) var(--lt-spacing-4); } :host([size='lg']) .select-trigger { font-size: 1.0625rem; height: 48px; padding: 0 var(--lt-spacing-5); } :host([size='lg']) .option { font-size: 1.0625rem; padding: var(--lt-spacing-4) var(--lt-spacing-5); } /* Variant styles */ :host([variant='success']) .select-trigger { border-color: var(--lt-border-success-strong); } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .select-trigger { border-color: var(--lt-border-warning-strong); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } :host([variant='error']) .select-trigger { border-color: var(--lt-border-error-strong); } :host([variant='error']) .helper-text { color: var(--lt-text-error); } :host([variant='default']) .helper-text { color: var(--lt-text-subtle); } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .select-trigger, .icon-end, .option { transition: none; } } ` ]"
         }
       ],
       "exports": [
@@ -6180,6 +6985,25 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.value)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_uid",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`lt-select-${selectCount++}`"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -6202,10 +7026,28 @@
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "string | string[]"
               },
               "default": "''",
-              "description": "Current selected value."
+              "description": "Current selected value. A string for a single select; with `multiple`, an array of the selected values. Not\nreflected as an attribute — read the property, or the `change` event's `detail.value`, instead of\n`getAttribute('value')`/`[value]` (consistent with the rest of the form controls; see `lt-textfield`'s\nequivalent doc comment for why)."
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allow more than one option to be selected. The option list stays open while picking, and `value` becomes an\narray of the selected values."
+            },
+            {
+              "kind": "field",
+              "name": "_selected",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -6272,14 +7114,42 @@
             },
             {
               "kind": "field",
-              "name": "isOpen",
+              "name": "labels",
               "type": {
-                "text": "boolean"
+                "text": "Partial<SelectLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "SelectLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isOpen",
+              "type": {
+                "text": "boolean"
               },
               "privacy": "private",
               "default": "false",
               "description": "Internal state tracking whether the dropdown is open."
             },
+            {
+              "kind": "field",
+              "name": "activeIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "-1",
+              "description": "Index of the highlighted option, into `enabledOptions` below (not `options`) — the same list the render\nand the keyboard handler both use, so they can never disagree about which option is highlighted (they used\nto: the index came from the enabled-only list, but the previous focus-based highlight came from whichever\noption actually held DOM focus, decided independently)."
+            },
             {
               "kind": "field",
               "name": "_cleanupClickOutside",
@@ -6298,6 +7168,52 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_fieldIds",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "enabledOptions",
+              "type": {
+                "text": "SelectOption[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_idFor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SelectOption"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_preventFocusSteal",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "toggleDropdown",
@@ -6351,6 +7267,18 @@
               },
               "description": "Gets the display label for the currently selected value."
             },
+            {
+              "kind": "method",
+              "name": "willUpdate",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "PropertyValues<this>"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "updated",
@@ -6367,6 +7295,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -6383,9 +7333,9 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<{value: string}>"
+                "text": "CustomEvent<{value: string | string[]}>"
               },
-              "description": "Dispatched when the selected value changes",
+              "description": "Dispatched when the selected value changes. With `multiple`, `value` is the array of selected values.",
               "name": "change"
             }
           ],
@@ -6416,9 +7366,9 @@
           "kind": "variable",
           "name": "FORWARDED_ARIA_ATTRIBUTES",
           "type": {
-            "text": "[\n  'aria-pressed',\n  'aria-expanded',\n  'aria-haspopup',\n  'aria-controls',\n  'aria-current'\n]"
+            "text": "[\n  'aria-pressed',\n  'aria-expanded',\n  'aria-haspopup',\n  'aria-controls',\n  'aria-current',\n  'aria-description'\n]"
           },
-          "default": "[ 'aria-pressed', 'aria-expanded', 'aria-haspopup', 'aria-controls', 'aria-current' ]",
+          "default": "[ 'aria-pressed', 'aria-expanded', 'aria-haspopup', 'aria-controls', 'aria-current', 'aria-description' ]",
           "description": "Host `aria-*` attributes forwarded onto the internal native control.\n\nInteractive components render their semantics on a native element inside the\nshadow DOM, so ARIA attributes set on the host (`<lt-button aria-pressed=\"true\">`)\nnever reach the element screen readers actually interact with. Components that\ninstall an AriaForwardingController mirror this documented subset onto\ntheir internal control and keep it in sync as the host attributes change.\n\nNote: `aria-controls` contains an idref — it can only resolve when the referenced\nelement lives in the same tree as the internal control, so cross-shadow references\nare forwarded but may be ignored by assistive technology."
         },
         {
@@ -6494,109 +7444,434 @@
         {
           "kind": "variable",
           "name": "backdropFeatureStyles",
-          "default": "css` :host([backdrop-blur]) .backdrop, :host([backdrop-blur]) [part='overlay'] { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } `"
+          "default": "css` :host([backdrop-blur]) dialog::backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "backdropFeatureStyles",
+          "declaration": {
+            "name": "backdropFeatureStyles",
+            "module": "src/components/shared/backdrop.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/shared/floating.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "openFloating",
+          "return": {
+            "type": {
+              "text": "Promise<() => void>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "reference",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "floating",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "name": "opts",
+              "optional": true,
+              "type": {
+                "text": "FloatingOptions"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "closeFloating",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "floating",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "name": "cleanup",
+              "type": {
+                "text": "(() => void) | null"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "floatingPanelReset",
+          "type": {
+            "text": "CSSResult"
+          },
+          "default": "css` [popover] { border: 0; inset: unset; margin: 0; overflow: visible; padding: 0; position: fixed; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "openFloating",
+          "declaration": {
+            "name": "openFloating",
+            "module": "src/components/shared/floating.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "closeFloating",
+          "declaration": {
+            "name": "closeFloating",
+            "module": "src/components/shared/floating.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "floatingPanelReset",
+          "declaration": {
+            "name": "floatingPanelReset",
+            "module": "src/components/shared/floating.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/shared/form-default.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Captures a form-associated control's initial value the first time it connects — before any user interaction,\nor the control's own reflection, can overwrite it — so `formResetCallback` can restore what the markup\nactually asked for, the way a native `<input>`/`<select>` resets to its `defaultValue`/`defaultChecked`\ninstead of a hard-coded empty one.\n\nA reconnect (an already-upgraded element moved in the DOM) does not recapture: only the very first connect\ncounts as \"the default\", matching a real form control, which keeps its `defaultValue` fixed for its whole\nlifetime regardless of how many times it's detached and reattached.",
+          "name": "FormDefaultController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_get",
+              "type": {
+                "text": "() => T"
+              },
+              "privacy": "private",
+              "default": "get"
+            },
+            {
+              "kind": "field",
+              "name": "_captured",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "T"
+              },
+              "description": "The captured default. Only meaningful once the host has connected at least once."
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FormDefaultController",
+          "declaration": {
+            "name": "FormDefaultController",
+            "module": "src/components/shared/form-default.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/shared/form-disabled.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tracks whether this form control is disabled because it's a descendant of a disabled `<fieldset>` — kept\nseparate from the component's own explicit `disabled` property/attribute, which a consumer controls directly\nand which the fieldset toggling on or off must never overwrite in either direction. This mirrors how a native\n`<input>`'s `.disabled` IDL property only ever reflects its own attribute: a disabled fieldset makes it match\n`:disabled` and stop responding, but never touches the attribute itself, so re-enabling the fieldset can't\naccidentally un-disable an input the page explicitly disabled.\n\nThe browser already makes the host match the `:disabled`/`:enabled` CSS pseudo-classes automatically for any\nform-associated custom element the moment a fieldset ancestor's `disabled` changes — nothing has to be done\nfor that (verified in Chromium). This controller is for the *functional* side, which the platform does not\nwire up on its own: call setFieldsetDisabled from the component's own `formDisabledCallback`, and\ncombine fieldsetDisabled with the component's own `disabled` wherever that gates interaction or the\ninner native control's own `disabled`.",
+          "name": "FormDisabledController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_host",
+              "type": {
+                "text": "ReactiveControllerHost"
+              },
+              "privacy": "private",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "field",
+              "name": "fieldsetDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether an ancestor `<fieldset>` is currently disabled.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "setFieldsetDisabled",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FormDisabledController",
+          "declaration": {
+            "name": "FormDisabledController",
+            "module": "src/components/shared/form-disabled.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/shared/form-field.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createFieldIds",
+          "return": {
+            "type": {
+              "text": "{ helper: string }"
+            }
+          },
+          "description": "Stable id for a field's helper text, so the control can point `aria-describedby` at it. Ids only need to be\nunique within one shadow root, but a counter keeps them unique across the page too."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createFieldIds",
+          "declaration": {
+            "name": "createFieldIds",
+            "module": "src/components/shared/form-field.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/shared/form-validity.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "toValidityFlags",
+          "return": {
+            "type": {
+              "text": "ValidityStateFlags"
+            }
+          },
+          "parameters": [
+            {
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              }
+            }
+          ],
+          "description": "Copies a live `ValidityState` into a plain object with its own enumerable properties, suitable for passing to\n`ElementInternals.setValidity()`.\n\n`ValidityState`'s flags (`valueMissing`, `typeMismatch`, etc.) are getters on its prototype, not own properties\non the instance — spreading it (`{ ...validity }`) or `Object.keys(validity)` sees none of them. Real browsers'\nWebIDL dictionary conversion reads each named member individually, so passing the live object to `setValidity`\nhappens to work there; jsdom's implementation enumerates instead, so it silently sees an empty flags object and\ntreats the control as always valid. Converting explicitly avoids relying on which enumeration strategy the\nruntime uses, and is correct either way."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "backdropFeatureStyles",
+          "name": "toValidityFlags",
           "declaration": {
-            "name": "backdropFeatureStyles",
-            "module": "src/components/shared/backdrop.styles.ts"
+            "name": "toValidityFlags",
+            "module": "src/components/shared/form-validity.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/shared/floating.ts",
+      "path": "src/components/shared/roving.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "openFloating",
+          "name": "enabledItems",
           "return": {
             "type": {
-              "text": "Promise<() => void>"
+              "text": "T[]"
             }
           },
           "parameters": [
             {
-              "name": "reference",
+              "name": "items",
               "type": {
-                "text": "Element"
+                "text": "readonly T[]"
               }
-            },
+            }
+          ],
+          "description": "Items a user can reach with the keyboard: everything not disabled, in order."
+        },
+        {
+          "kind": "function",
+          "name": "rovingTargetOf",
+          "return": {
+            "type": {
+              "text": "T | undefined"
+            }
+          },
+          "parameters": [
             {
-              "name": "floating",
+              "name": "enabled",
               "type": {
-                "text": "HTMLElement"
+                "text": "readonly T[]"
               }
             },
             {
-              "name": "opts",
-              "optional": true,
+              "name": "value",
               "type": {
-                "text": "FloatingOptions"
+                "text": "string"
               }
             }
-          ]
+          ],
+          "description": "The one item that's a Tab stop: the one matching `value`, else the first enabled item."
         },
         {
           "kind": "function",
-          "name": "closeFloating",
+          "name": "stepIndex",
           "return": {
             "type": {
-              "text": "void"
+              "text": "number"
             }
           },
           "parameters": [
             {
-              "name": "floating",
+              "name": "index",
               "type": {
-                "text": "HTMLElement"
+                "text": "number"
               }
             },
             {
-              "name": "cleanup",
+              "name": "length",
               "type": {
-                "text": "(() => void) | null"
+                "text": "number"
+              }
+            },
+            {
+              "name": "delta",
+              "type": {
+                "text": "1 | -1"
               }
             }
-          ]
-        },
-        {
-          "kind": "variable",
-          "name": "floatingPanelReset",
-          "type": {
-            "text": "CSSResult"
-          },
-          "default": "css` [popover] { border: 0; inset: unset; margin: 0; overflow: visible; padding: 0; position: fixed; } `"
+          ],
+          "description": "One step forward or back, wrapping at both ends. An index of -1 (not in the list) steps from the start."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "openFloating",
+          "name": "enabledItems",
           "declaration": {
-            "name": "openFloating",
-            "module": "src/components/shared/floating.ts"
+            "name": "enabledItems",
+            "module": "src/components/shared/roving.ts"
           }
         },
         {
           "kind": "js",
-          "name": "closeFloating",
+          "name": "rovingTargetOf",
           "declaration": {
-            "name": "closeFloating",
-            "module": "src/components/shared/floating.ts"
+            "name": "rovingTargetOf",
+            "module": "src/components/shared/roving.ts"
           }
         },
         {
           "kind": "js",
-          "name": "floatingPanelReset",
+          "name": "stepIndex",
           "declaration": {
-            "name": "floatingPanelReset",
-            "module": "src/components/shared/floating.ts"
+            "name": "stepIndex",
+            "module": "src/components/shared/roving.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/shared/scroll-lock.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "lockBodyScroll",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          }
+        },
+        {
+          "kind": "function",
+          "name": "unlockBodyScroll",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "lockBodyScroll",
+          "declaration": {
+            "name": "lockBodyScroll",
+            "module": "src/components/shared/scroll-lock.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "unlockBodyScroll",
+          "declaration": {
+            "name": "unlockBodyScroll",
+            "module": "src/components/shared/scroll-lock.ts"
           }
         }
       ]
@@ -6623,7 +7898,7 @@
         {
           "kind": "variable",
           "name": "sidepanelStyles",
-          "default": "css` :host { display: contents; } /* ── Overlay ────────────────────────────────────────────────────────────── */ [part='overlay'] { position: fixed; inset: 0; background: rgba(0, 0, 0, var(--lt-sidepanel-overlay-opacity, 0.45)); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } /* ── Panel ──────────────────────────────────────────────────────────────── */ [part='panel'] { position: fixed; background: var(--lt-bg-default); display: flex; flex-direction: column; z-index: 401; pointer-events: none; transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* ── Anchors — initial off-screen positions ─────────────────────────────── */ :host([anchor='left']) [part='panel'], :host(:not([anchor])) [part='panel'] { inset-block: 0; left: 0; transform: translateX(-100%); box-shadow: var(--lt-sidepanel-shadow, 4px 0 24px rgba(0, 0, 0, 0.12)); } :host([anchor='right']) [part='panel'] { inset-block: 0; right: 0; transform: translateX(100%); box-shadow: var(--lt-sidepanel-shadow, -4px 0 24px rgba(0, 0, 0, 0.12)); } :host([anchor='top']) [part='panel'] { inset-inline: 0; top: 0; transform: translateY(-100%); box-shadow: var(--lt-sidepanel-shadow, 0 4px 24px rgba(0, 0, 0, 0.12)); } :host([anchor='bottom']) [part='panel'] { inset-inline: 0; bottom: 0; transform: translateY(100%); box-shadow: var(--lt-sidepanel-shadow, 0 -4px 24px rgba(0, 0, 0, 0.12)); } /* ── Open state — must come after anchors to win the cascade ────────────── */ :host([open]) [part='overlay'] { opacity: 1; pointer-events: auto; } :host([open]) [part='panel'] { transform: translate(0, 0); pointer-events: auto; } /* ── Header ─────────────────────────────────────────────────────────────── */ .header { display: flex; align-items: center; gap: var(--lt-spacing-4); padding: var(--lt-spacing-4) var(--lt-spacing-5); border-bottom: 1px solid var(--lt-border-default); flex-shrink: 0; } .panel-label { flex: 1; color: var(--lt-text-default); } .close-button { flex-shrink: 0; margin-left: auto; } /* ── Body ───────────────────────────────────────────────────────────────── */ .body { flex: 1; overflow-y: auto; padding: var(--lt-spacing-5); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [part='overlay'], [part='panel'] { transition: none; } } `"
+          "default": "css` :host { display: contents; /* translateX/box-shadow offsets have no logical-property equivalent, unlike the inset-inline-* positioning below (which resolves automatically) — these carry the direction-dependent sign instead, flipped under :dir(rtl), so the off-screen slide direction and shadow side both stay correct without any JS reading computed direction at all. */ --_start-x: -100%; --_end-x: 100%; --_dir-sign: 1; } :host(:dir(rtl)) { --_start-x: 100%; --_end-x: -100%; --_dir-sign: -1; } /* ── Panel — the native <dialog> itself now provides the overlay too, via ::backdrop; a closed dialog is display:none automatically, so unlike the old transform-only-hidden div, a closed panel is genuinely non-interactive and out of the accessibility tree, with no extra JS needed (SPL-1). ────────────────────── */ dialog { background: var(--lt-bg-default); border: none; color: var(--lt-text-default); margin: 0; max-height: none; max-width: none; padding: 0; position: fixed; /* display is deliberately NOT set here — a closed dialog must stay display:none (the native default) for SPL-1's fix to actually hold (genuinely non-interactive, out of the accessibility tree); it's set to flex only for the open state, below. display/overlay need transition-behavior: allow-discrete so close() doesn't remove the panel (and its ::backdrop) from rendering instantly, cutting the slide-out transform transition off partway through — same reasoning as lt-dialog. */ transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), display 250ms allow-discrete, overlay 250ms allow-discrete; } dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background-color 200ms ease, display 250ms allow-discrete, overlay 250ms allow-discrete; } dialog[open]::backdrop { background: rgba(0, 0, 0, var(--lt-sidepanel-overlay-opacity, 0.45)); } /* ── Anchors — off-screen positions; dialog[open] (below) is the only thing that moves it on-screen. Fully explicit inset-inline-start/end/top/bottom (not inset-block/inline shorthand, and not omitting the opposite side to fall back to \"auto\") and an explicit height/width — a native <dialog>, even position:fixed, does not stretch to fill top:0/bottom:0 the way a plain block box would; confirmed empirically, it needs an explicit dimension on the axis inset alone doesn't constrain. ────────────────── */ :host([anchor='start']) dialog, :host(:not([anchor])) dialog { top: 0; inset-inline-end: auto; bottom: auto; inset-inline-start: 0; height: 100vh; transform: translateX(var(--_start-x)); box-shadow: var(--lt-sidepanel-shadow, calc(4px * var(--_dir-sign)) 0 24px rgba(0, 0, 0, 0.12)); } :host([anchor='end']) dialog { top: 0; inset-inline-end: 0; bottom: auto; inset-inline-start: auto; height: 100vh; transform: translateX(var(--_end-x)); box-shadow: var(--lt-sidepanel-shadow, calc(-4px * var(--_dir-sign)) 0 24px rgba(0, 0, 0, 0.12)); } :host([anchor='top']) dialog { top: 0; inset-inline-end: auto; bottom: auto; inset-inline-start: 0; width: 100vw; transform: translateY(-100%); box-shadow: var(--lt-sidepanel-shadow, 0 4px 24px rgba(0, 0, 0, 0.12)); } :host([anchor='bottom']) dialog { top: auto; inset-inline-end: auto; bottom: 0; inset-inline-start: 0; width: 100vw; transform: translateY(100%); box-shadow: var(--lt-sidepanel-shadow, 0 -4px 24px rgba(0, 0, 0, 0.12)); } dialog[open] { display: flex; flex-direction: column; } /* The transform override has to be scoped per anchor, not a bare dialog[open] — :host([anchor='end']) dialog (above) has HIGHER specificity than a plain dialog[open] (one more attribute selector, from the :host() argument), so a bare \"dialog[open] { transform: translate(0,0); }\" would lose the cascade to the anchor rule's own closed-position transform regardless of source order, leaving the panel permanently stuck off-screen. Matching each anchor rule's own specificity here guarantees the open state wins. */ :host([anchor='start']) dialog[open], :host(:not([anchor])) dialog[open], :host([anchor='end']) dialog[open], :host([anchor='top']) dialog[open], :host([anchor='bottom']) dialog[open] { transform: translate(0, 0); } /* A newly-shown dialog has no earlier rendered frame to transition from — @starting-style supplies one, per anchor, so the slide-in actually animates instead of snapping straight to the open position. */ @starting-style { :host([anchor='start']) dialog[open], :host(:not([anchor])) dialog[open] { transform: translateX(var(--_start-x)); } :host([anchor='end']) dialog[open] { transform: translateX(var(--_end-x)); } :host([anchor='top']) dialog[open] { transform: translateY(-100%); } :host([anchor='bottom']) dialog[open] { transform: translateY(100%); } } /* ── Header ─────────────────────────────────────────────────────────────── */ .header { display: flex; align-items: center; gap: var(--lt-spacing-4); padding: var(--lt-spacing-4) var(--lt-spacing-5); border-bottom: 1px solid var(--lt-border-default); flex-shrink: 0; } .panel-label { flex: 1; color: var(--lt-text-default); } .close-button { flex-shrink: 0; margin-inline-start: auto; } /* ── Body ───────────────────────────────────────────────────────────────── */ .body { flex: 1; overflow-y: auto; padding: var(--lt-spacing-5); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { dialog, dialog::backdrop { transition: none; } } `"
         }
       ],
       "exports": [
@@ -6643,21 +7918,25 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A slide-in panel anchored to any edge of the viewport, with a backdrop overlay.",
+          "description": "A slide-in panel anchored to any edge of the viewport, built on the native `<dialog>` element — the same\nmigration `lt-dialog` went through (DLG-1..4), applied here to fix the equivalent gaps (SPL-1/2/3): a closed\npanel is no longer just transformed off-screen while staying focusable and exposed to assistive tech\n(`display: none` when closed is native, automatic, and absolute); focus trap and restore on close both come\nfrom `showModal()`/`close()` for free — no manual focus-tracking code needed here at all, unlike `lt-dialog`,\nwhich still carries its own from before that component's migration; Escape closes only the panel that was\nactually focused, not every open panel on the page (no more `window`-level keydown listener); and `close`\nfires consistently from `updated()` whenever `open` becomes `false`, however it happened — not only when\n`hide()` was called directly.",
           "name": "SidePanel",
           "cssProperties": [
             {
               "description": "Overrides the panel's box-shadow, for all anchor positions.",
               "name": "--lt-sidepanel-shadow"
+            },
+            {
+              "description": "Backdrop darkness. Set via the `overlay-opacity` property/attribute instead of this custom property directly, unless you're overriding it from outside the component.",
+              "name": "--lt-sidepanel-overlay-opacity"
             }
           ],
           "cssParts": [
             {
-              "description": "The backdrop scrim behind the panel",
+              "description": "The backdrop scrim behind the panel (the native `<dialog>`'s own `::backdrop`, exposed as a part so consumers can still target it, even though it's not a real light-DOM-visible element)",
               "name": "overlay"
             },
             {
-              "description": "The sliding panel container",
+              "description": "The sliding panel container (the `<dialog>` element itself)",
               "name": "panel"
             },
             {
@@ -6704,8 +7983,8 @@
               "type": {
                 "text": "SidePanelAnchor"
               },
-              "default": "'left'",
-              "description": "Edge from which the panel slides in."
+              "default": "'start'",
+              "description": "Edge from which the panel slides in. `'start'`/`'end'` flip with reading direction."
             },
             {
               "kind": "field",
@@ -6714,7 +7993,7 @@
                 "text": "string"
               },
               "default": "'320px'",
-              "description": "Panel width (left/right anchors) or height (top/bottom anchors)."
+              "description": "Panel width (start/end anchors) or height (top/bottom anchors)."
             },
             {
               "kind": "field",
@@ -6752,6 +8031,50 @@
               "default": "0.45",
               "description": "Backdrop darkness as an alpha value from 0 (transparent) to 1 (opaque)."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<SidePanelLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the close button's accessible name), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "SidePanelLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "dialogElement",
+              "type": {
+                "text": "HTMLDialogElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_scrollLocked",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_skipNextOpenChange",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
             {
               "kind": "method",
               "name": "show",
@@ -6770,15 +8093,9 @@
               "privacy": "public",
               "description": "Toggle the panel open/closed."
             },
-            {
-              "kind": "field",
-              "name": "_handleKeyDown",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "updated",
-              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -6788,11 +8105,31 @@
                 {
                   "name": "changed",
                   "type": {
-                    "text": "PropertyValues"
+                    "text": "PropertyValues<this>"
                   }
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handleOpen",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_handleNativeClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_handleDialogClick",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_offScreenTransform",
@@ -6811,6 +8148,15 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_hasLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_renderHeader",
@@ -6823,7 +8169,11 @@
           ],
           "events": [
             {
-              "description": "Fired when the user requests close (backdrop click, Escape key, or close button)",
+              "description": "Fired when the panel opens",
+              "name": "open"
+            },
+            {
+              "description": "Fired when the panel closes (however it closed — the close button, Escape, a backdrop click, or setting `open` to `false` directly)",
               "name": "close"
             }
           ],
@@ -6876,7 +8226,7 @@
         {
           "kind": "variable",
           "name": "skeletonStyles",
-          "default": "css` :host { display: block; } [part='base'] { background: var(--lt-color-neutral-200); border-radius: var(--lt-border-radius); height: 1.25rem; overflow: hidden; width: 100%; } :host([shape='text']) [part='base'] { border-radius: 4px; height: 1em; } :host([shape='circle']) [part='base'] { border-radius: 50%; height: 2.5rem; width: 2.5rem; } :host([animated]) [part='base'] { animation: shimmer 1.5s ease-in-out infinite; background: linear-gradient( 90deg, var(--lt-color-neutral-100) 25%, var(--lt-color-neutral-200) 50%, var(--lt-color-neutral-100) 75% ); background-size: 200% 100%; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { :host([animated]) [part='base'] { animation: none; background: var(--lt-color-neutral-200); } } `"
+          "default": "css` :host { display: block; } [part='base'] { background: var(--lt-bg-overlay); border-radius: var(--lt-border-radius); height: 1.25rem; overflow: hidden; width: 100%; } :host([shape='text']) [part='base'] { border-radius: 4px; height: 1em; } :host([shape='circle']) [part='base'] { border-radius: 50%; height: 2.5rem; width: 2.5rem; } :host([animated]) [part='base'] { animation: shimmer 1.5s ease-in-out infinite; background: linear-gradient(90deg, var(--lt-bg-surface) 25%, var(--lt-bg-overlay) 50%, var(--lt-bg-surface) 75%); background-size: 200% 100%; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { :host([animated]) [part='base'] { animation: none; background: var(--lt-bg-overlay); } } `"
         }
       ],
       "exports": [
@@ -6995,7 +8345,7 @@
         {
           "kind": "variable",
           "name": "sliderStyles",
-          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } label { color: var(--lt-text-default); display: block; margin-bottom: var(--lt-spacing-1); user-select: none; } .track-wrap { align-items: center; display: flex; width: 100%; } /* lt-tooltip fills the track-wrap so the input stays full-width */ .track-wrap lt-tooltip { display: block; width: 100%; } /* Position the tooltip above the thumb rather than the track center */ lt-tooltip::part(tooltip) { left: var(--_thumb-left, 50%); } input[type='range'] { appearance: none; background: linear-gradient( to right, var(--lt-interactive-primary-bg) var(--lt-slider-fill, 0%), var(--lt-border-strong) var(--lt-slider-fill, 0%) ); border-radius: 9999px; cursor: pointer; display: block; height: var(--lt-slider-track-height, 6px); outline: none; transition: background 0ms; width: 100%; } input[type='range']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 3px; } input[type='range']:hover:not(:disabled) { --lt-interactive-primary-bg: var(--lt-interactive-primary-bg-hover); } input[type='range']:active:not(:disabled) { --lt-interactive-primary-bg: var(--lt-interactive-primary-bg-active); } /* Thumb — WebKit */ input[type='range']::-webkit-slider-thumb { appearance: none; background: var(--lt-interactive-primary-bg); border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; height: var(--lt-slider-thumb-size, 18px); transition: transform 100ms ease; width: var(--lt-slider-thumb-size, 18px); } input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type='range']:active::-webkit-slider-thumb { transform: scale(1.05); } /* Thumb — Firefox */ input[type='range']::-moz-range-thumb { appearance: none; background: var(--lt-interactive-primary-bg); border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; height: var(--lt-slider-thumb-size, 18px); transition: transform 100ms ease; width: var(--lt-slider-thumb-size, 18px); } /* Track — Firefox */ input[type='range']::-moz-range-track { background: var(--lt-border-strong); border-radius: 9999px; height: var(--lt-slider-track-height, 6px); } input[type='range']::-moz-range-progress { background: var(--lt-interactive-primary-bg); border-radius: 9999px; height: var(--lt-slider-track-height, 6px); } /* Sizes */ :host([size='sm']) { --lt-slider-track-height: 4px; --lt-slider-thumb-size: 14px; } :host([size='md']) { --lt-slider-track-height: 6px; --lt-slider-thumb-size: 18px; } :host([size='lg']) { --lt-slider-track-height: 8px; --lt-slider-thumb-size: 22px; } /* Disabled */ :host([disabled]) { opacity: 0.5; } :host([disabled]) input[type='range'] { cursor: not-allowed; pointer-events: none; } `"
+          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } label { color: var(--lt-text-default); display: block; margin-bottom: var(--lt-spacing-1); user-select: none; } .track-wrap { align-items: center; display: flex; width: 100%; } /* lt-tooltip fills the track-wrap so the input stays full-width */ .track-wrap lt-tooltip { display: block; width: 100%; } /* Position the tooltip above the thumb rather than the track center. --_fill is a unitless 0–1 ratio (set from JS on :host) — computed in CSS, not from a JS-read offsetWidth, so it can never drift after a resize or when first shown from display:none (SLD-1). The thumb travels only (100% - thumb size), offset by half the thumb so it's centered on the value, matching a native range input's own thumb geometry. */ lt-tooltip::part(tooltip) { left: calc(var(--_fill, 0) * (100% - var(--lt-slider-thumb-size, 18px)) + var(--lt-slider-thumb-size, 18px) / 2); } input[type='range'] { appearance: none; background: linear-gradient( to right, var(--lt-interactive-primary-bg) calc(var(--_fill, 0) * 100%), var(--lt-border-strong) calc(var(--_fill, 0) * 100%) ); border-radius: 9999px; cursor: pointer; display: block; height: var(--lt-slider-track-height, 6px); outline: none; transition: background 0ms; width: 100%; } input[type='range']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 3px; } input[type='range']:hover:not(:disabled) { --lt-interactive-primary-bg: var(--lt-interactive-primary-bg-hover); } input[type='range']:active:not(:disabled) { --lt-interactive-primary-bg: var(--lt-interactive-primary-bg-active); } /* Thumb — WebKit */ input[type='range']::-webkit-slider-thumb { appearance: none; background: var(--lt-interactive-primary-bg); border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; height: var(--lt-slider-thumb-size, 18px); transition: transform 100ms ease; width: var(--lt-slider-thumb-size, 18px); } input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type='range']:active::-webkit-slider-thumb { transform: scale(1.05); } /* Thumb — Firefox */ input[type='range']::-moz-range-thumb { appearance: none; background: var(--lt-interactive-primary-bg); border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; height: var(--lt-slider-thumb-size, 18px); transition: transform 100ms ease; width: var(--lt-slider-thumb-size, 18px); } /* Track — Firefox */ input[type='range']::-moz-range-track { background: var(--lt-border-strong); border-radius: 9999px; height: var(--lt-slider-track-height, 6px); } input[type='range']::-moz-range-progress { background: var(--lt-interactive-primary-bg); border-radius: 9999px; height: var(--lt-slider-track-height, 6px); } /* Sizes */ :host([size='sm']) { --lt-slider-track-height: 4px; --lt-slider-thumb-size: 14px; } :host([size='md']) { --lt-slider-track-height: 6px; --lt-slider-thumb-size: 18px; } :host([size='lg']) { --lt-slider-track-height: 8px; --lt-slider-thumb-size: 22px; } /* Disabled. :host(:disabled) — the browser matches this automatically for a form-associated element inside a disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */ :host([disabled]), :host(:disabled) { opacity: 0.5; } :host([disabled]) input[type='range'], :host(:disabled) input[type='range'] { cursor: not-allowed; pointer-events: none; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { input[type='range']::-webkit-slider-thumb, input[type='range']::-moz-range-thumb { transition: none; } } /* ── Forced colors (Windows High Contrast) ───────────────────────────────── Under forced-colors, the track's linear-gradient (WebKit/Chromium) and the Firefox ::-moz-range-track/ ::-moz-range-progress pair are all flattened to Canvas, with no border to fall back on — the whole track disappears. Restoring a visible track boundary, plus a solid thumb fill, is enough: the thumb's own position already conveys the value (the primary way a slider communicates it visually), matching how native <input type=\"range\"> itself renders under forced-colors in every engine — no attempt to also recreate the fill-amount gradient with system colors, which native sliders don't do either. System color keywords are exempt from the flattening and always resolve to the OS's own guaranteed-contrasting palette. ─────────────────────────────────────────────────────────────────────────────────────────────── */ @media (forced-colors: active) { input[type='range'] { background: Canvas; border: 1px solid ButtonText; } input[type='range']::-webkit-slider-thumb { background: Highlight; border-color: ButtonText; } input[type='range']::-moz-range-thumb { background: Highlight; border-color: ButtonText; } input[type='range']::-moz-range-track { background: Canvas; border: 1px solid ButtonText; } input[type='range']::-moz-range-progress { background: Highlight; } } `"
         }
       ],
       "exports": [
@@ -7041,6 +8391,18 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.value)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -7096,7 +8458,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0"
+              "default": "0",
+              "description": "Not reflected as an attribute — read the property, or the `change` event's `detail.value`, instead of\n`getAttribute('value')`/`[value]`."
             },
             {
               "kind": "field",
@@ -7118,15 +8481,7 @@
             },
             {
               "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_fillPercent",
+              "name": "_fillRatio",
               "type": {
                 "text": "number"
               },
@@ -7135,13 +8490,34 @@
             },
             {
               "kind": "method",
-              "name": "_thumbSizePx",
+              "name": "_sanitize",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "number"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Clamps to [min, max] and snaps to the nearest step from min, matching how a native <input type=\"range\">\nsanitizes its own value — including when `value`/`min`/`max`/`step` are set programmatically, which a native\nrange input clamps on its own internal value but this component didn't mirror onto its own `value` property\n(SLD-1: `value` wasn't clamped/stepped, so e.g. `value=150` with `max=100` produced a 150% fill and\nsubmitted \"150\" to the form even though the visible thumb was pinned at the end)."
+            },
+            {
+              "kind": "method",
+              "name": "willUpdate",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -7151,6 +8527,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -7255,7 +8653,7 @@
         {
           "kind": "variable",
           "name": "snackbarStyles",
-          "default": "css` :host { display: block; bottom: 24px; left: 50%; max-width: calc(100vw - 48px); opacity: 0; position: fixed; transform: translateX(-50%) translateY(8px); transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; visibility: hidden; width: max-content; z-index: 9000; } :host([open]) { opacity: 1; transform: translateX(-50%) translateY(0); visibility: visible; } /* ── Layout ──────────────────────────────────────────────── */ .inner { align-items: center; color: var(--lt-text-inverse); display: flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; gap: var(--lt-spacing-2); line-height: 1.4; padding: var(--lt-spacing-3) var(--lt-spacing-4); } /* ── Variant text colors ─────────────────────────────────── */ :host([variant='success']) .inner { color: var(--lt-text-on-success); } :host([variant='warning']) .inner { color: var(--lt-text-on-warning); } :host([variant='error']) .inner { color: var(--lt-text-on-error); } :host([variant='info']) .inner { color: var(--lt-text-on-info); } /* ── Variant icon ────────────────────────────────────────── */ .variant-icon { flex-shrink: 0; font-size: 1.125rem; } /* ── Message ─────────────────────────────────────────────── */ .message { flex: 1; } /* ── Action button ───────────────────────────────────────── */ .action { background: transparent; border: none; color: inherit; cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; opacity: 0.85; padding: 0 var(--lt-spacing-1); text-transform: uppercase; } .action:hover { opacity: 1; } /* ── Close button ────────────────────────────────────────── */ .close { align-items: center; background: transparent; border: none; color: inherit; cursor: pointer; display: flex; flex-shrink: 0; justify-content: center; opacity: 0.7; padding: 0; } .close:hover { opacity: 1; } `"
+          "default": "css` /* ── Popover ─────────────────────────────────────────────── The host itself is the popover element (no wrapped child, unlike lt-dialog/lt-sidepanel's inner <dialog>) — the browser's own [popover] UA stylesheet sets inset:0, margin:auto, width/height:fit-content, padding, border, and Canvas colors, all of which are reset below in favor of this component's own bottom-center placement. display is deliberately NOT set on the base rule — a closed (not :popover-open) popover must stay display:none (the native default) so it's genuinely non-interactive and out of the accessibility tree; it's set to block only for the open state, below. display/overlay need transition-behavior: allow-discrete so hidePopover() doesn't remove it from rendering instantly, cutting the exit transition off partway through — same reasoning as lt-dialog. ─────── */ :host { background: transparent; border: none; bottom: 24px; left: 50%; margin: 0; max-width: calc(100vw - 48px); opacity: 0; overflow: visible; padding: 0; position: fixed; right: auto; top: auto; transform: translateX(-50%) translateY(8px); transition: opacity 200ms ease, transform 200ms ease, display 200ms allow-discrete, overlay 200ms allow-discrete; width: max-content; } :host([open]) { display: block; opacity: 1; transform: translateX(-50%) translateY(0); } /* A newly-shown popover has no earlier rendered frame to transition from — @starting-style supplies one so the fade/slide-in actually animates instead of snapping straight to the open position. */ @starting-style { :host([open]) { opacity: 0; transform: translateX(-50%) translateY(8px); } } /* ── Layout ──────────────────────────────────────────────── */ .inner { align-items: center; color: var(--lt-text-inverse); display: flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; gap: var(--lt-spacing-2); line-height: 1.4; padding: var(--lt-spacing-3) var(--lt-spacing-4); } /* ── Variant text colors ─────────────────────────────────── */ :host([variant='success']) .inner { color: var(--lt-text-on-success); } :host([variant='warning']) .inner { color: var(--lt-text-on-warning); } :host([variant='error']) .inner { color: var(--lt-text-on-error); } :host([variant='info']) .inner { color: var(--lt-text-on-info); } /* ── Variant icon ────────────────────────────────────────── */ .variant-icon { flex-shrink: 0; font-size: 1.125rem; } /* ── Message ─────────────────────────────────────────────── */ .message { flex: 1; } /* ── Action button ───────────────────────────────────────── */ .action { background: transparent; border: none; color: inherit; cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; padding: 0 var(--lt-spacing-1); text-transform: uppercase; } /* Text on a coloured fill is never dimmed with opacity (that blends it into the fill and lowers its contrast below whatever the on-colour was picked for), so hover is shown with an underline instead. */ .action:hover { text-decoration: underline; } /* ── Close button ────────────────────────────────────────── */ .close { align-items: center; background: transparent; border: none; color: inherit; cursor: pointer; display: flex; flex-shrink: 0; justify-content: center; min-height: 24px; /* WCAG 2.5.8 */ min-width: 24px; opacity: 0.7; padding: 0; } .close:hover { opacity: 1; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :host { transition: none; } } `"
         }
       ],
       "exports": [
@@ -7275,7 +8673,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Brief notification that appears temporarily at the bottom of the viewport.",
+          "description": "Brief notification that appears temporarily at the bottom of the viewport.\n\nRenders as a native \"manual\" popover on its own host, so it always appears in the top layer — above an open\n`lt-dialog`/`lt-sidepanel`, regardless of z-index, since top-layer content always wins over non-top-layer\ncontent no matter how high (SNK-companion to §6.1's `<dialog>` migration). Confirmed live: fully visible and\nreadable above an open modal. One narrower, unavoidable limitation (confirmed live too, not fixable from this\ncomponent's side): a native `showModal()` makes everything **outside the dialog's own subtree** inert,\nincluding a sibling popover — explicitly setting `inert = false` on the snackbar does not override it. A\nsnackbar shown while a dialog is open is visible but not clickable until the dialog closes; its own\n`duration` timer still fires normally regardless (a plain `setTimeout`, unaffected by inertness), so only a\n`duration=\"0\"` snackbar with a close/action button would be briefly stuck non-interactive in that scenario.",
           "name": "Snackbar",
           "slots": [
             {
@@ -7362,6 +8760,24 @@
               "default": "'filled'",
               "description": "Visual appearance of the internal surface, matching `lt-surface`'s vocabulary."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<SnackbarLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the close button's accessible name), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "SnackbarLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_timer",
@@ -7370,6 +8786,15 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_skipNextOpenChange",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
             {
               "kind": "method",
               "name": "show",
@@ -7394,6 +8819,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_syncPopoverState",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "_startTimer",
@@ -7631,7 +9061,7 @@
         {
           "kind": "variable",
           "name": "surfaceStyles",
-          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .surface { background: var(--lt-surface-bg, var(--lt-bg-subtle)); border-radius: var(--lt-border-radius); box-sizing: border-box; transition: box-shadow 120ms ease, border-color 120ms ease; } /* Elevation variants */ :host([elevation='0']) .surface { box-shadow: var(--lt-elevation-0); } :host([elevation='1']) .surface { box-shadow: var(--lt-elevation-1); } :host([elevation='2']) .surface { box-shadow: var(--lt-elevation-2); } :host([elevation='3']) .surface { box-shadow: var(--lt-elevation-3); } :host([elevation='4']) .surface { box-shadow: var(--lt-elevation-4); } :host([elevation='5']) .surface { box-shadow: var(--lt-elevation-5); } /* Visual appearances */ :host([appearance='filled']) .surface { border: none; } :host([appearance='outlined']) .surface { background: var(--lt-surface-bg, transparent); border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='outlined']:hover) .surface { border-color: var(--lt-border-strong); } `"
+          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .surface { background: var(--lt-surface-bg, var(--lt-bg-subtle)); border-radius: var(--lt-border-radius); box-sizing: border-box; transition: box-shadow 120ms ease, border-color 120ms ease; } /* Elevation variants */ :host([elevation='0']) .surface { box-shadow: var(--lt-elevation-0); } :host([elevation='1']) .surface { box-shadow: var(--lt-elevation-1); } :host([elevation='2']) .surface { box-shadow: var(--lt-elevation-2); } :host([elevation='3']) .surface { box-shadow: var(--lt-elevation-3); } :host([elevation='4']) .surface { box-shadow: var(--lt-elevation-4); } :host([elevation='5']) .surface { box-shadow: var(--lt-elevation-5); } /* Visual appearances */ :host([appearance='filled']) .surface { border: none; } :host([appearance='outlined']) .surface { background: var(--lt-surface-bg, transparent); border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='outlined']:hover) .surface { border-color: var(--lt-border-strong); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .surface { transition: none; } } `"
         }
       ],
       "exports": [
@@ -7763,7 +9193,7 @@
         {
           "kind": "variable",
           "name": "switchStyles",
-          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .switch-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } :host([label-position='left']) .switch-wrapper { flex-direction: row-reverse; } :host([disabled]) .switch-wrapper { cursor: not-allowed; opacity: 0.6; } .switch-container { display: inline-flex; position: relative; } input[type='checkbox'] { appearance: none; background: var(--lt-border-default); border-radius: 999px; cursor: pointer; flex-shrink: 0; margin: 0; position: relative; transition: background-color 200ms ease; } input[type='checkbox']:hover:not(:disabled) { background: var(--lt-border-strong); } input[type='checkbox']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='checkbox']:disabled { cursor: not-allowed; } .thumb { background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); pointer-events: none; position: absolute; transition: left 200ms ease; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='checkbox'] { height: 18px; width: 32px; } :host([size='sm']) .thumb { height: 14px; width: 14px; left: 2px; top: 2px; } :host([size='sm']) input[type='checkbox']:checked ~ .thumb { left: 16px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='checkbox'] { height: 22px; width: 40px; } :host([size='md']) .thumb { height: 18px; width: 18px; left: 2px; top: 2px; } :host([size='md']) input[type='checkbox']:checked ~ .thumb { left: 20px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='checkbox'] { height: 26px; width: 48px; } :host([size='lg']) .thumb { height: 22px; width: 22px; left: 2px; top: 2px; } :host([size='lg']) input[type='checkbox']:checked ~ .thumb { left: 24px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='checkbox']:checked { background: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='checkbox']:checked { background: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='checkbox']:checked { background: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='checkbox']:checked { background: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='checkbox']:checked { background: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); } `"
+          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .switch-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } :host([label-position='left']) .switch-wrapper { flex-direction: row-reverse; } /* :host(:disabled) — the browser matches this automatically for a form-associated element inside a disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */ :host([disabled]) .switch-wrapper, :host(:disabled) .switch-wrapper { cursor: not-allowed; opacity: 0.6; } .switch-container { display: inline-flex; position: relative; } input[type='checkbox'] { appearance: none; background: var(--lt-border-default); border-radius: 999px; cursor: pointer; flex-shrink: 0; margin: 0; position: relative; transition: background-color 200ms ease; } input[type='checkbox']:hover:not(:disabled) { background: var(--lt-border-strong); } input[type='checkbox']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='checkbox']:disabled { cursor: not-allowed; } .thumb { background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); pointer-events: none; position: absolute; transition: left 200ms ease; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='checkbox'] { height: 18px; width: 32px; } :host([size='sm']) .thumb { height: 14px; width: 14px; left: 2px; top: 2px; } :host([size='sm']) input[type='checkbox']:checked ~ .thumb { left: 16px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='checkbox'] { height: 22px; width: 40px; } :host([size='md']) .thumb { height: 18px; width: 18px; left: 2px; top: 2px; } :host([size='md']) input[type='checkbox']:checked ~ .thumb { left: 20px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='checkbox'] { height: 26px; width: 48px; } :host([size='lg']) .thumb { height: 22px; width: 22px; left: 2px; top: 2px; } :host([size='lg']) input[type='checkbox']:checked ~ .thumb { left: 24px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='checkbox']:checked { background: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='checkbox']:checked { background: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='checkbox']:checked { background: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='checkbox']:checked { background: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='checkbox']:checked { background: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { input[type='checkbox'], .thumb { transition: none; } } /* ── Forced colors (Windows High Contrast) ───────────────────────────────── Under forced-colors, every author background-color here (the unchecked track's neutral fill, every variant's checked fill, and the thumb's plain white) is flattened to Canvas — the track has no border of its own to fall back on, and the thumb disappears into it, leaving neither track nor thumb visible at all. System color keywords are exempt from that flattening; Highlight/HighlightText is the canonical OS \"selected state\" pairing, unaffected by which variant was selected (forced-colors overrides that anyway). !important matches every variant's own :checked rule in specificity — standard for a forced-colors override, whose entire point is overriding the page's own author styling. ─────────────────────────────── */ @media (forced-colors: active) { input[type='checkbox'] { border: 1px solid ButtonText; } input[type='checkbox']:checked { background: Highlight !important; border-color: Highlight !important; } .thumb { background: ButtonText; } input[type='checkbox']:checked ~ .thumb { background: HighlightText; } } `"
         }
       ],
       "exports": [
@@ -7809,6 +9239,18 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.checked)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -7834,7 +9276,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the switch is checked (on)."
+              "description": "Whether the switch is checked (on). Not reflected as an attribute — a native checkbox's `checked` _content_\nattribute stays fixed at the markup default and never tracks interaction; reflecting it live meant\n`formResetCallback` could no longer tell what the original default was. Read the property, or the `change`\nevent's `detail.checked`, instead of `[checked]`/`hasAttribute('checked')`."
             },
             {
               "kind": "field",
@@ -7890,6 +9332,24 @@
               "default": "'on'",
               "description": "Value attribute for form submission."
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<SwitchLabels>"
+              },
+              "default": "{}",
+              "description": "Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need."
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "SwitchLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "updated",
@@ -7906,6 +9366,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -8082,6 +9564,20 @@
               "privacy": "private",
               "description": "Reference to all slotted panel elements."
             },
+            {
+              "kind": "field",
+              "name": "_uid",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`lt-tab-group-${groupCount++}`"
+            },
+            {
+              "kind": "field",
+              "name": "_tabObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationObserver(() => this.updateTabs())"
+            },
             {
               "kind": "method",
               "name": "firstUpdated",
@@ -8091,13 +9587,27 @@
               "kind": "method",
               "name": "updateTabs",
               "privacy": "private",
-              "description": "Updates all tabs with the correct active state and size."
+              "description": "Updates all tabs with the correct active/roving-tabindex state, size, and ARIA wiring."
             },
             {
               "kind": "method",
               "name": "updatePanels",
               "privacy": "private",
-              "description": "Updates panel visibility based on selected value."
+              "description": "Updates panel visibility and ARIA wiring based on selected value."
+            },
+            {
+              "kind": "method",
+              "name": "_select",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "tab",
+                  "type": {
+                    "text": "Tab"
+                  }
+                }
+              ],
+              "description": "Selects a tab (used by both the click and keyboard-navigation handlers below)."
             },
             {
               "kind": "field",
@@ -8105,6 +9615,12 @@
               "privacy": "private",
               "description": "Handles click events from tabs."
             },
+            {
+              "kind": "field",
+              "name": "handleTabKeydown",
+              "privacy": "private",
+              "description": "ArrowLeft/Right move the roving tab stop (and, per the automatic-activation model, select the tab); Home/End\njump to the first/last enabled tab. Disabled tabs are skipped entirely, matching the radiogroup/listbox\npatterns elsewhere in the DS."
+            },
             {
               "kind": "method",
               "name": "handleSlotChange",
@@ -8132,11 +9648,11 @@
           ],
           "events": [
             {
+              "name": "change",
               "type": {
                 "text": "CustomEvent<{value: string}>"
               },
-              "description": "Dispatched when a tab is selected",
-              "name": "change"
+              "description": "Dispatched when a tab is selected"
             }
           ],
           "superclass": {
@@ -8280,7 +9796,7 @@
         {
           "kind": "variable",
           "name": "tabStyles",
-          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .tab { align-items: center; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--lt-text-subtle); cursor: pointer; display: flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: var(--lt-spacing-2); outline: none; padding: var(--lt-spacing-3) var(--lt-spacing-4); transition: color 150ms ease, border-color 150ms ease; user-select: none; white-space: nowrap; } :host(:not([disabled])):hover .tab { color: var(--lt-text-default); } :host(:focus-visible) .tab { color: var(--lt-text-primary); outline: 2px solid var(--lt-border-focus); outline-offset: 2px; } :host([active]) .tab { border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([disabled]) .tab { color: var(--lt-color-neutral-300); cursor: not-allowed; opacity: 0.5; } .icon { font-size: 1.125rem; } /* Size variants */ :host([size='sm']) .tab { font-size: 0.875rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([size='sm']) .icon { font-size: 1rem; } :host([size='lg']) .tab { font-size: 1rem; padding: var(--lt-spacing-4) var(--lt-spacing-5); } :host([size='lg']) .icon { font-size: 1.25rem; } /* Pills variant (applied by parent tab-group) */ :host([data-variant='pills']) .tab { border-bottom: none; border-radius: var(--lt-border-radius); transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } :host([data-variant='pills'][active]) .tab { background: var(--lt-bg-default); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); color: var(--lt-text-primary); } `"
+          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .tab { align-items: center; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--lt-text-subtle); cursor: pointer; display: flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: var(--lt-spacing-2); outline: none; padding: var(--lt-spacing-3) var(--lt-spacing-4); transition: color 150ms ease, border-color 150ms ease; user-select: none; white-space: nowrap; } :host(:not([disabled])):hover .tab { color: var(--lt-text-default); } :host(:focus-visible) .tab { color: var(--lt-text-primary); outline: 2px solid var(--lt-border-focus); outline-offset: 2px; } :host([active]) .tab { border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([disabled]) .tab { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } .icon { font-size: 1.125rem; } /* Size variants */ :host([size='sm']) .tab { font-size: 0.875rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([size='sm']) .icon { font-size: 1rem; } :host([size='lg']) .tab { font-size: 1rem; padding: var(--lt-spacing-4) var(--lt-spacing-5); } :host([size='lg']) .icon { font-size: 1.25rem; } /* Pills variant (applied by parent tab-group) */ :host([data-variant='pills']) .tab { border-bottom: none; border-radius: var(--lt-border-radius); transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } :host([data-variant='pills'][active]) .tab { background: var(--lt-bg-default); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); color: var(--lt-text-primary); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* :host([data-variant='pills']) .tab must be listed explicitly, not just .tab — it outranks a bare .tab in specificity (an extra :host() attribute selector), so it would otherwise keep its own transition. */ .tab, :host([data-variant='pills']) .tab { transition: none; } } `"
         }
       ],
       "exports": [
@@ -8382,11 +9898,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "_handleHostClick",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "_handleHostKeydown",
@@ -8494,7 +10005,7 @@
         {
           "kind": "variable",
           "name": "tableStyles",
-          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); overflow: hidden; width: 100%; } .table-container { overflow-x: auto; width: 100%; } :host([responsive-mode='scroll']) .table-container { -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; } /* Header */ thead { background: var(--lt-bg-surface); border-bottom: 2px solid var(--lt-border-default); } th { color: var(--lt-text-default); font-weight: 600; text-align: left; white-space: nowrap; } th[data-align='center'] { text-align: center; } th[data-align='right'] { text-align: right; } /* Sortable headers */ th.sortable { cursor: pointer; user-select: none; transition: background-color 120ms ease; } th.sortable:hover { background: var(--lt-bg-overlay); } th.sortable .header-content { align-items: center; display: flex; gap: var(--lt-spacing-2); } th[data-align='center'] .header-content { justify-content: center; } th[data-align='right'] .header-content { justify-content: flex-end; } .sort-icon { color: var(--lt-text-muted); display: inline-flex; flex-shrink: 0; font-size: 0.875rem; opacity: 0; transition: opacity 120ms ease; } th.sortable:hover .sort-icon, th.sorted .sort-icon { opacity: 1; } th.sorted .sort-icon { color: var(--lt-interactive-primary-bg); } /* Body */ tbody tr { border-bottom: 1px solid var(--lt-border-default); transition: background-color 120ms ease; } tbody tr:last-child { border-bottom: none; } :host([hoverable]) tbody tr:hover { background: var(--lt-bg-surface); } :host([striped]) tbody tr:nth-child(even) { background: var(--lt-bg-surface); } :host([striped][hoverable]) tbody tr:nth-child(even):hover { background: var(--lt-bg-overlay); } td { color: var(--lt-text-default); } td[data-align='center'] { text-align: center; } td[data-align='right'] { text-align: right; } /* Density variants */ :host([density='compact']) th, :host([density='compact']) td { padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([density='normal']) th, :host([density='normal']) td { padding: var(--lt-spacing-3) var(--lt-spacing-4); } :host([density='comfortable']) th, :host([density='comfortable']) td { padding: var(--lt-spacing-4) var(--lt-spacing-5); } /* Sticky columns */ th.sticky { background: var(--lt-bg-surface); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05); left: 0; position: sticky; z-index: 2; } td.sticky { background: var(--lt-bg-default); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05); left: 0; position: sticky; z-index: 1; } :host([striped]) tbody tr:nth-child(even) td.sticky { background: var(--lt-bg-surface); } :host([hoverable]) tbody tr:hover td.sticky { background: var(--lt-bg-surface); } :host([striped][hoverable]) tbody tr:nth-child(even):hover td.sticky { background: var(--lt-bg-overlay); } /* Border styling */ :host([bordered]) table { border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([bordered]) th, :host([bordered]) td { border-right: 1px solid var(--lt-border-default); } :host([bordered]) th:last-child, :host([bordered]) td:last-child { border-right: none; } /* Empty state */ .empty-state { color: var(--lt-text-subtle); padding: var(--lt-spacing-8); text-align: center; } /* Loading state */ .loading-overlay { align-items: center; background: rgba(255, 255, 255, 0.8); display: flex; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; } /* Stack mode for mobile */ @media (max-width: 768px) { :host([responsive-mode='stack']) .table-container { overflow-x: visible; } :host([responsive-mode='stack']) table, :host([responsive-mode='stack']) thead, :host([responsive-mode='stack']) tbody, :host([responsive-mode='stack']) th, :host([responsive-mode='stack']) td, :host([responsive-mode='stack']) tr { display: block; } :host([responsive-mode='stack']) thead { display: none; } :host([responsive-mode='stack']) tr { background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); margin-bottom: var(--lt-spacing-3); padding: var(--lt-spacing-4); } :host([responsive-mode='stack']) td { border: none; display: grid; gap: var(--lt-spacing-2); grid-template-columns: 120px 1fr; padding: var(--lt-spacing-2) 0; text-align: left; } :host([responsive-mode='stack']) td::before { content: attr(data-label); color: var(--lt-text-default); font-weight: 600; } :host([responsive-mode='stack']) td:last-child { padding-bottom: 0; } } @media (max-width: 768px) { .hide-on-mobile { display: none; } } th.sortable:focus-visible { outline: 2px solid var(--lt-interactive-primary-bg); outline-offset: -2px; } `"
+          "default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); overflow: hidden; width: 100%; } .table-container { /* The loading overlay is absolutely positioned, so it needs this as its containing block. */ position: relative; overflow-x: auto; width: 100%; } :host([responsive-mode='scroll']) .table-container { -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; } /* Header */ thead { background: var(--lt-bg-surface); border-bottom: 2px solid var(--lt-border-default); } th { color: var(--lt-text-default); font-weight: 600; text-align: start; white-space: nowrap; } th[data-align='center'] { text-align: center; } th[data-align='end'] { text-align: end; } /* Sortable headers */ th.sortable { cursor: pointer; padding: 0; user-select: none; } th.sortable:hover { background: var(--lt-bg-overlay); } /* The button (not the th) carries the density padding, so it — not just a slice of it — is the click target. */ th.sortable .header-content { align-items: center; background: none; border: none; color: inherit; cursor: pointer; display: flex; font: inherit; gap: var(--lt-spacing-2); transition: background-color 120ms ease; width: 100%; } th[data-align='center'] .header-content { justify-content: center; } th[data-align='end'] .header-content { justify-content: flex-end; } .sort-icon { color: var(--lt-text-muted); display: inline-flex; flex-shrink: 0; font-size: 0.875rem; opacity: 0; transition: opacity 120ms ease; } th.sortable:hover .sort-icon, th.sorted .sort-icon { opacity: 1; } th.sorted .sort-icon { color: var(--lt-interactive-primary-bg); } /* Body */ tbody tr { border-bottom: 1px solid var(--lt-border-default); transition: background-color 120ms ease; } tbody tr:last-child { border-bottom: none; } :host([hoverable]) tbody tr:hover { background: var(--lt-bg-surface); } :host([striped]) tbody tr:nth-child(even) { background: var(--lt-bg-surface); } :host([striped][hoverable]) tbody tr:nth-child(even):hover { background: var(--lt-bg-overlay); } td { color: var(--lt-text-default); } td[data-align='center'] { text-align: center; } td[data-align='end'] { text-align: end; } /* Density variants */ :host([density='compact']) th, :host([density='compact']) td { padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([density='normal']) th, :host([density='normal']) td { padding: var(--lt-spacing-3) var(--lt-spacing-4); } :host([density='comfortable']) th, :host([density='comfortable']) td { padding: var(--lt-spacing-4) var(--lt-spacing-5); } /* A sortable th's own padding moves onto its button (below), so the whole visible cell — not just the area inside the th's padding — is the click target. Matches the density rules above in specificity and comes after them in source order, so it wins the cascade regardless of selector order elsewhere in this file. */ :host th.sortable { padding: 0; } :host([density='compact']) th.sortable .header-content { padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([density='normal']) th.sortable .header-content { padding: var(--lt-spacing-3) var(--lt-spacing-4); } :host([density='comfortable']) th.sortable .header-content { padding: var(--lt-spacing-4) var(--lt-spacing-5); } /* Sticky columns */ th.sticky { background: var(--lt-bg-surface); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05); inset-inline-start: 0; position: sticky; z-index: 2; } td.sticky { background: var(--lt-bg-default); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05); inset-inline-start: 0; position: sticky; z-index: 1; } :host([striped]) tbody tr:nth-child(even) td.sticky { background: var(--lt-bg-surface); } :host([hoverable]) tbody tr:hover td.sticky { background: var(--lt-bg-surface); } :host([striped][hoverable]) tbody tr:nth-child(even):hover td.sticky { background: var(--lt-bg-overlay); } /* Border styling */ :host([bordered]) table { border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([bordered]) th, :host([bordered]) td { border-inline-end: 1px solid var(--lt-border-default); } :host([bordered]) th:last-child, :host([bordered]) td:last-child { border-inline-end: none; } /* Empty state */ .empty-state { color: var(--lt-text-subtle); padding: var(--lt-spacing-8); text-align: center; } /* Loading state */ .loading-overlay { align-items: center; background: color-mix(in srgb, var(--lt-bg-default) 80%, transparent); display: flex; height: 100%; justify-content: center; inset-inline-start: 0; position: absolute; top: 0; width: 100%; z-index: 10; } /* Stack mode for mobile */ @media (max-width: 768px) { :host([responsive-mode='stack']) .table-container { overflow-x: visible; } :host([responsive-mode='stack']) table, :host([responsive-mode='stack']) thead, :host([responsive-mode='stack']) tbody, :host([responsive-mode='stack']) th, :host([responsive-mode='stack']) td, :host([responsive-mode='stack']) tr { display: block; } :host([responsive-mode='stack']) thead { display: none; } :host([responsive-mode='stack']) tr { background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); margin-bottom: var(--lt-spacing-3); padding: var(--lt-spacing-4); } :host([responsive-mode='stack']) td { border: none; display: grid; gap: var(--lt-spacing-2); grid-template-columns: 120px 1fr; padding: var(--lt-spacing-2) 0; text-align: start; } :host([responsive-mode='stack']) td::before { content: attr(data-label); color: var(--lt-text-default); font-weight: 600; } :host([responsive-mode='stack']) td:last-child { padding-bottom: 0; } } @media (max-width: 768px) { .hide-on-mobile { display: none; } } th.sortable .header-content:focus-visible { outline: 2px solid var(--lt-interactive-primary-bg); outline-offset: -2px; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { th.sortable .header-content, .sort-icon, tbody tr { transition: none; } } `"
         }
       ],
       "exports": [
@@ -8604,6 +10115,15 @@
               "default": "'No data available'",
               "description": "Message to display when there is no data."
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name for the table. Required when a page has more than one table, since column labels alone\ndon't tell assistive tech which table it's in."
+            },
             {
               "kind": "field",
               "name": "rowKey",
@@ -8772,7 +10292,7 @@
           ],
           "events": [
             {
-              "name": "sort-change",
+              "name": "sortchange",
               "type": {
                 "text": "CustomEvent"
               },
@@ -8875,7 +10395,7 @@
                 "text": "TextTag | ''"
               },
               "default": "''",
-              "description": "HTML tag to render. Defaults to the semantic tag for the chosen variant."
+              "description": "HTML tag to render. Defaults to the semantic tag for the chosen variant; anything outside `TextTag` is ignored."
             },
             {
               "kind": "method",
@@ -8955,7 +10475,7 @@
         {
           "kind": "variable",
           "name": "textfieldStyles",
-          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); width: 100%; } label { color: var(--lt-text-subtle); } .input-container { position: relative; width: 100%; display: flex; align-items: center; gap: var(--lt-spacing-2); } .icon-start, .icon-end { color: var(--lt-text-muted); flex-shrink: 0; position: absolute; pointer-events: none; } .icon-start { left: var(--lt-spacing-3); } .icon-end { right: var(--lt-spacing-3); } .password-toggle { pointer-events: auto; cursor: pointer; transition: color 120ms ease; } .password-toggle:hover { color: var(--lt-text-default); } .variant-icon { pointer-events: none; } :host([variant='success']) .variant-icon { color: var(--lt-interactive-success-bg); } :host([variant='warning']) .variant-icon { color: var(--lt-interactive-warning-bg); } :host([variant='error']) .variant-icon, :host([data-invalid]) .variant-icon { color: var(--lt-interactive-error-bg); } input, textarea { background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-sizing: border-box; color: var(--lt-text-default); font-family: inherit; font-weight: 400; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; } textarea { min-height: 80px; padding-block: var(--lt-spacing-3); resize: vertical; } input::placeholder, textarea::placeholder { color: var(--lt-text-muted); } input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--lt-border-strong); } input:focus, textarea:focus { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); outline: none; } input:disabled, textarea:disabled { background: var(--lt-bg-surface); color: var(--lt-text-muted); cursor: not-allowed; } /* sizes */ :host([size='sm']) input, :host([size='sm']) textarea { font-size: 0.875rem; height: 32px; padding-inline: var(--lt-spacing-3); } :host([size='sm']) input.has-start-icon, :host([size='sm']) textarea.has-start-icon { padding-left: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2)); } :host([size='sm']) input.has-end-icon, :host([size='sm']) textarea.has-end-icon { padding-right: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2)); } :host([size='md']) input, :host([size='md']) textarea { font-size: 1rem; height: 40px; padding-inline: var(--lt-spacing-4); } :host([size='md']) input.has-start-icon, :host([size='md']) textarea.has-start-icon { padding-left: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2)); } :host([size='md']) input.has-end-icon, :host([size='md']) textarea.has-end-icon { padding-right: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2)); } :host([size='lg']) input, :host([size='lg']) textarea { font-size: 1.0625rem; height: 48px; padding-inline: var(--lt-spacing-5); } :host([size='lg']) input.has-start-icon, :host([size='lg']) textarea.has-start-icon { padding-left: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2)); } :host([size='lg']) input.has-end-icon, :host([size='lg']) textarea.has-end-icon { padding-right: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2)); } :host([size='lg']) .icon-start, :host([size='lg']) .icon-end { width: 24px; height: 24px; } /* variants */ :host([variant='success']) input, :host([variant='success']) textarea { border-color: var(--lt-border-success-strong); } :host([variant='success']) input:focus, :host([variant='success']) textarea:focus { border-color: var(--lt-interactive-success-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) input, :host([variant='warning']) textarea { border-color: var(--lt-border-warning-strong); } :host([variant='warning']) input:focus, :host([variant='warning']) textarea:focus { border-color: var(--lt-interactive-warning-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) input, :host([variant='error']) textarea, :host([data-invalid]) input, :host([data-invalid]) textarea { border-color: var(--lt-border-error-strong); } :host([variant='error']) input:focus, :host([variant='error']) textarea:focus, :host([data-invalid]) input:focus, :host([data-invalid]) textarea:focus { border-color: var(--lt-interactive-error-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } .helper-text { color: var(--lt-text-subtle); } .helper-text::part(base) { font-weight: 200; } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } :host([variant='error']) .helper-text, :host([data-invalid]) .helper-text { color: var(--lt-text-error); } .required-indicator { color: var(--lt-color-error-500); } :host([uppercase]) label lt-text::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
+          "default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); width: 100%; } label { color: var(--lt-text-subtle); } .input-container { position: relative; width: 100%; display: flex; align-items: center; gap: var(--lt-spacing-2); } .icon-start, .icon-end { color: var(--lt-text-muted); flex-shrink: 0; position: absolute; pointer-events: none; } .icon-start { inset-inline-start: var(--lt-spacing-3); } .icon-end { inset-inline-end: var(--lt-spacing-3); } /* Unlike .variant-icon (a decorative lt-icon), the password toggle is a real <button> — reset the native chrome so it reads as an inline icon, and re-declare align-items since it's no longer a plain absolutely- positioned element inheriting the .icon-start/.icon-end flex-adjacent layout by accident. */ .password-toggle { align-items: center; background: none; border: none; cursor: pointer; display: inline-flex; font: inherit; padding: 0; pointer-events: auto; transition: color 120ms ease; } .password-toggle:hover { color: var(--lt-text-default); } .password-toggle:disabled { cursor: not-allowed; opacity: 0.6; } .password-toggle:focus-visible { outline: 2px solid var(--lt-border-focus); outline-offset: 2px; } .variant-icon { pointer-events: none; } :host([variant='success']) .variant-icon { color: var(--lt-interactive-success-bg); } :host([variant='warning']) .variant-icon { color: var(--lt-interactive-warning-bg); } :host([variant='error']) .variant-icon, :host([data-invalid]) .variant-icon { color: var(--lt-interactive-error-bg); } input, textarea { background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-sizing: border-box; color: var(--lt-text-default); font-family: inherit; font-weight: 400; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; } textarea { min-height: 80px; padding-block: var(--lt-spacing-3); resize: vertical; } input::placeholder, textarea::placeholder { color: var(--lt-text-muted); } input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--lt-border-strong); } input:focus, textarea:focus { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); outline: none; } input:disabled, textarea:disabled { background: var(--lt-bg-surface); color: var(--lt-text-muted); cursor: not-allowed; } /* sizes */ :host([size='sm']) input, :host([size='sm']) textarea { font-size: 0.875rem; height: 32px; padding-inline: var(--lt-spacing-3); } :host([size='sm']) input.has-start-icon, :host([size='sm']) textarea.has-start-icon { padding-inline-start: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2)); } :host([size='sm']) input.has-end-icon, :host([size='sm']) textarea.has-end-icon { padding-inline-end: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2)); } :host([size='md']) input, :host([size='md']) textarea { font-size: 1rem; height: 40px; padding-inline: var(--lt-spacing-4); } :host([size='md']) input.has-start-icon, :host([size='md']) textarea.has-start-icon { padding-inline-start: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2)); } :host([size='md']) input.has-end-icon, :host([size='md']) textarea.has-end-icon { padding-inline-end: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2)); } :host([size='lg']) input, :host([size='lg']) textarea { font-size: 1.0625rem; height: 48px; padding-inline: var(--lt-spacing-5); } :host([size='lg']) input.has-start-icon, :host([size='lg']) textarea.has-start-icon { padding-inline-start: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2)); } :host([size='lg']) input.has-end-icon, :host([size='lg']) textarea.has-end-icon { padding-inline-end: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2)); } :host([size='lg']) .icon-start, :host([size='lg']) .icon-end { width: 24px; height: 24px; } /* variants */ :host([variant='success']) input, :host([variant='success']) textarea { border-color: var(--lt-border-success-strong); } :host([variant='success']) input:focus, :host([variant='success']) textarea:focus { border-color: var(--lt-interactive-success-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) input, :host([variant='warning']) textarea { border-color: var(--lt-border-warning-strong); } :host([variant='warning']) input:focus, :host([variant='warning']) textarea:focus { border-color: var(--lt-interactive-warning-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) input, :host([variant='error']) textarea, :host([data-invalid]) input, :host([data-invalid]) textarea { border-color: var(--lt-border-error-strong); } :host([variant='error']) input:focus, :host([variant='error']) textarea:focus, :host([data-invalid]) input:focus, :host([data-invalid]) textarea:focus { border-color: var(--lt-interactive-error-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } .helper-text { color: var(--lt-text-subtle); } .helper-text::part(base) { font-weight: 200; } /* .icon-end disables pointer events so decorative icons never swallow clicks; the clear button is the one real control in that slot, so it opts back in and resets native button chrome. */ .clear-button { align-items: center; background: none; border: 0; border-radius: var(--lt-border-radius, 4px); cursor: pointer; display: flex; padding: 0; pointer-events: auto; } .counter { color: var(--lt-text-subtle); display: block; text-align: end; } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } :host([variant='error']) .helper-text, :host([data-invalid]) .helper-text { color: var(--lt-text-error); } .required-indicator { color: var(--lt-text-error); } :host([uppercase]) label lt-text::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .password-toggle, input, textarea { transition: none; } } `"
         }
       ],
       "exports": [
@@ -9001,6 +10521,39 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_default",
+              "privacy": "private",
+              "default": "new FormDefaultController(this, () => this.value)"
+            },
+            {
+              "kind": "field",
+              "name": "_fieldsetDisabled",
+              "privacy": "private",
+              "default": "new FormDisabledController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_uid",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`lt-textfield-${textfieldCount++}`"
+            },
+            {
+              "kind": "field",
+              "name": "_inputId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`${this._uid}-input`"
+            },
+            {
+              "kind": "field",
+              "name": "_helperId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`${this._uid}-helper`"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -9035,7 +10588,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Current value of the input."
+              "description": "Current value of the input. Not reflected as an attribute: for `type=\"password\"` that would put whatever\nthe user types in plain text in the DOM (`outerHTML`, DevTools, session-replay/DOM-mutation recorders) —\nvisible via `getAttribute('value')`/`[value]` regardless of input type. Read the property, or the\n`input`/`change` event's `detail.value`, instead of an attribute selector."
             },
             {
               "kind": "field",
@@ -9145,6 +10698,41 @@
               "default": "false",
               "description": "Renders the label in small caps with wider letter spacing."
             },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a clear button while the field has a value. Not shown for password fields, which have their own toggle."
+            },
+            {
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows the character count as `length / max` below the field. Uses `max` as the limit, which is also enforced natively."
+            },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "Partial<TextfieldLabels>"
+              },
+              "default": "{}"
+            },
+            {
+              "kind": "field",
+              "name": "_labels",
+              "type": {
+                "text": "TextfieldLabels"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "isPasswordVisible",
@@ -9207,6 +10795,27 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "_showClear",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Handles change events from the native input or textarea element.\nUpdates the component's value property and dispatches a custom change event.",
+              "parameters": [
+                {
+                  "description": "The native change event",
+                  "name": "e"
+                }
+              ],
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_clear",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleChange",
@@ -9216,11 +10825,14 @@
                   "name": "e",
                   "type": {
                     "text": "Event"
-                  },
-                  "description": "The native change event"
+                  }
                 }
-              ],
-              "description": "Handles change events from the native input or textarea element.\nUpdates the component's value property and dispatches a custom change event."
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_onKeydown",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -9228,6 +10840,19 @@
               "privacy": "private",
               "description": "Toggles password visibility for password-type inputs.\nSwitches between showing plain text and masked password."
             },
+            {
+              "kind": "method",
+              "name": "_preventFocusSteal",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "getEndIconName",
@@ -9255,6 +10880,28 @@
               "kind": "method",
               "name": "formResetCallback"
             },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_isDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "`this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "checkValidity"
@@ -9333,7 +10980,7 @@
         {
           "kind": "variable",
           "name": "tooltipStyles",
-          "default": "css` :host { display: inline-block; position: relative; --lt-tooltip-offset: 8px; } .tooltip { background: var(--lt-tooltip-bg, var(--lt-bg-inverse)); border-radius: 4px; color: var(--lt-tooltip-color, var(--lt-text-inverse)); opacity: 0; padding: var(--lt-spacing-1) var(--lt-spacing-2); pointer-events: none; position: absolute; transition: opacity 150ms ease, visibility 150ms ease; visibility: hidden; white-space: nowrap; z-index: 1000; } .arrow { border: 5px solid transparent; height: 0; position: absolute; width: 0; } :host(:hover) .tooltip, :host(:focus-within) .tooltip { opacity: 1; visibility: visible; } :host([disabled]) .tooltip, :host(:not([content])) .tooltip, :host([content='']) .tooltip { display: none; } /* ── Top (default) ──────────────────────────── */ :host(:not([placement])) .tooltip, :host([placement='top']) .tooltip { bottom: calc(100% + var(--lt-tooltip-offset)); left: 50%; transform: translateX(-50%); } :host(:not([placement])) .arrow, :host([placement='top']) .arrow { border-top-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900)); left: 50%; top: 100%; transform: translateX(-50%); } /* ── Bottom ─────────────────────────────────── */ :host([placement='bottom']) .tooltip { left: 50%; top: calc(100% + var(--lt-tooltip-offset)); transform: translateX(-50%); } :host([placement='bottom']) .arrow { border-bottom-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900)); bottom: 100%; left: 50%; transform: translateX(-50%); } /* ── Left ───────────────────────────────────── */ :host([placement='left']) .tooltip { right: calc(100% + var(--lt-tooltip-offset)); top: 50%; transform: translateY(-50%); } :host([placement='left']) .arrow { border-left-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900)); left: 100%; top: 50%; transform: translateY(-50%); } /* ── Right ──────────────────────────────────── */ :host([placement='right']) .tooltip { left: calc(100% + var(--lt-tooltip-offset)); top: 50%; transform: translateY(-50%); } :host([placement='right']) .arrow { border-right-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900)); right: 100%; top: 50%; transform: translateY(-50%); } `"
+          "default": "css` :host { display: inline-block; position: relative; --lt-tooltip-offset: 8px; } /* The bubble is a \"manual\" popover so it renders in the top layer — above an open lt-dialog/lt-sidepanel regardless of z-index, and never clipped by an overflow:hidden ancestor. Its position is set from JS (see _reposition in tooltip.ts), since a top-layer element is positioned against the viewport, not the host. display/overlay need allow-discrete so hidePopover() doesn't cut the exit fade short — same as lt-snackbar. */ .tooltip { background: var(--lt-tooltip-bg, var(--lt-bg-inverse)); border: 0; border-radius: 4px; color: var(--lt-tooltip-color, var(--lt-text-inverse)); inset: auto; margin: 0; opacity: 0; overflow: visible; padding: var(--lt-spacing-1) var(--lt-spacing-2); pointer-events: none; position: fixed; transition: opacity 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete; white-space: nowrap; } .tooltip:popover-open { opacity: 1; } /* A newly-shown popover has no earlier rendered frame to transition from — @starting-style supplies one so the fade-in actually animates instead of snapping straight to the open state. */ @starting-style { .tooltip:popover-open { opacity: 0; } } .arrow { border: 5px solid transparent; height: 0; position: absolute; width: 0; } :host([disabled]) .tooltip, :host(:not([content])) .tooltip, :host([content='']) .tooltip { display: none; } /* ── Arrows ─────────────────────────────────────────────────────────────── The bubble's own position is set from JS; each arrow sits on the bubble edge facing the host. Centering is direction-symmetric, so inset-inline-start:50% + translateX(-50%) is correct in both LTR and RTL. Start/end use logical properties, so they flip with the page direction without a custom-property trick. ─────────────────────────── */ /* ── Top (default) ──────────────────────────── */ :host(:not([placement])) .arrow, :host([placement='top']) .arrow { border-top-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900)); inset-inline-start: 50%; top: 100%; transform: translateX(-50%); } /* ── Bottom ─────────────────────────────────── */ :host([placement='bottom']) .arrow { border-bottom-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900)); bottom: 100%; inset-inline-start: 50%; transform: translateX(-50%); } /* ── Start ──────────────────────────────────── */ :host([placement='start']) .arrow { border-inline-start-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900)); inset-inline-start: 100%; top: 50%; transform: translateY(-50%); } /* ── End ────────────────────────────────────── */ :host([placement='end']) .arrow { border-inline-end-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900)); inset-inline-end: 100%; top: 50%; transform: translateY(-50%); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .tooltip { transition: none; } } `"
         }
       ],
       "exports": [
@@ -9382,6 +11029,32 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_tooltipEl",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_hovered",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_focused",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "content",
@@ -9427,11 +11100,79 @@
               "default": "''",
               "description": "Text color override. Accepts a hex value (#ffffff) or a CSS token name (--lt-color-neutral-50)."
             },
+            {
+              "kind": "method",
+              "name": "_describeTrigger",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_isShown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_sync",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_show",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_hide",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_reposition",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onPointerEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onPointerLeave",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onFocusIn",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onFocusOut",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "firstUpdated",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "updated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "PropertyValues<this>"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "render"