@sbb-esta/lyne-elements-dev 5.4.0-dev.1785757644 → 5.4.0-dev.1785767622

package/development/header.pure.js

@@ -162,7 +162,7 @@ var SbbHeaderLinkElement = class extends SbbHeaderActionCommonElementMixin(SbbLi
 
 //#endregion
 //#region src/elements/header/header/header.scss?inline
-var header_default = ":host {\n  --sbb-logo-height: 1rem;\n  --sbb-signet-height: 1rem;\n  --sbb-header-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n}\n@media (min-width: calc(64rem)) {\n  :host {\n    --sbb-logo-height: 1.25rem;\n    --sbb-signet-height: 1.25rem;\n  }\n}\n:host {\n  display: block;\n  height: var(--sbb-header-height);\n  line-height: var(--sbb-typo-line-height-text);\n  padding-block-start: calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));\n}\n\n:host([size=s]) {\n  --sbb-header-height: var(--sbb-header-height-s);\n}\n\n:host([size=m]) {\n  --sbb-header-height: var(--sbb-header-height-m);\n}\n\n:host([hide-on-scroll]) {\n  --sbb-header-position: absolute;\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed])) {\n  --sbb-header-position: fixed;\n  --sbb-header-animation-name: hide;\n  --sbb-header-transform: translate3d(0, -100%, 0);\n  --sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])) {\n  --sbb-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])) {\n  --sbb-header-animation-name: show;\n  --sbb-header-transform: translate3d(0, 0, 0);\n  --sbb-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])) {\n  --sbb-header-transition-duration: 0;\n  --sbb-header-transform: translate3d(0, 0, 0);\n}\n\n.sbb-header {\n  position: var(--sbb-header-position);\n  inset: 0 var(--sbb-header-inset-inline-end) auto 0;\n  padding-block-start: var(--sbb-header-padding-block-start);\n  background: var(--sbb-header-background);\n  z-index: var(--sbb-header-z-index, 10);\n  transform: var(--sbb-header-transform);\n  transition-property: box-shadow;\n  transition-duration: var(--sbb-header-transition-duration);\n  transition-timing-function: var(--sbb-header-transition-timing);\n  animation-name: var(--sbb-header-animation-name);\n  animation-duration: var(--sbb-header-transition-duration);\n  animation-timing-function: var(--sbb-header-transition-timing);\n}\n:host(:is(:is(:state(shadow),[state--shadow]), :is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header {\n  box-shadow: var(--sbb-header-box-shadow);\n}\n@media (forced-colors: active) {\n  .sbb-header {\n    border-block-end: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-header__wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: var(--sbb-header-height);\n}\n:host(:not([expanded])) .sbb-header__wrapper {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n  margin-inline: auto;\n  width: 100%;\n}\n@media (min-width: calc(90rem)) {\n  :host(:not([expanded])) .sbb-header__wrapper {\n    max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n  }\n}\n:host([expanded]) .sbb-header__wrapper {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));\n}\n\n::slotted(:is(sbb-header-button, sbb-header-link):first-child) {\n  margin-inline-start: var(--sbb-header-first-item-margin-inline-start);\n}\n\n::slotted(*) {\n  flex: 0 0 auto;\n}\n\n::slotted(.sbb-header-shrinkable) {\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n::slotted(.sbb-header-spacer) {\n  flex-grow: 1;\n}\n\n::slotted(.sbb-header-logo) {\n  margin-inline-start: var(--sbb-spacing-responsive-s);\n}\n\n::slotted(a.sbb-header-logo) {\n  display: block;\n  padding-block: var(--sbb-spacing-fixed-3x);\n  position: relative;\n  outline: none !important;\n}\n\n::slotted(a.sbb-header-logo)::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: var(--sbb-spacing-fixed-3x) 0;\n}\n\n::slotted(a.sbb-header-logo:focus-visible)::before {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-spacing-fixed-3x);\n  border-radius: 1px;\n}\n\n@keyframes show {\n  from {\n    transform: translate3d(0, -100%, 0);\n  }\n  to {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes hide {\n  from {\n    transform: translate3d(0, 0, 0);\n  }\n  to {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n";
+var header_default = ":host {\n  --sbb-logo-height: 1rem;\n  --sbb-signet-height: 1rem;\n  --sbb-header-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n}\n@media (min-width: calc(64rem)) {\n  :host {\n    --sbb-logo-height: 1.25rem;\n    --sbb-signet-height: 1.25rem;\n  }\n}\n:host {\n  display: block;\n  height: var(--sbb-header-height);\n  line-height: var(--sbb-typo-line-height-text);\n  padding-block-start: calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));\n}\n\n:host([size=s]) {\n  --sbb-header-height: var(--sbb-header-height-s);\n}\n\n:host([size=m]) {\n  --sbb-header-height: var(--sbb-header-height-m);\n}\n\n:host([hide-on-scroll]) {\n  --sbb-header-position: absolute;\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed])) {\n  --sbb-header-position: fixed;\n  --sbb-header-animation-name: hide;\n  --sbb-header-transform: translate3d(0, -100%, 0);\n  --sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])) {\n  --sbb-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])) {\n  --sbb-header-animation-name: show;\n  --sbb-header-transform: translate3d(0, 0, 0);\n  --sbb-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])) {\n  --sbb-header-transition-duration: 0;\n  --sbb-header-transform: translate3d(0, 0, 0);\n}\n\n.sbb-header {\n  position: var(--sbb-header-position);\n  inset: 0 var(--sbb-header-inset-inline-end) auto 0;\n  padding-block-start: var(--sbb-header-padding-block-start);\n  background: var(--sbb-header-background);\n  z-index: var(--sbb-header-z-index, 10);\n  transform: var(--sbb-header-transform);\n  transition-property: box-shadow;\n  transition-duration: var(--sbb-header-transition-duration);\n  transition-timing-function: var(--sbb-header-transition-timing);\n  animation-name: var(--sbb-header-animation-name);\n  animation-duration: var(--sbb-header-transition-duration);\n  animation-timing-function: var(--sbb-header-transition-timing);\n}\n:host(:is(:is(:state(shadow),[state--shadow]), :is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header {\n  box-shadow: var(--sbb-header-box-shadow);\n}\n@media (forced-colors: active) {\n  .sbb-header {\n    border-block-end: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-header__wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: var(--sbb-header-height);\n}\n:host(:not([expanded])) .sbb-header__wrapper {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n  margin-inline: auto;\n  width: 100%;\n}\n@media (min-width: calc(90rem)) {\n  :host(:not([expanded])) .sbb-header__wrapper {\n    max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n  }\n}\n:host([expanded]) .sbb-header__wrapper {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));\n}\n\n::slotted(:is(sbb-header-button, sbb-header-link):first-child) {\n  margin-inline-start: var(--sbb-header-first-item-margin-inline-start);\n}\n\n::slotted(*) {\n  flex: 0 0 auto;\n}\n\n::slotted(.sbb-header-shrinkable) {\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n::slotted(.sbb-header-spacer) {\n  flex-grow: 1;\n}\n\n::slotted(.sbb-header-logo) {\n  margin-inline-start: var(--sbb-spacing-responsive-s);\n}\n\n::slotted(a.sbb-header-logo) {\n  display: block;\n  padding-block: var(--sbb-spacing-fixed-3x);\n  position: relative;\n  flex-basis: 0;\n  outline: none !important;\n}\n\n::slotted(a.sbb-header-logo)::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: var(--sbb-spacing-fixed-3x) 0;\n}\n\n::slotted(a.sbb-header-logo:focus-visible)::before {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-spacing-fixed-3x);\n  border-radius: 1px;\n}\n\n@keyframes show {\n  from {\n    transform: translate3d(0, -100%, 0);\n  }\n  to {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes hide {\n  from {\n    transform: translate3d(0, 0, 0);\n  }\n  to {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n";
 
 //#endregion
 //#region src/elements/header/header/header.component.ts

package/development/popover.pure.js

@@ -13,6 +13,8 @@ var popover_base_default = ":host {\n  --sbb-focus-outline-color: var(--sbb-focu
 //#region src/elements/popover/popover-base/popover-base.ts
 const VERTICAL_OFFSET = 16;
 const HORIZONTAL_OFFSET = 32;
+const VIEWPORT_MARGIN = 2;
+const ARROW_SIZE = 16;
 const popoversRef = /* @__PURE__ */ new Set();
 var SbbPopoverCloseEvent = class extends Event {
 	get closeTarget() {
@@ -236,8 +238,14 @@ let SbbPopoverBaseElement = (() => {
 			});
 			const verticalPosition = popoverPosition.alignment.vertical;
 			for (const position of ["above", "below"]) this.toggleState(`position-${position}`, position === verticalPosition);
-			const arrowXPosition = this._triggerElement.getBoundingClientRect().left - popoverPosition.left + this._triggerElement.clientWidth / 2 - 8;
-			this.style.setProperty("--_sbb-popover-position-x", `${popoverPosition.left}px`);
+			const popoverWidth = this.overlay.offsetWidth;
+			const viewportWidth = document.documentElement.clientWidth;
+			const clampedLeft = Math.max(VIEWPORT_MARGIN, Math.min(popoverPosition.left, viewportWidth - popoverWidth - VIEWPORT_MARGIN));
+			const triggerRect = this._triggerElement.getBoundingClientRect();
+			const borderRadius = parseFloat(getComputedStyle(this.overlay).borderTopLeftRadius) || 0;
+			const rawArrowXPosition = triggerRect.left - clampedLeft + triggerRect.width / 2 - ARROW_SIZE / 2;
+			const arrowXPosition = Math.max(borderRadius, Math.min(rawArrowXPosition, popoverWidth - borderRadius - ARROW_SIZE));
+			this.style.setProperty("--_sbb-popover-position-x", `${clampedLeft}px`);
 			this.style.setProperty("--_sbb-popover-position-y", `${popoverPosition.top}px`);
 			this.style.setProperty("--_sbb-popover-arrow-position-x", `${arrowXPosition}px`);
 			this.style.setProperty("--_sbb-popover-max-height", popoverPosition.maxHeight);

package/header.pure.js

@@ -11,7 +11,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
       <span class="sbb-header-environment__text">
         <slot></slot>
       </span>
-    `}},C=class extends y(d){static{this.elementName=`sbb-header-link`}},w=`:host{--sbb-logo-height:1rem;--sbb-signet-height:1rem;--sbb-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x))}@media (width>=64rem){:host{--sbb-logo-height:1.25rem;--sbb-signet-height:1.25rem}}:host{height:var(--sbb-header-height);line-height:var(--sbb-typo-line-height-text);padding-block-start:calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));display:block}:host([size=s]){--sbb-header-height:var(--sbb-header-height-s)}:host([size=m]){--sbb-header-height:var(--sbb-header-height-m)}:host([hide-on-scroll]){--sbb-header-position:absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position:fixed;--sbb-header-animation-name:hide;--sbb-header-transform:translate3d(0, -100%, 0);--sbb-header-inset-inline-end:var(--sbb-scrollbar-width,0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing:cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name:show;--sbb-header-transform:translate3d(0, 0, 0);--sbb-header-transition-timing:cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration:0;--sbb-header-transform:translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-header-background);z-index:var(--sbb-header-z-index,10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing);padding-block-start:var(--sbb-header-padding-block-start)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-header-box-shadow)}@media (forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{height:var(--sbb-header-height);justify-content:flex-start;align-items:center;display:flex}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:none}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){padding-block:var(--sbb-spacing-fixed-3x);display:block;position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";inset:var(--sbb-spacing-fixed-3x) 0;display:block;position:absolute}::slotted(a.sbb-header-logo:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translateY(-100%)}to{transform:translate(0,0)}}@keyframes hide{0%{transform:translate(0,0)}to{transform:translateY(-100%)}}
+    `}},C=class extends y(d){static{this.elementName=`sbb-header-link`}},w=`:host{--sbb-logo-height:1rem;--sbb-signet-height:1rem;--sbb-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x))}@media (width>=64rem){:host{--sbb-logo-height:1.25rem;--sbb-signet-height:1.25rem}}:host{height:var(--sbb-header-height);line-height:var(--sbb-typo-line-height-text);padding-block-start:calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));display:block}:host([size=s]){--sbb-header-height:var(--sbb-header-height-s)}:host([size=m]){--sbb-header-height:var(--sbb-header-height-m)}:host([hide-on-scroll]){--sbb-header-position:absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position:fixed;--sbb-header-animation-name:hide;--sbb-header-transform:translate3d(0, -100%, 0);--sbb-header-inset-inline-end:var(--sbb-scrollbar-width,0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing:cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name:show;--sbb-header-transform:translate3d(0, 0, 0);--sbb-header-transition-timing:cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration:0;--sbb-header-transform:translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-header-background);z-index:var(--sbb-header-z-index,10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing);padding-block-start:var(--sbb-header-padding-block-start)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-header-box-shadow)}@media (forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{height:var(--sbb-header-height);justify-content:flex-start;align-items:center;display:flex}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:none}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){padding-block:var(--sbb-spacing-fixed-3x);flex-basis:0;display:block;position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";inset:var(--sbb-spacing-fixed-3x) 0;display:block;position:absolute}::slotted(a.sbb-header-logo:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translateY(-100%)}to{transform:translate(0,0)}}@keyframes hide{0%{transform:translate(0,0)}to{transform:translateY(-100%)}}
 `;let T=(()=>{let s=l,c,d=[],f=[],g,_=[],v=[],y,b=[],x=[],S,C=[],T=[],E,D=[],O=[];return class l extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;c=[p(),a({reflect:!0,type:Boolean})],g=[m(),a({attribute:`scroll-origin`})],y=[p(),a({attribute:`hide-on-scroll`,reflect:!0,type:Boolean})],S=[a({reflect:!0})],E=[o()],e(this,null,c,{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},d,f),e(this,null,g,{kind:`accessor`,name:`scrollOrigin`,static:!1,private:!1,access:{has:e=>`scrollOrigin`in e,get:e=>e.scrollOrigin,set:(e,t)=>{e.scrollOrigin=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`hideOnScroll`,static:!1,private:!1,access:{has:e=>`hideOnScroll`in e,get:e=>e.hideOnScroll,set:(e,t)=>{e.hideOnScroll=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},C,T),e(this,null,E,{kind:`accessor`,name:`_headerOnTop`,static:!1,private:!1,access:{has:e=>`_headerOnTop`in e,get:e=>e._headerOnTop,set:(e,t)=>{e._headerOnTop=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-header`}static{this.styles=[i(w)]}static{this._headerScrollOrigins=new Set}static{this._headerElements=new Set}static{r||h(()=>this._initializeScrollOriginObserver())}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get scrollOrigin(){return this.#t}set scrollOrigin(e){this.#t=e}#n;get hideOnScroll(){return this.#n}set hideOnScroll(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}#i;get _headerOnTop(){return this.#i}set _headerOnTop(e){this.#i=e}constructor(){super(),this.#e=t(this,d,!1),this.#t=(t(this,f),t(this,_,null)),this.#n=(t(this,v),t(this,b,!1)),this.#r=(t(this,x),t(this,C,null)),this.#i=(t(this,T),t(this,D,!0)),this._scrollElement=t(this,O),this._lastScroll=0,this._scrollOriginFromObserver=null,this.addController(new u(this))}static _initializeScrollOriginObserver(){new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleScrollOriginElement(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleScrollOriginElement(e),this._findAndHandleScrollOrigins(e);this._updateHeaderElements()}).observe(document.documentElement,{attributeFilter:[`sbb-header-scroll-origin`],childList:!0,subtree:!0}),this._findAndHandleScrollOrigins(document.body),this._updateHeaderElements()}static _findAndHandleScrollOrigins(e){e.querySelectorAll(`[sbb-header-scroll-origin]`).forEach(e=>this._handleScrollOriginElement(e))}static _handleScrollOriginElement(e){e.isConnected&&e.hasAttribute(`sbb-header-scroll-origin`)?this._headerScrollOrigins.add(e):this._headerScrollOrigins.delete(e)}static _updateHeaderElements(){for(let e of this._headerElements)e._scrollOriginFromObserver=this._headerScrollOrigins.size===0?null:this._headerScrollOrigins.size===1?this._headerScrollOrigins.values().next().value??null:Array.from(this._headerScrollOrigins).sort((e,t)=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_CONTAINS).at(-1)??null,e._updateScrollListener()}connectedCallback(){super.connectedCallback(),l._headerElements.add(this),this.hasUpdated&&this._updateScrollListener()}disconnectedCallback(){super.disconnectedCallback(),this._scrollElement=null,this._scrollEventsController?.abort(),l._headerElements.delete(this)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`scrollOrigin`)&&this.hasUpdated&&this._updateScrollListener()}firstUpdated(e){super.firstUpdated(e),this._updateScrollListener()}_updateScrollListener(){let e=this.scrollOrigin??this._scrollOriginFromObserver??document;if(e===this._scrollElement||(this._scrollEventsController?.abort(),this._scrollElement=e,!this._scrollElement))return;this._scrollEventsController=new AbortController,this._scrollFunction=this._getScrollFunction.bind(this),this._scrollElement.addEventListener(`scroll`,this._scrollFunction,{passive:!0,signal:this._scrollEventsController.signal});let t=this._getCurrentScrollProperty(`scrollTop`);this._lastScroll=t<=0?0:t}_getScrollFunction(){return this.hideOnScroll?this._scrollListener():this._scrollShadowListener()}_getCurrentScrollProperty(e){return this._scrollElement instanceof Document?this._scrollElement.documentElement[e]||this._scrollElement.body[e]:this._scrollElement?.[e]||0}_scrollListener(){let e=this._getCurrentScrollProperty(`scrollTop`);this._getCurrentScrollProperty(`scrollHeight`)-window.innerHeight-e<=0||(this.toggleState(`shadow`,e!==0),e>this.offsetHeight&&e>0&&this._lastScroll<e&&this._closeOpenOverlays(),e>this.offsetHeight*2?(this._headerOnTop=!1,e>0&&this._lastScroll<e?[`shadow`,`visible`].forEach(e=>this.internals.states.delete(e)):[`fixed`,`shadow`,`animated`,`visible`].forEach(e=>this.internals.states.add(e))):(e===0&&(this._headerOnTop=!0),this._headerOnTop&&[`shadow`,`animated`,`fixed`,`visible`].forEach(e=>this.internals.states.delete(e))),this._lastScroll=e<=0?0:e)}_scrollShadowListener(){this.toggleState(`shadow`,this._getCurrentScrollProperty(`scrollTop`)!==0)}_closeOpenOverlays(){if(this.matches(`:is(:state(has-visible-focus-within),[state--has-visible-focus-within])`))return;let e=Array.from(this.querySelectorAll(`[aria-controls][aria-expanded='true']`));for(let t of e){let e=t.ariaControlsElements[0];typeof e?.close==`function`&&e.close()}}render(){return n`
       <header class="sbb-header">
         <div class="sbb-header__wrapper">

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.4.0-dev.1785757644",
+  "version": "5.4.0-dev.1785767622",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/da4d7ad781e56fdab834037416107a2c4ec4971e"
+    "https://github.com/sbb-design-systems/lyne-components/commit/8247608fc0d7ec583ce5d1a594223f2263bae515"
   ],
   "type": "module",
   "exports": {

package/popover.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{IS_FOCUSABLE_QUERY as l,SbbEscapableOverlayController as u,SbbFocusTrapController as d,SbbLanguageController as f,SbbMediaQueryPointerCoarse as p,SbbOpenCloseBaseElement as m,forceType as h,getElementPosition as g,i18nClosePopover as _,idReference as v,isEventOnElement as y,isFakeMousedownFromScreenReader as b,isZeroAnimationDuration as x,popoverResetStyles as S,readConfig as C,removeAriaOverlayTriggerProperties as w,sbbInputModalityDetector as T,scrollbarStyles as E,setAriaOverlayTriggerProperties as D,ɵstateController as O}from"./core.js";import{SbbSecondaryButtonElement as k}from"./button.pure.js";var A=`:host{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-popover-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-popover-inset:0 auto auto 0;--_sbb-popover-translate:0 var(--sbb-spacing-fixed-2x);--_sbb-popover-box-shadow:var(--sbb-box-shadow-level-9-hard);display:none;outline:none!important}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--_sbb-popover-inset:0;display:block}:host(:is(:state(position-above),[state--position-above])){--_sbb-popover-translate:0 calc(var(--sbb-spacing-fixed-2x) * -1)}.sbb-popover:after,.sbb-popover__content:before{content:"";width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--_sbb-popover-arrow-position-x,0);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;display:block;position:absolute;rotate:45deg}.sbb-popover__container{inset:var(--_sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index,var(--sbb-overlay-default-z-index));position:fixed}.sbb-popover{position:var(--sbb-popover-position,absolute);top:var(--_sbb-popover-position-y,0);bottom:unset;left:var(--_sbb-popover-position-x,0);right:unset;background-color:var(--sbb-popover-background);max-width:var(--sbb-popover-max-width);width:max-content;box-shadow:var(--_sbb-popover-box-shadow);border-radius:var(--sbb-popover-border-radius);pointer-events:all;border:none;outline:none;padding:0;display:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-popover{animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--_sbb-popover-box-shadow)}@media (forced-colors:active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors:active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";z-index:-1;background-color:#0000;display:block;position:absolute;inset:0}:host(:is(:state(position-below),[state--position-below])) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);background-color:var(--sbb-popover-background);outline:none}.sbb-popover__content:before{clip-path:polygon(100% 0,0% 0%,0% 100%)}:host(:is(:state(position-above),[state--position-above])) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2);clip-path:polygon(100% 0,100% 100%,0% 100%)}@keyframes open{0%{opacity:0;translate:var(--_sbb-popover-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--_sbb-popover-translate)}}
-`;const j=new Set;var M=class extends Event{get closeTarget(){return this._closeTarget}constructor(e,{closeTarget:t,cancelable:n}){super(e,{cancelable:n}),this._closeTarget=t}};let N=(()=>{let s=m,f,p=[],h=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,p,null),this._nextFocusedElement=t(this,h),this._skipCloseFocus=!1,this._resizeController=new n(this,{target:null,callback:()=>this._setPopoverPosition()}),this._escapableOverlayController=new u(this),this._focusTrapController=new d(this),this._blurTimeout=null,this._pointerDownListener=e=>{this._isPointerDownEventOnPopover=y(this.overlay,e)},this._closeOnBackdropClick=e=>{let t=e.composedPath();!this._isPointerDownEventOnPopover&&!y(this.overlay,e)&&(!this.trigger||!t.includes(this.trigger))&&(this._nextFocusedElement=t.filter(e=>e instanceof window.HTMLElement).find(e=>e.matches(l)),clearTimeout(this.closeTimeout),this.close())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;f=[v(),o()],e(this,null,f,{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},p,h),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[S,a(A)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}open(){if(!(this.state!==`closed`&&this.state!==`closing`||!this.overlay||!this.dispatchBeforeOpenEvent())){for(let e of j)(e.state===`opened`||e.state===`opening`)&&e.close();this.showPopover?.(),this.state=`opening`,this.inert=!0,this._setPopoverPosition(),this._attachWindowEvents(),this._escapableOverlayController.connect(),this._nextFocusedElement=void 0,this._skipCloseFocus=!1,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening()}}close(e){(this.state===`opened`||this.state===`opening`)&&(this._popoverCloseElement=e,this.dispatchBeforeCloseEvent({closeTarget:e??null})&&(this.state=`closing`,this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()))}_isZeroAnimationDuration(){return x(this,`--sbb-popover-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.overlay&&(this._resizeController.unobserve(this.overlay),this.overlay.firstElementChild?.scrollTo(0,0)),this.removeAttribute(`tabindex`),this._skipCloseFocus||(this._nextFocusedElement||this._triggerElement)?.focus(),this._escapableOverlayController.disconnect(),this._openStateController?.abort(),this._focusTrapController.enabled=!1,this.dispatchCloseEvent({closeTarget:this._popoverCloseElement??null})}_handleOpening(){this.state=`opened`,this.inert=!1,this._setPopoverFocus(),this._focusTrapController.enabled=!0,this.overlay&&this._resizeController.observe(this.overlay),this.dispatchOpenEvent()}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.state=`closed`,j.add(this),this.hasUpdated&&this._configureTrigger()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&(!e||e===`trigger`||e===`hoverTrigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openStateController?.abort(),j.delete(this),this._blurTimeout&&clearTimeout(this._blurTimeout)}_configureTrigger(){if(!i){if(this.hydrationRequired){this.hydrationComplete.then(()=>this._configureTrigger());return}this.configureTrigger(this._triggerElement??null)}}configureTrigger(e){this._triggerAbortController?.abort(),w(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(D(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this.registerTriggerListeners(this._triggerAbortController.signal))}registerTriggerListeners(e){this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:e})}_attachWindowEvents(){this._openStateController=new AbortController,document.addEventListener(`scroll`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal}),window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._openStateController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._openStateController.signal})}_closeOnSbbPopoverCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(`sbb-popover-close`)||e.localName===`sbb-popover-close-button`)&&!e.hasAttribute(`disabled`));t&&(clearTimeout(this.closeTimeout),this.close(t))}_onPopoverAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_setPopoverFocus(){!this._focusTrapController.focusInitialElement()&&this._openStateController&&(this.setAttribute(`tabindex`,`0`),this.focus({preventScroll:!0}),this.addEventListener(`blur`,e=>{this._blurTimeout=setTimeout(()=>{if(document.visibilityState!==`hidden`){if(this.removeAttribute(`tabindex`),this.contains(e.relatedTarget)||e.relatedTarget===this.trigger)return;(this.state===`opened`||this.state===`opening`)&&(this._skipCloseFocus=!0),this.close()}})},{signal:this._openStateController.signal}))}_setPopoverPosition(){if(!this.overlay||!this._triggerElement)return;let e=g(this.overlay,this._triggerElement,this.shadowRoot.querySelector(`.sbb-popover__container`),{verticalOffset:16,horizontalOffset:32,centered:!0,responsiveHeight:!0}),t=e.alignment.vertical;for(let e of[`above`,`below`])this.toggleState(`position-${e}`,e===t);let n=this._triggerElement.getBoundingClientRect().left-e.left+this._triggerElement.clientWidth/2-8;this.style.setProperty(`--_sbb-popover-position-x`,`${e.left}px`),this.style.setProperty(`--_sbb-popover-position-y`,`${e.top}px`),this.style.setProperty(`--_sbb-popover-arrow-position-x`,`${n}px`),this.style.setProperty(`--_sbb-popover-max-height`,e.maxHeight)}dispatchBeforeCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new M(`beforeclose`,{closeTarget:t,cancelable:!0}))}dispatchCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new M(`close`,{closeTarget:t,cancelable:!1}))}render(){return r`
+`;const j=new Set;var M=class extends Event{get closeTarget(){return this._closeTarget}constructor(e,{closeTarget:t,cancelable:n}){super(e,{cancelable:n}),this._closeTarget=t}};let N=(()=>{let s=m,f,p=[],h=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,p,null),this._nextFocusedElement=t(this,h),this._skipCloseFocus=!1,this._resizeController=new n(this,{target:null,callback:()=>this._setPopoverPosition()}),this._escapableOverlayController=new u(this),this._focusTrapController=new d(this),this._blurTimeout=null,this._pointerDownListener=e=>{this._isPointerDownEventOnPopover=y(this.overlay,e)},this._closeOnBackdropClick=e=>{let t=e.composedPath();!this._isPointerDownEventOnPopover&&!y(this.overlay,e)&&(!this.trigger||!t.includes(this.trigger))&&(this._nextFocusedElement=t.filter(e=>e instanceof window.HTMLElement).find(e=>e.matches(l)),clearTimeout(this.closeTimeout),this.close())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;f=[v(),o()],e(this,null,f,{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},p,h),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[S,a(A)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}open(){if(!(this.state!==`closed`&&this.state!==`closing`||!this.overlay||!this.dispatchBeforeOpenEvent())){for(let e of j)(e.state===`opened`||e.state===`opening`)&&e.close();this.showPopover?.(),this.state=`opening`,this.inert=!0,this._setPopoverPosition(),this._attachWindowEvents(),this._escapableOverlayController.connect(),this._nextFocusedElement=void 0,this._skipCloseFocus=!1,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening()}}close(e){(this.state===`opened`||this.state===`opening`)&&(this._popoverCloseElement=e,this.dispatchBeforeCloseEvent({closeTarget:e??null})&&(this.state=`closing`,this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()))}_isZeroAnimationDuration(){return x(this,`--sbb-popover-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.overlay&&(this._resizeController.unobserve(this.overlay),this.overlay.firstElementChild?.scrollTo(0,0)),this.removeAttribute(`tabindex`),this._skipCloseFocus||(this._nextFocusedElement||this._triggerElement)?.focus(),this._escapableOverlayController.disconnect(),this._openStateController?.abort(),this._focusTrapController.enabled=!1,this.dispatchCloseEvent({closeTarget:this._popoverCloseElement??null})}_handleOpening(){this.state=`opened`,this.inert=!1,this._setPopoverFocus(),this._focusTrapController.enabled=!0,this.overlay&&this._resizeController.observe(this.overlay),this.dispatchOpenEvent()}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.state=`closed`,j.add(this),this.hasUpdated&&this._configureTrigger()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&(!e||e===`trigger`||e===`hoverTrigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openStateController?.abort(),j.delete(this),this._blurTimeout&&clearTimeout(this._blurTimeout)}_configureTrigger(){if(!i){if(this.hydrationRequired){this.hydrationComplete.then(()=>this._configureTrigger());return}this.configureTrigger(this._triggerElement??null)}}configureTrigger(e){this._triggerAbortController?.abort(),w(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(D(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this.registerTriggerListeners(this._triggerAbortController.signal))}registerTriggerListeners(e){this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:e})}_attachWindowEvents(){this._openStateController=new AbortController,document.addEventListener(`scroll`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal}),window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._openStateController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._openStateController.signal})}_closeOnSbbPopoverCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(`sbb-popover-close`)||e.localName===`sbb-popover-close-button`)&&!e.hasAttribute(`disabled`));t&&(clearTimeout(this.closeTimeout),this.close(t))}_onPopoverAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_setPopoverFocus(){!this._focusTrapController.focusInitialElement()&&this._openStateController&&(this.setAttribute(`tabindex`,`0`),this.focus({preventScroll:!0}),this.addEventListener(`blur`,e=>{this._blurTimeout=setTimeout(()=>{if(document.visibilityState!==`hidden`){if(this.removeAttribute(`tabindex`),this.contains(e.relatedTarget)||e.relatedTarget===this.trigger)return;(this.state===`opened`||this.state===`opening`)&&(this._skipCloseFocus=!0),this.close()}})},{signal:this._openStateController.signal}))}_setPopoverPosition(){if(!this.overlay||!this._triggerElement)return;let e=g(this.overlay,this._triggerElement,this.shadowRoot.querySelector(`.sbb-popover__container`),{verticalOffset:16,horizontalOffset:32,centered:!0,responsiveHeight:!0}),t=e.alignment.vertical;for(let e of[`above`,`below`])this.toggleState(`position-${e}`,e===t);let n=this.overlay.offsetWidth,r=document.documentElement.clientWidth,i=Math.max(2,Math.min(e.left,r-n-2)),a=this._triggerElement.getBoundingClientRect(),o=parseFloat(getComputedStyle(this.overlay).borderTopLeftRadius)||0,s=a.left-i+a.width/2-16/2,c=Math.max(o,Math.min(s,n-o-16));this.style.setProperty(`--_sbb-popover-position-x`,`${i}px`),this.style.setProperty(`--_sbb-popover-position-y`,`${e.top}px`),this.style.setProperty(`--_sbb-popover-arrow-position-x`,`${c}px`),this.style.setProperty(`--_sbb-popover-max-height`,e.maxHeight)}dispatchBeforeCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new M(`beforeclose`,{closeTarget:t,cancelable:!0}))}dispatchCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new M(`close`,{closeTarget:t,cancelable:!1}))}render(){return r`
       <div class="sbb-popover__container">
         <div
           @animationend=${this._onPopoverAnimationEnd}