@sbb-esta/lyne-elements 5.0.2 → 5.2.0

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

@@ -1,8 +1,7 @@
-import { AbstractConstructor, SbbActionBaseElement } from '../../core.ts';
-declare const SbbHeaderActionCommonElementMixinType_base: AbstractConstructor<import('../../icon.pure.ts').SbbIconNameMixinType> & typeof SbbActionBaseElement;
+import { type AbstractConstructor, type SbbActionBaseElement } from '../../core.ts';
+declare const SbbHeaderActionCommonElementMixinType_base: AbstractConstructor<import("../../icon.pure.ts").SbbIconNameMixinType> & typeof SbbActionBaseElement;
 export declare class SbbHeaderActionCommonElementMixinType extends SbbHeaderActionCommonElementMixinType_base {
     accessor hideLabelBelow: 'small' | 'large' | 'ultra' | null;
 }
 export declare const SbbHeaderActionCommonElementMixin: <T extends AbstractConstructor<SbbActionBaseElement>>(superClass: T) => AbstractConstructor<SbbHeaderActionCommonElementMixinType> & T;
 export {};
-//# sourceMappingURL=header-action-common.d.ts.map

package/development/header/header/header.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyDeclaration, type PropertyValues, type TemplateResult } from 'lit';
 import { SbbElement } from '../../core.ts';
 /**
  * It displays a header section for the page.
@@ -70,4 +70,3 @@ declare global {
         'sbb-header': SbbHeaderElement;
     }
 }
-//# sourceMappingURL=header.component.d.ts.map

package/development/header/header-button/header-button.component.d.ts

@@ -1,5 +1,5 @@
 import { SbbButtonBaseElement } from '../../core.ts';
-declare const SbbHeaderButtonElement_base: import('../../core.ts').AbstractConstructor<import('../common/header-action-common.ts').SbbHeaderActionCommonElementMixinType> & typeof SbbButtonBaseElement;
+declare const SbbHeaderButtonElement_base: import("../../core.ts").AbstractConstructor<import("../common/header-action-common.ts").SbbHeaderActionCommonElementMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a button element that can be used in the `sbb-header` component.
  *
@@ -15,4 +15,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=header-button.component.d.ts.map

package/development/header/header-environment/header-environment.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 import { SbbElement } from '../../core.ts';
 /**
  * It displays a ribbon inside the header to indicate the current environment.
@@ -21,4 +21,3 @@ declare global {
         'sbb-header-environment': SbbHeaderEnvironmentElement;
     }
 }
-//# sourceMappingURL=header-environment.component.d.ts.map

package/development/header/header-link/header-link.component.d.ts

@@ -1,5 +1,5 @@
 import { SbbLinkBaseElement } from '../../core.ts';
-declare const SbbHeaderLinkElement_base: import('../../core.ts').AbstractConstructor<import('../common/header-action-common.ts').SbbHeaderActionCommonElementMixinType> & typeof SbbLinkBaseElement;
+declare const SbbHeaderLinkElement_base: import("../../core.ts").AbstractConstructor<import("../common/header-action-common.ts").SbbHeaderActionCommonElementMixinType> & typeof SbbLinkBaseElement;
 /**
  * It displays a link element that can be used in the `sbb-header` component.
  *
@@ -15,4 +15,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=header-link.component.d.ts.map

package/development/header.d.ts

@@ -1,2 +1 @@
 export * from './header.pure.ts';
-//# sourceMappingURL=header.d.ts.map

package/development/header.js

@@ -1,16 +1,12 @@
-import { t as SbbHeaderActionCommonElementMixin } from "./header-action-common-DX2ejpAL.js";
-import { SbbHeaderButtonElement } from "./header/header-button/header-button.component.js";
-import { t as SbbHeaderEnvironmentElement } from "./header-environment.component--4YEZyKq.js";
-import { SbbHeaderLinkElement } from "./header/header-link/header-link.component.js";
-import { t as SbbHeaderElement } from "./header.component-FVw_5NRT.js";
-import "./header.pure.js";
+import { SbbHeaderButtonElement, SbbHeaderElement, SbbHeaderEnvironmentElement, SbbHeaderLinkElement } from "./header.pure.js";
+
+export * from "./header.pure.js"
+
 //#region src/elements/header.ts
 /** @entrypoint */
 SbbHeaderElement.define();
 SbbHeaderButtonElement.define();
 SbbHeaderEnvironmentElement.define();
 SbbHeaderLinkElement.define();
-//#endregion
-export { SbbHeaderActionCommonElementMixin, SbbHeaderButtonElement, SbbHeaderElement, SbbHeaderEnvironmentElement, SbbHeaderLinkElement };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9oZWFkZXIudHMiXSwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBlbnRyeXBvaW50ICovXG5pbXBvcnQge1xuICBTYmJIZWFkZXJCdXR0b25FbGVtZW50LFxuICBTYmJIZWFkZXJFbGVtZW50LFxuICBTYmJIZWFkZXJFbnZpcm9ubWVudEVsZW1lbnQsXG4gIFNiYkhlYWRlckxpbmtFbGVtZW50LFxufSBmcm9tICcuL2hlYWRlci5wdXJlLnRzJztcblxuZXhwb3J0ICogZnJvbSAnLi9oZWFkZXIucHVyZS50cyc7XG5cblNiYkhlYWRlckVsZW1lbnQuZGVmaW5lKCk7XG5TYmJIZWFkZXJCdXR0b25FbGVtZW50LmRlZmluZSgpO1xuU2JiSGVhZGVyRW52aXJvbm1lbnRFbGVtZW50LmRlZmluZSgpO1xuU2JiSGVhZGVyTGlua0VsZW1lbnQuZGVmaW5lKCk7XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBVUEsaUJBQWlCLE9BQU07QUFDdkIsdUJBQXVCLE9BQU07QUFDN0IsNEJBQTRCLE9BQU07QUFDbEMscUJBQXFCLE9BQU0ifQ==
+//#endregion

package/development/header.pure.d.ts

@@ -4,4 +4,3 @@ export * from './header/header-button/header-button.component.ts';
 export * from './header/header-environment/header-environment.component.ts';
 export * from './header/header-link/header-link.component.ts';
 export * from './header/header/header.component.ts';
-//# sourceMappingURL=header.pure.d.ts.map

package/development/header.pure.js

@@ -1,6 +1,495 @@
-import { t as SbbHeaderActionCommonElementMixin } from "./header-action-common-DX2ejpAL.js";
-import { SbbHeaderButtonElement } from "./header/header-button/header-button.component.js";
-import { t as SbbHeaderEnvironmentElement } from "./header-environment.component--4YEZyKq.js";
-import { SbbHeaderLinkElement } from "./header/header-link/header-link.component.js";
-import { t as SbbHeaderElement } from "./header.component-FVw_5NRT.js";
-export { SbbHeaderActionCommonElementMixin, SbbHeaderButtonElement, SbbHeaderElement, SbbHeaderEnvironmentElement, SbbHeaderLinkElement };
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, isServer, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { html as html$1 } from "lit/static-html.js";
+import { SbbButtonBaseElement, SbbElement, SbbFocusVisibleWithinController, SbbLinkBaseElement, SbbPropertyWatcherController, forceType, idReference, queueDomContentLoaded } from "./core.js";
+import { SbbIconNameMixin } from "./icon.pure.js";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+
+//#region src/elements/header/common/header-action.scss?inline
+var header_action_default = ":host {\n  --sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);\n  --sbb-header-action-min-width: var(--sbb-header-action-min-height);\n  --sbb-header-action-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  --_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));\n  --sbb-header-first-item-margin-inline-start: calc(\n    var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift)\n  );\n  display: inline-block;\n  outline: none !important;\n}\n\n@media (any-hover: hover) {\n  :host(:hover:not(:active, :is(:state(active),[state--active]))) {\n    --sbb-header-action-background-color: var(--sbb-background-color-3);\n    --sbb-header-action-translate-y: -0.0625rem;\n    --sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1);\n  }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n  :host(:hover:not(:active, :is(:state(active),[state--active]))) {\n    --sbb-header-action-border-color: Highlight;\n  }\n}\n:host(:is(:state(size-s),[state--size-s])) {\n  --sbb-header-action-min-height: var(--sbb-header-action-min-height-s);\n  --sbb-header-action-padding-inline: var(--sbb-header-action-padding-inline-s);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n  --sbb-header-action-min-height: var(--sbb-header-action-min-height-m);\n  --sbb-header-action-padding-inline: var(--sbb-header-action-padding-inline-m);\n}\n\n:host(:is(:active, :is(:state(active),[state--active]))) {\n  --sbb-header-action-background-color: var(--sbb-background-color-4);\n}\n@media (forced-colors: active) {\n  :host(:is(:active, :is(:state(active),[state--active]))) {\n    --sbb-header-action-border-color: Highlight;\n  }\n}\n\n:host(.sbb-active) {\n  --sbb-header-action-active-border-scale: 1;\n}\n@media (forced-colors: active) {\n  :host(.sbb-active) {\n    --sbb-header-action-border-color: Highlight;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(button),[state--button])) {\n    --sbb-header-action-color: ButtonText;\n  }\n}\n\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) {\n  --sbb-header-first-item-margin-inline-start: var(--_sbb-header-first-item-padding-shift);\n}\n\n.sbb-action-base {\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  color: var(--sbb-header-action-color);\n  text-decoration: none;\n  min-height: var(--sbb-header-action-min-height);\n  min-width: var(--sbb-header-action-min-width);\n  padding-inline: var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));\n  cursor: var(--sbb-cursor-pointer);\n  user-select: none;\n  outline: none;\n}\n.sbb-action-base::before {\n  position: absolute;\n  content: \"\";\n  inset: var(--sbb-header-action-background-inset, 0);\n  border-radius: var(--sbb-border-radius-infinity);\n  background-color: var(--sbb-header-action-background-color);\n  transition-duration: var(--sbb-header-action-transition-duration);\n  transition-timing-function: var(--sbb-header-action-transition-easing);\n  transition-property: inset, background-color;\n  border: var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color);\n}\n@media (forced-colors: active) {\n  .sbb-action-base::before {\n    border-width: var(--sbb-border-width-2x);\n  }\n}\n:host(:focus-visible) .sbb-action-base::before, .sbb-action-base: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}\n.sbb-action-base::after {\n  content: \"\";\n  position: absolute;\n  border-block-end: var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);\n  inset: auto 0 calc(-1 * var(--sbb-header-action-active-border-width));\n  margin-inline: var(--sbb-header-action-active-border-margin-inline);\n  scale: var(--sbb-header-action-active-border-scale, 0);\n  transition: scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);\n}\n\n.sbb-header-action__wrapper {\n  display: flex;\n  align-items: center;\n  gap: var(--sbb-header-action-gap);\n  white-space: nowrap;\n  transform: translateY(var(--sbb-header-action-translate-y, 0));\n  transition: transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);\n  will-change: transform;\n  max-width: 100%;\n}\n\n.sbb-header-action__icon {\n  --sbb-icon-svg-stroke-color: currentcolor;\n  --sbb-icon-svg-stroke-width: 1px;\n  min-width: var(--sbb-header-action-icon-dimension);\n  min-height: var(--sbb-header-action-icon-dimension);\n  line-height: 0;\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon {\n  display: none;\n}\n\n.sbb-header-action__text {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: block;\n  font-weight: bold;\n  line-height: var(--sbb-typo-line-height-text);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  font-size: var(--sbb-text-font-size-xs);\n}\n:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text {\n  display: none;\n}\n\n:host(:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n  --_sbb-header-first-item-padding-shift: calc(\n    -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n  );\n  --sbb-header-action-padding-inline-zero: 0;\n  --sbb-header-action-active-border-margin-inline: calc(\n    0.5 * (100% - var(--sbb-size-icon-ui-small))\n  );\n}\n:host(:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text {\n  border: 0;\n  clip-path: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n  display: flex;\n}\n\n@media (max-width: calc(37.4375rem)) {\n  :host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n    --_sbb-header-first-item-padding-shift: calc(\n      -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n    );\n    --sbb-header-action-padding-inline-zero: 0;\n    --sbb-header-action-active-border-margin-inline: calc(\n      0.5 * (100% - var(--sbb-size-icon-ui-small))\n    );\n  }\n  :host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n    border: 0;\n    clip-path: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n    display: flex;\n  }\n}\n\n@media (max-width: calc(63.9375rem)) {\n  :host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n    --_sbb-header-first-item-padding-shift: calc(\n      -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n    );\n    --sbb-header-action-padding-inline-zero: 0;\n    --sbb-header-action-active-border-margin-inline: calc(\n      0.5 * (100% - var(--sbb-size-icon-ui-small))\n    );\n  }\n  :host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n    border: 0;\n    clip-path: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n    display: flex;\n  }\n}\n\n@media (max-width: calc(89.9375rem)) {\n  :host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n    --_sbb-header-first-item-padding-shift: calc(\n      -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n    );\n    --sbb-header-action-padding-inline-zero: 0;\n    --sbb-header-action-active-border-margin-inline: calc(\n      0.5 * (100% - var(--sbb-size-icon-ui-small))\n    );\n  }\n  :host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n    border: 0;\n    clip-path: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n    display: flex;\n  }\n}\n\n@media (max-width: calc(98.9375rem)) {\n  :host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n    --_sbb-header-first-item-padding-shift: calc(\n      -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n    );\n    --sbb-header-action-padding-inline-zero: 0;\n    --sbb-header-action-active-border-margin-inline: calc(\n      0.5 * (100% - var(--sbb-size-icon-ui-small))\n    );\n  }\n  :host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n    border: 0;\n    clip-path: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n    display: flex;\n  }\n}\n\n::slotted([slot=icon]:is(sbb-image, img)) {\n  width: var(--sbb-header-action-icon-dimension);\n  height: var(--sbb-header-action-icon-dimension);\n  border-radius: var(--sbb-border-radius-infinity);\n}\n";
+
+//#endregion
+//#region src/elements/header/common/header-action-common.ts
+const SbbHeaderActionCommonElementMixin = (superClass) => {
+	return (() => {
+		let _classSuper = SbbIconNameMixin(superClass);
+		let _hideLabelBelow_decorators;
+		let _hideLabelBelow_initializers = [];
+		let _hideLabelBelow_extraInitializers = [];
+		return class SbbHeaderActionCommonElement extends _classSuper {
+			static {
+				const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+				_hideLabelBelow_decorators = [property({
+					attribute: "hide-label-below",
+					reflect: true
+				})];
+				__esDecorate(this, null, _hideLabelBelow_decorators, {
+					kind: "accessor",
+					name: "hideLabelBelow",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "hideLabelBelow" in obj,
+						get: (obj) => obj.hideLabelBelow,
+						set: (obj, value) => {
+							obj.hideLabelBelow = value;
+						}
+					},
+					metadata: _metadata
+				}, _hideLabelBelow_initializers, _hideLabelBelow_extraInitializers);
+				if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+					enumerable: true,
+					configurable: true,
+					writable: true,
+					value: _metadata
+				});
+			}
+			static {
+				this.styles = [unsafeCSS(header_action_default)];
+			}
+			#hideLabelBelow_accessor_storage;
+			/**
+			* Used to set the maximum breakpoint (not including) to which the text is displayed.
+			* E.g. if set to 'large', the text will be visible for breakpoints large and ultra,
+			* and hidden for all the others. Ignored if no icon is set.
+			*/
+			get hideLabelBelow() {
+				return this.#hideLabelBelow_accessor_storage;
+			}
+			set hideLabelBelow(value) {
+				this.#hideLabelBelow_accessor_storage = value;
+			}
+			constructor() {
+				super();
+				this.#hideLabelBelow_accessor_storage = __runInitializers(this, _hideLabelBelow_initializers, null);
+				this._previousSize = (__runInitializers(this, _hideLabelBelow_extraInitializers), null);
+				this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-header"), { size: (header) => {
+					if (this._previousSize) this.internals.states.delete(`size-${this._previousSize}`);
+					this._previousSize = header.size ?? null;
+					if (this._previousSize) this.internals.states.add(`size-${this._previousSize}`);
+				} }));
+			}
+			renderTemplate() {
+				return html$1`
+        <span class="sbb-header-action__wrapper">
+          <span class="sbb-header-action__icon"> ${super.renderIconSlot()} </span>
+          <span class="sbb-header-action__text">
+            <slot></slot>
+          </span>
+        </span>
+      `;
+			}
+		};
+	})();
+};
+
+//#endregion
+//#region src/elements/header/header-button/header-button.component.ts
+/**
+* It displays a button element that can be used in the `sbb-header` component.
+*
+* @slot icon - Slot used to render the button icon.
+* @slot - Use the unnamed slot to add content to the `sbb-header-button`.
+*/
+var SbbHeaderButtonElement = class extends SbbHeaderActionCommonElementMixin(SbbButtonBaseElement) {
+	static {
+		this.elementName = "sbb-header-button";
+	}
+};
+
+//#endregion
+//#region src/elements/header/header-environment/header-environment.scss?inline
+var header_environment_default = ":host {\n  position: absolute;\n  inset-inline-end: 0;\n  inset-block-start: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--sbb-text-font-size-xxs);\n  font-weight: bold;\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n\n:host(:dir(rtl)) {\n  --sbb-header-environment-rotate: -45deg;\n}\n\n:host(:is(:state(env-dev),[state--env-dev])) {\n  --sbb-header-environment-background-color: var(--sbb-color-orange);\n}\n\n:host(:is(:state(env-edu),[state--env-edu])) {\n  --sbb-header-environment-background-color: var(--sbb-color-green);\n}\n\n:host(:is(:state(env-int),[state--env-int])),\n:host(:is(:state(env-inte),[state--env-inte])) {\n  --sbb-header-environment-background-color: var(--sbb-color-granite);\n}\n\n:host(:is(:state(env-loc),[state--env-loc])) {\n  --sbb-header-environment-background-color: var(--sbb-color-pink);\n}\n\n:host(:is(:state(env-test),[state--env-test])) {\n  --sbb-header-environment-background-color: var(--sbb-color-sky);\n}\n\n:host::before {\n  content: \"\";\n  border-block-start: var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);\n  border-inline-start: var(--sbb-header-environment-size) solid transparent;\n}\n\n.sbb-header-environment__text {\n  position: absolute;\n  color: var(--sbb-header-environment-color);\n  rotate: var(--sbb-header-environment-rotate);\n  padding-block-end: var(--sbb-spacing-fixed-4x);\n}\n";
+
+//#endregion
+//#region src/elements/header/header-environment/header-environment.component.ts
+/**
+* It displays a ribbon inside the header to indicate the current environment.
+*
+* @slot - Use the unnamed slot to add the environment.
+*
+* @cssprop [--sbb-header-environment-background-color=var(sbb-color-granite)] - Can be used change the ribbon color.
+* @cssprop [--sbb-header-environment-color=var(sbb-color-white)] - Can be used change the text color.
+*/
+var SbbHeaderEnvironmentElement = class extends SbbElement {
+	static {
+		this.elementName = "sbb-header-environment";
+	}
+	static {
+		this.styles = [unsafeCSS(header_environment_default)];
+	}
+	constructor() {
+		super();
+		this._env = null;
+		this.addController(new MutationController(this, {
+			config: {
+				characterData: true,
+				subtree: true
+			},
+			callback: () => {
+				this._slottedTextChange();
+			}
+		}));
+	}
+	_slottedTextChange() {
+		if (this._env) this.internals.states.delete(`env-${this._env}`);
+		this._env = this.textContent?.trim() ?? "";
+		if (this._env) this.internals.states.add(`env-${this._env}`);
+	}
+	render() {
+		return html`
+      <span class="sbb-header-environment__text">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+
+//#endregion
+//#region src/elements/header/header-link/header-link.component.ts
+/**
+* It displays a link element that can be used in the `sbb-header` component.
+*
+* @slot icon - Slot used to render the link icon.
+* @slot - Use the unnamed slot to add content to the `sbb-header-link`.
+*/
+var SbbHeaderLinkElement = class extends SbbHeaderActionCommonElementMixin(SbbLinkBaseElement) {
+	static {
+		this.elementName = "sbb-header-link";
+	}
+};
+
+//#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";
+
+//#endregion
+//#region src/elements/header/header/header.component.ts
+const IS_MENU_OPENED_QUERY = "[aria-controls][aria-expanded='true']";
+/**
+* It displays a header section for the page.
+*
+* @slot - Use the unnamed slot to add actions, content and logo to the header.
+* @cssprop [--sbb-header-z-index=10] - Can be used to modify the z-index of the header.
+* @cssprop [--sbb-header-height=zero-small:var(--sbb-spacing-fixed-14x);large-ultra:var(--sbb-spacing-fixed-24x)] - Can be used to modify height of the header.
+* @cssprop [--sbb-header-padding-block-start:env(safe-area-inset-top, 0)] - Defines the header's padding-block-start. It defaults to the device's safe-area inset to prevent the header from being obscured by display cutouts or system UI elements. This variable must be set on the root document element (`<html>`) so that components relying on the header's height can calculate their layout correctly.
+* @cssprop [--sbb-header-vertical-spacing] - Readonly; sum of var(--sbb-header-height) and var(--sbb-header-padding-block-start) that can be used to manage spacing of absolute positioned elements that shouldn't overlap the header.
+*/
+let SbbHeaderElement = (() => {
+	let _classSuper = SbbElement;
+	let _expanded_decorators;
+	let _expanded_initializers = [];
+	let _expanded_extraInitializers = [];
+	let _scrollOrigin_decorators;
+	let _scrollOrigin_initializers = [];
+	let _scrollOrigin_extraInitializers = [];
+	let _hideOnScroll_decorators;
+	let _hideOnScroll_initializers = [];
+	let _hideOnScroll_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	let __headerOnTop_decorators;
+	let __headerOnTop_initializers = [];
+	let __headerOnTop_extraInitializers = [];
+	return class SbbHeaderElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_expanded_decorators = [forceType(), property({
+				reflect: true,
+				type: Boolean
+			})];
+			_scrollOrigin_decorators = [idReference(), property({ attribute: "scroll-origin" })];
+			_hideOnScroll_decorators = [forceType(), property({
+				attribute: "hide-on-scroll",
+				reflect: true,
+				type: Boolean
+			})];
+			_size_decorators = [property({ reflect: true })];
+			__headerOnTop_decorators = [state()];
+			__esDecorate(this, null, _expanded_decorators, {
+				kind: "accessor",
+				name: "expanded",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "expanded" in obj,
+					get: (obj) => obj.expanded,
+					set: (obj, value) => {
+						obj.expanded = value;
+					}
+				},
+				metadata: _metadata
+			}, _expanded_initializers, _expanded_extraInitializers);
+			__esDecorate(this, null, _scrollOrigin_decorators, {
+				kind: "accessor",
+				name: "scrollOrigin",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "scrollOrigin" in obj,
+					get: (obj) => obj.scrollOrigin,
+					set: (obj, value) => {
+						obj.scrollOrigin = value;
+					}
+				},
+				metadata: _metadata
+			}, _scrollOrigin_initializers, _scrollOrigin_extraInitializers);
+			__esDecorate(this, null, _hideOnScroll_decorators, {
+				kind: "accessor",
+				name: "hideOnScroll",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "hideOnScroll" in obj,
+					get: (obj) => obj.hideOnScroll,
+					set: (obj, value) => {
+						obj.hideOnScroll = value;
+					}
+				},
+				metadata: _metadata
+			}, _hideOnScroll_initializers, _hideOnScroll_extraInitializers);
+			__esDecorate(this, null, _size_decorators, {
+				kind: "accessor",
+				name: "size",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "size" in obj,
+					get: (obj) => obj.size,
+					set: (obj, value) => {
+						obj.size = value;
+					}
+				},
+				metadata: _metadata
+			}, _size_initializers, _size_extraInitializers);
+			__esDecorate(this, null, __headerOnTop_decorators, {
+				kind: "accessor",
+				name: "_headerOnTop",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_headerOnTop" in obj,
+					get: (obj) => obj._headerOnTop,
+					set: (obj, value) => {
+						obj._headerOnTop = value;
+					}
+				},
+				metadata: _metadata
+			}, __headerOnTop_initializers, __headerOnTop_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-header";
+		}
+		static {
+			this.styles = [unsafeCSS(header_default)];
+		}
+		static {
+			this._headerScrollOrigins = /* @__PURE__ */ new Set();
+		}
+		static {
+			this._headerElements = /* @__PURE__ */ new Set();
+		}
+		static {
+			if (!isServer) queueDomContentLoaded(() => this._initializeScrollOriginObserver());
+		}
+		#expanded_accessor_storage;
+		/**
+		* Whether to allow the header content to stretch to full width.
+		* By default, the content has the appropriate page size.
+		*/
+		get expanded() {
+			return this.#expanded_accessor_storage;
+		}
+		set expanded(value) {
+			this.#expanded_accessor_storage = value;
+		}
+		#scrollOrigin_accessor_storage;
+		/**
+		* The element's id or the element on which the scroll listener is attached.
+		*
+		* For attribute usage, provide an id reference.
+		*/
+		get scrollOrigin() {
+			return this.#scrollOrigin_accessor_storage;
+		}
+		set scrollOrigin(value) {
+			this.#scrollOrigin_accessor_storage = value;
+		}
+		#hideOnScroll_accessor_storage;
+		/** Whether the header should hide and show on scroll. */
+		get hideOnScroll() {
+			return this.#hideOnScroll_accessor_storage;
+		}
+		set hideOnScroll(value) {
+			this.#hideOnScroll_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* Size of the header, either s (lean theme default) or m (standard theme default).
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		#_headerOnTop_accessor_storage;
+		get _headerOnTop() {
+			return this.#_headerOnTop_accessor_storage;
+		}
+		set _headerOnTop(value) {
+			this.#_headerOnTop_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.#expanded_accessor_storage = __runInitializers(this, _expanded_initializers, false);
+			this.#scrollOrigin_accessor_storage = (__runInitializers(this, _expanded_extraInitializers), __runInitializers(this, _scrollOrigin_initializers, null));
+			this.#hideOnScroll_accessor_storage = (__runInitializers(this, _scrollOrigin_extraInitializers), __runInitializers(this, _hideOnScroll_initializers, false));
+			this.#size_accessor_storage = (__runInitializers(this, _hideOnScroll_extraInitializers), __runInitializers(this, _size_initializers, null));
+			this.#_headerOnTop_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, __headerOnTop_initializers, true));
+			this._scrollElement = __runInitializers(this, __headerOnTop_extraInitializers);
+			this._lastScroll = 0;
+			this._scrollOriginFromObserver = null;
+			this.addController(new SbbFocusVisibleWithinController(this));
+		}
+		static _initializeScrollOriginObserver() {
+			new MutationObserver((mutations) => {
+				for (const mutation of mutations) if (mutation.type === "attributes") this._handleScrollOriginElement(mutation.target);
+				else if (mutation.type === "childList") for (const node of [...mutation.addedNodes, ...mutation.removedNodes].filter((n) => n.nodeType === n.ELEMENT_NODE)) {
+					this._handleScrollOriginElement(node);
+					this._findAndHandleScrollOrigins(node);
+				}
+				this._updateHeaderElements();
+			}).observe(document.documentElement, {
+				attributeFilter: ["sbb-header-scroll-origin"],
+				childList: true,
+				subtree: true
+			});
+			this._findAndHandleScrollOrigins(document.body);
+			this._updateHeaderElements();
+		}
+		static _findAndHandleScrollOrigins(root) {
+			root.querySelectorAll("[sbb-header-scroll-origin]").forEach((e) => this._handleScrollOriginElement(e));
+		}
+		static _handleScrollOriginElement(element) {
+			if (element.isConnected && element.hasAttribute("sbb-header-scroll-origin")) this._headerScrollOrigins.add(element);
+			else this._headerScrollOrigins.delete(element);
+		}
+		static _updateHeaderElements() {
+			for (const header of this._headerElements) {
+				if (this._headerScrollOrigins.size === 0) header._scrollOriginFromObserver = null;
+				else if (this._headerScrollOrigins.size === 1) header._scrollOriginFromObserver = this._headerScrollOrigins.values().next().value ?? null;
+				else header._scrollOriginFromObserver = Array.from(this._headerScrollOrigins).sort((c1, c2) => c1.compareDocumentPosition(c2) & Node.DOCUMENT_POSITION_CONTAINS).at(-1) ?? null;
+				header._updateScrollListener();
+			}
+		}
+		/** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
+		connectedCallback() {
+			super.connectedCallback();
+			SbbHeaderElement._headerElements.add(this);
+			if (this.hasUpdated) this._updateScrollListener();
+		}
+		/** Removes the scroll listener, if previously attached. */
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this._scrollElement = null;
+			this._scrollEventsController?.abort();
+			SbbHeaderElement._headerElements.delete(this);
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (!isServer && (!name || name === "scrollOrigin") && this.hasUpdated) this._updateScrollListener();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._updateScrollListener();
+		}
+		_updateScrollListener() {
+			const scrollElement = this.scrollOrigin ?? this._scrollOriginFromObserver ?? document;
+			if (scrollElement === this._scrollElement) return;
+			this._scrollEventsController?.abort();
+			this._scrollElement = scrollElement;
+			if (!this._scrollElement) return;
+			this._scrollEventsController = new AbortController();
+			this._scrollFunction = this._getScrollFunction.bind(this);
+			this._scrollElement.addEventListener("scroll", this._scrollFunction, {
+				passive: true,
+				signal: this._scrollEventsController.signal
+			});
+			const currentScroll = this._getCurrentScrollProperty("scrollTop");
+			this._lastScroll = currentScroll <= 0 ? 0 : currentScroll;
+		}
+		/** Returns the correct function to attach on scroll. */
+		_getScrollFunction() {
+			return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
+		}
+		/** Returns the requested property of the scrollContext. */
+		_getCurrentScrollProperty(property) {
+			if (this._scrollElement instanceof Document) return this._scrollElement.documentElement[property] || this._scrollElement.body[property];
+			return this._scrollElement?.[property] || 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 currentScroll = this._getCurrentScrollProperty("scrollTop");
+			if (this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - currentScroll <= 0) return;
+			this.toggleState("shadow", currentScroll !== 0);
+			if (currentScroll > this.offsetHeight && currentScroll > 0 && this._lastScroll < currentScroll) this._closeOpenOverlays();
+			if (currentScroll > this.offsetHeight * 2) {
+				this._headerOnTop = false;
+				if (currentScroll > 0 && this._lastScroll < currentScroll) ["shadow", "visible"].forEach((name) => this.internals.states.delete(name));
+				else [
+					"fixed",
+					"shadow",
+					"animated",
+					"visible"
+				].forEach((name) => this.internals.states.add(name));
+			} else {
+				if (currentScroll === 0) this._headerOnTop = true;
+				if (this._headerOnTop) [
+					"shadow",
+					"animated",
+					"fixed",
+					"visible"
+				].forEach((name) => this.internals.states.delete(name));
+			}
+			this._lastScroll = currentScroll <= 0 ? 0 : currentScroll;
+		}
+		/** Apply the shadow if the element/document has been scrolled down. */
+		_scrollShadowListener() {
+			this.toggleState("shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
+		}
+		_closeOpenOverlays() {
+			if (this.matches(":is(:state(has-visible-focus-within),[state--has-visible-focus-within])")) return;
+			const overlayTriggers = Array.from(this.querySelectorAll(IS_MENU_OPENED_QUERY));
+			for (const overlayTrigger of overlayTriggers) {
+				const overlay = overlayTrigger.ariaControlsElements[0];
+				if (typeof overlay?.close === "function") overlay.close();
+			}
+		}
+		render() {
+			return html`
+      <header class="sbb-header">
+        <div class="sbb-header__wrapper">
+          <slot></slot>
+        </div>
+      </header>
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbHeaderActionCommonElementMixin, SbbHeaderButtonElement, SbbHeaderElement, SbbHeaderEnvironmentElement, SbbHeaderLinkElement };

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbElement } from '../core.ts';
 /**
  * @cssprop [--sbb-icon-svg-width=auto] - Can be used to set a custom width.
@@ -25,4 +25,3 @@ export declare abstract class SbbIconBase extends SbbElement {
     private _splitIconName;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=icon-base.d.ts.map

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

@@ -1,5 +1,5 @@
-import { TemplateResult } from 'lit';
-import { AbstractConstructor, SbbElement, SbbElementConstructor } from '../core.ts';
+import { type TemplateResult } from 'lit';
+import type { AbstractConstructor, SbbElement, SbbElementConstructor } from '../core.ts';
 export declare class SbbIconNameMixinType {
     accessor iconName: string;
     protected renderIconSlot(classname?: string): TemplateResult;
@@ -9,4 +9,3 @@ export declare class SbbIconNameMixinType {
  * Enhance your component with an iconName property and provides a template for the icon slot.
  */
 export declare const SbbIconNameMixin: <T extends AbstractConstructor<SbbElement> & SbbElementConstructor>(superClass: T) => AbstractConstructor<SbbIconNameMixinType> & T;
-//# sourceMappingURL=icon-name-mixin.d.ts.map

package/development/icon/icon-request.d.ts

@@ -1,3 +1,2 @@
 /** Fetches icon svg content from providers and asserts only one request per icon is made. */
 export declare const getSvgContent: (namespace: string, name: string, sanitize: boolean) => Promise<string>;
-//# sourceMappingURL=icon-request.d.ts.map

package/development/icon/icon-validate.d.ts

@@ -9,4 +9,3 @@ export declare const isValid: (elm: HTMLElement) => boolean;
  * and sanitizing the provided content as long as the `sanitize` property is not explicitly set to `false`.
  */
 export declare const validateContent: (svgContent: string, sanitize?: boolean, colorImmutable?: boolean) => string;
-//# sourceMappingURL=icon-validate.d.ts.map