@latty-ds/web 0.10.4 → 1.0.0

package/dist/components/dialog/index.js

@@ -34,6 +34,16 @@ __decorateClass([
   property({ reflect: true })
 ], ThemeableElement.prototype, "theme", 2);
 
+// 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/dialog/dialog.ts
 import { customElement as customElement4, property as property5, query } from "lit/decorators.js";
 
@@ -44,80 +54,83 @@ var dialogStyles = css`
     font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
-  /* Backdrop */
-  .backdrop {
-    align-items: center;
-    background: rgba(0, 0, 0, var(--lt-dialog-overlay-opacity, 0.5));
-    display: flex;
-    height: 100vh;
-    justify-content: center;
-    left: 0;
-    opacity: 0;
-    padding: var(--lt-spacing-4);
-    position: fixed;
-    top: 0;
-    transition: opacity 200ms ease;
-    width: 100vw;
-    z-index: 1000;
-  }
-
-  :host([open]) .backdrop {
-    opacity: 1;
-  }
-
-  :host(:not([open])) .backdrop {
-    pointer-events: none;
-  }
-
-  /* lt-surface host — flex item inside .backdrop, sized per size variant */
-  lt-surface {
-    width: 100%;
+  /* The native <dialog> is the modal surface now — its own showModal()/close() give the top-layer stacking,
+     focus trap and inert background for free (DLG-1). Reset its UA-default border/padding/background (a native
+     <dialog> renders with a visible border and white background by default) so lt-surface, not the browser's
+     own chrome, controls how it looks. Width/height are viewport-relative with a spacing-4 inset on each side
+     (matching the old .backdrop's padding), capped per size variant below. */
+  dialog {
+    background: transparent;
+    border: none;
+    max-height: calc(100vh - var(--lt-spacing-8));
+    overflow: visible;
+    padding: 0;
+    width: calc(100vw - var(--lt-spacing-8));
+    /* display/overlay (top-layer membership) are the only things animated on <dialog> itself — the entrance/exit
+       motion (opacity + translateY) lives on lt-surface below, unaffected by any of this. Without these,
+       close() would remove the dialog (and its ::backdrop) from rendering instantly, cutting that motion off
+       partway through; allow-discrete keeps it rendered for the transition's duration instead, then removes it. */
+    transition:
+      display 220ms allow-discrete,
+      overlay 220ms allow-discrete;
   }
 
-  :host([size='sm']) lt-surface {
+  :host([size='sm']) dialog {
     max-width: 400px;
   }
-  :host([size='md']) lt-surface {
+  :host([size='md']) dialog {
     max-width: 600px;
   }
-  :host([size='lg']) lt-surface {
+  :host([size='lg']) dialog {
     max-width: 800px;
   }
-  :host([size='xl']) lt-surface {
+  :host([size='xl']) dialog {
     max-width: 1000px;
   }
-
-  :host([size='fullscreen']) .backdrop {
-    padding: 0;
-  }
-
-  :host([size='fullscreen']) lt-surface {
+  :host([size='fullscreen']) dialog {
     height: 100vh;
     max-height: 100vh;
     max-width: 100vw;
+    width: 100vw;
   }
 
-  /* lt-surface inner div — layout and animation */
-  lt-surface::part(surface) {
+  /* ::backdrop replaces the old .backdrop div — it's a real paintable box (just not a real DOM node), so its
+     own background-color transition plays independently of lt-surface's. */
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0);
+    transition:
+      background-color 200ms ease,
+      display 220ms allow-discrete,
+      overlay 220ms allow-discrete;
+  }
+
+  dialog[open]::backdrop {
+    background: rgba(0, 0, 0, var(--lt-dialog-overlay-opacity, 0.5));
+  }
+
+  /* lt-surface — fills the <dialog>, sized by it (max-width/height above); the entrance/exit animation */
+  lt-surface {
     display: flex;
     flex-direction: column;
-    max-height: calc(100vh - var(--lt-spacing-8));
+    height: 100%;
     opacity: 0;
-    position: relative;
     transform: translateY(16px);
     transition:
       opacity 220ms ease,
       transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
+    width: 100%;
   }
 
-  :host([open]) lt-surface::part(surface) {
+  dialog[open] lt-surface {
     opacity: 1;
     transform: translateY(0);
   }
 
-  :host([size='fullscreen']) lt-surface::part(surface) {
-    border-radius: 0;
-    max-height: 100vh;
+  lt-surface::part(surface) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
   }
 
   /* Header */
@@ -144,7 +157,7 @@ var dialogStyles = css`
 
   /* Body */
   .body {
-    color: var(--lt-color-neutral-700);
+    color: var(--lt-text-neutral);
     flex: 1;
     overflow-y: auto;
     padding: var(--lt-spacing-5);
@@ -164,18 +177,46 @@ var dialogStyles = css`
     letter-spacing: 0.05rem;
     text-transform: lowercase;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    dialog,
+    dialog::backdrop,
+    lt-surface {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/shared/backdrop.styles.ts
 import { css as css2 } from "lit";
 var backdropFeatureStyles = css2`
-  :host([backdrop-blur]) .backdrop,
-  :host([backdrop-blur]) [part='overlay'] {
+  :host([backdrop-blur]) dialog::backdrop {
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
   }
 `;
 
+// src/components/shared/scroll-lock.ts
+var lockCount = 0;
+var previousOverflow = null;
+function lockBodyScroll() {
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockBodyScroll() {
+  if (lockCount === 0) return;
+  lockCount--;
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow ?? "";
+    previousOverflow = null;
+  }
+}
+
 // src/components/icon-button/icon-button.ts
 import { html, nothing } from "lit";
 import { customElement, property as property2 } from "lit/decorators.js";
@@ -427,6 +468,14 @@ var iconButtonStyles = css3`
   :host([round]) [part='base'] {
     border-radius: 50%;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/shared/aria-forwarding.ts
@@ -435,7 +484,8 @@ var FORWARDED_ARIA_ATTRIBUTES = [
   "aria-expanded",
   "aria-haspopup",
   "aria-controls",
-  "aria-current"
+  "aria-current",
+  "aria-description"
 ];
 var AriaForwardingController = class {
   constructor(host, getTarget) {
@@ -475,11 +525,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>`;
   }
@@ -599,10 +668,15 @@ var surfaceStyles = css4`
   :host([appearance='outlined']:hover) .surface {
     border-color: var(--lt-border-strong);
   }
-`;
 
-// src/utils/color.ts
-var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .surface {
+      transition: none;
+    }
+  }
+`;
 
 // src/components/surface/surface.ts
 var Surface = class extends ThemeableElement {
@@ -804,6 +878,20 @@ var textStyles = css5`
 `;
 
 // 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",
@@ -828,7 +916,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 html3`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -844,12 +933,15 @@ Text = __decorateClass([
 ], Text);
 
 // src/components/dialog/dialog.ts
+var DEFAULT_LABELS = {
+  close: "Close dialog"
+};
 var Dialog = class extends ThemeableElement {
   constructor() {
     super(...arguments);
     this.size = "md";
     this.open = false;
-    this.title = "";
+    this.heading = "";
     this.noCloseButton = false;
     this.closeOnBackdropClick = true;
     this.closeOnEscape = true;
@@ -857,13 +949,53 @@ var Dialog = class extends ThemeableElement {
     this.backdropBlur = false;
     this.elevation = "4";
     this.appearance = "filled";
-    this.handleKeydown = (event) => {
-      if (this.open && this.closeOnEscape && event.key === "Escape") {
-        event.preventDefault();
+    this.labels = {};
+    this._scrollLocked = false;
+    // `updated()` also runs after the very first render, where `changed.has('open')` is true even though nothing
+    // was ever shown — `open` starts false, so the else branch ran, firing a spurious `close` and clobbering
+    // `document.body.style.overflow` on page load (DLG-2). Same fix as lt-dropdown's `_skipNextOpenChange` (DDN-1)
+    // and lt-snackbar's (SNK-1).
+    this._skipNextOpenChange = true;
+    // Native <dialog> fires 'cancel' (cancelable) on Escape before it closes itself — preventDefault() here is
+    // how close-on-escape="false" is implemented now, instead of an old keydown listener racing the platform's
+    // own handling (confirmed working in the spike across all three engines).
+    this._handleCancel = (e) => {
+      if (!this.closeOnEscape) {
+        e.preventDefault();
+      }
+    };
+    // The native element's own 'close' event fires whenever IT closes, for any reason — our own close() call
+    // above, but also Escape (which closes it directly; nothing else tells us). Sync `open` back so the two never
+    // drift apart. If we're the ones who just called close() (inside handleClose(), above), `open` is already
+    // false and this is a no-op — Lit ignores a property set to its current value.
+    this._handleNativeClose = () => {
+      this.open = false;
+    };
+    // The clicked-outside-the-content area of a shown <dialog> resolves e.target to the <dialog> element itself
+    // (::backdrop isn't a real node and can't be an event target) — clicking any actual descendant instead
+    // targets that descendant, so this only ever fires for a genuine backdrop click (confirmed in the spike).
+    this._handleDialogClick = (e) => {
+      if (this.closeOnBackdropClick && e.target === this.dialogElement) {
         this.hide();
       }
     };
   }
+  /**
+   * @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-dialog title="…">` made hovering anywhere
+   * over the dialog show a browser tooltip, and assistive tech could read it as a duplicate description (DLG-6).
+   * 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 };
+  }
   /**
    * Opens the dialog.
    */
@@ -882,18 +1014,31 @@ var Dialog = class extends ThemeableElement {
   toggle() {
     this.open = !this.open;
   }
+  firstUpdated() {
+    if (!this.heading && !this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+      devWarn("lt-dialog", "no `heading` \u2014 the dialog has no accessible name; set `heading` or `aria-label`");
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("keydown", this.handleKeydown);
+    if (this.hasAttribute("title")) {
+      if (!this.heading) this.heading = this.getAttribute("title");
+      this.removeAttribute("title");
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("keydown", this.handleKeydown);
+    if (this._scrollLocked) {
+      unlockBodyScroll();
+      this._scrollLocked = false;
+    }
     this.restoreFocus();
   }
   updated(changedProperties) {
     if (changedProperties.has("open")) {
-      if (this.open) {
+      if (this._skipNextOpenChange) {
+        this._skipNextOpenChange = false;
+      } else if (this.open) {
         this.handleOpen();
       } else {
         this.handleClose();
@@ -902,19 +1047,25 @@ var Dialog = class extends ThemeableElement {
   }
   handleOpen() {
     this.previouslyFocusedElement = document.activeElement;
-    document.body.style.overflow = "hidden";
-    this.updateComplete.then(() => {
-      this.dialogElement?.focus();
-    });
-    const openEvent = new CustomEvent("open", { bubbles: true, composed: true });
-    this.dispatchEvent(openEvent);
-    this.dispatchEvent(new CustomEvent("dialog-open", { bubbles: true, composed: true }));
+    if (!this._scrollLocked) {
+      lockBodyScroll();
+      this._scrollLocked = true;
+    }
+    if (this.dialogElement && !this.dialogElement.open) {
+      this.dialogElement.showModal();
+    }
+    this.dispatchEvent(new CustomEvent("open", { bubbles: true, composed: true }));
   }
   handleClose() {
-    document.body.style.overflow = "";
+    if (this._scrollLocked) {
+      unlockBodyScroll();
+      this._scrollLocked = false;
+    }
+    if (this.dialogElement?.open) {
+      this.dialogElement.close();
+    }
     this.restoreFocus();
     this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
-    this.dispatchEvent(new CustomEvent("dialog-close", { bubbles: true, composed: true }));
   }
   restoreFocus() {
     if (this.previouslyFocusedElement) {
@@ -922,30 +1073,23 @@ var Dialog = class extends ThemeableElement {
       this.previouslyFocusedElement = void 0;
     }
   }
-  handleBackdropClick(event) {
-    if (this.closeOnBackdropClick && event.target === event.currentTarget) {
-      this.hide();
-    }
-  }
   handleCloseClick() {
     this.hide();
   }
   render() {
     return html4`
-      <div class="backdrop" ?inert=${!this.open} @click=${this.handleBackdropClick} part="backdrop">
-        <lt-surface
-          elevation=${this.elevation}
-          appearance=${this.appearance}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="dialog-title"
-          tabindex="-1"
-          part="dialog"
-        >
+      <dialog
+        part="dialog"
+        aria-labelledby="dialog-title"
+        @cancel=${this._handleCancel}
+        @close=${this._handleNativeClose}
+        @click=${this._handleDialogClick}
+      >
+        <lt-surface elevation=${this.elevation} appearance=${this.appearance} part="surface">
           <div class="header" part="header">
             <div class="header-content">
               <slot name="header">
-                ${this.title ? html4`<lt-text variant="h4" as="h2" id="dialog-title" class="title">${this.title}</lt-text>` : ""}
+                ${this.heading ? html4`<lt-text variant="h4" as="h2" id="dialog-title" class="title">${this.heading}</lt-text>` : ""}
               </slot>
             </div>
             ${!this.noCloseButton ? html4`
@@ -953,7 +1097,7 @@ var Dialog = class extends ThemeableElement {
                     class="close-button"
                     part="close-button"
                     icon="xmark"
-                    label="Close dialog"
+                    label=${this._labels.close}
                     size="sm"
                     @click=${this.handleCloseClick}
                   ></lt-icon-button>
@@ -970,7 +1114,7 @@ var Dialog = class extends ThemeableElement {
                 </div>
               ` : ""}
         </lt-surface>
-      </div>
+      </dialog>
     `;
   }
   hasSlot(name) {
@@ -986,7 +1130,7 @@ __decorateClass([
 ], Dialog.prototype, "open", 2);
 __decorateClass([
   property5()
-], Dialog.prototype, "title", 2);
+], Dialog.prototype, "heading", 2);
 __decorateClass([
   property5({ type: Boolean, attribute: "no-close-button" })
 ], Dialog.prototype, "noCloseButton", 2);
@@ -1009,7 +1153,10 @@ __decorateClass([
   property5({ reflect: true })
 ], Dialog.prototype, "appearance", 2);
 __decorateClass([
-  query("lt-surface")
+  property5({ type: Object })
+], Dialog.prototype, "labels", 2);
+__decorateClass([
+  query("dialog")
 ], Dialog.prototype, "dialogElement", 2);
 Dialog = __decorateClass([
   customElement4("lt-dialog")

package/dist/components/divider/index.js

@@ -80,8 +80,8 @@ var dividerStyles = css`
 
   :host([orientation='vertical']) [part='base']::before,
   :host([orientation='vertical']) [part='base']::after {
-    border-left: 1px solid var(--lt-border-default);
-    border-left-style: var(--_divider-style, solid);
+    border-inline-start: 1px solid var(--lt-border-default);
+    border-inline-start-style: var(--_divider-style, solid);
     content: '';
     flex: 1;
   }

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

@@ -12,6 +12,7 @@ import '../surface/surface';
  * @fires {CustomEvent} close - Fired when the menu closes
  *
  * @cssprop [--lt-dropdown-menu-padding] - Overrides the menu surface's default vertical padding.
+ * @cssprop [--lt-dropdown-max-height=min(24rem, 60vh)] - Tallest the menu grows before it scrolls.
  */
 export declare class Dropdown extends ThemeableElement {
     static styles: import("lit").CSSResult[];
@@ -19,8 +20,11 @@ export declare class Dropdown extends ThemeableElement {
     placement: DropdownPlacement;
     private _cleanupClickOutside;
     private _floatingCleanup;
+    private _skipNextOpenChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private _syncTriggerAria;
+    private _onFocusOut;
     updated(changed: Map<string, unknown>): void;
     show(): void;
     hide(): void;

package/dist/components/dropdown/index.js

@@ -1446,7 +1446,9 @@ var dropdownStyles = [
     }
 
     lt-surface.menu::part(surface) {
-      overflow: hidden;
+      max-height: var(--lt-dropdown-max-height, min(24rem, 60vh));
+      overflow-x: hidden;
+      overflow-y: auto;
       padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2));
     }
   `
@@ -1492,7 +1494,7 @@ var dropdownItemStyles = css3`
     font-size: 0.875rem;
     gap: var(--lt-spacing-2);
     padding: var(--lt-spacing-2) var(--lt-spacing-4);
-    text-align: left;
+    text-align: start;
     text-decoration: none;
     width: 100%;
   }
@@ -1633,6 +1635,14 @@ var surfaceStyles = css4`
   :host([appearance='outlined']:hover) .surface {
     border-color: var(--lt-border-strong);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .surface {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/surface/surface.ts
@@ -1674,6 +1684,22 @@ var Dropdown = class extends ThemeableElement {
     this.placement = "bottom-start";
     this._cleanupClickOutside = null;
     this._floatingCleanup = null;
+    // `updated()` also runs after the very first render, where `changed.has('open')` is true even though nothing
+    // ever opened. Without this, mounting a closed dropdown fired `close` and moved focus to the trigger on page
+    // load (verified: activeElement jumped to a native <button> trigger). Ships with lt-button's `delegatesFocus`
+    // (BTN-4) — before that, the same first-update run was a no-op for an `lt-button` trigger anyway, since its
+    // `.focus()` did nothing.
+    this._skipNextOpenChange = true;
+    // Tab away from the trigger/menu (as opposed to Escape, or a click outside, which are already handled) left
+    // the menu open — nothing closed it once focus moved on. relatedTarget is the element focus is moving *to*;
+    // if that's still somewhere inside this dropdown (the trigger, or an item — both light DOM children of this
+    // element), there's nothing to do.
+    this._onFocusOut = (e) => {
+      if (!this.open) return;
+      const next = e.relatedTarget;
+      if (next && this.contains(next)) return;
+      this.hide();
+    };
     this._onKeydown = (e) => {
       if (!this.open) return;
       const items = this._items();
@@ -1706,18 +1732,32 @@ var Dropdown = class extends ThemeableElement {
     super.connectedCallback();
     this.addEventListener("keydown", this._onKeydown);
     this.addEventListener("select", this.hide);
+    this.addEventListener("focusout", this._onFocusOut);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("keydown", this._onKeydown);
     this.removeEventListener("select", this.hide);
+    this.removeEventListener("focusout", this._onFocusOut);
     this._cleanupClickOutside?.();
     this._cleanupClickOutside = null;
     this._floatingCleanup?.();
     this._floatingCleanup = null;
   }
+  // The slotted trigger otherwise has no indication it opens a menu, or whether that menu is currently open.
+  _syncTriggerAria() {
+    const trigger = this._triggerEl();
+    if (!trigger) return;
+    trigger.setAttribute("aria-haspopup", "menu");
+    trigger.setAttribute("aria-expanded", this.open ? "true" : "false");
+  }
   updated(changed) {
+    this._syncTriggerAria();
     if (!changed.has("open")) return;
+    if (this._skipNextOpenChange) {
+      this._skipNextOpenChange = false;
+      return;
+    }
     if (this.open) {
       this._cleanupClickOutside = createClickOutsideHandler(this, () => this.hide(), { event: "click", capture: true });
       const triggerEl = this._triggerEl() ?? this;
@@ -1761,7 +1801,7 @@ var Dropdown = class extends ThemeableElement {
   render() {
     return html3`
       <div class="trigger-wrap" @click=${this.toggle}>
-        <slot name="trigger"></slot>
+        <slot name="trigger" @slotchange=${this._syncTriggerAria}></slot>
       </div>
       <lt-surface
         class="menu"

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

@@ -49,6 +49,10 @@ export declare class IconButton extends ThemeableElement {
     size: IconButtonSize;
     /** Whether the button is disabled. */
     disabled: boolean;
+    protected firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _blockClickWhileDisabled;
     /** When set, renders an `<a>` tag instead of `<button>`. */
     href: string;
     /** Forwarded to the anchor's `target` attribute when `href` is set. */