@aceshooting/lyra-ui 18.3.0 → 19.0.0

package/dist/components/retrieval/retrieval-search/retrieval-search.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}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import"../../forms/input/input.class.js";import"../../layout/segmented/segmented.class.js";import"../../overlays/chip/chip.class.js";import"../../overlays/chip/chip-group.class.js";import"../../overlays/spinner/spinner.class.js";import"../../overlays/empty/empty.class.js";import{styles}from"./retrieval-search.styles.js";import{contextualSizes}from"../../../internal/contextual-vocabulary.styles.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{retrievalSemanticLabel,retrievalSemanticRole}from"../retrieval-semantic-owner.js";import{formatBoundedRetrievalValue}from"../retrieval-value-format.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{announceAfterFirstPaint}from"../retrieval-announcements.js";import{literalSetConverter}from"../../../internal/converters.js";import{activeElementIn}from"../../../internal/active-element.js";import{canonicalIdentityList,isRecord}from"../retrieval-identity.js";import{LYRA_DEFAULT_cancel,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_retrievalFilterChipLabel,LYRA_DEFAULT_retrievalFiltersLabel,LYRA_DEFAULT_retrievalModeHybrid,LYRA_DEFAULT_retrievalModeKeyword,LYRA_DEFAULT_retrievalModeLabel,LYRA_DEFAULT_retrievalModeVector,LYRA_DEFAULT_retrievalSearchEmptyDescription,LYRA_DEFAULT_retrievalSearchLabel,LYRA_DEFAULT_search,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const RETRIEVAL_MODE=literalSetConverter(["vector","keyword","hybrid"],"hybrid");class LyraRetrievalSearch extends LyraElement{constructor(){super(...arguments),this.query="",this._mode="hybrid",this.filters={},this.scope=[],this.loading=!1,this.errorText="",this.empty=!1,this.announce=!1,this.placeholder="",this.accessibleLabel=null,this.isMounting=!0,this.initialStateAnnounced=!1,this.connectionGeneration=0,this.wasEmptyPresented=!1,this.chipFocusGeneration=0,this.onQueryInput=e=>{e.stopPropagation(),this.query=e.detail.value},this.onQueryKeyDown=e=>{e.key==="Enter"&&(e.isComposing||e.keyCode===229||(e.preventDefault(),this.submit()))},this.onModeChange=e=>{e.stopPropagation(),this.mode=e.detail.value},this.containModeEvent=e=>{e.stopPropagation()},this.onSubmitClick=()=>{if(this.loading){this.cancel();return}this.submit()}}static{this.defaultStrings={...super.defaultStrings,cancel:LYRA_DEFAULT_cancel,fieldRequired:LYRA_DEFAULT_fieldRequired,noMatches:LYRA_DEFAULT_noMatches,retrievalFilterChipLabel:LYRA_DEFAULT_retrievalFilterChipLabel,retrievalFiltersLabel:LYRA_DEFAULT_retrievalFiltersLabel,retrievalModeHybrid:LYRA_DEFAULT_retrievalModeHybrid,retrievalModeKeyword:LYRA_DEFAULT_retrievalModeKeyword,retrievalModeLabel:LYRA_DEFAULT_retrievalModeLabel,retrievalModeVector:LYRA_DEFAULT_retrievalModeVector,retrievalSearchEmptyDescription:LYRA_DEFAULT_retrievalSearchEmptyDescription,retrievalSearchLabel:LYRA_DEFAULT_retrievalSearchLabel,search:LYRA_DEFAULT_search,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.ownedCollectionProperties=Object.freeze(["filters","scope"])}static{this.styles=[LyraElement.styles,contextualSizes,styles]}static{this.immutableEventDetails=Object.freeze(["lr-search","lr-filters-change"])}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}get mode(){return this._mode}set mode(next){const normalized=RETRIEVAL_MODE.normalize(next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}connectedCallback(){super.connectedCallback(),this.errorAnnouncementSink??=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}),this.emptyAnnouncementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this});const generation=++this.connectionGeneration;announceAfterFirstPaint(this,()=>generation===this.connectionGeneration,()=>{!this.announce||this.initialStateAnnounced||(this.initialStateAnnounced=!0,this.announcePresentedState())})}disconnectedCallback(){this.isMounting=!0,this.connectionGeneration+=1,this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0,this.emptyAnnouncementSink?.release(),this.emptyAnnouncementSink=void 0,this.wasEmptyPresented=!1,super.disconnectedCallback()}updated(changed){super.updated(changed);const wasMounting=this.isMounting;this.isMounting=!1,!wasMounting&&changed.has("errorText")&&this.errorText!==""&&this.isConnected&&(this.initialStateAnnounced=!0,this.errorAnnouncementSink?.announce(this.errorText));const emptyPresented=this.empty&&!this.loading&&this.errorText==="";!wasMounting&&!this.wasEmptyPresented&&emptyPresented&&this.isConnected&&(this.initialStateAnnounced=!0,this.emptyAnnouncementSink?.announce(this.localize("noMatches"))),this.wasEmptyPresented=emptyPresented}announcePresentedState(){if(this.errorText!==""){this.errorAnnouncementSink?.announce(this.errorText);return}this.empty&&!this.loading&&this.emptyAnnouncementSink?.announce(this.localize("noMatches"))}modeItems(){return[{value:"vector",label:this.localize("retrievalModeVector")},{value:"keyword",label:this.localize("retrievalModeKeyword")},{value:"hybrid",label:this.localize("retrievalModeHybrid")}]}formatFilterValue(value){const sentinel=this.localize("valueInvalid");return formatBoundedRetrievalValue(value,{locale:this.effectiveLocale,invalid:sentinel,truncated:sentinel})}get normalizedFilters(){return isRecord(this.filters)?this.filters:{}}get normalizedScope(){return canonicalIdentityList(this.scope)}buildQuery(){return{text:this.query,mode:this.mode,filters:{...this.normalizedFilters},scope:[...this.normalizedScope]}}submit(){this.loading&&this.emit("lr-cancel",{reason:"superseded"}),this.emit("lr-search",this.buildQuery())}cancel(){this.emit("lr-cancel",{})}emitFiltersChange(){this.emit("lr-filters-change",{filters:{...this.normalizedFilters},scope:[...this.normalizedScope]})}repairFocusAfterChipRemoval(index,shouldRepair){const generation=++this.chipFocusGeneration;shouldRepair&&this.updateComplete.then(()=>{if(!this.isConnected||generation!==this.chipFocusGeneration)return;const chips=this.renderRoot.querySelectorAll('[part="filters"] lr-chip'),target=chips[Math.min(index,chips.length-1)];if(target){target.focus();return}this.renderRoot.querySelector('[part="query"]')?.focus()})}removeScope(value,shouldRepairFocus=!1){const scope=this.normalizedScope,index=scope.indexOf(value);this.scope=scope.filter(s=>s!==value),this.emitFiltersChange(),this.repairFocusAfterChipRemoval(Math.max(0,index),shouldRepairFocus)}removeFilter(key,shouldRepairFocus=!1){const filters=this.normalizedFilters,index=this.normalizedScope.length+Object.keys(filters).indexOf(key),next={...filters};delete next[key],this.filters=next,this.emitFiltersChange(),this.repairFocusAfterChipRemoval(Math.max(0,index),shouldRepairFocus)}render(){const label=retrievalSemanticLabel(this,this.accessibleLabel??(this.label==null?this.localize("retrievalSearchLabel"):this.label)),searchRole=retrievalSemanticRole(this,"search"),filters=this.normalizedFilters,scope=this.normalizedScope,hasFilters=Object.keys(filters).length>0||scope.length>0;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import"../../forms/input/input.class.js";import"../../layout/segmented/segmented.class.js";import"../../overlays/chip/chip.class.js";import"../../overlays/chip/chip-group.class.js";import"../../overlays/spinner/spinner.class.js";import"../../overlays/empty/empty.class.js";import{styles}from"./retrieval-search.styles.js";import{contextualSizes}from"../../../internal/contextual-vocabulary.styles.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{retrievalSemanticLabel,retrievalSemanticRole}from"../retrieval-semantic-owner.js";import{formatBoundedRetrievalValue}from"../retrieval-value-format.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{announceAfterFirstPaint}from"../retrieval-announcements.js";import{literalSetConverter}from"../../../internal/converters.js";import{activeElementIn}from"../../../internal/active-element.js";import{canonicalIdentityList,isRecord}from"../retrieval-identity.js";import{LYRA_DEFAULT_cancel,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_retrievalFilterChipLabel,LYRA_DEFAULT_retrievalFiltersLabel,LYRA_DEFAULT_retrievalModeHybrid,LYRA_DEFAULT_retrievalModeKeyword,LYRA_DEFAULT_retrievalModeLabel,LYRA_DEFAULT_retrievalModeVector,LYRA_DEFAULT_retrievalSearchEmptyDescription,LYRA_DEFAULT_retrievalSearchLabel,LYRA_DEFAULT_search,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const RETRIEVAL_MODE=literalSetConverter(["vector","keyword","hybrid"],"hybrid");class LyraRetrievalSearch extends LyraElement{constructor(){super(...arguments),this.query="",this._mode="hybrid",this.filters={},this.scope=[],this.loading=!1,this.errorText="",this.empty=!1,this.announce=!1,this.accessibleLabel=null,this.isMounting=!0,this.initialStateAnnounced=!1,this.connectionGeneration=0,this.wasEmptyPresented=!1,this.chipFocusGeneration=0,this.onQueryInput=e=>{e.stopPropagation(),this.query=e.detail.value},this.onQueryKeyDown=e=>{e.key==="Enter"&&(e.isComposing||e.keyCode===229||(e.preventDefault(),this.submit()))},this.onModeChange=e=>{e.stopPropagation(),this.mode=e.detail.value},this.containModeEvent=e=>{e.stopPropagation()},this.onSubmitClick=()=>{if(this.loading){this.cancel();return}this.submit()}}static{this.defaultStrings={...super.defaultStrings,cancel:LYRA_DEFAULT_cancel,fieldRequired:LYRA_DEFAULT_fieldRequired,noMatches:LYRA_DEFAULT_noMatches,retrievalFilterChipLabel:LYRA_DEFAULT_retrievalFilterChipLabel,retrievalFiltersLabel:LYRA_DEFAULT_retrievalFiltersLabel,retrievalModeHybrid:LYRA_DEFAULT_retrievalModeHybrid,retrievalModeKeyword:LYRA_DEFAULT_retrievalModeKeyword,retrievalModeLabel:LYRA_DEFAULT_retrievalModeLabel,retrievalModeVector:LYRA_DEFAULT_retrievalModeVector,retrievalSearchEmptyDescription:LYRA_DEFAULT_retrievalSearchEmptyDescription,retrievalSearchLabel:LYRA_DEFAULT_retrievalSearchLabel,search:LYRA_DEFAULT_search,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.ownedCollectionProperties=Object.freeze(["filters","scope"])}static{this.styles=[LyraElement.styles,contextualSizes,styles]}static{this.immutableEventDetails=Object.freeze(["lr-search","lr-filters-change"])}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}get mode(){return this._mode}set mode(next){const normalized=RETRIEVAL_MODE.normalize(next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}connectedCallback(){super.connectedCallback(),this.errorAnnouncementSink??=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}),this.emptyAnnouncementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this});const generation=++this.connectionGeneration;announceAfterFirstPaint(this,()=>generation===this.connectionGeneration,()=>{!this.announce||this.initialStateAnnounced||(this.initialStateAnnounced=!0,this.announcePresentedState())})}disconnectedCallback(){this.isMounting=!0,this.connectionGeneration+=1,this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0,this.emptyAnnouncementSink?.release(),this.emptyAnnouncementSink=void 0,this.wasEmptyPresented=!1,super.disconnectedCallback()}updated(changed){super.updated(changed);const wasMounting=this.isMounting;this.isMounting=!1,!wasMounting&&changed.has("errorText")&&this.errorText!==""&&this.isConnected&&(this.initialStateAnnounced=!0,this.errorAnnouncementSink?.announce(this.errorText));const emptyPresented=this.empty&&!this.loading&&this.errorText==="";!wasMounting&&!this.wasEmptyPresented&&emptyPresented&&this.isConnected&&(this.initialStateAnnounced=!0,this.emptyAnnouncementSink?.announce(this.localize("noMatches"))),this.wasEmptyPresented=emptyPresented}announcePresentedState(){if(this.errorText!==""){this.errorAnnouncementSink?.announce(this.errorText);return}this.empty&&!this.loading&&this.emptyAnnouncementSink?.announce(this.localize("noMatches"))}modeItems(){return[{value:"vector",label:this.localize("retrievalModeVector")},{value:"keyword",label:this.localize("retrievalModeKeyword")},{value:"hybrid",label:this.localize("retrievalModeHybrid")}]}formatFilterValue(value){const sentinel=this.localize("valueInvalid");return formatBoundedRetrievalValue(value,{locale:this.effectiveLocale,invalid:sentinel,truncated:sentinel})}get normalizedFilters(){return isRecord(this.filters)?this.filters:{}}get normalizedScope(){return canonicalIdentityList(this.scope)}buildQuery(){return{text:this.query,mode:this.mode,filters:{...this.normalizedFilters},scope:[...this.normalizedScope]}}submit(){this.loading&&this.emit("lr-cancel",{reason:"superseded"}),this.emit("lr-search",this.buildQuery())}cancel(){this.emit("lr-cancel",{})}emitFiltersChange(){this.emit("lr-filters-change",{filters:{...this.normalizedFilters},scope:[...this.normalizedScope]})}repairFocusAfterChipRemoval(index,shouldRepair){const generation=++this.chipFocusGeneration;shouldRepair&&this.updateComplete.then(()=>{if(!this.isConnected||generation!==this.chipFocusGeneration)return;const chips=this.renderRoot.querySelectorAll('[part="filters"] lr-chip'),target=chips[Math.min(index,chips.length-1)];if(target){target.focus();return}this.renderRoot.querySelector('[part="query"]')?.focus()})}removeScope(value,shouldRepairFocus=!1){const scope=this.normalizedScope,index=scope.indexOf(value);this.scope=scope.filter(s=>s!==value),this.emitFiltersChange(),this.repairFocusAfterChipRemoval(Math.max(0,index),shouldRepairFocus)}removeFilter(key,shouldRepairFocus=!1){const filters=this.normalizedFilters,index=this.normalizedScope.length+Object.keys(filters).indexOf(key),next={...filters};delete next[key],this.filters=next,this.emitFiltersChange(),this.repairFocusAfterChipRemoval(Math.max(0,index),shouldRepairFocus)}render(){const label=retrievalSemanticLabel(this,this.accessibleLabel??(this.label==null?this.localize("retrievalSearchLabel"):this.label)),searchRole=retrievalSemanticRole(this,"search"),filters=this.normalizedFilters,scope=this.normalizedScope,hasFilters=Object.keys(filters).length>0||scope.length>0;return html`
       <div
         part="base"
         role=${searchRole??nothing}
@@ -10,7 +10,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             type="search"
             clearable
             .size=${this.size??"m"}
-            placeholder=${this.placeholder||this.localize("search")}
+            placeholder=${this.placeholder==null?this.localize("search"):this.placeholder}
             .value=${this.query}
             @lr-input=${this.onQueryInput}
             @keydown=${this.onQueryKeyDown}

package/dist/components/utility/copy-button/copy-button.class.d.ts

@@ -85,12 +85,15 @@ value:string;
 /** Id-based source expression. Takes precedence over `value`; supports `id`, `id[attr]`, and
 * `id.property`. */
 from:string;
-/** Accessible name and resting tooltip text. Empty uses the localized Copy string. */
-copyLabel:string;
-/** Confirmation accessible name and tooltip text. Empty uses the localized Copied string. */
-successLabel:string;
-/** Failure accessible name and tooltip text. Empty uses the localized failure string. */
-errorLabel:string;
+/** Accessible name and resting tooltip text. When omitted, uses localized Copy; an explicit
+*  empty string intentionally suppresses that fallback. */
+copyLabel?:string;
+/** Confirmation accessible name and tooltip text. When omitted, uses localized Copied; an
+*  explicit empty string intentionally suppresses that fallback. */
+successLabel?:string;
+/** Failure accessible name and tooltip text. When omitted, uses localized failure copy; an
+*  explicit empty string intentionally suppresses that fallback. */
+errorLabel?:string;
 /** Tooltip behavior: normal hover/focus plus feedback, feedback only, or disabled. */
 tooltip:LyraCopyButtonTooltip;
 /** Side on which the tooltip appears. */

package/dist/components/utility/copy-button/copy-button.class.js

@@ -37,7 +37,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       aria-hidden="true"
       focusable="false"
     ><circle cx="12" cy="12" r="9"></circle><path d="M12 7.25v5.5"></path><path d="M12 16.4v.01"></path></svg>
-  `}function isElementValue(value){if(value===null||typeof value!="object")return!1;const candidate=value;return candidate.nodeType===1&&typeof candidate.getAttribute=="function"}function isHtmlElementValue(value){if(!isElementValue(value))return!1;const candidate=value;return candidate.namespaceURI==="http://www.w3.org/1999/xhtml"&&typeof candidate.focus=="function"&&typeof candidate.blur=="function"&&typeof candidate.click=="function"}class CopySourceError extends Error{constructor(message){super(message),this.name="CopySourceError"}}class LyraCopyButton extends LyraElement{static{this.defaultStrings={...super.defaultStrings,copied:LYRA_DEFAULT_copied,copy:LYRA_DEFAULT_copy,copyFailed:LYRA_DEFAULT_copyFailed,fieldRequired:LYRA_DEFAULT_fieldRequired}}static{this.styles=[LyraElement.styles,styles]}constructor(){super(),this.value="",this.from="",this.copyLabel="",this.successLabel="",this.errorLabel="",this.tooltip="full",this.tooltipPlacement="top",this.hoist=!1,this.accessibleLabel=null,this.disabled=!1,this.feedbackDuration=DEFAULT_FEEDBACK_DURATION,this.status="rest",this.hasCustomTrigger=!1,this.triggerCollected=!1,this.internals=attachInternalsSafely(this),this.toolbarAction=this.createToolbarAction(),this.copyGeneration=0,this.onClick=()=>{this.copy()},this.onDefaultSlotChange=event=>{this.onDefaultSlotChangeFromSlot(event.currentTarget)},this.onCustomTriggerClick=()=>{this.hasCustomTrigger&&this.copy()},this.stopInternalTooltipEvent=event=>{event.stopPropagation()},this.internals.role="group"}willUpdate(changed){super.willUpdate(changed),this.hasUpdated&&(changed.has("value")||changed.has("from"))&&this.resetFeedback()}updated(changed){super.updated(changed),(changed.has("disabled")||changed.has("hasCustomTrigger"))&&this.emit("lr-toolbar-actions-change")}firstUpdated(changed){super.firstUpdated(changed);const slot=this.defaultSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.onDefaultSlotChangeFromSlot(s))})}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","group"),this.sink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this})}disconnectedCallback(){this.toolbarAction.releaseTabIndex?.(),super.disconnectedCallback(),this.resetFeedback(),this.sink?.release(),this.sink=void 0}adoptedCallback(){this.toolbarAction.releaseTabIndex?.(),super.adoptedCallback(),this.resetFeedback(),this.sink?.release(),this.sink=void 0}cancelFeedbackTimer(){const timer=this.copyTimer;this.copyTimer=void 0,timer&&timer.owner.clearTimeout(timer.handle)}resetFeedback(){this.copyGeneration+=1,this.cancelFeedbackTimer(),this.setStatus("rest")}setStatus(status){this.status=status,setCustomState(this.internals,"success",status==="success"),setCustomState(this.internals,"error",status==="error")}customTrigger(){return this.defaultSlot?.assignedElements({flatten:!0}).find(isHtmlElementValue)}activeTrigger(){return this.hasCustomTrigger?this.customTrigger():this.buttonEl}composedTriggerAction(){if(this.hasCustomTrigger)return;const[action]=this.buttonEl?.getToolbarActions()??[];return action}createToolbarAction(){const host=this;let leasedTrigger,authoredTabIndex=null,lastManagedTabIndex=null,consumerOwnsTabIndex=!1,delegated;const releaseDelegated=()=>{const previous=delegated;delegated=void 0,previous?.releaseTabIndex?.()},releaseTabIndex=()=>{releaseDelegated();const target=leasedTrigger;target&&target.getAttribute("tabindex")===lastManagedTabIndex&&(authoredTabIndex===null?target.removeAttribute("tabindex"):target.setAttribute("tabindex",authoredTabIndex)),leasedTrigger=void 0,authoredTabIndex=null,lastManagedTabIndex=null,consumerOwnsTabIndex=!1};return{id:"copy",get disabled(){const trigger=host.activeTrigger();return!trigger||host.disabled||trigger.disabled===!0},focus(options){host.activeTrigger()?.focus(options)},setTabIndex(tabIndex){const composed=host.composedTriggerAction();if(composed){delegated!==composed&&(releaseTabIndex(),delegated=composed),composed.setTabIndex(tabIndex);return}releaseDelegated();const trigger=host.activeTrigger();if(!trigger){releaseTabIndex();return}if(leasedTrigger!==trigger&&(releaseTabIndex(),leasedTrigger=trigger,authoredTabIndex=trigger.getAttribute("tabindex")),consumerOwnsTabIndex||lastManagedTabIndex!==null&&trigger.getAttribute("tabindex")!==lastManagedTabIndex){consumerOwnsTabIndex=!0;return}trigger.tabIndex=tabIndex,lastManagedTabIndex=trigger.getAttribute("tabindex")},releaseTabIndex,matchesEventPath(path){const trigger=host.activeTrigger();return trigger!=null&&path.includes(trigger)}}}getToolbarActions(){return[this.toolbarAction]}focus(options){this.activeTrigger()?.focus(options)}blur(){this.activeTrigger()?.blur()}click(){this.activeTrigger()?.click()}sourceById(id){const root=this.getRootNode();if((root.nodeType===9||root.nodeType===11)&&typeof root.getElementById=="function"){const source=root.getElementById(id);if(isElementValue(source))return source}const documentSource=this.ownerDocument.getElementById(id);return isElementValue(documentSource)?documentSource:null}resolveCopyText(){if(!this.from){if(!this.value)throw new CopySourceError("The copy value is empty.");return this.value}const expression=this.from.trim(),attributeMatch=/^(.*?)\[([^\]]+)\]$/.exec(expression),propertyMatch=attributeMatch?null:/^(.*?)\.([^.]*)$/.exec(expression),id=(attributeMatch?.[1]??propertyMatch?.[1]??expression).trim(),source=id?this.sourceById(id):null;if(!source)throw new CopySourceError(`The copy source "${id}" was not found.`);let resolved;if(attributeMatch){const attribute=attributeMatch[2].trim();resolved=attribute?source.getAttribute(attribute):null}else if(propertyMatch){const propertyName=propertyMatch[2].trim();resolved=propertyName?source[propertyName]:void 0}else resolved=source.textContent;const text=resolved==null?"":String(resolved);if(!text)throw new CopySourceError(`The copy source "${expression}" resolved to an empty value.`);return text}showStatus(status){const owner=this.ownerDocument.defaultView;if(!this.isConnected||!owner)return;this.setStatus(status),this.sink?.announce(this.statusLabel(status)),this.cancelFeedbackTimer();const duration=finiteDuration(this.feedbackDuration,DEFAULT_FEEDBACK_DURATION,0),generation=this.copyGeneration;let handle=0;handle=owner.setTimeout(()=>{const timer=this.copyTimer;timer?.owner!==owner||timer.handle!==handle||timer.generation!==generation||generation!==this.copyGeneration||!this.isConnected||this.ownerDocument.defaultView!==owner||(this.copyTimer=void 0,this.setStatus("rest"))},duration),this.copyTimer={owner,handle,generation}}reportFailure(outcome){this.showStatus("error"),this.emit("lr-error"),this.emit("lr-copy-error",outcome)}async copy(){if(this.disabled)return;const generation=++this.copyGeneration,owner=this.isConnected?this.ownerDocument.defaultView:null;let text="";try{text=this.resolveCopyText()}catch(error){this.isCurrentCopy(generation)&&this.reportFailure(Object.freeze({ok:!1,text,reason:"failed",error}));return}if(!owner)return;const outcome=await writeClipboardText(owner,text);if(this.isCurrentCopy(generation,owner)){if(!outcome.ok){this.reportFailure(outcome);return}this.showStatus("success"),this.emit("lr-copy",outcome)}}isCurrentCopy(generation,owner){return this.isConnected&&generation===this.copyGeneration&&(owner===void 0||this.ownerDocument.defaultView===owner)}onDefaultSlotChangeFromSlot(slot){const trigger=slot.assignedElements({flatten:!0}).find(isHtmlElementValue);if(this.triggerCollected&&trigger===this.lastObservedTrigger)return;this.triggerCollected=!0,this.lastObservedTrigger=trigger;const hasCustomTrigger=trigger!==void 0;if(hasCustomTrigger!==this.hasCustomTrigger){this.hasCustomTrigger=hasCustomTrigger;return}this.emit("lr-toolbar-actions-change")}statusLabel(status){return status==="success"?this.successLabel||this.localize("copied"):status==="error"?this.errorLabel||this.localize("copyFailed"):this.copyLabel||this.localize("copy")}renderIcon(){return this.status==="error"?html`<span part="error-icon" aria-hidden="true"><slot name="error-icon">${errorIcon()}</slot></span>`:this.status==="success"?html`<span part="success-icon" aria-hidden="true"><slot name="success-icon">${checkIcon()}</slot></span>`:html`<span part="copy-icon" aria-hidden="true"><slot name="copy-icon">${copyIcon()}</slot></span>`}render(){const statusLabel=this.statusLabel(this.status),feedback=this.status==="rest"?"":statusLabel,part=this.status==="success"?"base button base-success":this.status==="error"?"base button base-error":"base button",tooltipDisabled=this.tooltip==="none",tooltipOpen=!tooltipDisabled&&this.status!=="rest",buttonLabel=this.accessibleLabel?.trim()?this.accessibleLabel:statusLabel;return html`
+  `}function isElementValue(value){if(value===null||typeof value!="object")return!1;const candidate=value;return candidate.nodeType===1&&typeof candidate.getAttribute=="function"}function isHtmlElementValue(value){if(!isElementValue(value))return!1;const candidate=value;return candidate.namespaceURI==="http://www.w3.org/1999/xhtml"&&typeof candidate.focus=="function"&&typeof candidate.blur=="function"&&typeof candidate.click=="function"}class CopySourceError extends Error{constructor(message){super(message),this.name="CopySourceError"}}class LyraCopyButton extends LyraElement{static{this.defaultStrings={...super.defaultStrings,copied:LYRA_DEFAULT_copied,copy:LYRA_DEFAULT_copy,copyFailed:LYRA_DEFAULT_copyFailed,fieldRequired:LYRA_DEFAULT_fieldRequired}}static{this.styles=[LyraElement.styles,styles]}constructor(){super(),this.value="",this.from="",this.tooltip="full",this.tooltipPlacement="top",this.hoist=!1,this.accessibleLabel=null,this.disabled=!1,this.feedbackDuration=DEFAULT_FEEDBACK_DURATION,this.status="rest",this.hasCustomTrigger=!1,this.triggerCollected=!1,this.internals=attachInternalsSafely(this),this.toolbarAction=this.createToolbarAction(),this.copyGeneration=0,this.onClick=()=>{this.copy()},this.onDefaultSlotChange=event=>{this.onDefaultSlotChangeFromSlot(event.currentTarget)},this.onCustomTriggerClick=()=>{this.hasCustomTrigger&&this.copy()},this.stopInternalTooltipEvent=event=>{event.stopPropagation()},this.internals.role="group"}willUpdate(changed){super.willUpdate(changed),this.hasUpdated&&(changed.has("value")||changed.has("from"))&&this.resetFeedback()}updated(changed){super.updated(changed),(changed.has("disabled")||changed.has("hasCustomTrigger"))&&this.emit("lr-toolbar-actions-change")}firstUpdated(changed){super.firstUpdated(changed);const slot=this.defaultSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.onDefaultSlotChangeFromSlot(s))})}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","group"),this.sink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this})}disconnectedCallback(){this.toolbarAction.releaseTabIndex?.(),super.disconnectedCallback(),this.resetFeedback(),this.sink?.release(),this.sink=void 0}adoptedCallback(){this.toolbarAction.releaseTabIndex?.(),super.adoptedCallback(),this.resetFeedback(),this.sink?.release(),this.sink=void 0}cancelFeedbackTimer(){const timer=this.copyTimer;this.copyTimer=void 0,timer&&timer.owner.clearTimeout(timer.handle)}resetFeedback(){this.copyGeneration+=1,this.cancelFeedbackTimer(),this.setStatus("rest")}setStatus(status){this.status=status,setCustomState(this.internals,"success",status==="success"),setCustomState(this.internals,"error",status==="error")}customTrigger(){return this.defaultSlot?.assignedElements({flatten:!0}).find(isHtmlElementValue)}activeTrigger(){return this.hasCustomTrigger?this.customTrigger():this.buttonEl}composedTriggerAction(){if(this.hasCustomTrigger)return;const[action]=this.buttonEl?.getToolbarActions()??[];return action}createToolbarAction(){const host=this;let leasedTrigger,authoredTabIndex=null,lastManagedTabIndex=null,consumerOwnsTabIndex=!1,delegated;const releaseDelegated=()=>{const previous=delegated;delegated=void 0,previous?.releaseTabIndex?.()},releaseTabIndex=()=>{releaseDelegated();const target=leasedTrigger;target&&target.getAttribute("tabindex")===lastManagedTabIndex&&(authoredTabIndex===null?target.removeAttribute("tabindex"):target.setAttribute("tabindex",authoredTabIndex)),leasedTrigger=void 0,authoredTabIndex=null,lastManagedTabIndex=null,consumerOwnsTabIndex=!1};return{id:"copy",get disabled(){const trigger=host.activeTrigger();return!trigger||host.disabled||trigger.disabled===!0},focus(options){host.activeTrigger()?.focus(options)},setTabIndex(tabIndex){const composed=host.composedTriggerAction();if(composed){delegated!==composed&&(releaseTabIndex(),delegated=composed),composed.setTabIndex(tabIndex);return}releaseDelegated();const trigger=host.activeTrigger();if(!trigger){releaseTabIndex();return}if(leasedTrigger!==trigger&&(releaseTabIndex(),leasedTrigger=trigger,authoredTabIndex=trigger.getAttribute("tabindex")),consumerOwnsTabIndex||lastManagedTabIndex!==null&&trigger.getAttribute("tabindex")!==lastManagedTabIndex){consumerOwnsTabIndex=!0;return}trigger.tabIndex=tabIndex,lastManagedTabIndex=trigger.getAttribute("tabindex")},releaseTabIndex,matchesEventPath(path){const trigger=host.activeTrigger();return trigger!=null&&path.includes(trigger)}}}getToolbarActions(){return[this.toolbarAction]}focus(options){this.activeTrigger()?.focus(options)}blur(){this.activeTrigger()?.blur()}click(){this.activeTrigger()?.click()}sourceById(id){const root=this.getRootNode();if((root.nodeType===9||root.nodeType===11)&&typeof root.getElementById=="function"){const source=root.getElementById(id);if(isElementValue(source))return source}const documentSource=this.ownerDocument.getElementById(id);return isElementValue(documentSource)?documentSource:null}resolveCopyText(){if(!this.from){if(!this.value)throw new CopySourceError("The copy value is empty.");return this.value}const expression=this.from.trim(),attributeMatch=/^(.*?)\[([^\]]+)\]$/.exec(expression),propertyMatch=attributeMatch?null:/^(.*?)\.([^.]*)$/.exec(expression),id=(attributeMatch?.[1]??propertyMatch?.[1]??expression).trim(),source=id?this.sourceById(id):null;if(!source)throw new CopySourceError(`The copy source "${id}" was not found.`);let resolved;if(attributeMatch){const attribute=attributeMatch[2].trim();resolved=attribute?source.getAttribute(attribute):null}else if(propertyMatch){const propertyName=propertyMatch[2].trim();resolved=propertyName?source[propertyName]:void 0}else resolved=source.textContent;const text=resolved==null?"":String(resolved);if(!text)throw new CopySourceError(`The copy source "${expression}" resolved to an empty value.`);return text}showStatus(status){const owner=this.ownerDocument.defaultView;if(!this.isConnected||!owner)return;this.setStatus(status),this.sink?.announce(this.statusLabel(status)),this.cancelFeedbackTimer();const duration=finiteDuration(this.feedbackDuration,DEFAULT_FEEDBACK_DURATION,0),generation=this.copyGeneration;let handle=0;handle=owner.setTimeout(()=>{const timer=this.copyTimer;timer?.owner!==owner||timer.handle!==handle||timer.generation!==generation||generation!==this.copyGeneration||!this.isConnected||this.ownerDocument.defaultView!==owner||(this.copyTimer=void 0,this.setStatus("rest"))},duration),this.copyTimer={owner,handle,generation}}reportFailure(outcome){this.showStatus("error"),this.emit("lr-error"),this.emit("lr-copy-error",outcome)}async copy(){if(this.disabled)return;const generation=++this.copyGeneration,owner=this.isConnected?this.ownerDocument.defaultView:null;let text="";try{text=this.resolveCopyText()}catch(error){this.isCurrentCopy(generation)&&this.reportFailure(Object.freeze({ok:!1,text,reason:"failed",error}));return}if(!owner)return;const outcome=await writeClipboardText(owner,text);if(this.isCurrentCopy(generation,owner)){if(!outcome.ok){this.reportFailure(outcome);return}this.showStatus("success"),this.emit("lr-copy",outcome)}}isCurrentCopy(generation,owner){return this.isConnected&&generation===this.copyGeneration&&(owner===void 0||this.ownerDocument.defaultView===owner)}onDefaultSlotChangeFromSlot(slot){const trigger=slot.assignedElements({flatten:!0}).find(isHtmlElementValue);if(this.triggerCollected&&trigger===this.lastObservedTrigger)return;this.triggerCollected=!0,this.lastObservedTrigger=trigger;const hasCustomTrigger=trigger!==void 0;if(hasCustomTrigger!==this.hasCustomTrigger){this.hasCustomTrigger=hasCustomTrigger;return}this.emit("lr-toolbar-actions-change")}statusLabel(status){return status==="success"?this.successLabel==null?this.localize("copied"):this.successLabel:status==="error"?this.errorLabel==null?this.localize("copyFailed"):this.errorLabel:this.copyLabel==null?this.localize("copy"):this.copyLabel}renderIcon(){return this.status==="error"?html`<span part="error-icon" aria-hidden="true"><slot name="error-icon">${errorIcon()}</slot></span>`:this.status==="success"?html`<span part="success-icon" aria-hidden="true"><slot name="success-icon">${checkIcon()}</slot></span>`:html`<span part="copy-icon" aria-hidden="true"><slot name="copy-icon">${copyIcon()}</slot></span>`}render(){const statusLabel=this.statusLabel(this.status),feedback=this.status==="rest"?"":statusLabel,part=this.status==="success"?"base button base-success":this.status==="error"?"base button base-error":"base button",tooltipDisabled=this.tooltip==="none",tooltipOpen=!tooltipDisabled&&this.status!=="rest",buttonLabel=this.accessibleLabel?.trim()?this.accessibleLabel:statusLabel;return html`
       <lr-tooltip
         .content=${statusLabel}
         .trigger=${this.tooltip==="full"?"hover focus":"manual"}

package/dist/components/utility/export-button/export-button.class.d.ts

@@ -57,6 +57,18 @@ readonly extension?:string;}export type LyraExportFormatOption=LyraExportFormat|
 *   menu's `fixed` default, read from computed style when it is (re)positioned. Set it once on
 *   `:root`, a theme, or one clipping ancestor to change every unset export button beneath it; an
 *   unrecognized value falls back to `fixed`.
+* @cssprop --lr-export-button-background - Trigger fill at rest. Overrides whatever the current
+*   `appearance` resolves to, leaving every other paint untouched.
+* @cssprop --lr-export-button-color - Trigger label and icon colour at rest. The escape hatch for
+*   `appearance="outlined"`, which paints the label `--lr-color-brand` and has no `variant` of its
+*   own to return it to neutral text.
+* @cssprop --lr-export-button-border - Trigger edge colour at rest.
+* @cssprop --lr-export-button-hover-background - Trigger fill on hover.
+* @cssprop --lr-export-button-hover-color - Trigger label and icon colour on hover.
+* @cssprop --lr-export-button-hover-border - Trigger edge colour on hover.
+* @cssprop --lr-export-button-active-background - Trigger fill while pressed.
+* @cssprop --lr-export-button-active-color - Trigger label and icon colour while pressed.
+* @cssprop --lr-export-button-active-border - Trigger edge colour while pressed.
 * @property size - Optional density on the shared `2xs` through `xl` ladder, including the
 *   `small`/`medium`/`large` aliases. It changes the trigger and menu-row typography and padding;
 *   the 40px default hit-area floor remains in place. Unset preserves the established geometry.

package/dist/components/utility/export-button/export-button.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; position: relative; --_lr-export-button-background: var(--lr-color-surface); --_lr-export-button-color: var(--lr-color-text); --_lr-export-button-border: var(--lr-color-border); --_lr-export-button-hover-background: var(--lr-color-surface); --_lr-export-button-hover-color: var(--lr-color-text); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-text); --_lr-export-button-active-border: var(--lr-color-brand); } :host([appearance='outlined']) { --_lr-export-button-background: transparent; --_lr-export-button-color: var(--lr-color-brand); --_lr-export-button-border: var(--lr-color-border-strong); --_lr-export-button-hover-background: var(--lr-color-brand-quiet); --_lr-export-button-hover-color: var(--lr-color-brand); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-brand); --_lr-export-button-active-border: var(--lr-color-brand); } :host([appearance='quiet']) { --_lr-export-button-background: transparent; --_lr-export-button-color: var(--lr-color-text-quiet); --_lr-export-button-border: var(--lr-color-border); --_lr-export-button-hover-background: var(--lr-color-brand-quiet); --_lr-export-button-hover-color: var(--lr-color-text-quiet); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-text-quiet); --_lr-export-button-active-border: var(--lr-color-brand); } [part~='trigger'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lr-space-xs); padding: var(--lr-space-xs) var(--lr-space-m); border: var(--lr-border-width-thin) solid var(--_lr-export-button-border); border-radius: var(--lr-radius); background: var(--_lr-export-button-background); color: var(--_lr-export-button-color); font: inherit; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); cursor: pointer; } :where([part~='trigger']):hover:where(:not(:disabled)) { background: var(--_lr-export-button-hover-background); color: var(--_lr-export-button-hover-color); border-color: var(--_lr-export-button-hover-border); } :where([part~='trigger']):active:where(:not(:disabled)) { background: var(--_lr-export-button-active-background); color: var(--_lr-export-button-active-color); border-color: var(--_lr-export-button-active-border); } :host([size='2xs']) [part~='trigger'], :host([size='xs']) [part~='trigger'], :host([size='s']) [part~='trigger'], :host([size='small']) [part~='trigger'], :host([size='m']) [part~='trigger'], :host([size='medium']) [part~='trigger'], :host([size='l']) [part~='trigger'], :host([size='large']) [part~='trigger'], :host([size='xl']) [part~='trigger'], :host([size='2xs']) [part='menu-item'], :host([size='xs']) [part='menu-item'], :host([size='s']) [part='menu-item'], :host([size='small']) [part='menu-item'], :host([size='m']) [part='menu-item'], :host([size='medium']) [part='menu-item'], :host([size='l']) [part='menu-item'], :host([size='large']) [part='menu-item'], :host([size='xl']) [part='menu-item'] { font-size: var(--lr-form-control-font-size); padding-block: var(--lr-form-control-padding-block); padding-inline: var(--lr-form-control-padding-inline); min-block-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); } [part~='trigger']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part~='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='trigger-error'] { border-color: var(--lr-color-danger); color: var(--lr-color-danger); } [part='menu'] { visibility: hidden; position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; inline-size: max-content; min-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-8rem), var(--lr-positioner-available-inline-size, 100vw) ); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-20rem), var(--lr-positioner-available-inline-size, 100vw) ); max-block-size: var(--lr-positioner-available-block-size, 100vh); overflow: auto; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); opacity: 0; transform: translateY(var(--lr-size-neg-4px)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast); } :host([open]) [part='menu'] { visibility: visible; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [part='menu'] { transition: none; } } [part='menu-item'] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lr-size-1px); box-sizing: border-box; inline-size: 100%; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); text-align: center; padding: var(--lr-space-xs) var(--lr-space-s); border: none; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--lr-radius); } :where([part='menu-item']):hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); } :where([part='menu-item']):active:where(:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='menu-item']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='menu-item']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='format-description'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='format-label'], [part='format-description'] { max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; position: relative; --_lr-export-button-background: var(--lr-color-surface); --_lr-export-button-color: var(--lr-color-text); --_lr-export-button-border: var(--lr-color-border); --_lr-export-button-hover-background: var(--lr-color-surface); --_lr-export-button-hover-color: var(--lr-color-text); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-text); --_lr-export-button-active-border: var(--lr-color-brand); } :host([appearance='outlined']) { --_lr-export-button-background: transparent; --_lr-export-button-color: var(--lr-color-brand); --_lr-export-button-border: var(--lr-color-border-strong); --_lr-export-button-hover-background: var(--lr-color-brand-quiet); --_lr-export-button-hover-color: var(--lr-color-brand); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-brand); --_lr-export-button-active-border: var(--lr-color-brand); } :host([appearance='quiet']) { --_lr-export-button-background: transparent; --_lr-export-button-color: var(--lr-color-text-quiet); --_lr-export-button-border: var(--lr-color-border); --_lr-export-button-hover-background: var(--lr-color-brand-quiet); --_lr-export-button-hover-color: var(--lr-color-text-quiet); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-text-quiet); --_lr-export-button-active-border: var(--lr-color-brand); } [part~='trigger'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lr-space-xs); padding: var(--lr-space-xs) var(--lr-space-m); border: var(--lr-border-width-thin) solid var(--lr-export-button-border, var(--_lr-export-button-border)); border-radius: var(--lr-radius); background: var(--lr-export-button-background, var(--_lr-export-button-background)); color: var(--lr-export-button-color, var(--_lr-export-button-color)); font: inherit; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); cursor: pointer; } :where([part~='trigger']):hover:where(:not(:disabled)) { background: var(--lr-export-button-hover-background, var(--_lr-export-button-hover-background)); color: var(--lr-export-button-hover-color, var(--_lr-export-button-hover-color)); border-color: var(--lr-export-button-hover-border, var(--_lr-export-button-hover-border)); } :where([part~='trigger']):active:where(:not(:disabled)) { background: var(--lr-export-button-active-background, var(--_lr-export-button-active-background)); color: var(--lr-export-button-active-color, var(--_lr-export-button-active-color)); border-color: var(--lr-export-button-active-border, var(--_lr-export-button-active-border)); } :host([size='2xs']) [part~='trigger'], :host([size='xs']) [part~='trigger'], :host([size='s']) [part~='trigger'], :host([size='small']) [part~='trigger'], :host([size='m']) [part~='trigger'], :host([size='medium']) [part~='trigger'], :host([size='l']) [part~='trigger'], :host([size='large']) [part~='trigger'], :host([size='xl']) [part~='trigger'], :host([size='2xs']) [part='menu-item'], :host([size='xs']) [part='menu-item'], :host([size='s']) [part='menu-item'], :host([size='small']) [part='menu-item'], :host([size='m']) [part='menu-item'], :host([size='medium']) [part='menu-item'], :host([size='l']) [part='menu-item'], :host([size='large']) [part='menu-item'], :host([size='xl']) [part='menu-item'] { font-size: var(--lr-form-control-font-size); padding-block: var(--lr-form-control-padding-block); padding-inline: var(--lr-form-control-padding-inline); min-block-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); } [part~='trigger']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part~='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='trigger-error'] { border-color: var(--lr-color-danger); color: var(--lr-color-danger); } [part='menu'] { visibility: hidden; position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; inline-size: max-content; min-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-8rem), var(--lr-positioner-available-inline-size, 100vw) ); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-20rem), var(--lr-positioner-available-inline-size, 100vw) ); max-block-size: var(--lr-positioner-available-block-size, 100vh); overflow: auto; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); opacity: 0; transform: translateY(var(--lr-size-neg-4px)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast); } :host([open]) [part='menu'] { visibility: visible; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [part='menu'] { transition: none; } } [part='menu-item'] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lr-size-1px); box-sizing: border-box; inline-size: 100%; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); text-align: center; padding: var(--lr-space-xs) var(--lr-space-s); border: none; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--lr-radius); } :where([part='menu-item']):hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); } :where([part='menu-item']):active:where(:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='menu-item']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='menu-item']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='format-description'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='format-label'], [part='format-description'] { max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};

package/dist/components/utility/icon/icon.class.d.ts

@@ -118,8 +118,9 @@ fixedWidth:boolean;private fetchState;private svgEl?;private customSlot?;private
 private generation;connectedCallback():void;disconnectedCallback():void;protected updated(changed:PropertyValues):void;private onCustomSlotChange;
 /**
 * SVG geometry distributed through a shadow-DOM slot does not paint reliably in Chromium when
-* the slot itself is inside an SVG. Keep the public custom-content slot, but clone its trusted
-* SVG nodes into the component-owned SVG so path/circle/group content has a real SVG parent.
+* the slot itself is inside an SVG. Keep the public custom-content slot, but clone its
+* consumer-supplied SVG nodes into the component-owned SVG so path/circle/group content has a
+* real SVG parent; the clone boundary applies the shared SVG safety filters first.
 */
 private syncCustomNodes;private observeCustomContent;private cloneSvgNode;private accessibleLabel;private hasRemoteSource;private releaseResourceLease;private load;private fail;private errorMessage;
 /** Applies presentation semantics to the fetched node. The stable wrapper rendered by

package/dist/components/utility/icon/icon.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing,svg}from"lit";import{property,query,state}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isAccessibilityVisible,srOnly}from"../../../internal/a11y.js";import{finiteNumber}from"../../../internal/numbers.js";import{safeFetchUrl}from"../../../internal/safe-url.js";import{isUnsafeSvgCloneAttribute}from"../../../internal/safe-svg.js";import{isAbortError,resolveOwnerFetchTarget}from"../../../internal/resource-loader.js";import{getIconLibrary,subscribeIconLibrary}from"./icon-library.js";import{acquireSanitizedIconResource,IconResourceError}from"./icon-resource.js";import{styles}from"./icon.styles.js";import{LYRA_DEFAULT_iconLoadError,LYRA_DEFAULT_iconSanitizerMissing,LYRA_DEFAULT_iconTooLarge}from"../../../internal/default-strings.generated.js";const PATHS={add:"M12 5v14M5 12h14",check:"m5 12 4 4L19 6",close:"m6 6 12 12M18 6 6 18",search:"m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z",menu:"M4 6h16M4 12h16M4 18h16","chevron-left":"m15 18-6-6 6-6","chevron-right":"m9 18 6-6-6-6","chevron-down":"m6 9 6 6 6-6",calendar:"M6 3v3M18 3v3M4 9h16M5 5h14a1 1 0 0 1 1 1v13H4V6a1 1 0 0 1 1-1Z",command:"M6 6h4v4H6zM14 6h4v4h-4zM6 14h4v4H6zM14 14h4v4h-4z",trash:"M4 7h16M10 11v6M14 11v6M6 7l1 14h10l1-14M9 7V4h6v3"};class LyraIcon extends LyraElement{constructor(){super(...arguments),this._name="",this.path="",this.label="",this.library="default",this.family="",this.variant="",this._src="",this.rotate=0,this.autoWidth=!1,this.swapOpacity=!1,this.fixedWidth=!1,this.fetchState={kind:"idle"},this.generation=0,this.onCustomSlotChange=()=>{this.syncCustomNodes()}}static{this.defaultStrings={...super.defaultStrings,iconLoadError:LYRA_DEFAULT_iconLoadError,iconSanitizerMissing:LYRA_DEFAULT_iconSanitizerMissing,iconTooLarge:LYRA_DEFAULT_iconTooLarge}}static{this.styles=[LyraElement.styles,styles,srOnly]}get name(){return this._name}set name(value){const old=this._name;this._name=value??"",this.requestUpdate("name",old)}get src(){return this._src}set src(value){const old=this._src;this._src=value??"",this.requestUpdate("src",old)}connectedCallback(){super.connectedCallback(),this.errorAnnouncementSink??=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}),this.stopLibrarySubscription??=subscribeIconLibrary(name=>{name===this.library&&this.load()}),this.hasUpdated&&(queueMicrotask(()=>{this.isConnected&&this.syncCustomNodes()}),this.hasRemoteSource()&&this.scheduleAfterUpdate(()=>{this.load()}))}disconnectedCallback(){this.generation++,this.releaseResourceLease(),this.stopLibrarySubscription?.(),this.stopLibrarySubscription=void 0,this.customContentObserver?.disconnect(),this.customContentObserver=void 0,this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0,this.fetchState.kind!=="idle"&&(this.fetchState={kind:"idle"}),super.disconnectedCallback()}updated(changed){if(super.updated(changed),changed.has("rotate")){const angle=finiteNumber(this.rotate??0,0);angle?this.style.setProperty("--lr-icon-rotate",`${angle}deg`):this.style.removeProperty("--lr-icon-rotate")}this.applyRemoteA11y(),this.syncCustomNodes(),(changed.has("src")||changed.has("library")||changed.has("name")||changed.has("family")||changed.has("variant"))&&this.scheduleAfterUpdate(()=>{this.load()})}syncCustomNodes(){if(this.fetchState.kind!=="idle")return;const svgEl=this.svgEl;if(!svgEl)return;svgEl.querySelectorAll("[data-lr-custom-copy]").forEach(node=>node.remove()),this.customContentObserver?.disconnect();const slot=this.customSlot;if(slot){for(const node of slot.assignedNodes({flatten:!0})){const copy=this.cloneSvgNode(node);copy&&(copy.setAttribute("data-lr-custom-copy",""),svgEl.append(copy))}this.observeCustomContent(slot)}}observeCustomContent(slot){if(this.customContentObserver?.disconnect(),!this.isConnected)return;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;if(MutationObserverCtor){this.customContentObserver??=new MutationObserverCtor(()=>{this.isConnected&&this.syncCustomNodes()});for(const node of slot.assignedNodes({flatten:!0}))node.nodeType===1&&this.customContentObserver.observe(node,{attributes:!0,childList:!0,subtree:!0})}}cloneSvgNode(node){if(node.nodeType!==1)return null;const element=node;if(element.localName.includes("-"))return null;const copy=this.ownerDocument.createElementNS("http://www.w3.org/2000/svg",element.localName);for(const attribute of element.attributes)isUnsafeSvgCloneAttribute(attribute.name)||copy.setAttribute(attribute.name,attribute.value);for(const child of element.childNodes){const childCopy=this.cloneSvgNode(child);childCopy?copy.append(childCopy):child.nodeType===3&&copy.append(this.ownerDocument.createTextNode(child.textContent??""))}return copy}accessibleLabel(){return this.getAttribute("aria-label")??this.label}hasRemoteSource(){return!!(this.src||this.name&&this.library&&getIconLibrary(this.library))}releaseResourceLease(){this.resourceLease?.release(),this.resourceLease=void 0}async load(){const generation=++this.generation;this.releaseResourceLease();const library=this.name&&this.library?getIconLibrary(this.library):void 0;if(!library&&!this.src){this.fetchState.kind!=="idle"&&(this.fetchState={kind:"idle"});return}this.fetchState={kind:"loading"};let source=this.src;try{if(library){if(source=await library.resolver(this.name,this.family,this.variant),!this.isConnected||generation!==this.generation)return;if(typeof source!="string")throw new TypeError("icon resolver did not return a URL")}}catch(error){await this.fail("load",generation,this.name,error);return}if(!source){this.isConnected&&generation===this.generation&&(this.fetchState={kind:"idle"});return}const safeSource=safeFetchUrl(source);if(!safeSource){await this.fail("load",generation,source,new Error("icon URL is not allowed"));return}const fetchTarget=resolveOwnerFetchTarget(this,safeSource);if(!fetchTarget){await this.fail("load",generation,safeSource,new Error("icon URL is not available"));return}let lease;try{lease=acquireSanitizedIconResource(fetchTarget),this.resourceLease=lease;const canonical=await lease.promise;if(!this.isConnected||generation!==this.generation)return;if(!canonical){if(this.fetchState={kind:"empty"},await this.updateComplete,!this.isConnected||generation!==this.generation)return;this.emit("lr-load",{src:safeSource});return}const node=this.ownerDocument.importNode(canonical,!0);if(library?.mutator?.(node),this.fetchState={kind:"loaded",node},await this.updateComplete,!this.isConnected||generation!==this.generation)return;this.emit("lr-load",{src:safeSource})}catch(error){if(isAbortError(error))return;const reason=error instanceof IconResourceError?error.reason:"load";await this.fail(reason,generation,safeSource,error)}finally{this.resourceLease===lease&&(this.resourceLease=void 0),lease?.release()}}async fail(reason,generation,src,error){!this.isConnected||generation!==this.generation||(this.fetchState={kind:"error",reason},await this.updateComplete,!(!this.isConnected||generation!==this.generation)&&(isAccessibilityVisible(this)&&this.errorAnnouncementSink?.announce(this.errorMessage(reason)),this.emit("lr-error",{src,error})))}errorMessage(reason){return reason==="sanitizer"?this.localize("iconSanitizerMissing"):reason==="too-large"?this.localize("iconTooLarge"):this.localize("iconLoadError")}applyRemoteA11y(){const state2=this.fetchState;if(state2.kind==="loaded"){state2.node.setAttribute("part","svg"),state2.node.setAttribute("focusable","false"),state2.node.setAttribute("aria-hidden","true"),state2.node.removeAttribute("aria-label");for(const use of state2.node.querySelectorAll("use")){const parts=new Set((use.getAttribute("part")??"").split(/\s+/).filter(Boolean));parts.add("use"),use.setAttribute("part",[...parts].join(" "))}}}renderBuiltIn(){const path=this.path||PATHS[this.name]||"";return html`<svg
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing,svg}from"lit";import{property,query,state}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isAccessibilityVisible,srOnly}from"../../../internal/a11y.js";import{finiteNumber}from"../../../internal/numbers.js";import{safeFetchUrl}from"../../../internal/safe-url.js";import{isUnsafeSvgCloneAttribute,isUnsafeSvgCloneElement}from"../../../internal/safe-svg.js";import{isAbortError,resolveOwnerFetchTarget}from"../../../internal/resource-loader.js";import{getIconLibrary,subscribeIconLibrary}from"./icon-library.js";import{acquireSanitizedIconResource,IconResourceError}from"./icon-resource.js";import{styles}from"./icon.styles.js";import{LYRA_DEFAULT_iconLoadError,LYRA_DEFAULT_iconSanitizerMissing,LYRA_DEFAULT_iconTooLarge}from"../../../internal/default-strings.generated.js";const PATHS={add:"M12 5v14M5 12h14",check:"m5 12 4 4L19 6",close:"m6 6 12 12M18 6 6 18",search:"m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z",menu:"M4 6h16M4 12h16M4 18h16","chevron-left":"m15 18-6-6 6-6","chevron-right":"m9 18 6-6-6-6","chevron-down":"m6 9 6 6 6-6",calendar:"M6 3v3M18 3v3M4 9h16M5 5h14a1 1 0 0 1 1 1v13H4V6a1 1 0 0 1 1-1Z",command:"M6 6h4v4H6zM14 6h4v4h-4zM6 14h4v4H6zM14 14h4v4h-4z",trash:"M4 7h16M10 11v6M14 11v6M6 7l1 14h10l1-14M9 7V4h6v3"};class LyraIcon extends LyraElement{constructor(){super(...arguments),this._name="",this.path="",this.label="",this.library="default",this.family="",this.variant="",this._src="",this.rotate=0,this.autoWidth=!1,this.swapOpacity=!1,this.fixedWidth=!1,this.fetchState={kind:"idle"},this.generation=0,this.onCustomSlotChange=()=>{this.syncCustomNodes()}}static{this.defaultStrings={...super.defaultStrings,iconLoadError:LYRA_DEFAULT_iconLoadError,iconSanitizerMissing:LYRA_DEFAULT_iconSanitizerMissing,iconTooLarge:LYRA_DEFAULT_iconTooLarge}}static{this.styles=[LyraElement.styles,styles,srOnly]}get name(){return this._name}set name(value){const old=this._name;this._name=value??"",this.requestUpdate("name",old)}get src(){return this._src}set src(value){const old=this._src;this._src=value??"",this.requestUpdate("src",old)}connectedCallback(){super.connectedCallback(),this.errorAnnouncementSink??=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}),this.stopLibrarySubscription??=subscribeIconLibrary(name=>{name===this.library&&this.load()}),this.hasUpdated&&(queueMicrotask(()=>{this.isConnected&&this.syncCustomNodes()}),this.hasRemoteSource()&&this.scheduleAfterUpdate(()=>{this.load()}))}disconnectedCallback(){this.generation++,this.releaseResourceLease(),this.stopLibrarySubscription?.(),this.stopLibrarySubscription=void 0,this.customContentObserver?.disconnect(),this.customContentObserver=void 0,this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0,this.fetchState.kind!=="idle"&&(this.fetchState={kind:"idle"}),super.disconnectedCallback()}updated(changed){if(super.updated(changed),changed.has("rotate")){const angle=finiteNumber(this.rotate??0,0);angle?this.style.setProperty("--lr-icon-rotate",`${angle}deg`):this.style.removeProperty("--lr-icon-rotate")}this.applyRemoteA11y(),this.syncCustomNodes(),(changed.has("src")||changed.has("library")||changed.has("name")||changed.has("family")||changed.has("variant"))&&this.scheduleAfterUpdate(()=>{this.load()})}syncCustomNodes(){if(this.fetchState.kind!=="idle")return;const svgEl=this.svgEl;if(!svgEl)return;svgEl.querySelectorAll("[data-lr-custom-copy]").forEach(node=>node.remove()),this.customContentObserver?.disconnect();const slot=this.customSlot;if(slot){for(const node of slot.assignedNodes({flatten:!0})){const copy=this.cloneSvgNode(node);copy&&(copy.setAttribute("data-lr-custom-copy",""),svgEl.append(copy))}this.observeCustomContent(slot)}}observeCustomContent(slot){if(this.customContentObserver?.disconnect(),!this.isConnected)return;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;if(MutationObserverCtor){this.customContentObserver??=new MutationObserverCtor(()=>{this.isConnected&&this.syncCustomNodes()});for(const node of slot.assignedNodes({flatten:!0}))node.nodeType===1&&this.customContentObserver.observe(node,{attributes:!0,childList:!0,subtree:!0})}}cloneSvgNode(node){if(node.nodeType!==1)return null;const element=node;if(element.localName.includes("-")||isUnsafeSvgCloneElement(element.localName))return null;const copy=this.ownerDocument.createElementNS("http://www.w3.org/2000/svg",element.localName);for(const attribute of element.attributes)isUnsafeSvgCloneAttribute(attribute.name,attribute.value)||copy.setAttribute(attribute.name,attribute.value);for(const child of element.childNodes){const childCopy=this.cloneSvgNode(child);childCopy?copy.append(childCopy):child.nodeType===3&&copy.append(this.ownerDocument.createTextNode(child.textContent??""))}return copy}accessibleLabel(){return this.getAttribute("aria-label")??this.label}hasRemoteSource(){return!!(this.src||this.name&&this.library&&getIconLibrary(this.library))}releaseResourceLease(){this.resourceLease?.release(),this.resourceLease=void 0}async load(){const generation=++this.generation;this.releaseResourceLease();const library=this.name&&this.library?getIconLibrary(this.library):void 0;if(!library&&!this.src){this.fetchState.kind!=="idle"&&(this.fetchState={kind:"idle"});return}this.fetchState={kind:"loading"};let source=this.src;try{if(library){if(source=await library.resolver(this.name,this.family,this.variant),!this.isConnected||generation!==this.generation)return;if(typeof source!="string")throw new TypeError("icon resolver did not return a URL")}}catch(error){await this.fail("load",generation,this.name,error);return}if(!source){this.isConnected&&generation===this.generation&&(this.fetchState={kind:"idle"});return}const safeSource=safeFetchUrl(source);if(!safeSource){await this.fail("load",generation,source,new Error("icon URL is not allowed"));return}const fetchTarget=resolveOwnerFetchTarget(this,safeSource);if(!fetchTarget){await this.fail("load",generation,safeSource,new Error("icon URL is not available"));return}let lease;try{lease=acquireSanitizedIconResource(fetchTarget),this.resourceLease=lease;const canonical=await lease.promise;if(!this.isConnected||generation!==this.generation)return;if(!canonical){if(this.fetchState={kind:"empty"},await this.updateComplete,!this.isConnected||generation!==this.generation)return;this.emit("lr-load",{src:safeSource});return}const node=this.ownerDocument.importNode(canonical,!0);if(library?.mutator?.(node),this.fetchState={kind:"loaded",node},await this.updateComplete,!this.isConnected||generation!==this.generation)return;this.emit("lr-load",{src:safeSource})}catch(error){if(isAbortError(error))return;const reason=error instanceof IconResourceError?error.reason:"load";await this.fail(reason,generation,safeSource,error)}finally{this.resourceLease===lease&&(this.resourceLease=void 0),lease?.release()}}async fail(reason,generation,src,error){!this.isConnected||generation!==this.generation||(this.fetchState={kind:"error",reason},await this.updateComplete,!(!this.isConnected||generation!==this.generation)&&(isAccessibilityVisible(this)&&this.errorAnnouncementSink?.announce(this.errorMessage(reason)),this.emit("lr-error",{src,error})))}errorMessage(reason){return reason==="sanitizer"?this.localize("iconSanitizerMissing"):reason==="too-large"?this.localize("iconTooLarge"):this.localize("iconLoadError")}applyRemoteA11y(){const state2=this.fetchState;if(state2.kind==="loaded"){state2.node.setAttribute("part","svg"),state2.node.setAttribute("focusable","false"),state2.node.setAttribute("aria-hidden","true"),state2.node.removeAttribute("aria-label");for(const use of state2.node.querySelectorAll("use")){const parts=new Set((use.getAttribute("part")??"").split(/\s+/).filter(Boolean));parts.add("use"),use.setAttribute("part",[...parts].join(" "))}}}renderBuiltIn(){const path=this.path||PATHS[this.name]||"";return html`<svg
         part="svg"
         viewBox="0 0 24 24"
         fill="none"