@aceshooting/lyra-ui 9.1.0 → 10.0.1

package/dist/components/forms/button/button.styles.js

@@ -3,66 +3,30 @@ import{css}from"lit";const styles=css`
     display: inline-block;
     min-inline-size: 0;
     max-inline-size: 100%;
-    /* A host width is meaningful for the public component, so the native
-       button follows it. The variable keeps the contract opt-out-able for
-       compact inline compositions. */
     --_lr-button-width: 100%;
-    /* The whole size scale now comes from the shared form-control ladder (internal/sizes.styles.ts,
-       pulled in ahead of this sheet by button.class.ts), so a button and an lr-input/lr-select/
-       lr-combobox/lr-date-input of the same tier are the same height BY CONSTRUCTION rather than by
-       two hand-maintained lists agreeing -- which is exactly how they drifted apart before 8.0.0.
-       These per-tier names survive as the button's own override points; only their values moved. */
     --_lr-button-size-2xs: var(--lr-form-control-height-2xs);
     --_lr-button-size-xs: var(--lr-form-control-height-xs);
     --_lr-button-size-s: var(--lr-form-control-height-s);
     --_lr-button-size-m: var(--lr-form-control-height-m);
     --_lr-button-size-l: var(--lr-form-control-height-l);
     --_lr-button-size-xl: var(--lr-form-control-height-xl);
-    /* Geometry knobs, each pointed at the ladder's active-tier value. No per-tier rule declares a
-       CSS property on [part~='base'], so a consumer can still retune a tier (e.g. pin a size="s"
-       button into a compact toolbar row) without a ::part(base) rule. The ladder matches BOTH
-       spellings of every tier in one selector list, so size="small" is size="s" for free. */
     --_lr-button-padding-block: var(--lr-form-control-padding-block);
     --_lr-button-padding-inline: var(--lr-form-control-padding-inline);
     --_lr-button-font-size: var(--lr-form-control-font-size);
     --_lr-button-min-height: var(--lr-button-size-m, var(--_lr-button-size-m));
     --_lr-button-gap: var(--lr-form-control-gap);
     --_lr-button-radius: var(--lr-form-control-radius);
-    /* Relative to the button's own font-size, so the with-caret chevron tracks every size tier
-       without a per-tier rule -- same sizing stance as lr-attachment-trigger's expand-icon. */
     --_lr-button-caret-size: var(--lr-size-0-75em);
-    /* The nine generic colour slots below are re-pointed at the active variant's row of the
-       semantic grid by internal/variants.styles.ts, so this component needs no :host([variant='…'])
-       block of its own -- it carried five near-identical ones before 8.0.0.
-       "filled" reads the QUIET tier and "accent" the LOUD one: they used to share the same loud
-       token for every chromatic variant (rendering identically) while neutral's "filled" was the
-       page surface, i.e. no fill at all. */
     --_lr-button-accent: var(--lr-color-fill-loud);
     --_lr-button-fill: var(--lr-color-fill-quiet);
     --_lr-button-on-fill: var(--lr-color-on-quiet);
     --_lr-button-border: var(--lr-color-border-normal);
     --_lr-button-outlined-border: var(--lr-color-border-strong);
-    /* Transparent by default (byte-identical to the previous hardcoded "background: transparent").
-       Set it to tint an outlined button -- e.g. a faint surface wash behind the outline -- without
-       reaching for a ::part(base) rule. Like --lr-button-quiet-*, it is deliberately NOT swapped
-       per "variant": an outlined button's fill is a surface decision, not a semantic tone. */
     --_lr-button-outlined-fill: transparent;
     --_lr-button-quiet-border: var(--lr-color-border);
     --_lr-button-quiet-text: var(--lr-color-text-quiet);
     --_lr-button-accent-fill: var(--lr-color-fill-loud);
     --_lr-button-accent-on-fill: var(--lr-color-on-loud);
-    /* Hover and press feedback, as a colour MIX rather than the filter: brightness() multiplier
-       this carried before 8.0.0. A filter multiplies every channel, so it lightened a dark button
-       and darkened a light one only by luck, did nothing whatsoever to a pure white or pure black
-       fill, and -- because filter applies to the whole subtree -- dimmed the label and the icons
-       along with the box. Mixing toward --lr-color-mix-partner (which follows the text colour)
-       always moves, and always in the direction the surface needs.
-       --lr-button-hover-base is the colour the two mixes move AWAY from: the fill the active
-       appearance actually paints. The chrome-less tiers (outlined, plain, quiet, link) paint no
-       fill of their own, so they mix from the page surface they sit on -- quiet's hover used to BE
-       var(--lr-color-surface), i.e. the page background itself, so hovering a quiet button on a
-       default page changed nothing at all. A consumer who tints --lr-button-outlined-fill should
-       point this at the same colour so the pair keeps moving together. */
     --_lr-button-hover-base: var(--lr-color-surface);
     --_lr-button-hover-background: color-mix(
       in oklab,
@@ -75,8 +39,6 @@ import{css}from"lit";const styles=css`
       var(--lr-color-mix-partner) var(--lr-color-mix-active)
     );
   }
-  /* Each painted tier names its own fill as the mix base, so retuning --lr-button-fill or
-     --lr-button-accent-fill retunes that tier's hover and press with it. */
   :host([appearance="filled"]),
   :host([appearance="filled-outlined"]) {
     --_lr-button-hover-base: var(--lr-button-fill, var(--_lr-button-fill));
@@ -87,26 +49,13 @@ import{css}from"lit";const styles=css`
       var(--_lr-button-accent-fill)
     );
   }
-  /* Shoelace's boolean outline surface is an additive alias. It never rewrites appearance, so
-     removing it restores the exact Lyra treatment the author selected. */
   :host([outline]) {
     --_lr-button-hover-base: var(--lr-color-surface);
   }
-  /* The one place a variant still needs naming. The four chromatic variants use their loud fill as
-     the chrome-less foreground -- brand text on the page surface IS the brand colour. Neutral's
-     loud fill is a mid grey chosen to carry LIGHT text, so reusing it as dark-on-surface text would
-     wash out every plain, outlined and link button and collapse the deliberate gap between
-     appearance="plain" and appearance="quiet". Neutral keeps the body text colour instead. The
-     :not([variant]) arm covers a host whose reflected attribute was removed by hand. */
   :host(:not([variant])),
   :host([variant="neutral"]) {
     --_lr-button-accent: var(--lr-color-text);
   }
-  /* Fully rounded ends. Changing the private radius default rather than declaring border-radius
-     on [part~='base'] keeps one corner-radius declaration in the sheet, lets an inherited or
-     direct public radius win, and leaves
-     appearance="link"'s own literal "border-radius: 0" winning (a pill inline link would be a
-     button-shaped box, which is exactly what that appearance exists to avoid). */
   :host([pill]) {
     --_lr-button-radius: var(--lr-radius-pill);
   }
@@ -120,13 +69,6 @@ import{css}from"lit";const styles=css`
     inline-size: var(--lr-button-width, var(--_lr-button-width));
     min-inline-size: 0;
     max-inline-size: 100%;
-    /* --lr-button-height is deliberately left UNDECLARED on :host, so both var()s below take their
-       fallback arm: a floor at the active tier's --lr-button-min-height and an auto height --
-       byte-identical to the behaviour before this property existed. Setting it (e.g. to pin the
-       button to a fixed toolbar row height) both floors and caps the button. Declaring it as
-       "auto" on :host would break exactly this: a declared "auto" is a *defined* value, so the
-       fallback arm would never fire and every tier's floor would become dead code (lr-select
-       documents its own instance of that trap in select.styles.ts). */
     min-block-size: var(
       --lr-button-height,
       var(--lr-button-min-height, var(--_lr-button-min-height))
@@ -148,11 +90,8 @@ import{css}from"lit";const styles=css`
       var(--lr-button-border, var(--_lr-button-border));
     font: inherit;
     font-weight: var(--lr-font-weight-semibold);
-    /* After the "font" shorthand, which would otherwise reset font-size back to the inherited one. */
     font-size: var(--lr-button-font-size, var(--_lr-button-font-size));
     cursor: pointer;
-    /* Undeclared by default (byte-identical to today's absent box-shadow); set it to add a
-       drop shadow (e.g. an elevated/floating action button) without a ::part(base) rule. */
     box-shadow: var(--lr-button-shadow, none);
   }
   :host([appearance="filled"]) [part~="base"] {
@@ -180,10 +119,6 @@ import{css}from"lit";const styles=css`
       var(--_lr-button-outlined-border)
     );
   }
-  /* The filled fill and foreground, but carrying the outlined tier's own border color instead of
-     the variant-tinted --lr-button-border -- a filled button whose edge still reads against a
-     same-toned surface. Both halves stay on their existing knobs, so retuning either tier retunes
-     this one with it. */
   :host([appearance="filled-outlined"]) [part~="base"] {
     background: var(--lr-button-fill, var(--_lr-button-fill));
     color: var(--lr-button-on-fill, var(--_lr-button-on-fill));
@@ -202,14 +137,6 @@ import{css}from"lit";const styles=css`
     color: var(--lr-button-quiet-text, var(--_lr-button-quiet-text));
     border-color: var(--lr-button-quiet-border, var(--_lr-button-quiet-border));
   }
-  /* Two selectors for one state, because the two render paths carry it differently. The native
-     <button> path matches :disabled (from its own disabled attribute OR a fieldset cascade). The
-     anchor path never can -- an <a> is not a form control, so :disabled cannot match it whatever
-     aria-disabled says -- and the disabled-link path renders an href-less,
-     tabindex="-1", aria-disabled="true" anchor. Keying the second arm off the attribute the anchor
-     DOES carry is what keeps the two modes looking the same; without it a disabled link rendered
-     fully opaque with a pointer cursor, i.e. exactly like a working link that silently does
-     nothing. Every :not(:disabled) below excludes the same attribute for the same reason. */
   [part~="base"]:disabled,
   [part~="base"][aria-disabled="true"] {
     opacity: var(--lr-opacity-disabled);
@@ -219,9 +146,6 @@ import{css}from"lit";const styles=css`
     transition: background-color var(--lr-transition-fast),
       color var(--lr-transition-fast), transform var(--lr-transition-fast);
   }
-  /* One hover and one press rule for every appearance -- what moves per tier is the mix BASE
-     declared above, not the rule. Both out-specify each :host([appearance='…']) [part~='base']
-     block, so no tier silently loses its pointer feedback. */
   [part~="base"]:not(:disabled, [aria-disabled="true"]):hover {
     background: var(
       --lr-button-hover-background,
@@ -247,7 +171,7 @@ import{css}from"lit";const styles=css`
   [part~="start"],
   [part~="end"] {
     display: inline-flex;
-    flex: 0 1 40%;
+    flex: 0 0 auto;
     min-inline-size: 0;
     max-inline-size: 40%;
     align-items: center;
@@ -262,18 +186,10 @@ import{css}from"lit";const styles=css`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  /* When the matching slot has no assigned content, button.class.ts stamps the hidden attribute
-     on the wrapper (a bare slot is an element child, so the old :empty rule could never match).
-     This higher-specificity selector wins over the display: inline-flex above so the empty
-     wrapper collapses and stops contributing a dead --lr-button-gap of inline space -- mirrors
-     input.styles.ts's identical [part='start'][hidden]/[part='end'][hidden] rule. */
   [part~="start"][hidden],
   [part~="end"][hidden] {
     display: none;
   }
-  /* A declared circle and an automatically detected icon-only label both use a square control.
-     circle additionally takes the pill radius above; an icon-only WA button keeps its selected
-     appearance's ordinary radius. */
   :host([circle]) [part~="base"],
   [part~="base"][data-icon-button] {
     inline-size: var(
@@ -288,9 +204,6 @@ import{css}from"lit";const styles=css`
       var(--_lr-button-padding-block)
     );
   }
-  /* Decorative dropdown chevron. The shared chevronIcon() points right, so the glyph -- not the
-     wrapping part -- is rotated to point down, matching lr-select's expand-icon; a down caret is
-     direction-neutral, so nothing here mirrors under RTL. */
   [part="caret"] {
     display: inline-flex;
     flex: 0 0 auto;
@@ -300,13 +213,6 @@ import{css}from"lit";const styles=css`
   [part="caret"] svg {
     transform: rotate(90deg);
   }
-  /* Padding and font-size per tier come straight from the ladder (see the :host block above), so
-     nothing here restates a scale. These five rules exist only so the button's own per-tier
-     --lr-button-size-* names stay LIVE override points rather than becoming decorative aliases:
-     deleting them would leave a documented custom property that silently does nothing, which is
-     worse than removing it outright. Both spellings of each aliased tier are matched, exactly as
-     the ladder does, so size="small" can never take the s tier's padding with the m tier's floor.
-     The "m"/"medium" tier needs no rule -- :host already carries that private default. */
   :host([size="2xs"]) {
     --_lr-button-min-height: var(
       --lr-button-size-2xs,
@@ -333,13 +239,6 @@ import{css}from"lit";const styles=css`
       var(--_lr-button-size-xl)
     );
   }
-  /* A true inline-link appearance: zero chrome (no padding, border, radius, or min-height floor),
-     underlined, colored from the same accent token "plain" uses, and inheriting the ambient font
-     so it flows within surrounding text. Kept after the size rules -- and it must stay there: it
-     resets padding/font with literals rather than the --lr-button-padding-* and
-     --lr-button-font-size knobs, so it wins over any tier's (and any consumer's) geometry, and it
-     zeroes both min-block-size and block-size so a pinned --lr-button-height cannot give an inline
-     link a button-shaped box either. */
   :host([appearance="link"]) [part~="base"] {
     inline-size: auto;
     padding: 0;
@@ -353,10 +252,6 @@ import{css}from"lit";const styles=css`
     text-decoration: underline;
     text-underline-offset: var(--lr-size-0-15rem);
   }
-  /* The one appearance whose pointer feedback is NOT a fill. A link has zero chrome and zero
-     padding, so the shared hover/press background would paint a tight rectangle around bare
-     inline text in the middle of a paragraph -- exactly the button-shaped box this appearance
-     exists to avoid. It moves its text by the same two mix tokens instead. */
   :host([appearance="link"])
     [part~="base"]:not(:disabled, [aria-disabled="true"]):hover {
     background: transparent;

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

@@ -79,6 +79,9 @@ export interface LyraCheckboxEventMap {
  * @cssstate disabled - Matches while disabled directly or by an ancestor fieldset.
  * @cssstate indeterminate - Matches while the visual mixed state is true.
  * @csspart form-control - The outer wrapper around the checkbox, error, and hint.
+ * @csspart row - The row wrapping the checkbox owner and the label as siblings. This is the node
+ *  to size or align when laying out a column of checkboxes; `base`/`checkbox` is only the control
+ *  box inside it, so its inline size tracks the box, not the row.
  * @csspart base - Compatibility name for the interactive control; use `checkbox`.
  * @csspart checkbox - The interactive `role="checkbox"` owner around the box. It is the same node
  *   as `base`, retains the shared `--lr-icon-button-size` minimum target at every size tier, and

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

@@ -28,7 +28,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
     ><line x1="5" y1="12" x2="19" y2="12"></line></svg>
   `}class LyraCheckbox extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxRequired:LYRA_DEFAULT_checkboxRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked")]}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.formAssociated=!0}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},checked:{attribute:!1,noAccessor:!0},defaultChecked:{attribute:"checked",type:Boolean,reflect:!0,useDefault:!0,noAccessor:!0},indeterminate:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},required:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},value:{reflect:!0,noAccessor:!0}}}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled||this._groupDisabled}get checked(){return this._checked}set checked(next){const old=this._checked;this.settingDefaultChecked||(this._checkedDirty=!0),this._checked=!!next,this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("checked",old)}get defaultChecked(){return this._defaultChecked}set defaultChecked(next){if(this.reflectingDefaultChecked)return;const old=this._defaultChecked;this._defaultChecked=!!next,this.reflectingDefaultChecked=!0;try{this.toggleAttribute("checked",this._defaultChecked)}finally{this.reflectingDefaultChecked=!1}this._checkedDirty||this.restoreCheckedFromDefault(),this.requestUpdate("defaultChecked",old)}get indeterminate(){return this._indeterminate}set indeterminate(next){const old=this._indeterminate;this._indeterminate=!!next,this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("indeterminate",old)}notifyOwningGroup(){this.closest?.("lr-checkbox-group")?.notifyCheckboxStateChange?.(this)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.updateValidity(),this.requestUpdate("disabled",old)}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 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 value(){return this._value}set value(next){const old=this._value;this._value=next??"on",next==null?this.hasAttribute("value")&&this.removeAttribute("value"):this.getAttribute("value")!==this._value&&this.setAttribute("value",this._value),this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("value",old,{reflect:!1})}constructor(){super(),this.size="m",this.hint="",this.helpText="",this.errorText="",this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasHelpTextSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.hasInteracted=!1,this.hasSyncedDescribedByElements=!1,this._defaultChecked=!1,this._checkedDirty=!1,this.settingDefaultChecked=!1,this.reflectingDefaultChecked=!1,this._fieldsetDisabled=!1,this._groupDisabled=!1,this._name="",this._checked=!1,this._indeterminate=!1,this._disabled=!1,this._required=!1,this._value="on",this.onClick=event=>{const owner=this[VALIDITY_ANCHOR]();for(const target of event.composedPath()){if(target===event.currentTarget)break;if(target&&typeof target=="object"&&target.nodeType===1&&target!==owner&&isActionableElement(target))return}this.toggle()},this.onKeyDown=e=>{this.effectiveDisabled||e.repeat||(e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),this.toggle())},this.onSlotChange=event=>this.handleLabelSlotChange(event),this.onHintSlotChange=event=>{this.hasHintSlot=event.target.assignedElements({flatten:!0}).length>0},this.onHelpTextSlotChange=event=>{this.hasHelpTextSlot=event.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=event=>{this.hasErrorSlot=event.target.assignedElements({flatten:!0}).length>0},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onBlur=event=>{!this.effectiveDisabled&&!this.matches(":disabled")&&(this.touched=!0,this.hasInteracted=!0,this.reflectInvalid()),relayNativeEvent(this,event)},this.onFocus=event=>{relayNativeEvent(this,event)},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),this.syncFormState()}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(".checkbox-owner")??null}connectedCallback(){super.connectedCallback(),this.updateValidity();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.labelObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.recomputeHasLabelSlot()}):void 0,this.addEventListener("slotchange",this.onLabelSlotChange),this.bindLabelObserverTargets(),this.hasUpdated?(this.recomputeHasLabelSlot(),this.refreshNamedSlotState()):this.seedFirstRenderState(()=>{this.recomputeHasLabelSlot(),this.refreshNamedSlotState()})}refreshNamedSlotState(){const children=this.children;if(!children)return;const elements=Array.from(children);this.hasHintSlot=elements.some(element=>element.getAttribute("slot")==="hint"),this.hasHelpTextSlot=elements.some(element=>element.getAttribute("slot")==="help-text"),this.hasErrorSlot=elements.some(element=>element.getAttribute("slot")==="error")}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed)}updated(changed){super.updated(changed);const describedBy=this.getAttribute("aria-describedby"),hint=this.renderRoot.querySelector("#checkbox-hint"),error=this.renderRoot.querySelector("#checkbox-error");if(!describedBy&&!this.hasSyncedDescribedByElements&&(!hint||hint.hidden)&&(!error||error.hidden))return;const control=this.renderRoot.querySelector('[part~="base"]')??void 0;if(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,control,describedBy),control&&"ariaDescribedByElements"in control){const reflected=control,current=reflected.ariaDescribedByElements??[],internal=[error,hint].filter(element=>!!(element&&!element.hidden));reflected.ariaDescribedByElements=[...current.filter(element=>element!==hint&&element!==error),...internal]}}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.checked?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxRequired")):this.validityController.setValidity({}),this.reflectInvalid()}reflectInvalid(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred}),setCustomState(this.internals,"checked",this.checked),setCustomState(this.internals,"indeterminate",this.indeterminate),setCustomState(this.internals,"disabled",this.effectiveDisabled)}syncFormState(){const state2=`${this.checked?"checked":"unchecked"}${this.indeterminate?"/indeterminate":""}`;this.internals.setFormValue(this.checked?this.value:null,state2),this.updateValidity()}formResetCallback(){this.restoreCheckedFromDefault(),this.touched=!1,this.hasInteracted=!1,this.reflectInvalid()}formStateRestoreCallback(state2,reason){const oldChecked=this._checked,oldIndeterminate=this._indeterminate;this._checked=state2==="checked"||state2==="checked/indeterminate",this._checkedDirty=!0,this._indeterminate=state2==="checked/indeterminate"||state2==="unchecked/indeterminate",this.syncFormState(),this.requestUpdate("checked",oldChecked),this.requestUpdate("indeterminate",oldIndeterminate)}resetFromGroup(){this.restoreCheckedFromDefault()}restoreCheckedFromDefault(){this.settingDefaultChecked=!0;try{this.checked=this._defaultChecked}finally{this.settingDefaultChecked=!1}this._checkedDirty=!1}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.updateValidity(),this.requestUpdate()}setGroupDisabled(value){this._groupDisabled!==value&&(this._groupDisabled=value,this.updateValidity(),this.requestUpdate())}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.reflectInvalid(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectInvalid(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}click(){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}toggle(){this.effectiveDisabled||(this.hasInteracted=!0,this.checked=!this.checked,this.indeterminate=!1,dispatchNativeEvent(this,"input"),this.emit("lr-input",{checked:this.checked}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:this.checked}))}isDefaultLabelNode(node){if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName===null||slotName===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode===this&&this.isDefaultLabelNode(top)})}observeLabelNode(node){if(this.labelObserver){if(node.nodeType===3){this.labelObserver.observe(node,{characterData:!0});return}node.nodeType===1&&this.labelObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","class","hidden","inert","slot","style"],childList:!0,characterData:!0,subtree:!0})}}bindLabelObserverTargets(){if(this.labelObserver){this.labelObserver.disconnect(),this.observeLabelNode(this);for(const slot of this.labelForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))this.observeLabelNode(assigned)}}handleLabelSlotChange(event){const target=event.target;target?.nodeType!==1||target.localName!=="slot"||target.getRootNode()!==this.renderRoot&&!this.labelForwardingSlots().includes(target)||(this.bindLabelObserverTargets(),this.recomputeHasLabelSlot())}recomputeHasLabelSlot(){const renderRoot=this.renderRoot,childNodes=this.childNodes;if(!renderRoot||!childNodes)return;const slot=renderRoot.querySelector("slot:not([name])"),nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(childNodes).filter(node=>this.isDefaultLabelNode(node)).flatMap(node=>{if(node.nodeType!==1||node.localName!=="slot")return[node];const forwardingSlot=node;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)});this.hasLabelSlot=hasRealContent(nodes)}render(){const mixed=this.indeterminate,hasHint=this.hasHintSlot||this.hasHelpTextSlot||!!(this.hint||this.helpText),hasError=this.hasErrorSlot||this.errorText.length>0,controlParts=["box","control",this.checked?"checked control--checked":"",mixed?"indeterminate control--indeterminate":""].filter(Boolean).join(" "),describedBy=[this.getAttribute("aria-describedby")??"",hasError?"checkbox-error":"",hasHint?"checkbox-hint":""].filter(Boolean).join(" "),invalid=hasError||this.touched&&!this.internals.validity.valid;return html`
       <div part="form-control">
-        <span class="checkbox-layout" @click=${this.onClick}>
+        <span class="checkbox-layout" part="row" @click=${this.onClick}>
           <span
             class="checkbox-owner"
             part="base checkbox"

package/dist/components/forms/checkbox/checkbox.styles.js

@@ -1,21 +1,10 @@
 import{css}from"lit";const styles=css`
   :host {
-    /* The box tracks the shared size ladder (internal/sizes.styles.ts): 70% of the tier's control
-       height, so the checkbox lines up with an lr-input/lr-select/lr-button of the same size
-       instead of carrying a scale of its own. At the default "m" tier this resolves to exactly the
-       1.75rem the control shipped with before it had a size at all, and the
-       --lr-icon-button-size cap is kept so a consumer compacting that theme token still compacts
-       this control with it. */
     --_lr-checkbox-box-size: min(
       var(--lr-icon-button-size),
       calc(var(--lr-form-control-height) * 0.7)
     );
     display: inline-block;
-    /* Private default for the public label-indent hook. It uses the same two terms as the layout
-       below: the box's floor plus the label gap. A consumer can override the public hook on an
-       ancestor or directly on the checkbox. It does not reach a sibling node in the consumer's
-       tree, because custom properties inherit down, not sideways; a sibling <p> can compute the
-       same formula from --lr-theme-icon-button-size and --lr-theme-space-s. */
     --_lr-checkbox-label-indent: calc(
       var(--lr-checkbox-box-size, var(--_lr-checkbox-box-size)) +
         var(--lr-space-s)
@@ -24,9 +13,6 @@ import{css}from"lit";const styles=css`
   .checkbox-layout {
     display: inline-flex;
     align-items: center;
-    /* Derived from the published indent rather than repeating --lr-space-s, so the advertised
-       value and the rendered label offset cannot drift: the label always starts exactly
-       --lr-checkbox-label-indent from the base's inline start. Resolves to --lr-space-s by default. */
     gap: 0;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
@@ -53,16 +39,8 @@ import{css}from"lit";const styles=css`
     justify-content: center;
     flex: 0 0 auto;
     box-sizing: border-box;
-    /* Matches the inline icon-affordance sizing convention used by
-       lr-combobox's clear-button / lr-select's toggle
-       (--lr-icon-button-size capped at the tier's own share of the control
-       height) — a real touch target without ballooning to the full 2.5rem
-       meant for standalone icon-only buttons. */
     min-inline-size: var(--lr-checkbox-box-size, var(--_lr-checkbox-box-size));
     min-block-size: var(--lr-checkbox-box-size, var(--_lr-checkbox-box-size));
-    /* The glyph is drawn at 1em, so the box owns the font size that scales it. Pinning it to the
-       ladder rather than letting it inherit keeps the checkmark proportional to the box at every
-       tier; at "m" it resolves to the same 1rem the surrounding text carries by default. */
     font-size: var(--lr-form-control-font-size);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: calc(var(--lr-form-control-radius) * 0.6);
@@ -74,11 +52,6 @@ import{css}from"lit";const styles=css`
   :host(:not(:disabled)) .checkbox-layout:hover [part~="box"] {
     border-color: var(--lr-checkbox-hover-border, var(--lr-color-brand));
   }
-  /* Pressed. Expressed as a ring around the box rather than as a fill, because the box's own fill
-     is the state readout: it is the page surface while unchecked and the brand while checked, and
-     tinting it under the thumb would either wash out the checkmark or read as a half-toggled box.
-     A ring is unambiguous in both states, and is visibly more than the hover's border-colour step
-     -- same soft-ring pressed vocabulary <lr-slider>'s thumb uses. */
   :host(:not(:disabled)) .checkbox-layout:active [part~="box"] {
     border-color: var(--lr-checkbox-active-border, var(--lr-color-brand));
     box-shadow: 0 0 0 var(--lr-border-width-medium)
@@ -86,17 +59,9 @@ import{css}from"lit";const styles=css`
   }
   [part~="checked"],
   [part~="indeterminate"] {
-    /* Component-scoped indirection (mirrors lr-source-picker's identical
-       --lr-source-picker-checked-bg/-border pair) so a consumer can retint just this control's
-       checked/indeterminate fill without hijacking the shared --lr-color-brand token used across
-       the rest of the library. */
     background: var(--lr-checkbox-checked-bg, var(--lr-color-brand));
     border-color: var(--lr-checkbox-checked-border, var(--lr-color-brand));
   }
-  /* Gives a required-but-unmet checkbox a persistent visible affordance --
-     matching lr-combobox/lr-select's data-invalid styling hook --
-     beyond the transient native validation-bubble popup, which only shows
-     momentarily around reportValidity()/form submission. */
   :host([data-invalid]) [part~="box"] {
     border-color: var(--lr-checkbox-invalid-border, var(--lr-color-danger));
   }
@@ -107,10 +72,6 @@ import{css}from"lit";const styles=css`
     transform: scale(var(--checked-icon-scale, 1));
   }
 
-  /* No explicit "display" here (unlike e.g. lr-combobox's
-     [part='form-control-label']), so the UA stylesheet's default
-     "[hidden] { display: none }" rule needs no author-side override to
-     take effect when hasLabelSlot is false. */
   [part="label"] {
     margin-inline-start: calc(
       var(--lr-checkbox-label-indent, var(--_lr-checkbox-label-indent)) -

package/dist/components/forms/checkbox-group/checkbox-group.class.d.ts

@@ -153,6 +153,8 @@ export declare class LyraCheckboxGroup extends LyraElement<LyraCheckboxGroupEven
     private _value;
     private _warnedDuplicateValues;
     private pendingRestoreValues?;
+    /** A `value` assignment made before any checkbox child existed; applied on the next slotchange. */
+    private pendingValues?;
     private childObserver?;
     private childObserverDocument?;
     private childObserverGeneration;
@@ -163,9 +165,21 @@ export declare class LyraCheckboxGroup extends LyraElement<LyraCheckboxGroupEven
      *  rebuilds that `FormData` in the same tick -- mirrors `<lr-token-input>`'s identical `name` setter. */
     get name(): string;
     set name(next: string);
-    /** Readonly defensive snapshot of checked child values, in DOM order. Selection is controlled
-     * through each child's `checked` state. */
+    /** Checked child values, in DOM order. Reading returns a frozen defensive snapshot, so mutating
+     *  the returned array never changes the group -- assign a new array instead.
+     *
+     *  Assigning mirrors the array onto the owned checkboxes: a child whose `value` (defaulting to
+     *  `'on'`) appears in the array becomes checked, every other child becomes unchecked, and
+     *  duplicate entries check that many same-valued children. Assignment is controlled input, so it
+     *  emits no `lr-change`; only user interaction does. Values naming no child are ignored.
+     *
+     *  This used to be a getter with no setter. Reading it was fine, but `.value=${...}` -- the
+     *  binding every other form control in this library accepts -- compiles to a plain property
+     *  assignment that `readonly` cannot catch at the binding site, so it threw
+     *  "Cannot set property value ... which has only a getter" from inside lit-html during a *later*
+     *  render, pointing at framework internals rather than the offending line. */
     get value(): readonly string[];
+    set value(next: readonly string[] | null | undefined);
     get required(): boolean;
     set required(next: boolean);
     get disabled(): boolean;
@@ -194,8 +208,13 @@ export declare class LyraCheckboxGroup extends LyraElement<LyraCheckboxGroupEven
     private onChildMutations;
     private hasDirectSupportSlot;
     private onSlotChange;
+    /** Checks exactly the children named by `values`, matching duplicates one-for-one, then re-syncs
+     *  the owned value/validity. Shared by the `value` setter and by form restore. */
+    private applyValues;
     /** Applies a restore only once real option children exist; FACE callbacks may run before them. */
     private applyPendingRestore;
+    /** Applies a `value` assignment that arrived before any checkbox child existed. */
+    private applyPendingValues;
     connectedCallback(): void;
     private armChildObserver;
     disconnectedCallback(): void;

package/dist/components/forms/checkbox-group/checkbox-group.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{LyraElement}from"../../../internal/lyra-element.js";import{AnchoredValidityController,resolveValidityAnchor,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{acquireAriaDescription}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox-group.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_checkboxGroupRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";function warnDuplicateValue(group,value){console.warn(`<lr-checkbox-group> has more than one <lr-checkbox> child with value="${value}"${group.name?` (name="${group.name}")`:""}; every checked one contributes an identical FormData entry, so the submitted data cannot say which was checked. Give each child a distinct \`value\`.`)}class LyraCheckboxGroup extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxGroupRequired:LYRA_DEFAULT_checkboxGroupRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},orientation:{reflect:!0},value:{attribute:!1,noAccessor:!0}}}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.sync(),this.requestUpdate("name",old)}get value(){return Object.freeze([...this._value])}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.sync(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.propagateDisabled(),this.sync(),this.requestUpdate("disabled",old)}constructor(){super(),this.orientation="vertical",this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.touched=!1,this.hasInteracted=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.labelId=nextId("checkbox-group-label"),this.hintId=nextId("checkbox-group-hint"),this.errorId=nextId("checkbox-group-error"),this.requiredDescriptionId=nextId("checkbox-group-required"),this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this._value=[],this._warnedDuplicateValues=new Set,this.childObserverGeneration=0,this.childControllers=new Map,this.authoredChildSizes=new Map,this.onChildEvent=event=>{if(!this.isOwnedCheckbox(event.target)||(event.stopImmediatePropagation(),event.type!=="change"||this.effectiveDisabled))return;this.hasInteracted=!0,this.sync();const detail=()=>Object.freeze({value:this.value});this.emit("input",detail()),this.emit("change",detail()),this.emit("lr-change",detail())},this.onChildMutations=records=>{if(records.some(record=>record.type==="childList"||record.attributeName==="slot")){this.onSlotChange();return}for(const record of records){if(record.attributeName!=="size"||!this.isOwnedCheckbox(record.target))continue;const box=record.target;this.size!==void 0&&box.size!==this.size&&this.authoredChildSizes.set(box,box.size)}records.some(record=>record.attributeName==="size"&&this.isOwnedCheckbox(record.target))&&this.propagateSize(),records.some(record=>this.isOwnedCheckbox(record.target))&&this.sync()},this.onSlotChange=()=>{this.hasLabelSlot=this.hasDirectSupportSlot("label"),this.hasHintSlot=this.hasDirectSupportSlot("hint"),this.hasErrorSlot=this.hasDirectSupportSlot("error"),this.reconcileChildControllers(),this.applyPendingRestore()||this.sync(),this.propagateDisabled(),this.propagateSize()},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))}checkboxGroupOwner(element){const group=element.closest("lr-checkbox-group");if(!group)return null;let topLevelChild=element;for(;topLevelChild.parentElement&&topLevelChild.parentElement!==group;)topLevelChild=topLevelChild.parentElement;if(topLevelChild.parentElement!==group)return null;const slot=topLevelChild.getAttribute("slot");return slot==="label"||slot==="hint"||slot==="error"?null:group}ownsCheckbox(element){return element.localName==="lr-checkbox"&&this.checkboxGroupOwner(element)===this}get boxes(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:Array.from(querySelectorAll.call(this,"lr-checkbox")).filter(box=>this.ownsCheckbox(box))}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}propagateDisabled(){const effective=this.effectiveDisabled;this.boxes.forEach(box=>box.setGroupDisabled?.(effective))}propagateSize(){for(const box of this.boxes)if(this.authoredChildSizes.has(box)||this.authoredChildSizes.set(box,box.size),this.size===void 0||this.size===null){const authored=this.authoredChildSizes.get(box);authored!==void 0&&box.size!==authored&&(box.size=authored),this.authoredChildSizes.delete(box)}else box.size!==this.size&&(box.size=this.size)}readValue(){return this.boxes.filter(box=>box.checked).map(box=>box.value??"on")}warnOnDuplicateValues(){const seen=new Set;for(const box of this.boxes){const value=box.value??box.getAttribute("value")??"on";if(!seen.has(value)){seen.add(value);continue}this._warnedDuplicateValues.has(value)||(this._warnedDuplicateValues.add(value),warnDuplicateValue(this,value))}}sync(){const next=this.readValue();this.warnOnDuplicateValues();const old=this._value;this._value=next,this.requestUpdate("value",old);const data=new FormData;this.name&&next.forEach(value=>data.append(this.name,value)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,next)),!this.barredFromValidation&&this.required&&next.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxGroupRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}notifyCheckboxStateChange(checkbox){this.isConnected&&this.ownsCheckbox(checkbox)&&this.sync()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}reflectValidityStates(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred})}isOwnedCheckbox(target){return target?.nodeType===1&&this.ownsCheckbox(target)}reconcileChildControllers(){const current=new Set(this.boxes);for(const[box,controller]of this.childControllers){if(current.has(box))continue;box.removeController(controller),this.childControllers.delete(box);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize),this.authoredChildSizes.delete(box);const nextOwner=this.checkboxGroupOwner(box);(!nextOwner||nextOwner===this)&&box.setGroupDisabled?.(!1)}for(const box of current){if(this.childControllers.has(box)||typeof box.addController!="function")continue;const controller={hostUpdated:()=>{this.isConnected&&this.ownsCheckbox(box)&&this.sync()}};box.addController(controller),this.childControllers.set(box,controller)}}hasDirectSupportSlot(name){return Array.from(this.children??[]).some(child=>child.getAttribute("slot")===name)}applyPendingRestore(){if(this.pendingRestoreValues===void 0||this.boxes.length===0)return!1;const remaining=[...this.pendingRestoreValues];this.pendingRestoreValues=void 0;for(const box of this.boxes){const value=box.value??"on",index=remaining.indexOf(value);box.checked=index>=0,index>=0&&remaining.splice(index,1)}return this.touched=!1,this.hasInteracted=!1,this.sync(),!0}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.onChildEvent),this.addEventListener("change",this.onChildEvent),this.addEventListener("lr-change",this.onChildEvent),this.onSlotChange(),this.armChildObserver(),this.hasUpdated&&this.syncRequiredDescription()}armChildObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.childObserver&&this.childObserverDocument===ownerDocument)return;this.resetChildObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.childObserverGeneration,observer=new MutationObserverCtor(records=>{this.childObserver!==observer||this.childObserverDocument!==ownerDocument||this.childObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onChildMutations(records)});this.childObserver=observer,this.childObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["checked","value","disabled","size","slot"]})}disconnectedCallback(){this.releaseRequiredDescription(),this.removeEventListener("input",this.onChildEvent),this.removeEventListener("change",this.onChildEvent),this.removeEventListener("lr-change",this.onChildEvent),this.resetChildObserver();for(const[box,controller]of this.childControllers){box.removeController(controller),box.setGroupDisabled?.(!1);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize)}this.childControllers.clear(),this.authoredChildSizes.clear(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetChildObserver()}resetChildObserver(){this.childObserverGeneration+=1,this.childObserver?.disconnect(),this.childObserver=void 0,this.childObserverDocument=void 0}firstUpdated(changed){super.firstUpdated(changed),this.addEventListener("blur",event=>{const blurredControl=event.target;(typeof blurredControl?.matches=="function"?blurredControl.matches(":disabled"):this.effectiveDisabled)||(this.touched=!0,this.hasInteracted=!0),this.sync()},!0)}updated(changed){super.updated(changed),changed.has("size")&&this.propagateSize(),this.syncRequiredDescription()}syncRequiredDescription(){const target=this.renderRoot.querySelector("fieldset"),description=this.renderRoot.querySelector(`#${this.requiredDescriptionId}`);if(!this.required||!target||!description){this.releaseRequiredDescription();return}if(this.requiredDescriptionTarget!==target){this.releaseRequiredDescription(),this.requiredDescriptionTarget=target,this.requiredDescriptionLease=acquireAriaDescription(target,[description]);return}this.requiredDescriptionLease?.update([description])}releaseRequiredDescription(){this.requiredDescriptionLease?.release(),this.requiredDescriptionLease=void 0,this.requiredDescriptionTarget=void 0}[VALIDITY_ANCHOR](){const first=this.firstEnabledBox();return resolveValidityAnchor(first)??first??null}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}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}firstEnabledBox(){return this.boxes.find(box=>!box.effectiveDisabled&&!box.matches(":disabled"))}focus(options){this.liveDisabled||this.firstEnabledBox()?.focus(options)}blur(){this.boxes.find(box=>box.matches(":focus-within"))?.blur()}click(){this.liveDisabled||this.firstEnabledBox()?.click()}formResetCallback(){this.boxes.forEach(box=>box.resetFromGroup()),this.touched=!1,this.hasInteracted=!1,this.sync()}formStateRestoreCallback(state2,_mode){this.pendingRestoreValues=readStringArrayFormDataState(state2),this.applyPendingRestore()}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.propagateDisabled(),this.sync(),this.requestUpdate()}render(){const hasLabel=this.hasLabelSlot||!!this.label||this.withLabel,hasHint=this.hasHintSlot||!!this.hint||this.withHint,hasError=this.hasErrorSlot||!!this.errorText,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing,invalid=hasError||this.touched&&!this.internals.validity.valid;return html`<fieldset
+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{LyraElement}from"../../../internal/lyra-element.js";import{AnchoredValidityController,resolveValidityAnchor,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{acquireAriaDescription}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox-group.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_checkboxGroupRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";function warnDuplicateValue(group,value){console.warn(`<lr-checkbox-group> has more than one <lr-checkbox> child with value="${value}"${group.name?` (name="${group.name}")`:""}; every checked one contributes an identical FormData entry, so the submitted data cannot say which was checked. Give each child a distinct \`value\`.`)}class LyraCheckboxGroup extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxGroupRequired:LYRA_DEFAULT_checkboxGroupRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},orientation:{reflect:!0},value:{attribute:!1,noAccessor:!0}}}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.sync(),this.requestUpdate("name",old)}get value(){return Object.freeze([...this._value])}set value(next){const requested=Array.isArray(next)?next.filter(entry=>typeof entry=="string"):[];if(this.boxes.length===0){this.pendingValues=requested;return}this.pendingValues=void 0,this.applyValues(requested)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.sync(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.propagateDisabled(),this.sync(),this.requestUpdate("disabled",old)}constructor(){super(),this.orientation="vertical",this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.touched=!1,this.hasInteracted=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.labelId=nextId("checkbox-group-label"),this.hintId=nextId("checkbox-group-hint"),this.errorId=nextId("checkbox-group-error"),this.requiredDescriptionId=nextId("checkbox-group-required"),this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this._value=[],this._warnedDuplicateValues=new Set,this.childObserverGeneration=0,this.childControllers=new Map,this.authoredChildSizes=new Map,this.onChildEvent=event=>{if(!this.isOwnedCheckbox(event.target)||(event.stopImmediatePropagation(),event.type!=="change"||this.effectiveDisabled))return;this.hasInteracted=!0,this.sync();const detail=()=>Object.freeze({value:this.value});this.emit("input",detail()),this.emit("change",detail()),this.emit("lr-change",detail())},this.onChildMutations=records=>{if(records.some(record=>record.type==="childList"||record.attributeName==="slot")){this.onSlotChange();return}for(const record of records){if(record.attributeName!=="size"||!this.isOwnedCheckbox(record.target))continue;const box=record.target;this.size!==void 0&&box.size!==this.size&&this.authoredChildSizes.set(box,box.size)}records.some(record=>record.attributeName==="size"&&this.isOwnedCheckbox(record.target))&&this.propagateSize(),records.some(record=>this.isOwnedCheckbox(record.target))&&this.sync()},this.onSlotChange=()=>{this.hasLabelSlot=this.hasDirectSupportSlot("label"),this.hasHintSlot=this.hasDirectSupportSlot("hint"),this.hasErrorSlot=this.hasDirectSupportSlot("error"),this.reconcileChildControllers(),!this.applyPendingRestore()&&!this.applyPendingValues()&&this.sync(),this.propagateDisabled(),this.propagateSize()},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))}checkboxGroupOwner(element){const group=element.closest("lr-checkbox-group");if(!group)return null;let topLevelChild=element;for(;topLevelChild.parentElement&&topLevelChild.parentElement!==group;)topLevelChild=topLevelChild.parentElement;if(topLevelChild.parentElement!==group)return null;const slot=topLevelChild.getAttribute("slot");return slot==="label"||slot==="hint"||slot==="error"?null:group}ownsCheckbox(element){return element.localName==="lr-checkbox"&&this.checkboxGroupOwner(element)===this}get boxes(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:Array.from(querySelectorAll.call(this,"lr-checkbox")).filter(box=>this.ownsCheckbox(box))}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}propagateDisabled(){const effective=this.effectiveDisabled;this.boxes.forEach(box=>box.setGroupDisabled?.(effective))}propagateSize(){for(const box of this.boxes)if(this.authoredChildSizes.has(box)||this.authoredChildSizes.set(box,box.size),this.size===void 0||this.size===null){const authored=this.authoredChildSizes.get(box);authored!==void 0&&box.size!==authored&&(box.size=authored),this.authoredChildSizes.delete(box)}else box.size!==this.size&&(box.size=this.size)}readValue(){return this.boxes.filter(box=>box.checked).map(box=>box.value??"on")}warnOnDuplicateValues(){const seen=new Set;for(const box of this.boxes){const value=box.value??box.getAttribute("value")??"on";if(!seen.has(value)){seen.add(value);continue}this._warnedDuplicateValues.has(value)||(this._warnedDuplicateValues.add(value),warnDuplicateValue(this,value))}}sync(){const next=this.readValue();this.warnOnDuplicateValues();const old=this._value;this._value=next,this.requestUpdate("value",old);const data=new FormData;this.name&&next.forEach(value=>data.append(this.name,value)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,next)),!this.barredFromValidation&&this.required&&next.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxGroupRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}notifyCheckboxStateChange(checkbox){this.isConnected&&this.ownsCheckbox(checkbox)&&this.sync()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}reflectValidityStates(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred})}isOwnedCheckbox(target){return target?.nodeType===1&&this.ownsCheckbox(target)}reconcileChildControllers(){const current=new Set(this.boxes);for(const[box,controller]of this.childControllers){if(current.has(box))continue;box.removeController(controller),this.childControllers.delete(box);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize),this.authoredChildSizes.delete(box);const nextOwner=this.checkboxGroupOwner(box);(!nextOwner||nextOwner===this)&&box.setGroupDisabled?.(!1)}for(const box of current){if(this.childControllers.has(box)||typeof box.addController!="function")continue;const controller={hostUpdated:()=>{this.isConnected&&this.ownsCheckbox(box)&&this.sync()}};box.addController(controller),this.childControllers.set(box,controller)}}hasDirectSupportSlot(name){return Array.from(this.children??[]).some(child=>child.getAttribute("slot")===name)}applyValues(values){const remaining=[...values];for(const box of this.boxes){const value=box.value??"on",index=remaining.indexOf(value);box.checked=index>=0,index>=0&&remaining.splice(index,1)}this.sync()}applyPendingRestore(){if(this.pendingRestoreValues===void 0||this.boxes.length===0)return!1;const values=this.pendingRestoreValues;return this.pendingRestoreValues=void 0,this.touched=!1,this.hasInteracted=!1,this.applyValues(values),!0}applyPendingValues(){if(this.pendingValues===void 0||this.boxes.length===0)return!1;const values=this.pendingValues;return this.pendingValues=void 0,this.applyValues(values),!0}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.onChildEvent,{capture:!0}),this.addEventListener("change",this.onChildEvent,{capture:!0}),this.addEventListener("lr-change",this.onChildEvent,{capture:!0}),this.onSlotChange(),this.armChildObserver(),this.hasUpdated&&this.syncRequiredDescription()}armChildObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.childObserver&&this.childObserverDocument===ownerDocument)return;this.resetChildObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.childObserverGeneration,observer=new MutationObserverCtor(records=>{this.childObserver!==observer||this.childObserverDocument!==ownerDocument||this.childObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onChildMutations(records)});this.childObserver=observer,this.childObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["checked","value","disabled","size","slot"]})}disconnectedCallback(){this.releaseRequiredDescription(),this.removeEventListener("input",this.onChildEvent,{capture:!0}),this.removeEventListener("change",this.onChildEvent,{capture:!0}),this.removeEventListener("lr-change",this.onChildEvent,{capture:!0}),this.resetChildObserver();for(const[box,controller]of this.childControllers){box.removeController(controller),box.setGroupDisabled?.(!1);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize)}this.childControllers.clear(),this.authoredChildSizes.clear(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetChildObserver()}resetChildObserver(){this.childObserverGeneration+=1,this.childObserver?.disconnect(),this.childObserver=void 0,this.childObserverDocument=void 0}firstUpdated(changed){super.firstUpdated(changed),this.addEventListener("blur",event=>{const blurredControl=event.target;(typeof blurredControl?.matches=="function"?blurredControl.matches(":disabled"):this.effectiveDisabled)||(this.touched=!0,this.hasInteracted=!0),this.sync()},!0)}updated(changed){super.updated(changed),changed.has("size")&&this.propagateSize(),this.syncRequiredDescription()}syncRequiredDescription(){const target=this.renderRoot.querySelector("fieldset"),description=this.renderRoot.querySelector(`#${this.requiredDescriptionId}`);if(!this.required||!target||!description){this.releaseRequiredDescription();return}if(this.requiredDescriptionTarget!==target){this.releaseRequiredDescription(),this.requiredDescriptionTarget=target,this.requiredDescriptionLease=acquireAriaDescription(target,[description]);return}this.requiredDescriptionLease?.update([description])}releaseRequiredDescription(){this.requiredDescriptionLease?.release(),this.requiredDescriptionLease=void 0,this.requiredDescriptionTarget=void 0}[VALIDITY_ANCHOR](){const first=this.firstEnabledBox();return resolveValidityAnchor(first)??first??null}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}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}firstEnabledBox(){return this.boxes.find(box=>!box.effectiveDisabled&&!box.matches(":disabled"))}focus(options){this.liveDisabled||this.firstEnabledBox()?.focus(options)}blur(){this.boxes.find(box=>box.matches(":focus-within"))?.blur()}click(){this.liveDisabled||this.firstEnabledBox()?.click()}formResetCallback(){this.boxes.forEach(box=>box.resetFromGroup()),this.touched=!1,this.hasInteracted=!1,this.sync()}formStateRestoreCallback(state2,_mode){this.pendingRestoreValues=readStringArrayFormDataState(state2),this.applyPendingRestore()}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.propagateDisabled(),this.sync(),this.requestUpdate()}render(){const hasLabel=this.hasLabelSlot||!!this.label||this.withLabel,hasHint=this.hasHintSlot||!!this.hint||this.withHint,hasError=this.hasErrorSlot||!!this.errorText,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing,invalid=hasError||this.touched&&!this.internals.validity.valid;return html`<fieldset
       part="form-control"
       ?disabled=${this.effectiveDisabled}
       aria-label=${this.accessibleLabel||nothing}

package/dist/components/forms/checkbox-group/checkbox-group.styles.js

@@ -1,9 +1,5 @@
 import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css`
   :host {
-    /* The group's own chrome rides the shared size ladder (internal/sizes.styles.ts). Both gaps are
-       fractions of the tier's control height rather than fixed space tokens, so they stay in
-       proportion to the options beside them; at the default "m" tier they resolve to exactly the
-       --lr-space-xs / --lr-space-s the group shipped with before it had a size at all. */
     --_lr-checkbox-group-row-gap: calc(var(--lr-form-control-height) * 0.1);
     --_lr-checkbox-group-option-gap: calc(var(--lr-form-control-height) * 0.2);
     display: block;
@@ -21,18 +17,11 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     display: grid;
     gap: var(--lr-checkbox-group-row-gap, var(--_lr-checkbox-group-row-gap));
   }
-  /* The rendered legend's real part is "form-control-label" (see checkbox-group.class.ts's
-     render()), not "label" -- this must match it exactly or the rule is dead code. */
   [part~="form-control-label"] {
     font-weight: var(--lr-font-weight-semibold);
     color: var(--lr-color-text);
     font-size: var(--lr-form-control-font-size);
   }
-  /* The required marker comes from the one shared sheet (internal/form-control.styles.ts) like
-     every other labelled control's, so its glyph, colour and spacing are consumer-settable. The
-     rule below suppresses this component's older hand-rolled glyph -- a literal <span> the legend
-     template still renders -- so the two never double up; it is dead the moment that span is
-     dropped from checkbox-group.class.ts's render(). */
   :host([required]) [part~="form-control-label"] > span[aria-hidden="true"] {
     display: none;
   }
@@ -72,13 +61,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     max-inline-size: 100%;
     overflow-wrap: anywhere;
   }
-  /* :host(:disabled), never :host([disabled]) -- this is a form-associated custom element, so the
-     UA computes the FACE :disabled state from the group's own disabled attribute OR an ancestor
-     fieldset's cascade, which is exactly what effectiveDisabled already gates the options on. The
-     attribute selector would only ever have matched the first of the two.
-     Dimming lands on the three chrome parts the GROUP renders itself, not on the host: every owned
-     <lr-checkbox> already dims itself, and a host-level opacity would multiply with that and push
-     the options to a quarter of full contrast. */
   :host(:disabled) [part~="form-control-label"],
   :host(:disabled) [part="hint"],
   :host(:disabled) [part="error"] {

package/dist/components/forms/code-editor/code-editor.styles.js

@@ -7,12 +7,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     --_lr-code-editor-line-height: 1.5;
     --_lr-code-editor-tab-size: 2;
   }
-  /* Size ladder for the \`size\` property, mirroring lr-textarea's own six-step ladder (see its
-     "leaves the committed padding/font-size untouched at the default tier" test). The default tier
-     is "m"; the :host block above IS that tier, so a :host([size='m']) rule below would only restate
-     it -- these three tokens are the only ones that vary. min-block-size uses the existing
-     --lr-size-* geometry scale rather than the space scale, since it is a block-axis floor, not a
-     padding value. */
   :host([size="2xs"]) {
     --_lr-code-editor-min-block-size: var(--lr-size-4rem);
     --_lr-code-editor-padding: var(--lr-space-2xs);
@@ -53,14 +47,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     color: var(--lr-color-text);
     font-weight: var(--lr-font-weight-semibold);
   }
-  /* The one required-marker rule the library shares, replacing the literal
-     <span aria-hidden="true">*</span> this template used to render: a marker that lives in the
-     stylesheet is suppressible and retunable by a consumer, and generated content can never leak
-     into the label's accessible name the way a real element can. */
   ${formControlRequiredMarker}
-  /* Keep the editor frame as the single scroll viewport. The textarea must not create a second
-     native horizontal scrollbar when wrap="off"; its max-content track lets the frame own both
-     axes instead. */
   [part='editor'] {
     display: grid;
     grid-template-columns: auto max-content;
@@ -108,10 +95,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     position: absolute;
     inset-inline: 0;
   }
-  /* --lr-code-editor-tab-size is the single channel for the tab width: the class writes that token
-     inline on this part only when tabSize was explicitly assigned, so an untouched tabSize leaves a
-     host-level override of the token in charge instead of losing to an inline tab-size
-     declaration. */
   [part="textarea"] {
     display: block;
     box-sizing: border-box;
@@ -146,12 +129,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   [part="textarea"]::placeholder {
     color: var(--lr-color-text-quiet);
   }
-  /* Mirrors lr-checkbox's [part='base']:hover [part='box'] -- the focus-visible outline above gives
-     keyboard users a cue that this is the interactive surface; :hover gives mouse users the same
-     cue via the editor frame's border, guarded off while disabled so it never implies the frame is
-     still interactive. */
-  /* no-pressed-state: the editor frame is a text surface, not a push target -- pointer-down
-     places a caret, and the border cue belongs to hover and :focus-visible. */
   :host(:not(:disabled)) [part="editor"]:hover {
     border-color: var(--lr-code-editor-hover-border, var(--lr-color-brand));
   }
@@ -166,13 +143,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   :host([data-invalid]) [part="editor"] {
     border-color: var(--lr-code-editor-invalid-border, var(--lr-color-danger));
   }
-  /* :host(:disabled), not :host([disabled]) -- this is a form-associated custom element
-     (FormAssociated mixin -> static formAssociated = true), so the UA computes its disabled state
-     (and therefore :disabled matching) the same way it does for a native form control: from its own
-     disabled content attribute *or* an ancestor <fieldset disabled>'s cascade. Keying this off the
-     attribute selector only ever matched the first case -- a textarea disabled purely via an
-     ancestor fieldset had effectiveDisabled correctly gating the internal <textarea>, but the host
-     still rendered at full opacity with a normal cursor (same fix as lr-chat-composer). */
   :host(:disabled) {
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;