@aceshooting/lyra-ui 8.2.1 → 8.2.3

package/dist/components/agent-tools/agent-eval-dashboard/agent-eval-dashboard.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-m); }
   [part='heading'], [part='runs-heading'] { margin: 0; font-size: var(--lr-font-size-lg); font-weight: var(--lr-font-weight-semibold); }
   [part='metrics'] { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--lr-size-10rem), 1fr)); gap: var(--lr-space-s); }

package/dist/components/agent-tools/agent-trace/agent-trace.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/agent-tools/approval-queue/approval-queue.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/agent-tools/browser-frame/browser-frame.styles.js

@@ -4,6 +4,7 @@ import{css}from"lit";const styles=css`
     /* Makes the host a query container so the @container rule below reacts to the frame's own
        allocated width (a sidebar, a split pane, a dialog) instead of the viewport's. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='base'] {
     display: flex;

package/dist/components/agent-tools/compare-panel/compare-panel.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     --lr-compare-panel-max-height: var(--lr-size-24rem);
   }
 

package/dist/components/agent-tools/eval-result/eval-result.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/agent-tools/mcp-app/mcp-app.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/agent-tools/prompt-studio/prompt-studio.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-m); }
   [part='toolbar'] { display: flex; flex-wrap: wrap; gap: var(--lr-space-s); align-items: center; }
   [part='toolbar'] h2 { min-inline-size: 0; flex: 1; margin: 0; font-size: var(--lr-font-size-lg); }

package/dist/components/agent-tools/schema-viewer/schema-viewer.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   ul { display: flex; flex-direction: column; gap: var(--lr-space-xs); margin: 0; padding-inline-start: var(--lr-space-l); list-style: none; }
   [part='tree'] { padding-inline-start: 0; }
   [part~='node'] { min-inline-size: 0; border-inline-start: var(--lr-border-width-thin) solid var(--lr-color-border); padding-inline-start: var(--lr-space-s); }

package/dist/components/agent-tools/span-waterfall/span-waterfall.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     --lr-span-waterfall-name-width: var(--lr-size-8rem);
   }
 

package/dist/components/agent-tools/subagent-panel/subagent-panel.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   [part='list'] { display: flex; flex-direction: column; gap: var(--lr-space-xs); margin: 0; padding: 0; list-style: none; }
   [part~='run'] { margin-inline-start: calc(var(--lr-subagent-depth, 0) * var(--lr-space-l)); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); overflow: hidden; }
   [part~='run-selected'] {

package/dist/components/agent-tools/trace-tree/trace-tree.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     --_lr-trace-tree-bar-column: var(--lr-size-6rem);
     --_lr-trace-tree-tokens-in-column: 0;
     --_lr-trace-tree-tokens-out-column: 0;

package/dist/components/charts/chart/chart.styles.js

@@ -7,6 +7,7 @@ import{css}from"lit";const styles=css`
     min-block-size: var(--lr-chart-height, var(--lr-size-280px));
     block-size: auto;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     /* Chart.js renders to canvas, not the DOM, so it can't consume CSS
        var() directly — chart.ts's themeColors() resolves these once per
        draw() via getComputedStyle, same pattern as heatmap.ts's scale-lo/-hi.

package/dist/components/conversation/agent-workspace/agent-workspace.styles.js

@@ -5,6 +5,7 @@ import{css}from"lit";const styles=css`
     min-block-size: 0;
     block-size: 100%;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='base'] {
     display: grid;

package/dist/components/conversation/chat-viewport/chat-viewport.styles.js

@@ -6,6 +6,7 @@ import{css}from"lit";const styles=css`
     min-block-size: 0;
     position: relative;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='base'] {
     display: flex;

package/dist/components/conversation/code-block/code-block.styles.js

@@ -167,6 +167,13 @@ import{css}from"lit";const styles=css`
   [part='pre'] {
     margin: 0;
     padding: var(--lr-space-s) var(--lr-space-m);
+    /* The body owns scrolling, so this descendant's painted box must grow to the longest
+       unwrapped line instead of stopping at the body's initially visible width. The 100%
+       minimum keeps short code filling the scrollport; max-content extends the background and
+       line-state painting through the full horizontal overflow range. */
+    box-sizing: border-box;
+    inline-size: max-content;
+    min-inline-size: 100%;
     /* Source code is read left-to-right regardless of the surrounding document
        direction -- like every code surface (VS Code, GitHub, devtools). Without
        this, an ancestor dir="rtl" bidi-reorders each line (a trailing ';' jumps

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

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

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

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

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

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/conversation/realtime-session/realtime-session.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-m); }
   [part='header'] { display: grid; grid-template-columns: auto minmax(var(--lr-size-8rem), 1fr) auto; gap: var(--lr-space-s); align-items: center; }
   [part='activity'] { min-inline-size: 0; }

package/dist/components/data/calendar/calendar.styles.js

@@ -7,6 +7,7 @@ import{css}from"lit";const styles=css`
        declare container-type on some ancestor whose box crosses the same threshold, making it
        effectively dead code out of the box. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     --lr-calendar-day-min-block-size: var(--lr-size-6rem);
     /* Component-scoped indirection over the shared --lr-color-brand-quiet token, so a consumer
        can retint the persistent selected-day highlight without also recoloring

package/dist/components/data/data-grid/data-grid.styles.js

@@ -27,6 +27,7 @@ import{css}from"lit";const styles=css`
     position: relative;
     isolation: isolate;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     overflow: hidden;
     border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);

package/dist/components/data/pagination/pagination.styles.js

@@ -3,6 +3,7 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     /* Both knobs read the shared control ladder, which owns every tier and matches both the s/m/l
        and small/medium/large spellings in one selector list. Keeping the public
        --lr-pagination-* names in front lets a consumer retune this component alone, while the

package/dist/components/data/query-builder/query-builder.styles.js

@@ -6,6 +6,7 @@ import{css}from"lit";const styles=css`
        component's own allocated width (a sidebar, a split pane, a dialog) rather than the
        viewport. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/data/table/table.styles.js

@@ -15,6 +15,7 @@ import{css}from"lit";const styles=css`
     /* Makes [part='base'] a query container so the @container rules below can
        react to the table's own available width instead of the viewport's. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='filter-label'] {
     display: flex;

package/dist/components/forms/input/input.class.d.ts

@@ -246,6 +246,15 @@ export declare class LyraInput extends LyraInput_base {
     private touched;
     private readonly slotPresence;
     private inputEl?;
+    /** Id of the internal native `<input>` (and the `for` of its paired `<label>`), so a
+     *  shadow-DOM-aware password manager keys its field detection off the same id the consumer put
+     *  on the host, rather than a fixed literal. Falls back to `"input"` when the host carries no
+     *  `id`, leaving the rendered output byte-identical to before this existed. `id` is a plain
+     *  inherited DOM property rather than a reactive `@property`, so a host `id` set declaratively in
+     *  markup is picked up on first render (the native IDL reflects the parsed attribute before Lit's
+     *  own `render()` runs); mutating `el.id` after first render only takes effect on this component's
+     *  next unrelated re-render. */
+    private get inputId();
     constructor();
     formResetCallback(): void;
     /** The internal native `<input>` element, for direct DOM access — mirrors `<lr-textarea>`'s own `input` getter. */

package/dist/components/forms/input/input.class.js

@@ -1,6 +1,6 @@
-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--)if(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{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{closeIcon,eyeIcon,eyeOffIcon}from"../../../internal/icons.js";import{styles}from"./input.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{finiteCount}from"../../../internal/numbers.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_collapse,LYRA_DEFAULT_date,LYRA_DEFAULT_details,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_hidePassword,LYRA_DEFAULT_inputLabel,LYRA_DEFAULT_open,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_showPassword,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const LENGTH_CONSTRAINED_TYPES=["text","password","email","search","tel","url"];class LyraInputBase extends LyraElement{}class LyraInput extends FormAssociated(LyraInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,collapse:LYRA_DEFAULT_collapse,date:LYRA_DEFAULT_date,details:LYRA_DEFAULT_details,fieldRequired:LYRA_DEFAULT_fieldRequired,hidePassword:LYRA_DEFAULT_hidePassword,inputLabel:LYRA_DEFAULT_inputLabel,open:LYRA_DEFAULT_open,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,showPassword:LYRA_DEFAULT_showPassword,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){super.value=next??""}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next);this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}constructor(){super();this.type="text";this.size="m";this.appearance="outlined";this.filled=false;this.pill=false;this.placeholder="";this.clearable=false;this.withClear=false;this.readonly=false;this.label="";this.hint="";this.helpText="";this.withLabel=false;this.withHint=false;this.errorText="";this.accessibleLabel=null;this.autocomplete="";this.title="";this.autofocus=false;this.spellcheck=true;this.autocapitalize="";this.autocorrectValue=true;this.inputMode="";this.enterKeyHint="";this.passwordToggle=false;this.passwordVisible=false;this.withoutSpinButtons=false;this.noSpinButtons=false;this.touched=false;this.slotPresence=new SlotPresenceController(this);this.onInput=event=>{if(!this.inputEl)return;this.value=this.inputEl.value;relayNativeEvent(this,event);this.emit("lr-input",{value:this.value})};this.onChange=event=>{if(!this.inputEl)return;this.value=this.inputEl.value;relayNativeEvent(this,event);this.emit("lr-change",{value:this.value})};this.onFocus=event=>{relayNativeEvent(this,event);this.emit("lr-focus")};this.onBlur=event=>{if(!this.effectiveDisabled)this.touched=true;relayNativeEvent(this,event);this.emit("lr-blur")};this.onKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;submitOnEnter(this,event)};this.onTogglePasswordVisible=()=>{this.passwordVisible=!this.passwordVisible};this.onClear=()=>{if(this.effectiveDisabled||this.readonly||this.value==="")return;this.value="";if(this.inputEl)this.inputEl.value="";dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"});this.emit("lr-input",{value:this.value});dispatchNativeEvent(this,"change");this.emit("lr-change",{value:this.value});this.emit("lr-clear");this.inputEl?.focus()};this.addEventListener("invalid",()=>{this.touched=true})}formResetCallback(){super.formResetCallback();this.touched=false}get input(){return this.inputEl??null}click(){if(!this.effectiveDisabled)this.inputEl?.click()}focus(options){if(!this.effectiveDisabled)this.inputEl?.focus(options)}blur(){this.inputEl?.blur()}select(){this.inputEl?.select()}get valueAsDate(){const native=this.inputEl;if(!native)return null;if(native.value!==this.value)native.value=this.value;return native.valueAsDate}set valueAsDate(next){const native=this.inputEl;if(!native)return;native.valueAsDate=next;this.value=native.value}get valueAsNumber(){const native=this.inputEl;if(!native)return Number.NaN;if(native.value!==this.value)native.value=this.value;return native.valueAsNumber}set valueAsNumber(next){const native=this.inputEl;if(!native)return;native.valueAsNumber=next;this.value=native.value}showPicker(){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;if(!("showPicker"in HTMLInputElement.prototype))return;try{native.showPicker()}catch{}}stepUp(steps=1){this.applyStep("up",steps)}stepDown(steps=1){this.applyStep("down",steps)}applyStep(direction,steps){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;const count=finiteCount(steps,1);if(count===0)return;try{if(direction==="up")native.stepUp(count);else native.stepDown(count)}catch{return}if(this.value!==native.value)this.value=native.value}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){if(this.inputEl)this.inputEl.selectionStart=value??0}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){if(this.inputEl)this.inputEl.selectionEnd=value??0}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;if(!input)return;if(start===void 0||end===void 0){input.setRangeText(replacement)}else{input.setRangeText(replacement,start,end,selectMode)}this.value=input.value}updateValidity(){const native=this.inputEl;if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(!native){if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:true},this.localize("fieldRequired"))}else{this[SET_ANCHORED_VALIDITY]({})}return}if(native.value!==this.value)native.value=this.value;const sanitizedAway=this.value!==""&&native.value==="";const v=native.validity;const own=LENGTH_CONSTRAINED_TYPES.includes(this.type)?lengthViolations(this.value,this.minlength,this.maxlength):{tooShort:false,tooLong:false};const tooShort=v.tooShort||own.tooShort;const tooLong=v.tooLong||own.tooLong;if(v.valid&&!tooShort&&!tooLong){if(sanitizedAway){this[SET_ANCHORED_VALIDITY]({badInput:true},this.localize("valueInvalid"));return}this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({valueMissing:v.valueMissing,typeMismatch:v.typeMismatch,rangeUnderflow:v.rangeUnderflow,rangeOverflow:v.rangeOverflow,stepMismatch:v.stepMismatch,tooShort,tooLong,patternMismatch:v.patternMismatch,badInput:v.badInput},native.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed);if(changed.has("value")){if(this.value==="")this.internals.states.add("blank");else this.internals.states.delete("blank")}if(changed.has("type")||changed.has("min")||changed.has("max")||changed.has("step")||changed.has("minlength")||changed.has("maxlength")||changed.has("pattern")||changed.has("readonly")){this.updateValidity()}}renderControls(){return nothing}get inputWrapperParts(){return"base form-control-input input-wrapper"}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||this.hint.length>0||this.helpText.length>0||this.withHint;const hasError=this.slotPresence.has("error")||this.errorText.length>0;const hasLabel=this.slotPresence.has("label")||this.label.length>0||this.withLabel;const describedBy=[hasError?"input-error":"",hasHint?"input-hint":""].filter(Boolean).join(" ");const isPassword=this.type==="password";const showPasswordToggle=isPassword&&this.passwordToggle;const nativeType=isPassword&&this.passwordVisible?"text":this.type;const canClear=(this.clearable||this.withClear)&&(this.type==="text"||this.type==="search")&&this.value!=="";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--)if(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{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{closeIcon,eyeIcon,eyeOffIcon}from"../../../internal/icons.js";import{styles}from"./input.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{finiteCount}from"../../../internal/numbers.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_collapse,LYRA_DEFAULT_date,LYRA_DEFAULT_details,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_hidePassword,LYRA_DEFAULT_inputLabel,LYRA_DEFAULT_open,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_showPassword,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const LENGTH_CONSTRAINED_TYPES=["text","password","email","search","tel","url"];class LyraInputBase extends LyraElement{}class LyraInput extends FormAssociated(LyraInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,collapse:LYRA_DEFAULT_collapse,date:LYRA_DEFAULT_date,details:LYRA_DEFAULT_details,fieldRequired:LYRA_DEFAULT_fieldRequired,hidePassword:LYRA_DEFAULT_hidePassword,inputLabel:LYRA_DEFAULT_inputLabel,open:LYRA_DEFAULT_open,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,showPassword:LYRA_DEFAULT_showPassword,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){super.value=next??""}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next);this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}get inputId(){return this.id||"input"}constructor(){super();this.type="text";this.size="m";this.appearance="outlined";this.filled=false;this.pill=false;this.placeholder="";this.clearable=false;this.withClear=false;this.readonly=false;this.label="";this.hint="";this.helpText="";this.withLabel=false;this.withHint=false;this.errorText="";this.accessibleLabel=null;this.autocomplete="";this.title="";this.autofocus=false;this.spellcheck=true;this.autocapitalize="";this.autocorrectValue=true;this.inputMode="";this.enterKeyHint="";this.passwordToggle=false;this.passwordVisible=false;this.withoutSpinButtons=false;this.noSpinButtons=false;this.touched=false;this.slotPresence=new SlotPresenceController(this);this.onInput=event=>{if(!this.inputEl)return;this.value=this.inputEl.value;relayNativeEvent(this,event);this.emit("lr-input",{value:this.value})};this.onChange=event=>{if(!this.inputEl)return;this.value=this.inputEl.value;relayNativeEvent(this,event);this.emit("lr-change",{value:this.value})};this.onFocus=event=>{relayNativeEvent(this,event);this.emit("lr-focus")};this.onBlur=event=>{if(!this.effectiveDisabled)this.touched=true;relayNativeEvent(this,event);this.emit("lr-blur")};this.onKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;submitOnEnter(this,event)};this.onTogglePasswordVisible=()=>{this.passwordVisible=!this.passwordVisible};this.onClear=()=>{if(this.effectiveDisabled||this.readonly||this.value==="")return;this.value="";if(this.inputEl)this.inputEl.value="";dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"});this.emit("lr-input",{value:this.value});dispatchNativeEvent(this,"change");this.emit("lr-change",{value:this.value});this.emit("lr-clear");this.inputEl?.focus()};this.addEventListener("invalid",()=>{this.touched=true})}formResetCallback(){super.formResetCallback();this.touched=false}get input(){return this.inputEl??null}click(){if(!this.effectiveDisabled)this.inputEl?.click()}focus(options){if(!this.effectiveDisabled)this.inputEl?.focus(options)}blur(){this.inputEl?.blur()}select(){this.inputEl?.select()}get valueAsDate(){const native=this.inputEl;if(!native)return null;if(native.value!==this.value)native.value=this.value;return native.valueAsDate}set valueAsDate(next){const native=this.inputEl;if(!native)return;native.valueAsDate=next;this.value=native.value}get valueAsNumber(){const native=this.inputEl;if(!native)return Number.NaN;if(native.value!==this.value)native.value=this.value;return native.valueAsNumber}set valueAsNumber(next){const native=this.inputEl;if(!native)return;native.valueAsNumber=next;this.value=native.value}showPicker(){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;if(!("showPicker"in HTMLInputElement.prototype))return;try{native.showPicker()}catch{}}stepUp(steps=1){this.applyStep("up",steps)}stepDown(steps=1){this.applyStep("down",steps)}applyStep(direction,steps){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;const count=finiteCount(steps,1);if(count===0)return;try{if(direction==="up")native.stepUp(count);else native.stepDown(count)}catch{return}if(this.value!==native.value)this.value=native.value}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){if(this.inputEl)this.inputEl.selectionStart=value??0}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){if(this.inputEl)this.inputEl.selectionEnd=value??0}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;if(!input)return;if(start===void 0||end===void 0){input.setRangeText(replacement)}else{input.setRangeText(replacement,start,end,selectMode)}this.value=input.value}updateValidity(){const native=this.inputEl;if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(!native){if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:true},this.localize("fieldRequired"))}else{this[SET_ANCHORED_VALIDITY]({})}return}if(native.value!==this.value)native.value=this.value;const sanitizedAway=this.value!==""&&native.value==="";const v=native.validity;const own=LENGTH_CONSTRAINED_TYPES.includes(this.type)?lengthViolations(this.value,this.minlength,this.maxlength):{tooShort:false,tooLong:false};const tooShort=v.tooShort||own.tooShort;const tooLong=v.tooLong||own.tooLong;if(v.valid&&!tooShort&&!tooLong){if(sanitizedAway){this[SET_ANCHORED_VALIDITY]({badInput:true},this.localize("valueInvalid"));return}this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({valueMissing:v.valueMissing,typeMismatch:v.typeMismatch,rangeUnderflow:v.rangeUnderflow,rangeOverflow:v.rangeOverflow,stepMismatch:v.stepMismatch,tooShort,tooLong,patternMismatch:v.patternMismatch,badInput:v.badInput},native.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed);if(changed.has("value")){if(this.value==="")this.internals.states.add("blank");else this.internals.states.delete("blank")}if(changed.has("type")||changed.has("min")||changed.has("max")||changed.has("step")||changed.has("minlength")||changed.has("maxlength")||changed.has("pattern")||changed.has("readonly")){this.updateValidity()}}renderControls(){return nothing}get inputWrapperParts(){return"base form-control-input input-wrapper"}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||this.hint.length>0||this.helpText.length>0||this.withHint;const hasError=this.slotPresence.has("error")||this.errorText.length>0;const hasLabel=this.slotPresence.has("label")||this.label.length>0||this.withLabel;const describedBy=[hasError?"input-error":"",hasHint?"input-hint":""].filter(Boolean).join(" ");const isPassword=this.type==="password";const showPasswordToggle=isPassword&&this.passwordToggle;const nativeType=isPassword&&this.passwordVisible?"text":this.type;const canClear=(this.clearable||this.withClear)&&(this.type==="text"||this.type==="search")&&this.value!=="";return html`
       <div part="form-control">
-        <label part="form-control-label" for="input" ?hidden=${!hasLabel}>
+        <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
           <span part="label">${this.label}<slot name="label"></slot></span>
         </label>
         <div part=${this.inputWrapperParts}>
@@ -12,9 +12,10 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             <slot part="prefix" name="prefix"></slot>
           </span>
           <input
-            id="input"
+            id=${this.inputId}
             part="input"
             type=${nativeType}
+            name=${this.name||nothing}
             placeholder=${this.placeholder}
             title=${this.title||nothing}
             aria-label=${this.accessibleLabel||(hasLabel?nothing:this.placeholder||this.localize("inputLabel"))}

package/dist/components/forms/input/time-input.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-12rem);
   }
 
   [part~='form-control-label'] {

package/dist/components/layout/button-group/button-group.styles.js

@@ -5,15 +5,10 @@ import{css}from"lit";const styles=css`
        group's own allocated width (a sidebar, a split pane, a dialog) instead of the
        viewport's — a group can be narrow on a wide screen and vice versa. */
     container-type: inline-size;
-    /* Floors the host so a shrink-to-fit flex/grid parent (which gives inline-flex children a 0
-       basis, not their content size, absent an explicit width) can't collapse it to ~0 -- a group
-       with no explicit width must still render its buttons. NOTE: this can't be a content-based
-       keyword (fit-content/max-content/auto) -- container-type implies inline-size containment on
-       *this* box, and per the CSS Containment spec a size-contained box's content-dependent sizing
-       resolves as if it had no content at all (verified in Chromium: fit-content collapsed to the
-       same 0 this rule exists to prevent). Only a length/token floor survives containment, so this
-       reuses the hit-area floor already used as a "smallest a control should ever be" minimum
-       throughout the library instead of inventing a group-specific magic number. */
+    /* Size containment removes content-based intrinsic sizing. This compact fallback keeps an
+       unallocated group wide enough to lay out ordinary actions and lets its narrow query wrap
+       longer sets; the hit-area minimum remains the hard lower bound under tighter allocation. */
+    contain-intrinsic-inline-size: var(--lr-size-12rem);
     min-inline-size: var(--lr-icon-button-size);
     max-inline-size: 100%;
     vertical-align: middle;

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

@@ -3,6 +3,10 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
     container-type: inline-size;
+    /* Inline-size containment deliberately removes content-based intrinsic sizing. Supply the
+       centered/shrink-to-fit fallback that lets a standalone card remain visible while definite
+       allocations (grid tracks, percentages, explicit inline-size) continue to win normally. */
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part="base"] {
     position: relative;

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

@@ -3,6 +3,7 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part~="base"] {

package/dist/components/layout/control-group/control-group.styles.js

@@ -12,6 +12,7 @@ import{css}from"lit";const styles=css`
      responsive property. */
   :host([responsive]) {
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-12rem);
   }
 
   [part='base'] {

package/dist/components/layout/dashboard-grid/dashboard-grid.styles.js

@@ -5,6 +5,7 @@ import{css}from"lit";const styles=css`
        size (a dashboard-grid is commonly embedded in a panel of varying width, not the viewport)
        -- same convention as lr-button-group/lr-control-group's own container-query approach. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     min-inline-size: 0;
   }
 

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

@@ -10,6 +10,7 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     color: var(--lr-color-text);
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part~='page'] {

package/dist/components/media/lightbox/lightbox.styles.js

@@ -13,6 +13,7 @@ import{css}from"lit";const styles=css`
     inset: 0;
     z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal));
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     padding-block-start: max(var(--lr-space-l), var(--lr-safe-area-top));
     padding-block-end: max(var(--lr-space-l), var(--lr-safe-area-bottom));
     padding-inline-start: max(var(--lr-space-l), var(--lr-safe-area-inline-start));

package/dist/components/media/map/map-loader.d.ts

@@ -64,8 +64,8 @@ export interface MaplibreModule {
 /**
  * Lazily loads the optional peer dependency `maplibre-gl` once per page.
  * Resolves to `null` (with a one-time warning) if it isn't installed —
- * mirrors `<lr-flag>`'s peer-dependency pattern. Consumers must separately
- * import `maplibre-gl/dist/maplibre-gl.css`. MapLibre v6 consumers also configure its module-worker
- * URL for their bundler once they install the peer; v5's standard build includes its worker.
+ * mirrors `<lr-flag>`'s peer-dependency pattern. `<lr-map>` supplies the styles for MapLibre's
+ * generated DOM inside its shadow root. MapLibre v6 consumers also configure its module-worker URL
+ * for their bundler once they install the peer; v5's standard build includes its worker.
  */
 export declare function loadMaplibre(): Promise<MaplibreModule | null>;

package/dist/components/media/map/map-loader.js

@@ -1 +1 @@
-import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const MAP_METHODS=["getCenter","getZoom","setCenter","setZoom","resize","remove","on","once","setStyle","getSource","addSource","removeSource","getLayer","addLayer","removeLayer","setPaintProperty","queryRenderedFeatures"];const MARKER_METHODS=["setLngLat","setPopup","getPopup","addTo","remove"];const POPUP_METHODS=["setHTML","setText"];function isObjectLike(value){return(typeof value==="object"||typeof value==="function")&&value!==null}function isConstructor(value){if(typeof value!=="function")return false;try{Reflect.construct(Object,[],value);return true}catch{return false}}function missingConstructorCapability(module,name,methods){const Constructor=module[name];if(!isConstructor(Constructor))return name;const prototype=Constructor.prototype;if(!isObjectLike(prototype))return`${name}.prototype`;for(const method of methods){if(typeof prototype[method]!=="function")return`${name}.prototype.${method}`}return void 0}function missingMaplibreCapability(candidate){if(!isObjectLike(candidate))return"module namespace";return missingConstructorCapability(candidate,"Map",MAP_METHODS)??missingConstructorCapability(candidate,"Marker",MARKER_METHODS)??missingConstructorCapability(candidate,"Popup",POPUP_METHODS)}function isMaplibreModule(candidate){return missingMaplibreCapability(candidate)===void 0}function resolveMaplibreModule(value){const module=resolveOptionalPeerCapability(value,isMaplibreModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value);const missing=missingMaplibreCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`maplibre-gl\`: missing or invalid \`${missing}\` capability.`)}let maplibre;async function loadMaplibreModule(importer=()=>import("maplibre-gl")){try{return resolveMaplibreModule(await importer())}catch(error){console.warn("<lr-map> needs the optional peer dependency `maplibre-gl` \u2014 install it with `pnpm add maplibre-gl` and import `maplibre-gl/dist/maplibre-gl.css` once in your app.",error);return null}}function loadMaplibre(){if(!maplibre){maplibre=loadMaplibreModule()}return maplibre}export{loadMaplibre,loadMaplibreModule};
+import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const MAP_METHODS=["getCenter","getZoom","setCenter","setZoom","resize","remove","on","once","setStyle","getSource","addSource","removeSource","getLayer","addLayer","removeLayer","setPaintProperty","queryRenderedFeatures"];const MARKER_METHODS=["setLngLat","setPopup","getPopup","addTo","remove"];const POPUP_METHODS=["setHTML","setText"];function isObjectLike(value){return(typeof value==="object"||typeof value==="function")&&value!==null}function isConstructor(value){if(typeof value!=="function")return false;try{Reflect.construct(Object,[],value);return true}catch{return false}}function missingConstructorCapability(module,name,methods){const Constructor=module[name];if(!isConstructor(Constructor))return name;const prototype=Constructor.prototype;if(!isObjectLike(prototype))return`${name}.prototype`;for(const method of methods){if(typeof prototype[method]!=="function")return`${name}.prototype.${method}`}return void 0}function missingMaplibreCapability(candidate){if(!isObjectLike(candidate))return"module namespace";return missingConstructorCapability(candidate,"Map",MAP_METHODS)??missingConstructorCapability(candidate,"Marker",MARKER_METHODS)??missingConstructorCapability(candidate,"Popup",POPUP_METHODS)}function isMaplibreModule(candidate){return missingMaplibreCapability(candidate)===void 0}function resolveMaplibreModule(value){const module=resolveOptionalPeerCapability(value,isMaplibreModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value);const missing=missingMaplibreCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`maplibre-gl\`: missing or invalid \`${missing}\` capability.`)}let maplibre;async function loadMaplibreModule(importer=()=>import("maplibre-gl")){try{return resolveMaplibreModule(await importer())}catch(error){console.warn("<lr-map> needs the optional peer dependency `maplibre-gl` \u2014 install it with `pnpm add maplibre-gl`.",error);return null}}function loadMaplibre(){if(!maplibre){maplibre=loadMaplibreModule()}return maplibre}export{loadMaplibre,loadMaplibreModule};

package/dist/components/media/map/map.class.d.ts

@@ -88,8 +88,9 @@ export interface LyraMapEventMap {
  * independent of `choropleth`'s field/stops color-interpolation), plus a peer-neutral
  * `map` getter for common imperative operations. Its runtime value is the underlying MapLibre
  * map, while its declaration stays independent of the optional peer. Requires `maplibre-gl`
- * v5 or v6 (consumers also import its CSS). MapLibre v6 is ESM-only, requires WebGL2, and needs
- * its module-worker URL configured once; v5's standard build includes its worker.
+ * v5 or v6; the component styles MapLibre's generated canvas, marker, popup, and control DOM
+ * inside its shadow root. MapLibre v6 is ESM-only, requires WebGL2, and needs its module-worker
+ * URL configured once; v5's standard build includes its worker.
  *
  * The underlying `maplibregl.Map` — and the WebGL context it opens — isn't
  * constructed until this element is first visible in the viewport (tracked