@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/conversation/message-feedback/message-feedback.styles.js

@@ -14,9 +14,6 @@ import{css}from"lit";const styles=css`
   }
   [part="up-button"],
   [part="down-button"] {
-    /* Keep the glyph compact while giving the interactive box the shared
-       minimum target size -- same "small glyph, padded hit box" pattern as
-       lr-code-block's/lr-json-viewer's [part='toggle']. */
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -31,8 +28,6 @@ import{css}from"lit";const styles=css`
     color: var(--lr-color-text-quiet);
     cursor: pointer;
   }
-  /* Keep authored state qualifiers low-weight and easy to compose. Consumer-part precedence is
-     verified from rendered computed style rather than inferred from selector arithmetic. */
   :where([part="up-button"]):hover:where(:not(:disabled)),
   :where([part="down-button"]):hover:where(:not(:disabled)) {
     background: var(--lr-color-surface-raised);
@@ -52,15 +47,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);
   }
-  /* The pressed state is never color-alone -- the icon itself swaps to a filled glyph in
-     lockstep with aria-pressed. These color/background/border rules are additive emphasis
-     layered on top of that shape change, not the sole signal. */
-  /* Inline var() fallbacks rather than :host-declared properties, so a consumer can set them on the
-     element or any ancestor and a :host declaration can never shadow that.
-     ::part(up-button)[aria-pressed='true'] is invalid CSS -- Shadow Parts forbids an attribute
-     selector after ::part() -- so retinting the pressed state used to mean hijacking the shared
-     --lr-color-success/-danger tokens, which repainted every other surface reading them. Unset,
-     each falls back to the token the rule already used, so the rendering is unchanged. */
   [part="up-button"][aria-pressed="true"] {
     color: var(--lr-message-feedback-up-active-color, var(--lr-color-success));
     background: var(
@@ -88,9 +74,6 @@ import{css}from"lit";const styles=css`
     cursor: not-allowed;
     opacity: var(--lr-opacity-disabled);
   }
-  /* A 0fr/1fr grid-row trick animates the disclosure's block size without measuring content --
-     min-block-size: 0 on the inner wrapper plus overflow: hidden here keeps collapsed content from
-     leaking through during the transition. */
   [part="panel"] {
     display: grid;
     grid-template-rows: 0fr;
@@ -144,10 +127,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);
   }
-  /* no-pressed-state: [part='comment'] is a textarea. A press on a text field is answered by the
-     field taking focus and raising its focus ring, which is both stronger than any momentary
-     pressed tint and outlasts the mouse button; a second, competing flash on mousedown would only
-     add noise to the one interaction that already has unambiguous feedback. */
   :where([part="comment"]):hover:where(:not(:disabled)) {
     border-color: var(--lr-color-brand);
   }
@@ -169,16 +148,6 @@ import{css}from"lit";const styles=css`
     overflow-wrap: anywhere;
     cursor: pointer;
   }
-  /* Hover/press are a background mix, never filter: brightness(). brightness() multiplies every
-     channel, so it lightens a dark fill and darkens a light one only by accident, does nothing at
-     all to a pure white or pure black brand color, and -- because filter applies to the whole
-     subtree -- dims the label along with the fill. Mixing the resting fill toward
-     --lr-color-mix-partner (which tracks the text color) always moves, always in the direction the
-     surface needs, and leaves the label alone. */
-  /* Gated on :not(:disabled) through the same :where() wrapper the thumb buttons use above -- a
-     submit button held disabled by the disabled or a long-lived pending state still matches :hover
-     (CSS keeps matching it on a disabled control), so an ungated rule made the one control the
-     user cannot activate look like the most activatable thing on the panel. */
   :where([part="submit-button"]):hover:where(:not(:disabled)) {
     background: color-mix(
       in oklab,
@@ -193,8 +162,6 @@ import{css}from"lit";const styles=css`
       var(--lr-color-mix-partner) var(--lr-color-mix-active)
     );
   }
-  /* Matches the up/down thumb buttons' own disabled treatment, so every control in the component
-     reads as unavailable from the same two signals (dimmed fill, not-allowed cursor). */
   [part="submit-button"]:disabled {
     cursor: not-allowed;
     opacity: var(--lr-opacity-disabled);
@@ -207,6 +174,4 @@ 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);
   }
-  /* 320px baseline: the panel already stacks in a flex column and the comment field is full-width
-     by construction, so no additional narrow-specific rule is needed. */
 `;export{styles};

package/dist/components/conversation/message-parts/message-parts.class.d.ts

@@ -48,7 +48,7 @@ export interface LyraMessagePartsEventMap extends Omit<LyraMarkdownEventMap, 'lr
  * @event lr-highlight-activate - Passthrough from rendered Markdown.
  * @event lr-text-select - Passthrough from rendered Markdown.
  * @event lr-anchor-result - Passthrough from rendered Markdown.
- * @event lr-preview-request - Cancelable passthrough from a rendered attachment.
+ * @event lr-preview-request - Passthrough from a rendered attachment. Not cancelable since 10.0.0.
  * @event lr-retry - Passthrough from a rendered attachment.
  * @event lr-remove - Passthrough from a rendered attachment.
  * @event lr-citation-open - Passthrough from a rendered citation's full-preview action.

package/dist/components/conversation/message-parts/message-parts.styles.js

@@ -16,11 +16,6 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
   }
 
-  /* De-emphasises this part's OWN text while an answer is still streaming. Deliberately a colour
-     change rather than an opacity on the subtree: a streaming part can contain a nested component
-     (an <lr-thinking-panel>, a tool-call chip) that sets its own colour at the contrast floor, and
-     a container opacity multiplies that down through it — which is a WCAG 1.4.3 failure the nested
-     component cannot see or defend against. color only reaches text that actually inherits it. */
   [part~='part-streaming'] {
     color: var(--lr-message-parts-streaming-color, var(--lr-color-text-quiet));
   }

package/dist/components/conversation/model-select/model-select.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,state}from"lit/decorators.js";import{activeElementIn}from"../../../internal/active-element.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{styles}from"./model-select.styles.js";import{spellcheckFromAttributeConverter as spellcheckConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{CatalogPickerController}from"../../../internal/catalog-picker.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_model,LYRA_DEFAULT_modelSelectNoModels,LYRA_DEFAULT_modelSelectRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_notInCatalog}from"../../../internal/default-strings.generated.js";class LyraModelSelect extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,model:LYRA_DEFAULT_model,modelSelectNoModels:LYRA_DEFAULT_modelSelectNoModels,modelSelectRequired:LYRA_DEFAULT_modelSelectRequired,noMatches:LYRA_DEFAULT_noMatches,notInCatalog:LYRA_DEFAULT_notInCatalog}}static{this.ownedCollectionProperties=Object.freeze(["catalog"])}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get open(){return this.catalogPicker.open}set open(next){this.catalogPicker.setOpen(next)}get activeIndex(){return this.catalogPicker.activeIndex}set activeIndex(next){this.catalogPicker.setActiveIndex(next)}get query(){return this.catalogPicker.query}set query(next){this.catalogPicker.setQuery(next)}constructor(){super(),this.provider="",this.allowCustom=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.size="m",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.listId=nextId("model-select-list"),this.controlId=nextId("model-select-control"),this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this.suppressControlBlur=!1,this.catalogPicker=new CatalogPickerController(this,{catalog:()=>this.catalog,allowCustom:()=>this.allowCustom,locale:()=>this.effectiveLocale,searchableFields:entry=>[entry.id,entry.label],emitChange:detail=>this.emit("lr-change",detail),emitFocusAlias:()=>{},onValueChange:(value,oldValue)=>{this.internals.setFormValue(value),this.updateValidity(),this.requestUpdate("value",oldValue)},onDefaultValueChange:(_value,oldValue)=>this.requestUpdate("defaultValue",oldValue),onStateChange:(state2,oldValue)=>{state2==="open"?this.requestUpdate("open",oldValue):this.requestUpdate()},onControlFocus:event=>this.captureModeFocus(event),onControlBlur:event=>{this.effectiveDisabled||(this.touched=!0),this.retireModeFocusAfterBlur(event)},forwardFreeInputClick:!0}),this.onTriggerClick=()=>{this.effectiveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onTriggerFocus=event=>{this.catalogPicker.handleControlFocus(event)},this.onTriggerKeyDown=e=>{this.catalogPicker.handleTriggerKeyDown(e)},this.onComboMouseDown=e=>{this.catalogPicker.handleComboMouseDown(e)},this.onInputFocus=event=>{this.catalogPicker.handleInputFocus(event)},this.onInput=e=>{this.catalogPicker.handleInput(e)},this.onInputBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onInputKeyDown=e=>{this.catalogPicker.handleInputKeyDown(e)},this.onListboxMouseDown=e=>{this.catalogPicker.handleListboxMouseDown(e)},this.onListboxClick=e=>{this.catalogPicker.handleListboxClick(e)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("")}click(){this.catalogPicker.click()}focus(options){this.catalogPicker.focus(options)}blur(){this.catalogPicker.blur()}get input(){return this.catalogPicker.input}get selectionStart(){return this.input?.selectionStart??null}set selectionStart(value){this.input&&(this.input.selectionStart=value)}get selectionEnd(){return this.input?.selectionEnd??null}set selectionEnd(value){this.input&&(this.input.selectionEnd=value)}get selectionDirection(){return this.input?.selectionDirection??null}set selectionDirection(value){this.input&&(this.input.selectionDirection=value)}select(){this.catalogPicker.select()}setSelectionRange(start,end,direction){this.catalogPicker.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){this.catalogPicker.setRangeText(replacement,start,end,selectMode)}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]')??null}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.catalogPicker.connected(this.hasUpdated)}willUpdate(changed){super.willUpdate(changed);let modeChanged=!1;if(this.hasUpdated){const renderedControl=this.renderRoot.querySelector('[part="trigger"], [part="combobox-input"]');modeChanged=renderedControl?.getAttribute("part")==="trigger"!==this.closedMode,this.suppressControlBlur=modeChanged,this.catalogPicker.suppressControlEvents=modeChanged,this.modeFocusRepair=modeChanged&&renderedControl!==null&&activeElementIn(this.shadowRoot)===renderedControl?captureComposedFocusRepair(this,this.modeFocusFallback()??renderedControl)??void 0:modeChanged?this.focusedModeRepair:void 0}this.open&&(changed.has("catalog")||changed.has("value")||changed.has("allowCustom"))&&this.catalogPicker.reconcileRows(void 0,changed.has("value")||changed.has("allowCustom")||modeChanged,!1)}disconnectedCallback(){super.disconnectedCallback(),this.modeFocusRepair=void 0,this.focusedModeRepair=void 0,this.focusReturnTarget=void 0,this.catalogPicker.disconnected()}adoptedCallback(){super.adoptedCallback(),this.modeFocusRepair=void 0,this.focusedModeRepair=void 0,this.focusReturnTarget=void 0,this.catalogPicker.adopted()}get value(){return this.catalogPicker.value}set value(next){this.catalogPicker.value=next}get defaultValue(){return this.catalogPicker.defaultValue}set defaultValue(next){this.catalogPicker.defaultValue=next}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.hide(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("modelSelectRequired")):this.validityController.setValidity({}),this.publishValidityStates()}publishValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation})}formResetCallback(){this.touched=!1,this.catalogPicker.resetValue()}formStateRestoreCallback(state2,_mode){this.catalogPicker.restoreState(state2)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.publishValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishValidityStates()}get closedMode(){return this.catalogPicker.closedMode}get effectiveEntries(){return this.catalogPicker.effectiveEntries}get filteredEntries(){return this.catalogPicker.filteredEntries}labelFor(id){return this.catalogPicker.labelFor(id)}show(){this.catalogPicker.show()}hide(){this.catalogPicker.hide()}updated(changed){super.updated(changed);const reposition=changed.has("open")||this.open&&(changed.has("catalog")||changed.has("allowCustom"));this.catalogPicker.updated(reposition),(changed.has("required")||changed.has("touched")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.publishValidityStates(),this.suppressControlBlur=!1,this.catalogPicker.suppressControlEvents=!1;const focusRepair=this.modeFocusRepair;this.modeFocusRepair=void 0,focusRepair&&this.scheduleAfterUpdate(()=>{const replacement=this[VALIDITY_ANCHOR](),target=replacement&&isComposedFocusAvailable(replacement)?replacement:this.modeFocusFallback();applyComposedFocusRepair(focusRepair,target),this.focusedModeRepair===focusRepair&&(this.focusedModeRepair=void 0)},"model-select-mode-focus")}rememberFocusReturn(event){const related=event.relatedTarget;related&&related.nodeType===1&&isComposedFocusAvailable(related)&&(this.focusReturnTarget=related)}captureModeFocus(event){this.rememberFocusReturn(event);const control=event.currentTarget;!control||control.nodeType!==1||(this.focusedModeRepair=captureComposedFocusRepair(this,this.modeFocusFallback()??control)??void 0)}retireModeFocusAfterBlur(event){const destination=event.relatedTarget;if(destination&&destination.nodeType===1){this.focusedModeRepair=void 0;return}queueMicrotask(()=>{!this.suppressControlBlur&&!this.effectiveDisabled&&!this.hasAttribute("inert")&&(this.focusedModeRepair=void 0)})}modeFocusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.renderRoot.querySelector('[part="form-control"]');return owner&&isComposedFocusAvailable(owner)?owner:null}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.id===this.value;return html`<div
+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,state}from"lit/decorators.js";import{activeElementIn}from"../../../internal/active-element.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{styles}from"./model-select.styles.js";import{spellcheckFromAttributeConverter as spellcheckConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{CatalogPickerController}from"../../../internal/catalog-picker.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_model,LYRA_DEFAULT_modelSelectNoModels,LYRA_DEFAULT_modelSelectRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_notInCatalog}from"../../../internal/default-strings.generated.js";class LyraModelSelect extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,model:LYRA_DEFAULT_model,modelSelectNoModels:LYRA_DEFAULT_modelSelectNoModels,modelSelectRequired:LYRA_DEFAULT_modelSelectRequired,noMatches:LYRA_DEFAULT_noMatches,notInCatalog:LYRA_DEFAULT_notInCatalog}}static{this.ownedCollectionProperties=Object.freeze(["catalog"])}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get open(){return this.catalogPicker.open}set open(next){this.catalogPicker.setOpen(next)}get activeIndex(){return this.catalogPicker.activeIndex}set activeIndex(next){this.catalogPicker.setActiveIndex(next)}get query(){return this.catalogPicker.query}set query(next){this.catalogPicker.setQuery(next)}constructor(){super(),this.provider="",this.allowCustom=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.size="m",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.listId=nextId("model-select-list"),this.controlId=nextId("model-select-control"),this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this.suppressControlBlur=!1,this.catalogPicker=new CatalogPickerController(this,{catalog:()=>this.catalog,allowCustom:()=>this.allowCustom,locale:()=>this.effectiveLocale,searchableFields:entry=>[entry.id,entry.label],emitChange:detail=>this.emit("lr-change",detail),onValueChange:(value,oldValue)=>{this.internals.setFormValue(value),this.updateValidity(),this.requestUpdate("value",oldValue)},onDefaultValueChange:(_value,oldValue)=>this.requestUpdate("defaultValue",oldValue),onStateChange:(state2,oldValue)=>{state2==="open"?this.requestUpdate("open",oldValue):this.requestUpdate()},onControlFocus:event=>this.captureModeFocus(event),onControlBlur:event=>{this.effectiveDisabled||(this.touched=!0),this.retireModeFocusAfterBlur(event)},forwardFreeInputClick:!0}),this.onTriggerClick=()=>{this.effectiveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onTriggerFocus=event=>{this.catalogPicker.handleControlFocus(event)},this.onTriggerKeyDown=e=>{this.catalogPicker.handleTriggerKeyDown(e)},this.onComboMouseDown=e=>{this.catalogPicker.handleComboMouseDown(e)},this.onInputFocus=event=>{this.catalogPicker.handleInputFocus(event)},this.onInput=e=>{this.catalogPicker.handleInput(e)},this.onInputBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onInputKeyDown=e=>{this.catalogPicker.handleInputKeyDown(e)},this.onListboxMouseDown=e=>{this.catalogPicker.handleListboxMouseDown(e)},this.onListboxClick=e=>{this.catalogPicker.handleListboxClick(e)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("")}click(){this.catalogPicker.click()}focus(options){this.catalogPicker.focus(options)}blur(){this.catalogPicker.blur()}get input(){return this.catalogPicker.input}get selectionStart(){return this.input?.selectionStart??null}set selectionStart(value){this.input&&(this.input.selectionStart=value)}get selectionEnd(){return this.input?.selectionEnd??null}set selectionEnd(value){this.input&&(this.input.selectionEnd=value)}get selectionDirection(){return this.input?.selectionDirection??null}set selectionDirection(value){this.input&&(this.input.selectionDirection=value)}select(){this.catalogPicker.select()}setSelectionRange(start,end,direction){this.catalogPicker.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){this.catalogPicker.setRangeText(replacement,start,end,selectMode)}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]')??null}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.catalogPicker.connected(this.hasUpdated)}willUpdate(changed){super.willUpdate(changed);let modeChanged=!1;if(this.hasUpdated){const renderedControl=this.renderRoot.querySelector('[part="trigger"], [part="combobox-input"]');modeChanged=renderedControl?.getAttribute("part")==="trigger"!==this.closedMode,this.suppressControlBlur=modeChanged,this.catalogPicker.suppressControlEvents=modeChanged,this.modeFocusRepair=modeChanged&&renderedControl!==null&&activeElementIn(this.shadowRoot)===renderedControl?captureComposedFocusRepair(this,this.modeFocusFallback()??renderedControl)??void 0:modeChanged?this.focusedModeRepair:void 0}this.open&&(changed.has("catalog")||changed.has("value")||changed.has("allowCustom"))&&this.catalogPicker.reconcileRows(void 0,changed.has("value")||changed.has("allowCustom")||modeChanged,!1)}disconnectedCallback(){super.disconnectedCallback(),this.modeFocusRepair=void 0,this.focusedModeRepair=void 0,this.focusReturnTarget=void 0,this.catalogPicker.disconnected()}adoptedCallback(){super.adoptedCallback(),this.modeFocusRepair=void 0,this.focusedModeRepair=void 0,this.focusReturnTarget=void 0,this.catalogPicker.adopted()}get value(){return this.catalogPicker.value}set value(next){this.catalogPicker.value=next}get defaultValue(){return this.catalogPicker.defaultValue}set defaultValue(next){this.catalogPicker.defaultValue=next}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.hide(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("modelSelectRequired")):this.validityController.setValidity({}),this.publishValidityStates()}publishValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation})}formResetCallback(){this.touched=!1,this.catalogPicker.resetValue()}formStateRestoreCallback(state2,_mode){this.catalogPicker.restoreState(state2)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.publishValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishValidityStates()}get closedMode(){return this.catalogPicker.closedMode}get effectiveEntries(){return this.catalogPicker.effectiveEntries}get filteredEntries(){return this.catalogPicker.filteredEntries}labelFor(id){return this.catalogPicker.labelFor(id)}show(){this.catalogPicker.show()}hide(){this.catalogPicker.hide()}updated(changed){super.updated(changed);const reposition=changed.has("open")||this.open&&(changed.has("catalog")||changed.has("allowCustom"));this.catalogPicker.updated(reposition),(changed.has("required")||changed.has("touched")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.publishValidityStates(),this.suppressControlBlur=!1,this.catalogPicker.suppressControlEvents=!1;const focusRepair=this.modeFocusRepair;this.modeFocusRepair=void 0,focusRepair&&this.scheduleAfterUpdate(()=>{const replacement=this[VALIDITY_ANCHOR](),target=replacement&&isComposedFocusAvailable(replacement)?replacement:this.modeFocusFallback();applyComposedFocusRepair(focusRepair,target),this.focusedModeRepair===focusRepair&&(this.focusedModeRepair=void 0)},"model-select-mode-focus")}rememberFocusReturn(event){const related=event.relatedTarget;related&&related.nodeType===1&&isComposedFocusAvailable(related)&&(this.focusReturnTarget=related)}captureModeFocus(event){this.rememberFocusReturn(event);const control=event.currentTarget;!control||control.nodeType!==1||(this.focusedModeRepair=captureComposedFocusRepair(this,this.modeFocusFallback()??control)??void 0)}retireModeFocusAfterBlur(event){const destination=event.relatedTarget;if(destination&&destination.nodeType===1){this.focusedModeRepair=void 0;return}queueMicrotask(()=>{!this.suppressControlBlur&&!this.effectiveDisabled&&!this.hasAttribute("inert")&&(this.focusedModeRepair=void 0)})}modeFocusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.renderRoot.querySelector('[part="form-control"]');return owner&&isComposedFocusAvailable(owner)?owner:null}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.id===this.value;return html`<div
         part="option"
         id=${id}
         role="option"
@@ -40,7 +40,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         aria-expanded=${this.open?"true":"false"}
         aria-controls=${this.listId}
         aria-activedescendant=${activeId}
-        aria-label=${this.getAttribute("aria-label")||(hasLabel?nothing:this.placeholder||this.localize("model"))}
+        aria-label=${hostAriaLabel(this)??(hasLabel?nothing:this.placeholder||this.localize("model"))}
         aria-describedby=${describedBy||nothing}
         aria-required=${this.required?"true":"false"}
         aria-invalid=${this.touched&&!this.internals.validity.valid?"true":"false"}
@@ -66,7 +66,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           id=${this.controlId}
           part="combobox-input"
           role="combobox"
-          aria-label=${this.getAttribute("aria-label")||(hasLabel?nothing:this.placeholder||this.localize("model"))}
+          aria-label=${hostAriaLabel(this)??(hasLabel?nothing:this.placeholder||this.localize("model"))}
           aria-expanded=${this.open?"true":"false"}
           aria-controls=${this.listId}
           aria-activedescendant=${activeId}

package/dist/components/conversation/model-select/model-select.styles.js

@@ -5,13 +5,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     inline-size: 100%;
     min-inline-size: 0;
     max-inline-size: var(--lr-size-24rem);
-    /* The size ladder itself lives in internal/sizes.styles.ts, which this component composes ahead
-       of this sheet. Only the indirection is here: the public --lr-model-select-* surface stays
-       exactly as documented, while its VALUES come from the one --lr-form-control-* scale every
-       other control in the library sizes against. That keeps a model select the same height as the
-       lr-select / lr-input / lr-button next to it in a toolbar row at every tier, and it means the
-       shared sheet's per-tier :host([size='...']) rules (which list both spellings of each step)
-       are the only place a tier is ever restated. */
     --_lr-model-select-trigger-padding: var(--lr-form-control-padding-block)
       var(--lr-form-control-padding-inline);
     --_lr-model-select-trigger-min-height: var(--lr-form-control-height);
@@ -23,9 +16,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   :host(:disabled) {
     cursor: not-allowed;
   }
-  /* The decorative expand icon is the one knob the shared ladder has no equivalent for -- it is a
-     glyph box, not a control metric -- so its three sizes stay here, listed in both spellings of
-     each tier so they track the shared sheet exactly. */
   :host([size="2xs"]),
   :host([size="xs"]) {
     --_lr-model-select-expand-size: var(--lr-size-1rem);
@@ -41,14 +31,9 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-size: var(--lr-font-size-md-sm);
     font-weight: var(--lr-font-weight-semibold);
   }
-  /* :empty never matches here because the part always contains a slot element. Visible-label
-     presence is tracked from both the property and named slot, then reflected through hidden. */
   [part="form-control-label"][hidden] {
     display: none;
   }
-  /* This control accepts required and renders a visible label like every other field in the
-     library, so it marks it the same way -- the [hidden] rule above is what keeps the marker from
-     orphaning a stray glyph when no label is set. */
   ${formControlRequiredMarker}
 
   [part='trigger'],
@@ -92,9 +77,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* :where() zeroes the wrapped selectors' specificity contribution, keeping this at (0,1,0) --
-     matches lr-attachment-trigger's fixed convention, so a consumer's ::part(trigger):hover
-     override ((0,1,1)) still wins without needing !important. */
   :where([part="trigger"]):hover:where(:not(:disabled)) {
     background: var(--lr-color-brand-quiet);
   }
@@ -199,11 +181,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       --lr-model-select-radius,
       var(--_lr-model-select-radius-default)
     );
-    /* Anchored overlay: a positioner-placed listbox floating over page content, not a modal layer. */
     box-shadow: var(--lr-shadow-m);
-    /* Closed state: invisible + slightly raised. visibility (not
-       display:none) so opacity/transform can actually transition; hit-testing
-       and a11y exposure stay off since this part is already position:fixed. */
     visibility: hidden;
     opacity: 0;
     transform: translateY(var(--lr-size-neg-0-25rem));
@@ -239,6 +217,18 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     text-align: start;
     cursor: pointer;
   }
+  [part="option"][aria-selected="true"] {
+    background: var(--lr-model-select-option-selected-bg, transparent);
+    border-color: var(
+      --lr-model-select-option-selected-border,
+      var(--lr-color-brand)
+    );
+    color: var(--lr-model-select-option-selected-color, var(--lr-color-brand));
+    font-weight: var(
+      --lr-model-select-option-selected-font-weight,
+      var(--lr-font-weight-semibold)
+    );
+  }
   [part="option"]:hover,
   [part="option"][data-active] {
     background: var(
@@ -246,8 +236,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-color-brand-quiet)
     );
   }
-  /* Mixes the SAME --lr-model-select-option-active-bg the hover/active-descendant rule above uses,
-     so a consumer retinting the highlight gets a matching pressed step for free. */
   [part="option"]:active {
     background: color-mix(
       in oklab,
@@ -255,21 +243,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-color-mix-partner) var(--lr-color-mix-active)
     );
   }
-  [part="option"][aria-selected="true"] {
-    /* Per-component indirection (inline var() fallbacks to the shared brand tokens, so unset
-       rendering is byte-for-byte unchanged) -- so a consumer can retheme just the selected row
-       without hijacking --lr-color-brand library-wide. */
-    background: var(--lr-model-select-option-selected-bg, transparent);
-    border-color: var(
-      --lr-model-select-option-selected-border,
-      var(--lr-color-brand)
-    );
-    color: var(--lr-model-select-option-selected-color, var(--lr-color-brand));
-    font-weight: var(
-      --lr-model-select-option-selected-font-weight,
-      var(--lr-font-weight-semibold)
-    );
-  }
   [part="option-icon"] {
     flex: 0 0 auto;
     line-height: var(--lr-line-height-1-4);
@@ -281,10 +254,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  /* Stale-value row: a previously-saved value that no longer appears in the
-     catalog. Marked with a dashed border + italic label (instead of the
-     solid border every real row uses) so it visually reads as "remembered,
-     not offered" rather than a normal selectable catalog entry. */
   [part="option"][data-synthetic] {
     border-style: var(--lr-model-select-option-synthetic-border-style, dashed);
     border-color: var(
@@ -315,10 +284,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-size: var(--lr-font-size-sm);
     color: var(--lr-color-text-quiet);
   }
-  /* :empty never matches here -- the part always contains a literal slot
-     child element regardless of assigned/text content -- so real emptiness
-     is tracked in JS (hasHintSlot) and reflected via the hidden attribute
-     instead (same fix as lr-select's identical part). */
   [part="hint"][hidden] {
     display: none;
   }

package/dist/components/conversation/model-settings-panel/model-settings-panel.styles.js

@@ -21,8 +21,6 @@ import{css}from"lit";const styles=css`
     gap: var(--lr-space-xs);
     min-inline-size: 0;
   }
-  /* The nested control's own max-inline-size (24rem, sized for a standalone
-     dropdown) would otherwise clip a full-width row inside this card. */
   [part='model-row'] lr-model-select {
     inline-size: 100%;
     max-inline-size: none;
@@ -52,10 +50,6 @@ import{css}from"lit";const styles=css`
     text-align: end;
   }
 
-  /* Compact layout: the two rows sit side by side instead of stacked, and
-     the temperature caption shrinks to an uppercase micro-label -- a denser
-     treatment for toolbars/sidebars where the vertical layout's full-height
-     rows don't fit. */
   :host([layout='compact']) {
     max-inline-size: none;
   }

package/dist/components/conversation/prompt-input/prompt-input.class.d.ts

@@ -4,13 +4,16 @@ import type { DocumentRef } from '../../../ai/types.js';
 import { LyraElement } from '../../../internal/lyra-element.js';
 import type { LyraAttachmentCapability, LyraAttachmentFilesDetail } from '../../media/attachment-trigger/attachment-trigger.class.js';
 import type { LyraSourceEntry } from '../../retrieval/source-picker/source-picker.class.js';
+export type { LyraSourceEntry } from '../../retrieval/source-picker/source-picker.class.js';
 import type { LyraMentionItem } from '../../utility/mention-popover/mention-popover.class.js';
 import type { ChatComposerSelectionDirection, ChatComposerStatus, ChatComposerWrap } from '../chat-composer/chat-composer.class.js';
 import type { LyraCatalog, LyraModelCatalogEntry } from '../model-select/model-select.class.js';
 import type { PromptQueueItem } from '../prompt-queue/prompt-queue.class.js';
+export type { PromptQueueItem } from '../prompt-queue/prompt-queue.class.js';
 import type { PromptQueueChangeDetail } from '../prompt-queue/prompt-queue.class.js';
 import type { LyraAttachmentIdDetail, LyraAttachmentPreviewRequestDetail, LyraAttachmentUploadStatus } from '../../media/attachment-chip/attachment-chip.class.js';
 import type { LyraVoiceCatalogEntry } from '../voice-picker/voice-picker.class.js';
+export type { LyraVoiceCatalogEntry } from '../voice-picker/voice-picker.class.js';
 export interface LyraPromptSuggestion extends LyraMentionItem {
     /** Inserted after the trigger. Defaults to `label`. */
     insertText?: string;

package/dist/components/conversation/prompt-input/prompt-input.styles.js

@@ -20,14 +20,6 @@ import{css}from"lit";const styles=css`
   }
 
   [part='controls'] > * {
-    /* The prompt-scoped width hook avoids an ancestor-wide generic control collision. Unlike
-       lr-model-select's own
-       min-inline-size, which resolves through --lr-size-12rem directly) -- an unset custom
-       property makes var() invalid at computed-value time, which invalidates this whole
-       declaration (min-inline-size falls back to its auto initial value; flex-basis, below,
-       falls back to auto too) rather than merely omitting the min/basis. --lr-size-12rem
-       mirrors the min-inline-size lr-model-select's own popover uses for the same "one control
-       row item" sizing purpose. */
     min-inline-size: min(100%, var(--lr-prompt-input-control-width, var(--lr-size-12rem)));
     flex: 1 1 var(--lr-prompt-input-control-width, var(--lr-size-12rem));
   }
@@ -48,8 +40,6 @@ import{css}from"lit";const styles=css`
   [part='sources-summary']:hover {
     color: var(--lr-color-brand);
   }
-  /* The summary is a disclosure control, so the press gets a fill on top of the hover recolor --
-     mixed from [part='sources']'s own surface, which is what shows through the summary at rest. */
   [part='sources-summary']:active {
     color: var(--lr-color-brand);
     background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active));

package/dist/components/conversation/push-to-talk/push-to-talk.styles.js

@@ -34,15 +34,9 @@ import{css}from"lit";const styles=css`
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
-  /* :where() zeroes the wrapped selectors' specificity contribution, leaving this at (0,1,0) --
-     matches lr-attachment-trigger's fixed convention, so a consumer's ::part(trigger):hover
-     override ((0,1,1)) still wins without needing !important. */
   :where([part='trigger']):hover:where(:not(:disabled)) {
     background: var(--lr-color-brand-quiet);
   }
-  /* Press-and-hold is this component's entire interaction, so the pressed fill is not decoration:
-     it is the "I am registering your hold" signal, and it appears the instant the pointer goes
-     down -- before the recording state and its pulse ring have anything to show. */
   :where([part='trigger']):active:where(:not(:disabled)) {
     background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));
   }
@@ -64,8 +58,6 @@ import{css}from"lit";const styles=css`
     position: absolute;
     inset: calc(-1 * var(--lr-size-4px));
     border-radius: 50%;
-    /* The aggregate recording color remains the shared fallback, while the ring can be retinted
-       independently from the trigger's border and foreground. */
     border: var(--lr-border-width-medium) solid
       var(
         --lr-push-to-talk-pulse-recording-border-color,

package/dist/components/conversation/selection-toolbar/selection-toolbar.styles.js

@@ -6,7 +6,7 @@ import{css}from"lit";const styles=css`
 
   [part='toolbar'] {
     position: fixed;
-    z-index: var(--lr-overlay-stack-index, 1000);
+    z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover));
     inset-inline-start: var(--_lr-selection-toolbar-inline-start);
     inset-block-start: var(--_lr-selection-toolbar-block-start);
     display: flex;
@@ -24,7 +24,6 @@ import{css}from"lit";const styles=css`
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
     background: var(--lr-color-surface);
-    /* Anchored overlay: a floating toolbar pinned to the current selection, not a modal layer. */
     box-shadow: var(--lr-shadow-m);
     transform: translate(
       -50%,
@@ -70,10 +69,6 @@ import{css}from"lit";const styles=css`
     color: var(--lr-color-brand);
   }
 
-  /* Each action is an <lr-button appearance="plain">, which already supplies its own pressed
-     treatment (--lr-button-active-scale) inside its shadow root. What this rule adds is the
-     toolbar's brand accent escalated one step -- a background box on the host would sit behind the
-     button's own transparent base and read as a second, misaligned control. */
   [part~='action']:active {
     color: color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active));
   }
@@ -83,9 +78,4 @@ import{css}from"lit";const styles=css`
     outline-offset: var(--lr-focus-ring-offset);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    [part='toolbar'] {
-      transition: none;
-    }
-  }
 `;export{styles};

package/dist/components/conversation/stream-status/stream-status.styles.js

@@ -4,15 +4,10 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
     vertical-align: middle;
-    /* Keep the public hooks undeclared here: a consumer may set either one
-       on an ancestor. The private values below retain per-phase defaults when
-       the public hook is unset, following lr-timeline-item's marker pattern. */
     --_lr-stream-status-dot-color-default: var(--lr-color-text-quiet);
     --_lr-stream-status-dot-opacity-default: 0.35;
   }
 
-  /* 'connecting' gets a dimmer, static brand dot -- present but deliberately
-     quieter than 'streaming' so the two are never confused at a glance. */
   :host([connection-state='connecting']) {
     --_lr-stream-status-dot-color-default: var(--lr-color-brand);
     --_lr-stream-status-dot-opacity-default: 0.6;
@@ -21,8 +16,6 @@ import{css}from"lit";const styles=css`
     --_lr-stream-status-dot-color-default: var(--lr-color-brand);
     --_lr-stream-status-dot-opacity-default: 1;
   }
-  /* Warning, not danger -- see the class doc's "Visual" section for why a
-     stall defaults to the recoverable/actionable tone. */
   :host([data-stalled]) {
     --_lr-stream-status-dot-color-default: var(--lr-color-warning);
     --_lr-stream-status-dot-opacity-default: 1;
@@ -41,9 +34,6 @@ import{css}from"lit";const styles=css`
       border-color var(--lr-transition-base);
   }
 
-  /* The one "unmistakable" treatment the spec calls for: a stall tints the
-     whole row, not just the dot, so the message/actions read as one alert
-     unit rather than a plain dot next to unrelated-looking text. */
   :host([data-stalled]) [part='base'] {
     padding: var(--lr-space-xs) var(--lr-space-s);
     background: var(--lr-stream-status-stalled-bg, var(--lr-color-warning-quiet));
@@ -75,12 +65,6 @@ import{css}from"lit";const styles=css`
     font-weight: var(--lr-font-weight-semibold);
   }
 
-  /* Only 'streaming' pulses -- a moving dot reads as "actively receiving
-     data right now"; every other phase (including 'stalled', which wants
-     steady attention via color/tint, not extra motion) stays static. Same
-     token/rationale as lr-typing-indicator's pulse variant -- see that
-     component's styles for the full explanation of why
-     --lr-transition-ambient is the right length for an ambient loop. */
   :host([connection-state='streaming']:not([data-stalled])) [part='indicator'] {
     animation: lr-stream-status-pulse var(--lr-transition-ambient) infinite;
   }

package/dist/components/conversation/streaming-text/streaming-text.styles.js

@@ -8,17 +8,10 @@ import{css}from"lit";const styles=css`
     line-height: var(--lr-line-height-loose);
   }
 
-  /* Plain-text path only (Markdown mode never renders this element) -- see
-     the class doc for why Markdown content can't share this same
-     white-space treatment. */
   .plain {
     white-space: pre-wrap;
   }
 
-  /* inline-block (not inline) so it participates in text layout on the same
-     line as the preceding content while still accepting a fixed block-size
-     for the bar -- in plain-text mode this sits at the visual tail of the
-     final wrapped line, immediately after the last character. */
   [part='cursor'] {
     display: inline-block;
     vertical-align: text-bottom;
@@ -27,15 +20,9 @@ import{css}from"lit";const styles=css`
     margin-inline-start: var(--lr-space-xs);
     background: currentColor;
     border-radius: var(--lr-inline-cursor-width, var(--lr-size-0-125rem));
-    /* Ambient, infinite "still alive" indicator, not a discrete state flip --
-       same reasoning as lr-typing-indicator's own cursor variant, which
-       uses this same token for the identical blink pattern. */
     animation: lr-streaming-text-cursor-blink var(--lr-transition-ambient) infinite;
   }
 
-  /* Two adjacent keyframe stops (49% / 50%) either side of an instant flip,
-     same shape as lr-typing-indicator's cursor variant, so the blink still
-     reads as a sharp on/off even under the token's own ease-out timing. */
   @keyframes lr-streaming-text-cursor-blink {
     0%,
     49% {
@@ -47,8 +34,6 @@ import{css}from"lit";const styles=css`
     }
   }
 
-  /* Degrades to a static, fully-visible bar -- never a frozen mid-blink
-     (invisible) frame. */
   @media (prefers-reduced-motion: reduce) {
     [part='cursor'] {
       animation: none !important;

package/dist/components/conversation/suggestion-chips/suggestion-chips.styles.js

@@ -6,9 +6,6 @@ import{css}from"lit";const styles=css`
   [part='base'] {
     max-inline-size: 100%;
   }
-  /* Line packing is consumer-tunable because it is unreachable otherwise: centering the chips under
-     centered empty-state text needs the wrapped final line centered too, and ::part(base) can only
-     center the row while it still fits on one line. */
   .row {
     display: flex;
     justify-content: var(--lr-suggestion-chips-justify, flex-start);
@@ -49,8 +46,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-suggestion-chips-hover-bg, var(--lr-color-brand-quiet));
     border-color: var(--lr-suggestion-chips-hover-border, var(--lr-color-brand));
   }
-  /* Mixes the SAME --lr-suggestion-chips-hover-bg the rule above uses, so a consumer retinting the
-     hover fill gets a matching pressed step without a second custom property to keep in sync. */
   [part~='chip']:active {
     background: color-mix(
       in oklab,

package/dist/components/conversation/thread-list/thread-list.styles.js

@@ -30,10 +30,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);
   }
-  /* no-pressed-state: [part='search-input'] is a text field. A press on it is answered by the field
-     taking focus and raising its focus ring, which is both stronger than any momentary pressed tint
-     and outlasts the mouse button; a second, competing flash on mousedown would only add noise to
-     the one interaction that already has unambiguous feedback. */
   [part='search-input']:hover {
     border-color: var(--lr-color-brand);
   }
@@ -52,14 +48,6 @@ import{css}from"lit";const styles=css`
     display: flex;
     flex-direction: column;
   }
-  /* The internal list has to fill whatever height this component was given, instead of scrolling
-     inside lr-virtual-list's own 24rem --lr-virtual-list-height default. Deliberately *not*
-     --lr-virtual-list-height: 100%: that percentage resolves against this host, which is a flex
-     item, so in an auto-height container it chains to auto and the viewport either collapses to
-     zero (no rows) or grows to the full un-virtualized content height (rows). Making the list host
-     a column flex container instead turns the shipped block-size: 24rem on [part='base'] into its
-     *flex-basis*: it grows to fill a bounded pane, shrinks below 24rem in a short one, and in an
-     auto-height container falls back to exactly the 24rem it renders at today. */
   lr-virtual-list {
     flex: 1 1 auto;
     min-block-size: 0;
@@ -84,11 +72,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-surface);
     color: var(--lr-color-text-quiet);
   }
-  /* sticky-groups: the pinned copy of the current group header. lr-virtual-list ships that layer
-     pointer-transparent, because it is a copy of a row that already exists; this component's header
-     owns a real collapse toggle, so it opts back in. Everything else about the copy -- padding,
-     background, the toggle and icon -- comes from the group-header/group-toggle/group-icon rules
-     around this one, which the copy shares by rendering the same parts. */
   lr-virtual-list::part(sticky-group) {
     pointer-events: auto;
   }
@@ -138,10 +121,6 @@ import{css}from"lit";const styles=css`
   lr-virtual-list::part(row-actions) {
     min-inline-size: 0;
   }
-  /* row-start/row-actions (see thread-list.class.ts) are plain <span>s, so they default to
-     display: inline -- an ordinary text baseline box with descender strut height. Their
-     content is adornments (icon/avatar, action buttons), not text, so center them on a flex
-     line instead; row-content/row-meta hold real text and keep their own inline/block flow. */
   lr-virtual-list::part(row-start),
   lr-virtual-list::part(row-actions) {
     display: inline-flex;
@@ -151,8 +130,6 @@ import{css}from"lit";const styles=css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    /* Keep the glyph compact while giving the interactive box the shared
-       minimum target size. */
     inline-size: var(--lr-size-1-5rem);
     block-size: var(--lr-size-1-5rem);
     min-inline-size: var(--lr-icon-button-size);