@latty-ds/web 0.10.0 → 0.10.3

package/custom-elements.json

@@ -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",
@@ -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-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%; } `"
         }
       ],
       "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 */

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/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/dialog/index.js

@@ -241,7 +241,6 @@ var iconButtonStyles = css3`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */

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 */

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 */

package/dist/css/latty.css

@@ -17,7 +17,7 @@ body {
   margin: 0;
   color: var(--lt-text-default);
   background: var(--lt-bg-default);
-  font-family: sans-serif;
+  font-family: var(--lt-typography-fontFamilyPrimary, sans-serif);
 }
 
 /* Media defaults */

package/dist/index.cjs

@@ -3129,7 +3129,6 @@ var iconButtonStyles = i`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */
@@ -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;
@@ -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>
     `;
@@ -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

@@ -1799,7 +1799,6 @@ var iconButtonStyles = css9`
 
   a[part='base'] {
     text-decoration: none;
-    color: inherit;
   }
 
   /* sizes */
@@ -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;
@@ -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>
     `;
@@ -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.0",
+  "version": "0.10.3",
   "description": "Web Components for the Latty design system — framework-agnostic UI components built with Lit",
   "license": "MIT",
   "repository": {
@@ -224,8 +224,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@latty-ds/icons": "0.10.0"
+    "@latty-ds/icons": "0.10.3"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "7b0b9856be6755a573abf02c0b7cbdb1a6db4fef"
+  "gitHead": "a708880d34efd89654a429bc2419f9016956c454"
 }