@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/word-cloud/word-cloud.js

@@ -150,22 +150,33 @@ export class LyraWordCloud extends LyraElement {
             changed.has('maxFontSize') ||
             changed.has('scale') ||
             changed.has('orientations')) {
-            this.cachedLayout = layoutWordCloud(this.words, {
-                minFontSize: this.minFontSize,
-                maxFontSize: this.maxFontSize,
-                scale: this.scale,
-                orientations: this.orientations,
-                measureText: this.measureText,
-            });
-            if (this.cachedLayout.skipped.length > 0)
-                warnSkippedWords(this.cachedLayout.skipped.length);
-            // The previous focus cursor may no longer address a real word once the
-            // data changes out from under it.
-            this.focusedIndex = null;
-            this.liveText = '';
+            this.relayout();
         }
         this.setAttribute('role', 'group');
-        this.setAttribute('aria-label', `Word cloud of ${this.words.length} word${this.words.length === 1 ? '' : 's'}`);
+        this.setAttribute('aria-label', `Word cloud of ${this.cachedLayout.placed.length} word${this.cachedLayout.placed.length === 1 ? '' : 's'}`);
+    }
+    relayout() {
+        this.cachedLayout = layoutWordCloud(this.words, {
+            minFontSize: this.minFontSize,
+            maxFontSize: this.maxFontSize,
+            scale: this.scale,
+            orientations: this.orientations,
+            measureText: this.measureText,
+        });
+        if (this.cachedLayout.skipped.length > 0)
+            warnSkippedWords(this.cachedLayout.skipped.length);
+        // The previous focus cursor may no longer address a real word once the
+        // data changes out from under it.
+        this.focusedIndex = null;
+        this.liveText = '';
+    }
+    /** Forces a relayout so the font-family theme token (`--lyra-font`) is
+     *  re-read from computed style — mirrors `lyra-chart`'s `refreshTheme()`.
+     *  No global theme-broadcast event exists in lyra-ui to subscribe to
+     *  automatically; call this from a consumer's own theme-toggle handler. */
+    refreshTheme() {
+        this.relayout();
+        this.requestUpdate();
     }
     activate(word) {
         this.emit('lyra-word-click', { text: word.text, weight: word.weight, group: word.group });

package/dist/components/word-cloud/word-cloud.styles.js

@@ -20,6 +20,7 @@ export const styles = css `
     display: flex;
     flex-direction: column;
     gap: var(--lyra-space-xs);
+    block-size: 100%;
   }
   svg {
     display: block;
@@ -36,10 +37,11 @@ export const styles = css `
     font-weight: 600;
     text-anchor: middle;
     dominant-baseline: middle;
-    transition: opacity var(--lyra-transition-fast);
+    transition: text-decoration-color var(--lyra-transition-fast);
+    text-decoration: underline transparent;
   }
   [part='word']:hover {
-    opacity: 0.75;
+    text-decoration-color: currentColor;
   }
   [part='focus-ring'] {
     fill: none;

package/dist/internal/announcer.d.ts

@@ -0,0 +1,57 @@
+/** Options for a single `Announcer.announce()` call. */
+export interface AnnounceOptions {
+    /** Bypass any in-progress throttle window and flush this text immediately. */
+    force?: boolean;
+}
+export interface AnnouncerOptions {
+    /** Throttle window in ms. Repeated `announce()` calls arriving within this
+     *  window of the first call in a burst collapse to one trailing-edge flush
+     *  of the latest text. Defaults to 500. */
+    throttleMs?: number;
+    /** Invoked with the coalesced text whenever a burst flushes (on the
+     *  trailing edge, or immediately for a `{ force: true }` call). */
+    onFlush: (text: string) => void;
+}
+/**
+ * Trailing-edge debounce/coalesce for screen-reader announcements.
+ *
+ * Streaming UIs (token-by-token chat responses, progress ticks, etc.)
+ * naturally produce far more candidate announcements than a screen-reader
+ * user can usefully absorb — reading every incremental chunk aloud is spam,
+ * not information. `Announcer` collapses a burst of `announce()` calls
+ * arriving within `throttleMs` of the *first* call in that burst down to a
+ * single flush of the latest text: superseded intermediate text is dropped
+ * outright, never queued or concatenated. Passing `{ force: true }` always
+ * flushes immediately regardless of any window in progress, so a final or
+ * terminal message (e.g. "response complete") is never swallowed mid-burst.
+ *
+ * This is pure timing/state logic with no DOM dependency — it knows nothing
+ * about ARIA, elements, or Lit. `<lyra-live-region>`
+ * (`../components/live-region/live-region.js`) is the DOM-facing wrapper
+ * that composes one of these with an actual live-region element. Other
+ * components that need throttled announcements (a stream-status indicator,
+ * a tool-call chip's status transitions, a chat message's streaming state)
+ * should reuse that wrapper rather than instantiating `Announcer` directly.
+ */
+export declare class Announcer {
+    /** Throttle window in ms. Safe to change between bursts; a flush already
+     *  scheduled keeps the deadline it was scheduled with. */
+    throttleMs: number;
+    private readonly onFlush;
+    private timer?;
+    private pending?;
+    constructor(options: AnnouncerOptions);
+    /** The latest text awaiting flush, if a burst is currently in progress. */
+    get pendingText(): string | undefined;
+    /** Whether a flush is currently scheduled (a burst is in progress). */
+    get isPending(): boolean;
+    /**
+     * Queue `text` for announcement. Within a single throttle window, only the
+     * latest text queued survives — this call always overwrites whatever an
+     * earlier call in the same burst queued.
+     */
+    announce(text: string, options?: AnnounceOptions): void;
+    /** Cancel any pending (not yet flushed) announcement without flushing it. */
+    cancel(): void;
+    private flush;
+}

package/dist/internal/announcer.js

@@ -0,0 +1,71 @@
+const DEFAULT_THROTTLE_MS = 500;
+/**
+ * Trailing-edge debounce/coalesce for screen-reader announcements.
+ *
+ * Streaming UIs (token-by-token chat responses, progress ticks, etc.)
+ * naturally produce far more candidate announcements than a screen-reader
+ * user can usefully absorb — reading every incremental chunk aloud is spam,
+ * not information. `Announcer` collapses a burst of `announce()` calls
+ * arriving within `throttleMs` of the *first* call in that burst down to a
+ * single flush of the latest text: superseded intermediate text is dropped
+ * outright, never queued or concatenated. Passing `{ force: true }` always
+ * flushes immediately regardless of any window in progress, so a final or
+ * terminal message (e.g. "response complete") is never swallowed mid-burst.
+ *
+ * This is pure timing/state logic with no DOM dependency — it knows nothing
+ * about ARIA, elements, or Lit. `<lyra-live-region>`
+ * (`../components/live-region/live-region.js`) is the DOM-facing wrapper
+ * that composes one of these with an actual live-region element. Other
+ * components that need throttled announcements (a stream-status indicator,
+ * a tool-call chip's status transitions, a chat message's streaming state)
+ * should reuse that wrapper rather than instantiating `Announcer` directly.
+ */
+export class Announcer {
+    constructor(options) {
+        this.throttleMs = options.throttleMs ?? DEFAULT_THROTTLE_MS;
+        this.onFlush = options.onFlush;
+    }
+    /** The latest text awaiting flush, if a burst is currently in progress. */
+    get pendingText() {
+        return this.pending;
+    }
+    /** Whether a flush is currently scheduled (a burst is in progress). */
+    get isPending() {
+        return this.timer !== undefined;
+    }
+    /**
+     * Queue `text` for announcement. Within a single throttle window, only the
+     * latest text queued survives — this call always overwrites whatever an
+     * earlier call in the same burst queued.
+     */
+    announce(text, options = {}) {
+        this.pending = text;
+        if (options.force) {
+            this.flush();
+            return;
+        }
+        // Only the first call of a burst schedules the timer; later calls inside
+        // the same window just overwrite `pending` above, so the flush deadline
+        // stays anchored to the first call (trailing-edge debounce) instead of
+        // being pushed back on every subsequent call.
+        this.timer ??= setTimeout(() => this.flush(), this.throttleMs);
+    }
+    /** Cancel any pending (not yet flushed) announcement without flushing it. */
+    cancel() {
+        if (this.timer !== undefined) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+        this.pending = undefined;
+    }
+    flush() {
+        if (this.timer !== undefined) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+        const text = this.pending;
+        this.pending = undefined;
+        if (text !== undefined)
+            this.onFlush(text);
+    }
+}

package/dist/internal/form-associated.d.ts

@@ -7,6 +7,7 @@ export interface FormAssociatedInterface {
     value: string;
     disabled: boolean;
     required: boolean;
+    readonly effectiveDisabled: boolean;
     setFormValue(next: string): void;
     checkValidity(): boolean;
     reportValidity(): boolean;

package/dist/internal/form-associated.js

@@ -13,16 +13,22 @@ export function FormAssociated(Base) {
     class FormAssociatedElement extends Base {
         static { this.formAssociated = true; }
         static { this.properties = {
-            name: {},
+            name: { reflect: true, noAccessor: true },
             value: { noAccessor: true },
             disabled: { type: Boolean, reflect: true },
-            required: { type: Boolean, reflect: true },
+            required: { type: Boolean, reflect: true, noAccessor: true },
         }; }
         constructor(...args) {
             super(...args);
-            this.name = '';
             this.disabled = false;
-            this.required = false;
+            this._fieldsetDisabled = false;
+            // Hand-written accessor (mirrors `value`/`required` below): native form
+            // submission for a form-associated custom element keys its `FormData`
+            // entry off the `name` *content attribute*, read synchronously at
+            // submission time — an async (Lit-scheduled) reflection would leave a
+            // property-only assignment like `el.name = 'foo'` invisible to a
+            // same-tick `new FormData(form)`/submit.
+            this._name = '';
             this._value = '';
             // What native `defaultValue`/`form.reset()` restores to. Mirrors the
             // `value` *content attribute* only (see `attributeChangedCallback`
@@ -34,7 +40,26 @@ export function FormAssociated(Base) {
             // first" would wrongly let a user's first-ever edit become permanent
             // (a required field could never be reset back to blank again).
             this._defaultValue = '';
+            this._required = false;
             this.internals = this.attachInternals();
+            // Native <input> always has a submission value ("") from construction —
+            // without this, a control whose `value` is never touched is entirely
+            // absent from FormData instead of present as "".
+            this.internals.setFormValue('');
+        }
+        get name() {
+            return this._name;
+        }
+        set name(next) {
+            const old = this._name;
+            this._name = next ?? '';
+            if (this._name) {
+                this.setAttribute('name', this._name);
+            }
+            else {
+                this.removeAttribute('name');
+            }
+            this.requestUpdate('name', old);
         }
         get value() {
             return this._value;
@@ -46,6 +71,22 @@ export function FormAssociated(Base) {
             this.updateValidity();
             this.requestUpdate('value', old);
         }
+        get required() {
+            return this._required;
+        }
+        set required(next) {
+            const old = this._required;
+            this._required = next;
+            this.toggleAttribute('required', next);
+            this.updateValidity();
+            this.requestUpdate('required', old);
+        }
+        /** Effective disabled state: this element's own `disabled` OR an ancestor
+         *  `<fieldset disabled>`'s inherited state — mirrors native `<input>`, whose
+         *  own `disabled` IDL property/attribute is never mutated by a fieldset. */
+        get effectiveDisabled() {
+            return this.disabled || this._fieldsetDisabled;
+        }
         attributeChangedCallback(name, old, value) {
             super.attributeChangedCallback(name, old, value);
             if (name === 'value') {
@@ -83,8 +124,16 @@ export function FormAssociated(Base) {
             // semantics) — previously this unconditionally blanked the field.
             this.value = this._defaultValue;
         }
-        formDisabledCallback(disabled) {
-            this.disabled = disabled;
+        /**
+         * Called by the browser when an ancestor `<fieldset disabled>` toggles.
+         * Tracked separately from the consumer's own `disabled` (see
+         * `effectiveDisabled`) — a native `<input>`'s own `disabled` IDL
+         * property/attribute is never mutated by fieldset cascading, so a
+         * consumer's explicit `disabled` must survive the fieldset re-enabling.
+         */
+        formDisabledCallback(fieldsetDisabled) {
+            this._fieldsetDisabled = fieldsetDisabled;
+            this.requestUpdate();
         }
         connectedCallback() {
             super.connectedCallback();
@@ -93,11 +142,6 @@ export function FormAssociated(Base) {
             // `value` write.
             this.updateValidity();
         }
-        updated(changed) {
-            super.updated(changed);
-            if (changed.has('required'))
-                this.updateValidity();
-        }
     }
     return FormAssociatedElement;
 }

package/dist/internal/group-by-recency.d.ts

@@ -0,0 +1,50 @@
+/** Per-bucket English defaults, overridable the same "no i18n, but
+ *  overridable via an options object" way `<lyra-date-picker>`/
+ *  `<lyra-source-list>`'s `label-plural` already establish. */
+export interface RecencyLabels {
+    today?: string;
+    yesterday?: string;
+    previousWeek?: string;
+    older?: string;
+}
+export interface GroupByRecencyOptions<T> {
+    /** Extracts the timestamp to bucket `item` by. Defaults to assuming `item`
+     *  itself *is* a `Date` — the simplest possible default for the common
+     *  case of grouping a plain array of dates. A returned `number` is treated
+     *  as a standard JS epoch-milliseconds value (`Date.prototype.getTime()`'s
+     *  own unit) — not GreyCat's micros `time` type; a caller bridging from
+     *  GreyCat data converts in its own `getTimestamp` callback. */
+    getTimestamp?: (item: T) => Date | number | string;
+    /** The "current" instant bucket boundaries are computed relative to.
+     *  Defaults to `new Date()`. Overridable for deterministic tests (and for
+     *  a caller that wants to bucket relative to something other than the
+     *  actual current instant, e.g. a fixed "as of" report time). */
+    now?: Date;
+    /** Overrides for one or more of the four bucket labels. Any label left
+     *  unset keeps its English default. */
+    labels?: RecencyLabels;
+}
+export interface RecencyBucket<T> {
+    label: string;
+    items: T[];
+}
+/**
+ * Buckets `items` into Today / Yesterday / Previous 7 Days / Older, using
+ * calendar-day boundaries in the local timezone — "yesterday" means the
+ * previous calendar date, not "24-48 hours ago". Mirrors the bucketing a
+ * chat sidebar's conversation-history list commonly groups by (this
+ * library's own `<lyra-conversation-item>` is the intended consumer, though
+ * this function is deliberately DOM/component-free — plain data in, plain
+ * data out).
+ *
+ * Only buckets that end up with at least one item are included in the
+ * returned array, in Today/Yesterday/Previous-7-Days/Older order; each
+ * bucket's items keep their original relative order from `items` (never
+ * re-sorted). Two edge cases with no dedicated bucket of their own: a
+ * timestamp dated in the future relative to `now` lands in `Today` — the
+ * most-recent bucket available, since there's no "upcoming" bucket to put it
+ * in instead. A timestamp that fails to parse lands in `Older` instead — it
+ * carries no "this is recent" signal at all, so the oldest/catch-all bucket
+ * is the more honest home for it than the newest one.
+ */
+export declare function groupByRecency<T>(items: T[], options?: GroupByRecencyOptions<T>): RecencyBucket<T>[];

package/dist/internal/group-by-recency.js

@@ -0,0 +1,80 @@
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const DEFAULT_LABELS = {
+    today: 'Today',
+    yesterday: 'Yesterday',
+    previousWeek: 'Previous 7 Days',
+    older: 'Older',
+};
+/** Midnight (start of the local calendar day) for `d`, as epoch millis —
+ *  built from `d`'s own local-timezone Y/M/D fields, so this is a calendar-
+ *  day boundary, not a rolling 24-hour offset from `d` itself. */
+function startOfLocalDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+/**
+ * Buckets `items` into Today / Yesterday / Previous 7 Days / Older, using
+ * calendar-day boundaries in the local timezone — "yesterday" means the
+ * previous calendar date, not "24-48 hours ago". Mirrors the bucketing a
+ * chat sidebar's conversation-history list commonly groups by (this
+ * library's own `<lyra-conversation-item>` is the intended consumer, though
+ * this function is deliberately DOM/component-free — plain data in, plain
+ * data out).
+ *
+ * Only buckets that end up with at least one item are included in the
+ * returned array, in Today/Yesterday/Previous-7-Days/Older order; each
+ * bucket's items keep their original relative order from `items` (never
+ * re-sorted). Two edge cases with no dedicated bucket of their own: a
+ * timestamp dated in the future relative to `now` lands in `Today` — the
+ * most-recent bucket available, since there's no "upcoming" bucket to put it
+ * in instead. A timestamp that fails to parse lands in `Older` instead — it
+ * carries no "this is recent" signal at all, so the oldest/catch-all bucket
+ * is the more honest home for it than the newest one.
+ */
+export function groupByRecency(items, options = {}) {
+    const getTimestamp = options.getTimestamp ?? ((item) => item);
+    const now = options.now ?? new Date();
+    const labels = { ...DEFAULT_LABELS, ...options.labels };
+    const todayStart = startOfLocalDay(now);
+    const today = [];
+    const yesterday = [];
+    const previousWeek = [];
+    const older = [];
+    for (const item of items) {
+        const raw = getTimestamp(item);
+        const date = raw instanceof Date ? raw : new Date(raw);
+        const time = date.getTime();
+        // No meaningful "how recent" signal at all -- the catch-all bucket
+        // surfaces it (so it's never silently dropped) without inventing a
+        // "day 0" that a genuinely-invalid timestamp doesn't deserve.
+        if (Number.isNaN(time)) {
+            older.push(item);
+            continue;
+        }
+        const dayDiff = Math.round((todayStart - startOfLocalDay(date)) / MS_PER_DAY);
+        if (dayDiff <= 0) {
+            // <= 0 (not === 0) also covers a timestamp dated in the future
+            // relative to `now` -- there's no "upcoming" bucket, so it reads as
+            // the most-recent bucket available rather than being dropped.
+            today.push(item);
+        }
+        else if (dayDiff === 1) {
+            yesterday.push(item);
+        }
+        else if (dayDiff <= 7) {
+            previousWeek.push(item);
+        }
+        else {
+            older.push(item);
+        }
+    }
+    const buckets = [];
+    if (today.length)
+        buckets.push({ label: labels.today, items: today });
+    if (yesterday.length)
+        buckets.push({ label: labels.yesterday, items: yesterday });
+    if (previousWeek.length)
+        buckets.push({ label: labels.previousWeek, items: previousWeek });
+    if (older.length)
+        buckets.push({ label: labels.older, items: older });
+    return buckets;
+}

package/dist/internal/rtl.d.ts

@@ -1,3 +1,4 @@
+import type { Placement } from '@floating-ui/dom';
 /**
  * Whether `el` resolves to RTL text direction. Logical CSS properties
  * (`inset-inline-start`, etc.) already flip visual layout for free, but
@@ -5,3 +6,25 @@
  * arrow-key direction) has to consult this explicitly to match.
  */
 export declare function isRtl(el: Element): boolean;
+/** A physical (not logical) horizontal side. */
+export type PhysicalSide = 'left' | 'right';
+/**
+ * Swaps `side` under RTL, passes it through unchanged under LTR -- for
+ * reasoning about a physical side (e.g. which edge an icon should point at,
+ * or which edge of a track a dock panel resizes from) that logical CSS
+ * properties alone can't express, since the caller needs the resolved
+ * physical value itself (to rotate a glyph, to pick a Floating UI
+ * `Placement`), not just a layout that flips for free.
+ */
+export declare function rtlAwareSide(side: PhysicalSide, el: Element): PhysicalSide;
+/**
+ * Swaps the `left`/`right` component of a Floating UI `Placement` under RTL
+ * (`'right-start'` <-> `'left-start'`, etc.) -- `'top'`/`'bottom'`-based
+ * placements are already direction-agnostic and pass through unchanged.
+ * Floating UI's own `computePosition()` has no built-in RTL awareness (it
+ * positions purely by the physical `left`/`right`/`top`/`bottom` it's given),
+ * so a popover that means "anchor to my trailing edge" must resolve that
+ * intent to a physical placement itself before calling `place()` from
+ * `positioner.ts` -- this is the resolution step.
+ */
+export declare function rtlAwarePlacement(placement: Placement, el: Element): Placement;

package/dist/internal/rtl.js

@@ -7,3 +7,31 @@
 export function isRtl(el) {
     return getComputedStyle(el).direction === 'rtl';
 }
+/**
+ * Swaps `side` under RTL, passes it through unchanged under LTR -- for
+ * reasoning about a physical side (e.g. which edge an icon should point at,
+ * or which edge of a track a dock panel resizes from) that logical CSS
+ * properties alone can't express, since the caller needs the resolved
+ * physical value itself (to rotate a glyph, to pick a Floating UI
+ * `Placement`), not just a layout that flips for free.
+ */
+export function rtlAwareSide(side, el) {
+    if (!isRtl(el))
+        return side;
+    return side === 'left' ? 'right' : 'left';
+}
+/**
+ * Swaps the `left`/`right` component of a Floating UI `Placement` under RTL
+ * (`'right-start'` <-> `'left-start'`, etc.) -- `'top'`/`'bottom'`-based
+ * placements are already direction-agnostic and pass through unchanged.
+ * Floating UI's own `computePosition()` has no built-in RTL awareness (it
+ * positions purely by the physical `left`/`right`/`top`/`bottom` it's given),
+ * so a popover that means "anchor to my trailing edge" must resolve that
+ * intent to a physical placement itself before calling `place()` from
+ * `positioner.ts` -- this is the resolution step.
+ */
+export function rtlAwarePlacement(placement, el) {
+    if (!isRtl(el))
+        return placement;
+    return placement.replace(/^(left|right)/, (side) => (side === 'left' ? 'right' : 'left'));
+}

package/dist/internal/scroll-lock.d.ts

@@ -1,7 +1,12 @@
 /**
- * Ref-counted document scroll lock — safe when a lock is acquired and
- * released more than once concurrently (e.g. a fast open/close/open
- * sequence). The original `overflow` value is restored only once the last
- * outstanding lock releases.
+ * Ref-counted scroll lock, scoped to a given `Document` (defaults to the
+ * caller's own top-level `document`) so it also works for content rendered
+ * inside an iframe or any other document the caller explicitly passes.
+ * Compensates for the removed scrollbar's width with inline-end padding on
+ * the root element, so locking scroll doesn't shift page content
+ * horizontally the instant the scrollbar disappears — restored to its prior
+ * value once the last outstanding lock releases. Safe when a lock is
+ * acquired and released more than once concurrently (e.g. a fast
+ * open/close/open sequence).
  */
-export declare function lockScroll(): () => void;
+export declare function lockScroll(doc?: Document): () => void;

package/dist/internal/scroll-lock.js

@@ -1,25 +1,41 @@
-let lockCount = 0;
-let previousOverflow = '';
+const counts = new WeakMap();
+const previousOverflow = new WeakMap();
+const previousPadding = new WeakMap();
 /**
- * Ref-counted document scroll lock — safe when a lock is acquired and
- * released more than once concurrently (e.g. a fast open/close/open
- * sequence). The original `overflow` value is restored only once the last
- * outstanding lock releases.
+ * Ref-counted scroll lock, scoped to a given `Document` (defaults to the
+ * caller's own top-level `document`) so it also works for content rendered
+ * inside an iframe or any other document the caller explicitly passes.
+ * Compensates for the removed scrollbar's width with inline-end padding on
+ * the root element, so locking scroll doesn't shift page content
+ * horizontally the instant the scrollbar disappears — restored to its prior
+ * value once the last outstanding lock releases. Safe when a lock is
+ * acquired and released more than once concurrently (e.g. a fast
+ * open/close/open sequence).
  */
-export function lockScroll() {
-    if (lockCount === 0) {
-        previousOverflow = document.documentElement.style.overflow;
-        document.documentElement.style.overflow = 'hidden';
+export function lockScroll(doc = document) {
+    const root = doc.documentElement;
+    const count = counts.get(doc) ?? 0;
+    if (count === 0) {
+        previousOverflow.set(doc, root.style.overflow);
+        previousPadding.set(doc, root.style.paddingInlineEnd);
+        const scrollbarWidth = (doc.defaultView?.innerWidth ?? 0) - root.clientWidth;
+        root.style.overflow = 'hidden';
+        if (scrollbarWidth > 0) {
+            const currentPadding = parseFloat(getComputedStyle(root).paddingInlineEnd) || 0;
+            root.style.paddingInlineEnd = `${currentPadding + scrollbarWidth}px`;
+        }
     }
-    lockCount++;
+    counts.set(doc, count + 1);
     let released = false;
     return () => {
         if (released)
             return;
         released = true;
-        lockCount--;
-        if (lockCount === 0) {
-            document.documentElement.style.overflow = previousOverflow;
+        const remaining = (counts.get(doc) ?? 1) - 1;
+        counts.set(doc, remaining);
+        if (remaining === 0) {
+            root.style.overflow = previousOverflow.get(doc) ?? '';
+            root.style.paddingInlineEnd = previousPadding.get(doc) ?? '';
         }
     };
 }

package/dist/internal/tokens.styles.js

@@ -10,8 +10,11 @@ export const tokens = css `
     --lyra-color-brand: var(--wa-color-brand-fill-loud, #0969da);
     --lyra-color-brand-quiet: var(--wa-color-brand-fill-quiet, #ddf4ff);
     --lyra-color-success: var(--wa-color-success-fill-loud, #1a7f37);
+    --lyra-color-success-quiet: var(--wa-color-success-fill-quiet, #dafbe1);
     --lyra-color-warning: var(--wa-color-warning-fill-loud, #9a6700);
+    --lyra-color-warning-quiet: var(--wa-color-warning-fill-quiet, #fff8c5);
     --lyra-color-danger: var(--wa-color-danger-fill-loud, #cf222e);
+    --lyra-color-danger-quiet: var(--wa-color-danger-fill-quiet, #ffebe9);
     /* Text/icon color for content painted on top of a solid brand-fill
        background (selected calendar days, filled badges, etc.) -- almost
        always white on both the light and dark brand fills above, so it's
@@ -65,8 +68,11 @@ export const tokens = css `
       --lyra-color-brand: var(--wa-color-brand-fill-loud, #4d9fef);
       --lyra-color-brand-quiet: var(--wa-color-brand-fill-quiet, #163650);
       --lyra-color-success: var(--wa-color-success-fill-loud, #3fb950);
+      --lyra-color-success-quiet: var(--wa-color-success-fill-quiet, #1b4721);
       --lyra-color-warning: var(--wa-color-warning-fill-loud, #d29922);
+      --lyra-color-warning-quiet: var(--wa-color-warning-fill-quiet, #3b2900);
       --lyra-color-danger: var(--wa-color-danger-fill-loud, #f85149);
+      --lyra-color-danger-quiet: var(--wa-color-danger-fill-quiet, #4c1210);
     }
   }
   :host([hidden]) {