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

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/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.1785767199",
   "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/3bfbb78990f16bd4d5dcb561f5a9cd47004aec49"
   ],
   "type": "module",
   "exports": {