@latty-ds/web 0.10.3 → 1.0.0

package/dist/components/snackbar/index.js

@@ -40,27 +40,50 @@ import { customElement as customElement2, property as property3 } from "lit/deco
 // src/components/snackbar/snackbar.styles.ts
 import { css } from "lit";
 var snackbarStyles = css`
+  /* ── Popover ─────────────────────────────────────────────── The host itself is the popover element (no
+     wrapped child, unlike lt-dialog/lt-sidepanel's inner <dialog>) — the browser's own [popover] UA stylesheet
+     sets inset:0, margin:auto, width/height:fit-content, padding, border, and Canvas colors, all of which are
+     reset below in favor of this component's own bottom-center placement. display is deliberately NOT set on
+     the base rule — a closed (not :popover-open) popover must stay display:none (the native default) so it's
+     genuinely non-interactive and out of the accessibility tree; it's set to block only for the open state,
+     below. display/overlay need transition-behavior: allow-discrete so hidePopover() doesn't remove it from
+     rendering instantly, cutting the exit transition off partway through — same reasoning as lt-dialog. ─────── */
+
   :host {
-    display: block;
+    background: transparent;
+    border: none;
     bottom: 24px;
     left: 50%;
+    margin: 0;
     max-width: calc(100vw - 48px);
     opacity: 0;
+    overflow: visible;
+    padding: 0;
     position: fixed;
+    right: auto;
+    top: auto;
     transform: translateX(-50%) translateY(8px);
     transition:
       opacity 200ms ease,
       transform 200ms ease,
-      visibility 200ms ease;
-    visibility: hidden;
+      display 200ms allow-discrete,
+      overlay 200ms allow-discrete;
     width: max-content;
-    z-index: 9000;
   }
 
   :host([open]) {
+    display: block;
     opacity: 1;
     transform: translateX(-50%) translateY(0);
-    visibility: visible;
+  }
+
+  /* A newly-shown popover has no earlier rendered frame to transition from — @starting-style supplies one so
+     the fade/slide-in actually animates instead of snapping straight to the open position. */
+  @starting-style {
+    :host([open]) {
+      opacity: 0;
+      transform: translateX(-50%) translateY(8px);
+    }
   }
 
   /* ── Layout ──────────────────────────────────────────────── */
@@ -115,13 +138,14 @@ var snackbarStyles = css`
     font-size: 0.8125rem;
     font-weight: 600;
     letter-spacing: 0.05em;
-    opacity: 0.85;
     padding: 0 var(--lt-spacing-1);
     text-transform: uppercase;
   }
 
+  /* Text on a coloured fill is never dimmed with opacity (that blends it into the fill and lowers its contrast
+     below whatever the on-colour was picked for), so hover is shown with an underline instead. */
   .action:hover {
-    opacity: 1;
+    text-decoration: underline;
   }
 
   /* ── Close button ────────────────────────────────────────── */
@@ -135,6 +159,8 @@ var snackbarStyles = css`
     display: flex;
     flex-shrink: 0;
     justify-content: center;
+    min-height: 24px; /* WCAG 2.5.8 */
+    min-width: 24px;
     opacity: 0.7;
     padding: 0;
   }
@@ -142,6 +168,14 @@ var snackbarStyles = css`
   .close:hover {
     opacity: 1;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      transition: none;
+    }
+  }
 `;
 
 // src/utils/dispatch.ts
@@ -208,6 +242,14 @@ var surfaceStyles = css2`
   :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
@@ -242,6 +284,9 @@ Surface = __decorateClass([
 ], Surface);
 
 // src/components/snackbar/snackbar.ts
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss"
+};
 var Snackbar = class extends ThemeableElement {
   constructor() {
     super(...arguments);
@@ -253,6 +298,17 @@ var Snackbar = class extends ThemeableElement {
     this.icon = "";
     this.elevation = "5";
     this.appearance = "filled";
+    this.labels = {};
+    // `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, dispatching a `hide` for a snackbar that was
+    // never visible (SNK-1). Same fix and reasoning as lt-dropdown's `_skipNextOpenChange` (DDN-1). This guards
+    // only the timer/event side effects, not the popover sync below — a snackbar mounted already open (markup
+    // `open=""`) still needs `showPopover()` called once, or it stays in the native `display: none` state despite
+    // `open` being true.
+    this._skipNextOpenChange = true;
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
   }
   /** Shows the snackbar and starts the auto-dismiss timer. */
   show() {
@@ -262,9 +318,16 @@ var Snackbar = class extends ThemeableElement {
   hide() {
     this.open = false;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("popover", "manual");
+  }
   updated(changedProperties) {
     if (changedProperties.has("open")) {
-      if (this.open) {
+      this._syncPopoverState();
+      if (this._skipNextOpenChange) {
+        this._skipNextOpenChange = false;
+      } else if (this.open) {
         this._startTimer();
         dispatch(this, "show");
       } else {
@@ -273,6 +336,13 @@ var Snackbar = class extends ThemeableElement {
       }
     }
   }
+  _syncPopoverState() {
+    if (this.open) {
+      if (!this.matches(":popover-open")) this.showPopover();
+    } else if (this.matches(":popover-open")) {
+      this.hidePopover();
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this._clearTimer();
@@ -312,7 +382,7 @@ var Snackbar = class extends ThemeableElement {
             <slot></slot>
           </span>
           ${this.actionLabel ? html2`<button class="action" @click=${this._handleAction} part="action">${this.actionLabel}</button>` : ""}
-          ${this.closable ? html2`<button class="close" @click=${this._handleClose} aria-label="Dismiss" part="close">
+          ${this.closable ? html2`<button class="close" @click=${this._handleClose} aria-label=${this._labels.dismiss} part="close">
                 <lt-icon name="xmark"></lt-icon>
               </button>` : ""}
         </div>
@@ -358,6 +428,9 @@ __decorateClass([
 __decorateClass([
   property3({ reflect: true })
 ], Snackbar.prototype, "appearance", 2);
+__decorateClass([
+  property3({ type: Object })
+], Snackbar.prototype, "labels", 2);
 Snackbar = __decorateClass([
   customElement2("lt-snackbar")
 ], Snackbar);

package/dist/components/snackbar/snackbar.d.ts

@@ -1,11 +1,21 @@
 import { ThemeableElement } from '../../base';
-import type { SnackbarVariant } from './snackbar.types';
+import type { SnackbarVariant, SnackbarLabels } from './snackbar.types';
 import type { SurfaceElevation, SurfaceAppearance } from '../surface/surface.types';
 import '@latty-ds/icons';
 import '../surface/surface';
 /**
  * Brief notification that appears temporarily at the bottom of the viewport.
  *
+ * Renders as a native "manual" popover on its own host, so it always appears in the top layer — above an open
+ * `lt-dialog`/`lt-sidepanel`, regardless of z-index, since top-layer content always wins over non-top-layer
+ * content no matter how high (SNK-companion to §6.1's `<dialog>` migration). Confirmed live: fully visible and
+ * readable above an open modal. One narrower, unavoidable limitation (confirmed live too, not fixable from this
+ * component's side): a native `showModal()` makes everything **outside the dialog's own subtree** inert,
+ * including a sibling popover — explicitly setting `inert = false` on the snackbar does not override it. A
+ * snackbar shown while a dialog is open is visible but not clickable until the dialog closes; its own
+ * `duration` timer still fires normally regardless (a plain `setTimeout`, unaffected by inertness), so only a
+ * `duration="0"` snackbar with a close/action button would be briefly stuck non-interactive in that scenario.
+ *
  * @element lt-snackbar
  *
  * @slot - Notification content. Accepts any HTML — bold, links, etc.
@@ -56,12 +66,18 @@ export declare class Snackbar extends ThemeableElement {
      * @default 'filled'
      */
     appearance: SurfaceAppearance;
+    /** Overridable UI text (the close button's accessible name), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<SnackbarLabels>;
+    private get _labels();
     private _timer?;
+    private _skipNextOpenChange;
     /** Shows the snackbar and starts the auto-dismiss timer. */
     show(): void;
     /** Dismisses the snackbar. */
     hide(): void;
+    connectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;
+    private _syncPopoverState;
     disconnectedCallback(): void;
     private _startTimer;
     private _clearTimer;

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

@@ -1 +1,6 @@
 export type SnackbarVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+/** Overridable UI text, for i18n — English defaults; override only the keys you need. */
+export interface SnackbarLabels {
+    /** Accessible label for the dismiss button. */
+    dismiss: string;
+}

package/dist/components/surface/index.js

@@ -88,6 +88,14 @@ var surfaceStyles = css`
   :host([appearance='outlined']:hover) .surface {
     border-color: var(--lt-border-strong);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .surface {
+      transition: none;
+    }
+  }
 `;
 
 // src/utils/color.ts

package/dist/components/switch/index.js

@@ -56,7 +56,10 @@ var switchStyles = css`
     flex-direction: row-reverse;
   }
 
-  :host([disabled]) .switch-wrapper {
+  /* :host(:disabled) — the browser matches this automatically for a form-associated element inside a
+     disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */
+  :host([disabled]) .switch-wrapper,
+  :host(:disabled) .switch-wrapper {
     cursor: not-allowed;
     opacity: 0.6;
   }
@@ -200,12 +203,91 @@ var switchStyles = css`
   :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled) {
     background: var(--lt-interactive-info-bg-hover);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    input[type='checkbox'],
+    .thumb {
+      transition: none;
+    }
+  }
+
+  /* ── Forced colors (Windows High Contrast) ─────────────────────────────────
+     Under forced-colors, every author background-color here (the unchecked track's neutral fill, every
+     variant's checked fill, and the thumb's plain white) is flattened to Canvas — the track has no border of
+     its own to fall back on, and the thumb disappears into it, leaving neither track nor thumb visible at all.
+     System color keywords are exempt from that flattening; Highlight/HighlightText is the canonical OS
+     "selected state" pairing, unaffected by which variant was selected (forced-colors overrides that anyway).
+     !important matches every variant's own :checked rule in specificity — standard for a forced-colors
+     override, whose entire point is overriding the page's own author styling. ─────────────────────────────── */
+
+  @media (forced-colors: active) {
+    input[type='checkbox'] {
+      border: 1px solid ButtonText;
+    }
+
+    input[type='checkbox']:checked {
+      background: Highlight !important;
+      border-color: Highlight !important;
+    }
+
+    .thumb {
+      background: ButtonText;
+    }
+
+    input[type='checkbox']:checked ~ .thumb {
+      background: HighlightText;
+    }
+  }
 `;
 
+// src/components/shared/form-default.ts
+var FormDefaultController = class {
+  constructor(host, get) {
+    this._captured = false;
+    this._get = get;
+    host.addController(this);
+  }
+  hostConnected() {
+    if (this._captured) return;
+    this._captured = true;
+    this.value = this._get();
+  }
+};
+
+// src/components/shared/form-disabled.ts
+var FormDisabledController = class {
+  constructor(host) {
+    this._fieldsetDisabled = false;
+    this._host = host;
+    host.addController(this);
+  }
+  // No-op — this controller has no connect-time work of its own (formDisabledCallback drives it instead), but
+  // ReactiveController's members are all optional, and a class satisfying an all-optional interface with no
+  // members in common is a TS error (TS2559); this gives it one.
+  hostConnected() {
+  }
+  /** Whether an ancestor `<fieldset>` is currently disabled. */
+  get fieldsetDisabled() {
+    return this._fieldsetDisabled;
+  }
+  setFieldsetDisabled(disabled) {
+    if (this._fieldsetDisabled === disabled) return;
+    this._fieldsetDisabled = disabled;
+    this._host.requestUpdate();
+  }
+};
+
 // src/components/switch/switch.ts
+var DEFAULT_LABELS = {
+  validationMessage: "Please check this switch"
+};
 var Switch = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.checked);
+    this._fieldsetDisabled = new FormDisabledController(this);
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -215,8 +297,12 @@ var Switch = class extends ThemeableElement {
     this.labelPosition = "right";
     this.name = "";
     this.value = "on";
+    this.labels = {};
     this._internals = this.attachInternals();
   }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
   /**
    * Handles switch change events.
    * Updates the checked state and dispatches a custom change event.
@@ -228,13 +314,20 @@ var Switch = class extends ThemeableElement {
     this._internals.setFormValue(this.checked ? this.value : null);
     const input = this.shadowRoot?.querySelector("input");
     if (this.required && !this.checked && input) {
-      this._internals.setValidity({ valueMissing: true }, "Please check this switch", input);
+      this._internals.setValidity({ valueMissing: true }, this._labels.validationMessage, input);
     } else {
       this._internals.setValidity({});
     }
   }
   formResetCallback() {
-    this.checked = false;
+    this.checked = this._default.value;
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+  get _isDisabled() {
+    return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
   }
   checkValidity() {
     return this._internals.checkValidity();
@@ -261,7 +354,7 @@ var Switch = class extends ThemeableElement {
           <input
             type="checkbox"
             .checked=${this.checked}
-            ?disabled=${this.disabled}
+            ?disabled=${this._isDisabled}
             ?required=${this.required}
             name=${this.name}
             value=${this.value}
@@ -286,7 +379,7 @@ __decorateClass([
   property2({ reflect: true })
 ], Switch.prototype, "size", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property2({ type: Boolean })
 ], Switch.prototype, "checked", 2);
 __decorateClass([
   property2({ type: Boolean, reflect: true })
@@ -306,6 +399,9 @@ __decorateClass([
 __decorateClass([
   property2({ reflect: true })
 ], Switch.prototype, "value", 2);
+__decorateClass([
+  property2({ type: Object })
+], Switch.prototype, "labels", 2);
 Switch = __decorateClass([
   customElement("lt-switch")
 ], Switch);

package/dist/components/switch/switch.d.ts

@@ -1,5 +1,5 @@
 import { ThemeableElement } from '../../base';
-import { SwitchSize, SwitchVariant, SwitchLabelPosition } from './switch.types';
+import { SwitchSize, SwitchVariant, SwitchLabelPosition, type SwitchLabels } from './switch.types';
 /**
  * A toggle switch component with sliding animation.
  * Internally uses a checkbox input with custom toggle styling.
@@ -35,6 +35,8 @@ export declare class Switch extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
     constructor();
     /**
      * Visual variant that determines the color when checked.
@@ -47,7 +49,10 @@ export declare class Switch extends ThemeableElement {
      */
     size: SwitchSize;
     /**
-     * Whether the switch is checked (on).
+     * Whether the switch is checked (on). Not reflected as an attribute — a native checkbox's `checked` _content_
+     * attribute stays fixed at the markup default and never tracks interaction; reflecting it live meant
+     * `formResetCallback` could no longer tell what the original default was. Read the property, or the `change`
+     * event's `detail.checked`, instead of `[checked]`/`hasAttribute('checked')`.
      * @default false
      */
     checked: boolean;
@@ -81,6 +86,9 @@ export declare class Switch extends ThemeableElement {
      * @default 'on'
      */
     value: string;
+    /** Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<SwitchLabels>;
+    private get _labels();
     /**
      * Handles switch change events.
      * Updates the checked state and dispatches a custom change event.
@@ -90,6 +98,9 @@ export declare class Switch extends ThemeableElement {
      */
     updated(): void;
     formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+    private get _isDisabled();
     checkValidity(): boolean;
     reportValidity(): boolean;
     private handleChange;

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

@@ -19,3 +19,8 @@ export type SwitchSize = 'sm' | 'md' | 'lg';
  */
 export type SwitchVariant = 'primary' | 'secondary' | 'success' | 'error' | 'info';
 export type SwitchLabelPosition = 'left' | 'right';
+/** Overridable UI text for `lt-switch`, for i18n. */
+export interface SwitchLabels {
+    /** Validation message shown when a required switch is left unchecked. */
+    validationMessage: string;
+}

package/dist/components/tab/index.js

@@ -82,7 +82,7 @@ var tabStyles = css`
   }
 
   :host([disabled]) .tab {
-    color: var(--lt-color-neutral-300);
+    color: var(--lt-text-disabled);
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -125,6 +125,17 @@ var tabStyles = css`
     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
     color: var(--lt-text-primary);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    /* :host([data-variant='pills']) .tab must be listed explicitly, not just .tab — it outranks a bare .tab in
+       specificity (an extra :host() attribute selector), so it would otherwise keep its own transition. */
+    .tab,
+    :host([data-variant='pills']) .tab {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/tab/tab.ts
@@ -138,21 +149,13 @@ var Tab = class extends ThemeableElement {
     this.active = false;
     this.disabled = false;
     this.size = "md";
-    this._handleHostClick = () => {
-      if (this.disabled) return;
-      this.dispatchEvent(
-        new CustomEvent("tab-click", {
-          detail: { value: this.value },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
+    // Enter/Space activate the tab exactly like a mouse click: a native `click` on the host, which
+    // `lt-tab-group` (or any consumer) listens for. There is no separate tab event.
     this._handleHostKeydown = (e) => {
       if (this.disabled) return;
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        this._handleHostClick();
+        this.click();
       }
     };
   }
@@ -160,12 +163,10 @@ var Tab = class extends ThemeableElement {
     super.connectedCallback();
     this.setAttribute("role", "tab");
     this.tabIndex = 0;
-    this.addEventListener("click", this._handleHostClick);
     this.addEventListener("keydown", this._handleHostKeydown);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("click", this._handleHostClick);
     this.removeEventListener("keydown", this._handleHostKeydown);
   }
   updated(changedProperties) {

package/dist/components/tab/tab.d.ts

@@ -53,7 +53,6 @@ export declare class Tab extends ThemeableElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: Map<string, unknown>): void;
-    private _handleHostClick;
     private _handleHostKeydown;
     render(): import("lit").TemplateResult<1>;
 }