@latty-ds/web 0.10.4 → 1.0.0

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

@@ -36,6 +36,13 @@ __decorateClass([
   property({ reflect: true })
 ], ThemeableElement.prototype, "theme", 2);
 
+// src/utils/dev-warn.ts
+var devWarn = (tag, message) => {
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`[${tag}] ${message}`);
+  }
+};
+
 // src/components/icon-button/icon-button.styles.ts
 import { css } from "lit";
 var iconButtonStyles = css`
@@ -282,6 +289,14 @@ var iconButtonStyles = css`
   :host([round]) [part='base'] {
     border-radius: 50%;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/shared/aria-forwarding.ts
@@ -290,7 +305,8 @@ var FORWARDED_ARIA_ATTRIBUTES = [
   "aria-expanded",
   "aria-haspopup",
   "aria-controls",
-  "aria-current"
+  "aria-current",
+  "aria-description"
 ];
 var AriaForwardingController = class {
   constructor(host, getTarget) {
@@ -330,11 +346,30 @@ var IconButton = class extends ThemeableElement {
     this.bordered = false;
     this.size = "md";
     this.disabled = false;
+    this._blockClickWhileDisabled = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
     this.href = "";
     this.target = "";
     this.rel = "";
     this.round = false;
   }
+  firstUpdated() {
+    if (!this.label && !this.textContent?.trim()) {
+      devWarn("lt-icon-button", "no label or visible text \u2014 set `label` so screen readers can name the button");
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._blockClickWhileDisabled, { capture: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._blockClickWhileDisabled, { capture: true });
+  }
   _inner() {
     return this.icon ? html`<lt-icon name=${this.icon}></lt-icon>` : html`<slot></slot>`;
   }

package/dist/components/image/image.d.ts

@@ -5,18 +5,19 @@ import type { ImageLoading } from './image.types';
  * A thin wrapper around `<img>` with rounded corners, responsive fill support,
  * native lazy loading, and an error fallback mechanism.
  *
- * Native `load`/`error` events don't cross the shadow boundary, so they are
- * re-dispatched as composed `lt-load`/`lt-error` custom events. When a load
- * fails, the `fallback` slot is shown in place of the broken image; setting a
- * new `src` retries.
+ * The inner `<img>`'s `load`/`error` events don't leave the shadow root, so they
+ * are re-dispatched on the host under the same native names, with the `src` in
+ * `detail`. Like the native ones they don't bubble, so listen on `<lt-image>`
+ * itself. When a load fails, the `fallback` slot is shown in place of the broken
+ * image; setting a new `src` retries.
  *
  * @element lt-image
  * @part image - The underlying `<img>` element
  *
  * @slot fallback - Content shown in place of the image when loading fails
  *
- * @fires {CustomEvent<{ src: string }>} lt-load - Fired when the image loads successfully
- * @fires {CustomEvent<{ src: string }>} lt-error - Fired when the image fails to load
+ * @fires {CustomEvent<{ src: string }>} load - Fired when the image loads successfully
+ * @fires {CustomEvent<{ src: string }>} error - Fired when the image fails to load
  *
  * @example
  * ```html
@@ -50,7 +51,6 @@ export declare class Image extends ThemeableElement {
     private _errored;
     private get _borderRadius();
     willUpdate(changed: PropertyValues<this>): void;
-    private _dispatch;
     private _handleLoad;
     private _handleError;
     render(): import("lit").TemplateResult<1>;

package/dist/components/image/index.js

@@ -83,21 +83,16 @@ var Image = class extends ThemeableElement {
   willUpdate(changed) {
     if (changed.has("src")) this._errored = false;
   }
-  _dispatch(name) {
-    this.dispatchEvent(
-      new CustomEvent(name, {
-        detail: { src: this.src },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
+  // Literal event names (not a shared helper taking `name`): the manifest analyzer reads names from
+  // `new CustomEvent('…')` call sites, and a variable there produced a bogus event called "name".
+  // Non-bubbling and non-composed, exactly like the native <img> events they mirror — a bubbling
+  // `error` would also reach window-level error handlers (Sentry and friends) as a spurious error.
   _handleLoad() {
-    this._dispatch("lt-load");
+    this.dispatchEvent(new CustomEvent("load", { detail: { src: this.src } }));
   }
   _handleError() {
     this._errored = true;
-    this._dispatch("lt-error");
+    this.dispatchEvent(new CustomEvent("error", { detail: { src: this.src } }));
   }
   render() {
     if (this._errored) {

package/dist/components/list/index.js

@@ -49,7 +49,8 @@ var listStyles = css`
 
   [part='list'] {
     margin: 0;
-    padding: 0 0 0 var(--lt-spacing-5);
+    padding-block: 0;
+    padding-inline: var(--lt-spacing-5) 0;
     list-style-position: outside;
     list-style-type: disc;
     color: var(--lt-text-default);
@@ -73,14 +74,14 @@ var listStyles = css`
     display: block;
     margin-top: var(--lt-spacing-2);
     margin-bottom: var(--lt-spacing-2);
-    padding-left: var(--lt-spacing-5);
+    padding-inline-start: var(--lt-spacing-5);
     font-size: 0.9em;
   }
 
   /* No marker */
   :host([no-marker]) [part='list'] {
     list-style: none;
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   /* Divider */
@@ -168,7 +169,7 @@ var listItemStyles = css2`
 
   lt-icon {
     flex-shrink: 0;
-    color: var(--lt-color-neutral-500);
+    color: var(--lt-text-muted);
     font-size: inherit;
   }
 
@@ -212,6 +213,15 @@ var listItemStyles = css2`
     opacity: 0.6;
     pointer-events: none;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    a.inner,
+    button.inner {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/list/list-item.ts

package/dist/components/nav/index.js

@@ -85,7 +85,7 @@ var navItemStyles = css`
     font-size: var(--lt-nav-item-font-size, 0.9375rem);
     font-family: inherit;
     text-decoration: none;
-    text-align: left;
+    text-align: start;
     transition: background 120ms;
     white-space: nowrap;
   }
@@ -138,7 +138,7 @@ var navItemStyles = css`
   }
 
   .children-inner {
-    padding-left: var(--lt-spacing-4);
+    padding-inline-start: var(--lt-spacing-4);
     padding-top: var(--lt-spacing-1);
     padding-bottom: var(--lt-spacing-1);
     display: flex;
@@ -155,11 +155,11 @@ var navItemStyles = css`
   :host([orientation='horizontal']) .children {
     position: absolute;
     top: 100%;
-    left: 0;
+    inset-inline-start: 0;
     min-width: 160px;
     background: var(--lt-bg-default);
-    color: var(--lt-color-neutral-700);
-    border: var(--lt-border-width, 1px) solid var(--lt-color-neutral-200);
+    color: var(--lt-text-neutral);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
     border-radius: 8px;
     box-shadow:
       0 4px 6px -1px rgb(0 0 0 / 0.08),
@@ -176,6 +176,24 @@ var navItemStyles = css`
   :host([orientation='horizontal']) .children-inner {
     padding: var(--lt-spacing-2);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .item-trigger,
+    .chevron {
+      transition: none;
+    }
+
+    /* .children's height transition can't just be removed — nav-item.ts's _handleTransitionEnd() only finalizes
+       the open height to 'auto' (letting it respond to later content changes) once the CSS transition actually
+       completes; transition:none fires no transitionend at all, leaving it stuck at a fixed pixel height
+       forever. A 1ms duration is imperceptible (satisfies the reduced-motion intent) but still fires the event
+       the component depends on — same reasoning as lt-accordion's .content. */
+    .children {
+      transition: height 1ms;
+    }
+  }
 `;
 
 // src/components/nav/nav-item.ts
@@ -204,6 +222,10 @@ var NavItem = class extends ThemeableElement {
       }
     });
     this.requestUpdate();
+    void this.updateComplete.then(() => this._syncInitialHeight());
+  }
+  _syncInitialHeight() {
+    if (this.open && this.orientation === "vertical" && this._childrenEl) this._childrenEl.style.height = "auto";
   }
   updated(changed) {
     if (changed.has("open") && this._childrenEl && this._childrenInnerEl && this.orientation === "vertical") {
@@ -225,21 +247,15 @@ var NavItem = class extends ThemeableElement {
     }
   }
   _handleTriggerClick(e) {
-    if (this.disabled) return;
-    const proceed = this.dispatchEvent(
-      new CustomEvent("nav-item-click", {
-        detail: { href: this.href, label: this.label },
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      })
-    );
-    if (!proceed) e.preventDefault();
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
     if (this._hasChildren) {
       e.preventDefault();
       this.open = !this.open;
       this.dispatchEvent(
-        new CustomEvent("nav-collapse", {
+        new CustomEvent("toggle", {
           detail: { open: this.open },
           bubbles: true,
           composed: true
@@ -260,6 +276,8 @@ var NavItem = class extends ThemeableElement {
         class="item-trigger"
         href=${this.href}
         aria-current=${ariaCurrent}
+        aria-disabled=${this.disabled ? "true" : nothing}
+        tabindex=${this.disabled ? "-1" : nothing}
         @click=${this._handleTriggerClick}
         >${inner}</a
       >`;
@@ -267,6 +285,8 @@ var NavItem = class extends ThemeableElement {
     return html`<button
       class="item-trigger"
       aria-current=${ariaCurrent}
+      aria-expanded=${showChevron ? this.open : nothing}
+      aria-controls=${showChevron ? "children" : nothing}
       @click=${this._handleTriggerClick}
       ?disabled=${this.disabled}
     >
@@ -278,7 +298,7 @@ var NavItem = class extends ThemeableElement {
       <div class="item-root">
         ${this._renderTrigger()}
         ${this._hasChildren ? html`
-              <div class="children" @transitionend=${this._handleTransitionEnd}>
+              <div id="children" class="children" @transitionend=${this._handleTransitionEnd}>
                 <div class="children-inner">
                   <slot @slotchange=${this._onSlotChange}></slot>
                 </div>

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

@@ -9,17 +9,16 @@ import '@latty-ds/icons';
  * and nested children appear as a dropdown panel. In vertical mode, nested children
  * collapse/expand inline.
  *
- * SPA router integration: `nav-item-click` is cancelable — call `event.preventDefault()`
- * to stop the anchor's native navigation, navigate programmatically, and drive the
- * highlighted item via the `active` property (which also sets `aria-current="page"`).
+ * SPA router integration: items use the native `click` — listen for it on the `<lt-nav>` (or the item),
+ * call `event.preventDefault()` to stop the anchor's native navigation, and read the item from
+ * `event.target.closest('lt-nav-item')` (its `href` and `label`). Modifier keys (`event.metaKey`, …) come
+ * through as on any link. Drive the highlighted item via the `active` property (which also sets
+ * `aria-current="page"`).
  *
  * @element lt-nav-item
  *
- * @fires {CustomEvent<{ href: string; label: string }>} nav-item-click - Fired when the item
- *   is clicked (even when it has no href). Cancelable: `preventDefault()` stops the native
- *   anchor navigation so an SPA router can handle it.
- * @fires {CustomEvent<{ open: boolean }>} nav-collapse - Fired when a collapsible item
- *   is opened or closed.
+ * @fires {CustomEvent<{ open: boolean }>} toggle - Fired when a collapsible item is opened or
+ *   closed, like the native `toggle` of `<details>`.
  *
  * @slot - Nested `<lt-nav-item>` children (makes this item a collapsible group)
  *
@@ -71,6 +70,7 @@ export declare class NavItem extends ThemeableElement {
     private _childrenInnerEl?;
     private _hasChildren;
     private _onSlotChange;
+    private _syncInitialHeight;
     protected updated(changed: Map<string, unknown>): void;
     private _handleTransitionEnd;
     private _handleTriggerClick;

package/dist/components/pagination/index.js

@@ -99,7 +99,7 @@ var paginationStyles = css`
   button[aria-current='page'] {
     background: var(--lt-bg-primary-subtle);
     border-color: var(--lt-border-primary);
-    color: var(--lt-color-primary-700);
+    color: var(--lt-text-primary);
     font-weight: 600;
   }
 
@@ -109,15 +109,23 @@ var paginationStyles = css`
   }
 
   button:disabled {
-    color: var(--lt-color-neutral-400);
+    color: var(--lt-text-disabled);
     cursor: not-allowed;
   }
 
   :host([disabled]) button {
-    color: var(--lt-color-neutral-400);
+    color: var(--lt-text-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    button {
+      transition: none;
+    }
+  }
 `;
 
 // src/utils/dispatch.ts
@@ -125,6 +133,14 @@ var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(
 
 // src/components/pagination/pagination.ts
 import "@latty-ds/icons";
+var DEFAULT_LABELS = {
+  navigation: "Pagination",
+  firstPage: "First page",
+  previousPage: "Previous page",
+  page: (n) => `Page ${n}`,
+  nextPage: "Next page",
+  lastPage: "Last page"
+};
 var Pagination = class extends ThemeableElement {
   constructor() {
     super(...arguments);
@@ -132,15 +148,29 @@ var Pagination = class extends ThemeableElement {
     this.totalPages = 1;
     this.size = "md";
     this.disabled = false;
+    this.labels = {};
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  /** `total-pages` as a whole number >= 1: NaN, zero and negatives collapse to a single page. */
+  get _total() {
+    const total = Math.floor(Number(this.totalPages));
+    return Number.isFinite(total) && total >= 1 ? total : 1;
+  }
+  /** `page` clamped into 1.._total, so `page="99"` on a 10-page set is the last page, not "no page selected". */
+  get _current() {
+    const page = Math.floor(Number(this.page));
+    return Number.isFinite(page) ? Math.min(Math.max(page, 1), this._total) : 1;
   }
   _go(page) {
-    if (this.disabled || page < 1 || page > this.totalPages || page === this.page) return;
+    if (this.disabled || page < 1 || page > this._total || page === this._current) return;
     this.page = page;
     dispatch(this, "change", { page });
   }
   _pages() {
-    const total = this.totalPages;
-    const current = this.page;
+    const total = this._total;
+    const current = this._current;
     if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
     const pages = [1];
     if (current > 3) pages.push("\u2026");
@@ -153,25 +183,25 @@ var Pagination = class extends ThemeableElement {
   }
   render() {
     const pages = this._pages();
-    const atFirst = this.page <= 1;
-    const atLast = this.page >= this.totalPages;
+    const atFirst = this._current <= 1;
+    const atLast = this._current >= this._total;
     return html`
-      <nav aria-label="Pagination">
-        <button aria-label="First page" ?disabled=${atFirst || this.disabled} @click=${() => this._go(1)}>
+      <nav aria-label=${this._labels.navigation}>
+        <button aria-label=${this._labels.firstPage} ?disabled=${atFirst || this.disabled} @click=${() => this._go(1)}>
           <lt-icon name="double-caret-left" size="sm"></lt-icon>
         </button>
         <button
-          aria-label="Previous page"
+          aria-label=${this._labels.previousPage}
           ?disabled=${atFirst || this.disabled}
-          @click=${() => this._go(this.page - 1)}
+          @click=${() => this._go(this._current - 1)}
         >
           <lt-icon name="caret-left" size="sm"></lt-icon>
         </button>
 
         ${pages.map(
       (p) => p === "\u2026" ? html`<button class="ellipsis" aria-hidden="true" tabindex="-1">…</button>` : html`<button
-                aria-label="Page ${p}"
-                aria-current=${p === this.page ? "page" : nothing}
+                aria-label=${this._labels.page(p)}
+                aria-current=${p === this._current ? "page" : nothing}
                 ?disabled=${this.disabled}
                 @click=${() => this._go(p)}
               >
@@ -179,10 +209,18 @@ var Pagination = class extends ThemeableElement {
               </button>`
     )}
 
-        <button aria-label="Next page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.page + 1)}>
+        <button
+          aria-label=${this._labels.nextPage}
+          ?disabled=${atLast || this.disabled}
+          @click=${() => this._go(this._current + 1)}
+        >
           <lt-icon name="caret-right" size="sm"></lt-icon>
         </button>
-        <button aria-label="Last page" ?disabled=${atLast || this.disabled} @click=${() => this._go(this.totalPages)}>
+        <button
+          aria-label=${this._labels.lastPage}
+          ?disabled=${atLast || this.disabled}
+          @click=${() => this._go(this._total)}
+        >
           <lt-icon name="double-caret-right" size="sm"></lt-icon>
         </button>
       </nav>
@@ -202,6 +240,9 @@ __decorateClass([
 __decorateClass([
   property2({ type: Boolean, reflect: true })
 ], Pagination.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Object })
+], Pagination.prototype, "labels", 2);
 Pagination = __decorateClass([
   customElement("lt-pagination")
 ], Pagination);

package/dist/components/pagination/pagination.d.ts

@@ -1,5 +1,5 @@
 import { ThemeableElement } from '../../base';
-import type { PaginationSize } from './pagination.types';
+import type { PaginationSize, PaginationLabels } from './pagination.types';
 import '@latty-ds/icons';
 /**
  * Page navigation control for paged data sets.
@@ -28,6 +28,13 @@ export declare class Pagination extends ThemeableElement {
     size: PaginationSize;
     /** Disable all controls. */
     disabled: boolean;
+    /** Overridable UI text (nav landmark label, control button labels), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<PaginationLabels>;
+    private get _labels();
+    /** `total-pages` as a whole number >= 1: NaN, zero and negatives collapse to a single page. */
+    private get _total();
+    /** `page` clamped into 1.._total, so `page="99"` on a 10-page set is the last page, not "no page selected". */
+    private get _current();
     private _go;
     private _pages;
     render(): import("lit").TemplateResult<1>;

package/dist/components/pagination/pagination.types.d.ts

@@ -1 +1,16 @@
 export type PaginationSize = 'sm' | 'md' | 'lg';
+/** Overridable UI text for `lt-pagination`, for i18n. */
+export interface PaginationLabels {
+    /** Accessible landmark label for the pagination `<nav>`. */
+    navigation: string;
+    /** Accessible label for the "jump to first page" button. */
+    firstPage: string;
+    /** Accessible label for the "go to previous page" button. */
+    previousPage: string;
+    /** Accessible label for a numbered page button, given its 1-indexed page number. */
+    page: (n: number) => string;
+    /** Accessible label for the "go to next page" button. */
+    nextPage: string;
+    /** Accessible label for the "jump to last page" button. */
+    lastPage: string;
+}

package/dist/components/progress/index.js

@@ -34,6 +34,13 @@ __decorateClass([
   property({ reflect: true })
 ], ThemeableElement.prototype, "theme", 2);
 
+// src/utils/dev-warn.ts
+var devWarn = (tag, message) => {
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`[${tag}] ${message}`);
+  }
+};
+
 // src/components/progress/progress.ts
 import { customElement, property as property2 } from "lit/decorators.js";
 
@@ -61,11 +68,11 @@ var progressStyles = css`
     --_fill-color: var(--lt-interactive-error-bg);
   }
   :host([variant='neutral']) {
-    --_fill-color: var(--lt-color-neutral-600);
+    --_fill-color: var(--lt-interactive-neutral-bg);
   }
 
   [part='track'] {
-    background: var(--lt-progress-track-color, var(--lt-color-neutral-200));
+    background: var(--lt-progress-track-color, var(--lt-bg-overlay));
     border-radius: 999px;
     overflow: hidden;
     width: 100%;
@@ -115,6 +122,23 @@ var progressStyles = css`
       width: 100%;
     }
   }
+
+  /* ── Forced colors (Windows High Contrast) ─────────────────────────────────
+     Under forced-colors, both the track's neutral background and the fill's variant-coloured background are
+     flattened to Canvas, with no border on the track to fall back on — the whole bar disappears. A border on
+     the track (its boundary) plus a Highlight-coloured fill (the OS's own "active/selected" system color,
+     exempt from the flattening) keeps the progress amount legible regardless of which variant was set —
+     forced-colors mode overrides variant branding anyway, by design. ───────────────────────────────────────── */
+
+  @media (forced-colors: active) {
+    [part='track'] {
+      border: 1px solid CanvasText;
+    }
+
+    [part='fill'] {
+      background: Highlight;
+    }
+  }
 `;
 
 // src/components/progress/progress.ts
@@ -125,20 +149,28 @@ var Progress = class extends ThemeableElement {
     this.variant = "primary";
     this.size = "md";
     this.label = "";
+    this.max = 100;
+    this.valueText = "";
     this.indeterminate = false;
   }
+  firstUpdated() {
+    if (!this.label) devWarn("lt-progress", "no `label` \u2014 set one so assistive tech can name the progress bar");
+  }
   render() {
-    const pct = Math.min(100, Math.max(0, this.value));
+    const max = Number.isFinite(this.max) && this.max > 0 ? this.max : 100;
+    const value = Number.isFinite(this.value) ? Math.min(max, Math.max(0, this.value)) : 0;
+    const fillPct = value / max * 100;
     return html`
       <div
         part="track"
         role="progressbar"
         aria-label=${this.label || nothing}
-        aria-valuenow=${this.indeterminate ? nothing : pct}
+        aria-valuenow=${this.indeterminate ? nothing : value}
         aria-valuemin="0"
-        aria-valuemax="100"
+        aria-valuemax=${max}
+        aria-valuetext=${this.indeterminate || !this.valueText ? nothing : this.valueText}
       >
-        <div part="fill" style=${this.indeterminate ? nothing : `width:${pct}%`}></div>
+        <div part="fill" style=${this.indeterminate ? nothing : `width:${fillPct}%`}></div>
       </div>
     `;
   }
@@ -156,6 +188,12 @@ __decorateClass([
 __decorateClass([
   property2({ reflect: true })
 ], Progress.prototype, "label", 2);
+__decorateClass([
+  property2({ type: Number })
+], Progress.prototype, "max", 2);
+__decorateClass([
+  property2({ attribute: "value-text" })
+], Progress.prototype, "valueText", 2);
 __decorateClass([
   property2({ type: Boolean, reflect: true })
 ], Progress.prototype, "indeterminate", 2);

package/dist/components/progress/progress.d.ts

@@ -35,10 +35,22 @@ export declare class Progress extends ThemeableElement {
      * @default ''
      */
     label: string;
+    /**
+     * The value `value` is measured against (0–100 becomes 0–max). Ignored when `indeterminate` is true.
+     * @default 100
+     */
+    max: number;
+    /**
+     * Overrides the spoken value with a custom string (e.g. "3 of 5 steps") for scales a bare percentage
+     * doesn't describe well. Leave unset to let `aria-valuenow`/`aria-valuemax` speak for themselves.
+     * @default ''
+     */
+    valueText: string;
     /**
      * When true the bar animates continuously without a set value.
      * @default false
      */
     indeterminate: boolean;
+    protected firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }