@sbb-esta/lyne-elements-dev 5.2.0-dev.1783591989 → 5.2.0-dev.1783608096

package/development/overlay.pure.js

@@ -240,7 +240,7 @@ let SbbOverlayBaseElement = (() => {
 
 //#endregion
 //#region src/elements/overlay/overlay.scss?inline
-var overlay_default = ":host {\n  --_sbb-overlay-padding-block: calc(\n    var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l)\n  );\n  --sbb-overlay-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: var(--sbb-overlay-display);\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n  z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-overlay-display: block;\n  --sbb-overlay-container-display: flex;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-overlay-pointer-events: all;\n}\n\n:host([negative]) {\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-overlay-color: var(--sbb-color-1-negative);\n  --sbb-overlay-background-color: var(--sbb-background-color-3-negative);\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-overlay-inset: 0;\n}\n\n.sbb-overlay__container {\n  background-color: var(--sbb-overlay-background-color);\n  pointer-events: var(--sbb-overlay-pointer-events);\n  display: var(--sbb-overlay-container-display);\n  align-items: center;\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n}\n: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 {\n  animation-name: open;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container {\n  pointer-events: none;\n  animation-name: close;\n}\n\n.sbb-overlay {\n  position: absolute;\n  inset-inline: 0;\n  margin: auto;\n  padding: 0;\n  border: none;\n  height: var(--sbb-overlay-height);\n  color: var(--sbb-overlay-color);\n}\n: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 {\n  animation-name: open-move-in;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay {\n  animation-name: close-move-out;\n}\n\n.sbb-overlay__wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: var(--sbb-overlay-height);\n  outline: none;\n  position: fixed;\n}\n@media (min-width: calc(64rem)) {\n  .sbb-overlay__wrapper {\n    position: sticky;\n    inset-block-start: 0;\n    height: auto;\n  }\n}\n\n.sbb-overlay__header {\n  position: absolute;\n  inset-inline-start: 0;\n  display: flex;\n  pointer-events: none;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--sbb-spacing-responsive-xs);\n  padding-block-end: 0;\n  z-index: 1;\n}\n.sbb-overlay__header * {\n  pointer-events: all;\n}\n\n.sbb-overlay__close {\n  margin-inline-start: auto;\n}\n\n.sbb-overlay__content {\n  height: 100vh;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sbb-overlay__content-container {\n  padding-block: var(--_sbb-overlay-padding-block);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes open-move-in {\n  from {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes close-move-out {\n  from {\n    transform: translateY(0%);\n  }\n  to {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n}\n";
+var overlay_default = ":host {\n  --sbb-overlay-display: none;\n  --sbb-overlay-inset: 0 auto auto 0;\n  --sbb-overlay-pointer-events: none;\n  --sbb-overlay-container-display: none;\n  --_sbb-overlay-padding-block: calc(\n    var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l)\n  );\n  --sbb-overlay-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: var(--sbb-overlay-display);\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n  z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-overlay-display: block;\n  --sbb-overlay-container-display: flex;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-overlay-pointer-events: all;\n}\n\n:host(:not([negative])) {\n  --sbb-overlay-color: var(--sbb-color-1);\n  --sbb-overlay-background-color: var(--sbb-background-color-3);\n}\n\n:host([negative]) {\n  --sbb-overlay-color: var(--sbb-color-1-negative);\n  --sbb-overlay-background-color: var(--sbb-background-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-overlay-inset: 0;\n}\n\n.sbb-overlay__container {\n  background-color: var(--sbb-overlay-background-color);\n  pointer-events: var(--sbb-overlay-pointer-events);\n  display: var(--sbb-overlay-container-display);\n  align-items: center;\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n}\n: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 {\n  animation-name: open;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container {\n  pointer-events: none;\n  animation-name: close;\n}\n\n.sbb-overlay {\n  position: absolute;\n  inset-inline: 0;\n  margin: auto;\n  padding: 0;\n  border: none;\n  height: var(--sbb-overlay-height);\n  color: var(--sbb-overlay-color);\n}\n: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 {\n  animation-name: open-move-in;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay {\n  animation-name: close-move-out;\n}\n\n.sbb-overlay__wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: var(--sbb-overlay-height);\n  outline: none;\n  position: fixed;\n}\n@media (min-width: calc(64rem)) {\n  .sbb-overlay__wrapper {\n    position: sticky;\n    inset-block-start: 0;\n    height: auto;\n  }\n}\n\n.sbb-overlay__header {\n  position: absolute;\n  inset-inline-start: 0;\n  display: flex;\n  pointer-events: none;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--sbb-spacing-responsive-xs);\n  padding-block-end: 0;\n  z-index: 1;\n}\n.sbb-overlay__header * {\n  pointer-events: all;\n}\n\n.sbb-overlay__close {\n  margin-inline-start: auto;\n}\n\n.sbb-overlay__content {\n  height: 100vh;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sbb-overlay__content-container {\n  padding-block: var(--_sbb-overlay-padding-block);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes open-move-in {\n  from {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes close-move-out {\n  from {\n    transform: translateY(0%);\n  }\n  to {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n}\n";
 
 //#endregion
 //#region src/elements/overlay/overlay.component.ts

package/lean-off-brand-theme.css

@@ -1586,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-xs);

package/lean-safety-theme.css

@@ -1586,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-xs);

package/lean-theme.css

@@ -1586,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-xs);

package/off-brand-theme.css

@@ -1586,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-m);

package/overlay/_overlay.global.scss

@@ -4,10 +4,6 @@ $theme: 'standard' !default;
 
 @mixin base {
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
 }

package/overlay.pure.js

@@ -1,4 +1,4 @@
-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))}}
+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-display:none;--sbb-overlay-inset:0 auto auto 0;--sbb-overlay-pointer-events:none;--sbb-overlay-container-display:none;--_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(:not([negative])){--sbb-overlay-color:var(--sbb-color-1);--sbb-overlay-background-color:var(--sbb-background-color-3)}:host([negative]){--sbb-overlay-color:var(--sbb-color-1-negative);--sbb-overlay-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}: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">

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.2.0-dev.1783591989",
+  "version": "5.2.0-dev.1783608096",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/0c14f10cca1a0d7b6651ceba608f501cac9dd4d2"
+    "https://github.com/sbb-design-systems/lyne-components/commit/d2b62eb150dcebb54d9d53c8d750f1714457b0ea"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1586,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-m);

package/standard-theme.css

@@ -1586,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-m);