@latty-ds/web 0.10.4 → 1.0.0

package/dist/components/accordion/index.js

@@ -171,6 +171,24 @@ var accordionStyles = css`
     letter-spacing: 0.05rem;
     text-transform: lowercase;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    details,
+    .chevron {
+      transition: none;
+    }
+
+    /* .content's height transition can't just be removed — accordion.ts's handleTransitionEnd() clears
+       _animating and finalizes styles only when the CSS transition actually completes; transition:none fires no
+       transitionend at all, leaving _animating stuck true after the very first toggle and silently breaking
+       every subsequent open/close. A 1ms duration is imperceptible (satisfies the reduced-motion intent) but
+       still fires the event the component's own state machine depends on. */
+    .content {
+      transition: height 1ms;
+    }
+  }
 `;
 
 // src/components/accordion/accordion.ts
@@ -345,6 +363,20 @@ var textStyles = css2`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -369,7 +401,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -439,7 +472,8 @@ var Accordion = class extends ThemeableElement {
    * Handles the end of the transition to clear inline styles.
    * @private
    */
-  handleTransitionEnd() {
+  handleTransitionEnd(e) {
+    if (e.target !== this._content || e.propertyName !== "height") return;
     this._animating = false;
     if (this.open) {
       this._content.style.height = "auto";

package/dist/components/alert/alert.d.ts

@@ -1,5 +1,6 @@
+import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
-import type { AlertVariant, AlertAppearance } from './alert.types';
+import type { AlertVariant, AlertAppearance, AlertLabels } from './alert.types';
 import '../icon-button/icon-button';
 import '../text/text';
 /**
@@ -9,11 +10,11 @@ import '../text/text';
  *
  * @slot - Alert body. Accepts any HTML — bold, links, lists, etc.
  *
- * @fires close - Fired when the dismiss button is clicked, just before the element is removed.
+ * @fires close - Fired when the dismiss button is clicked, just before the element is hidden. Cancelable.
  *
  * @example
  * ```html
- * <lt-alert variant="success" title="Upload complete">
+ * <lt-alert variant="success" heading="Upload complete">
  *   Your file has been processed and is ready to download.
  * </lt-alert>
  * ```
@@ -32,20 +33,42 @@ export declare class Alert extends ThemeableElement {
     /** Visual treatment. `filled` uses a tinted background with border, `outlined` uses a white background with border, `solid` uses a solid color background with no border. */
     appearance: AlertAppearance;
     /** Optional bold heading above the body content. */
-    title: string;
+    heading: string;
+    /**
+     * @deprecated Use `heading` instead. `title` collides with the browser's own native tooltip attribute — every
+     * HTML element has one regardless of custom-element status, so `<lt-alert title="…">` made hovering anywhere
+     * over the alert show a browser tooltip, and assistive tech could read it as a duplicate description (ALR-3).
+     * This alias keeps existing markup/JS working; the native `title` attribute is always stripped as soon as
+     * it's read, so the tooltip never appears.
+     */
+    get title(): string;
+    set title(value: string);
     /**
      * Icon to show before the body. Leave empty for auto (shows variant icon for status variants),
      * set to `"none"` to suppress, or pass any icon name to override.
      */
     icon: string;
-    /** Show a dismiss button. Clicking it fires lt-close and removes the element. */
+    /** Show a dismiss button. Clicking it fires `close` and hides the element (sets `open` to false). */
     closable: boolean;
+    /**
+     * Whether the alert is visible. Defaults to true, so existing markup with no attribute keeps showing.
+     * Dismissing (or setting this to false directly) hides the alert but does not remove it from the DOM —
+     * that choice is left to the consumer, since a framework that owns this node would otherwise fight the
+     * alert over removing it out from under its own reconciliation.
+     */
+    open: boolean;
     /** Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600). */
     background: string;
-    /** Renders the title in small caps with wider letter spacing. */
+    /** Renders the heading in small caps with wider letter spacing. */
     uppercase: boolean;
+    /** Overridable UI text (the dismiss button's accessible name), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<AlertLabels>;
+    private get _labels();
+    connectedCallback(): void;
     private static readonly _iconMap;
     private _handleClose;
+    updated(changed: PropertyValues<this>): void;
+    private get _role();
     private get _resolvedIcon();
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,2 +1,7 @@
 export type AlertVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
 export type AlertAppearance = 'filled' | 'outlined' | 'solid';
+/** Overridable UI text, for i18n — English defaults; override only the keys you need. */
+export interface AlertLabels {
+    /** Accessible label for the dismiss button. */
+    dismiss: string;
+}

package/dist/components/alert/index.js

@@ -63,11 +63,16 @@ var alertStyles = css`
     transform: translateY(-4px);
   }
 
+  /* Hidden once the fade above finishes. Not removed from the DOM — see the open property's doc comment. */
+  :host(:not([open])) {
+    display: none;
+  }
+
   /* ── Per-variant tokens ──────────────────────────────────── */
 
   :host([variant='success']) {
     --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-success-subtle));
-    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-success));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-interactive-success-bg));
     --_border: var(--lt-alert-border-color, var(--lt-border-success-strong));
     --_color: var(--lt-alert-color, var(--lt-text-success));
     --_color-solid: var(--lt-alert-color, var(--lt-text-on-success));
@@ -75,7 +80,7 @@ var alertStyles = css`
 
   :host([variant='warning']) {
     --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-warning-subtle));
-    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-warning));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-interactive-warning-bg));
     --_border: var(--lt-alert-border-color, var(--lt-border-warning-strong));
     --_color: var(--lt-alert-color, var(--lt-text-warning));
     --_color-solid: var(--lt-alert-color, var(--lt-text-on-warning));
@@ -83,7 +88,7 @@ var alertStyles = css`
 
   :host([variant='error']) {
     --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-error-subtle));
-    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-error));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-interactive-error-bg));
     --_border: var(--lt-alert-border-color, var(--lt-border-error-strong));
     --_color: var(--lt-alert-color, var(--lt-text-error));
     --_color-solid: var(--lt-alert-color, var(--lt-text-on-error));
@@ -91,7 +96,7 @@ var alertStyles = css`
 
   :host([variant='info']) {
     --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-info-subtle));
-    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-info));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-interactive-info-bg));
     --_border: var(--lt-alert-border-color, var(--lt-border-info-strong));
     --_color: var(--lt-alert-color, var(--lt-text-info));
     --_color-solid: var(--lt-alert-color, var(--lt-text-on-info));
@@ -124,7 +129,8 @@ var alertStyles = css`
     color: var(--_color);
   }
 
-  /* solid — solid color bg, no border */
+  /* solid — solid color bg, no border. Fills come from the interactive tokens, the same ones the on-colour is
+     picked against, so the text holds AA; body text is never dimmed with opacity, which would only lower it. */
   :host([appearance='solid']) .inner {
     background: var(--_bg-solid);
     border: none;
@@ -155,10 +161,6 @@ var alertStyles = css`
     line-height: 1.5;
   }
 
-  .title + .content {
-    opacity: 0.8;
-  }
-
   /* ── Close button ────────────────────────────────────────── */
 
   .close {
@@ -176,6 +178,14 @@ var alertStyles = css`
     letter-spacing: 0.05rem;
     text-transform: lowercase;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      transition: none;
+    }
+  }
 `;
 
 // src/utils/dispatch.ts
@@ -184,6 +194,13 @@ var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(
 // src/utils/color.ts
 var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
 
+// 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.ts
 import { html, nothing } from "lit";
 import { customElement, property as property2 } from "lit/decorators.js";
@@ -435,6 +452,14 @@ var iconButtonStyles = css2`
   :host([round]) [part='base'] {
     border-radius: 50%;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/shared/aria-forwarding.ts
@@ -443,7 +468,8 @@ var FORWARDED_ARIA_ATTRIBUTES = [
   "aria-expanded",
   "aria-haspopup",
   "aria-controls",
-  "aria-current"
+  "aria-current",
+  "aria-description"
 ];
 var AriaForwardingController = class {
   constructor(host, getTarget) {
@@ -483,11 +509,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>`;
   }
@@ -721,6 +766,20 @@ var textStyles = css3`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -745,7 +804,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html2`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -761,22 +821,63 @@ Text = __decorateClass([
 ], Text);
 
 // src/components/alert/alert.ts
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss"
+};
 var Alert = class extends ThemeableElement {
   constructor() {
     super(...arguments);
     this.variant = "default";
     this.appearance = "filled";
-    this.title = "";
+    this.heading = "";
     this.icon = "";
     this.closable = false;
+    this.open = true;
     this.background = "";
     this.uppercase = false;
+    this.labels = {};
+  }
+  /**
+   * @deprecated Use `heading` instead. `title` collides with the browser's own native tooltip attribute — every
+   * HTML element has one regardless of custom-element status, so `<lt-alert title="…">` made hovering anywhere
+   * over the alert show a browser tooltip, and assistive tech could read it as a duplicate description (ALR-3).
+   * This alias keeps existing markup/JS working; the native `title` attribute is always stripped as soon as
+   * it's read, so the tooltip never appears.
+   */
+  get title() {
+    return this.heading;
+  }
+  set title(value) {
+    this.heading = value;
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasAttribute("title")) {
+      if (!this.heading) this.heading = this.getAttribute("title");
+      this.removeAttribute("title");
+    }
   }
   _handleClose() {
     const cancelled = !dispatch(this, "close", void 0, { cancelable: true });
     if (cancelled) return;
+    this.tabIndex = -1;
+    this.focus();
     this.setAttribute("dismissed", "");
-    setTimeout(() => this.remove(), 200);
+    setTimeout(() => {
+      this.open = false;
+    }, 200);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("open") && this.open) this.removeAttribute("dismissed");
+  }
+  // Error/warning alerts are urgent enough to interrupt the screen reader (`alert`, assertive); the rest are
+  // informational and should announce without cutting off whatever the user was already hearing (`status`, polite).
+  get _role() {
+    return this.variant === "error" || this.variant === "warning" ? "alert" : "status";
   }
   get _resolvedIcon() {
     if (this.icon === "none") return "";
@@ -788,17 +889,17 @@ var Alert = class extends ThemeableElement {
     const iconName = this._resolvedIcon;
     const bgStyle = styleMap(this.background ? { background: resolveColorValue(this.background) } : {});
     return html3`
-      <div class="inner" part="base" role="alert" style=${bgStyle}>
+      <div class="inner" part="base" role=${this._role} style=${bgStyle}>
         ${iconName ? html3`<lt-icon class="icon" name=${iconName} part="icon"></lt-icon>` : ""}
         <div class="body">
-          ${this.title ? html3`<lt-text variant="h6" as="p" class="title" part="title">${this.title}</lt-text>` : ""}
+          ${this.heading ? html3`<lt-text variant="h6" as="p" class="title" part="title">${this.heading}</lt-text>` : ""}
           <div class="content" part="content"><slot></slot></div>
         </div>
         ${this.closable ? html3`<lt-icon-button
               class="close"
               part="close"
               icon="xmark"
-              label="Dismiss"
+              label=${this._labels.dismiss}
               size="sm"
               @click=${this._handleClose}
             ></lt-icon-button>` : ""}
@@ -822,19 +923,25 @@ __decorateClass([
 ], Alert.prototype, "appearance", 2);
 __decorateClass([
   property4({ reflect: true })
-], Alert.prototype, "title", 2);
+], Alert.prototype, "heading", 2);
 __decorateClass([
   property4({ reflect: true })
 ], Alert.prototype, "icon", 2);
 __decorateClass([
   property4({ type: Boolean, reflect: true })
 ], Alert.prototype, "closable", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], Alert.prototype, "open", 2);
 __decorateClass([
   property4({ reflect: true })
 ], Alert.prototype, "background", 2);
 __decorateClass([
   property4({ type: Boolean, reflect: true })
 ], Alert.prototype, "uppercase", 2);
+__decorateClass([
+  property4({ type: Object })
+], Alert.prototype, "labels", 2);
 Alert = __decorateClass([
   customElement3("lt-alert")
 ], Alert);

package/dist/components/avatar/avatar.d.ts

@@ -1,4 +1,5 @@
 import { ThemeableElement } from '../../base';
+import type { PropertyValues } from 'lit';
 import type { AvatarSize, AvatarShape, AvatarColor } from './avatar.types';
 import '@latty-ds/icons';
 /**
@@ -22,6 +23,7 @@ export declare class Avatar extends ThemeableElement {
     color: AvatarColor;
     private _imgError;
     private get _initials();
+    willUpdate(changed: PropertyValues<this>): void;
     private _handleImgError;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/avatar/index.js

@@ -11,6 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/components/avatar/avatar.ts
 import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 // src/base/themeable-element.ts
 import { LitElement } from "lit";
@@ -176,17 +177,23 @@ var Avatar = class extends ThemeableElement {
     this.color = "neutral";
     this._imgError = false;
   }
+  // Array.from walks code points, so an emoji or other astral character isn't cut in half; empty words are dropped,
+  // so a whitespace-only name yields no initials instead of throwing.
   get _initials() {
-    return this.name.trim().split(/\s+/).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+    return this.name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0].toUpperCase()).join("");
+  }
+  willUpdate(changed) {
+    if (changed.has("src")) this._imgError = false;
   }
   _handleImgError() {
     this._imgError = true;
   }
   render() {
     const showImage = this.src && !this._imgError;
-    const showInitials = !showImage && this.name;
+    const showInitials = !showImage && this._initials;
+    const label = this.alt || this.name.trim();
     return html`
-      <span part="base" aria-label=${this.alt || this.name || "avatar"} role="img">
+      <span part="base" role=${label ? "img" : "presentation"} aria-label=${ifDefined(label || void 0)}>
         ${showImage ? html`<img part="image" src=${this.src} alt=${this.alt || this.name} @error=${this._handleImgError} />` : showInitials ? html`<span part="initials" class="initials">${this._initials}</span>` : html`<lt-icon part="icon" name="user" size="sm"></lt-icon>`}
       </span>
     `;

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

@@ -1,5 +1,6 @@
 import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
+import type { BreadcrumbLabels } from './breadcrumb.types';
 /**
  * Navigation breadcrumb trail container.
  * Place `lt-breadcrumb-item` elements inside as direct children.
@@ -23,6 +24,9 @@ export declare class Breadcrumb extends ThemeableElement {
      * @default '/'
      */
     separator: string;
+    /** Overridable UI text (the breadcrumb nav's landmark label), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<BreadcrumbLabels>;
+    private get _labels();
     updated(changed: PropertyValues<this>): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1 +1,6 @@
 export type BreadcrumbSeparator = string;
+/** Overridable UI text, for i18n — English defaults; override only the keys you need. */
+export interface BreadcrumbLabels {
+    /** Accessible landmark label for the breadcrumb `<nav>`. */
+    navigation: string;
+}

package/dist/components/breadcrumb/index.js

@@ -62,13 +62,12 @@ var breadcrumbItemStyles = css`
   }
 
   [part='link'] {
-    color: var(--lt-interactive-primary-bg);
+    color: var(--lt-text-primary);
     text-decoration: none;
     transition: color 120ms ease;
   }
 
   [part='link']:hover {
-    color: var(--lt-interactive-primary-bg-hover);
     text-decoration: underline;
   }
 
@@ -90,13 +89,28 @@ var breadcrumbItemStyles = css`
   :host(:last-child) [part='separator'] {
     display: none;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='link'] {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/breadcrumb/breadcrumb.ts
+var DEFAULT_LABELS = {
+  navigation: "breadcrumb"
+};
 var Breadcrumb = class extends ThemeableElement {
   constructor() {
     super(...arguments);
     this.separator = "/";
+    this.labels = {};
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
   }
   updated(changed) {
     super.updated(changed);
@@ -110,7 +124,7 @@ var Breadcrumb = class extends ThemeableElement {
   }
   render() {
     return html`
-      <nav aria-label="breadcrumb">
+      <nav aria-label=${this._labels.navigation}>
         <div part="list" role="list">
           <slot></slot>
         </div>
@@ -122,6 +136,9 @@ Breadcrumb.styles = breadcrumbStyles;
 __decorateClass([
   property2()
 ], Breadcrumb.prototype, "separator", 2);
+__decorateClass([
+  property2({ type: Object })
+], Breadcrumb.prototype, "labels", 2);
 Breadcrumb = __decorateClass([
   customElement("lt-breadcrumb")
 ], Breadcrumb);

package/dist/components/button/button.d.ts

@@ -42,9 +42,22 @@ import '@latty-ds/icons';
 export declare class Button extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     private _internals;
     private _ariaForwarding;
+    private _fieldsetDisabled;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _blockClickWhileBusy;
+    formDisabledCallback(disabled: boolean): void;
     /**
      * Visual variant that determines the button's color scheme.
      * @default 'primary'
@@ -117,6 +130,26 @@ export declare class Button extends ThemeableElement {
      * @default 'button'
      */
     type: ButtonType;
+    /**
+     * Name submitted alongside `value` when this button triggers a form submission (`type="submit"`), matching a
+     * native `<button name value>` — only included in the submitted data for the button that actually triggered
+     * the submission, not every submit button in the form.
+     * @default ''
+     */
+    name: string;
+    /**
+     * Value submitted alongside `name`. See `name`.
+     * @default ''
+     */
+    value: string;
+    /**
+     * Overrides the form's own `action` for a submission triggered by this button, matching a native
+     * `<button formaction>`. Only applies when `type="submit"`.
+     * @default ''
+     */
+    formAction: string;
+    private _proxySubmitBtn;
+    private _getProxySubmitBtn;
     private _handleClick;
     render(): import("lit").TemplateResult<1>;
 }