@sbb-esta/lyne-elements-dev 5.7.0-dev.1788783153 → 5.8.0-dev.1788796432

package/navigation.pure.js

@@ -1,12 +1,12 @@
-import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{html as i}from"lit/static-html.js";import{IS_FOCUSABLE_QUERY as a,SbbButtonBaseElement as o,SbbDisabledMixin as s,SbbElement as c,SbbEscapableOverlayController as l,SbbFocusTrapController as u,SbbInertController as d,SbbLanguageController as f,SbbLinkBaseElement as p,SbbMediaMatcherController as m,SbbMediaQueryBreakpointSmallAndBelow as h,SbbNamedSlotListMixin as g,SbbOpenCloseBaseElement as _,SbbPropertyWatcherController as v,SbbScrollHandler as y,SbbUpdateSchedulerMixin as b,forceType as x,i18nCloseNavigation as S,i18nGoBack as C,idReference as w,isEventOnElement as T,isZeroAnimationDuration as E,omitEmptyConverter as D,popoverResetStyles as O,removeAriaOverlayTriggerProperties as k,sbbInputModalityDetector as A,scrollbarStyles as j,setAriaOverlayTriggerProperties as M,ɵstateController as N}from"./core.js";import{SbbIconElement as P}from"./icon.pure.js";import{__esDecorate as F,__runInitializers as I}from"tslib";import{property as L,state as R}from"lit/decorators.js";import{ResizeController as z}from"@lit-labs/observers/resize-controller.js";import{SbbTransparentButtonElement as B}from"./button.pure.js";import{ref as V}from"lit/directives/ref.js";var H=`:host{--_sbb-navigation-action-inset-inline-start:calc((var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1);--_sbb-navigation-action-inset-block-start:calc(1em * (var(--sbb-typo-line-height-text) / 2));--sbb-navigation-action-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x));--sbb-navigation-cursor:var(--sbb-cursor-pointer);--sbb-navigation-text-decoration:none;display:block;outline:none!important}:host(:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active]).sbb-active){--sbb-navigation-action-icon-display:block}:host(:is(:state(action-active),[state--action-active])){--sbb-navigation-action-color:var(--sbb-color-5)}@media (forced-colors:active){:host(:is(:state(action-active),[state--action-active])){--sbb-navigation-action-color:Highlight}}sbb-icon{display:var(--sbb-navigation-action-icon-display);position:absolute;inset-block-start:var(--_sbb-navigation-action-inset-block-start);inset-inline-start:var(--_sbb-navigation-action-inset-inline-start);translate:0 -50%}@media (any-hover:hover){:host(:hover){--sbb-navigation-action-color:var(--sbb-color-5)}}@media (forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-navigation-action-color:ButtonText}}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]))){--sbb-navigation-action-line-height:var(--sbb-typo-line-height-text);--sbb-navigation-action-letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:is(:state(size-s),[state--size-s])){--sbb-navigation-action-font-size:var(--sbb-text-font-size-xxs)}:host(:is(:state(size-m),[state--size-m])){--sbb-navigation-action-font-size:var(--sbb-text-font-size-s)}:is(.sbb-navigation-button,.sbb-navigation-link){color:var(--sbb-navigation-action-color);cursor:var(--sbb-navigation-cursor);transition:color var(--sbb-navigation-action-transition-duration) ease;text-align:left;font-size:var(--sbb-navigation-action-font-size);line-height:var(--sbb-navigation-action-line-height);letter-spacing:var(--sbb-navigation-action-letter-spacing);hyphens:auto;text-decoration:var(--sbb-navigation-text-decoration);user-select:none;-webkit-tap-highlight-color:transparent;outline:none;font-weight:700;display:flex;position:relative}@media (forced-colors:active){:is(.sbb-navigation-button,.sbb-navigation-link){transition:none}}:host(:focus-visible) :is(.sbb-navigation-button,.sbb-navigation-link),:is(.sbb-navigation-button,.sbb-navigation-link):focus-visible{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:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host(:is(:disabled,[disabled])){--sbb-navigation-action-color:var(--sbb-color-5);--sbb-navigation-cursor:unset;--sbb-navigation-text-decoration:line-through}
-`;const U=e=>{class t extends s(e){static{this.elementDependencies=[P]}static{this.styles=[r(H)]}get marker(){return this._navigationMarker}get section(){return this._navigationSection}constructor(...e){super(...e),this._navigationMarker=null,this._navigationSection=null,this._size=`l`,this.addEventListener?.(`click`,()=>{!this.matches(`:is(:state(action-active),[state--action-active])`)&&this._navigationMarker&&!this.connectedSection&&this.marker?.select(this)}),this.addController(new v(this,()=>this.closest(`sbb-navigation-marker`),{size:e=>this._applySize(e.size)}))}connectedCallback(){super.connectedCallback(),this._navigationMarker=this.closest(`sbb-navigation-marker`),this._navigationSection=this.closest(`sbb-navigation-section`),this.toggleState(`section-action`,!!this._navigationSection),this.closest(`sbb-navigation-list`)&&this._applySize(`m`)}_applySize(e){this._size&&this.internals.states.delete(`size-${this._size}`),this._size=e,this._size&&this.internals.states.add(`size-${this._size}`)}renderTemplate(){return i`<sbb-icon name="dash-small"></sbb-icon> <slot></slot>`}}return t};var W=class extends U(o){static{this.elementName=`sbb-navigation-button`}},G=class extends U(p){static{this.elementName=`sbb-navigation-link`}},K=`:host{display:block}.sbb-navigation-list__content{align-items:flex-start;gap:var(--sbb-navigation-list-gap);margin-block:var(--sbb-navigation-list-margin-block);flex-direction:column;display:flex}.sbb-navigation-list__label{color:var(--sbb-color-5);font-weight:700;font-size:var(--sbb-navigation-list-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);padding-block-end:var(--sbb-navigation-list-padding-block-end);display:block}:host(:not(:is(:state(slotted-label),[state--slotted-label]),[label])) .sbb-navigation-list__label{display:none}
+import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{html as i}from"lit/static-html.js";import{IS_FOCUSABLE_QUERY as a,SbbButtonBaseElement as o,SbbDisabledMixin as s,SbbElement as c,SbbEscapableOverlayController as l,SbbFocusTrapController as u,SbbInertController as d,SbbLanguageController as f,SbbLinkBaseElement as p,SbbMediaMatcherController as m,SbbMediaQueryBreakpointSmallAndBelow as h,SbbNamedSlotListMixin as g,SbbOpenCloseBaseElement as _,SbbPropertyWatcherController as v,SbbScrollHandler as y,SbbUpdateSchedulerMixin as b,forceType as x,i18nCloseNavigation as S,i18nGoBack as C,idReference as w,isEventOnElement as T,isZeroAnimationDuration as E,omitEmptyConverter as D,popoverResetStyles as O,removeAriaOverlayTriggerProperties as k,sbbInputModalityDetector as A,scrollbarStyles as j,setAriaOverlayTriggerProperties as M,ɵstateController as N}from"./core.js";import{SbbIconElement as P}from"./icon.pure.js";import{__esDecorate as F,__runInitializers as I}from"tslib";import{property as L,state as R}from"lit/decorators.js";import{ResizeController as z}from"@lit-labs/observers/resize-controller.js";import{SbbTransparentButtonElement as B}from"./button.pure.js";import{ref as V}from"lit/directives/ref.js";var H=`:host{--_sbb-navigation-action-inset-inline-start:calc((var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1);--_sbb-navigation-action-inset-block-start:calc(1em * (var(--sbb-typo-line-height-text) / 2));--sbb-navigation-action-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x));--sbb-navigation-cursor:var(--sbb-cursor-pointer);--sbb-navigation-text-decoration:none;display:block;outline:none!important}:host(:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active]).sbb-active){--sbb-navigation-action-icon-display:block}:host(:is(:state(action-active),[state--action-active])){--sbb-navigation-action-color:var(--sbb-color-5)}@media (forced-colors:active){:host(:is(:state(action-active),[state--action-active])){--sbb-navigation-action-color:Highlight}}sbb-icon{display:var(--sbb-navigation-action-icon-display);position:absolute;inset-block-start:var(--_sbb-navigation-action-inset-block-start);inset-inline-start:var(--_sbb-navigation-action-inset-inline-start);translate:0 -50%}@media (any-hover:hover){:host(:hover){--sbb-navigation-action-color:var(--sbb-color-5)}}@media (forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-navigation-action-color:ButtonText}}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]))){--sbb-navigation-action-line-height:var(--sbb-typo-line-height-text);--sbb-navigation-action-letter-spacing:var(--sbb-letter-spacing-text)}:host(:is(:state(size-s),[state--size-s])){--sbb-navigation-action-font-size:var(--sbb-text-font-size-xxs)}:host(:is(:state(size-m),[state--size-m])){--sbb-navigation-action-font-size:var(--sbb-text-font-size-s)}:is(.sbb-navigation-button,.sbb-navigation-link){color:var(--sbb-navigation-action-color);cursor:var(--sbb-navigation-cursor);transition:color var(--sbb-navigation-action-transition-duration) ease;text-align:left;font-size:var(--sbb-navigation-action-font-size);line-height:var(--sbb-navigation-action-line-height);letter-spacing:var(--sbb-navigation-action-letter-spacing);hyphens:auto;text-decoration:var(--sbb-navigation-text-decoration);user-select:none;-webkit-tap-highlight-color:transparent;outline:none;font-weight:700;display:flex;position:relative}@media (forced-colors:active){:is(.sbb-navigation-button,.sbb-navigation-link){transition:none}}:host(:focus-visible) :is(.sbb-navigation-button,.sbb-navigation-link),:is(.sbb-navigation-button,.sbb-navigation-link):focus-visible{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:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host(:is(:disabled,[disabled])){--sbb-navigation-action-color:var(--sbb-color-5);--sbb-navigation-cursor:unset;--sbb-navigation-text-decoration:line-through}
+`;const U=e=>{class t extends s(e){static{this.elementDependencies=[P]}static{this.styles=[r(H)]}get marker(){return this._navigationMarker}get section(){return this._navigationSection}constructor(...e){super(...e),this._navigationMarker=null,this._navigationSection=null,this._size=`l`,this.addEventListener?.(`click`,()=>{!this.matches(`:is(:state(action-active),[state--action-active])`)&&this._navigationMarker&&!this.connectedSection&&this.marker?.select(this)}),this.addController(new v(this,()=>this.closest(`sbb-navigation-marker`),{size:e=>this._applySize(e.size)}))}connectedCallback(){super.connectedCallback(),this._navigationMarker=this.closest(`sbb-navigation-marker`),this._navigationSection=this.closest(`sbb-navigation-section`),this.toggleState(`section-action`,!!this._navigationSection),this.closest(`sbb-navigation-list`)&&this._applySize(`m`)}_applySize(e){this._size&&this.internals.states.delete(`size-${this._size}`),this._size=e,this._size&&this.internals.states.add(`size-${this._size}`)}renderTemplate(){return i`<sbb-icon name="dash-small"></sbb-icon> <slot></slot>`}}return t};var W=class extends U(o){static{this.elementName=`sbb-navigation-button`}},G=class extends U(p){static{this.elementName=`sbb-navigation-link`}},K=`:host{display:block}.sbb-navigation-list__content{align-items:flex-start;gap:var(--sbb-navigation-list-gap);margin-block:var(--sbb-navigation-list-margin-block);flex-direction:column;display:flex}.sbb-navigation-list__label{color:var(--sbb-color-5);font-weight:700;font-size:var(--sbb-navigation-list-font-size);letter-spacing:var(--sbb-letter-spacing-text);padding-block-end:var(--sbb-navigation-list-padding-block-end);display:block}:host(:not(:is(:state(slotted-label),[state--slotted-label]),[label])) .sbb-navigation-list__label{display:none}
 `;let q=(()=>{let t=g(c),n,i=[],a=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[x(),L({reflect:!0,converter:D})],F(this,null,n,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:e},i,a),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation-list`}static{this.styles=[r(K)]}#e;get label(){return this.#e}set label(e){this.#e=e}render(){return e`
       <span class="sbb-navigation-list__label" id="sbb-navigation-link-label-id">
         <slot name="label">${this.label}</slot>
       </span>
       ${this.renderList({class:`sbb-navigation-list__content`,ariaLabelledby:`sbb-navigation-link-label-id`})}
-    `}constructor(){super(...arguments),this.listChildLocalNames=[`sbb-navigation-button`,`sbb-navigation-link`],this.#e=I(this,i,``),I(this,a)}}})();var J=`:host{--sbb-navigation-marker-margin-block:calc(1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2);display:block}:host([size=s]){--sbb-navigation-action-gap:var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width:.5rem;--sbb-navigation-marker-typo-line-height:var(--sbb-typo-line-height-text);--sbb-navigation-margin-inline-start:var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x:calc(var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x));--sbb-navigation-marker-padding-inline-start:calc(var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x));--sbb-navigation-marker-font-size:var(--sbb-text-font-size-xxs);--sbb-navigation-marker-letter-spacing:var(--sbb-typo-letter-spacing-text);--sbb-navigation-marker-line-height:var(--sbb-typo-line-height-text)}:host([size=l]){--sbb-navigation-marker-font-size:var(--sbb-heading-font-size-4);--sbb-navigation-marker-letter-spacing:var(--sbb-typo-letter-spacing-heading);--sbb-navigation-marker-line-height:var(--sbb-typo-line-height-heading)}.sbb-navigation-marker{align-items:flex-start;gap:var(--sbb-navigation-action-gap);font-size:var(--sbb-navigation-marker-font-size);line-height:var(--sbb-navigation-marker-line-height);letter-spacing:var(--sbb-navigation-marker-letter-spacing);flex-direction:column;padding-inline-start:var(--sbb-navigation-marker-padding-inline-start);font-weight:700;display:flex;position:relative}.sbb-navigation-marker:before{content:"";opacity:0;width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-5);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));transition-property:opacity,inset-block-start;transition-timing-function:ease;position:absolute;inset-block-start:var(--sbb-navigation-marker-position-y);inset-inline-start:var(--sbb-navigation-marker-position-x)}:host(:is(:state(has-active-action),[state--has-active-action])) .sbb-navigation-marker:before{opacity:1}@media (forced-colors:active){.sbb-navigation-marker:before{border-color:canvastext}}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}
-`;let Y=(()=>{let e=g(c),t,n=[],i=[];return class extends e{static{let r=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;t=[L({reflect:!0})],F(this,null,t,{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:r},n,i),r&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:r})}static{this.elementName=`sbb-navigation-marker`}static{this.styles=[r(J)]}#e;get size(){return this.#e}set size(e){this.#e=e}constructor(){super(),this.listChildLocalNames=[`sbb-navigation-button`,`sbb-navigation-link`],this.#e=I(this,n,`l`),this._currentActiveAction=I(this,i),this.addController(new z(this,{skipInitial:!0,callback:()=>this._setMarkerPosition()}))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&this._updateMarkerActions(),this.toggleState(`has-active-action`,!!this._currentActiveAction)}_updateMarkerActions(){this._currentActiveAction=this.listChildren.find(e=>e.matches(`:is(:state(action-active),[state--action-active])`)),this._setMarkerPosition()}connectedCallback(){super.connectedCallback(),this._checkActiveAction()}_checkActiveAction(){let e=this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`);e&&this.select(e)}select(e){e&&(this.reset(),N(e).add(`action-active`),this._currentActiveAction=e,setTimeout(()=>this._setMarkerPosition()))}firstUpdated(e){super.firstUpdated(e),setTimeout(()=>this._setMarkerPosition())}reset(){this._currentActiveAction&&=(N(this._currentActiveAction).delete(`action-active`),this._currentActiveAction.connectedSection?.close(),void 0)}_setMarkerPosition(){if(!this._currentActiveAction)return;let e=this.listChildren.indexOf(this._currentActiveAction),t=this.shadowRoot.querySelector(`li:nth-child(${e+1})`)?.offsetTop;t!=null&&this.style?.setProperty(`--sbb-navigation-marker-position-y`,`${t}px`)}render(){return this.renderList()}}})();var X=`:host{--sbb-navigation-section-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);display:var(--sbb-navigation-section-display,none);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index,var(--sbb-overlay-default-z-index));inset-block-start:0;inset-inline-start:0}@media (width>=64rem){:host{--sbb-navigation-section-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-navigation-section-width:calc(100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive));translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-section-pointer-events:all}:host(:is(:state(state-opening),[state--state-opening])){--sbb-navigation-section-position:absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-pointer-events:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-display:block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted(:is(:state(sbb-button),[state--sbb-button])){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{width:100%;height:100%;color:var(--sbb-navigation-color,var(--sbb-color-1-negative));background-color:#0000;border:none;margin:0;padding:0;display:none;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section{animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section{animation-name:close}@media (forced-colors:active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper{--sbb-scrollbar-color:transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start);display:flex;position:relative}@media (width>=64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media (width>=90rem){.sbb-navigation-section__header{grid-column:1/4}}.sbb-navigation-section__back{translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0;position:absolute}@media (width>=64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{font-weight:700;font-size:var(--sbb-navigation-section-font-size);letter-spacing:var(--sbb-typo-letter-spacing-heading);line-height:var(--sbb-typo-line-height-heading)}.sbb-navigation-section__content{gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline);grid-template-columns:1fr;display:grid}@media (width>=64rem){.sbb-navigation-section__content{opacity:0;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content{opacity:1;translate:0}}@media (width>=90rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0}}@keyframes close{0%{translate:0}to{translate:var(--sbb-navigation-section-translate) 0}}
+    `}constructor(){super(...arguments),this.listChildLocalNames=[`sbb-navigation-button`,`sbb-navigation-link`],this.#e=I(this,i,``),I(this,a)}}})();var J=`:host{--sbb-navigation-marker-margin-block:calc(1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2);display:block}:host([size=s]){--sbb-navigation-action-gap:var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width:.5rem;--sbb-navigation-marker-typo-line-height:var(--sbb-typo-line-height-text);--sbb-navigation-margin-inline-start:var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x:calc(var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x));--sbb-navigation-marker-padding-inline-start:calc(var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x));--sbb-navigation-marker-font-size:var(--sbb-text-font-size-xxs);--sbb-navigation-marker-letter-spacing:var(--sbb-letter-spacing-text);--sbb-navigation-marker-line-height:var(--sbb-typo-line-height-text)}:host([size=l]){--sbb-navigation-marker-font-size:var(--sbb-heading-font-size-4);--sbb-navigation-marker-letter-spacing:var(--sbb-letter-spacing-heading);--sbb-navigation-marker-line-height:var(--sbb-typo-line-height-heading)}.sbb-navigation-marker{align-items:flex-start;gap:var(--sbb-navigation-action-gap);font-size:var(--sbb-navigation-marker-font-size);line-height:var(--sbb-navigation-marker-line-height);letter-spacing:var(--sbb-navigation-marker-letter-spacing);flex-direction:column;padding-inline-start:var(--sbb-navigation-marker-padding-inline-start);font-weight:700;display:flex;position:relative}.sbb-navigation-marker:before{content:"";opacity:0;width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-5);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));transition-property:opacity,inset-block-start;transition-timing-function:ease;position:absolute;inset-block-start:var(--sbb-navigation-marker-position-y);inset-inline-start:var(--sbb-navigation-marker-position-x)}:host(:is(:state(has-active-action),[state--has-active-action])) .sbb-navigation-marker:before{opacity:1}@media (forced-colors:active){.sbb-navigation-marker:before{border-color:canvastext}}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}
+`;let Y=(()=>{let e=g(c),t,n=[],i=[];return class extends e{static{let r=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;t=[L({reflect:!0})],F(this,null,t,{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:r},n,i),r&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:r})}static{this.elementName=`sbb-navigation-marker`}static{this.styles=[r(J)]}#e;get size(){return this.#e}set size(e){this.#e=e}constructor(){super(),this.listChildLocalNames=[`sbb-navigation-button`,`sbb-navigation-link`],this.#e=I(this,n,`l`),this._currentActiveAction=I(this,i),this.addController(new z(this,{skipInitial:!0,callback:()=>this._setMarkerPosition()}))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&this._updateMarkerActions(),this.toggleState(`has-active-action`,!!this._currentActiveAction)}_updateMarkerActions(){this._currentActiveAction=this.listChildren.find(e=>e.matches(`:is(:state(action-active),[state--action-active])`)),this._setMarkerPosition()}connectedCallback(){super.connectedCallback(),this._checkActiveAction()}_checkActiveAction(){let e=this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`);e&&this.select(e)}select(e){e&&(this.reset(),N(e).add(`action-active`),this._currentActiveAction=e,setTimeout(()=>this._setMarkerPosition()))}firstUpdated(e){super.firstUpdated(e),setTimeout(()=>this._setMarkerPosition())}reset(){this._currentActiveAction&&=(N(this._currentActiveAction).delete(`action-active`),this._currentActiveAction.connectedSection?.close(),void 0)}_setMarkerPosition(){if(!this._currentActiveAction)return;let e=this.listChildren.indexOf(this._currentActiveAction),t=this.shadowRoot.querySelector(`li:nth-child(${e+1})`)?.offsetTop;t!=null&&this.style?.setProperty(`--sbb-navigation-marker-position-y`,`${t}px`)}render(){return this.renderList()}}})();var X=`:host{--sbb-navigation-section-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);display:var(--sbb-navigation-section-display,none);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index,var(--sbb-overlay-default-z-index));inset-block-start:0;inset-inline-start:0}@media (width>=64rem){:host{--sbb-navigation-section-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-navigation-section-width:calc(100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive));translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-section-pointer-events:all}:host(:is(:state(state-opening),[state--state-opening])){--sbb-navigation-section-position:absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-pointer-events:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-display:block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted(:is(:state(sbb-button),[state--sbb-button])){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{width:100%;height:100%;color:var(--sbb-navigation-color,var(--sbb-color-1-negative));background-color:#0000;border:none;margin:0;padding:0;display:none;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section{animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section{animation-name:close}@media (forced-colors:active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper{--sbb-scrollbar-color:transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start);display:flex;position:relative}@media (width>=64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media (width>=90rem){.sbb-navigation-section__header{grid-column:1/4}}.sbb-navigation-section__back{translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0;position:absolute}@media (width>=64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{font-weight:700;font-size:var(--sbb-navigation-section-font-size);letter-spacing:var(--sbb-letter-spacing-heading);line-height:var(--sbb-typo-line-height-heading)}.sbb-navigation-section__content{gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline);grid-template-columns:1fr;display:grid}@media (width>=64rem){.sbb-navigation-section__content{opacity:0;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content{opacity:1;translate:0}}@media (width>=90rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0}}@keyframes close{0%{translate:0}to{translate:var(--sbb-navigation-section-translate) 0}}
 `;let Z=(()=>{let i=b(_),o,s=[],c=[],l,d=[],p=[],g,v=[],y=[],S,T=[],O=[];return class extends i{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;o=[x(),L({attribute:`title-content`,reflect:!0,converter:D})],l=[w(),L()],g=[x(),L({attribute:`accessibility-label`})],S=[x(),L({attribute:`accessibility-back-label`})],F(this,null,o,{kind:`accessor`,name:`titleContent`,static:!1,private:!1,access:{has:e=>`titleContent`in e,get:e=>e.titleContent,set:(e,t)=>{e.titleContent=t}},metadata:e},s,c),F(this,null,l,{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:e},d,p),F(this,null,g,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:e},v,y),F(this,null,S,{kind:`accessor`,name:`accessibilityBackLabel`,static:!1,private:!1,access:{has:e=>`accessibilityBackLabel`in e,get:e=>e.accessibilityBackLabel,set:(e,t)=>{e.accessibilityBackLabel=t}},metadata:e},T,O),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation-section`}static{this.elementDependencies=[B]}static{this.styles=[j,r(X)]}#e;get titleContent(){return this.#e}set titleContent(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get accessibilityLabel(){return this.#n}set accessibilityLabel(e){this.#n=e}#r;get accessibilityBackLabel(){return this.#r}set accessibilityBackLabel(e){this.#r=e}set state(e){super.state=e,this.internals.ariaHidden=this.state===`opened`?null:`true`}get state(){return super.state}constructor(){super(),this.#e=I(this,s,``),this.#t=(I(this,c),I(this,d,null)),this.#n=(I(this,p),I(this,v,``)),this.#r=(I(this,y),I(this,T,``)),this._firstLevelNavigation=(I(this,O),null),this._triggerElement=null,this._language=new f(this),this._focusTrapController=new u(this),this._lastKeydownEvent=null,this._mediaMatcherController=new m(this,{[h]:e=>{this.state!==`closed`&&this._setNavigationInert(e)}}),this._handleNavigationSectionClose=e=>{e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.nodeName===`A`||!e.hasAttribute(`disabled`)&&(e.hasAttribute(`sbb-navigation-close`)||e.hasAttribute(`sbb-navigation-section-close`))))&&this.close()},this.addEventListener?.(`keydown`,e=>{this._lastKeydownEvent=e}),this.addEventListener?.(`focusout`,e=>{if(e.relatedTarget instanceof HTMLElement&&!this.contains(e.relatedTarget)&&A.mostRecentModality===`keyboard`&&this._lastKeydownEvent?.key===`Tab`&&this._triggerElement){let e=this.closest(`sbb-navigation`),t=Array.from(e?.querySelectorAll(a)??[]).filter(e=>!this.contains(e));this._lastKeydownEvent.shiftKey||!t.length?this._triggerElement?.focus():(t[t.indexOf(this._triggerElement)+1]??e.closeButton)?.focus()}})}open(){this.state===`closed`&&this.hasUpdated&&this.dispatchBeforeOpenEvent()&&(this._isNavigationButton(this._triggerElement)&&this._triggerElement?.marker?.select(this._triggerElement),this._closePreviousNavigationSection(),this.state=`opening`,this.dispatchEvent(new Event(`ɵnavigationsectionopening`)),this.startUpdate(),this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening())}_isZeroAnimationDuration(){return E(this,`--sbb-navigation-section-animation-duration`)}_handleOpening(){this.state=`opened`,this.inert=!1,this._attachWindowEvents(),this._setNavigationInert(),this._focusTrapController.focusInitialElement(),this._checkActiveAction(),this.completeUpdate(),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.shadowRoot?.querySelector(`.sbb-navigation-section__container`)?.scrollTo(0,0),this._windowEventsController?.abort(),this._resetLists(),this._setNavigationInert(),this._isBelowLarge()&&this._triggerElement&&this._triggerElement.focus(),this.completeUpdate(),this.dispatchCloseEvent()}_closePreviousNavigationSection(){this._firstLevelNavigation?.activeNavigationSection?.close()}close(){this.state===`opened`&&this.dispatchBeforeCloseEvent()&&(this.dispatchEvent(new Event(`ɵnavigationsectionclosing`)),this.state=`closing`,this.startUpdate(),this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing())}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),k(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(M(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._isNavigationButton(this._triggerElement)&&(this._triggerElement.connectedSection=this),this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this._firstLevelNavigation=this._triggerElement?.closest?.(`sbb-navigation`)))}_isNavigationButton(e){return e?.localName===`sbb-navigation-button`}_setNavigationInert(e=this._isBelowLarge()){let t=this._firstLevelNavigation?.navigationContent;t&&(t.inert=e&&this.state!==`closed`)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_resetLists(){Array.from(this.querySelectorAll(`:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active])`)??[]).forEach(e=>N(e).delete(`action-active`))}_attachWindowEvents(){this._windowEventsController=new AbortController,window.addEventListener(`keydown`,e=>this._onKeydownEvent(e),{signal:this._windowEventsController.signal}),window.addEventListener(`click`,this._handleNavigationSectionClose,{signal:this._windowEventsController.signal})}_isBelowLarge(){return this._mediaMatcherController.matches(h)??!1}_onKeydownEvent(e){this.state===`opened`&&e.key===`Escape`&&this.close()}_checkActiveAction(){let e=this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`);N(e)?.toggle(`action-active`,!0)}connectedCallback(){super.connectedCallback(),this.slot||=`navigation-section`,this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._windowEventsController?.abort()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}render(){return e`
       <div class="sbb-navigation-section__container">
         <nav

package/notification.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,nothing as i,unsafeCSS as a}from"lit";import{property as o}from"lit/decorators.js";import{SbbSecondaryButtonElement as s}from"./button.pure.js";import{SbbElement as c,SbbLanguageController as l,SbbReadonlyMixin as u,i18nCloseNotification as d,isZeroAnimationDuration as f}from"./core.js";import{SbbDividerElement as p}from"./divider.pure.js";import{SbbIconNameMixin as m}from"./icon.pure.js";var h=`:host{--sbb-notification-border:var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-background-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),color-mix(in srgb, var(--sbb-notification-type-color) 35%, white));--sbb-notification-icon-color:var(--sbb-notification-type-color);--sbb-notification-border-radius-start:calc(var(--sbb-notification-base-border-radius) / 2);--sbb-notification-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-notification-icon-authoritative-font-size:1em;--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text);--_sbb-notification-inset-inline-start:calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width));--sbb-focus-outline-color:var(--sbb-focus-outline-color-default);font-size:var(--sbb-notification-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:block}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])),:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration:0s}:host(:where(:is(:state(slotted-title),[state--slotted-title]),:is(:state(slotted-title),[state--slotted-title])[size=m])){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-5);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-heading)}:host(:is(:state(slotted-title),[state--slotted-title])[size=s]){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-6);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text)}:host([size=s]){--sbb-notification-font-size:var(--sbb-text-font-size-xs);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline:var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (width>=37.5rem){:host([size=s]){--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xxs)}}:host([size=m]){--sbb-notification-font-size:var(--sbb-text-font-size-s);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xs);--sbb-notification-content-padding-inline:var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs)}@media (width>=37.5rem){:host([size=m]){--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xs)}}:host(:is(:not([type]),[type=info])){--sbb-notification-type-color:var(--sbb-color-smoke);--sbb-notification-icon-color:var(--sbb-notification-color);--sbb-notification-divider-opacity-light:20%;--sbb-notification-divider-opacity-dark:20%}:host([type=note]){--sbb-notification-type-color:var(--sbb-color-sky);--sbb-notification-divider-opacity-light:20%;--sbb-notification-divider-opacity-dark:20%}:host([type=success]){--sbb-notification-type-color:var(--sbb-color-success);--sbb-notification-divider-opacity-light:15%;--sbb-notification-divider-opacity-dark:30%}:host([type=warn]){--sbb-notification-type-color:var(--sbb-color-warning);--sbb-notification-icon-color:var(--sbb-notification-color);--sbb-notification-divider-opacity-light:25%;--sbb-notification-divider-opacity-dark:40%}:host([type=error]){--sbb-notification-type-color:var(--sbb-color-error);--sbb-notification-divider-opacity-light:10%;--sbb-notification-divider-opacity-dark:25%}.sbb-notification__wrapper{width:calc(100% - var(--_sbb-notification-inset-inline-start));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius-start) var(--sbb-notification-base-border-radius) var(--sbb-notification-base-border-radius) var(--sbb-notification-border-radius-start);opacity:0;max-height:0;margin:0;position:relative;inset-inline-start:var(--_sbb-notification-inset-inline-start)}.sbb-notification__wrapper:before{content:"";inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-border-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-border-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-border-radius);position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin,0)}:host(:is(:state(state-opening),[state--state-opening])) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s, var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x))}.sbb-notification{padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius-start) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) var(--sbb-notification-border-radius-start);background-color:var(--sbb-notification-background-color);grid-template-columns:1fr auto;align-items:center;display:grid;position:relative;overflow:hidden}@media (width>=37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto auto}}.sbb-notification__icon,::slotted(sbb-icon){color:var(--sbb-notification-icon-color);align-self:var(--sbb-notification-icon-align-self);--sbb-icon-svg-width:var(--sbb-notification-icon-size)}@media (width>=37.5rem){.sbb-notification__icon,::slotted(sbb-icon){margin-block-start:max(0rem, (var(--_sbb-notification-icon-authoritative-font-size) * var(--_sbb-notification-icon-authoritative-line-height) - var(--sbb-size-icon-ui-small)) / 2)}}.sbb-notification__content{color-scheme:light only;order:3;grid-area:2/1/3/3;align-self:flex-start;margin-block-start:var(--sbb-notification-content-margin-block-start)}@media (width>=37.5rem){.sbb-notification__content{order:initial;grid-area:initial;padding-inline:var(--sbb-notification-content-padding-inline);margin-block-start:0}}.sbb-notification__text{margin:0;padding:0;display:inline}.sbb-notification__divider{--sbb-divider-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light), var(--sbb-notification-background-color)),color-mix(in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-dark), var(--sbb-notification-background-color)));display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x)}@media (width>=37.5rem){.sbb-notification__divider{height:calc(100% - var(--sbb-spacing-fixed-1x) * 2);margin-inline-end:var(--sbb-notification-close-wrapper-gap);display:block}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin,0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin,0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}::slotted(sbb-title){font-size:var(--_sbb-notification-icon-authoritative-font-size);line-height:var(--_sbb-notification-icon-authoritative-line-height);margin:0}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,nothing as i,unsafeCSS as a}from"lit";import{property as o}from"lit/decorators.js";import{SbbSecondaryButtonElement as s}from"./button.pure.js";import{SbbElement as c,SbbLanguageController as l,SbbReadonlyMixin as u,i18nCloseNotification as d,isZeroAnimationDuration as f}from"./core.js";import{SbbDividerElement as p}from"./divider.pure.js";import{SbbIconNameMixin as m}from"./icon.pure.js";var h=`:host{--sbb-notification-border:var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-background-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),color-mix(in srgb, var(--sbb-notification-type-color) 35%, white));--sbb-notification-icon-color:var(--sbb-notification-type-color);--sbb-notification-border-radius-start:calc(var(--sbb-notification-base-border-radius) / 2);--sbb-notification-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-notification-icon-authoritative-font-size:1em;--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text);--_sbb-notification-inset-inline-start:calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width));--sbb-focus-outline-color:var(--sbb-focus-outline-color-default);font-size:var(--sbb-notification-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:block}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])),:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration:0s}:host(:where(:is(:state(slotted-title),[state--slotted-title]),:is(:state(slotted-title),[state--slotted-title])[size=m])){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-5);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-heading)}:host(:is(:state(slotted-title),[state--slotted-title])[size=s]){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-6);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text)}:host([size=s]){--sbb-notification-font-size:var(--sbb-text-font-size-xs);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline:var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (width>=37.5rem){:host([size=s]){--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xxs)}}:host([size=m]){--sbb-notification-font-size:var(--sbb-text-font-size-s);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xs);--sbb-notification-content-padding-inline:var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs)}@media (width>=37.5rem){:host([size=m]){--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xs)}}:host(:is(:not([type]),[type=info])){--sbb-notification-type-color:var(--sbb-color-smoke);--sbb-notification-icon-color:var(--sbb-notification-color);--sbb-notification-divider-opacity-light:20%;--sbb-notification-divider-opacity-dark:20%}:host([type=note]){--sbb-notification-type-color:var(--sbb-color-sky);--sbb-notification-divider-opacity-light:20%;--sbb-notification-divider-opacity-dark:20%}:host([type=success]){--sbb-notification-type-color:var(--sbb-color-success);--sbb-notification-divider-opacity-light:15%;--sbb-notification-divider-opacity-dark:30%}:host([type=warn]){--sbb-notification-type-color:var(--sbb-color-warning);--sbb-notification-icon-color:var(--sbb-notification-color);--sbb-notification-divider-opacity-light:25%;--sbb-notification-divider-opacity-dark:40%}:host([type=error]){--sbb-notification-type-color:var(--sbb-color-error);--sbb-notification-divider-opacity-light:10%;--sbb-notification-divider-opacity-dark:25%}.sbb-notification__wrapper{width:calc(100% - var(--_sbb-notification-inset-inline-start));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius-start) var(--sbb-notification-base-border-radius) var(--sbb-notification-base-border-radius) var(--sbb-notification-border-radius-start);opacity:0;max-height:0;margin:0;position:relative;inset-inline-start:var(--_sbb-notification-inset-inline-start)}.sbb-notification__wrapper:before{content:"";inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-border-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-border-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-border-radius);position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin,0)}:host(:is(:state(state-opening),[state--state-opening])) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s, var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x))}.sbb-notification{padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius-start) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) var(--sbb-notification-border-radius-start);background-color:var(--sbb-notification-background-color);grid-template-columns:1fr auto;align-items:center;display:grid;position:relative;overflow:hidden}@media (width>=37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto auto}}.sbb-notification__icon,::slotted(sbb-icon){color:var(--sbb-notification-icon-color);align-self:var(--sbb-notification-icon-align-self);--sbb-icon-svg-width:var(--sbb-notification-icon-size)}@media (width>=37.5rem){.sbb-notification__icon,::slotted(sbb-icon){margin-block-start:max(0rem, (var(--_sbb-notification-icon-authoritative-font-size) * var(--_sbb-notification-icon-authoritative-line-height) - var(--sbb-size-icon-ui-small)) / 2)}}.sbb-notification__content{color-scheme:light only;order:3;grid-area:2/1/3/3;align-self:flex-start;margin-block-start:var(--sbb-notification-content-margin-block-start)}@media (width>=37.5rem){.sbb-notification__content{order:initial;grid-area:initial;padding-inline:var(--sbb-notification-content-padding-inline);margin-block-start:0}}.sbb-notification__text{margin:0;padding:0;display:inline}.sbb-notification__divider{--sbb-divider-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light), var(--sbb-notification-background-color)),color-mix(in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-dark), var(--sbb-notification-background-color)));display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x)}@media (width>=37.5rem){.sbb-notification__divider{height:calc(100% - var(--sbb-spacing-fixed-1x) * 2);margin-inline-end:var(--sbb-notification-close-wrapper-gap);display:block}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin,0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin,0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}::slotted(sbb-title){font-size:var(--_sbb-notification-icon-authoritative-font-size);line-height:var(--_sbb-notification-icon-authoritative-line-height);margin:0}
 `;const g=new Map([[`info`,`circle-information-small`],[`note`,`circle-information-small`],[`success`,`circle-tick-small`],[`warn`,`circle-exclamation-point-small`],[`error`,`circle-cross-small`]]);let _=(()=>{let _=m(u(c)),v,y=[],b=[],x,S=[],C=[],w,T=[],E=[];return class extends _{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(_[Symbol.metadata]??null):void 0;v=[o({reflect:!0})],x=[o({reflect:!0})],w=[o({reflect:!0})],e(this,null,v,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},y,b),e(this,null,x,{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},S,C),e(this,null,w,{kind:`accessor`,name:`animation`,static:!1,private:!1,access:{has:e=>`animation`in e,get:e=>e.animation,set:(e,t)=>{e.animation=t}},metadata:t},T,E),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-notification`}static{this.elementDependencies=[s,p]}static{this.styles=[a(h)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get type(){return this.#e}set type(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get animation(){return this.#n}set animation(e){this.#n=e}set _state(e){this._stateInternal&&this.internals.states.delete(`state-${this._stateInternal}`),this._stateInternal=e,this._stateInternal&&this.internals.states.add(`state-${this._stateInternal}`)}get _state(){return this._stateInternal}constructor(){super(),this.#e=t(this,y,`info`),this.#t=(t(this,b),t(this,S,null)),this.#n=(t(this,C),t(this,T,`all`)),this._stateInternal=t(this,E),this._resizeObserverTimeout=null,this._language=new l(this),this._notificationResizeObserver=new n(this,{target:null,skipInitial:!0,callback:()=>this._onNotificationResize()}),this._state=`closed`}_open(){this._state===`closed`&&(this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`)),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._state===`opened`&&this._dispatchBeforeCloseEvent()&&(this._state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_dispatchBeforeCloseEvent(){return this.dispatchEvent(new Event(`beforeclose`,{cancelable:!0}))}firstUpdated(e){super.firstUpdated(e),this._notificationElement=this.shadowRoot?.querySelector(`.sbb-notification__wrapper`),this.updateComplete.then(()=>{this._setNotificationHeight(),this._open()})}_isZeroAnimationDuration(){return f(this,`--sbb-notification-animation-duration`)}_setNotificationHeight(){if(!this._notificationElement?.scrollHeight)return;let e=`${this._notificationElement.scrollHeight}px`;this.style.setProperty(`--sbb-notification-height`,e)}_onNotificationResize(){this._state===`opened`&&(this._resizeObserverTimeout&&clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`resize-disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`resize-disable-animation`),150),setTimeout(()=>this._setNotificationHeight()))}_onNotificationAnimationEnd(e){this._state===`opening`&&e.animationName===`open`&&this._handleOpening(),this._state===`closing`&&e.animationName===`close-height`&&this._handleClosing()}_handleOpening(){this._state=`opened`,this._notificationResizeObserver.observe(this._notificationElement),this.dispatchEvent(new Event(`open`))}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`)),this._notificationResizeObserver.unobserve(this._notificationElement),setTimeout(()=>this.remove())}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}renderIconName(){return super.renderIconName()||g.get(this.type)}render(){return r`
       <div class="sbb-notification__wrapper" @animationend=${this._onNotificationAnimationEnd}>
         <div class="sbb-notification">

package/off-brand-theme.css

@@ -2,24 +2,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Roman.woff2") format("woff2");
-  font-display: fallback;
-  font-weight: 400;
-}
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Bold.woff2") format("woff2");
-  font-display: swap;
-  font-weight: 700;
-}
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Light.woff2") format("woff2");
-  font-display: swap;
-  font-weight: 300;
-}
 html {
   text-size-adjust: 100%;
   tab-size: 4;
@@ -124,7 +106,7 @@ summary {
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
   line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   color-scheme: light dark;
   color: var(--sbb-font-color-default);
@@ -1495,7 +1477,7 @@ summary {
   --sbb-navigation-action-color: var(--sbb-color-4-negative);
   --sbb-navigation-action-icon-display: none;
   --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
-  --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  --sbb-navigation-action-letter-spacing: var(--sbb-letter-spacing-heading);
   --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
   --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
   --sbb-navigation-grid-column: 1 / -1;
@@ -1527,7 +1509,7 @@ summary {
   --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
   --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
   --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
-  --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  --sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-heading);
   --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
   --sbb-navigation-section-column: 1 / -1;
   --sbb-navigation-section-position: fixed;
@@ -2250,7 +2232,7 @@ img {
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: var(--sbb-spacing-fixed-4x);
   line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   font-size: var(--sbb-text-font-size-xxs);
   font-weight: bold;
   outline: var(--sbb-border-width-1x) solid transparent;
@@ -2338,7 +2320,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   opacity: 1;
   background-color: transparent;
   font-size: var(--sbb-form-field-input-text-size) !important;
-  letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
+  letter-spacing: var(--sbb-letter-spacing-text) !important;
   font-family: var(--sbb-typo-font-family) !important;
   line-height: var(--sbb-typo-line-height-text) !important;
 }
@@ -2501,11 +2483,11 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
   align-items: baseline;
   color: var(--sbb-color-1);
   font-size: var(--sbb-text-font-size-xs);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
 }
 .sbb-header-info strong + * {
   font-size: var(--sbb-text-font-size-xxs);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   color: var(--sbb-color-granite);
   color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
 }
@@ -2590,7 +2572,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) th {
   font-size: var(--sbb-table-header-cell-font-size);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   font-weight: bold;
   background-color: var(--sbb-table-background-color);
   border-block-end: var(--sbb-table-border);
@@ -2600,7 +2582,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) td {
   font-size: var(--sbb-table-data-cell-font-size);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   background-color: var(--sbb-table-background-color);
   border-block-end: var(--sbb-table-border);
   border-inline-end: var(--sbb-table-border);
@@ -2628,7 +2610,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
     var(--sbb-color-cement)
   );
   font-size: var(--sbb-text-font-size-xs);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
@@ -2727,7 +2709,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
     var(--sbb-color-cement)
   );
   font-size: var(--sbb-text-font-size-xs);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
@@ -3007,7 +2989,7 @@ sbb-toggle:has(:focus-visible) {
   color: var(--sbb-color-granite);
   color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
   line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   font-size: var(--sbb-text-font-size-xs);
 }
 
@@ -3217,7 +3199,7 @@ sbb-toggle:has(:focus-visible) {
 
 .sbb-list:where(dl) {
   line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   font-size: var(--sbb-text-font-size-s);
   margin: 0;
   padding: 0;
@@ -3290,7 +3272,7 @@ sbb-toggle:has(:focus-visible) {
   border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
   border-radius: 50%;
   line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   font-size: var(--sbb-text-font-size-xxs);
   font-weight: bold;
 }
@@ -3528,7 +3510,7 @@ sup {
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
   line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 
@@ -3562,7 +3544,7 @@ sup {
 
 .sbb-legend {
   line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  letter-spacing: var(--sbb-letter-spacing-text);
   font-size: var(--sbb-text-font-size-xs);
   padding: 0;
   color: var(--sbb-color-granite);

package/option.pure.js

@@ -1,4 +1,4 @@
-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,state as o}from"lit/decorators.js";import{SbbDisabledMixin as s,SbbElement as c,SbbNegativeMixin as l,SbbPropertyWatcherController as u,forceType as d,isAndroid as f,isBlink as p,isSafari as m,screenReaderOnlyStyles as h,setOrRemoveAttribute as g}from"./core.js";import{MutationController as _}from"@lit-labs/observers/mutation-controller.js";import{SbbIconNameMixin as v}from"./icon.pure.js";import{SbbVisualCheckboxElement as y}from"./visual-checkbox.pure.js";var b=`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display:none}:host(:is(:state(size-s),[state--size-s])){--sbb-optgroup-label-padding-end:var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-optgroup-label-padding-end:var(--sbb-spacing-fixed-2x)}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color:var(--sbb-color-5);--sbb-optgroup-divider-color:var(--sbb-divider-color-negative)}:host:before{content:"";display:var(--sbb-optgroup-divider-display,block);margin-block:var(--sbb-options-panel-divider-margin-block);border-block-start:var(--sbb-divider-border-width) solid var(--sbb-optgroup-divider-color)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block-end:var(--sbb-optgroup-label-padding-end);display:flex}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}
+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,state as o}from"lit/decorators.js";import{SbbDisabledMixin as s,SbbElement as c,SbbNegativeMixin as l,SbbPropertyWatcherController as u,forceType as d,isAndroid as f,isBlink as p,isSafari as m,screenReaderOnlyStyles as h,setOrRemoveAttribute as g}from"./core.js";import{MutationController as _}from"@lit-labs/observers/mutation-controller.js";import{SbbIconNameMixin as v}from"./icon.pure.js";import{SbbVisualCheckboxElement as y}from"./visual-checkbox.pure.js";var b=`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display:none}:host(:is(:state(size-s),[state--size-s])){--sbb-optgroup-label-padding-end:var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-optgroup-label-padding-end:var(--sbb-spacing-fixed-2x)}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color:var(--sbb-color-5);--sbb-optgroup-divider-color:var(--sbb-divider-color-negative)}:host:before{content:"";display:var(--sbb-optgroup-divider-display,block);margin-block:var(--sbb-options-panel-divider-margin-block);border-block-start:var(--sbb-divider-border-width) solid var(--sbb-optgroup-divider-color)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-letter-spacing-text);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block-end:var(--sbb-optgroup-label-padding-end);display:flex}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}
 `;const x=m;let S=(()=>{let l=s(c),f,p=[],m=[],h,g=[],_=[];return class extends l{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;f=[d(),a()],h=[o()],e(this,null,f,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},p,m),e(this,null,h,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.role=x?null:`group`}static{this.styles=[i(b)]}#e;get label(){return this.#e}set label(e){this.#e=e}#t;get _inertAriaGroups(){return this.#t}set _inertAriaGroups(e){this.#t=e}constructor(){super(),this.#e=t(this,p,``),this.#t=(t(this,m),t(this,g,!1)),this._previousSize=(t(this,_),null),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),x&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=x):this._inertAriaGroups=x)}connectedCallback(){super.connectedCallback(),this._updateAriaLabel()}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&(this._inertAriaGroups||(this.internals.ariaDisabled=this.disabled?`true`:null)),e.has(`label`)&&this._updateAriaLabel()}_handleSlotchange(){this._updateAriaLabel(),this._highlightOptions(),this.dispatchEvent(new Event(`ɵoptgroupslotchange`))}_updateAriaLabel(){this.internals.ariaLabel=this._inertAriaGroups?null:this.label}_highlightOptions(){let e=this.getAutocompleteParent();if(!e)return;let t=e.triggerElement?.value;t&&this.options.forEach(e=>e.highlight(t))}render(){return n`
       ${this.label?n`
               <div class="sbb-optgroup__label" aria-hidden="true">
@@ -7,7 +7,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
               </div>
             `:r}
       <slot @slotchange=${this._handleSlotchange}></slot>
-    `}}})();var C=class extends S{static{this.elementName=`sbb-optgroup`}get options(){return Array.from(this.querySelectorAll?.(`sbb-option`)??[])}constructor(){super(),this.addController(new u(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this._handleNegativeChange(e)})),this.addController(new u(this,()=>this.closest(`sbb-select`),{multiple:e=>this.toggleState(`multiple`,e.multiple),negative:e=>this._handleNegativeChange(e)}))}_handleNegativeChange(e){this.toggleState(`negative`,e.negative),this.requestUpdate()}getAutocompleteParent(){return this.closest?.(`sbb-autocomplete`)||null}connectedCallback(){super.connectedCallback();let e=this.closest?.(`sbb-autocomplete`)?`autocomplete`:this.closest?.(`sbb-select`)?`select`:null;this.internals.states.delete(`variant-autocomplete`),this.internals.states.delete(`variant-select`),e&&this.internals.states.add(`variant-${e}`)}},w=`:host{column-gap:var(--sbb-option-hint-column-gap);padding-inline:var(--sbb-option-hint-padding-inline);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);padding-block-end:var(--sbb-option-hint-padding-block-end);display:flex}:host([negative]){--sbb-option-hint-color:var(--sbb-color-5)}:host(:is(:state(size-s),[state--size-s])){--sbb-option-hint-padding-block-end:var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-option-hint-padding-block-end:var(--sbb-spacing-fixed-2x)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}
+    `}}})();var C=class extends S{static{this.elementName=`sbb-optgroup`}get options(){return Array.from(this.querySelectorAll?.(`sbb-option`)??[])}constructor(){super(),this.addController(new u(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this._handleNegativeChange(e)})),this.addController(new u(this,()=>this.closest(`sbb-select`),{multiple:e=>this.toggleState(`multiple`,e.multiple),negative:e=>this._handleNegativeChange(e)}))}_handleNegativeChange(e){this.toggleState(`negative`,e.negative),this.requestUpdate()}getAutocompleteParent(){return this.closest?.(`sbb-autocomplete`)||null}connectedCallback(){super.connectedCallback();let e=this.closest?.(`sbb-autocomplete`)?`autocomplete`:this.closest?.(`sbb-select`)?`select`:null;this.internals.states.delete(`variant-autocomplete`),this.internals.states.delete(`variant-select`),e&&this.internals.states.add(`variant-${e}`)}},w=`:host{column-gap:var(--sbb-option-hint-column-gap);padding-inline:var(--sbb-option-hint-padding-inline);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-letter-spacing-text);padding-block-end:var(--sbb-option-hint-padding-block-end);display:flex}:host([negative]){--sbb-option-hint-color:var(--sbb-color-5)}:host(:is(:state(size-s),[state--size-s])){--sbb-option-hint-padding-block-end:var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-option-hint-padding-block-end:var(--sbb-spacing-fixed-2x)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}
 `,T=class extends l(c){static{this.elementName=`sbb-option-hint`}static{this.styles=[i(w)]}constructor(){super(),this._previousSize=null,this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}render(){return n`
       <div class="sbb-optgroup__icon-space"></div>
       <span class="sbb-option-hint">
@@ -31,7 +31,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
         </span>
         ${this.renderTick()}
       </div>
-    `}}})();var A=`:host{--sbb-focus-outline-offset:var(--sbb-option-focus-outline-offset);background-color:var(--sbb-option-background-color);font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color:var(--sbb-color-3-negative);--sbb-option-icon-color:var(--sbb-color-5);--sbb-option-background-color-hover:var(--sbb-color-midnight);--sbb-option-background-color-active:var(--sbb-background-color-4-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)}:host(:is(:state(size-s),[state--size-s])){--sbb-option-min-height:var(--sbb-size-element-xxs);--sbb-option-focus-outline-offset:calc(-1 * var(--sbb-spacing-fixed-1x));--sbb-option-focus-outline-inset:0 var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-option-min-height:var(--sbb-size-element-s);--sbb-option-focus-outline-offset:inherit;--sbb-option-focus-outline-inset:var(--sbb-spacing-fixed-1x)}@media (any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-hover)}}:host(:active:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-active)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-option-color:GrayText}}:host(:is(:state(variant-select),[state--variant-select])){--sbb-option-column-gap:var(--sbb-spacing-fixed-2x);--sbb-option-justify-content:space-between}:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])){--sbb-option-justify-content:start}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color:var(--sbb-focus-outline-color)}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:highlight}}.sbb-option{min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color);display:flex;position:relative}.sbb-option:after{content:"";inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius);display:block;position:absolute}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option{z-index:0;position:relative}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{content:"";border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1;display:block;position:absolute;inset:.375rem}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{border-color:graytext}}.sbb-option__icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color);display:flex}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display,none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space,initial)}
+    `}}})();var A=`:host{--sbb-focus-outline-offset:var(--sbb-option-focus-outline-offset);background-color:var(--sbb-option-background-color);font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-letter-spacing-text);display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color:var(--sbb-color-3-negative);--sbb-option-icon-color:var(--sbb-color-5);--sbb-option-background-color-hover:var(--sbb-color-midnight);--sbb-option-background-color-active:var(--sbb-background-color-4-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)}:host(:is(:state(size-s),[state--size-s])){--sbb-option-min-height:var(--sbb-size-element-xxs);--sbb-option-focus-outline-offset:calc(-1 * var(--sbb-spacing-fixed-1x));--sbb-option-focus-outline-inset:0 var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-option-min-height:var(--sbb-size-element-s);--sbb-option-focus-outline-offset:inherit;--sbb-option-focus-outline-inset:var(--sbb-spacing-fixed-1x)}@media (any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-hover)}}:host(:active:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-active)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-option-color:GrayText}}:host(:is(:state(variant-select),[state--variant-select])){--sbb-option-column-gap:var(--sbb-spacing-fixed-2x);--sbb-option-justify-content:space-between}:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])){--sbb-option-justify-content:start}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color:var(--sbb-focus-outline-color)}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:highlight}}.sbb-option{min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color);display:flex;position:relative}.sbb-option:after{content:"";inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius);display:block;position:absolute}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option{z-index:0;position:relative}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{content:"";border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1;display:block;position:absolute;inset:.375rem}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{border-color:graytext}}.sbb-option__icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color);display:flex}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display,none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space,initial)}
 `,j=class extends k{static{this.elementName=`sbb-option`}static{this.elementDependencies=[y]}static{this.role=`option`}static{this.styles=[i(A)]}static{this.events={optionselectionchange:`optionselectionchange`,optionselected:`optionselected`}}set _variant(e){this._variantInternal&&this.internals.states.delete(`variant-${this._variantInternal}`),this._variantInternal=e,this._variantInternal&&this.internals.states.add(`variant-${this._variantInternal}`)}get _variant(){return this._variantInternal??null}constructor(){super(),this.addController(new u(this,()=>this.closest(`sbb-optgroup`),{disabled:e=>this.disabledFromGroup=e.disabled,label:e=>this.groupLabel=e.label})),this.addController(new u(this,()=>this.closest(`sbb-select`),{multiple:e=>{this.toggleState(`multiple`,e.multiple),this.requestUpdate()},negative:e=>this._handleNegativeChange(e)}))}_isMultiple(){return!this.hydrationRequired&&this.matches?.(`:is(:state(multiple),[state--multiple])`)}_handleNegativeChange(e){this.toggleState(`negative`,e.negative),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.hydrationRequired?this.hydrationComplete.then(()=>this._init()):this._init()}_init(){this._setVariantByContext(),this.handleHighlightState()}selectByClick(e){if(this.disabled||this.disabledFromGroup){e.stopPropagation();return}this._isMultiple()?(e.stopPropagation(),this.selectViaUserInteraction(!this.selected)):this.selectViaUserInteraction(!0)}selectViaUserInteraction(e){super.selectViaUserInteraction(e),this.dispatchEvent(new Event(`optionselectionchange`,{bubbles:!0,composed:!0}))}_setVariantByContext(){this.closest?.(`sbb-autocomplete`)?this._variant=`autocomplete`:this.closest?.(`sbb-select`)&&(this._variant=`select`)}handleHighlightState(){if(this._variant!==`autocomplete`){this.updateDisableHighlight(!0);return}super.handleHighlightState()}renderIcon(){return n`
       <!-- Icon -->
       ${this._isMultiple()?r:n` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.7.0-dev.1788783153",
+  "version": "5.8.0-dev.1788796432",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/f1a4ab7ffb7bbdbba1866c16de068fd010269710"
+    "https://github.com/sbb-design-systems/lyne-components/commit/2576e2f3ba9adc19612f1a388b065f87847bcf09"
   ],
   "type": "module",
   "exports": {

package/paginator.pure.js

@@ -20,7 +20,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
       `}render(){return n`
         ${this.renderPaginator()}
         <span class="sbb-screen-reader-only" id="status" role="status"></span>
-      `}}})();var j=`:host{gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content,start);min-height:var(--sbb-paginator-height);display:flex}:host([pager-position=end]){--sbb-paginator-compact-justify-content:end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);justify-content:center;align-items:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-paginator-color);display:flex}.sbb-compact-paginator__divider{--sbb-divider-color:currentcolor;height:1rem}
+      `}}})();var j=`:host{gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content,start);min-height:var(--sbb-paginator-height);display:flex}:host([pager-position=end]){--sbb-paginator-compact-justify-content:end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);justify-content:center;align-items:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-paginator-color);display:flex}.sbb-compact-paginator__divider{--sbb-divider-color:currentcolor;height:1rem}
 `,M=class extends A(l){static{this.elementName=`sbb-compact-paginator`}static{this.elementDependencies=[C]}static{this.styles=[i(j)]}static{this.events={page:`page`}}_renderPageNumbers(){return n`
       <span class="sbb-paginator__pages" aria-hidden="true"
         >${this.pageIndex+1}<sbb-divider
@@ -35,7 +35,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
       </span>
     `}renderPaginator(){return n`
       ${this.pagerPosition===`start`?n`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}`:n`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
-    `}},N=`:host{--sbb-paginator-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));line-height:var(--sbb-typo-line-height-text);display:block}:host([negative]){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content:end;--sbb-paginator-wrapping-group-wrap:wrap;--sbb-paginator-wrap:wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content,start);display:flex}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap,wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap,wrap-reverse)}.sbb-paginator__page-size-options{align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-color);font-size:var(--sbb-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex}.sbb-paginator__page-size-options sbb-select{color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{justify-content:center;align-items:center;gap:var(--sbb-spacing-fixed-1x);user-select:none;-webkit-tap-highlight-color:transparent;display:flex}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{font-size:var(--sbb-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-paginator-color);position:relative}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs);justify-content:center;align-items:center;display:flex}.sbb-paginator__page--number-item{font-family:var(--sbb-typo-font-family);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-paginator-font-size);line-height:var(--sbb-typo-line-height-text);cursor:var(--sbb-paginator-page-cursor);color:var(--sbb-paginator-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);font-weight:400;position:relative;outline:none!important}.sbb-paginator__page--number-item:before{content:"";background-color:var(--sbb-paginator-page-background-color,transparent);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style,none) var(--sbb-paginator-page-border-color,none);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset,0);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing);position:absolute}.sbb-paginator__page--number-item: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(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-color:var(--sbb-color-3);--sbb-paginator-page-border-width:var(--sbb-border-width-2x);--sbb-paginator-page-border-style:solid;--sbb-paginator-page-border-color:var(--sbb-border-color-2);font-weight:700}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-color:var(--sbb-color-3-negative);--sbb-paginator-page-border-color:var(--sbb-border-color-2-negative)}@media (forced-colors:active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color:Highlight!important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-color:var(--sbb-color-5);--sbb-paginator-page-border-style:dashed;--sbb-paginator-page-border-color:var(--sbb-border-color-5);--sbb-paginator-page-background-color:var(--sbb-background-color-3);--sbb-paginator-page-cursor:var(--sbb-cursor-default)}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width:var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-color:var(--sbb-color-5);--sbb-paginator-page-background-color:var(--sbb-background-color-3-negative)}@media (forced-colors:active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color:GrayText;--sbb-paginator-color:GrayText;--sbb-paginator-page-background-color:Canvas}}@media (any-hover:hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color:var(--sbb-background-color-3);--sbb-paginator-page-inset:calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover:-.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color:var(--sbb-background-color-3-negative)}}@media (any-hover:hover) and (forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color:Highlight!important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-color:var(--sbb-color-3);--sbb-paginator-page-background-color:var(--sbb-background-color-4);--sbb-paginator-page-inset:0;--sbb-paginator-translate-y-content-hover:0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-color:var(--sbb-color-3-negative);--sbb-paginator-page-background-color:var(--sbb-background-color-4-negative)}@media (forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color:Highlight!important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover,0))}
+    `}},N=`:host{--sbb-paginator-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));line-height:var(--sbb-typo-line-height-text);display:block}:host([negative]){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content:end;--sbb-paginator-wrapping-group-wrap:wrap;--sbb-paginator-wrap:wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content,start);display:flex}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap,wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap,wrap-reverse)}.sbb-paginator__page-size-options{align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-color);font-size:var(--sbb-paginator-font-size);letter-spacing:var(--sbb-letter-spacing-text);display:flex}.sbb-paginator__page-size-options sbb-select{color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);letter-spacing:var(--sbb-letter-spacing-text);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{justify-content:center;align-items:center;gap:var(--sbb-spacing-fixed-1x);user-select:none;-webkit-tap-highlight-color:transparent;display:flex}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{font-size:var(--sbb-paginator-font-size);letter-spacing:var(--sbb-letter-spacing-text);color:var(--sbb-paginator-color);position:relative}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs);justify-content:center;align-items:center;display:flex}.sbb-paginator__page--number-item{font-family:var(--sbb-typo-font-family);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-paginator-font-size);line-height:var(--sbb-typo-line-height-text);cursor:var(--sbb-paginator-page-cursor);color:var(--sbb-paginator-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);font-weight:400;position:relative;outline:none!important}.sbb-paginator__page--number-item:before{content:"";background-color:var(--sbb-paginator-page-background-color,transparent);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style,none) var(--sbb-paginator-page-border-color,none);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset,0);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing);position:absolute}.sbb-paginator__page--number-item: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(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-color:var(--sbb-color-3);--sbb-paginator-page-border-width:var(--sbb-border-width-2x);--sbb-paginator-page-border-style:solid;--sbb-paginator-page-border-color:var(--sbb-border-color-2);font-weight:700}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-color:var(--sbb-color-3-negative);--sbb-paginator-page-border-color:var(--sbb-border-color-2-negative)}@media (forced-colors:active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color:Highlight!important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-color:var(--sbb-color-5);--sbb-paginator-page-border-style:dashed;--sbb-paginator-page-border-color:var(--sbb-border-color-5);--sbb-paginator-page-background-color:var(--sbb-background-color-3);--sbb-paginator-page-cursor:var(--sbb-cursor-default)}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width:var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-color:var(--sbb-color-5);--sbb-paginator-page-background-color:var(--sbb-background-color-3-negative)}@media (forced-colors:active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color:GrayText;--sbb-paginator-color:GrayText;--sbb-paginator-page-background-color:Canvas}}@media (any-hover:hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color:var(--sbb-background-color-3);--sbb-paginator-page-inset:calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover:-.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color:var(--sbb-background-color-3-negative)}}@media (any-hover:hover) and (forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color:Highlight!important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-color:var(--sbb-color-3);--sbb-paginator-page-background-color:var(--sbb-background-color-4);--sbb-paginator-page-inset:0;--sbb-paginator-translate-y-content-hover:0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-color:var(--sbb-color-3-negative);--sbb-paginator-page-background-color:var(--sbb-background-color-4-negative)}@media (forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color:Highlight!important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover,0))}
 `;let P=(()=>{let o=A(l),s,c=[],u=[],d,h=[],_=[],v,y=[],S=[];return class extends o{constructor(){super(...arguments),this.#e=t(this,c,[]),this.#t=(t(this,u),t(this,h,`start`)),this.#n=(t(this,_),t(this,y,``)),this._markForFocus=(t(this,S),!1)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[a({attribute:`page-size-options`,type:Array})],d=[a({attribute:`pager-position`,reflect:!0})],v=[p(),a({attribute:`accessibility-items-per-page-label`})],e(this,null,s,{kind:`accessor`,name:`pageSizeOptions`,static:!1,private:!1,access:{has:e=>`pageSizeOptions`in e,get:e=>e.pageSizeOptions,set:(e,t)=>{e.pageSizeOptions=t}},metadata:t},c,u),e(this,null,d,{kind:`accessor`,name:`pagerPosition`,static:!1,private:!1,access:{has:e=>`pagerPosition`in e,get:e=>e.pagerPosition,set:(e,t)=>{e.pagerPosition=t}},metadata:t},h,_),e(this,null,v,{kind:`accessor`,name:`accessibilityItemsPerPageLabel`,static:!1,private:!1,access:{has:e=>`accessibilityItemsPerPageLabel`in e,get:e=>e.accessibilityItemsPerPageLabel,set:(e,t)=>{e.accessibilityItemsPerPageLabel=t}},metadata:t},y,S),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-paginator`}static{this.elementDependencies=[T,D,E]}static{this.styles=[b,f,i(N)]}static{this.events={page:`page`}}#e;get pageSizeOptions(){return this.#e}set pageSizeOptions(e){this.#e=e}#t;get pagerPosition(){return this.#t}set pagerPosition(e){this.#t=e}#n;get accessibilityItemsPerPageLabel(){return this.#n}set accessibilityItemsPerPageLabel(e){this.#n=e}updated(e){if(super.updated(e),this._markForFocus){let e=this._getVisiblePages().find(e=>this.pageIndex===+e.getAttribute(`data-index`));e&&e.focus(),this._markForFocus=!1}}_getVisiblePages(){return Array.from(this.shadowRoot.querySelectorAll(`.sbb-paginator__page--number-item`))}_getVisiblePagesIndex(){let e=this.numberOfPages(),t=this.pageIndex;return e<=5?this._range(e):t<3?[...this._range(4),`ellipsis`,e-1]:t>=e-3?[0,`ellipsis`,...this._range(4,e-1-3)]:[0,`ellipsis`,t-1,t,t+1,`ellipsis`,e-1]}_range(e,t=0){return Array.from({length:e},(e,n)=>n+t)}_onPageNumberClick(e){this.selectPage(e),this._markForFocus=x.mostRecentModality===`keyboard`}_renderItemPerPageTemplate(){return this.pageSizeOptions&&this.pageSizeOptions.length>0?n`
           <div class="sbb-paginator__page-size-options">
             <label for="select"

package/radio-button-panel.pure.js

@@ -1,4 +1,4 @@
-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{SbbElement as o,SbbFormAssociatedRadioButtonMixin as s,SbbPanelMixin as c,SbbPropertyWatcherController as l,SbbUpdateSchedulerMixin as u,screenReaderOnlyStyles as d}from"./core.js";var f=`:host{--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-background-color);--sbb-radio-button-background-fake-border-width:calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align:calc((1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2)}:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-color-primary);--sbb-radio-button-background-fake-border-width:calc((var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2)}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:Highlight;--sbb-radio-button-border-color:Highlight}}:host(:disabled){--sbb-radio-button-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-aluminium));--sbb-radio-button-background-color:var(--sbb-background-color-3);--sbb-radio-button-border-style:dashed;--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-background-color);--sbb-radio-button-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:disabled){--sbb-radio-button-background-color:Canvas;--sbb-radio-button-inner-circle-color:GrayText;--sbb-radio-button-border-color:GrayText;--sbb-radio-button-border-style:solid}}:host(:disabled:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-background-color-2-inverted)}:host([size=xs]){--sbb-radio-button-font-size:var(--sbb-text-font-size-xs);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-xs)}:host([size=s]){--sbb-radio-button-font-size:var(--sbb-text-font-size-s);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-s)}:host([size=m]){--sbb-radio-button-font-size:var(--sbb-text-font-size-m);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-m)}.sbb-radio-button{font-size:var(--sbb-radio-button-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);cursor:var(--sbb-radio-button-cursor);user-select:none;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;display:block;position:relative}.sbb-radio-button__label-slot{min-height:calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));align-items:flex-start;display:flex;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));border-radius:50%;flex-shrink:0;margin-block-start:var(--sbb-radio-button-icon-align);transition-property:background-color,border;transition-timing-function:ease}@media (forced-colors:active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-radio-button-label-gap)}.sbb-radio-button__label-slot:after{border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);position:absolute}
+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{SbbElement as o,SbbFormAssociatedRadioButtonMixin as s,SbbPanelMixin as c,SbbPropertyWatcherController as l,SbbUpdateSchedulerMixin as u,screenReaderOnlyStyles as d}from"./core.js";var f=`:host{--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-background-color);--sbb-radio-button-background-fake-border-width:calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align:calc((1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2)}:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-color-primary);--sbb-radio-button-background-fake-border-width:calc((var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2)}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:Highlight;--sbb-radio-button-border-color:Highlight}}:host(:disabled){--sbb-radio-button-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-aluminium));--sbb-radio-button-background-color:var(--sbb-background-color-3);--sbb-radio-button-border-style:dashed;--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-background-color);--sbb-radio-button-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:disabled){--sbb-radio-button-background-color:Canvas;--sbb-radio-button-inner-circle-color:GrayText;--sbb-radio-button-border-color:GrayText;--sbb-radio-button-border-style:solid}}:host(:disabled:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-background-color-2-inverted)}:host([size=xs]){--sbb-radio-button-font-size:var(--sbb-text-font-size-xs);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-xs)}:host([size=s]){--sbb-radio-button-font-size:var(--sbb-text-font-size-s);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-s)}:host([size=m]){--sbb-radio-button-font-size:var(--sbb-text-font-size-m);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-m)}.sbb-radio-button{font-size:var(--sbb-radio-button-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);cursor:var(--sbb-radio-button-cursor);user-select:none;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;display:block;position:relative}.sbb-radio-button__label-slot{min-height:calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));align-items:flex-start;display:flex;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));border-radius:50%;flex-shrink:0;margin-block-start:var(--sbb-radio-button-icon-align);transition-property:background-color,border;transition-timing-function:ease}@media (forced-colors:active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-radio-button-label-gap)}.sbb-radio-button__label-slot:after{border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);position:absolute}
 `;const p=n=>(()=>{let r=s(n),o=[],c;return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[a({attribute:`allow-empty-selection`,type:Boolean})],e(this,null,c,{kind:`setter`,name:`allowEmptySelection`,static:!1,private:!1,access:{has:e=>`allowEmptySelection`in e,set:(e,t)=>{e.allowEmptySelection=t}},metadata:t},null,o),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[i(f)]}static{this.events={change:`change`,input:`input`}}set allowEmptySelection(e){this._allowEmptySelection=!!e}get allowEmptySelection(){return this._allowEmptySelection||(this.group?.allowEmptySelection??!1)}get group(){return this._group}constructor(){super(),this._allowEmptySelection=(t(this,o),!1),this._group=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addController(new l(this,()=>this.closest(`sbb-radio-button-group`),[`disabled`,`required`,`size`].reduce((e,t)=>Object.assign(e,{[t]:()=>this.requestUpdate(t)}),{})))}connectedCallback(){super.connectedCallback(),this._group=this.closest(`sbb-radio-button-group`)}select(){this.disabled||this.formDisabled||(this.allowEmptySelection?(this.checked=!this.checked,this.emitChangeEvents()):this.checked||(this.checked=!0,this.emitChangeEvents()))}willUpdate(e){super.willUpdate(e),e.has(`value`)&&this.dispatchEvent(new Event(`ɵradiobuttonvaluechange`,{bubbles:!0}))}isDisabledExternally(){return this.group?.disabled??!1}isRequiredExternally(){return this.group?.required??!1}async _handleClick(e){e.preventDefault(),this.select(),await this.updateComplete,this.focus()}_handleKeyDown(e){e.code===`Space`&&(e.preventDefault(),this.select())}}})();let m=(()=>{let i=c(p(u(o))),s,l=[],f=[];return class extends i{constructor(){super(...arguments),this.#e=t(this,l,null),this._hasSelectionPanelElement=(t(this,f),!1)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;s=[a()],e(this,null,s,{kind:`accessor`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:t},l,f),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-radio-button-panel`}static{this.styles=[d]}static{this.events={change:`change`,input:`input`}}#e;get value(){return this.#e}set value(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._hasSelectionPanelElement=!!this.closest?.(`sbb-selection-expansion-panel, sbb-selection-action-panel`)}willUpdate(e){super.willUpdate(e),e.has(`checked`)&&this.toggleState(`checked`,this.checked)}updateFocusableRadios(){super.updateFocusableRadios(),Array.from(this.associatedRadioButtons??[]).filter(e=>!e.disabled&&e._hasSelectionPanelElement).forEach(e=>e.tabIndex=0)}async navigateByKeyboard(e){this._hasSelectionPanelElement?e.focus():await super.navigateByKeyboard(e)}render(){return n`
       <div class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">

package/radio-button.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedRadioButtonMixin as o,SbbPropertyWatcherController as s,getOverride as c}from"./core.js";var l=`:host{--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-background-color);--sbb-radio-button-background-fake-border-width:calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align:calc((1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2)}:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-color-primary);--sbb-radio-button-background-fake-border-width:calc((var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2)}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:Highlight;--sbb-radio-button-border-color:Highlight}}:host(:disabled){--sbb-radio-button-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-aluminium));--sbb-radio-button-background-color:var(--sbb-background-color-3);--sbb-radio-button-border-style:dashed;--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-background-color);--sbb-radio-button-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:disabled){--sbb-radio-button-background-color:Canvas;--sbb-radio-button-inner-circle-color:GrayText;--sbb-radio-button-border-color:GrayText;--sbb-radio-button-border-style:solid}}:host(:disabled:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-background-color-2-inverted)}:host([size=xs]){--sbb-radio-button-font-size:var(--sbb-text-font-size-xs);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-xs)}:host([size=s]){--sbb-radio-button-font-size:var(--sbb-text-font-size-s);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-s)}:host([size=m]){--sbb-radio-button-font-size:var(--sbb-text-font-size-m);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-m)}.sbb-radio-button{font-size:var(--sbb-radio-button-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);cursor:var(--sbb-radio-button-cursor);user-select:none;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;display:block;position:relative}.sbb-radio-button__label-slot{min-height:calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));align-items:flex-start;display:flex;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));border-radius:50%;flex-shrink:0;margin-block-start:var(--sbb-radio-button-icon-align);transition-property:background-color,border;transition-timing-function:ease}@media (forced-colors:active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-radio-button-label-gap)}.sbb-radio-button__label-slot:after{border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);position:absolute}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedRadioButtonMixin as o,SbbPropertyWatcherController as s,getOverride as c}from"./core.js";var l=`:host{--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-background-color);--sbb-radio-button-background-fake-border-width:calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align:calc((1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2)}:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-color-primary);--sbb-radio-button-background-fake-border-width:calc((var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2)}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:Highlight;--sbb-radio-button-border-color:Highlight}}:host(:disabled){--sbb-radio-button-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-aluminium));--sbb-radio-button-background-color:var(--sbb-background-color-3);--sbb-radio-button-border-style:dashed;--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-background-color);--sbb-radio-button-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:disabled){--sbb-radio-button-background-color:Canvas;--sbb-radio-button-inner-circle-color:GrayText;--sbb-radio-button-border-color:GrayText;--sbb-radio-button-border-style:solid}}:host(:disabled:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-background-color-2-inverted)}:host([size=xs]){--sbb-radio-button-font-size:var(--sbb-text-font-size-xs);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-xs)}:host([size=s]){--sbb-radio-button-font-size:var(--sbb-text-font-size-s);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-s)}:host([size=m]){--sbb-radio-button-font-size:var(--sbb-text-font-size-m);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-m)}.sbb-radio-button{font-size:var(--sbb-radio-button-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);cursor:var(--sbb-radio-button-cursor);user-select:none;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;display:block;position:relative}.sbb-radio-button__label-slot{min-height:calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));align-items:flex-start;display:flex;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));border-radius:50%;flex-shrink:0;margin-block-start:var(--sbb-radio-button-icon-align);transition-property:background-color,border;transition-timing-function:ease}@media (forced-colors:active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-radio-button-label-gap)}.sbb-radio-button__label-slot:after{border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);position:absolute}
 `;const u=n=>(()=>{let a=o(n),c=[],u;return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;u=[i({attribute:`allow-empty-selection`,type:Boolean})],e(this,null,u,{kind:`setter`,name:`allowEmptySelection`,static:!1,private:!1,access:{has:e=>`allowEmptySelection`in e,set:(e,t)=>{e.allowEmptySelection=t}},metadata:t},null,c),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[r(l)]}static{this.events={change:`change`,input:`input`}}set allowEmptySelection(e){this._allowEmptySelection=!!e}get allowEmptySelection(){return this._allowEmptySelection||(this.group?.allowEmptySelection??!1)}get group(){return this._group}constructor(){super(),this._allowEmptySelection=(t(this,c),!1),this._group=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addController(new s(this,()=>this.closest(`sbb-radio-button-group`),[`disabled`,`required`,`size`].reduce((e,t)=>Object.assign(e,{[t]:()=>this.requestUpdate(t)}),{})))}connectedCallback(){super.connectedCallback(),this._group=this.closest(`sbb-radio-button-group`)}select(){this.disabled||this.formDisabled||(this.allowEmptySelection?(this.checked=!this.checked,this.emitChangeEvents()):this.checked||(this.checked=!0,this.emitChangeEvents()))}willUpdate(e){super.willUpdate(e),e.has(`value`)&&this.dispatchEvent(new Event(`ɵradiobuttonvaluechange`,{bubbles:!0}))}isDisabledExternally(){return this.group?.disabled??!1}isRequiredExternally(){return this.group?.required??!1}async _handleClick(e){e.preventDefault(),this.select(),await this.updateComplete,this.focus()}_handleKeyDown(e){e.code===`Space`&&(e.preventDefault(),this.select())}}})();var d=`:host{display:block;outline:none!important}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))){--sbb-radio-button-label-gap:0}:host(:focus-visible) .sbb-radio-button{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:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}
 `;let f=(()=>{let o=u(a),s,l=[],f=[],p,m=[],h=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[i({reflect:!0}),c((e,t)=>e.group?.size??t)],p=[i()],e(this,null,s,{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},l,f),e(this,null,p,{kind:`accessor`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:t},m,h),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-radio-button`}static{this.styles=[r(d)]}static{this.events={change:`change`,input:`input`}}#e=t(this,l,null);get size(){return this.#e}set size(e){this.#e=e}#t=(t(this,f),t(this,m,null));get value(){return this.#t}set value(e){this.#t=e}render(){return n`
       <div class="sbb-radio-button">