@aceshooting/lyra-ui 9.1.0 → 10.0.1

package/dist/components/layout/widget/widget.styles.js

@@ -1,9 +1,6 @@
 import{css}from"lit";const styles=css`
   :host {
     display: block;
-    /* Fullscreen scrim color -- component-specific so a host can retheme it
-       without a raw literal leaking into the public API (no shared
-       --lr-*-overlay token exists in the design system to resolve through). */
     --_lr-widget-overlay-color: var(--lr-color-overlay);
     --_lr-widget-fullscreen-inset: max(
         var(--lr-space-l),
@@ -95,12 +92,10 @@ import{css}from"lit";const styles=css`
     overflow-x: auto;
     overflow-y: hidden;
   }
-  /* Edge fade on either header row, gated on that row actually overflowing -- its own
-     ScrollOverflowController toggles data-scroll-overflow from a real scrollWidth/clientWidth
-     measurement. Painting it unconditionally is not harmless: at the 2rem-per-edge default a row
-     narrower than its own two fades renders half-transparent and reads as disabled. */
-  [part="actions"][data-scroll-overflow],
-  [part="view-toggles"][data-scroll-overflow] {
+  [part="actions"][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]),
+  [part="view-toggles"][data-scroll-overflow]:where(
+      [data-scroll-start][data-scroll-end]
+    ) {
     -webkit-mask-image: linear-gradient(
       to right,
       transparent,
@@ -116,16 +111,90 @@ import{css}from"lit";const styles=css`
       transparent
     );
   }
+  [part="actions"][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
+    ),
+  [part="view-toggles"][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+  }
+  [part="actions"][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
+    ),
+  [part="view-toggles"][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+  }
+  :host(:dir(rtl))
+    [part="actions"][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
+    ),
+  :host(:dir(rtl))
+    [part="view-toggles"][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+  }
+  :host(:dir(rtl))
+    [part="actions"][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
+    ),
+  :host(:dir(rtl))
+    [part="view-toggles"][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+  }
   [part="view-toggle"] {
     display: inline-flex;
     flex: 0 1 auto;
     align-items: center;
-    /* Both axes, matching collapse-button/fullscreen-button. Cross-axis centering alone left an
-       icon-only toggle visibly off-center: min-inline-size floors the pill at the square
-       icon-button size, so a 13px glyph inside a 40px pill has ~11px of slack that the default
-       justify-content (normal => flex-start) dumps entirely on the trailing side -- 4.5px off
-       true center once the asymmetric inline padding is counted. A labeled toggle is unaffected
-       (its content already fills the pill, which sizes to fit). */
     justify-content: center;
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
@@ -150,12 +219,6 @@ import{css}from"lit";const styles=css`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  /* :where() zeroes the wrapped selector's specificity contribution, leaving only :hover itself,
-     mirroring lr-pagination's/lr-table's low-specificity rule for this exact selector shape --
-     a consumer's own ::part(view-toggle):hover can win without !important. Colors route through
-     scoped --lr-widget-view-toggle-hover-*, mirroring the [aria-pressed='true'] rule below, so a
-     consumer can retint just the hover state without hijacking the shared brand-quiet/text tokens
-     used everywhere else. */
   :where([part="view-toggle"]):hover {
     background: var(
       --lr-widget-view-toggle-hover-bg,
@@ -163,10 +226,6 @@ import{css}from"lit";const styles=css`
     );
     color: var(--lr-widget-view-toggle-hover-color, var(--lr-color-text));
   }
-  /* Whatever fill hover resolved to -- including a consumer's own
-     --lr-widget-view-toggle-hover-bg -- mixed further toward --lr-color-mix-partner, so a retinted
-     hover keeps a pressed step that is deeper than it rather than one pinned to the stock token.
-     Same zeroed specificity as the hover rule above, for the same reason. */
   :where([part="view-toggle"]):active {
     background: color-mix(
       in oklab,
@@ -175,12 +234,6 @@ import{css}from"lit";const styles=css`
     );
     color: var(--lr-widget-view-toggle-hover-color, var(--lr-color-text));
   }
-  /* Inline var() fallbacks rather than :host-declared properties, so a consumer can set them on any
-     ancestor without a :host declaration shadowing that. ::part(view-toggle)[aria-pressed='true'] is
-     invalid CSS (an attribute selector cannot follow ::part), so recoloring the pressed toggle used
-     to require hijacking the shared --lr-color-brand-quiet/--lr-color-brand tokens, repainting
-     everything else that reads them. Unset, each falls back to the token the rule used before, so
-     the rendering is unchanged. */
   [part="view-toggle"][aria-pressed="true"] {
     background: var(
       --lr-widget-view-toggle-active-bg,
@@ -189,6 +242,14 @@ import{css}from"lit";const styles=css`
     color: var(--lr-widget-view-toggle-active-color, var(--lr-color-brand));
     border-color: var(--lr-widget-view-toggle-active-border-color, transparent);
   }
+  [part="view-toggle"][aria-pressed="true"]:active {
+    background: color-mix(
+      in oklab,
+      var(--lr-widget-view-toggle-active-bg, var(--lr-color-brand-quiet)),
+      var(--lr-color-mix-partner) var(--lr-color-mix-active)
+    );
+    color: var(--lr-widget-view-toggle-active-color, var(--lr-color-brand));
+  }
   [part="view-toggle"]:focus-visible {
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
@@ -226,15 +287,9 @@ 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);
   }
-  /* Chevron points at the content: rotated (pointing down) while expanded, resting (pointing right)
-     while collapsed -- same convention as lr-code-block's/lr-json-viewer's own toggles. */
   :host(:not([collapsed])) [part="collapse-button"] {
     transform: rotate(90deg);
   }
-  /* RTL: the resting (collapsed) chevron mirrors to point left -- the conventional mirrored
-     disclosure-triangle direction for RTL. Scoped to [collapsed] specifically (rather than a plain
-     :dir(rtl) rule) so it never competes with the rule above for the expanded state, which needs no
-     mirroring: rotating this left-right-asymmetric glyph 90deg already produces a symmetric chevron. */
   :host([collapsed]:dir(rtl)) [part="collapse-button"] {
     transform: scaleX(-1);
   }
@@ -260,8 +315,6 @@ import{css}from"lit";const styles=css`
       var(--_lr-widget-fullscreen-inset, 0)
     );
     z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 1);
-    /* Top of the scale: fullscreen is a modal layer sitting above [part="backdrop"], and it is the
-       only state in which this widget stops being resting chrome. */
     box-shadow: var(--lr-shadow-xl);
   }
   :host([fullscreen]) [part="body"] {
@@ -282,7 +335,11 @@ import{css}from"lit";const styles=css`
   }
   @media (forced-colors: active) {
     [part="actions"],
-    [part="view-toggles"] {
+    [part="view-toggles"],
+    [part="actions"][data-scroll-overflow],
+    [part="view-toggles"][data-scroll-overflow],
+    :host(:dir(rtl)) [part="actions"][data-scroll-overflow],
+    :host(:dir(rtl)) [part="view-toggles"][data-scroll-overflow] {
       -webkit-mask-image: none;
       mask-image: none;
     }

package/dist/components/media/animated-image/animated-image.class.d.ts

@@ -81,6 +81,9 @@ export interface LyraAnimatedImageEventMap {
  * @since 4.0.0
  */
 export declare class LyraAnimatedImage extends LyraElement<LyraAnimatedImageEventMap> {
+    /** `playing` is the read-only live playback state this component reflects itself; `play` is
+     *  the settable request. Authoring `playing` means nothing, so it is not observed. */
+    protected static readonly knownUnobservedAttributes: readonly string[];
     static styles: import("lit").CSSResultGroup[];
     /** The path to the image to load. Always re-validated against a
      *  safe-scheme allowlist before use -- see the class doc. */

package/dist/components/media/animated-image/animated-image.class.js

@@ -1,4 +1,4 @@
-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,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{playIcon,pauseIcon}from"../../../internal/icons.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./animated-image.styles.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{resolveBoundedCanvasAllocation}from"../../../internal/canvas.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{LYRA_DEFAULT_animatedImageDefaultAlt,LYRA_DEFAULT_pauseWithContext,LYRA_DEFAULT_playWithContext}from"../../../internal/default-strings.generated.js";const MAX_FROZEN_FRAME_DIMENSION=8192,MAX_FROZEN_FRAME_PIXELS=16777216;class LyraAnimatedImage extends LyraElement{constructor(){super(...arguments),this.src="",this.play=!1,this.respectReducedMotion=!0,this.accessibleLabel="",this.hasLoaded=!1,this.hasError=!1,this._playing=!1,this.connectionEventBaselinePending=!0,this.onMotionPreferenceChange=()=>{this.requestUpdate()},this.onImageLoad=event=>{if(!this.isConnected||event.currentTarget!==this.imageEl)return;this.hasError=!1,this.hasLoaded=!0;const img=this.imageEl,canvas=this.canvasEl;if(img&&canvas){const width=img.naturalWidth,height=img.naturalHeight,dpr=this.ownerWindow?.devicePixelRatio||1,allocation=resolveBoundedCanvasAllocation({cssWidth:width,cssHeight:height,desiredScale:dpr,maxDimension:MAX_FROZEN_FRAME_DIMENSION,maxPixels:MAX_FROZEN_FRAME_PIXELS});canvas.width=allocation.pixelWidth,canvas.height=allocation.pixelHeight;const ctx=canvas.getContext("2d");ctx&&(ctx.scale(allocation.scaleX,allocation.scaleY),ctx.drawImage(img,0,0,width,height))}this.emit("lr-load",null)},this.onImageError=event=>{!this.isConnected||event.currentTarget!==this.imageEl||(this.hasLoaded=!1,this.hasError=!0,this.emit("lr-error",null))},this.onToggleClick=()=>{this.play=!this.play},this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,animatedImageDefaultAlt:LYRA_DEFAULT_animatedImageDefaultAlt,pauseWithContext:LYRA_DEFAULT_pauseWithContext,playWithContext:LYRA_DEFAULT_playWithContext}}static{this.styles=[LyraElement.styles,styles]}get ownerWindow(){return this.ownerDocument?.defaultView??null}get playing(){return this._playing}connectedCallback(){super.connectedCallback(),this.connectionEventBaselinePending=!0,this.mediaQuery=this.ownerWindow?.matchMedia?.("(prefers-reduced-motion: reduce)"),this.mediaQuery?.addEventListener("change",this.onMotionPreferenceChange),this.requestUpdate()}disconnectedCallback(){this.connectionEventBaselinePending=!0,this.mediaQuery?.removeEventListener("change",this.onMotionPreferenceChange),this.mediaQuery=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed);const mayEmitConnectionTransition=this.isConnected&&!this.connectionEventBaselinePending;changed.has("src")&&(this.hasLoaded=!1,this.hasError=!1,this.src.trim()!==""&&safeMediaSrc(this.src)===null&&(this.hasError=!0,mayEmitConnectionTransition&&this.emit("lr-error",null)));const nextPlaying=this.play&&!(this.respectReducedMotion&&prefersReducedMotion(this.ownerWindow));nextPlaying!==this._playing&&(this._playing=nextPlaying,this.toggleAttribute("playing",nextPlaying),mayEmitConnectionTransition&&this.emit(nextPlaying?"lr-play":"lr-pause",null)),this.toggleAttribute("data-loaded",this.hasLoaded)}updated(changed){super.updated(changed),this.isConnected&&(this.connectionEventBaselinePending=!1)}get effectiveAlt(){return this.alt??""}get toggleLabel(){const authoredLabel=hostAriaLabel(this);if(authoredLabel!==null)return authoredLabel;if(this.accessibleLabel)return this.accessibleLabel;const name=this.effectiveAlt||this.localize("animatedImageDefaultAlt");return this.playing?this.localize("pauseWithContext",void 0,{name}):this.localize("playWithContext",void 0,{name})}focus(options){this.playButtonEl?.focus(options)}blur(){this.playButtonEl?.blur()}click(){this.playButtonEl?.click()}render(){const src=safeMediaSrc(this.src),alt=this.effectiveAlt,frozen=this.hasLoaded&&!this.playing,showControls=this.hasLoaded&&!this.hasError,disabled=this.respectReducedMotion&&prefersReducedMotion(this.ownerWindow);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,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{playIcon,pauseIcon}from"../../../internal/icons.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./animated-image.styles.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{resolveBoundedCanvasAllocation}from"../../../internal/canvas.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{LYRA_DEFAULT_animatedImageDefaultAlt,LYRA_DEFAULT_pauseWithContext,LYRA_DEFAULT_playWithContext}from"../../../internal/default-strings.generated.js";const MAX_FROZEN_FRAME_DIMENSION=8192,MAX_FROZEN_FRAME_PIXELS=16777216;class LyraAnimatedImage extends LyraElement{constructor(){super(...arguments),this.src="",this.play=!1,this.respectReducedMotion=!0,this.accessibleLabel="",this.hasLoaded=!1,this.hasError=!1,this._playing=!1,this.connectionEventBaselinePending=!0,this.onMotionPreferenceChange=()=>{this.requestUpdate()},this.onImageLoad=event=>{if(!this.isConnected||event.currentTarget!==this.imageEl)return;this.hasError=!1,this.hasLoaded=!0;const img=this.imageEl,canvas=this.canvasEl;if(img&&canvas){const width=img.naturalWidth,height=img.naturalHeight,dpr=this.ownerWindow?.devicePixelRatio||1,allocation=resolveBoundedCanvasAllocation({cssWidth:width,cssHeight:height,desiredScale:dpr,maxDimension:MAX_FROZEN_FRAME_DIMENSION,maxPixels:MAX_FROZEN_FRAME_PIXELS});canvas.width=allocation.pixelWidth,canvas.height=allocation.pixelHeight;const ctx=canvas.getContext("2d");ctx&&(ctx.scale(allocation.scaleX,allocation.scaleY),ctx.drawImage(img,0,0,width,height))}this.emit("lr-load",null)},this.onImageError=event=>{!this.isConnected||event.currentTarget!==this.imageEl||(this.hasLoaded=!1,this.hasError=!0,this.emit("lr-error",null))},this.onToggleClick=()=>{this.play=!this.play},this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,animatedImageDefaultAlt:LYRA_DEFAULT_animatedImageDefaultAlt,pauseWithContext:LYRA_DEFAULT_pauseWithContext,playWithContext:LYRA_DEFAULT_playWithContext}}static{this.knownUnobservedAttributes=["playing"]}static{this.styles=[LyraElement.styles,styles]}get ownerWindow(){return this.ownerDocument?.defaultView??null}get playing(){return this._playing}connectedCallback(){super.connectedCallback(),this.connectionEventBaselinePending=!0,this.mediaQuery=this.ownerWindow?.matchMedia?.("(prefers-reduced-motion: reduce)"),this.mediaQuery?.addEventListener("change",this.onMotionPreferenceChange),this.requestUpdate()}disconnectedCallback(){this.connectionEventBaselinePending=!0,this.mediaQuery?.removeEventListener("change",this.onMotionPreferenceChange),this.mediaQuery=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed);const mayEmitConnectionTransition=this.isConnected&&!this.connectionEventBaselinePending;changed.has("src")&&(this.hasLoaded=!1,this.hasError=!1,this.src.trim()!==""&&safeMediaSrc(this.src)===null&&(this.hasError=!0,mayEmitConnectionTransition&&this.emit("lr-error",null)));const nextPlaying=this.play&&!(this.respectReducedMotion&&prefersReducedMotion(this.ownerWindow));nextPlaying!==this._playing&&(this._playing=nextPlaying,this.toggleAttribute("playing",nextPlaying),mayEmitConnectionTransition&&this.emit(nextPlaying?"lr-play":"lr-pause",null)),this.toggleAttribute("data-loaded",this.hasLoaded)}updated(changed){super.updated(changed),this.isConnected&&(this.connectionEventBaselinePending=!1)}get effectiveAlt(){return this.alt??""}get toggleLabel(){const authoredLabel=hostAriaLabel(this);if(authoredLabel!==null)return authoredLabel;if(this.accessibleLabel)return this.accessibleLabel;const name=this.effectiveAlt||this.localize("animatedImageDefaultAlt");return this.playing?this.localize("pauseWithContext",void 0,{name}):this.localize("playWithContext",void 0,{name})}focus(options){this.playButtonEl?.focus(options)}blur(){this.playButtonEl?.blur()}click(){this.playButtonEl?.click()}render(){const src=safeMediaSrc(this.src),alt=this.effectiveAlt,frozen=this.hasLoaded&&!this.playing,showControls=this.hasLoaded&&!this.hasError,disabled=this.respectReducedMotion&&prefersReducedMotion(this.ownerWindow);return html`
       <div part="base">
         <img
           part="image"

package/dist/components/media/animated-image/animated-image.styles.js

@@ -2,11 +2,6 @@ import{css}from"lit";const styles=css`
   :host {
     display: inline-block;
     max-inline-size: 100%;
-    /* Mirrors wa-animated-image/sl-animated-image's --control-box-size and
-       --icon-size (component-prefixed per this library's own convention) --
-       both chain through the existing icon-button-size token rather than a
-       new bespoke literal, so the toggle reads at the same scale as
-       lr-sequence-playback's own play/pause button. */
     --_lr-animated-image-control-box-size: var(
       --control-box-size,
       var(--lr-icon-button-size)
@@ -15,9 +10,6 @@ import{css}from"lit";const styles=css`
       --icon-size,
       calc(var(--lr-icon-button-size) * 0.35)
     );
-    /* Same purpose/default as --lr-media-card-max-height -- caps the
-       rendered media's block-size so one oversized animated image can't blow
-       out a layout. */
     --_lr-animated-image-max-height: var(--lr-size-20rem);
   }
 
@@ -27,8 +19,6 @@ import{css}from"lit";const styles=css`
     max-inline-size: 100%;
   }
 
-  /* image/canvas overlap in the same grid cell so the crossfade below is a
-     pure opacity swap with no layout shift. */
   [part="image"],
   [part="canvas"] {
     grid-area: 1 / 1;
@@ -50,13 +40,6 @@ import{css}from"lit";const styles=css`
     pointer-events: none;
     transition: opacity var(--lr-transition-fast);
   }
-  /* [data-loaded] is a private, JS-driven hook (not part of the public
-     contract -- same pattern as this library's existing [data-invalid]
-     hooks) that keeps the live <img> visible while still loading or after a
-     decode failure, so the browser's own loading/broken-image affordance is
-     never hidden behind an undrawn canvas. Only once a frame has actually
-     been captured does the reflected [playing] host attribute get to decide
-     which of the two is shown. */
   :host([data-loaded]:not([playing])) [part="image"] {
     opacity: 0;
     pointer-events: none;
@@ -109,16 +92,9 @@ import{css}from"lit";const styles=css`
     -webkit-tap-highlight-color: transparent;
     transition: background-color var(--lr-transition-fast);
   }
-  /* Keep internal state qualifiers low-specificity so sibling rules in this sheet remain easy to
-     compose. Consumer ::part() authority follows the shadow cascade, independently of this
-     selector's specificity. */
   :where([part="play-button"]):hover:where(:not(:disabled)) {
     background: color-mix(in srgb, var(--lr-color-surface) 100%, transparent);
   }
-  /* Pressed goes one step past hover: hover only finishes opacifying the translucent scrim, so on
-     its own it cannot register a click at all once the button is already fully opaque. Mixing the
-     opaque surface toward --lr-color-mix-partner moves in whichever direction the theme's own
-     surface needs. */
   :where([part="play-button"]):active:where(:not(:disabled)) {
     background: color-mix(
       in oklab,
@@ -153,10 +129,6 @@ import{css}from"lit";const styles=css`
     line-height: var(--lr-line-height-none);
     pointer-events: none;
   }
-  /* Both play-icon/pause-icon slots render persistently (see the class doc)
-     and are toggled via the native hidden attribute; a plain .icon display
-     rule at equal specificity is not guaranteed to lose to the UA [hidden]
-     rule, so the override is pinned explicitly here. */
   .icon[hidden] {
     display: none;
   }

package/dist/components/media/attachment-chip/attachment-chip.class.d.ts

@@ -55,7 +55,7 @@ export interface LyraAttachmentChipEventMap {
  * @customElement lr-attachment-chip
  * @event lr-remove - The user activated the remove (×) button. `detail: { attachmentId }`. Only rendered while `removable`.
  * @event lr-retry - The user activated the retry button. `detail: { attachmentId }`. Only rendered while `status="error"`.
- * @event lr-preview-request - Cancelable request to preview the attachment. `detail: { attachmentId, name, mimeType, src }`. The chip never registers or owns a viewer/overlay; consumers compose the desired preview surface.
+ * @event lr-preview-request - Notification that the preview action was activated. `detail: { attachmentId, name, mimeType, src }`. Not cancelable: the chip never registers or owns a viewer/overlay, so there is nothing local to gate behind `.preventDefault()`; consumers compose the desired preview surface entirely on their own.
  * @csspart base - The chip's root container.
  * @csspart thumbnail - The leading image thumbnail / generic file glyph.
  * @csspart meta - Wrapper around the filename and the formatted file size.

package/dist/components/media/attachment-chip/attachment-chip.class.js

@@ -1,4 +1,4 @@
-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,svg}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{closeIcon,expandIcon,fileIcon}from"../../../internal/icons.js";import{finiteRange}from"../../../internal/numbers.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./attachment-chip.styles.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{FILE_SIZE_UNIT_KEYS,formatFileSize}from"./file-size.js";import{LYRA_DEFAULT_attachmentPreviewFile,LYRA_DEFAULT_attachmentPreviewName,LYRA_DEFAULT_attachmentRetryWithContext,LYRA_DEFAULT_attachmentUntitledFile,LYRA_DEFAULT_attachmentUploadFailed,LYRA_DEFAULT_attachmentUploadingIndeterminate,LYRA_DEFAULT_attachmentUploadingProgress,LYRA_DEFAULT_attachmentUploadingWithContext,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_fileSizeUnitB,LYRA_DEFAULT_fileSizeUnitGb,LYRA_DEFAULT_fileSizeUnitKb,LYRA_DEFAULT_fileSizeUnitMb,LYRA_DEFAULT_fileSizeUnitTb,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_progress,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";import{FILE_SIZE_UNIT_KEYS as FILE_SIZE_UNIT_KEYS2,formatFileSize as formatFileSize2}from"./file-size.js";const ICON_VIEW_BOX="0 0 24 24",ICON_STROKE_WIDTH="1.75";function retryIcon(){return svg`
+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,svg}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{closeIcon,expandIcon,fileIcon}from"../../../internal/icons.js";import{finiteRange}from"../../../internal/numbers.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./attachment-chip.styles.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{FILE_SIZE_UNIT_KEYS,formatFileSize}from"./file-size.js";import{LYRA_DEFAULT_attachmentPreviewFile,LYRA_DEFAULT_attachmentPreviewName,LYRA_DEFAULT_attachmentRetryWithContext,LYRA_DEFAULT_attachmentUntitledFile,LYRA_DEFAULT_attachmentUploadFailed,LYRA_DEFAULT_attachmentUploadingIndeterminate,LYRA_DEFAULT_attachmentUploadingProgress,LYRA_DEFAULT_attachmentUploadingWithContext,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_fileSizeUnitB,LYRA_DEFAULT_fileSizeUnitGb,LYRA_DEFAULT_fileSizeUnitKb,LYRA_DEFAULT_fileSizeUnitMb,LYRA_DEFAULT_fileSizeUnitTb,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";import{FILE_SIZE_UNIT_KEYS as FILE_SIZE_UNIT_KEYS2,formatFileSize as formatFileSize2}from"./file-size.js";const ICON_VIEW_BOX="0 0 24 24",ICON_STROKE_WIDTH="1.75";function retryIcon(){return svg`
     <svg
       width="1em"
       height="1em"
@@ -11,7 +11,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       aria-hidden="true"
       focusable="false"
     ><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
-  `}function statusText(status,uploadingText,uploadFailedLabel){return status==="error"?uploadFailedLabel:status==="uploading"?uploadingText:""}class LyraAttachmentChip extends LyraElement{constructor(){super(...arguments),this.name="",this.attachmentId="",this.mimeType="",this.thumbnailSrc="",this.previewSrc="",this.previewable=!0,this.status="pending",this.progress=0,this.removable=!0,this.compact=!1,this.thumbnailOnly=!1,this.fallbackId=nextId("attachment-chip"),this.onRemoveClick=()=>{this.emit("lr-remove",{attachmentId:this.resolvedId})},this.onRetryClick=()=>{this.emit("lr-retry",{attachmentId:this.resolvedId})},this.onPreviewClick=()=>{this.effectivePreviewSrc&&this.emit("lr-preview-request",{attachmentId:this.resolvedId,name:this.effectiveName,mimeType:this.effectiveMimeType,src:this.effectivePreviewSrc},{cancelable:!0})}}static{this.defaultStrings={...super.defaultStrings,attachmentPreviewFile:LYRA_DEFAULT_attachmentPreviewFile,attachmentPreviewName:LYRA_DEFAULT_attachmentPreviewName,attachmentRetryWithContext:LYRA_DEFAULT_attachmentRetryWithContext,attachmentUntitledFile:LYRA_DEFAULT_attachmentUntitledFile,attachmentUploadFailed:LYRA_DEFAULT_attachmentUploadFailed,attachmentUploadingIndeterminate:LYRA_DEFAULT_attachmentUploadingIndeterminate,attachmentUploadingProgress:LYRA_DEFAULT_attachmentUploadingProgress,attachmentUploadingWithContext:LYRA_DEFAULT_attachmentUploadingWithContext,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,fileSizeUnitB:LYRA_DEFAULT_fileSizeUnitB,fileSizeUnitGb:LYRA_DEFAULT_fileSizeUnitGb,fileSizeUnitKb:LYRA_DEFAULT_fileSizeUnitKb,fileSizeUnitMb:LYRA_DEFAULT_fileSizeUnitMb,fileSizeUnitTb:LYRA_DEFAULT_fileSizeUnitTb,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,progress:LYRA_DEFAULT_progress,removeWithContext:LYRA_DEFAULT_removeWithContext,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}get bytes(){return this._bytes}set bytes(value){const old=this._bytes;this._bytes=typeof value=="number"&&Number.isFinite(value)&&value>=0?finiteRange(value,0,0):void 0,this.requestUpdate("bytes",old)}get effectiveName(){return this.file?this.file.name:this.name}get effectiveSize(){return this.file?Number.isFinite(this.file.size)&&this.file.size>=0?finiteRange(this.file.size,0,0):void 0:this.bytes}get effectiveMimeType(){return this.file?this.file.type:this.mimeType}get effectivePreviewSrc(){return this.file?this.objectUrl??"":this.previewSrc}get resolvedId(){return this.attachmentId.trim().length>0?this.attachmentId:this.file?`${this.file.name}:${this.file.size}:${this.file.lastModified}`:this.fallbackId}get hasNumericProgress(){return this.status==="uploading"&&this.clampedProgress>0}get clampedProgress(){return finiteRange(this.progress,0,0,100)}get effectiveStatus(){return this.status==="uploading"||this.status==="error"||this.status==="success"?this.status:"pending"}ensureObjectUrl(file){return this.objectUrlFile===file&&this.objectUrl?this.objectUrl:(this.revokeObjectUrl(),this.objectUrl=URL.createObjectURL(file),this.objectUrlFile=file,this.objectUrl)}revokeObjectUrl(){this.objectUrl&&URL.revokeObjectURL(this.objectUrl),this.objectUrl=void 0,this.objectUrlFile=void 0}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.hasUpdated&&this.requestUpdate()}adoptedCallback(){super.adoptedCallback(),this.releaseAnnouncementSink(),this.syncAnnouncementSink()}syncAnnouncementSink(){this.isConnected&&this.sink?.element.ownerDocument!==this.ownerDocument&&(this.releaseAnnouncementSink(),this.sink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseAnnouncementSink(){this.sink?.release(),this.sink=void 0}willUpdate(changed){super.willUpdate(changed),changed.has("status")&&this.status!==this.effectiveStatus&&(this.status=this.effectiveStatus),this.hasUpdated&&changed.has("status")&&this.status==="error"&&this.sink?.announce(this.localizedUploadFailedLabel),this.isConnected&&this.file&&(this.file.type.startsWith("image/")||this.previewable)?this.ensureObjectUrl(this.file):this.objectUrlFile&&this.revokeObjectUrl()}disconnectedCallback(){super.disconnectedCallback(),this.revokeObjectUrl(),this.releaseAnnouncementSink()}get localizedUploadFailedLabel(){return this.uploadFailedLabel??this.localize("attachmentUploadFailed")}renderThumbnail(){if(this.file){const fileImageSrc=this.objectUrl?safeMediaSrc(this.objectUrl):null;return this.effectiveMimeType.startsWith("image/")?fileImageSrc?html`<img src=${fileImageSrc} alt="" />`:html`${fileIcon()}`:html`${fileIcon()}`}const thumbnailSrc=safeMediaSrc(this.thumbnailSrc);return thumbnailSrc?html`<img src=${thumbnailSrc} alt="" />`:html`${fileIcon()}`}render(){const name=this.effectiveName,untitledLabel=this.untitledLabel??this.localize("attachmentUntitledFile"),displayName=name||untitledLabel,sizeText=this.effectiveSize!==void 0?formatFileSize(this.effectiveSize,unit=>this.localize(FILE_SIZE_UNIT_KEYS[unit]),(value,fractionDigits)=>getNumberFormat(this.effectiveLocale,{minimumFractionDigits:fractionDigits,maximumFractionDigits:fractionDigits}).format(value)):"",uploadFailedLabel=this.localizedUploadFailedLabel,progressPercent=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0}).format(Math.round(this.clampedProgress)),uploadingText=this.uploadingLabel!==void 0?this.uploadingLabel:this.hasNumericProgress?this.localize("attachmentUploadingProgress",void 0,{percent:progressPercent}):this.localize("attachmentUploadingIndeterminate"),uploadingWithContext=this.uploadingLabel??this.localize("attachmentUploadingWithContext",void 0,{label:displayName}),retryWithContext=this.retryLabel??this.localize("attachmentRetryWithContext",void 0,{label:displayName}),removeWithContext=this.removeLabel??this.localize("removeWithContext",void 0,{label:displayName}),status=this.effectiveStatus,text=statusText(status,uploadingText,uploadFailedLabel),uploading=status==="uploading";return html`
+  `}function statusText(status,uploadingText,uploadFailedLabel){return status==="error"?uploadFailedLabel:status==="uploading"?uploadingText:""}class LyraAttachmentChip extends LyraElement{constructor(){super(...arguments),this.name="",this.attachmentId="",this.mimeType="",this.thumbnailSrc="",this.previewSrc="",this.previewable=!0,this.status="pending",this.progress=0,this.removable=!0,this.compact=!1,this.thumbnailOnly=!1,this.fallbackId=nextId("attachment-chip"),this.onRemoveClick=()=>{this.emit("lr-remove",{attachmentId:this.resolvedId})},this.onRetryClick=()=>{this.emit("lr-retry",{attachmentId:this.resolvedId})},this.onPreviewClick=()=>{this.effectivePreviewSrc&&this.emit("lr-preview-request",{attachmentId:this.resolvedId,name:this.effectiveName,mimeType:this.effectiveMimeType,src:this.effectivePreviewSrc})}}static{this.defaultStrings={...super.defaultStrings,attachmentPreviewFile:LYRA_DEFAULT_attachmentPreviewFile,attachmentPreviewName:LYRA_DEFAULT_attachmentPreviewName,attachmentRetryWithContext:LYRA_DEFAULT_attachmentRetryWithContext,attachmentUntitledFile:LYRA_DEFAULT_attachmentUntitledFile,attachmentUploadFailed:LYRA_DEFAULT_attachmentUploadFailed,attachmentUploadingIndeterminate:LYRA_DEFAULT_attachmentUploadingIndeterminate,attachmentUploadingProgress:LYRA_DEFAULT_attachmentUploadingProgress,attachmentUploadingWithContext:LYRA_DEFAULT_attachmentUploadingWithContext,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,fileSizeUnitB:LYRA_DEFAULT_fileSizeUnitB,fileSizeUnitGb:LYRA_DEFAULT_fileSizeUnitGb,fileSizeUnitKb:LYRA_DEFAULT_fileSizeUnitKb,fileSizeUnitMb:LYRA_DEFAULT_fileSizeUnitMb,fileSizeUnitTb:LYRA_DEFAULT_fileSizeUnitTb,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,removeWithContext:LYRA_DEFAULT_removeWithContext,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}get bytes(){return this._bytes}set bytes(value){const old=this._bytes;this._bytes=typeof value=="number"&&Number.isFinite(value)&&value>=0?finiteRange(value,0,0):void 0,this.requestUpdate("bytes",old)}get effectiveName(){return this.file?this.file.name:this.name}get effectiveSize(){return this.file?Number.isFinite(this.file.size)&&this.file.size>=0?finiteRange(this.file.size,0,0):void 0:this.bytes}get effectiveMimeType(){return this.file?this.file.type:this.mimeType}get effectivePreviewSrc(){return this.file?this.objectUrl??"":this.previewSrc}get resolvedId(){return this.attachmentId.trim().length>0?this.attachmentId:this.file?`${this.file.name}:${this.file.size}:${this.file.lastModified}`:this.fallbackId}get hasNumericProgress(){return this.status==="uploading"&&this.clampedProgress>0}get clampedProgress(){return finiteRange(this.progress,0,0,100)}get effectiveStatus(){return this.status==="uploading"||this.status==="error"||this.status==="success"?this.status:"pending"}ensureObjectUrl(file){return this.objectUrlFile===file&&this.objectUrl?this.objectUrl:(this.revokeObjectUrl(),this.objectUrl=URL.createObjectURL(file),this.objectUrlFile=file,this.objectUrl)}revokeObjectUrl(){this.objectUrl&&URL.revokeObjectURL(this.objectUrl),this.objectUrl=void 0,this.objectUrlFile=void 0}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.hasUpdated&&this.requestUpdate()}adoptedCallback(){super.adoptedCallback(),this.releaseAnnouncementSink(),this.syncAnnouncementSink()}syncAnnouncementSink(){this.isConnected&&this.sink?.element.ownerDocument!==this.ownerDocument&&(this.releaseAnnouncementSink(),this.sink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseAnnouncementSink(){this.sink?.release(),this.sink=void 0}willUpdate(changed){super.willUpdate(changed),changed.has("status")&&this.status!==this.effectiveStatus&&(this.status=this.effectiveStatus),this.hasUpdated&&changed.has("status")&&this.status==="error"&&this.sink?.announce(this.localizedUploadFailedLabel),this.isConnected&&this.file&&(this.file.type.startsWith("image/")||this.previewable)?this.ensureObjectUrl(this.file):this.objectUrlFile&&this.revokeObjectUrl()}disconnectedCallback(){super.disconnectedCallback(),this.revokeObjectUrl(),this.releaseAnnouncementSink()}get localizedUploadFailedLabel(){return this.uploadFailedLabel??this.localize("attachmentUploadFailed")}renderThumbnail(){if(this.file){const fileImageSrc=this.objectUrl?safeMediaSrc(this.objectUrl):null;return this.effectiveMimeType.startsWith("image/")?fileImageSrc?html`<img src=${fileImageSrc} alt="" />`:html`${fileIcon()}`:html`${fileIcon()}`}const thumbnailSrc=safeMediaSrc(this.thumbnailSrc);return thumbnailSrc?html`<img src=${thumbnailSrc} alt="" />`:html`${fileIcon()}`}render(){const name=this.effectiveName,untitledLabel=this.untitledLabel??this.localize("attachmentUntitledFile"),displayName=name||untitledLabel,sizeText=this.effectiveSize!==void 0?formatFileSize(this.effectiveSize,unit=>this.localize(FILE_SIZE_UNIT_KEYS[unit]),(value,fractionDigits)=>getNumberFormat(this.effectiveLocale,{minimumFractionDigits:fractionDigits,maximumFractionDigits:fractionDigits}).format(value)):"",uploadFailedLabel=this.localizedUploadFailedLabel,progressPercent=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0}).format(Math.round(this.clampedProgress)),uploadingText=this.uploadingLabel!==void 0?this.uploadingLabel:this.hasNumericProgress?this.localize("attachmentUploadingProgress",void 0,{percent:progressPercent}):this.localize("attachmentUploadingIndeterminate"),uploadingWithContext=this.uploadingLabel??this.localize("attachmentUploadingWithContext",void 0,{label:displayName}),retryWithContext=this.retryLabel??this.localize("attachmentRetryWithContext",void 0,{label:displayName}),removeWithContext=this.removeLabel??this.localize("removeWithContext",void 0,{label:displayName}),status=this.effectiveStatus,text=statusText(status,uploadingText,uploadFailedLabel),uploading=status==="uploading";return html`
       <div part="base">
         <span part="thumbnail" aria-hidden="true"
           >${this.renderThumbnail()}</span

package/dist/components/media/attachment-chip/attachment-chip.styles.js

@@ -2,20 +2,9 @@ import{css}from"lit";const styles=css`
   :host {
     display: inline-flex;
     max-inline-size: 100%;
-    /* Per-status accent -- one custom property swapped by the :host([status])
-       rules below rather than repeating background/border per part per
-       status. Mirrors lr-tool-call-chip's identical
-       --lr-tool-call-chip-accent/-bg/-border trio, so a chip's tone
-       vocabulary reads the same everywhere in the library. Defaults to the
-       'pending' tone so an unset/unknown status still reads as neutral
-       instead of unstyled. */
     --_lr-attachment-chip-accent: var(--lr-color-text-quiet);
     --_lr-attachment-chip-bg: var(--lr-color-surface);
     --_lr-attachment-chip-border: var(--lr-color-border);
-    /* Compact-mode thumbnail size -- a dedicated token rather than reusing
-       --lr-icon-button-size (the one token in this library with no
-       --lr-theme-* fallback chain), so a consumer can retheme just the compact thumbnail
-       independent of every other icon-button-sized control. */
     --_lr-attachment-chip-compact-thumbnail-size: var(--lr-size-1-75rem);
     --_lr-attachment-chip-compact-font-size: var(--lr-font-size-xs);
     --_lr-attachment-chip-compact-gap: var(--lr-size-0-25rem);
@@ -33,8 +22,6 @@ import{css}from"lit";const styles=css`
     inline-size: var(--lr-attachment-chip-compact-thumbnail-size, var(--_lr-attachment-chip-compact-thumbnail-size));
     block-size: var(--lr-attachment-chip-compact-thumbnail-size, var(--_lr-attachment-chip-compact-thumbnail-size));
   }
-  /* The action buttons remain at the shared hit-area floor in compact mode, even though the
-     thumbnail itself is smaller. */
   :host([compact]) [part='retry-button'],
   :host([compact]) [part='preview-button'],
   :host([compact]) [part='remove-button'] {
@@ -55,8 +42,6 @@ import{css}from"lit";const styles=css`
     --_lr-attachment-chip-bg: var(--lr-color-danger-quiet);
     --_lr-attachment-chip-border: transparent;
   }
-  /* Optional neutral-positive tint for a finished upload -- subtler than
-     'uploading'/'error' since there's nothing left for the user to act on. */
   :host([status='success']) {
     --_lr-attachment-chip-accent: var(--lr-color-success);
     --_lr-attachment-chip-bg: var(--lr-color-success-quiet);
@@ -86,8 +71,6 @@ import{css}from"lit";const styles=css`
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    /* Reuses the shared icon-button box size as a ready-made "small square
-       glyph/image slot" token rather than inventing a new one-off dimension. */
     inline-size: var(--lr-icon-button-size);
     block-size: var(--lr-icon-button-size);
     overflow: hidden;
@@ -120,12 +103,6 @@ import{css}from"lit";const styles=css`
     color: var(--lr-color-text);
   }
   [part='size'] {
-    /* Full-strength text, not --lr-color-text-quiet -- this sits on top of
-       the per-status *-quiet tint backgrounds above (e.g. danger-quiet), and
-       text-quiet's gray fails WCAG AA contrast against several of those
-       tints even though it comfortably passes against the plain surface
-       background used by the resting state. Same fix, same rationale, as
-       lr-tool-call-chip's identical [part='duration']/[part='category']. */
     color: var(--lr-color-text);
     font-variant-numeric: tabular-nums;
   }
@@ -167,11 +144,6 @@ import{css}from"lit";const styles=css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    /* Full --lr-icon-button-size floor (not the min()-capped --lr-size-1-75rem
-       compromise some inline/dense controls use elsewhere) -- an attachment chip is
-       wide enough for its action buttons to meet the same tappable-size floor as a
-       standalone icon button, matching [part='thumbnail'] above, which already sizes
-       to this same token. */
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
     padding: 0;
@@ -196,9 +168,6 @@ import{css}from"lit";const styles=css`
   :where([part='remove-button']):hover {
     background: color-mix(in srgb, var(--lr-color-text) 8%, transparent);
   }
-  /* Pressed is the same tint carried further -- --lr-color-mix-active (22%) against the hover
-     rule's 8%, mixed from the buttons' own transparent fill, so the step is plainly visible while a
-     theme can still flatten or exaggerate every pressed state in the library from one knob. */
   :where([part='retry-button']):active,
   :where([part='preview-button']):active,
   :where([part='remove-button']):active {

package/dist/components/media/attachment-trigger/attachment-trigger.class.d.ts

@@ -18,7 +18,7 @@ export interface LyraAttachmentTriggerEventMap {
 }
 /**
  * `<lr-attachment-trigger>` — a compact attach affordance designed for a
- * chat composer's leading slot (see `<lr-chat-composer>`'s own `leading`
+ * chat composer's start slot (see `<lr-chat-composer>`'s own `start`
  * slot, which this drops straight into, though this component has no code
  * dependency on it). Its shape adapts to how many attachment `capabilities`
  * are configured:

package/dist/components/media/attachment-trigger/attachment-trigger.class.js

@@ -1,4 +1,4 @@
-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,svg}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon}from"../../../internal/icons.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./attachment-trigger.styles.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_attachmentAdd,LYRA_DEFAULT_attachmentMenuAudio,LYRA_DEFAULT_attachmentMenuCamera,LYRA_DEFAULT_attachmentMenuFiles,LYRA_DEFAULT_attachmentMenuImage,LYRA_DEFAULT_attachmentTriggerAudio,LYRA_DEFAULT_attachmentTriggerCamera,LYRA_DEFAULT_attachmentTriggerFiles,LYRA_DEFAULT_attachmentTriggerImage,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_progress,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const ICON_VIEW_BOX="0 0 24 24",ICON_STROKE_WIDTH="1.75";function icon(paths){return svg`
+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,svg}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./attachment-trigger.styles.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_attachmentAdd,LYRA_DEFAULT_attachmentMenuAudio,LYRA_DEFAULT_attachmentMenuCamera,LYRA_DEFAULT_attachmentMenuFiles,LYRA_DEFAULT_attachmentMenuImage,LYRA_DEFAULT_attachmentTriggerAudio,LYRA_DEFAULT_attachmentTriggerCamera,LYRA_DEFAULT_attachmentTriggerFiles,LYRA_DEFAULT_attachmentTriggerImage,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const ICON_VIEW_BOX="0 0 24 24",ICON_STROKE_WIDTH="1.75";function icon(paths){return svg`
     <svg
       width="1em"
       height="1em"
@@ -25,7 +25,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
     <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
     <line x1="12" y1="19" x2="12" y2="23"></line>
     <line x1="8" y1="23" x2="16" y2="23"></line>
-  `)}const CAPABILITY_META={files:{icon:paperclipIcon,triggerKey:"attachmentTriggerFiles",menuKey:"attachmentMenuFiles"},image:{icon:imageIcon,triggerKey:"attachmentTriggerImage",menuKey:"attachmentMenuImage"},camera:{icon:cameraIcon,triggerKey:"attachmentTriggerCamera",menuKey:"attachmentMenuCamera"},audio:{icon:audioIcon,triggerKey:"attachmentTriggerAudio",menuKey:"attachmentMenuAudio"}},OWNED_CAPABILITY_SNAPSHOTS=new WeakSet;function ownCapabilitySnapshot(values){const snapshot=Object.freeze(values);return OWNED_CAPABILITY_SNAPSHOTS.add(snapshot),snapshot}const DEFAULT_CAPABILITIES=ownCapabilitySnapshot(["files"]);function normalizeCapabilities(value){try{if(!Array.isArray(value))return DEFAULT_CAPABILITIES;if(OWNED_CAPABILITY_SNAPSHOTS.has(value))return value;const normalized=[],length=Math.min(value.length,4);for(let index=0;index<length;index++){const candidate=value[index];typeof candidate=="string"&&Object.prototype.hasOwnProperty.call(CAPABILITY_META,candidate)&&!normalized.includes(candidate)&&normalized.push(candidate)}return ownCapabilitySnapshot(normalized)}catch{return DEFAULT_CAPABILITIES}}function isCanonicalCapabilitySnapshot(source){try{return typeof source=="object"&&source!==null&&OWNED_CAPABILITY_SNAPSHOTS.has(source)}catch{return!1}}class LyraAttachmentTrigger extends LyraElement{constructor(){super(...arguments),this.capabilities=DEFAULT_CAPABILITIES,this.accept="",this.multiple=!0,this.disabled=!1,this.pendingCapability="files",this.pickerGeneration=0,this.pendingPickerGeneration=-1,this.onTriggerClick=()=>{const capability=this.effectiveCapabilities[0];capability!==void 0&&this.activateCapability(capability)},this.onMenuSelect=e=>{e.stopPropagation();const capability=e.detail.item.value;Object.prototype.hasOwnProperty.call(CAPABILITY_META,capability)&&this.effectiveCapabilities.includes(capability)&&this.activateCapability(capability)},this.onInputChange=e=>{e.stopPropagation();const input=e.target,selected=input.files,generation=this.pendingPickerGeneration;if(this.pendingPickerGeneration=-1,this.isConnected&&generation===this.pickerGeneration&&!this.disabled&&selected&&selected.length>0){const OwnerArray=this.ownerDocument.defaultView?.Array??Array,files=Object.freeze(OwnerArray.from(selected));this.emit("lr-files",{capability:this.pendingCapability,files})}input.value=""},this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.stopInternalEvent=event=>{event.stopPropagation()}}static{this.defaultStrings={...super.defaultStrings,attachmentAdd:LYRA_DEFAULT_attachmentAdd,attachmentMenuAudio:LYRA_DEFAULT_attachmentMenuAudio,attachmentMenuCamera:LYRA_DEFAULT_attachmentMenuCamera,attachmentMenuFiles:LYRA_DEFAULT_attachmentMenuFiles,attachmentMenuImage:LYRA_DEFAULT_attachmentMenuImage,attachmentTriggerAudio:LYRA_DEFAULT_attachmentTriggerAudio,attachmentTriggerCamera:LYRA_DEFAULT_attachmentTriggerCamera,attachmentTriggerFiles:LYRA_DEFAULT_attachmentTriggerFiles,attachmentTriggerImage:LYRA_DEFAULT_attachmentTriggerImage,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,progress:LYRA_DEFAULT_progress,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.ownedCollectionProperties=Object.freeze(["capabilities"])}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-files"])}get effectiveCapabilities(){return normalizeCapabilities(this.capabilities)}get hasFileCapability(){return this.effectiveCapabilities.includes("files")||this.effectiveCapabilities.includes("image")}willUpdate(changed){if(super.willUpdate(changed),changed.has("disabled")&&this.disabled&&this.dropdownEl?.hide(),changed.has("capabilities")){const normalized=normalizeCapabilities(this.capabilities);isCanonicalCapabilitySnapshot(this.capabilities)||(this.capabilities=normalized)}}effectiveAccept(capability){return capability==="image"?this.accept||"image/*":this.accept}activateCapability(capability){if(this.disabled)return;if(capability==="camera"){this.emit("lr-camera-request",null);return}if(capability==="audio"){this.emit("lr-audio-request",null);return}this.pendingCapability=capability,this.pendingPickerGeneration=++this.pickerGeneration;const input=this.inputEl;input&&(input.accept=this.effectiveAccept(capability),input.click())}disconnectedCallback(){this.pendingPickerGeneration=-1,this.pickerGeneration++,this.dropdownEl?.hide(),super.disconnectedCallback()}primaryControl(){return this.renderRoot.querySelector('[part="trigger"], [part="menu-trigger"]')??void 0}focus(options){this.primaryControl()?.focus(options)}blur(){this.primaryControl()?.blur()}click(){this.primaryControl()?.click()}renderHiddenInput(){return html`
+  `)}const CAPABILITY_META={files:{icon:paperclipIcon,triggerKey:"attachmentTriggerFiles",menuKey:"attachmentMenuFiles"},image:{icon:imageIcon,triggerKey:"attachmentTriggerImage",menuKey:"attachmentMenuImage"},camera:{icon:cameraIcon,triggerKey:"attachmentTriggerCamera",menuKey:"attachmentMenuCamera"},audio:{icon:audioIcon,triggerKey:"attachmentTriggerAudio",menuKey:"attachmentMenuAudio"}},OWNED_CAPABILITY_SNAPSHOTS=new WeakSet;function ownCapabilitySnapshot(values){const snapshot=Object.freeze(values);return OWNED_CAPABILITY_SNAPSHOTS.add(snapshot),snapshot}const DEFAULT_CAPABILITIES=ownCapabilitySnapshot(["files"]);function normalizeCapabilities(value){try{if(!Array.isArray(value))return DEFAULT_CAPABILITIES;if(OWNED_CAPABILITY_SNAPSHOTS.has(value))return value;const normalized=[],length=Math.min(value.length,4);for(let index=0;index<length;index++){const candidate=value[index];typeof candidate=="string"&&Object.prototype.hasOwnProperty.call(CAPABILITY_META,candidate)&&!normalized.includes(candidate)&&normalized.push(candidate)}return ownCapabilitySnapshot(normalized)}catch{return DEFAULT_CAPABILITIES}}function isCanonicalCapabilitySnapshot(source){try{return typeof source=="object"&&source!==null&&OWNED_CAPABILITY_SNAPSHOTS.has(source)}catch{return!1}}class LyraAttachmentTrigger extends LyraElement{constructor(){super(...arguments),this.capabilities=DEFAULT_CAPABILITIES,this.accept="",this.multiple=!0,this.disabled=!1,this.pendingCapability="files",this.pickerGeneration=0,this.pendingPickerGeneration=-1,this.onTriggerClick=()=>{const capability=this.effectiveCapabilities[0];capability!==void 0&&this.activateCapability(capability)},this.onMenuSelect=e=>{e.stopPropagation();const capability=e.detail.item.value;Object.prototype.hasOwnProperty.call(CAPABILITY_META,capability)&&this.effectiveCapabilities.includes(capability)&&this.activateCapability(capability)},this.onInputChange=e=>{e.stopPropagation();const input=e.target,selected=input.files,generation=this.pendingPickerGeneration;if(this.pendingPickerGeneration=-1,this.isConnected&&generation===this.pickerGeneration&&!this.disabled&&selected&&selected.length>0){const OwnerArray=this.ownerDocument.defaultView?.Array??Array,files=Object.freeze(OwnerArray.from(selected));this.emit("lr-files",{capability:this.pendingCapability,files})}input.value=""},this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.stopInternalEvent=event=>{event.stopPropagation()}}static{this.defaultStrings={...super.defaultStrings,attachmentAdd:LYRA_DEFAULT_attachmentAdd,attachmentMenuAudio:LYRA_DEFAULT_attachmentMenuAudio,attachmentMenuCamera:LYRA_DEFAULT_attachmentMenuCamera,attachmentMenuFiles:LYRA_DEFAULT_attachmentMenuFiles,attachmentMenuImage:LYRA_DEFAULT_attachmentMenuImage,attachmentTriggerAudio:LYRA_DEFAULT_attachmentTriggerAudio,attachmentTriggerCamera:LYRA_DEFAULT_attachmentTriggerCamera,attachmentTriggerFiles:LYRA_DEFAULT_attachmentTriggerFiles,attachmentTriggerImage:LYRA_DEFAULT_attachmentTriggerImage,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.ownedCollectionProperties=Object.freeze(["capabilities"])}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-files"])}get effectiveCapabilities(){return normalizeCapabilities(this.capabilities)}get hasFileCapability(){return this.effectiveCapabilities.includes("files")||this.effectiveCapabilities.includes("image")}willUpdate(changed){if(super.willUpdate(changed),changed.has("disabled")&&this.disabled&&this.dropdownEl?.hide(),changed.has("capabilities")){const normalized=normalizeCapabilities(this.capabilities);isCanonicalCapabilitySnapshot(this.capabilities)||(this.capabilities=normalized)}}effectiveAccept(capability){return capability==="image"?this.accept||"image/*":this.accept}activateCapability(capability){if(this.disabled)return;if(capability==="camera"){this.emit("lr-camera-request",null);return}if(capability==="audio"){this.emit("lr-audio-request",null);return}this.pendingCapability=capability,this.pendingPickerGeneration=++this.pickerGeneration;const input=this.inputEl;input&&(input.accept=this.effectiveAccept(capability),input.click())}disconnectedCallback(){this.pendingPickerGeneration=-1,this.pickerGeneration++,this.dropdownEl?.hide(),super.disconnectedCallback()}primaryControl(){return this.renderRoot.querySelector('[part="trigger"], [part="menu-trigger"]')??void 0}focus(options){this.primaryControl()?.focus(options)}blur(){this.primaryControl()?.blur()}click(){this.primaryControl()?.click()}renderHiddenInput(){return html`
       <input
         part="hidden-input"
         type="file"
@@ -35,7 +35,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         ?disabled=${this.disabled}
         @change=${this.onInputChange}
       />
-    `}renderSingleTrigger(capability){const meta=CAPABILITY_META[capability],label=(this.hasAttribute("aria-label")?this.getAttribute("aria-label")??"":null)??this.accessibleLabel??this.localize(meta.triggerKey);return html`
+    `}renderSingleTrigger(capability){const meta=CAPABILITY_META[capability],label=hostAriaLabel(this)??this.accessibleLabel??this.localize(meta.triggerKey);return html`
       <button
         part="trigger"
         class="trigger-button"
@@ -49,7 +49,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       >
         ${meta.icon()}
       </button>
-    `}renderMenu(){const addLabel=this.localize("attachmentAdd"),accessibleLabel=(this.hasAttribute("aria-label")?this.getAttribute("aria-label")??"":null)??this.accessibleLabel??addLabel;return html`
+    `}renderMenu(){const addLabel=this.localize("attachmentAdd"),accessibleLabel=hostAriaLabel(this)??this.accessibleLabel??addLabel;return html`
       <lr-dropdown
         part="menu"
         @lr-show=${this.stopInternalEvent}

package/dist/components/media/attachment-trigger/attachment-trigger.styles.js

@@ -1,43 +1,18 @@
 import{css}from"lit";const styles=css`
-  /* Fully transparent to layout, matching the nested dropdown/menu shell — the
-     visible/clickable surface is entirely the rendered button (or, in the
-     multi-capability case, lr-dropdown's trigger wrapper
-     around that same button), so this host never contributes a stray box a
-     composer's leading slot would otherwise have to fight with margin/
-     inline-block quirks to line up against the textarea. */
   :host {
     display: contents;
   }
 
-  /* The internal native file input never has a visible surface of its own --
-     the trigger button/menu above are the only affordance a user interacts
-     with; this input exists purely so its synthetic .click() can open the OS
-     file picker. Exposed as a part (see the class doc's @csspart) only so a
-     consumer's ::part(hidden-input) can override this in the unlikely case
-     their integration needs to. */
   [part='hidden-input'] {
     display: none;
   }
 
-  /* Shared visual treatment for both the single-capability button
-     ([part='trigger']) and the multi-capability button ([part='menu-trigger'])
-     slotted into lr-dropdown's trigger slot -- the latter can't reuse
-     part='trigger' itself (that name is reserved for the single-capability
-     case, so a consumer's ::part(trigger) selector unambiguously targets
-     exactly one button), so both buttons share this plain class for the
-     declarations that genuinely are identical, on top of each one's own
-     distinct part name. */
   .trigger-button {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    /* Compact per the class doc -- capped well below the library's general
-       --lr-icon-button-size (meant for a standalone icon-only button) so
-       this sits comfortably inside a composer's leading slot alongside a
-       textarea, matching lr-combobox's clear-button / lr-select's
-       toggle sizing convention. */
     min-inline-size: min(var(--lr-icon-button-size), var(--lr-size-1-75rem));
     min-block-size: min(var(--lr-icon-button-size), var(--lr-size-1-75rem));
     padding: 0;
@@ -54,8 +29,6 @@ import{css}from"lit";const styles=css`
       background-color var(--lr-transition-fast),
       color var(--lr-transition-fast);
   }
-  /* Keep internal state qualifiers low-specificity so sibling rules in this sheet remain easy to
-     compose. Consumer ::part() authority follows the shadow cascade independently. */
   :where(.trigger-button):hover:where(:not(:disabled)) {
     background: color-mix(in srgb, var(--lr-color-text) 8%, transparent);
     color: var(--lr-color-text);
@@ -72,29 +45,16 @@ import{css}from"lit";const styles=css`
     display: block;
   }
 
-  /* Both trigger buttons must independently meet the shared minimum tappable size
-     (--lr-icon-button-size), overriding .trigger-button's own more compact
-     min-inline-size/min-block-size above -- same tie-break-by-source-order specificity as every
-     other single-attribute-selector override in this file (equal (0,1,0) specificity to
-     .trigger-button's own (0,1,0), so this later rule wins). */
   [part='trigger'],
   [part='menu-trigger'] {
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
   }
 
-  /* [part='menu-trigger'] carries a second glyph (the paperclip plus this
-     disclosure chevron) alongside the single-capability [part='trigger']'s
-     one, so it alone needs a gap between them. */
   [part='menu-trigger'] {
     gap: var(--lr-space-xs);
   }
 
-  /* Disclosure cue for the multi-capability trigger, matching
-     lr-combobox/lr-select's own [part='expand-icon'] convention (same
-     chevronIcon() rotated to point down) -- but sized down from their
-     dedicated-touch-target treatment since here it's a second glyph inside
-     one already-compact icon button, not its own separate control. */
   [part='expand-icon'] {
     display: inline-flex;
     flex: 0 0 auto;