@aceshooting/lyra-ui 9.1.1 → 10.0.1

package/dist/components/utility/icon/icon.styles.js

@@ -24,9 +24,6 @@ import{css}from"lit";const styles=css`
     justify-content: center;
   }
 
-  /* The custom-content slot is an assignment target only: syncCustomNodes() clones its trusted SVG
-     nodes into the component-owned svg above, where they have a real SVG parent and actually
-     paint. Rendering the slot itself would place the originals a second time, outside that svg. */
   slot {
     display: none;
   }
@@ -46,8 +43,6 @@ import{css}from"lit";const styles=css`
     block-size: var(--lr-icon-size, var(--lr-size-1-5em));
   }
 
-  /* Rotate and flip are deliberately physical, not direction-relative. Directional glyphs are
-     mirrored by the wrapping part of the component that owns their reading-order semantics. */
   :host(:where([rotate], [flip])) {
     transform: rotate(var(--lr-icon-rotate, 0deg))
       scale(
@@ -69,7 +64,6 @@ import{css}from"lit";const styles=css`
     --_lr-icon-flip-y: -1;
   }
 
-  /* Legacy Lyra alignment knob retained alongside the mirrored canvas vocabulary. */
   :host(:where([fixed-width])) {
     inline-size: var(--lr-icon-fixed-width, var(--lr-size-1-5em));
     block-size: var(--lr-icon-size, var(--lr-size-1em));

package/dist/components/utility/json-viewer/json-viewer.styles.js

@@ -1,15 +1,7 @@
 import{css}from"lit";const styles=css`
   :host {
     display: block;
-    /* Consumer-tunable scroll cap -- 'none' means the viewer grows with its
-       content, matching every other block-level component in this library
-       until a caller opts into an internal scrollbar via the max-height
-       attribute. */
     --_lr-json-viewer-max-height: none;
-    /* Contained here (rather than left as a bare font-family literal) so a
-       host page can retheme it, same rationale as --lr-widget-overlay-color
-       in widget.styles.ts -- no shared --lr-* monospace token exists
-       to resolve through. */
     --_lr-json-viewer-font: var(--lr-font-mono);
     --_lr-json-viewer-active-outline: var(--lr-focus-ring-color);
     --_lr-json-viewer-string-color: var(--lr-color-success);
@@ -43,13 +35,6 @@ import{css}from"lit";const styles=css`
   }
   [part="tree"] {
     padding: var(--lr-space-s);
-    /* A JSON tree's structure -- key, colon, value, brackets, indentation -- reads
-       left-to-right regardless of the surrounding document direction, exactly like
-       code and like every JSON view (devtools, VS Code). Without this, an ancestor
-       dir="rtl" reverses each row to value-colon-key order, right-aligns the tree, and
-       flips the disclosure chevrons, so the data reads backwards. A key/value that
-       itself contains RTL text still renders that run correctly via the bidi algorithm;
-       only the LTR scaffolding is pinned. Matches code-block's [part='pre'] lock. */
     direction: ltr;
   }
   .row {
@@ -62,17 +47,11 @@ import{css}from"lit";const styles=css`
   .row:hover {
     background: var(--lr-json-viewer-row-hover-bg, var(--lr-color-brand-quiet));
   }
-  /* :where() zeroes the wrapped selectors' specificity contribution, leaving only :hover/
-     :focus-within themselves -- (0,1,0) total, so a consumer's own ::part(copy-button):hover
-     override ((0,1,1)) wins without needing !important -- same fix shape as
-     lr-attachment-trigger's/lr-copy-button's own :where()-wrapped hover rule. */
-  :where(.row):hover :where([part="copy-button"]),
-  :where(.row):focus-within :where([part="copy-button"]) {
+  .row:hover [part="copy-button"],
+  .row:focus-within [part="copy-button"] {
     opacity: 1;
   }
   [part="toggle"] {
-    /* Keep the glyph compact while giving the interactive box the shared
-       minimum target size, even for deeply nested rows. */
     inline-size: var(--lr-size-1-25rem);
     block-size: var(--lr-size-1-25rem);
     min-inline-size: var(--lr-icon-button-size);
@@ -89,12 +68,6 @@ import{css}from"lit";const styles=css`
     border-radius: var(--lr-radius);
     cursor: pointer;
   }
-  /* The UA '[hidden] { display: none }' rule is author-overridable by any
-     same-origin declaration for that element regardless of specificity --
-     author rules always win over user-agent rules unless !important is
-     involved -- so this only needs to add visibility, not re-declare
-     display. Keeping the box (rather than display:none) preserves this
-     leaf/empty row's alignment with sibling rows that do have a chevron. */
   [part="toggle"][hidden] {
     visibility: hidden;
   }
@@ -106,13 +79,6 @@ import{css}from"lit";const styles=css`
   [part="toggle"][aria-expanded="true"] .chevron {
     transform: rotate(90deg);
   }
-  /* No RTL chevron override: [part='tree'] above is pinned direction:ltr, so a collapsed
-     row's disclosure chevron always points at the LTR-positioned children (to the right),
-     the same as it does in an LTR document. */
-  /* :where() zeroes the wrapped selectors' specificity contribution, leaving only :hover itself
-     -- (0,1,0) total, so a consumer's own ::part(toggle):hover override ((0,1,1)) wins without
-     needing !important -- same fix shape as lr-attachment-trigger's/lr-copy-button's own
-     :where()-wrapped hover rule. */
   :where([part="toggle"]):hover:where(:not([hidden])) {
     background: var(--lr-color-brand-quiet);
     color: var(--lr-color-brand);
@@ -130,9 +96,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Stands in for [part='toggle'] on the closing-bracket row, so it must match the toggle's
-     actual used inline-size -- min-inline-size wins over the toggle's own smaller inline-size,
-     so the real box is --lr-icon-button-size, not --lr-size-1-25rem. */
   .toggle-space {
     inline-size: var(--lr-icon-button-size);
     flex: 0 0 auto;
@@ -153,9 +116,6 @@ import{css}from"lit";const styles=css`
     flex: 0 0 auto;
     color: var(--lr-color-text-quiet);
   }
-  /* --lr-json-viewer-match-bg indirection (rather than the bare --lr-color-warning-quiet token)
-     lets a consumer retheme just this component's search-match highlight without repainting
-     every other warning-toned surface on the page that reads the same shared token. */
   [part="key"][data-match],
   [part="value"][data-match] {
     background: var(--lr-json-viewer-match-bg, var(--lr-color-warning-quiet));
@@ -227,9 +187,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-brand-quiet);
     color: var(--lr-color-brand);
   }
-  /* This is also the pressed state for the row-hover reveal rule further up: that rule only fades
-     the button in when its row is hovered, it is not itself a hover treatment on the button, and the
-     button's own held state belongs here next to its hover. */
   [part="copy-button"]:active {
     background: color-mix(
       in oklab,
@@ -238,9 +195,6 @@ import{css}from"lit";const styles=css`
     );
     color: var(--lr-color-brand);
   }
-  /* Per-node copy buttons stay out of the way until the row is actually
-     being interacted with -- the toolbar's own top-level copy button is
-     exempt (it has no ancestor .row, so this rule never matches it). */
   .row [part="copy-button"] {
     opacity: 0;
   }

package/dist/components/utility/known-date/known-date.class.d.ts

@@ -99,8 +99,9 @@ declare const LyraKnownDate_base: typeof LyraKnownDateBase & (new (...args: any[
  * @csspart fieldset - The `<fieldset>` grouping the three fields.
  * @csspart legend - The `<legend>` element.
  * @csspart form-control-label - The visible label wrapper inside the legend.
- * @csspart label - Deprecated in 8.0.0; compatibility alias for `form-control-label`, retained
- *   until at least 10.0.0.
+ * @csspart label - Deprecated in 8.0.0; compatibility alias for `form-control-label`. Web Awesome
+ *   still publishes its own deprecated `label` part on `<wa-known-date>`, so this alias stays on
+ *   the same node until upstream drops it.
  * @csspart fields - The row wrapping the three field blocks.
  * @csspart form-control-input - Alias on the fields row matching other form controls.
  * @csspart field - Each field block (label + input), repeated three times; distinguished by
@@ -233,7 +234,10 @@ export declare class LyraKnownDate extends LyraKnownDate_base {
     private readonly dayId;
     private readonly monthId;
     private readonly yearId;
-    /** Hidden native date mirror used by integrations that inspect native constraints directly. */
+    /** Hidden native date mirror used by integrations that inspect native constraints directly.
+     *  Stays a writable `@query` field rather than a readonly `get`: `wa-known-date` declares it
+     *  writable, and check-pinned-upstream-manifests treats a readonly-vs-writable difference on a
+     *  mirrored member as an `unsupported` surface drift -- a release blocker. */
     valueInput: HTMLInputElement;
     private validationTargetOverride?;
     constructor();

package/dist/components/utility/known-date/known-date.styles.js

@@ -1,52 +1,33 @@
 import{css}from"lit";const styles=css`
   :host {
     display: block;
-    /* Every per-tier value below comes from the library's one shared size ladder
-       (internal/sizes.styles.ts), which re-points --lr-form-control-* per :host([size='...']) and
-       matches BOTH spellings of every tier in the same selector list -- so small/medium/large work
-       here for free. This component's own --lr-known-date-field-* surface is unchanged and still
-       the documented override point; only the values behind it moved, which is what keeps a
-       birthdate field the same height as the <lr-input>/<lr-date-input> beside it in a form row at
-       every tier instead of drifting from a hand-kept copy of that scale. */
     --_lr-known-date-field-padding-block: var(--lr-form-control-padding-block);
     --_lr-known-date-field-padding-inline: var(
       --lr-form-control-padding-inline
     );
     --_lr-known-date-field-font-size: var(--lr-form-control-font-size);
-    /* Not --lr-form-control-gap: that knob is the rhythm between one control's own inline
-       affordances, an order of magnitude tighter than the gap between three separate field
-       blocks. Constant across tiers by design. */
     --_lr-known-date-field-gap: var(--lr-space-s);
+    --_lr-known-date-field-fill: var(--lr-color-surface);
+    --_lr-known-date-field-border-color: var(--lr-color-border);
     --_lr-known-date-year-field-width: var(--lr-size-5em);
     --_lr-known-date-day-field-width: var(--lr-size-3-5em);
     --_lr-known-date-month-field-width: var(--lr-size-3-5em);
-    /* max() rather than the bare ladder height: the ladder's 2xs tier resolves to 1.25rem/20px,
-       and a field a pointer has to hit floors at WCAG 2.2 SC 2.5.8's 24px minimum. Above that the
-       floor tracks the ladder exactly. At the small tiers the floor exceeds the field's own
-       padding/font-driven content height and actively pins the rendered box; at l/xl the content
-       height stays under it, so the floor is inert there. */
     --_lr-known-date-field-min-height: max(
       var(--lr-form-control-height),
       var(--lr-size-24px)
     );
-    /* --lr-known-date-field-height is intentionally NOT declared here. It is a consumer-facing
-       exact-height escape hatch consumed only through the var() fallbacks on [part='field-input']
-       below; declaring any value for it (even 'auto') would make those fallback arms unreachable
-       and turn --lr-known-date-field-min-height into dead code (the lr-select trap). Left
-       undeclared, both arms stay live: the per-tier floor falls out of the fallback, and setting
-       the property pins an exact height. */
   }
 
   [part~="form-control"] {
     min-inline-size: 0;
   }
 
-  :host([appearance="filled"]) [part="field-input"] {
-    border-color: transparent;
-    background: var(--lr-color-surface-raised);
+  :host([appearance="filled"]) {
+    --_lr-known-date-field-border-color: transparent;
+    --_lr-known-date-field-fill: var(--lr-color-surface-raised);
   }
-  :host([appearance="filled-outlined"]) [part="field-input"] {
-    background: var(--lr-color-surface-raised);
+  :host([appearance="filled-outlined"]) {
+    --_lr-known-date-field-fill: var(--lr-color-surface-raised);
   }
   :host([pill]) [part="field-input"] {
     border-radius: var(--lr-radius-pill);
@@ -68,22 +49,9 @@ import{css}from"lit";const styles=css`
     font-weight: var(--lr-font-weight-semibold);
     overflow-wrap: anywhere;
   }
-  /* [part] always contains a literal <slot> child regardless of assigned
-     content, so :empty never matches -- real emptiness is tracked in JS
-     (hasLabelSlot) and reflected via [hidden] instead (same fix as every
-     other lyra form control's label/hint/error chrome). Without this the
-     required marker below (attached to this box) would render a stray glyph
-     with nothing before it whenever no label is set. */
   [part="legend"][hidden] {
     display: none;
   }
-  /* The one component that does NOT take its marker rule from
-     internal/form-control.styles.ts, only its custom properties. That sheet
-     attaches the marker to [part~="form-control-label"], which here is a span
-     INSIDE this legend; the marker belongs to the legend box itself, after the
-     whole label, so the selector is local while the glyph, colour and offset
-     stay the same three consumer-settable properties every other control
-     resolves. Keep these declarations identical to that sheet's. */
   :host([required]) [part="legend"]::after {
     content: var(--lr-form-control-required-content, ' *');
     color: var(--lr-form-control-required-color, var(--lr-color-danger));
@@ -117,8 +85,6 @@ import{css}from"lit";const styles=css`
         var(--_lr-known-date-field-min-height)
       )
     );
-    /* Pinned only when --lr-known-date-field-height is set; 'auto' otherwise, so the field keeps
-       growing to fit its own padding/font content. */
     block-size: var(--lr-known-date-field-height, auto);
     padding-block: var(
       --lr-known-date-field-padding-block,
@@ -128,9 +94,10 @@ import{css}from"lit";const styles=css`
       --lr-known-date-field-padding-inline,
       var(--_lr-known-date-field-padding-inline)
     );
-    border: var(--lr-border-width-thin) solid var(--lr-color-border);
+    border: var(--lr-border-width-thin) solid
+      var(--_lr-known-date-field-border-color);
     border-radius: var(--lr-form-control-radius);
-    background: var(--lr-color-surface);
+    background: var(--_lr-known-date-field-fill);
     color: var(--lr-color-text);
     font-family: inherit;
     font-size: var(
@@ -157,11 +124,6 @@ import{css}from"lit";const styles=css`
       var(--_lr-known-date-year-field-width)
     );
   }
-  /* Mouse-hover parity with the keyboard :focus-visible ring below -- same border-retint
-     treatment as lr-color-picker's own bordered [part='input']:hover.
-     no-pressed-state: a press on a number field lands the caret rather than activating a control,
-     so a pressed tint would show only for the length of the mousedown and then be replaced by the
-     :focus-visible ring below, which is the state that actually persists and communicates. */
   [part="field-input"]:hover {
     border-color: var(--lr-color-brand);
   }
@@ -169,9 +131,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* --lr-known-date-invalid-border-color indirection (rather than the bare --lr-color-danger
-     token) lets a consumer retheme just this component's invalid-field border without
-     repainting every other component in the app that reads the same shared danger token. */
   :host([data-invalid]) [part="field-input"] {
     border-color: var(
       --lr-known-date-invalid-border-color,

package/dist/components/utility/live-region/live-region.styles.js

@@ -1,8 +1,4 @@
 import{css}from"lit";const styles=css`
-  /* The host contributes no box of its own -- \`.sr-only\` (composed in via
-     internal/a11y.ts's shared \`srOnly\`) already takes the single child out
-     of flow via absolute positioning, so a wrapping host box would just be
-     an empty, purposeless inline element sitting in the document. */
   :host {
     display: contents;
   }

package/dist/components/utility/mention-popover/mention-popover.styles.js

@@ -3,17 +3,10 @@ import{css}from"lit";const styles=css`
     display: contents;
   }
 
-  /* Positioned by internal/positioner.js's place() -- same fixed/z-index
-     shape as lr-combobox's/lr-select's own [part='listbox']. Closed
-     state: invisible + slightly raised, transitioning in on :host([open]),
-     same as those two. */
   [part='listbox'] {
     position: fixed;
     z-index: var(--lr-layer-dropdown);
     box-sizing: border-box;
-    /* Clamped against internal/positioner.js's place()-published available-space custom
-       properties (see menu.styles.ts's/combobox.styles.ts's identical [part='listbox']
-       treatment) so this popup can't overflow off-screen on a short/keyboard-shrunk viewport. */
     max-block-size: min(var(--lr-size-16rem), var(--lr-positioner-available-block-size, var(--lr-size-16rem)));
     overflow-y: auto;
     overflow-x: clip;
@@ -24,7 +17,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-surface);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
-    /* Anchored overlay: a positioner-placed listbox floating over page content, not a modal layer. */
     box-shadow: var(--lr-shadow-m);
     visibility: hidden;
     opacity: 0;
@@ -56,19 +48,10 @@ import{css}from"lit";const styles=css`
     border-radius: var(--lr-radius);
     cursor: pointer;
   }
-  /* --lr-mention-popover-option-active-bg indirection (rather than the bare --lr-color-brand-quiet
-     token) lets a consumer retheme just this component's highlighted/active suggestion row
-     without repainting every other component that reuses the same shared brand-quiet token --
-     same indirection lr-select's/lr-combobox's identical-looking [part='option'][data-active]
-     background is missing (checklist's own named example for this check). */
   [part='option']:hover,
   [part='option'][data-active] {
     background: var(--lr-mention-popover-option-active-bg, var(--lr-color-brand-quiet));
   }
-  /* Mixed from the same overridable highlight the hover/active-row rule uses, so a consumer who
-     retints --lr-mention-popover-option-active-bg gets a matching pressed state for free. This also
-     serves the [part='option-description'] hover rule below, which is a descendant treatment of this
-     same row rather than a hover state of its own. */
   [part='option']:active {
     background: color-mix(
       in oklab,
@@ -104,14 +87,6 @@ import{css}from"lit";const styles=css`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  /* --lr-color-text-quiet-on-brand-quiet fails WCAG AA (~4.24:1, needs
-     4.5:1) -- unlike lr-combobox's/lr-select's identical-looking
-     [part='option'][data-active] background (which never has this problem
-     in practice, since those default their active index to -1/none until a
-     user actually arrows through the list), this component always opens
-     with row 0 pre-highlighted (see the activeIndex field's own doc), so the
-     active/quiet-text combination is the default state, not an edge case --
-     it must pass contrast on its own. */
   [part='option']:hover [part='option-description'],
   [part='option'][data-active] [part='option-description'] {
     color: var(--lr-color-text);

package/dist/components/utility/poll-status/poll-status.styles.js

@@ -15,10 +15,6 @@ import{css}from"lit";const styles=css`
     block-size: var(--lr-size-0-375rem);
     border-radius: var(--lr-radius-pill);
     background: var(--lr-color-brand);
-    /* Same token/rationale as lr-stream-status's and lr-typing-indicator's
-       own looping pulse: --lr-transition-ambient is the length the library
-       reserves for ambient "still alive" motion, so every looping indicator
-       shares one calm rhythm instead of hand-rolling its own duration. */
     animation: lr-poll-status-pulse var(--lr-transition-ambient) infinite;
   }
   [part='indicator'][data-due] {

package/dist/components/utility/random-content/random-content.class.d.ts

@@ -43,6 +43,16 @@ export interface LyraRandomContentEventMap {
  * Reactive selection changes written while detached and rendered during reconnection are part of
  * that silent baseline; a later explicit `randomize()` is still announced.
  *
+ * **Before script runs, the first candidate is the one that shows.** Selection happens in
+ * `firstUpdated()`, which a server renderer never executes, and it works by setting
+ * `hidden`/`aria-hidden` on light-DOM siblings — something Lit's hydration diffing never inspects,
+ * so no amount of first-render seeding can make the server agree. The shadow stylesheet therefore
+ * hides every candidate after the first until a selection has actually been applied: a
+ * server-rendered page (and a page whose script never runs at all) paints one candidate rather
+ * than the entire pool, and hydration swaps that one for the chosen one instead of collapsing N
+ * down to one. Randomness itself is genuinely unavailable server-side — there is no seed to share
+ * — so authors who need a *specific* pre-hydration candidate order the pool accordingly.
+ *
  * `fade-left`/`fade-right` are physical-direction transforms (matching the
  * upstream naming this component mirrors), not "previous/next" navigational
  * semantics like a carousel chevron, so they are deliberately **not**
@@ -98,6 +108,18 @@ export declare class LyraRandomContent extends LyraElement<LyraRandomContentEven
     get mode(): LyraRandomContentMode;
     set mode(next: LyraRandomContentMode);
     private slotEl?;
+    private baseEl?;
+    /**
+     * Whether a selection has ever been applied to the pool. Drives `[part='base']`'s
+     * `data-unselected` marker, which is what keeps a server-rendered page from painting the whole
+     * candidate pool (see the class doc's SSR note).
+     *
+     * Deliberately NOT a reactive `@state`: it flips inside `applySelection()`, reached from
+     * `firstUpdated()`, and a reactive write there schedules a second update purely to drop one
+     * attribute -- Lit's change-in-update warning, for no rendered difference. The attribute is
+     * removed imperatively instead; every later render commits the same `false` and leaves it off.
+     */
+    private hasAppliedSelection;
     private timer?;
     private timerWindow?;
     private reduceMotion;

package/dist/components/utility/random-content/random-content.class.js

@@ -1,7 +1,8 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{pauseIcon,playIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteDuration,finiteInteger}from"../../../internal/numbers.js";import{composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{literalSetConverter}from"../../../internal/converters.js";import{styles}from"./random-content.styles.js";import{LYRA_DEFAULT_randomContentPause,LYRA_DEFAULT_randomContentResume}from"../../../internal/default-strings.generated.js";const RANDOM_CONTENT_MODE=literalSetConverter(["unique","random","sequence"],"unique");class LyraRandomContent extends LyraElement{constructor(){super(...arguments),this.animation="none",this.autoplay=!1,this.paused=!1,this.autoplayInterval=3e3,this.items=1,this._mode="unique",this.reduceMotion=!1,this.sequenceCursor=0,this.lastPool=[],this.managedPool=new Set,this.authorState=new WeakMap,this.authorStateObserverPauseDepth=0,this.focusWithin=!1,this.connectionGeneration=0,this.selectionAnnouncementsArmed=!1,this.lastAnnouncementText="",this.hasUpdatedOnce=!1,this.onMotionPreferenceChange=event=>{this.reduceMotion=event.matches,this.restartAutoplay()},this.onForwardedSlotChange=event=>{const slot=event.target;if(this.contains(slot)){if(this.observeAnnouncementContent(),!this.poolsEqual(this.eligible(),this.lastPool)){this.onSlotChange();return}this.announceCurrentSelectionIfChanged()}},this.onSlotChange=()=>{if(!this.isConnected)return;const pool=this.eligible();this.poolsEqual(pool,this.lastPool)||(this.reselect({resetPrevious:!0,announce:this.selectionAnnouncementsArmed}),this.restartAutoplay())},this.onFocusIn=()=>{this.focusWithin=!0,this.stopAutoplay()},this.onFocusOut=()=>{const ownerWindow=this.ownerDocument.defaultView,connectionGeneration=this.connectionGeneration,finishFocusOut=()=>{connectionGeneration!==this.connectionGeneration||!this.isConnected||(this.focusWithin=composedContains(this,deepActiveElement(this.ownerDocument)),this.focusWithin||this.restartAutoplay())};ownerWindow?ownerWindow.queueMicrotask(finishFocusOut):queueMicrotask(finishFocusOut)},this.togglePaused=()=>{this.paused=!this.paused,this.emit("lr-pause-change",Object.freeze({paused:this.paused}))}}static{this.defaultStrings={...super.defaultStrings,randomContentPause:LYRA_DEFAULT_randomContentPause,randomContentResume:LYRA_DEFAULT_randomContentResume}}static{this.immutableEventDetails=Object.freeze(["lr-content-change"])}static{this.identityEventDetailProperties=Object.freeze({"lr-content-change":Object.freeze(["items"])})}static{this.styles=[LyraElement.styles,styles]}get mode(){return this._mode}set mode(next){const normalized=RANDOM_CONTENT_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}connectedCallback(){this.connectionGeneration+=1;const connectionGeneration=this.connectionGeneration;super.connectedCallback(),this.addEventListener("slotchange",this.onForwardedSlotChange),this.selectionAnnouncementsArmed=!1,this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.startAuthorStateObserver(),this.startAnnouncementContentObserver();const ownerWindow=this.ownerDocument.defaultView;this.mediaQuery=ownerWindow?.matchMedia?.("(prefers-reduced-motion: reduce)"),this.reduceMotion=this.mediaQuery?.matches??!1,this.mediaQuery?.addEventListener("change",this.onMotionPreferenceChange),this.hasUpdated&&this.reselect({announce:!1}),this.restartAutoplay(),this.updateComplete.then(()=>{this.isConnected&&connectionGeneration===this.connectionGeneration&&(this.lastAnnouncementText=this.selectionAnnouncement(this.previousSelection??[]),this.selectionAnnouncementsArmed=!0)})}disconnectedCallback(){this.connectionGeneration+=1,this.selectionAnnouncementsArmed=!1,this.announcementSink?.release(),this.announcementSink=void 0,this.stopAutoplay(),this.stopAuthorStateObserver(),this.stopAnnouncementContentObserver(),this.removeEventListener("slotchange",this.onForwardedSlotChange),this.focusWithin=!1,this.restoreManagedPool(),this.mediaQuery?.removeEventListener("change",this.onMotionPreferenceChange),this.mediaQuery=void 0,super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.reselect({announce:!1}),this.restartAutoplay()}updated(changed){super.updated(changed),this.hasUpdatedOnce&&(changed.has("items")&&this.reselect({announce:this.selectionAnnouncementsArmed}),(changed.has("autoplay")||changed.has("autoplayInterval")||changed.has("paused"))&&this.restartAutoplay()),this.hasUpdatedOnce=!0}eligible(){return this.slotEl?.assignedElements({flatten:!0})??[]}clampedCount(poolSize){return finiteInteger(this.items,1,1,poolSize)}poolsEqual(a,b){return a.length!==b.length?!1:a.every((el,index)=>el===b[index])}shuffledPick(pool,count){const arr=pool.slice(),n=Math.min(count,arr.length);for(let i=0;i<n;i+=1){const j=i+Math.floor(Math.random()*(arr.length-i)),swap=arr[i];arr[i]=arr[j],arr[j]=swap}return arr.slice(0,n)}sameAsPrevious(selection){const previous=this.previousSelection;if(!previous||previous.length!==selection.length)return!1;const previousSet=new Set(previous);return selection.every(el=>previousSet.has(el))}selectUnique(pool,count){let picked=this.shuffledPick(pool,count);if(pool.length>count){let attempts=0;for(;attempts<10&&this.sameAsPrevious(picked);)picked=this.shuffledPick(pool,count),attempts+=1}return picked}selectSequence(pool,count){const total=pool.length,start=this.sequenceCursor%total,picked=[];for(let k=0;k<count;k+=1)picked.push(pool[(start+k)%total]);return this.sequenceCursor=(start+count)%total,picked}computeSelectionForMode(pool,count){switch(this.mode){case"sequence":return this.selectSequence(pool,count);case"random":return this.shuffledPick(pool,count);default:return this.selectUnique(pool,count)}}preserveFocusedSubtree(pool,selected){const active=deepActiveElement(this.ownerDocument),focusedItem=pool.find(item=>composedContains(item,active));return!focusedItem||selected.includes(focusedItem)?selected:[...selected.slice(0,-1),focusedItem]}reconcileManagedPool(pool){const nextPool=new Set(pool);for(const item of this.managedPool)nextPool.has(item)||this.restoreAuthorState(item);for(const item of pool)this.authorState.has(item)||this.authorState.set(item,{hiddenAttribute:item.getAttribute("hidden"),ariaHidden:item.getAttribute("aria-hidden")});this.managedPool=nextPool}restoreAuthorState(item){const original=this.authorState.get(item);original&&(original.hiddenAttribute===null?item.removeAttribute("hidden"):item.setAttribute("hidden",original.hiddenAttribute),original.ariaHidden===null?item.removeAttribute("aria-hidden"):item.setAttribute("aria-hidden",original.ariaHidden),this.authorState.delete(item))}restoreManagedPool(){for(const item of this.managedPool)this.restoreAuthorState(item);this.managedPool.clear(),this.lastPool=[],this.previousSelection=void 0,this.lastAnnouncementText=""}applyManagedSelection(pool,selected){const selectedSet=new Set(selected);for(const el of pool){const shown=selectedSet.has(el);el.toggleAttribute("hidden",!shown),el.setAttribute("aria-hidden",shown?"false":"true")}}applySelection(pool,selected){this.withAuthorStateObserverPaused(()=>{this.reconcileManagedPool(pool),this.applyManagedSelection(pool,selected)})}captureAuthorStateMutations(records){for(const record of records){if(record.type!=="attributes")continue;const item=record.target;if(!this.managedPool.has(item))continue;const state=this.authorState.get(item);state&&(record.attributeName==="hidden"&&(state.hiddenAttribute=item.getAttribute("hidden")),record.attributeName==="aria-hidden"&&(state.ariaHidden=item.getAttribute("aria-hidden")))}}observeAuthorState(){const observer=this.authorStateObserver;if(!observer)return;const options={attributes:!0,attributeFilter:["hidden","aria-hidden"],subtree:!0};observer.observe(this,options);for(const item of this.eligible())this.contains(item)||observer.observe(item,options)}startAuthorStateObserver(){if(this.authorStateObserver)return;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.authorStateObserver=new MutationObserverCtor(records=>{this.captureAuthorStateMutations(records),this.withAuthorStateObserverPaused(()=>{const selected=this.preserveFocusedSubtree(this.lastPool,this.previousSelection??[]);this.applyManagedSelection(this.lastPool,selected),this.previousSelection=selected})}),this.observeAuthorState())}stopAuthorStateObserver(){const observer=this.authorStateObserver;observer&&(this.captureAuthorStateMutations(observer.takeRecords()),observer.disconnect(),this.authorStateObserver=void 0,this.authorStateObserverPauseDepth=0)}withAuthorStateObserverPaused(operation){const observer=this.authorStateObserver,outermost=this.authorStateObserverPauseDepth===0;outermost&&observer&&(this.captureAuthorStateMutations(observer.takeRecords()),observer.disconnect()),this.authorStateObserverPauseDepth+=1;try{return operation()}finally{this.authorStateObserverPauseDepth-=1,outermost&&observer&&this.isConnected&&this.observeAuthorState()}}selectionAnnouncement(selected){const content=selected.map(item=>composedAccessibilityText(item).replace(/\s+/g," ").trim()).filter(Boolean).join(" "),context=this.getAttribute("aria-label")?.trim()??"";return!context||context===content?content:content?`${context}: ${content}`:context}announcementObservationOptions(){return{attributes:!0,attributeFilter:["alt","aria-hidden","aria-label","class","hidden","inert","open","slot","style"],characterData:!0,childList:!0,subtree:!0}}observeAnnouncementContent(){const observer=this.announcementContentObserver;if(!observer)return;observer.disconnect();const options=this.announcementObservationOptions();observer.observe(this,options);for(const slot of this.querySelectorAll("slot"))if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))observer.observe(assigned,options)}startAnnouncementContentObserver(){if(this.announcementContentObserver)return;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.announcementContentObserver=new MutationObserverCtor(()=>{this.observeAnnouncementContent(),this.announceCurrentSelectionIfChanged()}),this.observeAnnouncementContent())}stopAnnouncementContentObserver(){this.announcementContentObserver?.disconnect(),this.announcementContentObserver=void 0}announceCurrentSelectionIfChanged(){const text=this.selectionAnnouncement(this.previousSelection??[]);if(!this.selectionAnnouncementsArmed){this.lastAnnouncementText=text;return}text!==this.lastAnnouncementText&&(this.lastAnnouncementText=text,text&&this.announcementSink?.announce(text))}reselect(options={}){const pool=this.eligible();if(this.lastPool=pool,pool.length===0)return this.withAuthorStateObserverPaused(()=>this.reconcileManagedPool(pool)),this.previousSelection=void 0,this.lastAnnouncementText="",Object.freeze([]);options.resetPrevious&&(this.previousSelection=void 0);const count=this.clampedCount(pool.length),selected=this.preserveFocusedSubtree(pool,this.computeSelectionForMode(pool,count));this.applySelection(pool,selected),this.previousSelection=selected;const announcement=this.selectionAnnouncement(selected);this.lastAnnouncementText=announcement,options.announce!==!1&&this.announcementSink?.announce(announcement);const exposedSelection=Object.freeze([...selected]);return this.emit("lr-content-change",Object.freeze({items:exposedSelection})),exposedSelection}randomize(){return this.reselect()}stopAutoplay(){this.timer!==void 0&&this.timerWindow?.clearInterval(this.timer),this.timer=void 0,this.timerWindow=void 0}restartAutoplay(){if(this.stopAutoplay(),!this.isConnected||!this.autoplay||this.paused||this.focusWithin||this.reduceMotion||this.eligible().length<2)return;const ownerWindow=this.ownerDocument.defaultView;if(!ownerWindow)return;const interval=finiteDuration(this.autoplayInterval,3e3,1e3),connectionGeneration=this.connectionGeneration;this.timerWindow=ownerWindow,this.timer=ownerWindow.setInterval(()=>{if(connectionGeneration!==this.connectionGeneration||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow){this.stopAutoplay();return}this.reselect({announce:!1})},interval)}render(){const hostLabel=this.getAttribute("aria-label"),multiple=finiteInteger(this.items,1,1,Number.MAX_SAFE_INTEGER)>1;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{pauseIcon,playIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteDuration,finiteInteger}from"../../../internal/numbers.js";import{composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{literalSetConverter}from"../../../internal/converters.js";import{styles}from"./random-content.styles.js";import{LYRA_DEFAULT_randomContentPause,LYRA_DEFAULT_randomContentResume}from"../../../internal/default-strings.generated.js";const RANDOM_CONTENT_MODE=literalSetConverter(["unique","random","sequence"],"unique");class LyraRandomContent extends LyraElement{constructor(){super(...arguments),this.animation="none",this.autoplay=!1,this.paused=!1,this.autoplayInterval=3e3,this.items=1,this._mode="unique",this.hasAppliedSelection=!1,this.reduceMotion=!1,this.sequenceCursor=0,this.lastPool=[],this.managedPool=new Set,this.authorState=new WeakMap,this.authorStateObserverPauseDepth=0,this.focusWithin=!1,this.connectionGeneration=0,this.selectionAnnouncementsArmed=!1,this.lastAnnouncementText="",this.hasUpdatedOnce=!1,this.onMotionPreferenceChange=event=>{this.reduceMotion=event.matches,this.restartAutoplay()},this.onForwardedSlotChange=event=>{const slot=event.target;if(this.contains(slot)){if(this.observeAnnouncementContent(),!this.poolsEqual(this.eligible(),this.lastPool)){this.onSlotChange();return}this.announceCurrentSelectionIfChanged()}},this.onSlotChange=()=>{if(!this.isConnected)return;const pool=this.eligible();this.poolsEqual(pool,this.lastPool)||(this.reselect({resetPrevious:!0,announce:this.selectionAnnouncementsArmed}),this.restartAutoplay())},this.onFocusIn=()=>{this.focusWithin=!0,this.stopAutoplay()},this.onFocusOut=()=>{const ownerWindow=this.ownerDocument.defaultView,connectionGeneration=this.connectionGeneration,finishFocusOut=()=>{connectionGeneration!==this.connectionGeneration||!this.isConnected||(this.focusWithin=composedContains(this,deepActiveElement(this.ownerDocument)),this.focusWithin||this.restartAutoplay())};ownerWindow?ownerWindow.queueMicrotask(finishFocusOut):queueMicrotask(finishFocusOut)},this.togglePaused=()=>{this.paused=!this.paused,this.emit("lr-pause-change",Object.freeze({paused:this.paused}))}}static{this.defaultStrings={...super.defaultStrings,randomContentPause:LYRA_DEFAULT_randomContentPause,randomContentResume:LYRA_DEFAULT_randomContentResume}}static{this.immutableEventDetails=Object.freeze(["lr-content-change"])}static{this.identityEventDetailProperties=Object.freeze({"lr-content-change":Object.freeze(["items"])})}static{this.styles=[LyraElement.styles,styles]}get mode(){return this._mode}set mode(next){const normalized=RANDOM_CONTENT_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}connectedCallback(){this.connectionGeneration+=1;const connectionGeneration=this.connectionGeneration;super.connectedCallback(),this.addEventListener("slotchange",this.onForwardedSlotChange),this.selectionAnnouncementsArmed=!1,this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.startAuthorStateObserver(),this.startAnnouncementContentObserver();const ownerWindow=this.ownerDocument.defaultView;this.mediaQuery=ownerWindow?.matchMedia?.("(prefers-reduced-motion: reduce)"),this.reduceMotion=this.mediaQuery?.matches??!1,this.mediaQuery?.addEventListener("change",this.onMotionPreferenceChange),this.hasUpdated&&this.reselect({announce:!1}),this.restartAutoplay(),this.updateComplete.then(()=>{this.isConnected&&connectionGeneration===this.connectionGeneration&&(this.lastAnnouncementText=this.selectionAnnouncement(this.previousSelection??[]),this.selectionAnnouncementsArmed=!0)})}disconnectedCallback(){this.connectionGeneration+=1,this.selectionAnnouncementsArmed=!1,this.announcementSink?.release(),this.announcementSink=void 0,this.stopAutoplay(),this.stopAuthorStateObserver(),this.stopAnnouncementContentObserver(),this.removeEventListener("slotchange",this.onForwardedSlotChange),this.focusWithin=!1,this.restoreManagedPool(),this.mediaQuery?.removeEventListener("change",this.onMotionPreferenceChange),this.mediaQuery=void 0,super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.reselect({announce:!1}),this.restartAutoplay()}updated(changed){super.updated(changed),this.hasUpdatedOnce&&(changed.has("items")&&this.reselect({announce:this.selectionAnnouncementsArmed}),(changed.has("autoplay")||changed.has("autoplayInterval")||changed.has("paused"))&&this.restartAutoplay()),this.hasUpdatedOnce=!0}eligible(){return this.slotEl?.assignedElements({flatten:!0})??[]}clampedCount(poolSize){return finiteInteger(this.items,1,1,poolSize)}poolsEqual(a,b){return a.length!==b.length?!1:a.every((el,index)=>el===b[index])}shuffledPick(pool,count){const arr=pool.slice(),n=Math.min(count,arr.length);for(let i=0;i<n;i+=1){const j=i+Math.floor(Math.random()*(arr.length-i)),swap=arr[i];arr[i]=arr[j],arr[j]=swap}return arr.slice(0,n)}sameAsPrevious(selection){const previous=this.previousSelection;if(!previous||previous.length!==selection.length)return!1;const previousSet=new Set(previous);return selection.every(el=>previousSet.has(el))}selectUnique(pool,count){let picked=this.shuffledPick(pool,count);if(pool.length>count){let attempts=0;for(;attempts<10&&this.sameAsPrevious(picked);)picked=this.shuffledPick(pool,count),attempts+=1}return picked}selectSequence(pool,count){const total=pool.length,start=this.sequenceCursor%total,picked=[];for(let k=0;k<count;k+=1)picked.push(pool[(start+k)%total]);return this.sequenceCursor=(start+count)%total,picked}computeSelectionForMode(pool,count){switch(this.mode){case"sequence":return this.selectSequence(pool,count);case"random":return this.shuffledPick(pool,count);default:return this.selectUnique(pool,count)}}preserveFocusedSubtree(pool,selected){const active=deepActiveElement(this.ownerDocument),focusedItem=pool.find(item=>composedContains(item,active));return!focusedItem||selected.includes(focusedItem)?selected:[...selected.slice(0,-1),focusedItem]}reconcileManagedPool(pool){const nextPool=new Set(pool);for(const item of this.managedPool)nextPool.has(item)||this.restoreAuthorState(item);for(const item of pool)this.authorState.has(item)||this.authorState.set(item,{hiddenAttribute:item.getAttribute("hidden"),ariaHidden:item.getAttribute("aria-hidden")});this.managedPool=nextPool}restoreAuthorState(item){const original=this.authorState.get(item);original&&(original.hiddenAttribute===null?item.removeAttribute("hidden"):item.setAttribute("hidden",original.hiddenAttribute),original.ariaHidden===null?item.removeAttribute("aria-hidden"):item.setAttribute("aria-hidden",original.ariaHidden),this.authorState.delete(item))}restoreManagedPool(){for(const item of this.managedPool)this.restoreAuthorState(item);this.managedPool.clear(),this.lastPool=[],this.previousSelection=void 0,this.lastAnnouncementText=""}applyManagedSelection(pool,selected){const selectedSet=new Set(selected);for(const el of pool){const shown=selectedSet.has(el);el.toggleAttribute("hidden",!shown),el.setAttribute("aria-hidden",shown?"false":"true")}}applySelection(pool,selected){this.withAuthorStateObserverPaused(()=>{this.reconcileManagedPool(pool),this.applyManagedSelection(pool,selected)}),this.hasAppliedSelection=!0,this.baseEl?.removeAttribute("data-unselected")}captureAuthorStateMutations(records){for(const record of records){if(record.type!=="attributes")continue;const item=record.target;if(!this.managedPool.has(item))continue;const state=this.authorState.get(item);state&&(record.attributeName==="hidden"&&(state.hiddenAttribute=item.getAttribute("hidden")),record.attributeName==="aria-hidden"&&(state.ariaHidden=item.getAttribute("aria-hidden")))}}observeAuthorState(){const observer=this.authorStateObserver;if(!observer)return;const options={attributes:!0,attributeFilter:["hidden","aria-hidden"],subtree:!0};observer.observe(this,options);for(const item of this.eligible())this.contains(item)||observer.observe(item,options)}startAuthorStateObserver(){if(this.authorStateObserver)return;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.authorStateObserver=new MutationObserverCtor(records=>{this.captureAuthorStateMutations(records),this.withAuthorStateObserverPaused(()=>{const selected=this.preserveFocusedSubtree(this.lastPool,this.previousSelection??[]);this.applyManagedSelection(this.lastPool,selected),this.previousSelection=selected})}),this.observeAuthorState())}stopAuthorStateObserver(){const observer=this.authorStateObserver;observer&&(this.captureAuthorStateMutations(observer.takeRecords()),observer.disconnect(),this.authorStateObserver=void 0,this.authorStateObserverPauseDepth=0)}withAuthorStateObserverPaused(operation){const observer=this.authorStateObserver,outermost=this.authorStateObserverPauseDepth===0;outermost&&observer&&(this.captureAuthorStateMutations(observer.takeRecords()),observer.disconnect()),this.authorStateObserverPauseDepth+=1;try{return operation()}finally{this.authorStateObserverPauseDepth-=1,outermost&&observer&&this.isConnected&&this.observeAuthorState()}}selectionAnnouncement(selected){const content=selected.map(item=>composedAccessibilityText(item).replace(/\s+/g," ").trim()).filter(Boolean).join(" "),context=this.getAttribute("aria-label")?.trim()??"";return!context||context===content?content:content?`${context}: ${content}`:context}announcementObservationOptions(){return{attributes:!0,attributeFilter:["alt","aria-hidden","aria-label","class","hidden","inert","open","slot","style"],characterData:!0,childList:!0,subtree:!0}}observeAnnouncementContent(){const observer=this.announcementContentObserver;if(!observer)return;observer.disconnect();const options=this.announcementObservationOptions();observer.observe(this,options);for(const slot of this.querySelectorAll("slot"))if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))observer.observe(assigned,options)}startAnnouncementContentObserver(){if(this.announcementContentObserver)return;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.announcementContentObserver=new MutationObserverCtor(()=>{this.observeAnnouncementContent(),this.announceCurrentSelectionIfChanged()}),this.observeAnnouncementContent())}stopAnnouncementContentObserver(){this.announcementContentObserver?.disconnect(),this.announcementContentObserver=void 0}announceCurrentSelectionIfChanged(){const text=this.selectionAnnouncement(this.previousSelection??[]);if(!this.selectionAnnouncementsArmed){this.lastAnnouncementText=text;return}text!==this.lastAnnouncementText&&(this.lastAnnouncementText=text,text&&this.announcementSink?.announce(text))}reselect(options={}){const pool=this.eligible();if(this.lastPool=pool,pool.length===0)return this.withAuthorStateObserverPaused(()=>this.reconcileManagedPool(pool)),this.previousSelection=void 0,this.lastAnnouncementText="",Object.freeze([]);options.resetPrevious&&(this.previousSelection=void 0);const count=this.clampedCount(pool.length),selected=this.preserveFocusedSubtree(pool,this.computeSelectionForMode(pool,count));this.applySelection(pool,selected),this.previousSelection=selected;const announcement=this.selectionAnnouncement(selected);this.lastAnnouncementText=announcement,options.announce!==!1&&this.announcementSink?.announce(announcement);const exposedSelection=Object.freeze([...selected]);return this.emit("lr-content-change",Object.freeze({items:exposedSelection})),exposedSelection}randomize(){return this.reselect()}stopAutoplay(){this.timer!==void 0&&this.timerWindow?.clearInterval(this.timer),this.timer=void 0,this.timerWindow=void 0}restartAutoplay(){if(this.stopAutoplay(),!this.isConnected||!this.autoplay||this.paused||this.focusWithin||this.reduceMotion||this.eligible().length<2)return;const ownerWindow=this.ownerDocument.defaultView;if(!ownerWindow)return;const interval=finiteDuration(this.autoplayInterval,3e3,1e3),connectionGeneration=this.connectionGeneration;this.timerWindow=ownerWindow,this.timer=ownerWindow.setInterval(()=>{if(connectionGeneration!==this.connectionGeneration||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow){this.stopAutoplay();return}this.reselect({announce:!1})},interval)}render(){const hostLabel=this.getAttribute("aria-label"),multiple=finiteInteger(this.items,1,1,Number.MAX_SAFE_INTEGER)>1;return html`
       <div
         part="base"
         ?data-multiple=${multiple}
+        ?data-unselected=${!this.hasAppliedSelection}
         role=${hostLabel===null?nothing:"group"}
         aria-label=${hostLabel===null?nothing:hostLabel}
         @focusin=${this.onFocusIn}
@@ -20,4 +21,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           >
             ${this.paused?playIcon():pauseIcon()}
           </button>`:nothing}
-    `}}__decorate([property({reflect:!0})],LyraRandomContent.prototype,"animation",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraRandomContent.prototype,"autoplay",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraRandomContent.prototype,"paused",void 0),__decorate([property({type:Number,attribute:"autoplay-interval"})],LyraRandomContent.prototype,"autoplayInterval",void 0),__decorate([property({type:Number})],LyraRandomContent.prototype,"items",void 0),__decorate([property({reflect:!0,converter:RANDOM_CONTENT_MODE})],LyraRandomContent.prototype,"mode",null),__decorate([query("slot")],LyraRandomContent.prototype,"slotEl",void 0);export{LyraRandomContent};
+    `}}__decorate([property({reflect:!0})],LyraRandomContent.prototype,"animation",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraRandomContent.prototype,"autoplay",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraRandomContent.prototype,"paused",void 0),__decorate([property({type:Number,attribute:"autoplay-interval"})],LyraRandomContent.prototype,"autoplayInterval",void 0),__decorate([property({type:Number})],LyraRandomContent.prototype,"items",void 0),__decorate([property({reflect:!0,converter:RANDOM_CONTENT_MODE})],LyraRandomContent.prototype,"mode",null),__decorate([query("slot")],LyraRandomContent.prototype,"slotEl",void 0),__decorate([query('[part="base"]')],LyraRandomContent.prototype,"baseEl",void 0);export{LyraRandomContent};

package/dist/components/utility/random-content/random-content.styles.js

@@ -3,13 +3,12 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
   }
-  /* Consumers needing an inline text-fragment swap inside a sentence can override
-     "lr-random-content { display: inline; }" from outside -- not baked in here, since
-     "display: contents" on the host risks a11y-tree inconsistencies across engines and every
-     other component in this family defaults to "display: block". */
   [part='base'] {
     min-inline-size: 0;
   }
+  [part='base'][data-unselected] ::slotted(:not(:first-child)) {
+    display: none;
+  }
   [part='base'][data-multiple] {
     display: flex;
     flex-wrap: wrap;
@@ -44,9 +43,6 @@ import{css}from"lit";const styles=css`
     outline-offset: var(--lr-focus-ring-offset);
   }
   ::slotted(*) {
-    /* Inline candidates must establish a transformable box for directional entrance effects.
-       inline-block preserves their ordinary inline sizing while the base's flex formatting
-       context owns multi-item layout. */
     display: inline-block;
     min-inline-size: 0;
     max-inline-size: 100%;
@@ -60,6 +56,9 @@ import{css}from"lit";const styles=css`
       var(--lr-animation-easing, var(--lr-random-content-animation-easing, ease))
     );
   }
+  ::slotted([hidden]:not([hidden='until-found' i])) {
+    display: none;
+  }
   :host(:where([animation='fade'])) ::slotted(:not([hidden])) {
     animation-name: lr-random-content-fade-in;
   }
@@ -112,9 +111,6 @@ import{css}from"lit";const styles=css`
       transform: translateY(0);
     }
   }
-  /* fade-left/fade-right are physical-direction transforms (matching the upstream naming this
-     component mirrors), not "previous/next" navigational semantics like a carousel chevron, so
-     they are deliberately not flipped under :host(:dir(rtl)). */
   @keyframes lr-random-content-fade-in-left {
     from {
       opacity: 0;
@@ -144,9 +140,6 @@ import{css}from"lit";const styles=css`
       transform: translateX(0);
     }
   }
-  /* The shared reduced-motion rule in tokens.styles.ts (:host *, :host *::before, ...) only
-     reaches the *shadow* tree -- it does not reach ::slotted() content, since slotted elements
-     live in the host's light DOM, not its shadow tree. Guard the entrance animation explicitly. */
   @media (prefers-reduced-motion: reduce) {
     ::slotted(*) {
       animation: none !important;

package/dist/components/utility/tour/tour.class.d.ts

@@ -133,7 +133,7 @@ export interface LyraTourEventMap {
  * @event lr-tour-end - Fired by `end()` (and by `next()` on the last step, with reason
  *   `'completed'`). `detail: LyraTourEndReason`. Conditionally cancelable: every ordinary end can be
  *   vetoed, while `'unmount'` cannot because the element is already being removed -- mirrors
- *   `lr-dialog-close` exactly.
+ *   `lr-dialog`'s own `lr-close` exactly.
  * @event lr-tour-target-missing - The active step's `target` did not resolve to a connected
  *   element. `detail: { index, step }`. Not cancelable -- informational. The tour does not
  *   auto-end; it renders that step's popover unanchored (viewport-centered, no spotlight cutout)
@@ -208,7 +208,9 @@ export declare class LyraTour extends LyraElement<LyraTourEventMap> {
      *  step's own `heading`, matching `lr-dialog`'s `accessibleLabel` pattern. Most consumers
      *  won't need this since each step already has a meaningful name via `heading`; setting it
      *  makes the *same* string name every step's panel. Set as a plain `aria-label` attribute on
-     *  `<lr-tour>` itself, not a public JS property. */
+     *  `<lr-tour>` itself, not a public JS property. An explicitly empty `aria-label=""` suppresses
+     *  the panel's accessible name outright rather than falling back to the heading or step count --
+     *  again as `lr-dialog` does. */
     private accessibleLabel;
     private unanchored;
     private hasSlotContent;