@sbb-esta/lyne-elements-dev 5.4.0-dev.1785707710 → 5.4.0-dev.1785742243

package/slider.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{ref as o}from"lit/directives/ref.js";import{SbbDisabledMixin as s,SbbElement as c,SbbFormAssociatedMixin as l,SbbReadonlyMixin as u,forceType as d}from"./core.js";import{SbbIconElement as f}from"./icon.pure.js";var p=`:host{--_sbb-slider-value-fraction:0;min-width:var(--sbb-slider-min-width);width:min(var(--sbb-slider-width), 100%);display:inline-block;outline:none!important}:host(:disabled){--sbb-slider-icon-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-slider-knob-border-color:var(--sbb-border-color-5);--sbb-slider-knob-border-size:var(--sbb-border-width-2x);--sbb-slider-knob-border-style:dashed}:host([readonly]){--sbb-slider-icon-color:var(--sbb-color-5);--sbb-slider-knob-border-color:var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color:var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color:var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors:active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color:GrayText;--sbb-slider-selected-line-disabled-color:GrayText;--sbb-slider-line-disabled-color:GrayText}}.sbb-slider__height-container{flex-direction:column;display:flex}.sbb-slider__height-container:before{content:"​";user-select:none;width:0;height:0}.sbb-slider__wrapper{gap:var(--sbb-slider-gap);padding-block:var(--sbb-slider-padding-block);color:var(--sbb-slider-icon-color);display:flex}.sbb-slider__container{min-height:var(--sbb-size-icon-ui-small);flex-grow:1;position:relative}.sbb-slider__range-input{opacity:0;width:100%;margin:0;position:absolute;inset:0}.sbb-slider__line{height:var(--sbb-slider-line-height);background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);pointer-events:none;width:100%;position:absolute;top:50%;overflow:hidden;translate:0 -50%}.sbb-slider__selected-line{background-color:var(--sbb-slider-selected-line-color);height:100%;width:calc(var(--_sbb-slider-value-fraction) * 100%);position:relative}.sbb-slider__knob{box-shadow:var(--sbb-box-shadow-level-5-hard);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);top:50%;transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);pointer-events:none;border-radius:50%;transition-timing-function:ease-in;position:absolute;inset-inline-start:calc(var(--_sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--_sbb-slider-value-fraction));translate:0 -50%}:host(:focus-visible) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-slider-knob-size:var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size:var(--sbb-slider-knob-size-active)}
-`;let m=(()=>{let m=s(u(l(c))),h=[],g,_,v,y,b,x=[],S=[],C,w=[],T=[];return class extends m{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;g=[a()],_=[a({attribute:`value-as-number`,type:Number})],v=[a()],y=[a()],b=[d(),a({attribute:`start-icon`})],C=[d(),a({attribute:`end-icon`})],e(this,null,g,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,h),e(this,null,_,{kind:`setter`,name:`valueAsNumber`,static:!1,private:!1,access:{has:e=>`valueAsNumber`in e,set:(e,t)=>{e.valueAsNumber=t}},metadata:t},null,h),e(this,null,v,{kind:`setter`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,set:(e,t)=>{e.min=t}},metadata:t},null,h),e(this,null,y,{kind:`setter`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,set:(e,t)=>{e.max=t}},metadata:t},null,h),e(this,null,b,{kind:`accessor`,name:`startIcon`,static:!1,private:!1,access:{has:e=>`startIcon`in e,get:e=>e.startIcon,set:(e,t)=>{e.startIcon=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`endIcon`,static:!1,private:!1,access:{has:e=>`endIcon`in e,get:e=>e.endIcon,set:(e,t)=>{e.endIcon=t}},metadata:t},w,T),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-slider`}static{this.elementDependencies=[f]}static{this.role=`slider`}static{this.styles=[i(p)]}static{this.events={didChange:`didChange`}}set value(e){this._isValidNumber(e)?this._value=this._boundBetweenMinMax(e):this._value=null,this.internals.ariaValueNow=this.value}get value(){return this._value??this._defaultValue()}set valueAsNumber(e){this.value=e?.toString()??null}get valueAsNumber(){return Number(this.value)}set min(e){if(!this._isValidNumber(e))return;this._min=e,this.internals.ariaValueMin=this.min;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get min(){return this._min}set max(e){if(!this._isValidNumber(e))return;this._max=e,this.internals.ariaValueMax=this.max;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get max(){return this._max}#e;get startIcon(){return this.#e}set startIcon(e){this.#e=e}#t;get endIcon(){return this.#t}set endIcon(e){this.#t=e}get type(){return`range`}constructor(){super(),this._value=(t(this,h),null),this._min=`0`,this._max=`100`,this.#e=t(this,x,``),this.#t=(t(this,S),t(this,w,``)),this._rangeInput=t(this,T),this.addEventListener?.(`keydown`,e=>this._handleKeydown(e))}connectedCallback(){super.connectedCallback(),this.tabIndex=0}willUpdate(e){super.willUpdate(e),e.has(`readOnly`)&&(this.internals.ariaReadOnly=(!!this.readOnly).toString()),this.style?.setProperty(`--_sbb-slider-value-fraction`,this._valueFraction().toString())}formResetCallback(){this.value=this.getAttribute(`value`)??this._defaultValue()}formStateRestoreCallback(e,t){this.value=e}_defaultValue(){return(+this.min+(this.max-+this.min)/2).toString()}_isValidNumber(e){return e!=null&&!isNaN(Number(e))}_boundBetweenMinMax(e){return Math.max(+this.min,Math.min(+this.max,+e)).toString()}_valueFraction(){let e=this.valueAsNumber,t=+this.min,n=+this.max,r=(e-t)/(n-t);return isNaN(r)?0:Math.max(0,Math.min(1,r))}async _handleKeydown(e){if(e.key!==`Tab`&&e.preventDefault(),!this.readOnly){if(e.key===`Home`)this._rangeInput.value=this.min;else if(e.key===`End`)this._rangeInput.value=this.max;else if(e.key===`ArrowLeft`||e.key===`ArrowDown`)this._rangeInput.stepDown();else if(e.key===`ArrowRight`||e.key===`ArrowUp`)this._rangeInput.stepUp();else if(e.key===`PageDown`)this._rangeInput.stepDown((this.max-+this.min)/10);else if(e.key===`PageUp`)this._rangeInput.stepUp((this.max-+this.min)/10);else return;this._rangeInput.dispatchEvent(new InputEvent(`input`,{bubbles:!0,cancelable:!0,composed:!0})),this._rangeInput.dispatchEvent(new Event(`change`,{bubbles:!0}))}}_dispatchChangeEvent(){this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0}))}render(){return n`
+`;let m=(()=>{let m=s(u(l(c))),h=[],g,_,v,y,b,x=[],S=[],C,w=[],T=[];return class extends m{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;g=[a()],_=[a({attribute:`value-as-number`,type:Number})],v=[a()],y=[a()],b=[d(),a({attribute:`start-icon`})],C=[d(),a({attribute:`end-icon`})],e(this,null,g,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,h),e(this,null,_,{kind:`setter`,name:`valueAsNumber`,static:!1,private:!1,access:{has:e=>`valueAsNumber`in e,set:(e,t)=>{e.valueAsNumber=t}},metadata:t},null,h),e(this,null,v,{kind:`setter`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,set:(e,t)=>{e.min=t}},metadata:t},null,h),e(this,null,y,{kind:`setter`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,set:(e,t)=>{e.max=t}},metadata:t},null,h),e(this,null,b,{kind:`accessor`,name:`startIcon`,static:!1,private:!1,access:{has:e=>`startIcon`in e,get:e=>e.startIcon,set:(e,t)=>{e.startIcon=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`endIcon`,static:!1,private:!1,access:{has:e=>`endIcon`in e,get:e=>e.endIcon,set:(e,t)=>{e.endIcon=t}},metadata:t},w,T),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-slider`}static{this.elementDependencies=[f]}static{this.role=`slider`}static{this.styles=[i(p)]}static{this.events={didChange:`didChange`}}set value(e){this._value=this._isValidNumber(e)?this._boundBetweenMinMax(e):null,this.internals.ariaValueNow=this.value}get value(){return this._value??this._defaultValue()}set valueAsNumber(e){this.value=e?.toString()??null}get valueAsNumber(){return Number(this.value)}set min(e){if(!this._isValidNumber(e))return;this._min=e,this.internals.ariaValueMin=this.min;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get min(){return this._min}set max(e){if(!this._isValidNumber(e))return;this._max=e,this.internals.ariaValueMax=this.max;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get max(){return this._max}#e;get startIcon(){return this.#e}set startIcon(e){this.#e=e}#t;get endIcon(){return this.#t}set endIcon(e){this.#t=e}get type(){return`range`}constructor(){super(),this._value=(t(this,h),null),this._min=`0`,this._max=`100`,this.#e=t(this,x,``),this.#t=(t(this,S),t(this,w,``)),this._rangeInput=t(this,T),this.addEventListener?.(`keydown`,e=>this._handleKeydown(e))}connectedCallback(){super.connectedCallback(),this.tabIndex=0}willUpdate(e){super.willUpdate(e),e.has(`readOnly`)&&(this.internals.ariaReadOnly=(!!this.readOnly).toString()),this.style?.setProperty(`--_sbb-slider-value-fraction`,this._valueFraction().toString())}formResetCallback(){this.value=this.getAttribute(`value`)??this._defaultValue()}formStateRestoreCallback(e,t){this.value=e}_defaultValue(){return(+this.min+(this.max-+this.min)/2).toString()}_isValidNumber(e){return e!=null&&!isNaN(Number(e))}_boundBetweenMinMax(e){return Math.max(+this.min,Math.min(+this.max,+e)).toString()}_valueFraction(){let e=this.valueAsNumber,t=+this.min,n=+this.max,r=(e-t)/(n-t);return isNaN(r)?0:Math.max(0,Math.min(1,r))}async _handleKeydown(e){if(e.key!==`Tab`&&e.preventDefault(),!this.readOnly){if(e.key===`Home`)this._rangeInput.value=this.min;else if(e.key===`End`)this._rangeInput.value=this.max;else if(e.key===`ArrowLeft`||e.key===`ArrowDown`)this._rangeInput.stepDown();else if(e.key===`ArrowRight`||e.key===`ArrowUp`)this._rangeInput.stepUp();else if(e.key===`PageDown`)this._rangeInput.stepDown((this.max-+this.min)/10);else if(e.key===`PageUp`)this._rangeInput.stepUp((this.max-+this.min)/10);else return;this._rangeInput.dispatchEvent(new InputEvent(`input`,{bubbles:!0,cancelable:!0,composed:!0})),this._rangeInput.dispatchEvent(new Event(`change`,{bubbles:!0}))}}_dispatchChangeEvent(){this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0}))}render(){return n`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">

package/stepper.pure.js

@@ -8,7 +8,7 @@ import{html as e,unsafeCSS as t}from"lit";import{SbbButtonBaseElement as n,SbbDi
         <slot></slot>
       </div>
     `}},D=`:host{--sbb-stepper-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));counter-reset:step-label;display:block;position:relative}@media (forced-colors:active){:host{--sbb-stepper-marker-color:ButtonText}}:host(:is(:state(disable-animation),[state--disable-animation])){--sbb-disable-animation-duration:0s}:host([orientation=vertical]){--sbb-stepper-orientation:column}.sbb-stepper__labels{flex-direction:var(--sbb-stepper-orientation);justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m);display:flex;position:relative}.sbb-stepper__labels:before{content:"";background-color:var(--sbb-stepper-marker-color);position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-block-end:var(--sbb-spacing-fixed-4x)}:host([orientation=horizontal]) .sbb-stepper__labels:before{height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size,0);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-end:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=vertical]) .sbb-stepper__labels{border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-inline-start:var(--sbb-spacing-fixed-4x)}:host([orientation=vertical]) .sbb-stepper__labels:before{width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size,0);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-start:0}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}
-`;const O={zero:l,small:s,large:o,ultra:c};var k=class extends Event{get selectedIndex(){return this._selectedIndex}get previousIndex(){return this._previousIndex}get selectedStep(){return this._selectedStep}get previousStep(){return this._previousStep}constructor({selectedIndex:e,previousIndex:t,selectedStep:n,previousStep:r}){super(`stepchange`,{bubbles:!0,composed:!0}),this._selectedIndex=e,this._previousIndex=t,this._selectedStep=n,this._previousStep=r}};let A=(()=>{let n=i,r=[],o,s=[],c=[],l,u,d=[],h=[],g,_=[],S=[],C,w;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;o=[f(),x({type:Boolean})],l=[x({attribute:`horizontal-from`,reflect:!0})],u=[x({reflect:!0})],g=[x({reflect:!0})],C=[x({attribute:!1})],w=[x({attribute:`selected-index`,type:Number})],v(this,null,o,{kind:`accessor`,name:`linear`,static:!1,private:!1,access:{has:e=>`linear`in e,get:e=>e.linear,set:(e,t)=>{e.linear=t}},metadata:e},s,c),v(this,null,l,{kind:`setter`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,set:(e,t)=>{e.horizontalFrom=t}},metadata:e},null,r),v(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,h),v(this,null,g,{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},_,S),v(this,null,C,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:e},null,r),v(this,null,w,{kind:`setter`,name:`selectedIndex`,static:!1,private:!1,access:{has:e=>`selectedIndex`in e,set:(e,t)=>{e.selectedIndex=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-stepper`}static{this.styles=[t(D)]}static{this.events={stepchange:`stepchange`}}#e;get linear(){return this.#e}set linear(e){this.#e=e}set horizontalFrom(e){this._horizontalFrom=e&&O[e]?e:null,this._horizontalFrom&&this._loaded&&this._checkOrientation()}get horizontalFrom(){return this._horizontalFrom}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set selected(e){this._loaded&&this._select(e),this._requestedSelected=e}get selected(){return this.querySelector?.(`sbb-step:is(:state(selected),[state--selected])`)??null}set selectedIndex(e){this._loaded&&e!==null&&this._select(this.steps[e]),this._requestedSelectedIndex=e}get selectedIndex(){return this.selected?this.steps.indexOf(this.selected):null}get steps(){let e=[];return this.querySelectorAll?.(`sbb-step`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}get _enabledSteps(){return this.steps.filter(e=>e.label?(customElements.upgrade(e.label),!e.label.disabled):!1)}constructor(){super(),this._observer=(y(this,r),new b(this,{target:null,callback:e=>{e.forEach(e=>{e.intersectionRatio>0&&(this._setStepperHeight(this.selected),this._setMarkerSize())})}})),this.#e=y(this,s,!1),this._horizontalFrom=(y(this,c),null),this.#t=y(this,d,`horizontal`),this.#n=(y(this,h),y(this,_,null)),this._requestedSelected=(y(this,S),null),this._requestedSelectedIndex=null,this._loaded=!1,this._resizeObserverTimeout=null,this._mediaMatcher=new a(this,{}),this._onStepperResize=()=>{this._checkOrientation(),this._setStepperHeight(this.selected),clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`disable-animation`),150)},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addEventListener?.(`resizechange`,e=>this._onSelectedStepResize(e))}next(){if(this.selectedIndex!==null)for(let e=this.selectedIndex+1;e<this.steps.length;e++){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}previous(){if(this.selectedIndex!==null)for(let e=this.selectedIndex-1;e>=0;e--){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}reset(){let e=this.closest(`form`);e?e.reset():this.querySelectorAll(`form`).forEach(e=>e.reset()),this.selectedIndex=0,document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus()}_isSelectable(e){return e?(customElements.upgrade(e),!(e.label&&(customElements.upgrade(e.label),!this.linear&&e.label.disabled))):!1}_select(e){if(!e||e===this.selected)return;let t=this.selectedIndex,n=this.selected,r=this.steps.indexOf(e),i={currentIndex:t,currentStep:n,nextIndex:r>=0?r:null,nextStep:e};this.selected&&!this.selected.validate(i)||(n?.deselect(),e.select(),this.dispatchEvent(new k({selectedIndex:this.selectedIndex,previousIndex:t,selectedStep:this.selected,previousStep:n})),this._setMarkerSize(),this._setStepperHeight(e),this._configureLinearMode(),document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus())}_setMarkerSize(){if(!this._loaded||!this.selected||this.selectedIndex===void 0||!this.selected.label)return;let e=this.orientation===`horizontal`?this.selected.label.offsetLeft+this.selected.label.offsetWidth:this._calculateLabelOffsetTop();this.style.setProperty(`--sbb-stepper-marker-size`,`${e}px`)}_setStepperHeight(e){if(e&&e.shadowRoot){let t=e.shadowRoot.querySelector(`.sbb-step`);t&&this.style?.setProperty(`--sbb-stepper-content-height`,`${t.offsetHeight}px`)}}_calculateLabelOffsetTop(){if(this.selectedIndex===null)return;let e=0;for(let t of this.steps){if(t===this.selected)break;e=t.label.offsetHeight+e}return e+this.selected.label.offsetHeight+parseFloat(getComputedStyle(this).getPropertyValue(`--sbb-spacing-fixed-6x`))*16*this.selectedIndex}_onSelectedStepResize(e){this._setStepperHeight(e.target)}_configure(){this.steps.forEach((e,t,n)=>{e.configure(this._loaded),e.label?.configure(t+1,n.length,this._loaded)}),this._select(this.selected||this._enabledSteps[0])}_updateLabels(){this.steps.forEach(e=>{e.slot=this.orientation===`horizontal`?`step`:`step-label`})}_checkOrientation(){this.horizontalFrom&&(this.orientation=this._mediaMatcher.matches(O[this.horizontalFrom])?`horizontal`:`vertical`,this._updateLabels()),setTimeout(()=>this._setMarkerSize(),0)}_configureLinearMode(){this.steps.forEach((e,t)=>{e.label&&(customElements.upgrade(e.label),e.label.disable(this.linear&&t>this.selectedIndex||!this.linear&&e.label.matches(`:is(:state(user-disabled),[state--user-disabled])`)))})}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this._onStepperResize,{passive:!0}),this.toggleState(`disable-animation`,!this._loaded)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this._onStepperResize)}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._loaded=!0,this._configure(),this._requestedSelected&&this.steps.indexOf(this._requestedSelected)!==-1?this.selectedIndex=this.steps.indexOf(this._requestedSelected):this._requestedSelectedIndex?this.selectedIndex=this._requestedSelectedIndex:this.selectedIndex=0,this._observer.observe(this),this._checkOrientation(),setTimeout(()=>this.internals.states.delete(`disable-animation`),150)})}willUpdate(e){super.willUpdate(e),e.has(`orientation`)&&!this.horizontalFrom&&(this._updateLabels(),this._setMarkerSize()),e.has(`linear`)&&this._loaded&&this._configureLinearMode(),e.has(`size`)&&this._setMarkerSize()}_handleKeyDown(e){let t=this._enabledSteps;if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=p(e,t.indexOf(this.selected),t.length);this._select(t[n]),e.preventDefault()}}render(){return e`
+`;const O={zero:l,small:s,large:o,ultra:c};var k=class extends Event{get selectedIndex(){return this._selectedIndex}get previousIndex(){return this._previousIndex}get selectedStep(){return this._selectedStep}get previousStep(){return this._previousStep}constructor({selectedIndex:e,previousIndex:t,selectedStep:n,previousStep:r}){super(`stepchange`,{bubbles:!0,composed:!0}),this._selectedIndex=e,this._previousIndex=t,this._selectedStep=n,this._previousStep=r}};let A=(()=>{let n=i,r=[],o,s=[],c=[],l,u,d=[],h=[],g,_=[],S=[],C,w;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;o=[f(),x({type:Boolean})],l=[x({attribute:`horizontal-from`,reflect:!0})],u=[x({reflect:!0})],g=[x({reflect:!0})],C=[x({attribute:!1})],w=[x({attribute:`selected-index`,type:Number})],v(this,null,o,{kind:`accessor`,name:`linear`,static:!1,private:!1,access:{has:e=>`linear`in e,get:e=>e.linear,set:(e,t)=>{e.linear=t}},metadata:e},s,c),v(this,null,l,{kind:`setter`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,set:(e,t)=>{e.horizontalFrom=t}},metadata:e},null,r),v(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,h),v(this,null,g,{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},_,S),v(this,null,C,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:e},null,r),v(this,null,w,{kind:`setter`,name:`selectedIndex`,static:!1,private:!1,access:{has:e=>`selectedIndex`in e,set:(e,t)=>{e.selectedIndex=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-stepper`}static{this.styles=[t(D)]}static{this.events={stepchange:`stepchange`}}#e;get linear(){return this.#e}set linear(e){this.#e=e}set horizontalFrom(e){this._horizontalFrom=e&&O[e]?e:null,this._horizontalFrom&&this._loaded&&this._checkOrientation()}get horizontalFrom(){return this._horizontalFrom}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set selected(e){this._loaded&&this._select(e),this._requestedSelected=e}get selected(){return this.querySelector?.(`sbb-step:is(:state(selected),[state--selected])`)??null}set selectedIndex(e){this._loaded&&e!==null&&this._select(this.steps[e]),this._requestedSelectedIndex=e}get selectedIndex(){return this.selected?this.steps.indexOf(this.selected):null}get steps(){let e=[];return this.querySelectorAll?.(`sbb-step`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}get _enabledSteps(){return this.steps.filter(e=>e.label?(customElements.upgrade(e.label),!e.label.disabled):!1)}constructor(){super(),this._observer=(y(this,r),new b(this,{target:null,callback:e=>{e.forEach(e=>{e.intersectionRatio>0&&(this._setStepperHeight(this.selected),this._setMarkerSize())})}})),this.#e=y(this,s,!1),this._horizontalFrom=(y(this,c),null),this.#t=y(this,d,`horizontal`),this.#n=(y(this,h),y(this,_,null)),this._requestedSelected=(y(this,S),null),this._requestedSelectedIndex=null,this._loaded=!1,this._resizeObserverTimeout=null,this._mediaMatcher=new a(this,{}),this._onStepperResize=()=>{this._checkOrientation(),this._setStepperHeight(this.selected),clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`disable-animation`),150)},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addEventListener?.(`resizechange`,e=>this._onSelectedStepResize(e))}next(){if(this.selectedIndex!==null)for(let e=this.selectedIndex+1;e<this.steps.length;e++){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}previous(){if(this.selectedIndex!==null)for(let e=this.selectedIndex-1;e>=0;e--){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}reset(){let e=this.closest(`form`);e?e.reset():this.querySelectorAll(`form`).forEach(e=>e.reset()),this.selectedIndex=0,document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus()}_isSelectable(e){return e?(customElements.upgrade(e),!(e.label&&(customElements.upgrade(e.label),!this.linear&&e.label.disabled))):!1}_select(e){if(!e||e===this.selected)return;let t=this.selectedIndex,n=this.selected,r=this.steps.indexOf(e),i={currentIndex:t,currentStep:n,nextIndex:r>=0?r:null,nextStep:e};this.selected&&!this.selected.validate(i)||(n?.deselect(),e.select(),this.dispatchEvent(new k({selectedIndex:this.selectedIndex,previousIndex:t,selectedStep:this.selected,previousStep:n})),this._setMarkerSize(),this._setStepperHeight(e),this._configureLinearMode(),document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus())}_setMarkerSize(){if(!this._loaded||!this.selected||this.selectedIndex===void 0||!this.selected.label)return;let e=this.orientation===`horizontal`?this.selected.label.offsetLeft+this.selected.label.offsetWidth:this._calculateLabelOffsetTop();this.style.setProperty(`--sbb-stepper-marker-size`,`${e}px`)}_setStepperHeight(e){if(e&&e.shadowRoot){let t=e.shadowRoot.querySelector(`.sbb-step`);t&&this.style?.setProperty(`--sbb-stepper-content-height`,`${t.offsetHeight}px`)}}_calculateLabelOffsetTop(){if(this.selectedIndex===null)return;let e=0;for(let t of this.steps){if(t===this.selected)break;e=t.label.offsetHeight+e}return e+this.selected.label.offsetHeight+parseFloat(getComputedStyle(this).getPropertyValue(`--sbb-spacing-fixed-6x`))*16*this.selectedIndex}_onSelectedStepResize(e){this._setStepperHeight(e.target)}_configure(){this.steps.forEach((e,t,n)=>{e.configure(this._loaded),e.label?.configure(t+1,n.length,this._loaded)}),this._select(this.selected||this._enabledSteps[0])}_updateLabels(){this.steps.forEach(e=>{e.slot=this.orientation===`horizontal`?`step`:`step-label`})}_checkOrientation(){this.horizontalFrom&&(this.orientation=this._mediaMatcher.matches(O[this.horizontalFrom])?`horizontal`:`vertical`,this._updateLabels()),setTimeout(()=>this._setMarkerSize(),0)}_configureLinearMode(){this.steps.forEach((e,t)=>{e.label&&(customElements.upgrade(e.label),e.label.disable(this.linear&&t>this.selectedIndex||!this.linear&&e.label.matches(`:is(:state(user-disabled),[state--user-disabled])`)))})}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this._onStepperResize,{passive:!0}),this.toggleState(`disable-animation`,!this._loaded)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this._onStepperResize)}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._loaded=!0,this._configure(),this.selectedIndex=this._requestedSelected&&this.steps.indexOf(this._requestedSelected)!==-1?this.steps.indexOf(this._requestedSelected):this._requestedSelectedIndex?this._requestedSelectedIndex:0,this._observer.observe(this),this._checkOrientation(),setTimeout(()=>this.internals.states.delete(`disable-animation`),150)})}willUpdate(e){super.willUpdate(e),e.has(`orientation`)&&!this.horizontalFrom&&(this._updateLabels(),this._setMarkerSize()),e.has(`linear`)&&this._loaded&&this._configureLinearMode(),e.has(`size`)&&this._setMarkerSize()}_handleKeyDown(e){let t=this._enabledSteps;if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=t.indexOf(this.selected),r=p(e,n,t.length);this._select(t[r]),e.preventDefault()}}render(){return e`
       <div class="sbb-stepper__labels" role="tablist">
         <slot name="step-label" @slotchange=${this._configure}></slot>
       </div>

package/tabs.pure.js

@@ -1,7 +1,7 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{ref as o}from"lit/directives/ref.js";import{SbbDisabledMixin as s,SbbElement as c,SbbNamedSlotListMixin as l,SbbPropertyWatcherController as u,forceType as d,getNextElementIndex as f,hostScrollbarStyles as p,isArrowKeyPressed as m,omitEmptyConverter as h,ɵstateController as g}from"./core.js";import{html as _,unsafeStatic as v}from"lit/static-html.js";import{SbbIconNameMixin as y}from"./icon.pure.js";var b=`:host{flex-direction:column;display:flex}:host(:not([size])){--sbb-tab-group-content-gap:var(--sbb-tab-group-content-gap-default)}:host([size=s]){--sbb-tab-group-content-gap:var(--sbb-tab-group-content-gap-size-s)}:host([size=l]){--sbb-tab-group-content-gap:var(--sbb-tab-group-content-gap-size-l)}:host([size=xl]){--sbb-tab-group-content-gap:var(--sbb-tab-group-content-gap-size-xl)}.sbb-tab-group,.sbb-tab-nav-bar{flex-wrap:wrap;display:flex}
 `,x=`:host{--sbb-tab-label-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-tab-label-outline-border-radius-internal:calc(var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset))}:host(:is(:is(:state(size-s),[state--size-s]),[size=s])){--sbb-tab-label-height:var(--sbb-size-element-xs);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xxxs);--sbb-tab-label-font-size:var(--sbb-text-font-size-s)}:host(:is(:is(:state(size-l),[state--size-l]),[size=l])){--sbb-tab-label-height:var(--sbb-size-element-m);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size:var(--sbb-text-font-size-m)}:host(:is(:is(:state(size-xl),[state--size-xl]),[size=xl])){--sbb-tab-label-height:var(--sbb-size-element-m);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size:var(--sbb-text-font-size-xl)}:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){pointer-events:var(--sbb-tab-label-pointer-events,unset)}@media (forced-colors:active){:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){--sbb-tab-label-color:ButtonText;--sbb-tab-label-amount-color:ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a),:host(sbb-tab-label) .sbb-tab-label{align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);padding-inline:var(--sbb-tab-label-inline-padding);min-height:var(--sbb-tab-label-height);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);font-size:var(--sbb-tab-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);font-weight:var(--sbb-tab-label-font-weight);text-decoration:var(--sbb-tab-label-text-decoration);margin:0;display:flex;position:relative}:host(sbb-tab-nav-bar) ::slotted(a):after,:host(sbb-tab-label) .sbb-tab-label:after{content:"";height:var(--sbb-tab-label-marker-thickness);background-color:var(--sbb-tab-label-color);scale:var(--sbb-tab-label-marker-scale,0);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:scale,background-color;position:absolute;inset-block-end:0;inset-inline:0}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider],:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])){position:relative}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider]:before,:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])):before{content:"";width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-tab-label-line-color);position:absolute;inset-block-end:0;inset-inline-start:0}:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-cursor:unset;--sbb-tab-label-pointer-events:none;--sbb-tab-label-text-decoration:line-through}@media (forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-color:GrayText;--sbb-tab-label-amount-color:GrayText}}:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color:var(--sbb-color-3);--sbb-tab-label-cursor:unset;--sbb-tab-label-pointer-events:none;--sbb-tab-label-marker-scale:1}@media (forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color:ButtonText;--sbb-tab-label-amount-color:ButtonText}}@media (any-hover:hover){:host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),:host(sbb-tab-label:hover:not([disabled])){--sbb-tab-label-marker-scale:1}}:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color:var(--sbb-color-3)}@media (forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color:ButtonText;--sbb-tab-label-amount-color:ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),:host(sbb-tab-label:focus-visible) .sbb-tab-label{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-tab-label-outline-border-radius-internal)}
 `;const S=i(b),C=i(x);var w=`:host{--sbb-tab-group-animation-duration:0s;gap:var(--sbb-tab-group-content-gap)}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x))}.sbb-tab-group-content{height:var(--sbb-tab-content-height);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}:host([fixed-height]) ::slotted(sbb-tab){height:100%;overflow:auto}
-`,T=class extends Event{get activeIndex(){return this._activeIndex}get activeTabLabel(){return this._activeTabLabel}get activeTab(){return this._activeTab}get previousIndex(){return this._previousIndex}get previousTabLabel(){return this._previousTabLabel}get previousTab(){return this._previousTab}constructor({activeIndex:e,activeTabLabel:t,activeTab:n,previousIndex:r,previousTabLabel:i,previousTab:a}){super(`tabchange`,{bubbles:!0,composed:!0}),this._activeIndex=e,this._activeTabLabel=t,this._activeTab=n,this._previousIndex=r,this._previousTabLabel=i,this._previousTab=a}};let E=(()=>{let s=c,l,u=[],p=[],h,_=[],v=[],y,b=[],x=[];return class extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;l=[a({reflect:!0})],h=[d(),a({attribute:`initial-selected-index`,type:Number})],y=[d(),a({attribute:`fixed-height`,type:Boolean,reflect:!0})],e(this,null,l,{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},u,p),e(this,null,h,{kind:`accessor`,name:`initialSelectedIndex`,static:!1,private:!1,access:{has:e=>`initialSelectedIndex`in e,get:e=>e.initialSelectedIndex,set:(e,t)=>{e.initialSelectedIndex=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`fixedHeight`,static:!1,private:!1,access:{has:e=>`fixedHeight`in e,get:e=>e.fixedHeight,set:(e,t)=>{e.fixedHeight=t}},metadata:t},b,x),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tab-group`}static{this.styles=[S,i(w)]}static{this.events={tabchange:`tabchange`}}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get initialSelectedIndex(){return this.#t}set initialSelectedIndex(e){this.#t=e}#n;get fixedHeight(){return this.#n}set fixedHeight(e){this.#n=e}get labels(){return Array.from(this.children??[]).filter(e=>/^sbb-tab-label$/u.test(e.localName))}get tabs(){return Array.from(this.children??[]).filter(e=>/^sbb-tab$/u.test(e.localName))}constructor(){super(),this._tabGroupResizeObserver=new n(this,{target:null,skipInitial:!0,callback:()=>this._onTabGroupElementResize()}),this.#e=t(this,u,null),this.#t=(t(this,p),t(this,_,0)),this.#n=(t(this,v),t(this,b,!1)),t(this,x),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}firstUpdated(e){super.firstUpdated(e),this.labels.forEach(e=>e.linkToTab()),this._initSelection(),Promise.resolve().then(()=>this.internals.states.add(`initialized`)),this._tabGroupResizeObserver.observe(this._tabGroupElement)}disableTab(e){this.labels[e]&&(this.labels[e].disabled=!0)}enableTab(e){this.labels[e]&&(this.labels[e].disabled=!1)}activateTab(e){this.labels[e]?.activate()}_enabledTabs(){return this.labels.filter(e=>(customElements.upgrade(e),!e.disabled))}_onContentSlotChange(){this._contentSlotChangeDebounceId&&clearTimeout(this._contentSlotChangeDebounceId),this._contentSlotChangeDebounceId=setTimeout(()=>{this.labels.forEach(e=>e.linkToTab()),this.labels.find(e=>e.active)?.activate()},150)}_onLabelSlotChange(){this.labels.forEach(e=>e.linkToTab()),this._ensureActiveTab()}_ensureActiveTab(){this.matches?.(`:is(:state(initialized),[state--initialized])`)&&!this.labels.some(e=>e.active)&&this._initSelection()}_initSelection(){let e=this.labels[this.initialSelectedIndex];if(e&&(customElements.upgrade(e),this.initialSelectedIndex>=0&&this.initialSelectedIndex<this.labels.length&&!e.disabled)){e.activate();return}this._enabledTabs()[0]?.activate()}_onTabGroupElementResize(){let e=this.labels;e.forEach(t=>{g(t)?.toggle(`has-divider`,t===e[0]||t.offsetLeft===e[0].offsetLeft)}),this.style.setProperty(`--sbb-tab-group-width`,`${this._tabGroupElement.clientWidth}px`)}_handleKeyDown(e){let t=this._enabledTabs();if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=f(e,t.findIndex(e=>e.active),t.length);t[n]?.activate(),t[n]?.focus(),e.preventDefault()}}setTabContentHeight(e){this.style.setProperty(`--sbb-tab-content-height`,`${e}px`)}render(){return r`
+`,T=class extends Event{get activeIndex(){return this._activeIndex}get activeTabLabel(){return this._activeTabLabel}get activeTab(){return this._activeTab}get previousIndex(){return this._previousIndex}get previousTabLabel(){return this._previousTabLabel}get previousTab(){return this._previousTab}constructor({activeIndex:e,activeTabLabel:t,activeTab:n,previousIndex:r,previousTabLabel:i,previousTab:a}){super(`tabchange`,{bubbles:!0,composed:!0}),this._activeIndex=e,this._activeTabLabel=t,this._activeTab=n,this._previousIndex=r,this._previousTabLabel=i,this._previousTab=a}};let E=(()=>{let s=c,l,u=[],p=[],h,_=[],v=[],y,b=[],x=[];return class extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;l=[a({reflect:!0})],h=[d(),a({attribute:`initial-selected-index`,type:Number})],y=[d(),a({attribute:`fixed-height`,type:Boolean,reflect:!0})],e(this,null,l,{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},u,p),e(this,null,h,{kind:`accessor`,name:`initialSelectedIndex`,static:!1,private:!1,access:{has:e=>`initialSelectedIndex`in e,get:e=>e.initialSelectedIndex,set:(e,t)=>{e.initialSelectedIndex=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`fixedHeight`,static:!1,private:!1,access:{has:e=>`fixedHeight`in e,get:e=>e.fixedHeight,set:(e,t)=>{e.fixedHeight=t}},metadata:t},b,x),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tab-group`}static{this.styles=[S,i(w)]}static{this.events={tabchange:`tabchange`}}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get initialSelectedIndex(){return this.#t}set initialSelectedIndex(e){this.#t=e}#n;get fixedHeight(){return this.#n}set fixedHeight(e){this.#n=e}get labels(){return Array.from(this.children??[]).filter(e=>/^sbb-tab-label$/u.test(e.localName))}get tabs(){return Array.from(this.children??[]).filter(e=>/^sbb-tab$/u.test(e.localName))}constructor(){super(),this._tabGroupResizeObserver=new n(this,{target:null,skipInitial:!0,callback:()=>this._onTabGroupElementResize()}),this.#e=t(this,u,null),this.#t=(t(this,p),t(this,_,0)),this.#n=(t(this,v),t(this,b,!1)),t(this,x),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}firstUpdated(e){super.firstUpdated(e),this.labels.forEach(e=>e.linkToTab()),this._initSelection(),Promise.resolve().then(()=>this.internals.states.add(`initialized`)),this._tabGroupResizeObserver.observe(this._tabGroupElement)}disableTab(e){this.labels[e]&&(this.labels[e].disabled=!0)}enableTab(e){this.labels[e]&&(this.labels[e].disabled=!1)}activateTab(e){this.labels[e]?.activate()}_enabledTabs(){return this.labels.filter(e=>(customElements.upgrade(e),!e.disabled))}_onContentSlotChange(){this._contentSlotChangeDebounceId&&clearTimeout(this._contentSlotChangeDebounceId),this._contentSlotChangeDebounceId=setTimeout(()=>{this.labels.forEach(e=>e.linkToTab()),this.labels.find(e=>e.active)?.activate()},150)}_onLabelSlotChange(){this.labels.forEach(e=>e.linkToTab()),this._ensureActiveTab()}_ensureActiveTab(){this.matches?.(`:is(:state(initialized),[state--initialized])`)&&!this.labels.some(e=>e.active)&&this._initSelection()}_initSelection(){let e=this.labels[this.initialSelectedIndex];if(e&&(customElements.upgrade(e),this.initialSelectedIndex>=0&&this.initialSelectedIndex<this.labels.length&&!e.disabled)){e.activate();return}this._enabledTabs()[0]?.activate()}_onTabGroupElementResize(){let e=this.labels;e.forEach(t=>{g(t)?.toggle(`has-divider`,t===e[0]||t.offsetLeft===e[0].offsetLeft)}),this.style.setProperty(`--sbb-tab-group-width`,`${this._tabGroupElement.clientWidth}px`)}_handleKeyDown(e){let t=this._enabledTabs();if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=t.findIndex(e=>e.active),r=f(e,n,t.length);t[r]?.activate(),t[r]?.focus(),e.preventDefault()}}setTabContentHeight(e){this.style.setProperty(`--sbb-tab-content-height`,`${e}px`)}render(){return r`
       <div
         class="sbb-tab-group"
         role="tablist"

package/time-input.pure.js

@@ -1,2 +1,2 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedInputMixin as o,SbbLanguageController as s,i18nTimeInputChange as c,i18nTimeInvalid as l,i18nTimeMax as u,i18nTimeMaxLength as d,sbbLiveAnnouncer as f}from"./core.js";var p=`:host{min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center;font-weight:400;display:inline-flex}@media (forced-colors:active){:host{color:fieldtext}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media (forced-colors:active){:host(:empty):after{color:graytext}}
-`;const m=/[0-9.:,\-;_hH]/,h=/[^0-9.:,\-;_hH]/g,g=/^([0-9]{1,2})([0-9]{2})$/,_=/^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;let v=(()=>{let v=o(a),y=[],b;return class extends v{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;b=[i({attribute:!1})],e(this,null,b,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-time-input`}static{this.styles=[r(p)]}set value(e){e=typeof e==`string`?e.replace(h,``).substring(0,5):``,this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatTime()),super.value=e}get value(){return super.value??``}set valueAsDate(e){let t=this._toTime(e);if(!(this.isSelected()&&(t===null||this._isSameTime(t,this._parseValue(this.value)))))if(t){this._valueAsTime=t;let e=this._formatTime();this.value!==e&&(this.value=e)}else this._valueAsTime=null,this.value=``}get valueAsDate(){if(this._valueAsTime&&this._isTimeValid(this._valueAsTime)){let e=new Date(0);return e.setHours(this._valueAsTime.hours),e.setMinutes(this._valueAsTime.minutes),e}else return null}constructor(){super(),this._valueAsTime=t(this,y),this._language=new s(this),this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0}),this.addEventListener?.(`change`,()=>f.announce(c(this.value)[this._language.current])),this.addEventListener?.(`keydown`,e=>this._preventCharInsert(e))}connectedCallback(){super.connectedCallback(),this.inputMode||=`numeric`,this.placeholder||=`HH:MM`}disconnectedCallback(){super.disconnectedCallback()}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._formatTime();this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsTime=this._parseValue(e),this._valueCache=[e,this._valueAsTime??null])}_parseValue(e){let t=e?.trim();if(!t)return null;let n=t.match(g)??t.match(_);return n?{hours:+n[1]||0,minutes:+n[2]||0}:null}_toTime(e){return e instanceof Date&&!isNaN(e.valueOf())?{hours:e.getHours(),minutes:e.getMinutes()}:null}_isSameTime(e,t){return!!(e==t||e&&t&&e.hours===t.hours&&e.minutes===t.minutes)}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatTime();this.value!==e&&(super.value=e)}}_formatTime(){let e=this.valueAsDate;return e?`${String(e.getHours()).padStart(2,`0`)}:${String(e.getMinutes()).padStart(2,`0`)}`:``}preparePastedText(e){return e.replace(h,``).substring(0,5-(this.textContent?.length??0))}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._valueAsTime?this._isTimeValid(this._valueAsTime)?this._removeValidityErrors():(this._removeValidityErrors(`rangeOverflow`),this.setValidityFlag(`rangeOverflow`,u[this.language.current])):(this._removeValidityErrors(`badInput`),this.setValidityFlag(`badInput`,l[this.language.current])):this._removeValidityErrors()}_removeValidityErrors(e){[`badInput`,`rangeOverflow`].filter(t=>t!==e).forEach(e=>this.removeValidityFlag(e))}_isTimeValid(e){return e.hours<24&&e.minutes<60}_preventCharInsert(e){e.ctrlKey||e.altKey||e.metaKey||[`Backspace`,`Tab`,`Enter`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`,`PageUp`,`PageDown`,`Delete`].includes(e.key)||m.test(e.key)&&(this.value.length<5||this._hasSelection())||(e.preventDefault(),this.value.length>=5&&f.announce(d[this._language.current]))}_hasSelection(){let e=window.getSelection()?.getRangeAt(0);return!!e&&e.startOffset!==e.endOffset}}})();export{v as SbbTimeInputElement};
+`;const m=/[0-9.:,\-;_hH]/,h=/[^0-9.:,\-;_hH]/g,g=/^([0-9]{1,2})([0-9]{2})$/,_=/^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;let v=(()=>{let v=o(a),y=[],b;return class extends v{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;b=[i({attribute:!1})],e(this,null,b,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-time-input`}static{this.styles=[r(p)]}set value(e){e=typeof e==`string`?e.replace(h,``).substring(0,5):``,this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatTime()),super.value=e}get value(){return super.value??``}set valueAsDate(e){let t=this._toTime(e);if(!(this.isSelected()&&(t===null||this._isSameTime(t,this._parseValue(this.value)))))if(t){this._valueAsTime=t;let e=this._formatTime();this.value!==e&&(this.value=e)}else this._valueAsTime=null,this.value=``}get valueAsDate(){if(this._valueAsTime&&this._isTimeValid(this._valueAsTime)){let e=new Date(0);return e.setHours(this._valueAsTime.hours),e.setMinutes(this._valueAsTime.minutes),e}return null}constructor(){super(),this._valueAsTime=t(this,y),this._language=new s(this),this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0}),this.addEventListener?.(`change`,()=>f.announce(c(this.value)[this._language.current])),this.addEventListener?.(`keydown`,e=>this._preventCharInsert(e))}connectedCallback(){super.connectedCallback(),this.inputMode||=`numeric`,this.placeholder||=`HH:MM`}disconnectedCallback(){super.disconnectedCallback()}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._formatTime();this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsTime=this._parseValue(e),this._valueCache=[e,this._valueAsTime??null])}_parseValue(e){let t=e?.trim();if(!t)return null;let n=t.match(g)??t.match(_);return n?{hours:+n[1]||0,minutes:+n[2]||0}:null}_toTime(e){return e instanceof Date&&!isNaN(e.valueOf())?{hours:e.getHours(),minutes:e.getMinutes()}:null}_isSameTime(e,t){return!!(e==t||e&&t&&e.hours===t.hours&&e.minutes===t.minutes)}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatTime();this.value!==e&&(super.value=e)}}_formatTime(){let e=this.valueAsDate;return e?`${String(e.getHours()).padStart(2,`0`)}:${String(e.getMinutes()).padStart(2,`0`)}`:``}preparePastedText(e){return e.replace(h,``).substring(0,5-(this.textContent?.length??0))}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._valueAsTime?this._isTimeValid(this._valueAsTime)?this._removeValidityErrors():(this._removeValidityErrors(`rangeOverflow`),this.setValidityFlag(`rangeOverflow`,u[this.language.current])):(this._removeValidityErrors(`badInput`),this.setValidityFlag(`badInput`,l[this.language.current])):this._removeValidityErrors()}_removeValidityErrors(e){[`badInput`,`rangeOverflow`].filter(t=>t!==e).forEach(e=>this.removeValidityFlag(e))}_isTimeValid(e){return e.hours<24&&e.minutes<60}_preventCharInsert(e){e.ctrlKey||e.altKey||e.metaKey||[`Backspace`,`Tab`,`Enter`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`,`PageUp`,`PageDown`,`Delete`].includes(e.key)||m.test(e.key)&&(this.value.length<5||this._hasSelection())||(e.preventDefault(),this.value.length>=5&&f.announce(d[this._language.current]))}_hasSelection(){let e=window.getSelection()?.getRangeAt(0);return!!e&&e.startOffset!==e.endOffset}}})();export{v as SbbTimeInputElement};