@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/navigation.pure.js

@@ -1,8 +1,70 @@
-import { t as e } from "./navigation-action-common-DSPULZFe.js";
-import { SbbNavigationButtonElement as t } from "./navigation/navigation-button/navigation-button.component.js";
-import { SbbNavigationLinkElement as n } from "./navigation/navigation-link/navigation-link.component.js";
-import { t as r } from "./navigation-list.component-Bkmh_wqm.js";
-import { t as i } from "./navigation-marker.component-CCXJWsN1.js";
-import { t as a } from "./navigation-section.component-DPgBlCf8.js";
-import { t as o } from "./navigation.component-CY_9Q6dT.js";
-export { e as SbbNavigationActionCommonElementMixin, t as SbbNavigationButtonElement, o as SbbNavigationElement, n as SbbNavigationLinkElement, r as SbbNavigationListElement, i as SbbNavigationMarkerElement, a as SbbNavigationSectionElement };
+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}
+`;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}}
+`;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(){N(this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`))?.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
+          @animationend=${this._onAnimationEnd}
+          class="sbb-navigation-section"
+          aria-labelledby=${this.accessibilityLabel?n:`title`}
+          aria-label=${this.accessibilityLabel?this.accessibilityLabel:n}
+        >
+          <div class="sbb-navigation-section__wrapper sbb-scrollbar-negative">
+            <div class="sbb-navigation-section__content">
+              <div class="sbb-navigation-section__header">
+                <!-- Back button -->
+                <sbb-transparent-button
+                  id="sbb-navigation-section-back-button"
+                  class="sbb-navigation-section__back"
+                  aria-label=${this.accessibilityBackLabel||C[this._language.current]}
+                  negative
+                  size="m"
+                  icon-name="chevron-small-left-small"
+                  sbb-navigation-section-close
+                ></sbb-transparent-button>
+
+                <span class="sbb-navigation-section__title" id="title">
+                  <slot name="title">${this.titleContent}</slot>
+                </span>
+              </div>
+              <slot></slot>
+            </div>
+          </div>
+        </nav>
+      </div>
+    `}}})();var Q=`:host{--sbb-navigation-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index,var(--sbb-overlay-default-z-index));display:none;position:fixed;overflow:hidden}@media (width>=64rem){:host{--sbb-navigation-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-navigation-width:calc(100% + var(--sbb-layout-base-offset-responsive))}}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-animation-easing:ease-out}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-navigation-backdrop-visibility:visible;--sbb-navigation-backdrop-pointer-events:all}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-navigation-inset:0;--sbb-navigation-translate:none}:host(:is(:state(state-closing),[state--state-closing])){--sbb-navigation-backdrop-animation-name:backdrop-close}:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])){--sbb-navigation-content-translate:-100% 0}@media (width>=64rem){:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])){--sbb-navigation-expanded-width:100dvw;--sbb-navigation-content-translate:0}}:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration:0s}.sbb-navigation__container{gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns), 1fr);pointer-events:none;translate:var(--sbb-navigation-translate);padding-inline:0;display:grid}@media (width>=64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);animation-name:var(--sbb-navigation-backdrop-animation-name);animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing);content:"";visibility:var(--sbb-navigation-backdrop-visibility,hidden);pointer-events:var(--sbb-navigation-backdrop-pointer-events,none);inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color);transition-property:visibility;position:fixed}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-navigation-color);background-color:var(--sbb-navigation-background-color);border:none;margin:0;padding:0;transition-property:width;display:none;position:relative;inset-block-start:0;inset-inline-start:var(--sbb-navigation-inline-start,0)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);content:"";width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background-color:var(--sbb-navigation-background-color);transition-property:width;position:absolute}: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{pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors:active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index,var(--sbb-overlay-default-z-index)) + 1);justify-content:flex-end;transition-property:width;display:flex;position:absolute}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);gap:var(--sbb-navigation-content-gap);height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);translate:var(--sbb-navigation-content-translate);flex-direction:column;transition-property:translate;display:flex;position:relative;overflow-y:auto}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{translate:-100%}to{translate:0}}@keyframes close{0%{translate:0}to{translate:-100%}}@keyframes backdrop-open{0%{background-color:#0000}}@keyframes backdrop-close{to{background-color:#0000}}
+`;let $=(()=>{let n=b(_),i,a=[],o=[],s,c=[],p=[],m,h=[],g=[];return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;i=[w(),L()],s=[x(),L({attribute:`accessibility-close-label`})],m=[R()],F(this,null,i,{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},a,o),F(this,null,s,{kind:`accessor`,name:`accessibilityCloseLabel`,static:!1,private:!1,access:{has:e=>`accessibilityCloseLabel`in e,get:e=>e.accessibilityCloseLabel,set:(e,t)=>{e.accessibilityCloseLabel=t}},metadata:e},c,p),F(this,null,m,{kind:`accessor`,name:`_activeNavigationSection`,static:!1,private:!1,access:{has:e=>`_activeNavigationSection`in e,get:e=>e._activeNavigationSection,set:(e,t)=>{e._activeNavigationSection=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation`}static{this.elementDependencies=[B]}static{this.role=`navigation`}static{this.styles=[O,j,r(Q)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityCloseLabel(){return this.#t}set accessibilityCloseLabel(e){this.#t=e}#n;get _activeNavigationSection(){return this.#n}set _activeNavigationSection(e){this.#n=e}get activeNavigationSection(){return this._activeNavigationSection}get closeButton(){return this.shadowRoot?.querySelector(`#sbb-navigation-close-button`)??null}get navigationContent(){return this.shadowRoot?.querySelector(`.sbb-navigation__content`)??null}constructor(){super(),this.#e=I(this,a,null),this.#t=(I(this,o),I(this,c,``)),this.#n=(I(this,p),I(this,h,null)),this._navigation=I(this,g),this._triggerElement=null,this._language=new f(this),this._inertController=new d(this),this._escapableOverlayController=new l(this),this._focusTrapController=new u(this),this._scrollHandler=new y,this._isPointerDownEventOnNavigation=!1,this._resizeObserverTimeout=null,this._navigationResizeObserver=new z(this,{skipInitial:!0,callback:()=>this._onNavigationResize()}),this._pointerDownListener=e=>{this._isPointerDownEventOnNavigation=T(this._navigation,e)||T(this.querySelector(`sbb-navigation-section:is(:state(state-opened),[state--state-opened])`)?.shadowRoot?.querySelector(`nav.sbb-navigation-section`),e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnNavigation&&!T(this._navigation,e)&&this.close()},this.addEventListener?.(`click`,e=>this._handleNavigationClose(e)),this.addEventListener?.(`pointerup`,e=>this._closeOnBackdropClick(e)),this.addEventListener?.(`pointerdown`,e=>this._pointerDownListener(e)),this.addEventListener?.(`ɵnavigationsectionopening`,e=>{this._activeNavigationSection=e.target,this.toggleState(`has-open-navigation-section`,!!this._activeNavigationSection)},{capture:!0}),this.addEventListener?.(`ɵnavigationsectionclosing`,e=>{this._activeNavigationSection===e.target&&(this._activeNavigationSection=null,this.internals.states.delete(`has-open-navigation-section`))},{capture:!0})}open(){this.state!==`closed`||!this.hasUpdated||!this.dispatchBeforeOpenEvent()||(this.showPopover?.(),this.state=`opening`,this._checkActiveActions(),this._checkActiveSection(),this.startUpdate(),this._scrollHandler.disableScroll(),this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening())}_checkActiveSection(){this.querySelector(`sbb-navigation-button.sbb-active`)?.connectedSection?.open()}_checkActiveActions(){Array.from(this.querySelectorAll(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`))?.forEach(e=>e.marker?.select(e))}close(){this.state!==`opened`||!this.dispatchBeforeCloseEvent()||(this.state=`closing`,this.startUpdate(),this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return E(this,`--sbb-navigation-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.navigationContent?.scrollTo(0,0),this._inertController.deactivate(),this._triggerElement?.focus(),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._navigationResizeObserver.unobserve(this),this._resetMarkers(),this._focusTrapController.enabled=!1,this._scrollHandler.enableScroll(),this.completeUpdate()}_handleOpening(){this.state=`opened`,this._navigationResizeObserver.observe(this),this._inertController.activate(),this._escapableOverlayController.connect(),this._focusTrapController.focusInitialElement(),this._focusTrapController.enabled=!0,this.completeUpdate(),this.dispatchOpenEvent()}_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._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal})))}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_resetMarkers(){Array.from(this.querySelectorAll(`:is(sbb-navigation-button, sbb-navigation-link):is(:state(action-active),[state--action-active]):not(.sbb-active)`))?.forEach(e=>e.marker?.reset())}_handleNavigationClose(e){e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.nodeName===`A`||e.hasAttribute(`sbb-navigation-close`)&&!e.hasAttribute(`disabled`)))&&this.close()}_onNavigationResize(){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))}connectedCallback(){super.connectedCallback(),this.popover=`manual`,this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._scrollHandler.enableScroll()}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(){let t=e`
+      <sbb-transparent-button
+        id="sbb-navigation-close-button"
+        class="sbb-navigation__close"
+        aria-label=${this.accessibilityCloseLabel||S[this._language.current]}
+        aria-controls="sbb-navigation-overlay"
+        negative
+        size="m"
+        icon-name="cross-small"
+        sbb-navigation-close
+      ></sbb-transparent-button>
+    `;return e`
+      <div class="sbb-navigation__container">
+        <div
+          id="sbb-navigation-overlay"
+          @animationend=${this._onAnimationEnd}
+          class="sbb-navigation"
+          ${V(e=>this._navigation=e)}
+        >
+          <div class="sbb-navigation__header">${t}</div>
+          <div class="sbb-navigation__wrapper">
+            <div class="sbb-navigation__content sbb-scrollbar-negative">
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+        <slot name="navigation-section"></slot>
+      </div>
+    `}}})();export{U as SbbNavigationActionCommonElementMixin,W as SbbNavigationButtonElement,$ as SbbNavigationElement,G as SbbNavigationLinkElement,q as SbbNavigationListElement,Y as SbbNavigationMarkerElement,Z as SbbNavigationSectionElement};

package/notification.js

@@ -1,6 +1 @@
-import { t as e } from "./notification.component-IRuswhzC.js";
-import "./notification.pure.js";
-//#region src/elements/notification.ts
-e.define();
-//#endregion
-export { e as SbbNotificationElement };
+import{SbbNotificationElement as e}from"./notification.pure.js";export*from"./notification.pure.js";e.define();

package/notification.pure.js

@@ -1,2 +1,28 @@
-import { t as e } from "./notification.component-IRuswhzC.js";
-export { e as SbbNotificationElement };
+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}
+`;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">
+          ${this.renderIconSlot(`sbb-notification__icon`)}
+          <span class="sbb-notification__content">
+            <slot name="title"></slot>
+            <p class="sbb-notification__text">
+              <slot @slotchange=${this._handleSlotchange}></slot>
+            </p>
+          </span>
+
+          ${this.readOnly?i:r`
+                  <sbb-divider
+                    class="sbb-notification__divider"
+                    orientation="vertical"
+                  ></sbb-divider>
+                  <sbb-secondary-button
+                    size=${this.size||i}
+                    icon-name="cross-small"
+                    @click=${()=>this.close()}
+                    aria-label=${d[this._language.current]}
+                    class="sbb-notification__close"
+                  ></sbb-secondary-button>
+                `}
+        </div>
+      </div>
+    `}}})();export{_ as SbbNotificationElement};

package/off-brand-theme.css

@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -2248,6 +2256,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
@@ -2546,7 +2558,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) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2642,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2659,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2801,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/option.js

@@ -1,10 +1 @@
-import { t as e } from "./optgroup-base-element-BbxwRc0x.js";
-import { SbbOptGroupElement as t } from "./option/optgroup/optgroup.component.js";
-import { t as n } from "./option-hint.component-CUf2d2d5.js";
-import { t as r } from "./option-styles-BmvwR7PD.js";
-import { SbbOptionBaseElement as i } from "./option/option/option-base-element.js";
-import { t as a } from "./option.component-9AlEwsE3.js";
-import "./option.pure.js";
-t.define(), a.define(), n.define();
-//#endregion
-export { t as SbbOptGroupElement, e as SbbOptgroupBaseElement, i as SbbOptionBaseElement, a as SbbOptionElement, n as SbbOptionHintElement, r as optionPanelStyles };
+import{SbbOptGroupElement as e,SbbOptionElement as t,SbbOptionHintElement as n}from"./option.pure.js";export*from"./option.pure.js";e.define(),t.define(),n.define();

package/option.pure.js

@@ -1,7 +1,47 @@
-import { t as e } from "./optgroup-base-element-BbxwRc0x.js";
-import { SbbOptGroupElement as t } from "./option/optgroup/optgroup.component.js";
-import { t as n } from "./option-hint.component-CUf2d2d5.js";
-import { t as r } from "./option-styles-BmvwR7PD.js";
-import { SbbOptionBaseElement as i } from "./option/option/option-base-element.js";
-import { t as a } from "./option.component-9AlEwsE3.js";
-export { t as SbbOptGroupElement, e as SbbOptgroupBaseElement, i as SbbOptionBaseElement, a as SbbOptionElement, n as SbbOptionHintElement, r as optionPanelStyles };
+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)}
+`;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">
+                <div class="sbb-optgroup__icon-space"></div>
+                <span>${this.label}</span>
+              </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}
+`,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">
+        <slot></slot>
+      </span>
+    `}};const E=i(`:host{--sbb-options-panel-position-x:0;--sbb-options-panel-position-y:0;--sbb-options-pointer-events:all;--_sbb-options-panel-max-height:min(var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height,100000em));--sbb-options-panel-min-height:var(--sbb-options-panel-origin-height);--sbb-options-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));font-weight:400}:host([negative]){--sbb-options-panel-box-shadow:var(--sbb-box-shadow-level-9-hard-negative);--sbb-options-panel-background-color:var(--sbb-background-color-2-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility:hidden;--sbb-options-pointer-events:none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name:open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name:close}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-translate:var(--sbb-spacing-fixed-2x)}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-animation-translate:calc(-1 * var(--sbb-spacing-fixed-2x));--sbb-options-panel-margin-block-start:calc(-1 * var(--sbb-spacing-fixed-2x))}:host([preserve-icon-space]){--sbb-option-icon-container-display:block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-option-panel__overlay-container{pointer-events:none;z-index:var(--sbb-options-panel-internal-z-index);position:fixed;inset:0}.sbb-option-panel__overlay-container:after{content:"";top:var(--sbb-options-panel-origin-position-y);left:var(--sbb-options-panel-origin-position-x);width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-origin-height);border-radius:var(--sbb-options-panel-border-radius);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);background-color:#0000;display:block;position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container:after{box-shadow:var(--sbb-options-panel-box-shadow)}.sbb-option-panel__overlay{visibility:var(--sbb-options-panel-visibility,visible);border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width,fit-content);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);box-shadow:var(--sbb-options-panel-box-shadow);background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:var(--sbb-options-pointer-events);animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);border:none;margin-block-start:var(--sbb-options-panel-margin-block-start);padding-inline:0;display:block;position:absolute;overflow:hidden auto}@media (forced-colors:active){.sbb-option-panel__overlay{border:var(--sbb-border-width-1x) solid CanvasText}}@keyframes open{0%{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}}
+`),D=m,O={childList:!0,subtree:!0,characterData:!0};let k=(()=>{let i=s(v(c)),l=[],d,m,y,b=[],x=[],S,C=[],w=[],T,E=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[];return class extends i{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;d=[a()],m=[a({type:Boolean})],y=[o()],S=[o()],T=[o()],A=[o()],N=[o()],I=[o()],e(this,null,d,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,l),e(this,null,m,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:t},null,l),e(this,null,y,{kind:`accessor`,name:`disabledFromGroup`,static:!1,private:!1,access:{has:e=>`disabledFromGroup`in e,get:e=>e.disabledFromGroup,set:(e,t)=>{e.disabledFromGroup=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`groupLabel`,static:!1,private:!1,access:{has:e=>`groupLabel`in e,get:e=>e.groupLabel,set:(e,t)=>{e.groupLabel=t}},metadata:t},C,w),e(this,null,T,{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},E,k),e(this,null,A,{kind:`accessor`,name:`disableLabelHighlight`,static:!1,private:!1,access:{has:e=>`disableLabelHighlight`in e,get:e=>e.disableLabelHighlight,set:(e,t)=>{e.disableLabelHighlight=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`_highlightString`,static:!1,private:!1,access:{has:e=>`_highlightString`in e,get:e=>e._highlightString,set:(e,t)=>{e._highlightString=t}},metadata:t},P,F),e(this,null,I,{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},L,R),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.events={optionselected:`optionselected`}}static{this.styles=[h]}set value(e){typeof e==`string`?(this.setAttribute(`value`,`${e}`),this._value=null):this._value=e,this.dispatchEvent(new Event(`ɵoptionvaluechange`,{bubbles:!0}))}get value(){return this._value??this.getAttribute(`value`)}set selected(e){this.toggleAttribute(`selected`,e),this._updateAriaSelected()}get selected(){return this.hasAttribute(`selected`)}#e;get disabledFromGroup(){return this.#e}set disabledFromGroup(e){this.#e=e}#t;get groupLabel(){return this.#t}set groupLabel(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get disableLabelHighlight(){return this.#r}set disableLabelHighlight(e){this.#r=e}#i;get _highlightString(){return this.#i}set _highlightString(e){this.#i=e}#a;get _inertAriaGroups(){return this.#a}set _inertAriaGroups(e){this.#a=e}constructor(){super(),this._value=(t(this,l),null),this.#e=t(this,b,!1),this.#t=(t(this,x),t(this,C,``)),this.#n=(t(this,w),t(this,E,void 0)),this.#r=(t(this,k),t(this,j,!1)),this.#i=(t(this,M),t(this,P,null)),this.#a=(t(this,F),t(this,L,!1)),this._previousSize=(t(this,R),null),this.addEventListener?.(`click`,e=>this.selectByClick(e),{passive:!0}),this.addController(new _(this,{config:O,callback:()=>{this.handleHighlightState(),this.dispatchEvent(new Event(`optionLabelChanged`,{bubbles:!0}))}})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid`),{negative:e=>this.toggleState(`negative`,e.negative)})),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}`)}})),D&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=D):this._inertAriaGroups=D)}attributeChangedCallback(e,t,n){(e!==`value`||t!==n)&&super.attributeChangedCallback(e,t,n)}highlight(e){this._highlightString=e}selectViaUserInteraction(e){this.selected=e,this.selected&&this.dispatchEvent(new Event(`optionselected`,{bubbles:!0,composed:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),(e===`disabled`||e===`disabledFromGroup`)&&(this.toggleState(`disabled`,this.disabled||this.disabledFromGroup),g(this,`tabindex`,f&&!this.disabled&&!this.disabledFromGroup?0:null),this.updateAriaDisabled())}firstUpdated(e){super.firstUpdated(e),this._updateAriaSelected()}updateDisableHighlight(e){this.disableLabelHighlight=e,this.toggleState(`disable-highlight`,e)}setActive(e){this.toggleState(`active`,e)}updateAriaDisabled(){this.internals.ariaDisabled=this.disabled||this.disabledFromGroup?`true`:null,this.dispatchEvent(new Event(`ɵdisabledchange`,{bubbles:!0}))}_updateAriaSelected(){this.internals.ariaSelected=`${this.selected}`}handleHighlightState(){let e=Array.from(this.childNodes??[]).filter(e=>e.nodeType!==Node.COMMENT_NODE&&(!(e instanceof Element)||e.slot!==`icon`)),t=e.filter(e=>e.nodeType===Node.TEXT_NODE);if(t.length===0||e.filter(e=>!(e instanceof Element)||e.localName!==`template`).length!==t.length){this.updateDisableHighlight(!0);return}this.label=t.map(e=>e.wholeText).filter(e=>e.trim()).join(``)}getHighlightedLabel(){if(!this._highlightString||!this._highlightString.trim())return n`${this.label}`;let e=this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());return e===-1?n`${this.label}`:n`
+      <span class="sbb-option__label--highlight">${this.label.substring(0,e)}</span><span>${this.label.substring(e,e+this._highlightString.length)}</span
+      ><span class="sbb-option__label--highlight">${this.label.substring(e+this._highlightString.length)}</span>
+    `}renderIcon(){return n`<span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}renderLabel(){return this.label&&!this.disableLabelHighlight?this.getHighlightedLabel():r}renderTick(){return r}render(){return n`
+      <div class="sbb-option">
+        ${this.renderIcon()}
+        <span class="sbb-option__label">
+          <slot @slotchange=${this.handleHighlightState}></slot>
+          <span
+            aria-hidden=${p?`true`:r}
+          >
+            ${this.renderLabel()}
+          </span>
+          ${this._inertAriaGroups&&this.groupLabel?n`<span class="sbb-screen-reader-only"> (${this.groupLabel})</span>`:r}
+        </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)}
+`,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>`}
+
+      <!-- Checkbox -->
+      ${this._isMultiple()?n`
+              <sbb-visual-checkbox
+                ?checked=${this.selected}
+                ?disabled=${this.disabled||this.disabledFromGroup}
+                ?negative=${this.matches?.(`:is(:state(negative),[state--negative])`)}
+              ></sbb-visual-checkbox>
+            `:r}
+    `}renderLabel(){return this._variant===`autocomplete`?super.renderLabel():r}renderTick(){return this._variant===`select`&&!this._isMultiple()&&this.selected?n`<sbb-icon name="tick-small"></sbb-icon>`:r}};export{C as SbbOptGroupElement,S as SbbOptgroupBaseElement,k as SbbOptionBaseElement,j as SbbOptionElement,T as SbbOptionHintElement,E as optionPanelStyles};

package/overlay.js

@@ -1,7 +1 @@
-import { SbbOverlayBaseElement as e, SbbOverlayCloseEvent as t, assignOverlayResult as n, overlayRefs as r } from "./overlay/overlay-base-element.js";
-import { t as i } from "./overlay.component-BvoOK_O-.js";
-import "./overlay.pure.js";
-//#region src/elements/overlay.ts
-i.define();
-//#endregion
-export { e as SbbOverlayBaseElement, t as SbbOverlayCloseEvent, i as SbbOverlayElement, n as assignOverlayResult, r as overlayRefs };
+import{SbbOverlayElement as e}from"./overlay.pure.js";export*from"./overlay.pure.js";e.define();

package/overlay.pure.js

@@ -1,3 +1,36 @@
-import { SbbOverlayBaseElement as e, SbbOverlayCloseEvent as t, assignOverlayResult as n, overlayRefs as r } from "./overlay/overlay-base-element.js";
-import { t as i } from "./overlay.component-BvoOK_O-.js";
-export { e as SbbOverlayBaseElement, t as SbbOverlayCloseEvent, i as SbbOverlayElement, n as assignOverlayResult, r as overlayRefs };
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbEscapableOverlayController as a,SbbFocusTrapController as o,SbbInertController as s,SbbLanguageController as c,SbbNegativeMixin as l,SbbOpenCloseBaseElement as u,SbbScrollHandler as d,forceType as f,forwardEvent as p,i18nCloseDialog as m,i18nDialog as h,idReference as g,isZeroAnimationDuration as _,popoverResetStyles as v,removeAriaOverlayTriggerProperties as y,screenReaderOnlyStyles as b,scrollbarStyles as x,setAriaOverlayTriggerProperties as S}from"./core.js";import{ref as C}from"lit/directives/ref.js";import{html as w}from"lit/static-html.js";import{SbbSecondaryButtonElement as T}from"./button.pure.js";import{SbbContainerElement as E}from"./container.pure.js";const D=new WeakMap;var O=class extends Event{constructor(e,{cancelable:t,closeAttribute:n,closeTarget:r,result:i}){super(e,{cancelable:t}),this.result=i??(r?D.get(r)??(r.getAttribute(n)?.trim()||null):null),this.closeTarget=r??null}};function k(e,t){D.set(e,t)}const A=[];let j=(()=>{let r=l(u),p,m=[],_=[],x,C=[],w=[],T,E=[],D=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,m,null),this.#t=(t(this,_),t(this,C,``)),this.#n=(t(this,w),t(this,E,!1)),this.lastFocusedElement=t(this,D),this.focusTrapController=new o(this),this.scrollHandler=new d,this.language=new c(this),this.inertController=new s(this),this.escapableOverlayController=new a(this),this._ariaLiveRefToggle=!1,this._triggerElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;p=[g(),i()],x=[f(),i({attribute:`accessibility-label`})],T=[f(),i({type:Boolean})],e(this,null,p,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},m,_),e(this,null,x,{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:t},C,w),e(this,null,T,{kind:`accessor`,name:`skipFocusRestoration`,static:!1,private:!1,access:{has:e=>`skipFocusRestoration`in e,get:e=>e.skipFocusRestoration,set:(e,t)=>{e.skipFocusRestoration=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[v,b]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}#n;get skipFocusRestoration(){return this.#n}set skipFocusRestoration(e){this.#n=e}open(){this.state===`opening`||this.state===`opened`||this._hasClosedParent()||!this.dispatchBeforeOpenEvent()||(this.lastFocusedElement=document.activeElement,this.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),A.push(this),this.scrollHandler.disableScroll(),this.escapableOverlayController.connect(),this.attachOpenOverlayEvents(),this.isZeroAnimationDuration()&&this.handleOpening())}close(e){this._close(e,void 0)}_close(e,t){this.state===`closing`||this.state===`closed`||(this.lastResult=e??null,this.lastClosedTarget=t,this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this.removeAriaLiveRefContent(),this.isZeroAnimationDuration()&&this.handleClosing()))}_hasClosedParent(){let e=this.parentElement?.closest(`sbb-dialog, sbb-overlay`);return e?.state===`closed`||e?.state===`closing`}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),y(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(S(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal})))}firstUpdated(e){super.firstUpdated(e),this._ariaLiveRef=this.shadowRoot.querySelector(`.sbb-screen-reader-only`),this._configureTrigger(),this.isOpen&&setTimeout(()=>{this.focusTrapController.focusInitialElement()},0)}disconnectedCallback(){super.disconnectedCallback(),this.openOverlayController?.abort(),this.removeInstanceFromGlobalCollection(),this.scrollHandler.enableScroll(),this._triggerElement=null,this._triggerAbortController?.abort()}requestUpdate(e,t,r){super.requestUpdate(e,t,r),!n&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}attachOpenOverlayEvents(){this.openOverlayController=new AbortController,window.addEventListener(`keydown`,()=>{this.removeAriaLiveRefContent()},{signal:this.openOverlayController.signal}),window.addEventListener(`click`,()=>this.removeAriaLiveRefContent(),{signal:this.openOverlayController.signal})}removeInstanceFromGlobalCollection(){let e=A.indexOf(this);e>-1&&A.splice(e,1)}closeOnSbbOverlayCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(this.closeAttribute)||e.localName===this.closeTag)&&!e.hasAttribute(`disabled`)&&(e.closest(this.localName)===this||(this.shadowRoot?.contains(e)??!1)));t&&A.length&&A[A.length-1]._close(null,t)}removeAriaLiveRefContent(){this._ariaLiveRef&&(this._ariaLiveRef.textContent=``)}setAriaLiveRefContent(e){this._ariaLiveRef&&(this._ariaLiveRefToggle=!this._ariaLiveRefToggle,this._ariaLiveRef.textContent=`${h[this.language.current]}${e?`, ${e}`:``}${this._ariaLiveRefToggle?`\xA0`:``}`)}onOverlayAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this.handleOpening():e.animationName===`close`&&this.state===`closing`&&this.handleClosing()}}})();var M=`:host{--_sbb-overlay-padding-block:calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));display:var(--sbb-overlay-display);inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index,var(--sbb-overlay-default-z-index));position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-overlay-display:block;--sbb-overlay-container-display:flex}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-overlay-pointer-events:all}:host([negative]){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-overlay-color:var(--sbb-color-1-negative);--sbb-overlay-background-color:var(--sbb-background-color-3-negative)}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-overlay-inset:0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:var(--sbb-overlay-container-display);inset:var(--sbb-overlay-inset);align-items:center;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container{animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{height:var(--sbb-overlay-height);color:var(--sbb-overlay-color);border:none;margin:auto;padding:0;position:absolute;inset-inline:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{width:100%;height:var(--sbb-overlay-height);outline:none;flex-direction:column;display:flex;position:fixed}@media (width>=64rem){.sbb-overlay__wrapper{height:auto;position:sticky;inset-block-start:0}}.sbb-overlay__header{pointer-events:none;width:100%;padding:var(--sbb-spacing-responsive-xs);z-index:1;justify-content:space-between;align-items:start;padding-block-end:0;display:flex;position:absolute;inset-inline-start:0}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{-webkit-overflow-scrolling:touch;height:100vh;overflow:auto}.sbb-overlay__content-container{padding-block:var(--_sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0%)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0%)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}
+`;let N=(()=>{let n=j,a,o=[],s=[],c,l=[],u=[];return class extends n{constructor(){super(...arguments),this.#e=t(this,o,!1),this.#t=(t(this,s),t(this,l,``)),this.closeAttribute=(t(this,u),`sbb-overlay-close`),this._overlayContentElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;a=[f(),i({reflect:!0,type:Boolean})],c=[f(),i({attribute:`accessibility-close-label`})],e(this,null,a,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},o,s),e(this,null,c,{kind:`accessor`,name:`accessibilityCloseLabel`,static:!1,private:!1,access:{has:e=>`accessibilityCloseLabel`in e,get:e=>e.accessibilityCloseLabel,set:(e,t)=>{e.accessibilityCloseLabel=t}},metadata:t},l,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-overlay`}static{this.elementDependencies=[T,E]}static{this.styles=[x,r(M)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get accessibilityCloseLabel(){return this.#t}set accessibilityCloseLabel(e){this.#t=e}firstUpdated(e){super.firstUpdated(e),this.isOpen&&this.setAriaLiveRefContent()}isZeroAnimationDuration(){return _(this,`--sbb-overlay-animation-duration`)}handleOpening(){this.state=`opened`,this.inertController.activate(),this.focusTrapController.focusInitialElement(),setTimeout(()=>this.setAriaLiveRefContent(this.accessibilityLabel)),this.focusTrapController.enabled=!0,this.dispatchOpenEvent()}handleClosing(){this._overlayContentElement?.scrollTo(0,0),this.state=`closed`,this.hidePopover?.(),this.inertController.deactivate(),this.skipFocusRestoration||this.lastFocusedElement?.focus(),this.openOverlayController?.abort(),this.focusTrapController.enabled=!1,this.removeInstanceFromGlobalCollection(),A.length||this.scrollHandler.enableScroll(),this.escapableOverlayController.disconnect(),this.dispatchCloseEvent()}dispatchBeforeCloseEvent(){return this.dispatchEvent(new O(`beforeclose`,{cancelable:!0,closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}dispatchCloseEvent(){return this.dispatchEvent(new O(`close`,{closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}render(){return w`
+      <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
+        <div class="sbb-overlay">
+          <div
+            @click=${e=>this.closeOnSbbOverlayCloseClick(e)}
+            class="sbb-overlay__wrapper"
+          >
+            <div class="sbb-overlay__header">
+              <sbb-secondary-button
+                class="sbb-overlay__close"
+                aria-label="${this.accessibilityCloseLabel||m[this.language.current]}"
+                ?negative=${this.negative}
+                size="m"
+                icon-name="cross-small"
+                sbb-overlay-close
+              ></sbb-secondary-button>
+            </div>
+            <div
+              class="sbb-overlay__content ${this.negative?`sbb-scrollbar-negative`:`sbb-scrollbar`}"
+              ${C(e=>this._overlayContentElement=e)}
+              @scroll=${e=>p(e,document)}
+            >
+              <sbb-container
+                class="sbb-overlay__content-container"
+                ?expanded=${this.expanded}
+                color="transparent"
+              >
+                <slot></slot>
+              </sbb-container>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span class="sbb-screen-reader-only" aria-live="polite"></span>
+    `}}})();export{j as SbbOverlayBaseElement,O as SbbOverlayCloseEvent,N as SbbOverlayElement,k as assignOverlayResult,A as overlayRefs};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "5.0.2",
+  "version": "5.2.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",

package/paginator.js

@@ -1,7 +1 @@
-import { n as e, t } from "./paginator-common-Xiv6UZlo.js";
-import { t as n } from "./compact-paginator.component-CmPlZsd4.js";
-import { t as r } from "./paginator.component-buCkeyDv.js";
-import "./paginator.pure.js";
-n.define(), r.define();
-//#endregion
-export { n as SbbCompactPaginatorElement, t as SbbPaginatorCommonElementMixin, r as SbbPaginatorElement, e as SbbPaginatorPageEvent };
+import{SbbCompactPaginatorElement as e,SbbPaginatorElement as t}from"./paginator.pure.js";export*from"./paginator.pure.js";e.define(),t.define();