@latty-ds/web 0.10.1 → 0.10.4

package/custom-elements.json

@@ -598,7 +598,7 @@
         {
           "kind": "variable",
           "name": "badgeStyles",
-          "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-badge-bg); border-radius: 999px; /* Badges are even smaller than chips (as short as 18px at size=\"sm\") — a \"thick\" (4px) themed border reads as compressed, so cap what the badge actually renders at \"medium\" (2px) regardless of the theme's configured border width. */ border: min(var(--lt-border-width, 1px), 2px) solid var(--lt-badge-border-color, transparent); color: var(--lt-badge-color); box-sizing: border-box; display: inline-flex; font-weight: 600; gap: var(--lt-spacing-1); line-height: 1; user-select: none; white-space: nowrap; } .dot { border-radius: 50%; flex-shrink: 0; } /* ── Sizes ──────────────────────────────────────────────────────────── */ :host([size='sm']) span[part='base'] { font-size: 0.6875rem; height: 18px; padding-inline: var(--lt-spacing-2); } :host([size='sm']) .dot { height: 6px; width: 6px; } :host([size='md']) span[part='base'] { font-size: 0.75rem; height: 22px; padding-inline: var(--lt-spacing-2); } :host([size='md']) .dot { height: 7px; width: 7px; } :host([size='lg']) span[part='base'] { font-size: 0.8125rem; height: 26px; padding-inline: var(--lt-spacing-3); } :host([size='lg']) .dot { height: 8px; width: 8px; } /* When dot is the only content, fill it to the circle size */ :host([dot][content='']) .dot, :host([dot]:not([content])) .dot { height: 40%; width: 40%; } /* ── Empty = perfect circle (covers content=\"\" and absent attribute) */ :host([content='']) span[part='base'], :host(:not([content])) span[part='base'] { aspect-ratio: 1; justify-content: center; padding: 0; } /* ── 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='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='neutral']) span[part='base'] { background: var(--lt-bg-surface); border-color: var(--lt-border-default); color: var(--lt-text-neutral); } /* ── 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='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='neutral']) span[part='base'] { background: transparent; border-color: var(--lt-border-strong); color: var(--lt-text-neutral); } /* ── Solid (full-color bg, white text) ───────────────────────────── */ :host([appearance='solid'][variant='primary']) span[part='base'] { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); } :host([appearance='solid'][variant='secondary']) span[part='base'] { background: var(--lt-interactive-secondary-bg); border-color: transparent; color: var(--lt-text-on-secondary); } :host([appearance='solid'][variant='success']) span[part='base'] { background: var(--lt-interactive-success-bg); border-color: transparent; color: var(--lt-text-on-success); } :host([appearance='solid'][variant='warning']) span[part='base'] { background: var(--lt-interactive-warning-bg); border-color: transparent; color: var(--lt-text-on-warning); } :host([appearance='solid'][variant='error']) span[part='base'] { background: var(--lt-interactive-error-bg); border-color: transparent; color: var(--lt-text-on-error); } :host([appearance='solid'][variant='neutral']) span[part='base'] { background: var(--lt-color-neutral-500); border-color: transparent; color: var(--lt-color-white); } /* ── Dot color inherits text color ───────────────────────────────── */ .dot { background: currentColor; } `"
+          "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-badge-bg); border-radius: 999px; /* Badges are even smaller than chips (as short as 18px at size=\"sm\") — a \"thick\" (4px) themed border reads as compressed, so cap what the badge actually renders at \"medium\" (2px) regardless of the theme's configured border width. */ border: min(var(--lt-border-width, 1px), 2px) solid var(--lt-badge-border-color, transparent); color: var(--lt-badge-color); box-sizing: border-box; display: inline-flex; font-weight: 600; gap: var(--lt-spacing-1); line-height: 1; user-select: none; white-space: nowrap; } .dot { border-radius: 50%; flex-shrink: 0; } /* ── Sizes ──────────────────────────────────────────────────────────── */ :host([size='sm']) span[part='base'] { font-size: 0.6875rem; height: 18px; padding-inline: var(--lt-spacing-2); } :host([size='sm']) .dot { height: 6px; width: 6px; } :host([size='md']) span[part='base'] { font-size: 0.75rem; height: 22px; padding-inline: var(--lt-spacing-2); } :host([size='md']) .dot { height: 7px; width: 7px; } :host([size='lg']) span[part='base'] { font-size: 0.8125rem; height: 26px; padding-inline: var(--lt-spacing-3); } :host([size='lg']) .dot { height: 8px; width: 8px; } /* When dot is the only content, fill it to the circle size */ :host([dot][content='']) .dot, :host([dot]:not([content])) .dot { height: 40%; width: 40%; } /* ── Empty = perfect circle (covers content=\"\" and absent attribute) */ :host([content='']) span[part='base'], :host(:not([content])) span[part='base'] { aspect-ratio: 1; justify-content: center; padding: 0; } /* ── 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='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='neutral']) span[part='base'] { background: var(--lt-bg-surface); border-color: var(--lt-border-default); color: var(--lt-text-neutral); } /* ── 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='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='neutral']) span[part='base'] { background: transparent; border-color: var(--lt-border-strong); color: var(--lt-text-neutral); } /* ── Solid (full-color bg, white text) ───────────────────────────── */ :host([appearance='solid'][variant='primary']) span[part='base'] { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); } :host([appearance='solid'][variant='secondary']) span[part='base'] { background: var(--lt-interactive-secondary-bg); border-color: transparent; color: var(--lt-text-on-secondary); } :host([appearance='solid'][variant='success']) span[part='base'] { background: var(--lt-interactive-success-bg); border-color: transparent; color: var(--lt-text-on-success); } :host([appearance='solid'][variant='warning']) span[part='base'] { background: var(--lt-interactive-warning-bg); border-color: transparent; color: var(--lt-text-on-warning); } :host([appearance='solid'][variant='error']) span[part='base'] { background: var(--lt-interactive-error-bg); border-color: transparent; color: var(--lt-text-on-error); } :host([appearance='solid'][variant='neutral']) span[part='base'] { background: var(--lt-interactive-neutral-bg); border-color: transparent; color: var(--lt-color-white); } /* ── Dot color inherits text color ───────────────────────────────── */ .dot { background: currentColor; } `"
         }
       ],
       "exports": [
@@ -742,7 +742,7 @@
         {
           "kind": "variable",
           "name": "breadcrumbStyles",
-          "default": "css` :host { display: block; } [part='list'] { align-items: center; display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; } `"
+          "default": "css` :host { display: block; } [part='list'] { align-items: center; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; } `"
         },
         {
           "kind": "variable",
@@ -925,7 +925,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-color-neutral-500); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-color-neutral-700); --_active-bg: var(--lt-color-neutral-800); } :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); 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; } `"
         }
       ],
       "exports": [
@@ -1199,7 +1199,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 */ .day--outside { color: var(--lt-text-muted); opacity: 0.5; } /* 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%; } .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; } `"
         }
       ],
       "exports": [
@@ -4128,7 +4128,7 @@
         {
           "kind": "variable",
           "name": "headerStyles",
-          "default": "css` :host { display: block; position: sticky; top: 0; z-index: 100; box-shadow: var(--lt-elevation-1); } :host([background='primary']) { background: var(--lt-bg-primary); color: var(--lt-text-inverse); } :host([background='surface']) { background: var(--lt-bg-default); color: var(--lt-text-default); } header { display: flex; align-items: center; gap: var(--lt-spacing-2); padding: 0 var(--lt-spacing-4); min-height: var(--lt-spacing-px-16); box-sizing: border-box; color: inherit; } .content { flex: 1; display: flex; align-items: center; } `"
+          "default": "css` :host { display: block; position: sticky; top: 0; z-index: 100; box-shadow: var(--lt-elevation-1); } :host([background='primary']) { background: var(--lt-bg-primary); color: var(--lt-text-on-primary); } :host([background='surface']) { background: var(--lt-bg-default); color: var(--lt-text-default); } header { display: flex; align-items: center; gap: var(--lt-spacing-2); padding: 0 var(--lt-spacing-4); min-height: var(--lt-spacing-px-16); box-sizing: border-box; color: inherit; } .content { flex: 1; display: flex; align-items: center; } `"
         }
       ],
       "exports": [
@@ -4238,7 +4238,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; color: inherit; } /* 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-color-neutral-500); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-color-neutral-700); --_hover-color: var(--lt-color-neutral-50); --_active-bg: var(--lt-color-neutral-800); } :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%; } `"
         }
       ],
       "exports": [
@@ -4783,7 +4783,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A list item component that renders a `<li>` element in shadow DOM.\n\nThis component solves the HTML parser issue where nested `<lt-list>` components\ncannot contain plain `<li>` elements due to browser parsing rules. By wrapping\nthe `<li>` in a custom element's shadow DOM, we can properly nest lists.\n\nItems can also be interactive: set `clickable` to render the row as a native\n`<button>` (picker rows, settings rows), or `href` to render it as an `<a>`.\nInteractive rows get hover/active/focus states and a disabled state.",
+          "description": "A list item that behaves like a native `<li>` without literally being one.\nThe host sets `display: list-item` and `role=\"listitem\"` on itself (a\ncustom element's tag can never actually be `<li>`), so it still renders a\nnative marker/counter via inherited `list-style-type`/`-position` and\nreads correctly to assistive tech, inside `lt-list`'s `<div role=\"list\">`.\n\nThis also solves the HTML parser issue where nesting a real `<li>` through\na `<lt-list>` boundary auto-closes a still-open ancestor `<li>` (see\n`lt-list`'s own tests) — `<lt-list-item>` isn't `<li>` at the raw-HTML-tag\nlevel, so it never triggers that parser behavior in the first place.\n\nItems can also be interactive: set `clickable` to render the row as a native\n`<button>` (picker rows, settings rows), or `href` to render it as an `<a>`.\nInteractive rows get hover/active/focus states and a disabled state.",
           "name": "ListItem",
           "cssParts": [
             {
@@ -4898,7 +4898,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); } ul, ol { margin: 0; padding: 0; list-style-position: outside; color: var(--lt-text-default); } ul { padding-left: var(--lt-spacing-5); } ol { padding-left: var(--lt-spacing-5); } ::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]) ul, :host([no-marker]) ol { 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; } ul ::slotted(li)::marker { color: var(--list-marker-color); } ol ::slotted(li)::marker { color: var(--list-marker-color); } /* Size variants */ :host([size='sm']) ul, :host([size='sm']) ol { 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']) ul, :host([size='md']) ol { 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']) ul, :host([size='lg']) ol { 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: 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); } `"
         }
       ],
       "exports": [
@@ -4928,7 +4928,7 @@
           ],
           "cssParts": [
             {
-              "description": "The underlying `<ul>` or `<ol>` element",
+              "description": "The underlying list container. Renders as a `<div role=\"list\">` rather than a real `<ul>`/`<ol>` — a custom element like `<lt-list-item>` can never itself be a valid `<li>`, so a real `<ul>`/`<ol>` around one fails HTML's list content model (only `<li>`/`<script>`/`<template>` may be direct children). `list-style-type` is still set here and inherited down, so real `<li>` children (and `<lt-list-item>`, which sets `display: list-item` on itself) render their native marker/counter exactly as they would inside a real list.",
               "name": "list"
             }
           ],

package/dist/components/alert/index.js

@@ -249,7 +249,6 @@ var iconButtonStyles = css2`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */
@@ -322,11 +321,11 @@ var iconButtonStyles = css2`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([appearance='filled'][variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-bg: var(--lt-interactive-neutral-bg-hover);
     --_hover-color: var(--lt-color-neutral-50);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_active-bg: var(--lt-interactive-neutral-bg-active);
   }
   :host([appearance='filled'][variant='success']) {
     --_bg: var(--lt-interactive-success-bg);

package/dist/components/badge/index.js

@@ -230,7 +230,7 @@ var badgeStyles = css`
   }
 
   :host([appearance='solid'][variant='neutral']) span[part='base'] {
-    background: var(--lt-color-neutral-500);
+    background: var(--lt-interactive-neutral-bg);
     border-color: transparent;
     color: var(--lt-color-white);
   }

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -49,5 +49,6 @@ export declare class BreadcrumbItem extends ThemeableElement {
      * @default ''
      */
     separator: string;
+    connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/breadcrumb/index.js

@@ -49,7 +49,6 @@ var breadcrumbStyles = css`
     display: flex;
     flex-wrap: wrap;
     gap: 0;
-    list-style: none;
     margin: 0;
     padding: 0;
   }
@@ -112,9 +111,9 @@ var Breadcrumb = class extends ThemeableElement {
   render() {
     return html`
       <nav aria-label="breadcrumb">
-        <ol part="list">
+        <div part="list" role="list">
           <slot></slot>
-        </ol>
+        </div>
       </nav>
     `;
   }
@@ -133,17 +132,21 @@ var BreadcrumbItem = class extends ThemeableElement {
     this.current = false;
     this.separator = "";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
   render() {
     const hasSeparatorOverride = this.separator !== null && this.separator !== void 0 && this.separator !== "";
     return html`
-      <li part="item">
+      <div part="item">
         ${this.current || !this.href ? html`<span part="text" aria-current=${this.current ? "page" : "false"}><slot></slot></span>` : html`<a part="link" href=${this.href}><slot></slot></a>`}
         <span
           part="separator"
           aria-hidden="true"
           style=${hasSeparatorOverride ? `--lt-breadcrumb-separator: "${this.separator}"` : ""}
         ></span>
-      </li>
+      </div>
     `;
   }
 };

package/dist/components/button/index.js

@@ -139,10 +139,10 @@ var buttonStyles = css`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_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);

package/dist/components/calendar/index.js

@@ -234,10 +234,10 @@ var calendarStyles = css`
     background: var(--lt-interactive-primary-bg-hover);
   }
 
-  /* Outside days */
+  /* 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);
-    opacity: 0.5;
   }
 
   /* Empty filler cell */

package/dist/components/combobox/index.js

@@ -1963,7 +1963,7 @@ var Combobox = class extends ThemeableElement {
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
         />
-        <lt-icon class="chevron" name="nav-arrow-down" size="sm"></lt-icon>
+        <lt-icon class="chevron" name="caret-down" size="sm"></lt-icon>
       </div>
     `;
     return html2`

package/dist/components/date-input/index.js

@@ -239,10 +239,10 @@ var calendarStyles = css`
     background: var(--lt-interactive-primary-bg-hover);
   }
 
-  /* Outside days */
+  /* 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);
-    opacity: 0.5;
   }
 
   /* Empty filler cell */

package/dist/components/dialog/index.js

@@ -241,7 +241,6 @@ var iconButtonStyles = css3`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */
@@ -314,11 +313,11 @@ var iconButtonStyles = css3`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([appearance='filled'][variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-bg: var(--lt-interactive-neutral-bg-hover);
     --_hover-color: var(--lt-color-neutral-50);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_active-bg: var(--lt-interactive-neutral-bg-active);
   }
   :host([appearance='filled'][variant='success']) {
     --_bg: var(--lt-interactive-success-bg);

package/dist/components/dropdown/dropdown-item.d.ts

@@ -11,7 +11,7 @@ export declare class DropdownItem extends ThemeableElement {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;

package/dist/components/header/index.js

@@ -50,7 +50,7 @@ var headerStyles = css`
 
   :host([background='primary']) {
     background: var(--lt-bg-primary);
-    color: var(--lt-text-inverse);
+    color: var(--lt-text-on-primary);
   }
 
   :host([background='surface']) {

package/dist/components/icon-button/index.js

@@ -96,7 +96,6 @@ var iconButtonStyles = css`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */
@@ -169,11 +168,11 @@ var iconButtonStyles = css`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([appearance='filled'][variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-bg: var(--lt-interactive-neutral-bg-hover);
     --_hover-color: var(--lt-color-neutral-50);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_active-bg: var(--lt-interactive-neutral-bg-active);
   }
   :host([appearance='filled'][variant='success']) {
     --_bg: var(--lt-interactive-success-bg);

package/dist/components/list/index.js

@@ -47,20 +47,16 @@ var listStyles = css`
     --list-marker-color: var(--lt-color-neutral-500);
   }
 
-  ul,
-  ol {
+  [part='list'] {
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 var(--lt-spacing-5);
     list-style-position: outside;
+    list-style-type: disc;
     color: var(--lt-text-default);
   }
 
-  ul {
-    padding-left: var(--lt-spacing-5);
-  }
-
-  ol {
-    padding-left: var(--lt-spacing-5);
+  :host([type='ordered']) [part='list'] {
+    list-style-type: decimal;
   }
 
   ::slotted(li),
@@ -82,8 +78,7 @@ var listStyles = css`
   }
 
   /* No marker */
-  :host([no-marker]) ul,
-  :host([no-marker]) ol {
+  :host([no-marker]) [part='list'] {
     list-style: none;
     padding-left: 0;
   }
@@ -107,17 +102,12 @@ var listStyles = css`
     margin-bottom: 0;
   }
 
-  ul ::slotted(li)::marker {
-    color: var(--list-marker-color);
-  }
-
-  ol ::slotted(li)::marker {
+  [part='list'] ::slotted(li)::marker {
     color: var(--list-marker-color);
   }
 
   /* Size variants */
-  :host([size='sm']) ul,
-  :host([size='sm']) ol {
+  :host([size='sm']) [part='list'] {
     font-size: 0.875rem;
     line-height: 1.5;
   }
@@ -127,8 +117,7 @@ var listStyles = css`
     margin-bottom: var(--lt-spacing-1);
   }
 
-  :host([size='md']) ul,
-  :host([size='md']) ol {
+  :host([size='md']) [part='list'] {
     font-size: 1rem;
     line-height: 1.6;
   }
@@ -138,8 +127,7 @@ var listStyles = css`
     margin-bottom: var(--lt-spacing-2);
   }
 
-  :host([size='lg']) ul,
-  :host([size='lg']) ol {
+  :host([size='lg']) [part='list'] {
     font-size: 1.125rem;
     line-height: 1.7;
   }
@@ -307,13 +295,12 @@ var List = class extends ThemeableElement {
     this.noMarker = false;
   }
   render() {
-    const isOrdered = this.type === "ordered";
     const styles = this.markerColor ? { "--list-marker-color": this.markerColor } : {};
-    return isOrdered ? html2`<ol part="list" style=${styleMap(styles)}>
-          <slot></slot>
-        </ol>` : html2`<ul part="list" style=${styleMap(styles)}>
-          <slot></slot>
-        </ul>`;
+    return html2`
+      <div part="list" role="list" style=${styleMap(styles)}>
+        <slot></slot>
+      </div>
+    `;
   }
 };
 List.styles = listStyles;

package/dist/components/list/list-item.d.ts

@@ -1,11 +1,16 @@
 import { ThemeableElement } from '../../base';
 import '@latty-ds/icons';
 /**
- * A list item component that renders a `<li>` element in shadow DOM.
+ * A list item that behaves like a native `<li>` without literally being one.
+ * The host sets `display: list-item` and `role="listitem"` on itself (a
+ * custom element's tag can never actually be `<li>`), so it still renders a
+ * native marker/counter via inherited `list-style-type`/`-position` and
+ * reads correctly to assistive tech, inside `lt-list`'s `<div role="list">`.
  *
- * This component solves the HTML parser issue where nested `<lt-list>` components
- * cannot contain plain `<li>` elements due to browser parsing rules. By wrapping
- * the `<li>` in a custom element's shadow DOM, we can properly nest lists.
+ * This also solves the HTML parser issue where nesting a real `<li>` through
+ * a `<lt-list>` boundary auto-closes a still-open ancestor `<li>` (see
+ * `lt-list`'s own tests) — `<lt-list-item>` isn't `<li>` at the raw-HTML-tag
+ * level, so it never triggers that parser behavior in the first place.
  *
  * Items can also be interactive: set `clickable` to render the row as a native
  * `<button>` (picker rows, settings rows), or `href` to render it as an `<a>`.

package/dist/components/list/list.d.ts

@@ -8,7 +8,14 @@ import './list-item';
  *
  * @slot - Default slot for list items (`<li>` elements)
  *
- * @csspart list - The underlying `<ul>` or `<ol>` element
+ * @csspart list - The underlying list container. Renders as a `<div
+ *   role="list">` rather than a real `<ul>`/`<ol>` — a custom element like
+ *   `<lt-list-item>` can never itself be a valid `<li>`, so a real
+ *   `<ul>`/`<ol>` around one fails HTML's list content model (only
+ *   `<li>`/`<script>`/`<template>` may be direct children). `list-style-type`
+ *   is still set here and inherited down, so real `<li>` children (and
+ *   `<lt-list-item>`, which sets `display: list-item` on itself) render
+ *   their native marker/counter exactly as they would inside a real list.
  *
  * @cssprop --list-marker-color - Color of the bullet points or numbers (default: neutral-500)
  *

package/dist/components/pagination/index.js

@@ -158,14 +158,14 @@ var Pagination = class extends ThemeableElement {
     return html`
       <nav aria-label="Pagination">
         <button aria-label="First page" ?disabled=${atFirst || this.disabled} @click=${() => this._go(1)}>
-          <lt-icon name="double-nav-arrow-left" size="sm"></lt-icon>
+          <lt-icon name="double-caret-left" size="sm"></lt-icon>
         </button>
         <button
           aria-label="Previous page"
           ?disabled=${atFirst || this.disabled}
           @click=${() => this._go(this.page - 1)}
         >
-          <lt-icon name="nav-arrow-left" size="sm"></lt-icon>
+          <lt-icon name="caret-left" size="sm"></lt-icon>
         </button>
 
         ${pages.map(
@@ -180,10 +180,10 @@ var Pagination = class extends ThemeableElement {
     )}
 
         <button aria-label="Next page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.page + 1)}>
-          <lt-icon name="nav-arrow-right" size="sm"></lt-icon>
+          <lt-icon name="caret-right" size="sm"></lt-icon>
         </button>
         <button aria-label="Last page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.totalPages)}>
-          <lt-icon name="double-nav-arrow-right" size="sm"></lt-icon>
+          <lt-icon name="double-caret-right" size="sm"></lt-icon>
         </button>
       </nav>
     `;

package/dist/components/sidepanel/index.js

@@ -228,7 +228,6 @@ var iconButtonStyles = css3`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */
@@ -301,11 +300,11 @@ var iconButtonStyles = css3`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([appearance='filled'][variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-bg: var(--lt-interactive-neutral-bg-hover);
     --_hover-color: var(--lt-color-neutral-50);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_active-bg: var(--lt-interactive-neutral-bg-active);
   }
   :host([appearance='filled'][variant='success']) {
     --_bg: var(--lt-interactive-success-bg);

package/dist/index.cjs

@@ -1913,10 +1913,10 @@ var buttonStyles = i`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_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);
@@ -3129,7 +3129,6 @@ var iconButtonStyles = i`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */
@@ -3202,11 +3201,11 @@ var iconButtonStyles = i`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([appearance='filled'][variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-bg: var(--lt-interactive-neutral-bg-hover);
     --_hover-color: var(--lt-color-neutral-50);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_active-bg: var(--lt-interactive-neutral-bg-active);
   }
   :host([appearance='filled'][variant='success']) {
     --_bg: var(--lt-interactive-success-bg);
@@ -3662,20 +3661,16 @@ var listStyles = i`
     --list-marker-color: var(--lt-color-neutral-500);
   }
 
-  ul,
-  ol {
+  [part='list'] {
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 var(--lt-spacing-5);
     list-style-position: outside;
+    list-style-type: disc;
     color: var(--lt-text-default);
   }
 
-  ul {
-    padding-left: var(--lt-spacing-5);
-  }
-
-  ol {
-    padding-left: var(--lt-spacing-5);
+  :host([type='ordered']) [part='list'] {
+    list-style-type: decimal;
   }
 
   ::slotted(li),
@@ -3697,8 +3692,7 @@ var listStyles = i`
   }
 
   /* No marker */
-  :host([no-marker]) ul,
-  :host([no-marker]) ol {
+  :host([no-marker]) [part='list'] {
     list-style: none;
     padding-left: 0;
   }
@@ -3722,17 +3716,12 @@ var listStyles = i`
     margin-bottom: 0;
   }
 
-  ul ::slotted(li)::marker {
-    color: var(--list-marker-color);
-  }
-
-  ol ::slotted(li)::marker {
+  [part='list'] ::slotted(li)::marker {
     color: var(--list-marker-color);
   }
 
   /* Size variants */
-  :host([size='sm']) ul,
-  :host([size='sm']) ol {
+  :host([size='sm']) [part='list'] {
     font-size: 0.875rem;
     line-height: 1.5;
   }
@@ -3742,8 +3731,7 @@ var listStyles = i`
     margin-bottom: var(--lt-spacing-1);
   }
 
-  :host([size='md']) ul,
-  :host([size='md']) ol {
+  :host([size='md']) [part='list'] {
     font-size: 1rem;
     line-height: 1.6;
   }
@@ -3753,8 +3741,7 @@ var listStyles = i`
     margin-bottom: var(--lt-spacing-2);
   }
 
-  :host([size='lg']) ul,
-  :host([size='lg']) ol {
+  :host([size='lg']) [part='list'] {
     font-size: 1.125rem;
     line-height: 1.7;
   }
@@ -3916,13 +3903,12 @@ var List = class extends ThemeableElement {
     this.noMarker = false;
   }
   render() {
-    const isOrdered = this.type === "ordered";
     const styles = this.markerColor ? { "--list-marker-color": this.markerColor } : {};
-    return isOrdered ? T`<ol part="list" style=${o9(styles)}>
-          <slot></slot>
-        </ol>` : T`<ul part="list" style=${o9(styles)}>
-          <slot></slot>
-        </ul>`;
+    return T`
+      <div part="list" role="list" style=${o9(styles)}>
+        <slot></slot>
+      </div>
+    `;
   }
 };
 List.styles = listStyles;
@@ -8422,7 +8408,7 @@ var badgeStyles = i`
   }
 
   :host([appearance='solid'][variant='neutral']) span[part='base'] {
-    background: var(--lt-color-neutral-500);
+    background: var(--lt-interactive-neutral-bg);
     border-color: transparent;
     color: var(--lt-color-white);
   }
@@ -9604,7 +9590,7 @@ var headerStyles = i`
 
   :host([background='primary']) {
     background: var(--lt-bg-primary);
-    color: var(--lt-text-inverse);
+    color: var(--lt-text-on-primary);
   }
 
   :host([background='surface']) {
@@ -10047,7 +10033,6 @@ var breadcrumbStyles = i`
     display: flex;
     flex-wrap: wrap;
     gap: 0;
-    list-style: none;
     margin: 0;
     padding: 0;
   }
@@ -10110,9 +10095,9 @@ var Breadcrumb = class extends ThemeableElement {
   render() {
     return T`
       <nav aria-label="breadcrumb">
-        <ol part="list">
+        <div part="list" role="list">
           <slot></slot>
-        </ol>
+        </div>
       </nav>
     `;
   }
@@ -10131,17 +10116,21 @@ var BreadcrumbItem = class extends ThemeableElement {
     this.current = false;
     this.separator = "";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
   render() {
     const hasSeparatorOverride = this.separator !== null && this.separator !== void 0 && this.separator !== "";
     return T`
-      <li part="item">
+      <div part="item">
         ${this.current || !this.href ? T`<span part="text" aria-current=${this.current ? "page" : "false"}><slot></slot></span>` : T`<a part="link" href=${this.href}><slot></slot></a>`}
         <span
           part="separator"
           aria-hidden="true"
           style=${hasSeparatorOverride ? `--lt-breadcrumb-separator: "${this.separator}"` : ""}
         ></span>
-      </li>
+      </div>
     `;
   }
 };
@@ -10930,14 +10919,14 @@ var Pagination = class extends ThemeableElement {
     return T`
       <nav aria-label="Pagination">
         <button aria-label="First page" ?disabled=${atFirst || this.disabled} @click=${() => this._go(1)}>
-          <lt-icon name="double-nav-arrow-left" size="sm"></lt-icon>
+          <lt-icon name="double-caret-left" size="sm"></lt-icon>
         </button>
         <button
           aria-label="Previous page"
           ?disabled=${atFirst || this.disabled}
           @click=${() => this._go(this.page - 1)}
         >
-          <lt-icon name="nav-arrow-left" size="sm"></lt-icon>
+          <lt-icon name="caret-left" size="sm"></lt-icon>
         </button>
 
         ${pages.map(
@@ -10952,10 +10941,10 @@ var Pagination = class extends ThemeableElement {
     )}
 
         <button aria-label="Next page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.page + 1)}>
-          <lt-icon name="nav-arrow-right" size="sm"></lt-icon>
+          <lt-icon name="caret-right" size="sm"></lt-icon>
         </button>
         <button aria-label="Last page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.totalPages)}>
-          <lt-icon name="double-nav-arrow-right" size="sm"></lt-icon>
+          <lt-icon name="double-caret-right" size="sm"></lt-icon>
         </button>
       </nav>
     `;
@@ -11398,10 +11387,10 @@ var calendarStyles = i`
     background: var(--lt-interactive-primary-bg-hover);
   }
 
-  /* Outside days */
+  /* 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);
-    opacity: 0.5;
   }
 
   /* Empty filler cell */
@@ -12778,7 +12767,7 @@ var Combobox = class extends ThemeableElement {
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
         />
-        <lt-icon class="chevron" name="nav-arrow-down" size="sm"></lt-icon>
+        <lt-icon class="chevron" name="caret-down" size="sm"></lt-icon>
       </div>
     `;
     return T`

package/dist/index.js

@@ -604,10 +604,10 @@ var buttonStyles = css3`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_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);
@@ -1799,7 +1799,6 @@ var iconButtonStyles = css9`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */
@@ -1872,11 +1871,11 @@ var iconButtonStyles = css9`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([appearance='filled'][variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-bg: var(--lt-interactive-neutral-bg-hover);
     --_hover-color: var(--lt-color-neutral-50);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_active-bg: var(--lt-interactive-neutral-bg-active);
   }
   :host([appearance='filled'][variant='success']) {
     --_bg: var(--lt-interactive-success-bg);
@@ -2344,20 +2343,16 @@ var listStyles = css11`
     --list-marker-color: var(--lt-color-neutral-500);
   }
 
-  ul,
-  ol {
+  [part='list'] {
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 var(--lt-spacing-5);
     list-style-position: outside;
+    list-style-type: disc;
     color: var(--lt-text-default);
   }
 
-  ul {
-    padding-left: var(--lt-spacing-5);
-  }
-
-  ol {
-    padding-left: var(--lt-spacing-5);
+  :host([type='ordered']) [part='list'] {
+    list-style-type: decimal;
   }
 
   ::slotted(li),
@@ -2379,8 +2374,7 @@ var listStyles = css11`
   }
 
   /* No marker */
-  :host([no-marker]) ul,
-  :host([no-marker]) ol {
+  :host([no-marker]) [part='list'] {
     list-style: none;
     padding-left: 0;
   }
@@ -2404,17 +2398,12 @@ var listStyles = css11`
     margin-bottom: 0;
   }
 
-  ul ::slotted(li)::marker {
-    color: var(--list-marker-color);
-  }
-
-  ol ::slotted(li)::marker {
+  [part='list'] ::slotted(li)::marker {
     color: var(--list-marker-color);
   }
 
   /* Size variants */
-  :host([size='sm']) ul,
-  :host([size='sm']) ol {
+  :host([size='sm']) [part='list'] {
     font-size: 0.875rem;
     line-height: 1.5;
   }
@@ -2424,8 +2413,7 @@ var listStyles = css11`
     margin-bottom: var(--lt-spacing-1);
   }
 
-  :host([size='md']) ul,
-  :host([size='md']) ol {
+  :host([size='md']) [part='list'] {
     font-size: 1rem;
     line-height: 1.6;
   }
@@ -2435,8 +2423,7 @@ var listStyles = css11`
     margin-bottom: var(--lt-spacing-2);
   }
 
-  :host([size='lg']) ul,
-  :host([size='lg']) ol {
+  :host([size='lg']) [part='list'] {
     font-size: 1.125rem;
     line-height: 1.7;
   }
@@ -2604,13 +2591,12 @@ var List = class extends ThemeableElement {
     this.noMarker = false;
   }
   render() {
-    const isOrdered = this.type === "ordered";
     const styles = this.markerColor ? { "--list-marker-color": this.markerColor } : {};
-    return isOrdered ? html11`<ol part="list" style=${styleMap3(styles)}>
-          <slot></slot>
-        </ol>` : html11`<ul part="list" style=${styleMap3(styles)}>
-          <slot></slot>
-        </ul>`;
+    return html11`
+      <div part="list" role="list" style=${styleMap3(styles)}>
+        <slot></slot>
+      </div>
+    `;
   }
 };
 List.styles = listStyles;
@@ -7062,7 +7048,7 @@ var badgeStyles = css24`
   }
 
   :host([appearance='solid'][variant='neutral']) span[part='base'] {
-    background: var(--lt-color-neutral-500);
+    background: var(--lt-interactive-neutral-bg);
     border-color: transparent;
     color: var(--lt-color-white);
   }
@@ -8281,7 +8267,7 @@ var headerStyles = css31`
 
   :host([background='primary']) {
     background: var(--lt-bg-primary);
-    color: var(--lt-text-inverse);
+    color: var(--lt-text-on-primary);
   }
 
   :host([background='surface']) {
@@ -8739,7 +8725,6 @@ var breadcrumbStyles = css34`
     display: flex;
     flex-wrap: wrap;
     gap: 0;
-    list-style: none;
     margin: 0;
     padding: 0;
   }
@@ -8802,9 +8787,9 @@ var Breadcrumb = class extends ThemeableElement {
   render() {
     return html33`
       <nav aria-label="breadcrumb">
-        <ol part="list">
+        <div part="list" role="list">
           <slot></slot>
-        </ol>
+        </div>
       </nav>
     `;
   }
@@ -8823,17 +8808,21 @@ var BreadcrumbItem = class extends ThemeableElement {
     this.current = false;
     this.separator = "";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
   render() {
     const hasSeparatorOverride = this.separator !== null && this.separator !== void 0 && this.separator !== "";
     return html33`
-      <li part="item">
+      <div part="item">
         ${this.current || !this.href ? html33`<span part="text" aria-current=${this.current ? "page" : "false"}><slot></slot></span>` : html33`<a part="link" href=${this.href}><slot></slot></a>`}
         <span
           part="separator"
           aria-hidden="true"
           style=${hasSeparatorOverride ? `--lt-breadcrumb-separator: "${this.separator}"` : ""}
         ></span>
-      </li>
+      </div>
     `;
   }
 };
@@ -9654,14 +9643,14 @@ var Pagination = class extends ThemeableElement {
     return html39`
       <nav aria-label="Pagination">
         <button aria-label="First page" ?disabled=${atFirst || this.disabled} @click=${() => this._go(1)}>
-          <lt-icon name="double-nav-arrow-left" size="sm"></lt-icon>
+          <lt-icon name="double-caret-left" size="sm"></lt-icon>
         </button>
         <button
           aria-label="Previous page"
           ?disabled=${atFirst || this.disabled}
           @click=${() => this._go(this.page - 1)}
         >
-          <lt-icon name="nav-arrow-left" size="sm"></lt-icon>
+          <lt-icon name="caret-left" size="sm"></lt-icon>
         </button>
 
         ${pages.map(
@@ -9676,10 +9665,10 @@ var Pagination = class extends ThemeableElement {
     )}
 
         <button aria-label="Next page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.page + 1)}>
-          <lt-icon name="nav-arrow-right" size="sm"></lt-icon>
+          <lt-icon name="caret-right" size="sm"></lt-icon>
         </button>
         <button aria-label="Last page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.totalPages)}>
-          <lt-icon name="double-nav-arrow-right" size="sm"></lt-icon>
+          <lt-icon name="double-caret-right" size="sm"></lt-icon>
         </button>
       </nav>
     `;
@@ -10132,10 +10121,10 @@ var calendarStyles = css42`
     background: var(--lt-interactive-primary-bg-hover);
   }
 
-  /* Outside days */
+  /* 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);
-    opacity: 0.5;
   }
 
   /* Empty filler cell */
@@ -11518,7 +11507,7 @@ var Combobox = class extends ThemeableElement {
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
         />
-        <lt-icon class="chevron" name="nav-arrow-down" size="sm"></lt-icon>
+        <lt-icon class="chevron" name="caret-down" size="sm"></lt-icon>
       </div>
     `;
     return html43`

package/dist/manifest.json

@@ -36,6 +36,8 @@
       "database",
       "diamond",
       "discord",
+      "double-caret-left",
+      "double-caret-right",
       "double-circle",
       "download",
       "drag",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/web",
-  "version": "0.10.1",
+  "version": "0.10.4",
   "description": "Web Components for the Latty design system — framework-agnostic UI components built with Lit",
   "license": "MIT",
   "repository": {
@@ -217,15 +217,15 @@
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "lit": "^3.2.0",
     "tsup": "^8.5.1",
-    "typescript": "^5.5.4"
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "lit": "^3.2.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@latty-ds/icons": "0.10.0"
+    "@latty-ds/icons": "0.10.4"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "f492491c8671b91c1717804f64754980ca563097"
+  "gitHead": "ce56485456ff6ef71d5c4606bdf484928ae30401"
 }