@sbb-esta/lyne-elements-dev 5.13.1-dev.1794294068 → 5.13.1-dev.1794308738

package/autocomplete.pure.js

@@ -1,16 +1,13 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,nothing as a,unsafeCSS as o}from"lit";import{property as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{SbbActionBaseElement as l,SbbDisabledMixin as u,SbbElement as d,SbbEscapableOverlayController as f,SbbNegativeMixin as p,SbbOpenCloseBaseElement as m,SbbPropertyWatcherController as h,forceType as g,getNextElementIndex as _,idReference as v,isAndroid as y,isEventOnElement as b,isSafari as x,isZeroAnimationDuration as S,popoverResetStyles as C,removeAriaComboBoxAttributes as ee,scrollbarStyles as te,setAriaComboBoxAttributes as w,setOverlayPosition as T}from"./core.js";import{optionPanelStyles as E}from"./option.pure.js";import{miniButtonStyle as D}from"./button.pure.js";import{SbbIconNameMixin as O}from"./icon.pure.js";var k=`:host{display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}
-`;const A=x;var j=class extends Event{get option(){return this._option}constructor(e){super(`inputAutocomplete`,{bubbles:!0,composed:!0}),this._option=e}};let M=(()=>{let l=p(m),u,d=[],_=[],y,x=[],w=[],D,O=[],M=[],N,P=[],F=[],I,L=[],R=[],z,B=[],V=[],H,U=[],W=[],G,K=[],q=[],J,Y=[],X=[],Z,Q=[],$=[];return class extends l{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;u=[v(),s()],y=[v(),s()],D=[g(),s({attribute:`preserve-icon-space`,reflect:!0,type:Boolean})],N=[g(),s({attribute:`auto-active-first-option`,type:Boolean})],I=[s({attribute:!1})],z=[s({reflect:!0})],H=[g(),s({attribute:`auto-select-active-option`,type:Boolean})],G=[g(),s({attribute:`auto-select-active-option-on-blur`,type:Boolean})],J=[g(),s({attribute:`require-selection`,type:Boolean})],Z=[s()],e(this,null,u,{kind:`accessor`,name:`origin`,static:!1,private:!1,access:{has:e=>`origin`in e,get:e=>e.origin,set:(e,t)=>{e.origin=t}},metadata:t},d,_),e(this,null,y,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},x,w),e(this,null,D,{kind:`accessor`,name:`preserveIconSpace`,static:!1,private:!1,access:{has:e=>`preserveIconSpace`in e,get:e=>e.preserveIconSpace,set:(e,t)=>{e.preserveIconSpace=t}},metadata:t},O,M),e(this,null,N,{kind:`accessor`,name:`autoActiveFirstOption`,static:!1,private:!1,access:{has:e=>`autoActiveFirstOption`in e,get:e=>e.autoActiveFirstOption,set:(e,t)=>{e.autoActiveFirstOption=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},L,R),e(this,null,z,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},B,V),e(this,null,H,{kind:`accessor`,name:`autoSelectActiveOption`,static:!1,private:!1,access:{has:e=>`autoSelectActiveOption`in e,get:e=>e.autoSelectActiveOption,set:(e,t)=>{e.autoSelectActiveOption=t}},metadata:t},U,W),e(this,null,G,{kind:`accessor`,name:`autoSelectActiveOptionOnBlur`,static:!1,private:!1,access:{has:e=>`autoSelectActiveOptionOnBlur`in e,get:e=>e.autoSelectActiveOptionOnBlur,set:(e,t)=>{e.autoSelectActiveOptionOnBlur=t}},metadata:t},K,q),e(this,null,J,{kind:`accessor`,name:`requireSelection`,static:!1,private:!1,access:{has:e=>`requireSelection`in e,get:e=>e.requireSelection,set:(e,t)=>{e.requireSelection=t}},metadata:t},Y,X),e(this,null,Z,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:t},Q,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[C,te,E,o(k)]}#e;get origin(){return this.#e}set origin(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get preserveIconSpace(){return this.#n}set preserveIconSpace(e){this.#n=e}#r;get autoActiveFirstOption(){return this.#r}set autoActiveFirstOption(e){this.#r=e}#i;get displayWith(){return this.#i}set displayWith(e){this.#i=e}#a;get size(){return this.#a}set size(e){this.#a=e}#o;get autoSelectActiveOption(){return this.#o}set autoSelectActiveOption(e){this.#o=e}#s;get autoSelectActiveOptionOnBlur(){return this.#s}set autoSelectActiveOptionOnBlur(e){this.#s=e}#c;get requireSelection(){return this.#c}set requireSelection(e){this.#c=e}#l;get position(){return this.#l}set position(e){this.#l=e}get originElement(){return this.origin??this.closest?.(`sbb-form-field`)?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.trigger??null}get triggerElement(){return this._triggerElement??null}get overlayId(){return`${this.id}-overlay`}constructor(){super(),this.#e=t(this,d,null),this.#t=(t(this,_),t(this,x,null)),this.#n=(t(this,w),t(this,O,!1)),this.#r=(t(this,M),t(this,P,!1)),this.#i=(t(this,F),t(this,L,null)),this.#a=(t(this,R),t(this,B,null)),this.#o=(t(this,V),t(this,U,!1)),this.#s=(t(this,W),t(this,K,!1)),this.#c=(t(this,q),t(this,Y,!1)),this.#l=(t(this,X),t(this,Q,`auto`)),this._triggerElement=t(this,$),this.activeOption=null,this.pendingAutoSelectedOption=null,this._resizeObserver=new n(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()}),this._triggerAttributeObserver=i?null:new MutationObserver(e=>{let t=e[0].target;(t.hasAttribute(`disabled`)||t.hasAttribute(`readonly`))&&this.close()}),this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new f(this),this._optionsCount=0,this._lastUserInput=null,this._isCustomChangeEvent=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=b(this._overlay,e)},this._closeOnBackdropClick=e=>{this._isPointerDownEventOnMenu||b(this._overlay,e)||b(this.originElement,e)||this.close()},this.addEventListener?.(`optionselected`,e=>this.onOptionSelected(e)),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addController(new h(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this.syncNegative()},borderless:e=>this.toggleState(`option-panel-origin-borderless`,e.borderless)}))}open(){if(this.state===`opening`||this.state===`opened`||!this._overlay||this.options.length===0||this._readonly()||!this.dispatchBeforeOpenEvent())return;this.showPopover?.(),this.state=`opening`,this.triggerElement?.toggleAttribute(`data-expanded`,!0);let e=this.originElement;if(!e)throw Error(`Cannot find the origin element. Please specify a valid element or check the usage of the "origin" property from the documentation`);this._setOverlayPosition(e),this._setNextActiveOptionIfAutoActiveFirstOption(),this._attachOpenPanelEvents(),this._escapableOverlayController.connect(),this._isZeroAnimationDuration()&&this._handleOpening()}close(){this.state!==`closing`&&this.state!==`closed`&&this.dispatchBeforeCloseEvent()&&(this.pendingAutoSelectedOption&&(this.pendingAutoSelectedOption.selected=!0,this._setValueAndDispatchEvents(this.pendingAutoSelectedOption,!0)),this.state=`closing`,this.triggerElement?.removeAttribute(`data-expanded`),this._openPanelEventsController.abort(),this.originElement&&this._resizeObserver.unobserve(this.originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return S(this,`--sbb-options-panel-animation-duration`)}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.id||=this.generatedId,this.hasUpdated&&this._componentSetup(),this.syncNegative()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this.syncNegative(),e.has(`autoActiveFirstOption`)&&this.isOpen&&this._setNextActiveOptionIfAutoActiveFirstOption()}firstUpdated(e){super.firstUpdated(e),this._componentSetup()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openPanelEventsController?.abort()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&this.hasUpdated&&(!e||e===`trigger`?this._configureTrigger():(!e||e===`origin`)&&this.isOpen&&this._setOverlayPosition())}onOptionSelected(e){let t=e.target;this._setValueAndDispatchEvents(t),this.close()}setPendingSelection(e){this.pendingAutoSelectedOption=e,this._setInputValue(e)}_setValueAndDispatchEvents(e,t=!1){this.options.filter(t=>t!==e&&t.selected).forEach(e=>e.selected=!1),this.pendingAutoSelectedOption=null,this.triggerElement&&(this._setInputValue(e),this._isCustomChangeEvent=!0,this.triggerElement.dispatchEvent(new Event(`change`,{bubbles:!0})),this.triggerElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this._lastUserInput=null,this.triggerElement.dispatchEvent(new j(e)),t||this.triggerElement.focus())}_setInputValue(e){if(!this.triggerElement)return;let t=this.displayWith?.(e.value)??e.value;Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`).set.call(this.triggerElement,t)}_handleSlotchange(){this._highlightOptions(this.triggerElement?.value);let e=Array.from(this.querySelectorAll(`*`));this._previousElements?.forEach(e=>this._resizeObserver.unobserve(e)),this._previousElements=e,this._previousElements.forEach(e=>this._resizeObserver.observe(e)),this.isOpen?(this._setOverlayPosition(),this._setNextActiveOptionIfAutoActiveFirstOption(),this._optionsCount>0&&this.options.length===0&&this.close()):document?.activeElement===this.triggerElement&&this._optionsCount===0&&this.options.length>0&&this.open(),this._optionsCount=this.options.length}_setNextActiveOptionIfAutoActiveFirstOption(){this.autoActiveFirstOption&&(this.resetActiveElement(),this.setNextActiveOption())}_readonly(){return this.triggerElement?.hasAttribute(`readonly`)??!1}_componentSetup(){i||this._configureTrigger()}_configureTrigger(){let e=this.trigger??this.closest?.(`sbb-form-field`)?.querySelector(`input`);if(e===this.triggerElement||(this._triggerAbortController?.abort(),ee(this.triggerElement),this.triggerElement?.removeAttribute(`data-expanded`),this._triggerElement=e,!this.triggerElement))return;let t=this.originElement;this.triggerElement===t&&this.isOpen&&this._setOverlayPosition(t),this._triggerAttributeObserver?.observe(this.triggerElement,{attributes:!0,attributeFilter:[`disabled`,`readonly`]}),this.setTriggerAttributes(this.triggerElement),this._triggerAbortController=new AbortController,this.triggerElement.addEventListener(`focus`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`input`,e=>{let t=e.target.value;t&&e.isTrusted&&this.open(),this._highlightOptions(t),this._lastUserInput=t,this.pendingAutoSelectedOption=null},{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`change`,e=>{this.requireSelection&&!this._isCustomChangeEvent&&e.stopImmediatePropagation(),this._isCustomChangeEvent=!1},{signal:this._triggerAbortController.signal,capture:!0}),this.triggerElement.addEventListener(`keydown`,e=>this._closedPanelKeyboardInteraction(e),{signal:this._triggerAbortController.signal,capture:!0}),this.triggerElement.addEventListener(`blur`,e=>{this.contains(e.relatedTarget)||(this.autoSelectActiveOptionOnBlur&&this.activeOption&&this._lastUserInput&&this.triggerElement?.value&&(this.activeOption.selected=!0,this._setValueAndDispatchEvents(this.activeOption,!0)),this.requireSelection&&this.triggerElement&&this._lastUserInput!=null&&!this.pendingAutoSelectedOption&&(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`).set.call(this.triggerElement,``),this._highlightOptions(``),this._isCustomChangeEvent=!0,this.triggerElement.dispatchEvent(new Event(`change`,{bubbles:!0})),this.triggerElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0}))),this.close())},{signal:this._triggerAbortController.signal,capture:!0})}_setOverlayPosition(e=this.originElement){e&&T(this._overlay,e,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this,this.position)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this.originElement&&this._resizeObserver.observe(this.originElement),this.triggerElement?.setAttribute(`aria-expanded`,`true`),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.triggerElement?.setAttribute(`aria-expanded`,`false`),this.resetActiveElement(),this._overlay.scrollTop=0,this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal}),this.addEventListener(`ɵdisabledchange`,()=>{this.activeOption?.disabled&&this.resetActiveElement(),this._setNextActiveOptionIfAutoActiveFirstOption()},{signal:this._openPanelEventsController.signal}),this.triggerElement?.addEventListener(`keydown`,e=>this.openedPanelKeyboardInteraction(e),{signal:this._openPanelEventsController.signal,capture:!0})}_closedPanelKeyboardInteraction(e){if(this.state!==`opening`&&this.state!==`opened`)switch(e.key){case`ArrowDown`:case`ArrowUp`:this.open()}}_highlightOptions(e){e!=null&&this.options.forEach(t=>t.highlight(e))}render(){return r`
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,unsafeCSS as a}from"lit";import{property as o}from"lit/decorators.js";import{ref as s}from"lit/directives/ref.js";import{SbbActionBaseElement as c,SbbDisabledMixin as l,SbbElement as u,SbbEscapableOverlayController as d,SbbLanguageController as f,SbbNegativeMixin as p,SbbOpenCloseBaseElement as m,SbbPropertyWatcherController as h,appendAriaElements as g,forceType as _,getNextElementIndex as v,i18nAutocompleteActionsHint as y,i18nButton as b,idReference as x,isAndroid as S,isEventOnElement as C,isIOS as w,isMacOS as T,isSafari as E,isZeroAnimationDuration as D,popoverResetStyles as O,removeAriaComboBoxAttributes as k,sbbLiveAnnouncer as A,scrollbarStyles as j,setOverlayPosition as M}from"./core.js";import{optionPanelStyles as N}from"./option.pure.js";import{miniButtonStyle as P}from"./button.pure.js";import{SbbIconNameMixin as F}from"./icon.pure.js";var I=`:host{display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}
+`,L=class extends Event{get option(){return this._option}constructor(e){super(`inputAutocomplete`,{bubbles:!0,composed:!0}),this._option=e}};let R=(()=>{let c=p(m),l,u=[],f=[],g,v=[],y=[],b,S=[],w=[],T,E=[],A=[],P,F=[],R=[],z,B=[],V=[],H,U=[],W=[],G,K=[],q=[],J,Y=[],X=[],Z,Q=[],$=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[x(),o()],g=[x(),o()],b=[_(),o({attribute:`preserve-icon-space`,reflect:!0,type:Boolean})],T=[_(),o({attribute:`auto-active-first-option`,type:Boolean})],P=[o({attribute:!1})],z=[o({reflect:!0})],H=[_(),o({attribute:`auto-select-active-option`,type:Boolean})],G=[_(),o({attribute:`auto-select-active-option-on-blur`,type:Boolean})],J=[_(),o({attribute:`require-selection`,type:Boolean})],Z=[o()],e(this,null,l,{kind:`accessor`,name:`origin`,static:!1,private:!1,access:{has:e=>`origin`in e,get:e=>e.origin,set:(e,t)=>{e.origin=t}},metadata:t},u,f),e(this,null,g,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},v,y),e(this,null,b,{kind:`accessor`,name:`preserveIconSpace`,static:!1,private:!1,access:{has:e=>`preserveIconSpace`in e,get:e=>e.preserveIconSpace,set:(e,t)=>{e.preserveIconSpace=t}},metadata:t},S,w),e(this,null,T,{kind:`accessor`,name:`autoActiveFirstOption`,static:!1,private:!1,access:{has:e=>`autoActiveFirstOption`in e,get:e=>e.autoActiveFirstOption,set:(e,t)=>{e.autoActiveFirstOption=t}},metadata:t},E,A),e(this,null,P,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},F,R),e(this,null,z,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},B,V),e(this,null,H,{kind:`accessor`,name:`autoSelectActiveOption`,static:!1,private:!1,access:{has:e=>`autoSelectActiveOption`in e,get:e=>e.autoSelectActiveOption,set:(e,t)=>{e.autoSelectActiveOption=t}},metadata:t},U,W),e(this,null,G,{kind:`accessor`,name:`autoSelectActiveOptionOnBlur`,static:!1,private:!1,access:{has:e=>`autoSelectActiveOptionOnBlur`in e,get:e=>e.autoSelectActiveOptionOnBlur,set:(e,t)=>{e.autoSelectActiveOptionOnBlur=t}},metadata:t},K,q),e(this,null,J,{kind:`accessor`,name:`requireSelection`,static:!1,private:!1,access:{has:e=>`requireSelection`in e,get:e=>e.requireSelection,set:(e,t)=>{e.requireSelection=t}},metadata:t},Y,X),e(this,null,Z,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:t},Q,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[O,j,N,a(I)]}#e;get origin(){return this.#e}set origin(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get preserveIconSpace(){return this.#n}set preserveIconSpace(e){this.#n=e}#r;get autoActiveFirstOption(){return this.#r}set autoActiveFirstOption(e){this.#r=e}#i;get displayWith(){return this.#i}set displayWith(e){this.#i=e}#a;get size(){return this.#a}set size(e){this.#a=e}#o;get autoSelectActiveOption(){return this.#o}set autoSelectActiveOption(e){this.#o=e}#s;get autoSelectActiveOptionOnBlur(){return this.#s}set autoSelectActiveOptionOnBlur(e){this.#s=e}#c;get requireSelection(){return this.#c}set requireSelection(e){this.#c=e}#l;get position(){return this.#l}set position(e){this.#l=e}get originElement(){return this.origin??this.closest?.(`sbb-form-field`)?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.trigger??null}get triggerElement(){return this._triggerElement??null}get overlayId(){return this.id}constructor(){super(),this.#e=t(this,u,null),this.#t=(t(this,f),t(this,v,null)),this.#n=(t(this,y),t(this,S,!1)),this.#r=(t(this,w),t(this,E,!1)),this.#i=(t(this,A),t(this,F,null)),this.#a=(t(this,R),t(this,B,null)),this.#o=(t(this,V),t(this,U,!1)),this.#s=(t(this,W),t(this,K,!1)),this.#c=(t(this,q),t(this,Y,!1)),this.#l=(t(this,X),t(this,Q,`auto`)),this._triggerElement=t(this,$),this.generatedId=``,this.activeOption=null,this.pendingAutoSelectedOption=null,this._resizeObserver=new n(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()}),this._triggerAttributeObserver=i?null:new MutationObserver(e=>{let t=e[0].target;(t.hasAttribute(`disabled`)||t.hasAttribute(`readonly`))&&this.close()}),this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new d(this),this._optionsCount=0,this._lastUserInput=null,this._isCustomChangeEvent=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=C(this._overlay,e)},this._closeOnBackdropClick=e=>{this._isPointerDownEventOnMenu||C(this._overlay,e)||C(this.originElement,e)||this.close()},this.addEventListener?.(`optionselected`,e=>this.onOptionSelected(e)),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addController(new h(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this.syncNegative()},borderless:e=>this.toggleState(`option-panel-origin-borderless`,e.borderless)}))}open(){if(this.state===`opening`||this.state===`opened`||!this._overlay||this.options.length===0||this._readonly()||!this.dispatchBeforeOpenEvent())return;this.showPopover?.(),this.state=`opening`,this.triggerElement?.toggleAttribute(`data-expanded`,!0);let e=this.originElement;if(!e)throw Error(`Cannot find the origin element. Please specify a valid element or check the usage of the "origin" property from the documentation`);this._setOverlayPosition(e),this._setNextActiveOptionIfAutoActiveFirstOption(),this._attachOpenPanelEvents(),this._escapableOverlayController.connect(),this._isZeroAnimationDuration()&&this._handleOpening()}close(){this.state!==`closing`&&this.state!==`closed`&&this.dispatchBeforeCloseEvent()&&(this.pendingAutoSelectedOption&&(this.pendingAutoSelectedOption.selected=!0,this._setValueAndDispatchEvents(this.pendingAutoSelectedOption,!0)),this.state=`closing`,this.triggerElement?.removeAttribute(`data-expanded`),this._openPanelEventsController.abort(),this.originElement&&this._resizeObserver.unobserve(this.originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return D(this,`--sbb-options-panel-animation-duration`)}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.tabIndex=-1,this.hasUpdated&&this._componentSetup(),this.syncNegative()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this.syncNegative(),e.has(`autoActiveFirstOption`)&&this.isOpen&&this._setNextActiveOptionIfAutoActiveFirstOption()}firstUpdated(e){super.firstUpdated(e),this._componentSetup()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openPanelEventsController?.abort()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&this.hasUpdated&&(!e||e===`trigger`?this._configureTrigger():(!e||e===`origin`)&&this.isOpen&&this._setOverlayPosition())}onOptionSelected(e){let t=e.target;this._setValueAndDispatchEvents(t),this.close()}setPendingSelection(e){this.pendingAutoSelectedOption=e,this._setInputValue(e)}_setValueAndDispatchEvents(e,t=!1){this.options.filter(t=>t!==e&&t.selected).forEach(e=>e.selected=!1),this.pendingAutoSelectedOption=null,this.triggerElement&&(this._setInputValue(e),this._isCustomChangeEvent=!0,this.triggerElement.dispatchEvent(new Event(`change`,{bubbles:!0})),this.triggerElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this._lastUserInput=null,this.triggerElement.dispatchEvent(new L(e)),t||this.triggerElement.focus())}_setInputValue(e){if(!this.triggerElement)return;let t=this.displayWith?.(e.value)??e.value;Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`).set.call(this.triggerElement,t)}_handleSlotchange(){this._highlightOptions(this.triggerElement?.value);let e=Array.from(this.querySelectorAll(`*`));this._previousElements?.forEach(e=>this._resizeObserver.unobserve(e)),this._previousElements=e,this._previousElements.forEach(e=>this._resizeObserver.observe(e)),this.isOpen?(this._setOverlayPosition(),this._setNextActiveOptionIfAutoActiveFirstOption(),this._optionsCount>0&&this.options.length===0&&this.close()):document?.activeElement===this.triggerElement&&this._optionsCount===0&&this.options.length>0&&this.open(),this._optionsCount=this.options.length,this.handleOptionChange()}handleOptionChange(){}_setNextActiveOptionIfAutoActiveFirstOption(){this.autoActiveFirstOption&&(this.resetActiveElement(),this.setNextActiveOption())}_readonly(){return this.triggerElement?.hasAttribute(`readonly`)??!1}_componentSetup(){i||this._configureTrigger()}_configureTrigger(){let e=this.trigger??this.closest?.(`sbb-form-field`)?.querySelector(`input`);if(e===this.triggerElement||(this._triggerAbortController?.abort(),k(this.triggerElement),this.triggerElement?.removeAttribute(`data-expanded`),this._triggerElement=e,!this.triggerElement))return;let t=this.originElement;this.triggerElement===t&&this.isOpen&&this._setOverlayPosition(t),this._triggerAttributeObserver?.observe(this.triggerElement,{attributes:!0,attributeFilter:[`disabled`,`readonly`]}),this.setTriggerAttributes(this.triggerElement),this._triggerAbortController=new AbortController,this.triggerElement.addEventListener(`focus`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`input`,e=>{let t=e.target.value;t&&e.isTrusted&&this.open(),this._highlightOptions(t),this._lastUserInput=t,this.pendingAutoSelectedOption=null},{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`change`,e=>{this.requireSelection&&!this._isCustomChangeEvent&&e.stopImmediatePropagation(),this._isCustomChangeEvent=!1},{signal:this._triggerAbortController.signal,capture:!0}),this.triggerElement.addEventListener(`keydown`,e=>this._closedPanelKeyboardInteraction(e),{signal:this._triggerAbortController.signal,capture:!0}),this.triggerElement.addEventListener(`blur`,e=>{this.contains(e.relatedTarget)||(this.autoSelectActiveOptionOnBlur&&this.activeOption&&this._lastUserInput&&this.triggerElement?.value&&(this.activeOption.selected=!0,this._setValueAndDispatchEvents(this.activeOption,!0)),this.requireSelection&&this.triggerElement&&this._lastUserInput!=null&&!this.pendingAutoSelectedOption&&(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`).set.call(this.triggerElement,``),this._highlightOptions(``),this._isCustomChangeEvent=!0,this.triggerElement.dispatchEvent(new Event(`change`,{bubbles:!0})),this.triggerElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0}))),this.close())},{signal:this._triggerAbortController.signal,capture:!0})}_setOverlayPosition(e=this.originElement){e&&M(this._overlay,e,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this,this.position)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this.originElement&&this._resizeObserver.observe(this.originElement),this.triggerElement?.setAttribute(`aria-expanded`,`true`),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.triggerElement?.setAttribute(`aria-expanded`,`false`),this.resetActiveElement(),this._overlay.scrollTop=0,this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal}),this.addEventListener(`ɵdisabledchange`,()=>{this.activeOption?.disabled&&this.resetActiveElement(),this._setNextActiveOptionIfAutoActiveFirstOption()},{signal:this._openPanelEventsController.signal}),this.triggerElement?.addEventListener(`keydown`,e=>this.openedPanelKeyboardInteraction(e),{signal:this._openPanelEventsController.signal,capture:!0})}_closedPanelKeyboardInteraction(e){if(this.state!==`opening`&&this.state!==`opened`)switch(e.key){case`ArrowDown`:case`ArrowUp`:this.open()}}_highlightOptions(e){e!=null&&this.options.forEach(t=>t.highlight(e))}render(){return r`
       <div class="sbb-option-panel__overlay-container">
         <div
           class="sbb-option-panel__overlay ${this.negative?`sbb-scrollbar-negative`:`sbb-scrollbar`}"
-          role=${A?a:this.panelRole}
-          id=${A?a:this.overlayId}
-          tabindex="-1"
           @animationend=${this._onAnimationEnd}
-          ${c(e=>this._overlay=e)}
+          ${s(e=>this._overlay=e)}
         >
           <slot @slotchange=${this._handleSlotchange}></slot>
         </div>
       </div>
-    `}}})();var N=class extends u(p(O(l))){static{this.elementName=`sbb-autocomplete-button`}static{this.role=`button`}static{this.styles=[D]}get option(){return this.closest(`sbb-autocomplete-row`)?.querySelector(`sbb-option`)}get optgroup(){return this.closest(`sbb-optgroup`)}constructor(){super(),this.internals.states.add(`button`),i||(this.setupBaseEventHandlers(),this.addController(new h(this,()=>this.closest(`sbb-optgroup`),{disabled:()=>this._updateInternals()})),this.addController(new h(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this.negative=e.negative})))}setActive(e){this.toggleState(`focus-visible`,e)}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&this._updateInternals()}connectedCallback(){super.connectedCallback(),y&&(this.tabIndex=-1)}isDisabledExternally(){return this.optgroup?.disabled??!1}_updateInternals(){this.disabled||this.optgroup?.disabled?(this.internals.states.add(`disabled`),this.internals.ariaDisabled=`true`):(this.internals.states.delete(`disabled`),this.internals.ariaDisabled=null)}renderTemplate(){return super.renderIconSlot()}},P=`:host{align-items:center;gap:var(--sbb-autocomplete-row-gap);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color);padding-inline-end:var(--sbb-autocomplete-row-padding-inline-end);display:flex}:host(:is(:state(negative),[state--negative])){--sbb-option-color:var(--sbb-color-3-negative);--sbb-option-background-color-hover:var(--sbb-background-color-3-negative);--sbb-option-disabled-border-color:var(--sbb-border-color-5);--sbb-option-disabled-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}@media (any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-hover)}}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor:var(--sbb-cursor-default);position:relative}:host(:is(:state(disabled),[state--disabled])):before{content:"";inset:var(--sbb-option-disabled-inset);border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-option-disabled-border-radius);background-color:var(--sbb-option-disabled-background-color);display:block;position:absolute}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled])):before{--sbb-option-disabled-border-color:GrayText}}::slotted(sbb-option){--sbb-option-background-color-active:var(--sbb-option-background-color-hover);--sbb-option-disabled-display:none;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x));flex:auto;overflow-x:hidden}
-`,F=class extends d{static{this.elementName=`sbb-autocomplete-row`}static{this.styles=[o(P)]}constructor(){super(),this.addController(new h(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new h(this,()=>this.querySelector(`sbb-option`),{disabled:e=>this.toggleState(`disabled`,e.disabled)}))}render(){return r`<slot></slot>`}};let I=0;const L=x;var R=class extends M{constructor(){super(...arguments),this.generatedId=`sbb-autocomplete-${++I}`,this.panelRole=`listbox`,this._activeColumnIndex=0}static{this.elementName=`sbb-autocomplete`}static{this.role=L?`listbox`:null}get options(){return Array.from(this.querySelectorAll?.(`sbb-option`)??[])}syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}openedPanelKeyboardInteraction(e){if(this.isOpen)switch(e.key){case`Enter`:this.selectByKeyboard(e);break;case`ArrowDown`:case`ArrowUp`:this.setNextActiveOption(e);break;case`ArrowRight`:case`ArrowLeft`:this._setNextHorizontalActiveElement(e)}}selectByKeyboard(e){this.activeOption&&(e.preventDefault(),this._activeColumnIndex===0?this.activeOption.selectViaUserInteraction(!0):this._elementsInRow()[this._activeColumnIndex]?.click())}setNextActiveOption(e){let t=this.options.filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`));if(this.activeOption?.setActive(!1),this._resetActiveButton(),this.triggerElement.ariaActiveDescendantElement=null,!t.length){this.activeOption=null;return}let n=this.activeOption?t.indexOf(this.activeOption):-1,r=_(e,n,t.length);this.activeOption=t[r],this.activeOption.setActive(!0),this.triggerElement.ariaActiveDescendantElement=this.activeOption,this.activeOption.scrollIntoView({block:`nearest`}),e&&e.preventDefault(),this.autoSelectActiveOption&&e&&this.setPendingSelection(this.activeOption)}_setNextHorizontalActiveElement(e){if(!this.activeOption)return;let t=this._elementsInRow();if(t.length<2)return;e.preventDefault();let n=_(e,this._activeColumnIndex,t.length),r=t[this._activeColumnIndex],i=t[n];r.setActive(!1),i.setActive(!0),this.triggerElement&&(this.triggerElement.ariaActiveDescendantElement=i),i.scrollIntoView({block:`nearest`}),this._activeColumnIndex=n}_resetActiveButton(){this._activeColumnIndex!==0&&(this._activeColumnIndex=0,this.activeOption?.closest(`sbb-autocomplete-row`)?.querySelectorAll(`sbb-autocomplete-button`).forEach(e=>e.setActive(!1)))}_elementsInRow(e=this.activeOption){return Array.from(e?.closest(`sbb-autocomplete-row`)?.querySelectorAll(`sbb-option, sbb-autocomplete-button`)??[]).filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`))}resetActiveElement(){this._resetActiveButton(),this.activeOption?.setActive(!1),this.activeOption=null,this.triggerElement&&(this.triggerElement.ariaActiveDescendantElement=null)}setTriggerAttributes(e){w(e,L?this.id:this.overlayId,!1)}};export{M as SbbAutocompleteBaseElement,N as SbbAutocompleteButtonElement,R as SbbAutocompleteElement,F as SbbAutocompleteRowElement,j as SbbInputAutocompleteEvent};
+    `}}})();var z=class extends l(p(F(c))){static{this.elementName=`sbb-autocomplete-button`}static{this.role=E?`button`:`option`}static{this.styles=[P]}get option(){return this.closest(`sbb-autocomplete-row`)?.querySelector(`sbb-option`)}get optgroup(){return this.closest(`sbb-optgroup`)}constructor(){if(super(),this._languageController=new f(this),this.internals.states.add(`button`),!E){this.internals.ariaRoleDescription=``;let e=()=>this.internals.ariaDescription=b[this._languageController.current];e(),this._languageController.withHandler(e)}i||(this.setupBaseEventHandlers(),this.addController(new h(this,()=>this.closest(`sbb-optgroup`),{disabled:()=>this._updateInternals()})),this.addController(new h(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this.negative=e.negative})))}setActive(e){if(this.toggleState(`focus-visible`,e),e&&E&&T){let e=[];this.ariaLabel?e.push(this.ariaLabel):this.ariaLabelledByElements?.length&&e.push(this._textContent(this.ariaLabelledByElements)),this.ariaDescription?e.push(this.ariaDescription):this.ariaDescribedByElements?.length&&e.push(this._textContent(this.ariaDescribedByElements)),e.push(b[this._languageController.current]),A.announce(e.join(`, `),`assertive`)}}_textContent(e){return e?.map(e=>e.textContent.trim().replace(/\.$/,``)).join(`. `)??``}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&this._updateInternals()}connectedCallback(){super.connectedCallback(),S&&(this.tabIndex=-1)}isDisabledExternally(){return this.optgroup?.disabled??!1}_updateInternals(){this.disabled||this.optgroup?.disabled?(this.internals.states.add(`disabled`),this.internals.ariaDisabled=`true`):(this.internals.states.delete(`disabled`),this.internals.ariaDisabled=null)}renderTemplate(){return super.renderIconSlot()}},B=`:host{align-items:center;gap:var(--sbb-autocomplete-row-gap);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color);padding-inline-end:var(--sbb-autocomplete-row-padding-inline-end);display:flex}:host(:is(:state(negative),[state--negative])){--sbb-option-color:var(--sbb-color-3-negative);--sbb-option-background-color-hover:var(--sbb-background-color-3-negative);--sbb-option-disabled-border-color:var(--sbb-border-color-5);--sbb-option-disabled-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}@media (any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-hover)}}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor:var(--sbb-cursor-default);position:relative}:host(:is(:state(disabled),[state--disabled])):before{content:"";inset:var(--sbb-option-disabled-inset);border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-option-disabled-border-radius);background-color:var(--sbb-option-disabled-background-color);display:block;position:absolute}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled])):before{--sbb-option-disabled-border-color:GrayText}}::slotted(sbb-option){--sbb-option-background-color-active:var(--sbb-option-background-color-hover);--sbb-option-disabled-display:none;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x));flex:auto;overflow-x:hidden}
+`,V=class extends u{static{this.elementName=`sbb-autocomplete-row`}static{this.role=`group`}static{this.styles=[a(B)]}constructor(){super(),this._languageController=new f(this).withHandler(()=>this._updateAriaDescription()),this.addController(new h(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new h(this,()=>this.querySelector(`sbb-option`),{disabled:e=>this.toggleState(`disabled`,e.disabled)}))}_updateAriaDescription(){if(w||S)return;let e=!!this.querySelector(`sbb-autocomplete-button`),t=this.querySelector(`sbb-option`);t&&(t.internals||customElements.upgrade(t),e?t.internals.ariaDescription=y[this._languageController.current]:!e&&t.internals.ariaDescription&&(t.internals.ariaDescription=null),E&&(e&&(!t.ariaDescription||this._assignedDescription&&t.ariaDescription===this._assignedDescription&&t.ariaDescription!==y[this._languageController.current])?(t.ariaDescription=y[this._languageController.current],this._assignedDescription=t.ariaDescription):!e&&this._assignedDescription&&t.ariaDescription===this._assignedDescription&&(t.ariaDescription=null,this._assignedDescription=void 0)))}render(){return r`<slot @slotchange=${this._updateAriaDescription}></slot>`}},H=class extends R{constructor(){super(...arguments),this._activeColumnIndex=0}static{this.elementName=`sbb-autocomplete`}static{this.role=`listbox`}get options(){return Array.from(this.querySelectorAll?.(`sbb-option`)??[])}syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}openedPanelKeyboardInteraction(e){if(this.isOpen)switch(e.key){case`Enter`:this.selectByKeyboard(e);break;case`ArrowDown`:case`ArrowUp`:this.setNextActiveOption(e);break;case`ArrowRight`:case`ArrowLeft`:this._setNextHorizontalActiveElement(e)}}selectByKeyboard(e){this.activeOption&&(e.preventDefault(),this._activeColumnIndex===0?this.activeOption.selectViaUserInteraction(!0):this._elementsInRow()[this._activeColumnIndex]?.click())}setNextActiveOption(e){let t=this.options.filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`));if(this.activeOption?.setActive(!1),this._resetActiveButton(),this.triggerElement.ariaActiveDescendantElement=null,!t.length){this.activeOption=null;return}let n=this.activeOption?t.indexOf(this.activeOption):-1,r=v(e,n,t.length);this.activeOption=t[r],this.activeOption.setActive(!0),this.triggerElement.ariaActiveDescendantElement=this.activeOption,this.activeOption.scrollIntoView({block:`nearest`}),e&&e.preventDefault(),this.autoSelectActiveOption&&e&&this.setPendingSelection(this.activeOption)}handleOptionChange(){let e=this.options,t=`${e.length}`,n=1;for(let r of e){let e=Array.from(r.closest(`sbb-autocomplete-row`)?.querySelectorAll(`sbb-autocomplete-button`)??[]);for(let i of[r,...e])i.internals.ariaSetSize=t,i.internals.ariaPosInSet=`${n}`;n++}}_setNextHorizontalActiveElement(e){if(!this.activeOption)return;let t=this._elementsInRow();if(t.length<2)return;e.preventDefault();let n=v(e,this._activeColumnIndex,t.length),r=t[this._activeColumnIndex],i=t[n];r.setActive(!1),i.setActive(!0),this.triggerElement&&(this.triggerElement.ariaActiveDescendantElement=i),i.scrollIntoView({block:`nearest`}),this._activeColumnIndex=n}_resetActiveButton(){this._activeColumnIndex!==0&&(this._activeColumnIndex=0,this.activeOption?.closest(`sbb-autocomplete-row`)?.querySelectorAll(`sbb-autocomplete-button`).forEach(e=>e.setActive(!1)))}_elementsInRow(e=this.activeOption){return Array.from(e?.closest(`sbb-autocomplete-row`)?.querySelectorAll(`sbb-option, sbb-autocomplete-button`)??[]).filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`))}resetActiveElement(){this._resetActiveButton(),this.activeOption?.setActive(!1),this.activeOption=null,this.triggerElement&&(this.triggerElement.ariaActiveDescendantElement=null)}setTriggerAttributes(e){e&&(e.autocomplete=`off`,e.role=`combobox`,e.ariaAutoComplete=`list`,e.ariaHasPopup=`listbox`,e.ariaControlsElements=g(e.ariaControlsElements,this),e.ariaExpanded=`false`)}};export{R as SbbAutocompleteBaseElement,z as SbbAutocompleteButtonElement,H as SbbAutocompleteElement,V as SbbAutocompleteRowElement,L as SbbInputAutocompleteEvent};

package/button/_button.global.scss

@@ -40,8 +40,11 @@ $loading: '[loading], .sbb-loading';
   // This doesn't interfere with the content, but visually closes the small gap.
   // The secondary button itself can override it to 0 because it doesn't need the workaround.
   // We used px unit as it is not relative to anything.
-  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
-    var(--_border-color);
+  --_border: var(
+    --sbb-button-border-override,
+    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+      var(--_border-color)
+  );
   --_animation-loading-delay: var(
     --sbb-disable-animation-duration,
     var(--sbb-button-loading-delay)
@@ -52,6 +55,8 @@ $loading: '[loading], .sbb-loading';
     var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
   --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
     var(--_animation-loading-delay) alternate infinite linear;
+  --_animation-loading-fade: sbb-button-loading-fade
+    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
 
   @media (forced-colors: active) {
     --sbb-button-color-default-border: CanvasText !important;
@@ -213,6 +218,16 @@ $loading: '[loading], .sbb-loading';
 }
 
 @mixin variables--loading-animation-keyframes {
+  @keyframes sbb-button-loading-fade {
+    from {
+      --sbb-button-loading-opacity: 0;
+    }
+
+    to {
+      --sbb-button-loading-opacity: 1;
+    }
+  }
+
   @keyframes sbb-button-rotate {
     from {
       --sbb-button-loading-angle: -90deg;
@@ -246,9 +261,25 @@ $loading: '[loading], .sbb-loading';
             calc(100% - var(--sbb-button-min-height) / 2)
           )
           50%,
-        var(--sbb-button-color-loading-border) 0deg,
-        var(--sbb-button-color-loading-border) 300deg,
-        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          0deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          300deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
+              calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          360deg
       ),
     var(--_background-color);
 }
@@ -257,7 +288,6 @@ $loading: '[loading], .sbb-loading';
   --_loading-outline-offset: calc(
     var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
   );
-  --_border: none;
   --_border-action: var(--sbb-button-loading-border-width) dotted transparent;
   --_padding-block: calc(
     var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
@@ -265,8 +295,14 @@ $loading: '[loading], .sbb-loading';
   --_padding-inline: calc(
     var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
   );
-  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+  --_animation:
+    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
   --_forced-colors-adjust: none;
+
+  @media (forced-colors: active) {
+    // With forced colors the normal border should be suppressed.
+    --sbb-button-border-override: none;
+  }
 }
 
 @mixin variables--primary {
@@ -355,6 +391,14 @@ $loading: '[loading], .sbb-loading';
   --sbb-button-border-overlap-fix: 0rem;
 }
 
+@mixin variables--secondary-loading {
+  // As the secondary button has a border itself,
+  // we need to override it.
+  // Transparent color is needed because it's the transition starting color when
+  // transitioning from loading to non loading.
+  --sbb-button-border-override: none transparent;
+}
+
 @mixin variables--secondary-negative {
   --sbb-button-color-active-background: var(--sbb-background-color-2-negative);
   --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);
@@ -650,6 +694,10 @@ $loading: '[loading], .sbb-loading';
     &:not(#{$disabled}, #{$active}, #{$loading}) {
       @include variables--secondary-box-shadow;
     }
+
+    &:not(#{$disabled}):is(#{$loading}) {
+      @include variables--secondary-loading;
+    }
   }
 
   :is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
@@ -681,7 +729,13 @@ $loading: '[loading], .sbb-loading';
 
   @property --sbb-button-loading-angle {
     syntax: '<angle>';
-    initial-value: 0deg;
+    initial-value: -90deg;
+    inherits: false;
+  }
+
+  @property --sbb-button-loading-opacity {
+    syntax: '<number>';
+    initial-value: 1;
     inherits: false;
   }
 

package/button.pure.js

@@ -1,9 +1,9 @@
 import{SbbActionBaseElement as e,SbbButtonBaseElement as t,SbbDisabledInteractiveMixin as n,SbbDisabledMixin as r,SbbDisabledTabIndexActionMixin as i,SbbElement as a,SbbLinkBaseElement as o,SbbNamedSlotListMixin as s,SbbNegativeMixin as c,forceType as l}from"./core.js";import{__esDecorate as u,__runInitializers as d}from"tslib";import{html as f,unsafeCSS as p}from"lit";import{property as m}from"lit/decorators.js";import{html as h}from"lit/static-html.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{--sbb-button-color-active-background:var(--sbb-background-color-1-inverted);--sbb-button-color-active-border:var(--sbb-border-color-1);--sbb-button-color-active-text:light-dark(var(--sbb-color-cloud),var(--sbb-color-anthracite));--sbb-button-color-default-background:var(--sbb-background-color-3-inverted);--sbb-button-color-default-border:var(--sbb-border-color-3);--sbb-button-color-default-text:var(--sbb-color-1-inverted);--sbb-button-color-hover-background:var(--sbb-background-color-3-inverted);--sbb-button-color-hover-border:var(--sbb-border-color-3);--sbb-button-color-hover-text:var(--sbb-color-3-inverted);--sbb-button-color-loading-border:light-dark(var(--sbb-color-iron),var(--sbb-color-silver));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent))}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-1-negative-inverted);--sbb-button-color-active-border:var(--sbb-border-color-1-negative);--sbb-button-color-active-text:var(--sbb-color-anthracite);--sbb-button-color-default-background:var(--sbb-background-color-3-negative-inverted);--sbb-button-color-default-border:var(--sbb-border-color-3-negative);--sbb-button-color-default-text:var(--sbb-color-1-negative-inverted);--sbb-button-color-hover-background:var(--sbb-background-color-3-negative-inverted);--sbb-button-color-hover-border:var(--sbb-border-color-3-negative);--sbb-button-color-hover-text:var(--sbb-color-4-negative-inverted);--sbb-button-color-loading-border:var(--sbb-color-silver);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
-`,v=`:host{--sbb-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-button-box-shadow-definition:var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--_width:unset;--_border-color:var(--sbb-button-color-default-border);--_background-color:var(--sbb-button-color-default-background);--_background:var(--_background-color);--_color:var(--sbb-button-color-default-text);--_button-inset:0;--_hover-offset:.0625rem;--_padding-block:var(--sbb-button-padding-block-min);--_padding-inline:var(--sbb-button-padding-inline);--_border:calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix,1px)) solid var(--_border-color);--_animation-loading-delay:var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay));--_animation-loading-duration:var(--sbb-disable-animation-duration,3s);--_animation-loading-rotate-function:linear(0, .25 12.5% 37.5%, .75 62.5% 87.5%, 1);--_animation-loading-rotate:sbb-button-rotate var(--_animation-loading-duration) var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);--_animation-loading-move:sbb-button-move calc(var(--_animation-loading-duration) / 2) var(--_animation-loading-delay) alternate infinite linear;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-button-color-loading-snake-color:Canvas;--sbb-button-border-overlap-fix:0rem;--sbb-button-color-default-border:CanvasText!important;--sbb-button-color-active-border:Highlight!important;--sbb-button-color-default-background:Canvas!important;--sbb-button-color-hover-background:Canvas!important;--sbb-button-color-active-background:Canvas!important;--sbb-button-color-disabled-background:Canvas!important;--sbb-button-color-disabled-text:GrayText!important;--sbb-button-color-loading-border:CanvasText!important;--sbb-button-color-default-text:CanvasText!important;--sbb-button-color-hover-text:CanvasText!important;--sbb-button-color-active-text:CanvasText!important}:host(:is(:state(button),[state--button])){--sbb-button-color-default-text:ButtonText!important;--sbb-button-color-hover-text:ButtonText!important;--sbb-button-color-active-text:ButtonText!important}:host(:is(:state(link),[state--link])){--sbb-button-color-default-text:LinkText!important;--sbb-button-color-hover-text:LinkText!important;--sbb-button-color-active-text:LinkText!important}}:host([negative]){--sbb-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text:var(--sbb-color-aluminium)}:host([size=l]){--sbb-button-min-height:var(--sbb-button-min-height-size-l);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-l)}:host([size=m]){--sbb-button-min-height:var(--sbb-button-min-height-size-m);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-m)}:host([size=s]){--sbb-button-min-height:var(--sbb-button-min-height-size-s);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-s);--sbb-button-gap:var(--sbb-spacing-fixed-1x)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-button-padding-inline:0;--_width:var(--sbb-button-min-height);--_animation-loading-rotate-function:linear}@media (any-hover:hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-translate-y-content-hover:-.0625rem;--sbb-button-shadow-1-offset-y:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y));--sbb-button-shadow-1-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor:var(--sbb-cursor-pointer);--_border-color:var(--sbb-button-color-hover-border);--_color:var(--sbb-button-color-hover-text);--_background-color:var(--sbb-button-color-hover-background);--_button-inset:calc(var(--sbb-button-border-width) * -1)}}@media (forced-colors:active){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border:Highlight!important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor:var(--sbb-cursor-default);--_color:var(--sbb-button-color-disabled-text);--_background-color:var(--sbb-button-color-disabled-background);--_border-color:var(--sbb-button-color-disabled-border);--_border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,:is(:state(active),[state--active]),[loading])){--_color:var(--sbb-button-color-active-text);--_background-color:var(--sbb-button-color-active-background);--_border-color:var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_loading-outline-offset:calc(var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width));--_border:none;--_border-action:var(--sbb-button-loading-border-width) dotted transparent;--_padding-block:calc(var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width));--_padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));--_animation:var(--_animation-loading-rotate), var(--_animation-loading-move);--_forced-colors-adjust:none}.sbb-action-base{gap:var(--sbb-button-gap);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);font-weight:700;line-height:var(--sbb-typo-line-height-text);text-align:left;white-space:nowrap;min-height:var(--sbb-button-min-height);width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);user-select:none;background:var(--_background);border:var(--_border-action);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);forced-color-adjust:var(--_forced-colors-adjust,auto);animation:var(--_animation);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);outline:none;justify-content:center;align-items:center;text-decoration:none;transition-property:color,background-color,padding-top,padding-bottom;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow;position:absolute}:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--_loading-outline-offset,var(--sbb-focus-outline-offset))}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{--_background:border-box padding-box linear-gradient(var(--_background-color)), border-box conic-gradient(from var(--sbb-button-loading-angle) at clamp(calc(var(--sbb-button-min-height) / 2), var(--sbb-button-loading-offset), calc(100% - var(--sbb-button-min-height) / 2)) 50%, var(--sbb-button-color-loading-border) 0deg, var(--sbb-button-color-loading-border) 300deg, var(--sbb-button-color-loading-snake-color,var(--sbb-button-color-active-text)) 360deg), var(--_background-color)}.sbb-button__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover,0)}@keyframes sbb-button-rotate{0%{--sbb-button-loading-angle:-90deg}to{--sbb-button-loading-angle:270deg}}@keyframes sbb-button-move{0%{--sbb-button-loading-offset:0%}to{--sbb-button-loading-offset:100%}}
+`,v=`:host{--sbb-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-button-box-shadow-definition:var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--_width:unset;--_border-color:var(--sbb-button-color-default-border);--_background-color:var(--sbb-button-color-default-background);--_background:var(--_background-color);--_color:var(--sbb-button-color-default-text);--_button-inset:0;--_hover-offset:.0625rem;--_padding-block:var(--sbb-button-padding-block-min);--_padding-inline:var(--sbb-button-padding-inline);--_border:var(--sbb-button-border-override,calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix,1px)) solid var(--_border-color));--_animation-loading-delay:var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay));--_animation-loading-duration:var(--sbb-disable-animation-duration,3s);--_animation-loading-rotate-function:linear(0, .25 12.5% 37.5%, .75 62.5% 87.5%, 1);--_animation-loading-rotate:sbb-button-rotate var(--_animation-loading-duration) var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);--_animation-loading-move:sbb-button-move calc(var(--_animation-loading-duration) / 2) var(--_animation-loading-delay) alternate infinite linear;--_animation-loading-fade:sbb-button-loading-fade var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay)) ease-in forwards;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-button-color-loading-snake-color:Canvas;--sbb-button-border-overlap-fix:0rem;--sbb-button-color-default-border:CanvasText!important;--sbb-button-color-active-border:Highlight!important;--sbb-button-color-default-background:Canvas!important;--sbb-button-color-hover-background:Canvas!important;--sbb-button-color-active-background:Canvas!important;--sbb-button-color-disabled-background:Canvas!important;--sbb-button-color-disabled-text:GrayText!important;--sbb-button-color-loading-border:CanvasText!important;--sbb-button-color-default-text:CanvasText!important;--sbb-button-color-hover-text:CanvasText!important;--sbb-button-color-active-text:CanvasText!important}:host(:is(:state(button),[state--button])){--sbb-button-color-default-text:ButtonText!important;--sbb-button-color-hover-text:ButtonText!important;--sbb-button-color-active-text:ButtonText!important}:host(:is(:state(link),[state--link])){--sbb-button-color-default-text:LinkText!important;--sbb-button-color-hover-text:LinkText!important;--sbb-button-color-active-text:LinkText!important}}:host([negative]){--sbb-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text:var(--sbb-color-aluminium)}:host([size=l]){--sbb-button-min-height:var(--sbb-button-min-height-size-l);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-l)}:host([size=m]){--sbb-button-min-height:var(--sbb-button-min-height-size-m);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-m)}:host([size=s]){--sbb-button-min-height:var(--sbb-button-min-height-size-s);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-s);--sbb-button-gap:var(--sbb-spacing-fixed-1x)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-button-padding-inline:0;--_width:var(--sbb-button-min-height);--_animation-loading-rotate-function:linear}@media (any-hover:hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-translate-y-content-hover:-.0625rem;--sbb-button-shadow-1-offset-y:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y));--sbb-button-shadow-1-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor:var(--sbb-cursor-pointer);--_border-color:var(--sbb-button-color-hover-border);--_color:var(--sbb-button-color-hover-text);--_background-color:var(--sbb-button-color-hover-background);--_button-inset:calc(var(--sbb-button-border-width) * -1)}}@media (forced-colors:active){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border:Highlight!important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor:var(--sbb-cursor-default);--_color:var(--sbb-button-color-disabled-text);--_background-color:var(--sbb-button-color-disabled-background);--_border-color:var(--sbb-button-color-disabled-border);--_border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,:is(:state(active),[state--active]),[loading])){--_color:var(--sbb-button-color-active-text);--_background-color:var(--sbb-button-color-active-background);--_border-color:var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_loading-outline-offset:calc(var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width));--_border-action:var(--sbb-button-loading-border-width) dotted transparent;--_padding-block:calc(var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width));--_padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));--_animation:var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);--_forced-colors-adjust:none}@media (forced-colors:active){:host([loading]:not([disabled],:disabled,[disabled-interactive])){--sbb-button-border-override:none}}.sbb-action-base{gap:var(--sbb-button-gap);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);font-weight:700;line-height:var(--sbb-typo-line-height-text);text-align:left;white-space:nowrap;min-height:var(--sbb-button-min-height);width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);user-select:none;background:var(--_background);border:var(--_border-action);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);forced-color-adjust:var(--_forced-colors-adjust,auto);animation:var(--_animation);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);outline:none;justify-content:center;align-items:center;text-decoration:none;transition-property:color,background-color,padding-top,padding-bottom;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow;position:absolute}:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--_loading-outline-offset,var(--sbb-focus-outline-offset))}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{--_background:border-box padding-box linear-gradient(var(--_background-color)), border-box conic-gradient(from var(--sbb-button-loading-angle) at clamp(calc(var(--sbb-button-min-height) / 2), var(--sbb-button-loading-offset), calc(100% - var(--sbb-button-min-height) / 2)) 50%, color-mix(in srgb, var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%), transparent) 0deg, color-mix(in srgb, var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%), transparent) 300deg, color-mix(in srgb, var(--sbb-button-color-loading-snake-color,var(--sbb-button-color-active-text)) calc(var(--sbb-button-loading-opacity) * 100%), transparent) 360deg), var(--_background-color)}.sbb-button__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover,0)}@keyframes sbb-button-loading-fade{0%{--sbb-button-loading-opacity:0}to{--sbb-button-loading-opacity:1}}@keyframes sbb-button-rotate{0%{--sbb-button-loading-angle:-90deg}to{--sbb-button-loading-angle:270deg}}@keyframes sbb-button-move{0%{--sbb-button-loading-offset:0%}to{--sbb-button-loading-offset:100%}}
 `,y=`:host{-webkit-tap-highlight-color:transparent;--sbb-mini-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-mini-button-color-background:var(--sbb-mini-button-color-default-background);--sbb-mini-button-color:var(--sbb-mini-button-color-text);height:fit-content;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-mini-button-color-text:ButtonText!important;--sbb-mini-button-color-hover-background:Highlight!important;--sbb-mini-button-color-active-background:Highlight!important;--sbb-mini-button-color-disabled-background:Canvas!important;--sbb-mini-button-color-disabled-border:GrayText!important;--sbb-mini-button-color-disabled-text:GrayText!important}}:host([negative]){--sbb-mini-button-color-text:var(--sbb-color-3-negative);--sbb-mini-button-color-default-background:transparent;--sbb-mini-button-color-hover-background:var(--sbb-background-color-3-negative);--sbb-mini-button-color-active-background:var(--sbb-background-color-4-negative);--sbb-mini-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-mini-button-color-disabled-border:var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text:var(--sbb-color-5)}@media (any-hover:hover){:host(:is(:hover,:is(:state(force-hover),[state--force-hover])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]),:active,:is(:state(active),[state--active]))){--sbb-mini-button-translate-y-content-hover:-.0625rem;--sbb-mini-button-color-background:var(--sbb-mini-button-color-hover-background)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background:var(--sbb-mini-button-color-active-background)}:host(:is([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background:var(--sbb-mini-button-color-disabled-background);--sbb-mini-button-border:var(--sbb-border-width-1x) dashed var(--sbb-mini-button-color-disabled-border);--sbb-mini-button-color:var(--sbb-mini-button-color-disabled-text);--sbb-mini-button-pointer-events:none;--sbb-mini-button-cursor:var(--sbb-cursor-default)}:host(:is(:state(focus-visible),[state--focus-visible])){--sbb-focus-outline-style:initial}.sbb-action-base{color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);user-select:none;pointer-events:var(--sbb-mini-button-pointer-events,auto);cursor:var(--sbb-mini-button-cursor,var(--sbb-cursor-pointer));transition:color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);outline:none;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";border-radius:var(--sbb-mini-button-border-radius);background-color:var(--sbb-mini-button-color-background);transition-duration:var(--sbb-mini-button-transition-duration);transition-timing-function:var(--sbb-mini-button-transition-easing-function);border:var(--sbb-mini-button-border);transition-property:inset,background-color;position:absolute;inset:0}.sbb-action-base:focus-visible:before,:host(:is(:is(:state(focus-visible),[state--focus-visible]),:focus-visible)) .sbb-action-base:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}::slotted(sbb-icon),sbb-icon{transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover,0);min-width:var(--_sbb-mini-button-image-size,var(--sbb-size-icon-ui-small));min-height:var(--_sbb-mini-button-image-size,var(--sbb-size-icon-ui-small));justify-content:center;align-items:center;display:flex}
 `,b=`:host{--sbb-mini-button-gap:.125rem;--sbb-mini-button-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display:block;--sbb-mini-button-label-height:var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline:0;--sbb-mini-button-label-display:none;--sbb-mini-button-label-height:unset}.sbb-action-base{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);padding-inline:var(--sbb-mini-button-padding-inline);justify-content:center;align-items:center}.sbb-mini-button__label{white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover,0);overflow:hidden}
 `,x=`:host{--sbb-button-color-active-background:var(--sbb-color-primary150);--sbb-button-color-active-border:var(--sbb-color-primary150);--sbb-button-color-active-text:var(--sbb-color-4-negative);--sbb-button-color-default-background:var(--sbb-color-primary);--sbb-button-color-default-border:var(--sbb-color-primary);--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-color-primary125);--sbb-button-color-hover-border:var(--sbb-color-primary125);--sbb-button-color-hover-text:var(--sbb-color-3-negative);--sbb-button-color-loading-border:light-dark(color-mix(in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text)),color-mix(in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text)));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-primary) 20%, transparent),color-mix(in srgb, var(--sbb-color-primary) 40%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent),color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent))}:host([negative]){--sbb-button-color-active-background:var(--sbb-color-primary150);--sbb-button-color-active-border:var(--sbb-color-primary150);--sbb-button-color-active-text:var(--sbb-color-4-negative);--sbb-button-color-default-background:var(--sbb-color-primary);--sbb-button-color-default-border:var(--sbb-color-primary);--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-color-primary125);--sbb-button-color-hover-border:var(--sbb-color-primary125);--sbb-button-color-hover-text:var(--sbb-color-3-negative);--sbb-button-color-loading-border:color-mix(in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-primary) 60%, transparent),color-mix(in srgb, var(--sbb-color-primary) 40%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent),color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent))}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
-`,S=`:host{--sbb-button-color-active-background:var(--sbb-background-color-3);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:light-dark(var(--sbb-color-anthracite),var(--sbb-color-graphite));--sbb-button-color-default-background:var(--sbb-background-color-1);--sbb-button-color-default-border:var(--sbb-border-color-4-inverted);--sbb-button-color-default-text:var(--sbb-color-3);--sbb-button-color-hover-background:var(--sbb-background-color-1);--sbb-button-color-hover-border:var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text:var(--sbb-color-4);--sbb-button-color-loading-border:var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-border-overlap-fix:0rem}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-2-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-graphite);--sbb-button-color-default-background:var(--sbb-background-color-1-negative);--sbb-button-color-default-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text:var(--sbb-color-3-negative);--sbb-button-color-hover-background:var(--sbb-background-color-1-negative);--sbb-button-color-hover-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-4-negative);--sbb-button-color-loading-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
+`,S=`:host{--sbb-button-color-active-background:var(--sbb-background-color-3);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:light-dark(var(--sbb-color-anthracite),var(--sbb-color-graphite));--sbb-button-color-default-background:var(--sbb-background-color-1);--sbb-button-color-default-border:var(--sbb-border-color-4-inverted);--sbb-button-color-default-text:var(--sbb-color-3);--sbb-button-color-hover-background:var(--sbb-background-color-1);--sbb-button-color-hover-border:var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text:var(--sbb-color-4);--sbb-button-color-loading-border:var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-border-overlap-fix:0rem}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-2-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-graphite);--sbb-button-color-default-background:var(--sbb-background-color-1-negative);--sbb-button-color-default-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text:var(--sbb-color-3-negative);--sbb-button-color-hover-background:var(--sbb-background-color-1-negative);--sbb-button-color-hover-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-4-negative);--sbb-button-color-loading-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}:host(:not([disabled],:disabled,[disabled-interactive])[loading]){--sbb-button-border-override:none transparent}
 `,C=`:host{--sbb-button-color-active-background:var(--sbb-background-color-4);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:var(--sbb-color-1);--sbb-button-color-default-background:transparent;--sbb-button-color-default-border:transparent;--sbb-button-color-default-text:var(--sbb-color-1);--sbb-button-color-hover-background:var(--sbb-background-color-3);--sbb-button-color-hover-border:var(--sbb-border-color-3-inverted);--sbb-button-color-hover-text:var(--sbb-color-1);--sbb-button-color-loading-border:light-dark(var(--sbb-color-silver),var(--sbb-color-granite))}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-4-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-1-negative);--sbb-button-color-default-background:transparent;--sbb-button-color-default-border:transparent;--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-background-color-3-negative);--sbb-button-color-hover-border:var(--sbb-border-color-3-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-1-negative);--sbb-button-color-loading-border:var(--sbb-color-granite)}
 `;const w=p(x),T=p(S),E=p(_),D=p(C),O=p(y),k=p(b),A=e=>(()=>{let t=c(g(e)),n,r=[],i=[],a,o=[],s=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[m({reflect:!0})],a=[l(),m({reflect:!0,type:Boolean})],u(this,null,n,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},r,i),u(this,null,a,{kind:`accessor`,name:`loading`,static:!1,private:!1,access:{has:e=>`loading`in e,get:e=>e.loading,set:(e,t)=>{e.loading=t}},metadata:e},o,s),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.styles=[p(v)]}#e=d(this,r,null);get size(){return this.#e}set size(e){this.#e=e}#t=(d(this,i),d(this,o,!1));get loading(){return this.#t}set loading(e){this.#t=e}constructor(...e){super(...e),d(this,s),this.internals.states.add(`sbb-button`)}willUpdate(e){super.willUpdate(e),e.has(`loading`)&&(this.loading?(this.internals.ariaBusy=`true`,this.internals.ariaDisabled=`true`):(this.internals.ariaBusy=null,this.maybeDisabledInteractive||(this.internals.ariaDisabled=null)))}renderTemplate(){return h`
         ${super.renderIconSlot()}