@aceshooting/lyra-ui 1.0.0 → 1.1.0

package/dist/components/toast/toast-item.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { closeIcon } from '../../internal/icons.js';
@@ -18,6 +18,16 @@ import { styles } from './toast-item.styles.js';
 // parsing that back out in JS for a single setTimeout would be more fragile
 // than this documented literal.
 const ANIM_MS = 180;
+function prefersReducedMotion() {
+    return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+// toast-item.styles.ts already collapses the CSS transition itself to ~0 under
+// reduced motion; this keeps the lyra-after-show/lyra-after-hide events (and
+// the DOM removal in hide()) from still waiting out the full duration of an
+// animation nothing is visibly playing.
+function animMs() {
+    return prefersReducedMotion() ? 0 : ANIM_MS;
+}
 /**
  * `<lyra-toast-item>` — a single toast notification.
  * Mirrors the Web Awesome `<wa-toast-item>` API under the `lyra-` prefix.
@@ -46,8 +56,12 @@ export class LyraToastItem extends LyraElement {
         this.variant = 'neutral';
         /** Show the icon slot. */
         this.withIcon = false;
-        this.remaining = 0;
+        this.elapsedMs = 0;
         this.startedAt = 0;
+        this.timerStarted = false;
+        this.hovering = false;
+        this.focused = false;
+        this.hiding = false;
         this.resumeTimer = () => {
             // Guard against an interleaved pointer+focus pause/resume sequence
             // calling resumeTimer() twice without a pauseTimer() in between --
@@ -59,28 +73,75 @@ export class LyraToastItem extends LyraElement {
                 clearTimeout(this.timer);
                 this.timer = undefined;
             }
-            if (!isFinite(this.duration) || this.duration <= 0 || this.remaining <= 0)
+            if (!isFinite(this.duration) || this.duration <= 0)
+                return;
+            const remaining = this.duration - this.elapsedMs;
+            if (remaining <= 0)
                 return;
             this.startedAt = performance.now();
-            this.timer = window.setTimeout(() => this.hide(), this.remaining);
+            this.timer = window.setTimeout(() => this.hide(), remaining);
         };
         this.pauseTimer = () => {
             if (this.timer !== undefined) {
                 clearTimeout(this.timer);
                 this.timer = undefined;
-                this.remaining -= performance.now() - this.startedAt;
+                this.elapsedMs += performance.now() - this.startedAt;
             }
         };
+        // Hover and focus are tracked as independent pause reasons so that
+        // releasing one (e.g. Shift-Tabbing focus away) only resumes the timer
+        // once *neither* modality still holds the toast paused -- otherwise a
+        // pointer resting on the toast would see it auto-dismiss out from under
+        // it the moment focus alone moved away, or vice versa.
+        this.onPointerEnter = () => {
+            this.hovering = true;
+            this.pauseTimer();
+        };
+        this.onPointerLeave = () => {
+            this.hovering = false;
+            if (!this.focused)
+                this.resumeTimer();
+        };
+        this.onFocusIn = () => {
+            this.focused = true;
+            this.pauseTimer();
+        };
+        this.onFocusOut = () => {
+            this.focused = false;
+            if (!this.hovering)
+                this.resumeTimer();
+        };
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    updated(changed) {
+        if (changed.has('variant')) {
+            // Assertive for actionable severities, polite otherwise. Re-evaluated
+            // on every `variant` change (not just the first render) so a toast
+            // reassigned to `danger`/`warning` after creation is announced as an
+            // interruption instead of keeping its original, now-stale role.
+            this.setAttribute('role', this.variant === 'danger' || this.variant === 'warning' ? 'alert' : 'status');
+        }
+        // `elapsedMs`/`duration` are re-read fresh every time the timer is
+        // (re)scheduled, so a `duration` change while paused (hovering/focused)
+        // or before the timer has ever started needs no action here -- the next
+        // resumeTimer()/startTimer() call already picks up the new value. Only a
+        // timer that's actively counting down right now is running against a
+        // setTimeout scheduled for the *old* duration, so that's the one case
+        // that needs an explicit reschedule.
+        if (changed.has('duration') && this.timerStarted && this.timer !== undefined) {
+            this.pauseTimer();
+            this.resumeTimer();
+        }
+    }
     firstUpdated() {
-        // Assertive for actionable severities, polite otherwise.
-        this.setAttribute('role', this.variant === 'danger' || this.variant === 'warning' ? 'alert' : 'status');
         this.showRafId = requestAnimationFrame(() => {
             this.showRafId = undefined;
             this.setAttribute('data-visible', '');
             this.emit('lyra-show');
-            window.setTimeout(() => this.emit('lyra-after-show'), ANIM_MS);
+            this.showAnimTimer = window.setTimeout(() => {
+                this.showAnimTimer = undefined;
+                this.emit('lyra-after-show');
+            }, animMs());
             this.startTimer();
         });
     }
@@ -90,12 +151,19 @@ export class LyraToastItem extends LyraElement {
             cancelAnimationFrame(this.showRafId);
             this.showRafId = undefined;
         }
+        if (this.showAnimTimer !== undefined) {
+            clearTimeout(this.showAnimTimer);
+            this.showAnimTimer = undefined;
+        }
+        if (this.hideAnimTimer !== undefined) {
+            clearTimeout(this.hideAnimTimer);
+            this.hideAnimTimer = undefined;
+        }
         this.clearTimer();
     }
     startTimer() {
-        if (!isFinite(this.duration) || this.duration <= 0)
-            return;
-        this.remaining = this.duration;
+        this.timerStarted = true;
+        this.elapsedMs = 0;
         this.resumeTimer();
     }
     clearTimer() {
@@ -103,12 +171,43 @@ export class LyraToastItem extends LyraElement {
             clearTimeout(this.timer);
         this.timer = undefined;
     }
+    // A stack of several simultaneously-open toasts otherwise gives every
+    // close button the same bare "Close" label, so screen-reader/switch-access
+    // users can't tell which toast a given button dismisses without first
+    // activating it. Deriving the label from the toast's own message content
+    // mirrors combobox's per-item "Remove X" labeling for the same reason.
+    //
+    // Only direct Text-node children are considered -- the message is always
+    // assigned as plain text (`create()` sets `textContent`), whereas anything
+    // else appended to the host (an action `<button>`, a `slot="icon"` element
+    // and its own descendant text) is a sibling *element*, not a top-level text
+    // node, so it's excluded without needing to know about those features here.
+    get closeLabel() {
+        const text = Array.from(this.childNodes)
+            .filter((node) => node.nodeType === Node.TEXT_NODE)
+            .map((node) => node.textContent ?? '')
+            .join('')
+            .trim()
+            .replace(/\s+/g, ' ');
+        if (!text)
+            return 'Close';
+        const snippet = text.length > 40 ? `${text.slice(0, 40)}…` : text;
+        return `Close: ${snippet}`;
+    }
     /** Hide with animation, then remove from the DOM. */
     async hide() {
+        if (this.hiding)
+            return;
+        this.hiding = true;
         this.clearTimer();
         this.emit('lyra-hide');
         this.removeAttribute('data-visible');
-        await new Promise((r) => window.setTimeout(r, ANIM_MS));
+        await new Promise((resolve) => {
+            this.hideAnimTimer = window.setTimeout(() => {
+                this.hideAnimTimer = undefined;
+                resolve();
+            }, animMs());
+        });
         this.emit('lyra-after-hide');
         this.remove();
     }
@@ -116,15 +215,30 @@ export class LyraToastItem extends LyraElement {
         return html `
       <div
         part="toast-item"
-        @pointerenter=${this.pauseTimer}
-        @pointerleave=${this.resumeTimer}
-        @focusin=${this.pauseTimer}
-        @focusout=${this.resumeTimer}
+        @pointerenter=${this.onPointerEnter}
+        @pointerleave=${this.onPointerLeave}
+        @focusin=${this.onFocusIn}
+        @focusout=${this.onFocusOut}
       >
         <span part="accent" aria-hidden="true"></span>
         ${this.withIcon ? html `<span part="icon"><slot name="icon"></slot></span>` : ''}
         <div part="content"><slot></slot></div>
-        <button part="close-button" type="button" aria-label="Close" @click=${() => this.hide()}>
+        <button
+          part="close-button"
+          type="button"
+          aria-label=${this.closeLabel}
+          aria-disabled=${this.hiding ? 'true' : 'false'}
+          @click=${(e) => {
+            // Reflect the disabled state on the DOM node synchronously, not
+            // just via the reactive binding above -- Lit's re-render from
+            // `this.hiding = true` (inside hide()) lands on the next
+            // microtask, which is too late for a screen reader (or a second
+            // rapid click) that inspects the attribute right after this
+            // handler returns.
+            e.currentTarget.setAttribute('aria-disabled', 'true');
+            void this.hide();
+        }}
+        >
           ${closeIcon()}
         </button>
       </div>
@@ -143,4 +257,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'with-icon' })
 ], LyraToastItem.prototype, "withIcon", void 0);
+__decorate([
+    state()
+], LyraToastItem.prototype, "hiding", void 0);
 defineElement('toast-item', LyraToastItem);

package/dist/components/toast/toast-item.styles.js

@@ -6,6 +6,7 @@ export const styles = css `
     --show-duration: var(--lyra-transition-base, 180ms ease-out);
     --hide-duration: var(--lyra-transition-base, 180ms ease-out);
     --padding: var(--lyra-space-m);
+    --font-size: 1rem;
     --accent-color: var(--lyra-color-border);
   }
   :host([variant='brand']) {
@@ -20,6 +21,26 @@ export const styles = css `
   :host([variant='danger']) {
     --accent-color: var(--lyra-color-danger);
   }
+  :host([size='xs']) {
+    --padding: var(--lyra-space-xs);
+    --font-size: 0.75rem;
+  }
+  :host([size='s']) {
+    --padding: var(--lyra-space-s);
+    --font-size: 0.875rem;
+  }
+  :host([size='m']) {
+    --padding: var(--lyra-space-m);
+    --font-size: 1rem;
+  }
+  :host([size='l']) {
+    --padding: var(--lyra-space-l);
+    --font-size: 1.125rem;
+  }
+  :host([size='xl']) {
+    --padding: calc(var(--lyra-space-l) * 1.5);
+    --font-size: 1.25rem;
+  }
 
   [part='toast-item'] {
     position: relative;
@@ -29,6 +50,7 @@ export const styles = css `
     inline-size: 100%;
     padding: var(--padding);
     padding-inline-start: calc(var(--padding) + var(--accent-width));
+    font-size: var(--font-size);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
     border: 1px solid var(--lyra-color-border);
@@ -75,14 +97,18 @@ export const styles = css `
     border: none;
     cursor: pointer;
     color: var(--lyra-color-text-quiet);
-    font-size: 1rem;
+    font-size: 1em;
     line-height: 1;
     padding: var(--lyra-space-xs);
     border-radius: var(--lyra-radius);
   }
-  [part='close-button']:hover {
+  [part='close-button']:hover:not([aria-disabled='true']) {
     color: var(--lyra-color-text);
   }
+  [part='close-button'][aria-disabled='true'] {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
   [part='close-button']:focus-visible {
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
     outline-offset: var(--lyra-focus-ring-offset);

package/dist/components/toast/toast.stories.d.ts

@@ -3,3 +3,6 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Triggers: Story;
+export declare const Sizes: Story;
+export declare const WithIcon: Story;
+export declare const Placements: Story;

package/dist/components/toast/toast.stories.js

@@ -2,11 +2,12 @@ import { html } from 'lit';
 import { toast } from '../../lyra.js';
 const meta = {
     title: 'Toast',
+    component: 'lyra-toast',
     tags: ['autodocs'],
     parameters: {
         docs: {
             description: {
-                component: 'Click a button to fire a toast via the `toast()` helper — the ergonomic entry point that lazily mounts a single `<lyra-toast>` region on `document.body`.',
+                component: 'Click a button to fire a toast via the `toast()` helper — the ergonomic entry point that lazily mounts one `<lyra-toast>` region per placement on `document.body`.',
             },
         },
     },
@@ -30,3 +31,42 @@ export const Triggers = {
     </div>
   `,
 };
+const sizes = ['xs', 's', 'm', 'l', 'xl'];
+export const Sizes = {
+    render: () => html `
+    <div style="display:flex; gap:1rem;">
+      ${sizes.map((size) => html `<button @click=${() => toast({ message: `Size "${size}"`, size })}>${size}</button>`)}
+    </div>
+  `,
+};
+export const WithIcon = {
+    render: () => html `
+    <div style="display:flex; gap:1rem;">
+      <button
+        @click=${() => toast({ message: 'Upload complete', variant: 'success', withIcon: true }).item.then((item) => {
+        const icon = document.createElement('span');
+        icon.slot = 'icon';
+        icon.textContent = '✓';
+        item.appendChild(icon);
+    })}
+      >
+        Success + icon
+      </button>
+    </div>
+  `,
+};
+const placements = [
+    'top-start',
+    'top-center',
+    'top-end',
+    'bottom-start',
+    'bottom-center',
+    'bottom-end',
+];
+export const Placements = {
+    render: () => html `
+    <div style="display:flex; flex-wrap:wrap; gap:1rem;">
+      ${placements.map((placement) => html `<button @click=${() => toast({ message: placement, placement })}>${placement}</button>`)}
+    </div>
+  `,
+};

package/dist/components/toast/toast.styles.js

@@ -13,7 +13,7 @@ export const styles = css `
     flex-direction: column;
     gap: var(--gap);
     inline-size: var(--width);
-    max-inline-size: calc(100vw - 2rem);
+    max-inline-size: calc(100vw - (var(--lyra-space-l) * 2));
   }
   ::slotted(*) {
     pointer-events: auto;
@@ -23,28 +23,28 @@ export const styles = css `
     flex-direction: column-reverse;
   }
   :host([placement='top-start']) {
-    inset-block-start: 1rem;
-    inset-inline-start: 1rem;
+    inset-block-start: var(--lyra-space-l);
+    inset-inline-start: var(--lyra-space-l);
   }
   :host([placement='top-end']) {
-    inset-block-start: 1rem;
-    inset-inline-end: 1rem;
+    inset-block-start: var(--lyra-space-l);
+    inset-inline-end: var(--lyra-space-l);
   }
   :host([placement='top-center']) {
-    inset-block-start: 1rem;
+    inset-block-start: var(--lyra-space-l);
     inset-inline: 0;
     margin-inline: auto;
   }
   :host([placement='bottom-start']) {
-    inset-block-end: 1rem;
-    inset-inline-start: 1rem;
+    inset-block-end: var(--lyra-space-l);
+    inset-inline-start: var(--lyra-space-l);
   }
   :host([placement='bottom-end']) {
-    inset-block-end: 1rem;
-    inset-inline-end: 1rem;
+    inset-block-end: var(--lyra-space-l);
+    inset-inline-end: var(--lyra-space-l);
   }
   :host([placement='bottom-center']) {
-    inset-block-end: 1rem;
+    inset-block-end: var(--lyra-space-l);
     inset-inline: 0;
     margin-inline: auto;
   }

package/dist/components/toast/toaster.d.ts

@@ -18,7 +18,7 @@ export interface ToastHandle {
 }
 /**
  * Show a toast. Ergonomic convenience over `<lyra-toast>.create()` that mounts
- * and reuses a single page-level region — the drop-in for `react-hot-toast`.
+ * and reuses a page-level region per placement — the drop-in for `react-hot-toast`.
  *
  * @example toast('Saved');
  * @example toast({ message: 'Deleted', variant: 'danger', action: { label: 'Undo', onClick: undo } });

package/dist/components/toast/toaster.js

@@ -1,19 +1,26 @@
 import { LyraToast } from './toast.js';
 import './toast.js';
-let region;
-/** Get (or lazily mount) the singleton toast region on `document.body`. */
-function getRegion(placement) {
+const DEFAULT_PLACEMENT = 'top-end';
+const regions = new Map();
+/**
+ * Get (or lazily mount) the singleton toast region for a given placement.
+ * Each placement gets its own region element so that a `toast()` call
+ * targeting one placement never relocates toasts already showing at another
+ * -- `placement` is a per-call option, not a global, retroactive one.
+ */
+function getRegion(placement = DEFAULT_PLACEMENT) {
+    let region = regions.get(placement);
     if (!region || !region.isConnected) {
         region = document.createElement('lyra-toast');
+        region.placement = placement;
         document.body.appendChild(region);
+        regions.set(placement, region);
     }
-    if (placement)
-        region.placement = placement;
     return region;
 }
 /**
  * Show a toast. Ergonomic convenience over `<lyra-toast>.create()` that mounts
- * and reuses a single page-level region — the drop-in for `react-hot-toast`.
+ * and reuses a page-level region per placement — the drop-in for `react-hot-toast`.
  *
  * @example toast('Saved');
  * @example toast({ message: 'Deleted', variant: 'danger', action: { label: 'Undo', onClick: undo } });

package/dist/components/tree/tree-node.d.ts

@@ -13,6 +13,8 @@ import type { TreeItem } from './tree.js';
  * sibling).
  *
  * @customElement lyra-tree-node
+ * @event lyra-node-toggle - `detail: { id, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft).
+ * @event lyra-node-select - `detail: { id }`, fired when this node's primary action is activated (via `select()`, clicking its label, or Enter/Space).
  * @csspart row, toggle, label, badge
  */
 export declare class LyraTreeNode extends LyraElement {
@@ -32,15 +34,19 @@ export declare class LyraTreeNode extends LyraElement {
     collapse(): void;
     /** Fire this item's primary "select" action (Enter/Space, or clicking the label). */
     select(): void;
+    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
+    protected getUpdateComplete(): Promise<boolean>;
     /**
-     * Cascade `updateComplete`: a nested `<lyra-tree-node>` rendered by this
-     * one (in its own shadow root) only receives a pushed-down `activeId` (and
-     * the `tabIndex` that comes from it) once *this* node's own render has
-     * committed. Without this override, awaiting a parent's `updateComplete`
-     * doesn't guarantee an arbitrarily-nested descendant's own pending update
-     * has also settled — see the matching override on `<lyra-tree>`.
+     * A `<button>` is a real focusable click target even with
+     * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
+     * navigation honors `tabindex="-1"`, a mouse click does not. Left
+     * unguarded, clicking this toggle parks real DOM focus on this hidden,
+     * non-treeitem button instead of the host, which is both an a11y dead end
+     * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
+     * `mousedown` blocks that default focus move; focusing the host instead
+     * keeps focus on the actual `role="treeitem"` element the row represents.
      */
-    protected getUpdateComplete(): Promise<boolean>;
+    private onToggleMouseDown;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/tree/tree-node.js

@@ -11,6 +11,7 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { chevronIcon } from '../../internal/icons.js';
 import { css } from 'lit';
+import { cascadeUpdateComplete } from './update-cascade.js';
 const styles = css `
   :host {
     display: block;
@@ -52,7 +53,9 @@ const styles = css `
     cursor: pointer;
     flex: 0 0 auto;
   }
-  [part='toggle']:empty {
+  [part='toggle'][hidden] {
+    /* visibility (not display) so the placeholder keeps its layout box --
+       a leaf row still lines up with sibling rows that do have a chevron. */
     visibility: hidden;
   }
   :host([expanded]) [part='toggle'] {
@@ -85,6 +88,8 @@ const styles = css `
  * sibling).
  *
  * @customElement lyra-tree-node
+ * @event lyra-node-toggle - `detail: { id, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft).
+ * @event lyra-node-select - `detail: { id }`, fired when this node's primary action is activated (via `select()`, clicking its label, or Enter/Space).
  * @csspart row, toggle, label, badge
  */
 export class LyraTreeNode extends LyraElement {
@@ -96,6 +101,20 @@ export class LyraTreeNode extends LyraElement {
         this.activeId = null;
         this.setSize = 1;
         this.posInSet = 1;
+        /**
+         * A `<button>` is a real focusable click target even with
+         * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
+         * navigation honors `tabindex="-1"`, a mouse click does not. Left
+         * unguarded, clicking this toggle parks real DOM focus on this hidden,
+         * non-treeitem button instead of the host, which is both an a11y dead end
+         * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
+         * `mousedown` blocks that default focus move; focusing the host instead
+         * keeps focus on the actual `role="treeitem"` element the row represents.
+         */
+        this.onToggleMouseDown = (e) => {
+            e.preventDefault();
+            this.focus();
+        };
     }
     static { this.styles = [LyraElement.styles, styles]; }
     get hasChildren() {
@@ -130,17 +149,10 @@ export class LyraTreeNode extends LyraElement {
     select() {
         this.emit('lyra-node-select', { id: this.item.id });
     }
-    /**
-     * Cascade `updateComplete`: a nested `<lyra-tree-node>` rendered by this
-     * one (in its own shadow root) only receives a pushed-down `activeId` (and
-     * the `tabIndex` that comes from it) once *this* node's own render has
-     * committed. Without this override, awaiting a parent's `updateComplete`
-     * doesn't guarantee an arbitrarily-nested descendant's own pending update
-     * has also settled — see the matching override on `<lyra-tree>`.
-     */
+    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
     async getUpdateComplete() {
         const result = await super.getUpdateComplete();
-        await Promise.all([...(this.shadowRoot?.querySelectorAll('lyra-tree-node') ?? [])].map((n) => n.updateComplete));
+        await cascadeUpdateComplete(this.shadowRoot?.querySelectorAll('lyra-tree-node') ?? []);
         return result;
     }
     render() {
@@ -151,6 +163,8 @@ export class LyraTreeNode extends LyraElement {
           type="button"
           tabindex="-1"
           aria-hidden="true"
+          ?hidden=${!this.hasChildren}
+          @mousedown=${this.onToggleMouseDown}
           @click=${(e) => {
             e.stopPropagation();
             this.expanded ? this.collapse() : this.expand();