@sbb-esta/lyne-elements 1.12.1 → 1.14.0

package/header/common/header-action-common.d.ts

@@ -3,8 +3,8 @@ import { SbbHorizontalFrom } from '../../core/interfaces.js';
 import { AbstractConstructor } from '../../core/mixins.js';
 import { SbbIconNameMixinType } from '../../icon.js';
 export declare class SbbHeaderActionCommonElementMixinType implements Partial<SbbIconNameMixinType> {
-    expandFrom: SbbHorizontalFrom;
-    iconName?: string;
+    accessor expandFrom: SbbHorizontalFrom;
+    accessor iconName: string;
 }
 export declare const SbbHeaderActionCommonElementMixin: <T extends AbstractConstructor<SbbActionBaseElement>>(superClass: T) => AbstractConstructor<SbbHeaderActionCommonElementMixinType> & T;
 //# sourceMappingURL=header-action-common.d.ts.map

package/header/common/header-action-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-action-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/common/header-action-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAI5E,MAAM,CAAC,OAAO,OAAO,qCACnB,YAAW,OAAO,CAAC,oBAAoB,CAAC;IAEjC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC1B;AAGD,eAAO,MAAM,iCAAiC,GAC5C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,qCAAqC,CAAC,GAAG,CA4B/D,CAAC"}
+{"version":3,"file":"header-action-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/common/header-action-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAI5E,MAAM,CAAC,OAAO,OAAO,qCACnB,YAAW,OAAO,CAAC,oBAAoB,CAAC;IAExC,SAAgB,UAAU,EAAE,iBAAiB,CAAC;IAC9C,SAAgB,QAAQ,EAAE,MAAM,CAAC;CAClC;AAGD,eAAO,MAAM,iCAAiC,GAC5C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,qCAAqC,CAAC,GAAG,CA4B/D,CAAC"}

package/header/common.js

@@ -1,20 +1,35 @@
-import { property as n } from "lit/decorators.js";
-import { html as s } from "lit/static-html.js";
-import { SbbIconNameMixin as d } from "../icon.js";
-import { css as b } from "lit";
-const h = b`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-black);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);--_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-icon-shift: .125rem;--sbb-header-first-item-margin-inline-start: calc( var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift) )}@media (forced-colors: active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText}}@media (any-hover: hover){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-background-color: var(--sbb-color-milk);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}@media (forced-colors: active){:host([role=button]){--sbb-header-action-color: ButtonText}}:is(.sbb-header-button,.sbb-header-link){font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:is(.sbb-header-button,.sbb-header-link):before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media (forced-colors: active){:is(.sbb-header-button,.sbb-header-link):before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}@media (max-width: -.0625rem){:host([expand-from=zero]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`;
-var c = Object.defineProperty, l = (t, e, i, p) => {
-  for (var a = void 0, r = t.length - 1, o; r >= 0; r--)
-    (o = t[r]) && (a = o(e, i, a) || a);
-  return a && c(e, i, a), a;
+var c = (e) => {
+  throw TypeError(e);
 };
-const v = (t) => {
-  const i = class i extends d(t) {
+var h = (e, i, a) => i.has(e) || c("Cannot " + a);
+var l = (e, i, a) => (h(e, i, "read from private field"), a ? a.call(e) : i.get(e)), m = (e, i, a) => i.has(e) ? c("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, a), p = (e, i, a, t) => (h(e, i, "write to private field"), t ? t.call(e, a) : i.set(e, a), a);
+import { __esDecorate as g, __runInitializers as v } from "tslib";
+import { property as x } from "lit/decorators.js";
+import { html as u } from "lit/static-html.js";
+import { SbbIconNameMixin as w } from "../icon.js";
+import { css as _ } from "lit";
+const y = _`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-black);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);--sbb-header-action-active-border-width: var(--sbb-border-width-2x);--sbb-header-action-active-border-color: var(--sbb-color-black);--sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);--sbb-header-action-active-border-scale: 0;--_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-icon-shift: .125rem;--sbb-header-first-item-margin-inline-start: calc( var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift) )}@media (forced-colors: active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText;--sbb-header-action-active-border-width: 0}}@media (any-hover: hover){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-background-color: var(--sbb-color-milk);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}:host(.sbb-active){--sbb-header-action-active-border-scale: 1}@media (forced-colors: active){:host(.sbb-active){--sbb-header-action-border-color: Highlight}}@media (forced-colors: active){:host([role=button]){--sbb-header-action-color: ButtonText}}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media (forced-colors: active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-action-base:after{content:"";position:absolute;border-bottom:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}@media (max-width: -.0625rem){:host([expand-from=zero]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`, j = (e) => (() => {
+  var o, r;
+  let a = w(e), t, b = [], d = [];
+  return r = class extends a {
     constructor() {
-      super(...arguments), this.expandFrom = "medium";
+      super(...arguments);
+      m(this, o, v(this, b, "medium"));
+      v(this, d);
+    }
+    /**
+     * Used to set the minimum breakpoint from which the text is displayed.
+     * E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra,
+     * and hidden for all the others.
+     */
+    get expandFrom() {
+      return l(this, o);
+    }
+    set expandFrom(n) {
+      p(this, o, n);
     }
     renderTemplate() {
-      return s`
+      return u`
         <span class="sbb-header-action__wrapper">
           <span class="sbb-header-action__icon"> ${super.renderIconSlot()} </span>
           <span class="sbb-header-action__text">
@@ -23,13 +38,13 @@ const v = (t) => {
         </span>
       `;
     }
-  };
-  i.styles = h;
-  let e = i;
-  return l([
-    n({ attribute: "expand-from", reflect: !0 })
-  ], e.prototype, "expandFrom"), e;
-};
+  }, o = new WeakMap(), (() => {
+    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    t = [x({ attribute: "expand-from", reflect: !0 })], g(r, null, t, { kind: "accessor", name: "expandFrom", static: !1, private: !1, access: { has: (s) => "expandFrom" in s, get: (s) => s.expandFrom, set: (s, f) => {
+      s.expandFrom = f;
+    } }, metadata: n }, b, d), n && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
+  })(), r.styles = y, r;
+})();
 export {
-  v as SbbHeaderActionCommonElementMixin
+  j as SbbHeaderActionCommonElementMixin
 };

package/header/header/header.d.ts

@@ -14,16 +14,16 @@ export declare class SbbHeaderElement extends SbbHeaderElement_base {
      * Whether to allow the header content to stretch to full width.
      * By default, the content has the appropriate page size.
      */
-    expanded: boolean;
+    accessor expanded: boolean;
     /** The element's id or the element on which the scroll listener is attached. */
     set scrollOrigin(value: string | HTMLElement | Document);
     get scrollOrigin(): string | HTMLElement | Document;
     private _scrollOrigin;
     /** Whether the header should hide and show on scroll. */
-    hideOnScroll: boolean;
+    accessor hideOnScroll: boolean;
     /** Size of the header. */
-    size: 'm' | 's';
-    private _headerOnTop;
+    accessor size: 'm' | 's';
+    private accessor _headerOnTop;
     private _scrollElement;
     private _scrollEventsController;
     private _scrollFunction;

package/header/header/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAS3F,OAAO,eAAe,CAAC;;AAIvB;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,qBAA6B;IACjE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,gFAAgF;IAChF,IACW,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,EAI7D;IACD,IAAW,YAAY,IAAI,MAAM,GAAG,WAAW,GAAG,QAAQ,CAEzD;IACD,OAAO,CAAC,aAAa,CAAiE;IAEtF,yDAAyD;IACuB,YAAY,UACpF;IAER,0BAA0B;IACU,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAEjD,OAAO,CAAC,YAAY,CAAQ;IAErC,OAAO,CAAC,cAAc,CAA4C;IAClE,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,eAAe,CAA2B;IAClD,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,mBAAmB;IAY3B,gGAAgG;IAChF,iBAAiB,IAAI,IAAI;IAMzC,2DAA2D;IAC3C,oBAAoB,IAAI,IAAI;IAK5C,sHAAsH;IACtH,OAAO,CAAC,2BAA2B;IAWnC,wDAAwD;IACxD,OAAO,CAAC,kBAAkB;IAI1B,2DAA2D;IAC3D,OAAO,CAAC,yBAAyB;IAOjC;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IA8CvB,uEAAuE;IACvE,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;cAgBP,MAAM,IAAI,cAAc;CAc5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAU3F,OAAO,eAAe,CAAC;;AAIvB;;;;;;;GAOG;AACH,qBAEM,gBAAiB,SAAQ,qBAA6B;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,gFAAgF;IAChF,IACW,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,EAI7D;IACD,IAAW,YAAY,IAAI,MAAM,GAAG,WAAW,GAAG,QAAQ,CAEzD;IACD,OAAO,CAAC,aAAa,CAAiE;IAEtF,yDAAyD;IACzD,SAEgB,YAAY,EAAE,OAAO,CAAS;IAE9C,0BAA0B;IAC1B,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAQ;IAE9C,OAAO,CAAC,cAAc,CAA4C;IAClE,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,eAAe,CAA2B;IAClD,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,mBAAmB;IAY3B,gGAAgG;IAChF,iBAAiB,IAAI,IAAI;IAMzC,2DAA2D;IAC3C,oBAAoB,IAAI,IAAI;IAK5C,sHAAsH;IACtH,OAAO,CAAC,2BAA2B;IAWnC,wDAAwD;IACxD,OAAO,CAAC,kBAAkB;IAI1B,2DAA2D;IAC3D,OAAO,CAAC,yBAAyB;IAOjC;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IA8CvB,uEAAuE;IACvE,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;cAgBP,MAAM,IAAI,cAAc;CAc5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/header/header-button/header-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-button/header-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAGnE;;;;;GAKG;AACH,qBACa,sBAAuB,SAAQ,2BAE3C;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-button/header-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAGnE;;;;;GAKG;AACH,qBAEM,sBAAuB,SAAQ,2BAAuD;CAAG;AAE/F,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/header/header-button.js

@@ -1,18 +1,16 @@
-import { customElement as l } from "lit/decorators.js";
-import { SbbButtonBaseElement as p } from "../core/base-elements.js";
-import { SbbHeaderActionCommonElementMixin as f } from "./common.js";
-var a = Object.defineProperty, i = Object.getOwnPropertyDescriptor, u = (b, t, o, r) => {
-  for (var e = r > 1 ? void 0 : r ? i(t, o) : t, m = b.length - 1, n; m >= 0; m--)
-    (n = b[m]) && (e = (r ? n(t, o, e) : n(e)) || e);
-  return r && e && a(t, o, e), e;
-};
-let s = class extends f(
-  p
-) {
-};
-s = u([
-  l("sbb-header-button")
-], s);
+import { __esDecorate as m, __runInitializers as n } from "tslib";
+import { customElement as i } from "lit/decorators.js";
+import { SbbButtonBaseElement as c } from "../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as u } from "./common.js";
+let p = (() => {
+  var t;
+  let s = [i("sbb-header-button")], l, r = [], e, o = u(c);
+  return t = class extends o {
+  }, e = t, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    m(null, l = { value: e }, s, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), n(e, r);
+  })(), e;
+})();
 export {
-  s as SbbHeaderButtonElement
+  p as SbbHeaderButtonElement
 };

package/header/header-link/header-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-link.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-link/header-link.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAGjE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,yBAAqD;CAAG;AAElG,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"header-link.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-link/header-link.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAGjE;;;;;GAKG;AACH,qBAEM,oBAAqB,SAAQ,yBAAqD;CAAG;AAE3F,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/header/header-link.js

@@ -1,16 +1,16 @@
-import { customElement as s } from "lit/decorators.js";
-import { SbbLinkBaseElement as i } from "../core/base-elements.js";
-import { SbbHeaderActionCommonElementMixin as p } from "./common.js";
-var f = Object.defineProperty, a = Object.getOwnPropertyDescriptor, v = (b, r, m, t) => {
-  for (var e = t > 1 ? void 0 : t ? a(r, m) : r, n = b.length - 1, o; n >= 0; n--)
-    (o = b[n]) && (e = (t ? o(r, m, e) : o(e)) || e);
-  return t && e && f(r, m, e), e;
-};
-let l = class extends p(i) {
-};
-l = v([
-  s("sbb-header-link")
-], l);
+import { __esDecorate as m, __runInitializers as n } from "tslib";
+import { customElement as o } from "lit/decorators.js";
+import { SbbLinkBaseElement as c } from "../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as b } from "./common.js";
+let p = (() => {
+  var t;
+  let s = [o("sbb-header-link")], l, r = [], e, i = b(c);
+  return t = class extends i {
+  }, e = t, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    m(null, l = { value: e }, s, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), n(e, r);
+  })(), e;
+})();
 export {
-  l as SbbHeaderLinkElement
+  p as SbbHeaderLinkElement
 };

package/header/header.js

@@ -1,91 +1,125 @@
-import { css as h, LitElement as c, isServer as b, html as f } from "lit";
-import { property as n, state as u, customElement as v } from "lit/decorators.js";
-import { SbbFocusVisibleWithinController as m } from "../core/a11y.js";
-import { findReferencedElement as p } from "../core/dom.js";
-import { SbbHydrationMixin as g } from "../core/mixins.js";
-import "../logo.js";
-const _ = h`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-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][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-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][data-fixed][data-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-color-white);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)}:host(:is([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@media (forced-colors: active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{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-spacing-responsive-xxs)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=logo]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`;
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, t, s, r) => {
-  for (var i = r > 1 ? void 0 : r ? x(t, s) : t, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (i = (r ? d(t, s, i) : d(i)) || i);
-  return r && i && w(t, s, i), i;
+var H = (s) => {
+  throw TypeError(s);
 };
-const y = "[aria-controls][aria-expanded='true']";
-let o = class extends g(c) {
-  constructor() {
-    super(...arguments), this.expanded = !1, this._scrollOrigin = b ? null : document, this.hideOnScroll = !1, this.size = "m", this._headerOnTop = !0, this._lastScroll = 0;
-  }
-  set scrollOrigin(e) {
-    const t = this._scrollOrigin;
-    this._scrollOrigin = e, this._updateScrollOrigin(this._scrollOrigin, t);
-  }
-  get scrollOrigin() {
-    return this._scrollOrigin;
-  }
-  _updateScrollOrigin(e, t) {
-    if (e !== t) {
-      this._setListenerOnScrollElement(e);
-      const s = this._getCurrentScrollProperty("scrollTop");
-      this._lastScroll = s <= 0 ? 0 : s;
-    }
-  }
-  /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
-  connectedCallback() {
-    super.connectedCallback(), this._setListenerOnScrollElement(this.scrollOrigin), new m(this);
-  }
-  /** Removes the scroll listener, if previously attached. */
-  disconnectedCallback() {
-    var e;
-    super.disconnectedCallback(), (e = this._scrollEventsController) == null || e.abort();
-  }
-  /** Sets the value of `_scrollElement` and `_scrollFunction` and possibly adds the function on the correct element. */
-  _setListenerOnScrollElement(e) {
-    var t, s;
-    (t = this._scrollEventsController) == null || t.abort(), this._scrollEventsController = new AbortController(), this._scrollElement = p(e) || (b ? null : document), this._scrollFunction = this._getScrollFunction.bind(this), (s = this._scrollElement) == null || s.addEventListener("scroll", this._scrollFunction, {
-      passive: !0,
-      signal: this._scrollEventsController.signal
-    });
-  }
-  /** Returns the correct function to attach on scroll. */
-  _getScrollFunction() {
-    return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
-  }
-  /** Returns the requested property of the scrollContext. */
-  _getCurrentScrollProperty(e) {
-    var t;
-    return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : ((t = this._scrollElement) == null ? void 0 : t[e]) || 0;
-  }
-  /**
-   * Sets the correct value for `scrollTop`, then:
-   * - apply the shadow if the element/document has been scrolled down;
-   * - hides the header, remove the shadow and possibly close any open menu on the header if it is not visible anymore;
-   * - shows the header and re-apply the shadow if the element/document has been scrolled up.
-   */
-  _scrollListener() {
-    const e = this._getCurrentScrollProperty("scrollTop");
-    this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - e <= 0 || (this.toggleAttribute("data-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 ? ["data-shadow", "data-visible"].forEach((t) => this.removeAttribute(t)) : ["data-fixed", "data-shadow", "data-animated", "data-visible"].forEach(
-      (t) => this.toggleAttribute(t, !0)
-    )) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach(
-      (t) => this.removeAttribute(t)
-    )), this._lastScroll = e <= 0 ? 0 : e);
-  }
-  /** Apply the shadow if the element/document has been scrolled down. */
-  _scrollShadowListener() {
-    this.toggleAttribute("data-shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
-  }
-  _closeOpenOverlays() {
-    if (this.hasAttribute("data-has-visible-focus-within"))
-      return;
-    const e = Array.from(
-      this.querySelectorAll(y)
-    );
-    for (const t of e) {
-      const s = t.getAttribute("aria-controls"), r = document.getElementById(s);
-      typeof (r == null ? void 0 : r.close) == "function" && r.close();
-    }
-  }
-  render() {
-    return f`
+var D = (s, a, r) => a.has(s) || H("Cannot " + r);
+var f = (s, a, r) => (D(s, a, "read from private field"), r ? r.call(s) : a.get(s)), _ = (s, a, r) => a.has(s) ? H("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, r), d = (s, a, r, l) => (D(s, a, "write to private field"), l ? l.call(s, r) : a.set(s, r), r);
+import { __runInitializers as n, __esDecorate as u } from "tslib";
+import { css as B, LitElement as M, isServer as F, html as N } from "lit";
+import { customElement as R, property as g, state as U } from "lit/decorators.js";
+import { SbbFocusVisibleWithinController as Z } from "../core/a11y.js";
+import { forceType as j } from "../core/decorators.js";
+import { findReferencedElement as q } from "../core/dom.js";
+import { SbbHydrationMixin as Q } from "../core/mixins.js";
+import "../logo.js";
+const V = B`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-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][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-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][data-fixed][data-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-color-white);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)}:host(:is([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@media (forced-colors: active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{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-spacing-responsive-xxs)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=logo]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`, W = "[aria-controls][aria-expanded='true']";
+let ae = (() => {
+  var h, b, c, m, o;
+  let s = [R("sbb-header")], a, r = [], l, v = Q(M), x = [], w, O = [], S = [], y, E, z = [], k = [], T, C = [], A = [], I, L = [], P = [];
+  return o = class extends v {
+    constructor() {
+      super(...arguments);
+      _(this, h);
+      _(this, b);
+      _(this, c);
+      _(this, m);
+      d(this, h, (n(this, x), n(this, O, !1))), this._scrollOrigin = (n(this, S), F ? null : document), d(this, b, n(this, z, !1)), d(this, c, (n(this, k), n(this, C, "m"))), d(this, m, (n(this, A), n(this, L, !0))), this._scrollElement = n(this, P), this._lastScroll = 0;
+    }
+    /**
+     * Whether to allow the header content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    get expanded() {
+      return f(this, h);
+    }
+    set expanded(t) {
+      d(this, h, t);
+    }
+    /** The element's id or the element on which the scroll listener is attached. */
+    set scrollOrigin(t) {
+      const e = this._scrollOrigin;
+      this._scrollOrigin = t, this._updateScrollOrigin(this._scrollOrigin, e);
+    }
+    get scrollOrigin() {
+      return this._scrollOrigin;
+    }
+    /** Whether the header should hide and show on scroll. */
+    get hideOnScroll() {
+      return f(this, b);
+    }
+    set hideOnScroll(t) {
+      d(this, b, t);
+    }
+    /** Size of the header. */
+    get size() {
+      return f(this, c);
+    }
+    set size(t) {
+      d(this, c, t);
+    }
+    get _headerOnTop() {
+      return f(this, m);
+    }
+    set _headerOnTop(t) {
+      d(this, m, t);
+    }
+    _updateScrollOrigin(t, e) {
+      if (t !== e) {
+        this._setListenerOnScrollElement(t);
+        const i = this._getCurrentScrollProperty("scrollTop");
+        this._lastScroll = i <= 0 ? 0 : i;
+      }
+    }
+    /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
+    connectedCallback() {
+      super.connectedCallback(), this._setListenerOnScrollElement(this.scrollOrigin), new Z(this);
+    }
+    /** Removes the scroll listener, if previously attached. */
+    disconnectedCallback() {
+      var t;
+      super.disconnectedCallback(), (t = this._scrollEventsController) == null || t.abort();
+    }
+    /** Sets the value of `_scrollElement` and `_scrollFunction` and possibly adds the function on the correct element. */
+    _setListenerOnScrollElement(t) {
+      var e, i;
+      (e = this._scrollEventsController) == null || e.abort(), this._scrollEventsController = new AbortController(), this._scrollElement = q(t) || (F ? null : document), this._scrollFunction = this._getScrollFunction.bind(this), (i = this._scrollElement) == null || i.addEventListener("scroll", this._scrollFunction, {
+        passive: !0,
+        signal: this._scrollEventsController.signal
+      });
+    }
+    /** Returns the correct function to attach on scroll. */
+    _getScrollFunction() {
+      return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
+    }
+    /** Returns the requested property of the scrollContext. */
+    _getCurrentScrollProperty(t) {
+      var e;
+      return this._scrollElement instanceof Document ? this._scrollElement.documentElement[t] || this._scrollElement.body[t] : ((e = this._scrollElement) == null ? void 0 : e[t]) || 0;
+    }
+    /**
+     * Sets the correct value for `scrollTop`, then:
+     * - apply the shadow if the element/document has been scrolled down;
+     * - hides the header, remove the shadow and possibly close any open menu on the header if it is not visible anymore;
+     * - shows the header and re-apply the shadow if the element/document has been scrolled up.
+     */
+    _scrollListener() {
+      const t = this._getCurrentScrollProperty("scrollTop");
+      this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - t <= 0 || (this.toggleAttribute("data-shadow", t !== 0), t > this.offsetHeight && t > 0 && this._lastScroll < t && this._closeOpenOverlays(), t > this.offsetHeight * 2 ? (this._headerOnTop = !1, t > 0 && this._lastScroll < t ? ["data-shadow", "data-visible"].forEach((e) => this.removeAttribute(e)) : ["data-fixed", "data-shadow", "data-animated", "data-visible"].forEach((e) => this.toggleAttribute(e, !0))) : (t === 0 && (this._headerOnTop = !0), this._headerOnTop && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach((e) => this.removeAttribute(e))), this._lastScroll = t <= 0 ? 0 : t);
+    }
+    /** Apply the shadow if the element/document has been scrolled down. */
+    _scrollShadowListener() {
+      this.toggleAttribute("data-shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
+    }
+    _closeOpenOverlays() {
+      if (this.hasAttribute("data-has-visible-focus-within"))
+        return;
+      const t = Array.from(this.querySelectorAll(W));
+      for (const e of t) {
+        const i = e.getAttribute("aria-controls"), p = document.getElementById(i);
+        typeof (p == null ? void 0 : p.close) == "function" && p.close();
+      }
+    }
+    render() {
+      return N`
       <header class="sbb-header">
         <div class="sbb-header__wrapper">
           <slot></slot>
@@ -97,27 +131,22 @@ let o = class extends g(c) {
         </div>
       </header>
     `;
-  }
-};
-o.styles = _;
-a([
-  n({ reflect: !0, type: Boolean })
-], o.prototype, "expanded", 2);
-a([
-  n({ attribute: "scroll-origin" })
-], o.prototype, "scrollOrigin", 1);
-a([
-  n({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })
-], o.prototype, "hideOnScroll", 2);
-a([
-  n({ reflect: !0 })
-], o.prototype, "size", 2);
-a([
-  u()
-], o.prototype, "_headerOnTop", 2);
-o = a([
-  v("sbb-header")
-], o);
+    }
+  }, h = new WeakMap(), b = new WeakMap(), c = new WeakMap(), m = new WeakMap(), l = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    w = [j(), g({ reflect: !0, type: Boolean })], y = [g({ attribute: "scroll-origin" })], E = [j(), g({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })], T = [g({ reflect: !0 })], I = [U()], u(o, null, w, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, i) => {
+      e.expanded = i;
+    } }, metadata: t }, O, S), u(o, null, y, { kind: "setter", name: "scrollOrigin", static: !1, private: !1, access: { has: (e) => "scrollOrigin" in e, set: (e, i) => {
+      e.scrollOrigin = i;
+    } }, metadata: t }, null, x), u(o, null, E, { kind: "accessor", name: "hideOnScroll", static: !1, private: !1, access: { has: (e) => "hideOnScroll" in e, get: (e) => e.hideOnScroll, set: (e, i) => {
+      e.hideOnScroll = i;
+    } }, metadata: t }, z, k), u(o, null, T, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
+      e.size = i;
+    } }, metadata: t }, C, A), u(o, null, I, { kind: "accessor", name: "_headerOnTop", static: !1, private: !1, access: { has: (e) => "_headerOnTop" in e, get: (e) => e._headerOnTop, set: (e, i) => {
+      e._headerOnTop = i;
+    } }, metadata: t }, L, P), u(null, a = { value: l }, s, { kind: "class", name: l.name, metadata: t }, null, r), l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = V, n(l, r), l;
+})();
 export {
-  o as SbbHeaderElement
+  ae as SbbHeaderElement
 };

package/icon/icon-base.d.ts

@@ -5,19 +5,18 @@ import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit'
  */
 export declare abstract class SbbIconBase extends LitElement {
     static styles: CSSResultGroup;
-    private static readonly _defaultNamespace;
-    private _svgNamespace;
+    private accessor _svgNamespace;
     /**
      * The icon svg content rendered on the page: <svg>...</svg>.
      */
-    private _svgIcon?;
+    private accessor _svgIcon;
     /**
      * When set to `true`, SVG content that is HTTP fetched will not be checked
      * if the response SVG content has any `<script>` elements, or any attributes
      * that start with `on`, such as `onclick`.
      * @default false
      */
-    noSanitize: boolean;
+    accessor noSanitize: boolean;
     protected loadSvgIcon(iconName: string): Promise<void>;
     protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
     private _splitIconName;

package/icon/icon-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-base.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAYvC;;;GAGG;AACH,8BAIsB,WAAY,SAAQ,UAAU;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAa;IAE7C,OAAO,CAAC,aAAa,CAAiC;IAE/D;;OAEG;IACM,OAAO,CAAC,QAAQ,CAAC,CAAuD;IAEjF;;;;;OAKG;IAC2D,UAAU,UAAS;cAEjE,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;cAkB5C,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAI9E,OAAO,CAAC,cAAc;cAgBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM3D,MAAM,IAAI,cAAc;CAS5C"}
+{"version":3,"file":"icon-base.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAcvC;;;GAGG;AACH,8BAKe,WAAY,SAAQ,UAAU;IAC3C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAE7C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAE3D;;OAEG;IACM,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAC3B;IAEP;;;;;OAKG;IACH,SAEgB,UAAU,EAAE,OAAO,CAAS;cAE5B,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;cAkB5C,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAI9E,OAAO,CAAC,cAAc;cAgBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM3D,MAAM,IAAI,cAAc;CAS5C"}

package/icon/icon-name-mixin.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult } from 'lit';
 import { AbstractConstructor } from '../core/mixins.js';
 export declare class SbbIconNameMixinType {
-    iconName?: string;
+    accessor iconName: string;
     protected renderIconSlot(classname?: string): TemplateResult;
 }
 /**

package/icon/icon-name-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-name-mixin.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-name-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,WAAW,CAAC;AAEnB,MAAM,CAAC,OAAO,OAAO,oBAAoB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc;CAC7D;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,cAC5D,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAqB9C,CAAC"}
+{"version":3,"file":"icon-name-mixin.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-name-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,WAAW,CAAC;AAEnB,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc;CAC7D;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,cAC5D,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAuB9C,CAAC"}

package/icon/icon.d.ts

@@ -15,14 +15,14 @@ export declare class SbbIconElement extends SbbIconBase {
      * If the namespace is missing, the default namespace "sbb" will be used.
      * E.g. `name` (will use "sbb" as namespace) or `namespace:name`.
      */
-    name: string;
+    accessor name: string;
     private _defaultAriaLabel;
     /**
      * The sbb-angular library has a sbb-icon component as well. In order to provide
      * compatibility with it (as some icons are used internally inside the other sbb-angular
      * components) we need to check whether the attribute svgicon is used.
      */
-    private _sbbAngularCompatibility;
+    private accessor _sbbAngularCompatibility;
     protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;

package/icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C;;;;OAIG;IACH,WAA2B,kBAAkB,IAAI,MAAM,EAAE,CAExD;IAED;;;;OAIG;IACiC,IAAI,EAAG,MAAM,CAAC;IAElD,OAAO,CAAC,iBAAiB,CAAM;IAE/B;;;;OAIG;IACM,OAAO,CAAC,wBAAwB,CAAS;cAEzB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQ3D,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBAEM,cAAe,SAAQ,WAAW;IACtC;;;;OAIG;IACH,WAA2B,kBAAkB,IAAI,MAAM,EAAE,CAExD;IAED;;;;OAIG;IACH,SAEgB,IAAI,EAAE,MAAM,CAAM;IAElC,OAAO,CAAC,iBAAiB,CAAM;IAE/B;;;;OAIG;IACM,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAAS;cAElC,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQ3D,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}