@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/forms/swatch-picker/swatch-picker.styles.js

@@ -1,33 +1,9 @@
 import{css}from"lit";const styles=css`
   :host {
     display: inline-flex;
-    /* Lets the host shrink below its row's max-content width when it's a flex/grid
-       item in a consumer's own narrow layout -- the default min-width:auto for flex
-       items would otherwise force the row wide regardless of [part='base']'s
-       flex-wrap below. */
     min-inline-size: 0;
-    /* Ring drawn around the selected swatch. A dedicated token (rather than reusing
-       --lr-focus-ring-color from tokens.styles.ts) so a host can retheme the
-       selection indicator independently of the :focus-visible outline and every
-       other ring color in the library, while defaulting to the brand color. */
     --_lr-swatch-picker-selected-color: var(--lr-color-brand);
-    /* Blur radius of that same ring -- 0 by default (a crisp ring, today's look for every
-       existing consumer). A host that wants a soft glow instead sets this to a real length
-       (e.g. 0.4rem) rather than reaching for ::part(swatch)[aria-checked] from outside, which
-       isn't reliably selectable: the CSS Shadow Parts spec only allows a fixed set of
-       pseudo-classes after ::part(), not arbitrary attribute selectors, so that combinator can
-       silently fail to match depending on the engine. */
     --_lr-swatch-picker-selected-blur: 0;
-    /* Pulsing "shine" duration for the selected swatch -- 0s (the default) is a no-op (today's
-       static look for every existing consumer, and unaffected by this token at all: a 0-duration
-       animation resolves to its end state instantly and imperceptibly). A host sets a real
-       duration (e.g. 1.6s) to make the selected swatch rhythmically brighten and settle back. A
-       separate filter: brightness() animation (not box-shadow, which
-       --lr-swatch-picker-selected-blur above already owns) so the two compose freely without
-       fighting over the same CSS property, and so this reads identically for a plain color circle
-       and an icon swatch alike -- filter applies to the whole element including a slotted icon,
-       with no icon-specific branching needed (unlike the box-shadow/drop-shadow split below, which
-       needs one precisely because box-shadow doesn't reach into a transparent box's own content). */
     --_lr-swatch-picker-shine-duration: 0s;
     --_lr-swatch-picker-gemstone-selected-blur: var(--lr-size-0-5rem);
     --_lr-swatch-picker-gemstone-shine-duration: var(--lr-transition-ambient);
@@ -38,11 +14,6 @@ import{css}from"lit";const styles=css`
     );
     --_lr-swatch-picker-gap: var(--lr-space-xs);
   }
-  /* A swatch is a square tap target in a wrapping grid, not a form-control row, so this is the
-     component's own ladder rather than the shared --lr-form-control-height one: the two agree from
-     m upwards, but the shared 2xs/xs steps (20/24px) would put a swatch at or under the WCAG 2.5.8
-     minimum with no margin. It still matches both spellings of every tier, the same way
-     internal/sizes.styles.ts does, so size="small" is honoured here too. */
   :host([size="2xs"]) {
     --_lr-swatch-picker-hit-size: var(--lr-size-1-5rem);
     --_lr-swatch-picker-fill-size: var(
@@ -98,14 +69,6 @@ import{css}from"lit";const styles=css`
   }
   [part="swatch"] {
     box-sizing: border-box;
-    /* The interactive hit target is sized via the component-scoped --lr-swatch-picker-hit-size
-       (default --lr-size-2-5rem, swapped per size tier below, floored at 24px for WCAG 2.5.8),
-       while the *visible* fill is sized independently via --lr-swatch-picker-fill-size (default
-       --lr-size-1-5rem, also swapped per tier) -- rendered on the separate
-       [part='swatch-fill']/[part='swatch-icon'] child below and centered via flex, not by resizing
-       this button itself. A swatch's own fill/icon is what previously doubled as the clickable box;
-       splitting them keeps the dense picker grid's visual density unchanged while still growing the
-       real click/tap area. */
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -121,8 +84,6 @@ import{css}from"lit";const styles=css`
     border: none;
     border-radius: 50%;
     background: none;
-    /* Exposes the option's color to a slotted icon (part='swatch-icon') via currentColor -- inert
-       when no icon is present, since [part='swatch-fill'] paints its own background-color instead. */
     color: var(--lr-swatch-color);
     cursor: pointer;
   }
@@ -139,13 +100,8 @@ import{css}from"lit";const styles=css`
     );
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: 50%;
-    /* Per-swatch fill from the option's color, set inline by swatch-picker.class.ts.
-       Read through a var() (rather than an inline background-color declaration) so a
-       consumer's ::part(swatch-fill) background rule can still win when overriding it. */
     background-color: var(--lr-swatch-color);
     transition: transform var(--lr-transition-fast);
-    /* The fill is the option's data, not component chrome. Preserve it while the enclosing button
-       and its focus/selection affordances continue to use system colors in forced-colors mode. */
     forced-color-adjust: none;
   }
   [part="swatch-icon"] {
@@ -160,9 +116,6 @@ import{css}from"lit";const styles=css`
       --lr-swatch-picker-fill-size,
       var(--_lr-swatch-picker-fill-size)
     );
-    /* gemstoneGlyph() follows the icon convention of a 1em intrinsic box. Establish that em from
-       the visible fill token here so the SVG fills this wrapper instead of inheriting the browser's
-       smaller default button font size. Consumer-provided em-sized icons benefit identically. */
     font-size: var(
       --lr-swatch-picker-fill-size,
       var(--_lr-swatch-picker-fill-size)
@@ -170,10 +123,6 @@ import{css}from"lit";const styles=css`
     transition: transform var(--lr-transition-fast);
     forced-color-adjust: none;
   }
-  /* The disabled arm keys off the button's own native :disabled, which is exactly what render()
-     binds -- not :host([disabled]) -- so the swatch that is actually inert is the swatch that
-     actually dims. (:host(:disabled) would be dead code here: this control is deliberately not
-     form-associated, so the UA never computes a FACE disabled state for the host.) */
   [part="swatch"]:disabled {
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
@@ -190,13 +139,6 @@ import{css}from"lit";const styles=css`
   [part="swatch"][aria-checked="true"] [part="swatch-icon"] {
     transform: scale(1.2);
   }
-  /* The pressed state is expressed as scale, not as a colour mix, because this part's fill IS the
-     option's colour -- tinting it would misreport the value the swatch exists to show. Pressing
-     pushes the raised swatch back down past its resting size, so the press reads as a physical
-     depress against the hover lift rather than as a second, slightly-larger lift.
-     Deliberately placed AFTER the aria-checked rule above: the two selectors are the same
-     specificity (0,3,0), so ordering is the only thing that lets the already-selected swatch --
-     the one most likely to be pressed again -- show any pressed feedback at all. */
   [part="swatch"]:not(:disabled):active [part="swatch-fill"],
   [part="swatch"]:not(:disabled):active [part="swatch-icon"] {
     transform: scale(0.95);
@@ -228,19 +170,6 @@ import{css}from"lit";const styles=css`
       filter: brightness(1.4);
     }
   }
-  /* An icon option renders its own shape instead of the plain filled circle, so the box-shadow ring
-     above (drawn around [part='swatch-fill']'s true shape) doesn't apply to it at all -- render()
-     only ever mounts one of [part='swatch-fill']/[part='swatch-icon'] per swatch (see
-     swatch-picker.class.ts), so this selector and the one above never both match the same swatch.
-     Swap to a drop-shadow on the icon itself, which follows its real rendered shape.
-
-     The shine gets its OWN keyframe here (rather than sharing the fill's) because both effects
-     land on filter for an icon, and a running animation outranks an author-normal declaration:
-     a brightness-only keyframe would win the cascade and blank this glow out entirely for the
-     whole animation -- i.e. for every swatch in mode="gemstone", where the shine is on by default.
-     The keyframe therefore re-states the drop-shadow alongside the brightness so the two compose,
-     and the static declaration below stays as the path taken when the animation isn't running
-     (--lr-swatch-picker-shine-duration: 0s, and prefers-reduced-motion). */
   [part="swatch"][aria-checked="true"] [part="swatch-icon"] {
     filter: drop-shadow(
       0 0
@@ -291,12 +220,6 @@ import{css}from"lit";const styles=css`
         brightness(1.4);
     }
   }
-  /* The scale is redundant selection feedback (the ring already conveys it), so keep the
-     transform but drop its easing under reduced-motion -- the swatch snaps rather than glides.
-     The shine animation stops outright (a steady brightness, not a pulsing one) rather than
-     merely losing its own easing, matching prefers-reduced-motion's intent for anything that
-     loops -- a host that opted into --lr-swatch-picker-shine-duration still gets a selected
-     swatch, just without the rhythmic brightening. */
   @media (prefers-reduced-motion: reduce) {
     [part="swatch-fill"],
     [part="swatch-icon"] {

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

@@ -75,6 +75,9 @@ export interface LyraSwitchEventMap {
  * @cssstate checked - Matches while the live switch state is on.
  * @cssstate disabled - Matches while disabled directly or by an ancestor fieldset.
  * @csspart form-control - The outer wrapper around the switch, error and hint.
+ * @csspart row - The row wrapping the switch owner and the label as siblings. This is the node
+ *  to size or align when laying out a column of switches; `base`/`switch` is only the track box
+ *  inside it, so its inline size tracks the track, not the row.
  * @csspart wrapper - Compatibility name on the semantic switch owner.
  * @csspart base - Compatibility name for the semantic switch owner; use `switch`.
  * @csspart switch - The interactive `role="switch"` owner around the track, with the rich default

package/dist/components/forms/switch/switch.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--)(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,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./switch.styles.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_switchRequired}from"../../../internal/default-strings.generated.js";class LyraSwitch extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,switchRequired:LYRA_DEFAULT_switchRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked","value")]}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},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}get checked(){return this._checked}set checked(next){const old=this._checked;this.settingDefaultChecked||(this._checkedDirty=!0),this._checked=!!next,this.syncFormState(),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 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.requestUpdate("value",old,{reflect:!1})}constructor(){super(),this.size="m",this.hint="",this.helpText="",this.withHint=!1,this.errorText="",this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasHelpTextSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.hasInteracted=!1,this._defaultChecked=!1,this._checkedDirty=!1,this.settingDefaultChecked=!1,this.reflectingDefaultChecked=!1,this._fieldsetDisabled=!1,this._name="",this._checked=!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.setFromUser(!this.checked)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0,this.hasInteracted=!0,this.reflectValidityStates()),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onKeyDown=e=>{if(!this.liveDisabled&&!e.repeat){if(e.key===" "||e.key==="Spacebar"){e.preventDefault(),this.setFromUser(!this.checked);return}if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();const turnsOn=this.effectiveDirection==="rtl"?e.key==="ArrowLeft":e.key==="ArrowRight";this.setFromUser(turnsOn)}}},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onSlotChange=event=>this.handleLabelSlotChange(event),this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHelpTextSlotChange=e=>{this.hasHelpTextSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},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(".switch-owner")??null}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.liveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}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.recomputeLightDomSlotState():this.seedFirstRenderState(()=>this.recomputeLightDomSlotState())}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed)}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.checked?this.validityController.setValidity({valueMissing:!0},this.localize("switchRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),setCustomState(this.internals,"checked",this.checked),setCustomState(this.internals,"disabled",this.effectiveDisabled)}syncFormState(){this.internals.setFormValue(this.checked?this.value:null,this.checked?"checked":"unchecked"),this.updateValidity()}formResetCallback(){this.touched=!1,this.hasInteracted=!1,this.restoreCheckedFromDefault(),this.reflectValidityStates()}formStateRestoreCallback(state2,reason){this.checked=state2==="checked"}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()}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()}resetValidity(){this.setCustomValidity("")}setFromUser(next){this.liveDisabled||this.checked!==next&&(this.hasInteracted=!0,this.checked=next,dispatchNativeInputEvent(this),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)}}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)}recomputeLightDomSlotState(){this.recomputeHasLabelSlot();const children=this.children;children&&(this.hasHintSlot=Array.from(children).some(element=>element.getAttribute("slot")==="hint"),this.hasHelpTextSlot=Array.from(children).some(element=>element.getAttribute("slot")==="help-text"),this.hasErrorSlot=Array.from(children).some(element=>element.getAttribute("slot")==="error"))}handleLabelSlotChange(event){const target=event.target;target?.nodeType!==1||target.localName!=="slot"||target.getRootNode()!==this.renderRoot&&!this.labelForwardingSlots().includes(target)||(this.bindLabelObserverTargets(),this.recomputeHasLabelSlot())}render(){const hasHint=this.withHint||this.hasHintSlot||this.hasHelpTextSlot||this.hint.length>0||this.helpText.length>0,hasError=this.hasErrorSlot||this.errorText.length>0,describedBy=[hasError?"switch-error":"",hasHint?"switch-hint":""].filter(Boolean).join(" ");return html`
       <div part="form-control">
-        <span class="switch-layout" @click=${this.onClick}>
+        <span class="switch-layout" part="row" @click=${this.onClick}>
           <span
             class="switch-owner"
             part="base switch wrapper"

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

@@ -2,23 +2,12 @@ import{css}from"lit";const styles=css`
   :host {
     display: inline-block;
     max-inline-size: 100%;
-    /* Component-local geometry knobs (defined on :host so each instance can
-       tune its own geometry) — a fully-rounded pill/thumb
-       needs a radius well past --lr-radius's small 0.375rem default, so
-       it's expressed here rather than bent onto that shared token.
-       Both track dimensions ride the shared size ladder
-       (internal/sizes.styles.ts): the track is half the tier's control height, and its inline size
-       keeps the 1.8:1 aspect ratio the control has always had. At the default "m" tier that is
-       exactly the 1.25rem x 2.25rem it shipped with before it had a size at all. */
     --_lr-switch-track-block-size: calc(var(--lr-form-control-height) * 0.5);
     --_lr-switch-track-inline-size: calc(
       var(--lr-switch-track-block-size, var(--_lr-switch-track-block-size)) *
         1.8
     );
     --_lr-switch-thumb-offset: var(--lr-size-2px);
-    /* The track's resting fill, named so the hover and press mixes below have exactly one base to
-       move away from in BOTH states -- the unchecked grey and the checked brand -- rather than two
-       rules each restating a colour. */
     --_lr-switch-track-fill: var(--lr-color-border);
   }
   .switch-layout {
@@ -40,15 +29,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Gives mouse users the same 'this is interactive' cue the :focus-visible ring above already
-     gives keyboard users, and a press that reads as deeper than the hover. Gated on
-     :host(:not(:disabled)) the same way lr-checkbox's/lr-radio's [part~='base']:hover rules are
-     (this control isn't a native button, so a bare [part~='base']:hover would otherwise also fire
-     while disabled).
-     Both land on the TRACK, and both are colour mixes. This was a filter: brightness() lift on
-     [part~='base'] before 8.0.0, which was wrong twice over: a filter multiplies every channel, so
-     it moved the track only by luck of its tone, and it applies to the whole subtree, so it faded
-     the label text sitting next to the track as well. */
   :host(:not(:disabled)) .switch-layout:hover [part~="track"] {
     background: var(
       --lr-switch-track-hover-fill,
@@ -77,14 +57,6 @@ import{css}from"lit";const styles=css`
   [part~="track"] {
     position: relative;
     flex: 0 0 auto;
-    /* content-box, not the library-wide border-box default: the thumb is absolutely positioned
-       against this element's padding box, and its own size/travel math (below) is derived from
-       these same declared dimensions. Under border-box, a consumer-added ::part(track) border
-       would eat into the padding box without the thumb shrinking to match, breaking clearance
-       symmetry on the far edge. content-box keeps the padding box exactly this declared size
-       regardless of any border width, so an added border grows the track's outer footprint
-       instead -- the same "sits outside, doesn't touch the fill" effect the docs already point
-       consumers wanting a rim toward via outline. */
     box-sizing: content-box;
     inline-size: var(
       --width,
@@ -143,10 +115,6 @@ import{css}from"lit";const styles=css`
     );
     border-radius: 50%;
     background: var(--lr-switch-thumb-fill, var(--lr-color-surface));
-    /* Animates the logical 'inset-inline-start' rather than a physical
-       'transform: translateX()' so the slide direction mirrors correctly
-       under dir="rtl" — consistent with this library's CSS-logical-
-       properties approach to RTL (see internal/lyra-element.ts). */
     transition: inset-inline-start var(--lr-transition-fast);
   }
   [part~="track"][part~="checked"] [part="thumb"] {
@@ -177,10 +145,6 @@ import{css}from"lit";const styles=css`
     );
   }
 
-  /* 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"] {
     font-size: var(--lr-font-size-md-sm);
     color: var(--lr-color-text);
@@ -191,7 +155,6 @@ import{css}from"lit";const styles=css`
     font-size: var(--lr-font-size-sm);
     color: var(--lr-color-text-quiet);
   }
-  /* :empty never matches here -- same fix as [part='hint']/[part='error'] on lr-select. */
   [part~="hint"][hidden] {
     display: none;
   }

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

@@ -2,21 +2,12 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   :host {
     display: block;
     --_lr-textarea-max-block-size: none;
-    /* Geometry from the shared form-control ladder (internal/sizes.styles.ts, pulled in ahead of
-       this sheet by textarea.class.ts), so this field's scale and lr-input's are the same scale
-       rather than two copies. The ladder's INLINE gutter is used on all four sides on purpose: its
-       block padding is 0 at the two tightest tiers because a control row's height floor supplies
-       the space there, and a textarea has no floor -- the first line would sit on the border. */
     --_lr-textarea-padding: var(--lr-form-control-padding-inline);
     --_lr-textarea-font-size: var(--lr-form-control-font-size);
     --_lr-textarea-radius: var(--lr-form-control-radius);
-    /* Fill/border pair swapped per appearance below; the mapped default is outlined. */
     --_lr-textarea-fill: transparent;
     --_lr-textarea-border-color: var(--lr-color-border);
   }
-  /* Changes the private radius default rather than declaring border-radius on [part='textarea'],
-     so that one consumption point below stays the only place a corner radius is read -- and an
-     inherited or direct --lr-textarea-radius override remains authoritative. */
   :host([pill]) {
     --_lr-textarea-radius: var(--lr-radius-pill);
   }
@@ -40,8 +31,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     --_lr-textarea-fill: transparent;
     --_lr-textarea-border-color: transparent;
   }
-  /* Quiet brand tint as the fill, loud brand only on the border -- same reasoning as lr-input's
-     accent tier: the user's own text has to stay legible on it. */
   :host([appearance="accent"]) {
     --_lr-textarea-fill: var(--lr-color-brand-quiet);
     --_lr-textarea-border-color: var(--lr-color-brand);
@@ -52,16 +41,10 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-size: var(--lr-font-size-md-sm);
     font-weight: var(--lr-font-weight-semibold);
   }
-  /* :empty never matches here -- the part always contains a literal slot child element regardless
-     of assigned/text content -- so real emptiness is tracked in JS (hasLabelSlot) and reflected
-     via the hidden attribute instead (same fix as lr-select's identical part). */
   [part="form-control-label"][hidden] {
     display: none;
   }
   ${formControlRequiredMarker}
-  /* A plain block box around the native control: the native resize grip writes its own inline
-     width/height onto the <textarea> itself, so the wrapper deliberately imposes no size of its
-     own and lets the field drive it. */
   [part~='textarea-wrapper'] {
     display: block;
     min-inline-size: 0;
@@ -90,15 +73,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Gives mouse users the same 'this is interactive' cue the :focus-visible ring above already
-     gives keyboard users -- mirrors lr-checkbox's/lr-radio's [part='base']:hover pattern, gated
-     via :host(:not(:disabled)) rather than a same-selector [part='textarea']:hover:not(:disabled)
-     (which would exceed a consumer's ::part(textarea):hover specificity -- see
-     lr-attachment-trigger's :where() fix for that class of bug). */
-  /* no-pressed-state: pressing inside a text surface places a caret, it does not actuate anything.
-     The mousedown that would match :active is the same gesture that focuses the field, so a pressed
-     treatment would render for one frame between the hover border and the focus ring and read as a
-     flicker; focus is this control's real "you are acting on me" state. */
   :host(:not(:disabled)) [part="textarea"]:hover {
     border-color: var(--lr-textarea-hover-border-color, var(--lr-color-brand));
   }
@@ -137,8 +111,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-size: var(--lr-font-size-sm);
     color: var(--lr-color-text-quiet);
   }
-  /* Inspection mirror only -- the visible [part='count'] carries the same text for sighted users,
-     while the spoken copy is appended to the shared light-DOM polite sink. */
   .count-announcement {
     position: absolute;
     inline-size: var(--lr-size-1px);

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

@@ -35,17 +35,8 @@ import{css}from"lit";const styles=css`
       var(--lr-font-size-sm) *
         var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale))
     );
-    /* No fixed block-size here (unlike before presets existed): [part="base"]
-       now carries its own 1.5rem below and the host's block box is just the
-       natural stack height of its children. With presets empty this still
-       computes to exactly 1.5rem (the one [part="base"] child), so the
-       brush-only case renders byte-for-byte the same as before. */
     --_lr-time-range-size-scale: 1;
   }
-  /* This control has no form-control row to floor: size scales a brush track, its handles and the
-     preset chips together, so the tier resolves to one multiplier rather than to the shared
-     --lr-form-control-height ladder. It still matches both spellings of every tier, the same way
-     internal/sizes.styles.ts does, so size="small" is honoured here too. */
   :host([size="2xs"]) {
     --_lr-time-range-size-scale: 0.5;
   }
@@ -72,12 +63,6 @@ import{css}from"lit";const styles=css`
   [part="preset-button"] {
     display: inline-flex;
     align-items: center;
-    /* Floors, not fixed sizes -- matches --lr-icon-button-size's contract elsewhere in the library:
-       at m/l/xl the scaled padding+font-size already clear 24px on their own (28px/33.6px/37.2px)
-       and these never engage, but at 2xs/xs/s the scale factor shrinks the button toward ~15-21px
-       tall, under the WCAG 2.5.8 24px minimum hit-area even though this is a real <button>, not a
-       decorative label. min-inline-size guards the same floor along the other axis: a short preset
-       label (e.g. "1h") measures under 24px wide at 2xs/xs once the padding shrinks with it. */
     min-block-size: var(--lr-size-24px);
     min-inline-size: var(--lr-size-24px);
     padding: var(
@@ -99,20 +84,12 @@ import{css}from"lit";const styles=css`
     cursor: pointer;
     transition: var(--lr-transition-fast);
   }
-  /* :where() zeroes the wrapped selectors' specificity contribution, leaving only :hover itself --
-     functionally identical selection to [part='preset-button']:hover:not(:disabled), but no longer
-     beating a consumer's own ::part(preset-button):hover override on specificity -- mirrors
-     lr-attachment-trigger's identical :where() fix for this exact selector shape. */
   :where([part="preset-button"]):hover:where(:not(:disabled)) {
     border-color: var(
       --lr-time-range-preset-hover-border-color,
       var(--lr-color-brand)
     );
   }
-  /* Pressed goes further than the hover's edge change: the button's own surface fill mixes toward
-     --lr-color-mix-partner (which follows the text colour), so it darkens on a light theme and
-     lightens on a dark one. Same :where() wrapping as the hover rule above, for the same
-     specificity reason, and gated on :not(:disabled) so a disabled preset stays inert. */
   :where([part="preset-button"]):active:where(:not(:disabled)) {
     border-color: var(
       --lr-time-range-preset-pressed-border-color,
@@ -135,12 +112,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Inline var() fallbacks rather than :host-declared properties, so a consumer can set them on any
-     ancestor without a :host declaration shadowing that. ::part(preset-button)[data-active] is
-     invalid CSS (an attribute selector cannot follow ::part), so recoloring the active preset used
-     to require hijacking the shared --lr-color-brand/--lr-color-on-brand tokens, repainting
-     everything else that reads them. Unset, each falls back to the token the rule used before, so
-     the rendering is unchanged. */
   [part="preset-button"][data-active] {
     background: var(--lr-time-range-preset-active-bg, var(--lr-color-brand));
     border-color: var(
@@ -149,11 +120,19 @@ import{css}from"lit";const styles=css`
     );
     color: var(--lr-time-range-preset-active-color, var(--lr-color-on-brand));
   }
+  [part="preset-button"][data-active]:active:where(:not(:disabled)) {
+    background: color-mix(
+      in oklab,
+      var(--lr-time-range-preset-active-bg, var(--lr-color-brand)),
+      var(--lr-color-mix-partner) var(--lr-color-mix-active)
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--lr-time-range-preset-active-border-color, var(--lr-color-brand)),
+      var(--lr-color-mix-partner) var(--lr-color-mix-active)
+    );
+  }
   [part="preset-button"]:disabled {
-    /* Dimming already comes from :host(:disabled)'s opacity below (applies
-       to the whole host, presets row included) — stacking a second opacity
-       here would compound multiplicatively and over-dim relative to the
-       handles, which only restate the cursor for the same reason. */
     cursor: not-allowed;
   }
   [part="base"] {
@@ -196,7 +175,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-time-range-handle-bg, var(--lr-color-brand));
     border: var(--lr-border-width-medium) solid
       var(--lr-time-range-handle-border-color, var(--lr-color-surface));
-    /* Resting chrome, not an overlay: a knob riding on its own track, matching lr-slider's thumb. */
     box-shadow: var(--lr-shadow-s);
     transform: translateX(-50%);
     cursor: grab;
@@ -208,12 +186,6 @@ import{css}from"lit";const styles=css`
   [part^="handle"][data-at-domain-end] {
     transform: translateX(-100%);
   }
-  /* [part^='handle'] is positioned with a logical inset-inline-start:<pct>%
-     (set inline in render()), which the browser anchors to the box's own
-     *start* edge -- the physical right edge under :dir(rtl). The fixed
-     translateX(-50%) above assumes an LTR left edge anchor, so it has to
-     flip sign under RTL or the visible dot ends up a full handle-width off
-     from its true track position. */
   :host(:dir(rtl)) [part^="handle"] {
     transform: translateX(50%);
   }
@@ -223,23 +195,6 @@ import{css}from"lit";const styles=css`
   :host(:dir(rtl)) [part^="handle"][data-at-domain-end] {
     transform: translateX(100%);
   }
-  /*
-   * The visible dot's base size is var(--lr-size-14px) by design, but only renders at that literal
-   * value at the default \`m\` tier (scale 1) -- at every other tier it scales proportionally with
-   * --lr-time-range-size-scale, from 7px at 2xs up to 19.6px at xl. Whatever the tier, the dot alone
-   * is well under the ~var(--lr-size-24px) minimum touch target size despite \`touch-action: none\`
-   * signalling this is meant to be touch-dragged. Widen the actual hit/drag area with a
-   * transparent ::before instead of growing the handle box itself -- and unlike the dot, the
-   * ::before is deliberately floored at 24px via max() below (see its own size declarations), so
-   * the drag hit-area never shrinks with the visible dot at the small tiers, only grows past 24px
-   * once the scaled 28px base overtakes the floor (m and up):
-   * onPointerMove (time-range.ts) never reads the handle's own
-   * getBoundingClientRect() — it only measures \`[part="base"]\`'s rect and
-   * e.clientX/e.clientY — and a pointerdown inside the ::before still
-   * reports \`e.target\` as the real handle element (pseudo-elements have no
-   * separate DOM node/event target), so this is purely additive and cannot
-   * change the drag math.
-   */
   [part^="handle"]::before {
     content: "";
     position: absolute;
@@ -258,10 +213,6 @@ import{css}from"lit";const styles=css`
     inset-inline-start: 100%;
     transform: translate(-100%, -50%);
   }
-  /* Same logical-inset-vs-physical-transform mismatch as the handle itself:
-     this enlarged hit-area is centered on inset-inline-start: 50%, so its
-     horizontal translate must flip sign under RTL too or the actual drag
-     hit zone detaches from the visible handle. */
   :host(:dir(rtl))
     [part^="handle"]:not([data-at-domain-start]):not(
       [data-at-domain-end]
@@ -278,10 +229,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Gives mouse users the same 'this is interactive' cue the :focus-visible ring above already
-     gives keyboard users, matching the sibling [part='preset-button']:hover treatment above --
-     gated via :host(:not(:disabled)) the same way lr-checkbox's/lr-radio's [part='base']:hover
-     rules are, since a disabled handle must not still brighten on hover. */
   :host(:not(:disabled)) [part^="handle"]:hover {
     background: var(
       --lr-time-range-handle-hover-bg,
@@ -292,12 +239,6 @@ import{css}from"lit";const styles=css`
       )
     );
   }
-  /* Pressed = the grab itself, which is the only feedback a drag has before the value starts
-     moving: the knob mixes a full step further toward the text colour and the cursor closes.
-     Both states mix the fill instead of running filter: brightness() over the handle -- the filter
-     applied to the whole subtree, so it also washed out the surface-coloured ring and the shadow
-     that separate the knob from its own track, and it did nothing at all on a theme whose brand
-     colour is pure white or pure black. */
   :host(:not(:disabled)) [part^="handle"]:active {
     background: var(
       --lr-time-range-handle-pressed-bg,
@@ -309,24 +250,11 @@ import{css}from"lit";const styles=css`
     );
     cursor: grabbing;
   }
-  /* :host(:disabled), not :host([disabled]) -- this is a form-associated custom element
-     (static formAssociated = true), so the UA computes its disabled state (and therefore
-     :disabled/:enabled matching) the same way it does for a native <input>: 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 time-range disabled purely via
-     an ancestor fieldset had effectiveDisabled correctly gating pointer/keyboard interaction and
-     tabindex/aria-disabled on the handles and preset buttons, but the host still rendered at full
-     opacity with a normal cursor. Mirrors lr-radio's/lr-checkbox's identical fix. */
   :host(:disabled) {
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
   :host(:disabled) [part^="handle"] {
-    /* [part^='handle'] above sets \`cursor: grab\` unconditionally, which
-       would otherwise keep winning over the inherited :host cursor (it
-       isn't conditioned on [disabled]) — restate not-allowed here so the
-       cursor actually changes over the handles themselves, not just the
-       track/base. */
     cursor: not-allowed;
   }
   @media (prefers-reduced-motion: reduce) {

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

@@ -54,13 +54,20 @@ export interface LyraTokenInputEventMap {
  * @event lr-change - Lyra commit alias; detail is `{ value }` with the current token list.
  * @event focus - Native `FocusEvent` relayed from the draft input or inline token editor.
  * @event blur - Native `FocusEvent` relayed from the draft input or inline token editor.
- * @event lr-add - One or more tokens were added in a single commit. Detail is
+ * @event lr-add - One or more tokens are about to be added in a single commit. Detail is
  *   `{ value, values }`, where `value` is the final added token for compatibility and `values` is
- *   the complete ordered batch.
+ *   the complete ordered batch. Cancelable -- call `preventDefault()` to veto the add (e.g. a
+ *   server-side validation check) and the tokens stay out of `value`; the typed draft text is left
+ *   in the input unchanged so the user can correct it, rather than being silently cleared.
  * @event lr-remove - A token is about to be removed; detail is `{ value, index }`. Cancelable --
  *   call `preventDefault()` to veto the removal (e.g. pending an async confirmation or a
  *   protected-token check) and the token stays in `value` unchanged.
- * @event lr-token-edit - An existing token was edited in place and committed; detail is `{ value, previousValue, index }`. Not emitted for a reverted, unchanged, emptied, or duplicate-colliding edit.
+ * @event lr-token-edit - An existing token is about to be edited in place; detail is
+ *   `{ value, previousValue, index }`. Not emitted for a reverted, unchanged, emptied, or
+ *   duplicate-colliding edit -- those close the editor with no event. Cancelable -- call
+ *   `preventDefault()` to veto the edit and the token stays in `value` unchanged; the inline
+ *   editor stays open with the user's edited text intact so they can correct it, rather than
+ *   closing and discarding it.
  * @event lr-invalid - The token list failed a validity check. Cancelable: calling
  * `preventDefault()` also cancels the native `invalid` event behind it, suppressing the
  * browser's own validation bubble so an app can present the failure its own way.
@@ -340,12 +347,19 @@ export declare class LyraTokenInput extends LyraElement<LyraTokenInputEventMap>
     /** Close the editor discarding its contents, returning focus to the token it was opened from. */
     private cancelEdit;
     /**
-     * Close the editor, applying its contents when they are a usable change. The editor is closed
-     * first so the teardown blur it triggers re-enters this method as a no-op rather than committing
-     * (and emitting `change`) a second time. An emptied editor cancels rather than removing the
-     * token -- removal stays the explicit job of the remove button -- and an edit colliding with an
-     * existing token under `allowDuplicates = false` is discarded, mirroring how `addDraft()` skips a
-     * duplicate candidate instead of rejecting the whole entry.
+     * Close the editor, applying its contents when they are a usable change. An emptied editor
+     * cancels rather than removing the token -- removal stays the explicit job of the remove button
+     * -- and an edit colliding with an existing token under `allowDuplicates = false` is discarded,
+     * mirroring how `addDraft()` skips a duplicate candidate instead of rejecting the whole entry.
+     * None of those "no usable change" cases fire `lr-token-edit`, so the editor closes for them
+     * unconditionally.
+     *
+     * A genuine change emits `lr-token-edit` as cancelable and checks `defaultPrevented` *before*
+     * closing the editor or mutating `value` -- the same emit-then-check-then-mutate shape
+     * `removeToken()` uses for `lr-remove`. A vetoed edit leaves the editor open with the user's
+     * edited (uncommitted) text intact, so they can correct it, rather than closing and discarding
+     * it. Only past that veto check does the editor close first, so the teardown blur it triggers
+     * re-enters this method as a no-op rather than committing (and emitting `change`) a second time.
      */
     private commitEdit;
     private moveRovingFocus;