@sbb-esta/lyne-elements 2.7.1 → 2.9.0

package/form-field/form-field/form-field.component.d.ts

@@ -0,0 +1,96 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+declare const SbbFormFieldElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+/**
+ * It wraps an input element adding label, errors, icon, etc.
+ *
+ * @slot - Use this slot to render an input/select or a supported non-native element.
+ * @slot label - Use this slot to render a label.
+ * @slot prefix - Use this slot to render an icon on the left side of the input.
+ * @slot suffix - Use this slot to render an icon on the right side of the input.
+ * @slot error - Use this slot to render an error.
+ */
+export declare class SbbFormFieldElement extends SbbFormFieldElement_base {
+    static styles: CSSResultGroup;
+    private readonly _supportedNativeInputElements;
+    private readonly _supportedInputElements;
+    private readonly _excludedFocusElements;
+    private readonly _floatingLabelSupportedInputElements;
+    private readonly _floatingLabelSupportedInputTypes;
+    /**
+     * Whether to reserve space for an error message.
+     * `none` does not reserve any space.
+     * `reserve` does reserve one row for an error message.
+     */
+    accessor errorSpace: 'none' | 'reserve';
+    /** Indicates whether the input is optional. */
+    accessor optional: boolean;
+    /**
+     * Size variant, either l, m or s.
+     * @default 'm' / 's' (lean)
+     */
+    accessor size: 'l' | 'm' | 's';
+    /** Whether to display the form field without a border. */
+    accessor borderless: boolean;
+    /** Defines the width of the component:
+     * - `default`: the component has defined width and min-width;
+     * - `collapse`: the component adapts itself to its inner input content. */
+    accessor width: 'default' | 'collapse';
+    /** Whether to visually hide the label. If hidden, screen readers will still read it. */
+    accessor hiddenLabel: boolean;
+    /** Whether the label should float. If activated, the placeholder of the input is hidden. */
+    accessor floatingLabel: boolean;
+    /** It is used internally to get the `error` slot. */
+    private accessor _errorElements;
+    /** Original aria-describedby value of the slotted input element. */
+    private _originalInputAriaDescribedby?;
+    /** Reference to the slotted input element. */
+    private accessor _input;
+    /** Reference to the slotted label elements. */
+    private accessor _label;
+    /** Returns the input element. */
+    get inputElement(): HTMLInputElement | HTMLSelectElement | HTMLElement | undefined;
+    private _language;
+    /**
+     * Listens to the changes on `readonly` and `disabled` attributes of `<input>`.
+     */
+    private _formFieldAttributeObserver;
+    private _inputAbortController;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private _handleWrapperClick;
+    private _isElementFocusExcluded;
+    private _onSlotLabelChange;
+    /**
+     * It is used internally to assign the attributes of `<input>` to `_id` and `_input` and to observe the native readonly and disabled attributes.
+     */
+    private _onSlotInputChange;
+    private _syncLabelInputReferences;
+    private _registerInputListener;
+    private _getInputForm;
+    private _patchInputValue;
+    private _unpatchInputValue;
+    private _checkAndUpdateInputEmpty;
+    private _isInputEmpty;
+    private _isInputValueEmpty;
+    private _assignSlots;
+    private _readInputState;
+    /**
+     * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
+     */
+    private _onSlotErrorChange;
+    private _applyAriaDescribedby;
+    /** Manually reset the form field. Currently, this only resets the floating label. */
+    reset(): void;
+    /** Manually clears the input value. It only works for inputs, selects are not supported. */
+    clear(): void;
+    private _syncNegative;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-form-field': SbbFormFieldElement;
+    }
+}
+export {};
+//# sourceMappingURL=form-field.component.d.ts.map

package/form-field/form-field/form-field.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field/form-field.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAcb,OAAO,eAAe,CAAC;;AAOvB;;;;;;;;GAQG;AACH,qBAGM,mBAAoB,SAAQ,wBAA+C;IAC/E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAK5C;IAEF,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAItC;IAEF,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAuD;IAE9F,OAAO,CAAC,QAAQ,CAAC,oCAAoC,CAMnD;IAEF,OAAO,CAAC,QAAQ,CAAC,iCAAiC,CAQhD;IAEF;;;;OAIG;IACH,SACgB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAU;IAExD,+CAA+C;IAC/C,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAwB;IAE1F,0DAA0D;IAC1D,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C;;+EAE2E;IAC3E,SAA6C,KAAK,EAAE,SAAS,GAAG,UAAU,CAAa;IAEvF,wFAAwF;IACxF,SAEgB,WAAW,EAAE,OAAO,CAAS;IAE7C,4FAA4F;IAC5F,SAEgB,aAAa,EAAE,OAAO,CAAS;IAE/C,qDAAqD;IAC5C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEzD,oEAAoE;IACpE,OAAO,CAAC,6BAA6B,CAAC,CAAgB;IAEtD,8CAA8C;IACrC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAkE;IAElG,+CAA+C;IACtC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAoB;IAEpD,iCAAiC;IACjC,IAAW,YAAY,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAExF;IAED,OAAO,CAAC,SAAS,CAAmC;IAEpD;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAM1B;IAET,OAAO,CAAC,qBAAqB,CAAyB;IAEtC,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,uBAAuB;IAW/B,OAAO,CAAC,kBAAkB;IAW1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAoC1B,OAAO,CAAC,yBAAyB;IA4BjC,OAAO,CAAC,sBAAsB;IA+E9B,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,gBAAgB;IA4BxB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAgBvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,qBAAqB;IAiB7B,qFAAqF;IAC9E,KAAK,IAAI,IAAI;IAIpB,4FAA4F;IACrF,KAAK,IAAI,IAAI;IAQpB,OAAO,CAAC,aAAa;cAMF,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/form-field/form-field-clear/form-field-clear.component.d.ts

@@ -0,0 +1,23 @@
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+declare const SbbFormFieldClearElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof SbbButtonBaseElement;
+/**
+ * Combined with `sbb-form-field`, it displays a button which clears the input value.
+ */
+export declare class SbbFormFieldClearElement extends SbbFormFieldClearElement_base {
+    static styles: CSSResultGroup;
+    private _formField?;
+    private _language;
+    constructor();
+    connectedCallback(): void;
+    private _handleClick;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-form-field-clear': SbbFormFieldClearElement;
+    }
+}
+export {};
+//# sourceMappingURL=form-field-clear.component.d.ts.map

package/form-field/form-field-clear/form-field-clear.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-clear.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field-clear/form-field-clear.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AASnE,OAAO,eAAe,CAAC;;AAEvB;;GAEG;AACH,qBAKM,wBAAyB,SAAQ,6BAAsC;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,UAAU,CAAC,CAA6B;IAChD,OAAO,CAAC,SAAS,CAAmC;;IAOpC,iBAAiB,IAAI,IAAI;YAS3B,YAAY;cAWP,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAMzD,cAAc,IAAI,cAAc;CAGpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}

package/form-field/form-field-clear.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './form-field-clear/form-field-clear.js';
+export * from './form-field-clear/form-field-clear.component.js';
 //# sourceMappingURL=form-field-clear.d.ts.map

package/form-field/form-field-clear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-clear.d.ts","sourceRoot":"","sources":["../../../src/elements/form-field/form-field-clear.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"form-field-clear.d.ts","sourceRoot":"","sources":["../../../src/elements/form-field/form-field-clear.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kDAAkD,CAAC"}

package/form-field/form-field-clear.js

@@ -1,4 +1,4 @@
-import { SbbFormFieldClearElement as l } from "./form-field-clear/form-field-clear.js";
+import { SbbFormFieldClearElement as l } from "./form-field-clear/form-field-clear.component.js";
 export {
   l as SbbFormFieldClearElement
 };

package/form-field/form-field.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './form-field/form-field.js';
+export * from './form-field/form-field.component.js';
 //# sourceMappingURL=form-field.d.ts.map

package/form-field/form-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../src/elements/form-field/form-field.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../src/elements/form-field/form-field.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC"}

package/form-field/form-field.js

@@ -1,4 +1,4 @@
-import { SbbFormFieldElement as o } from "./form-field/form-field.js";
+import { SbbFormFieldElement as o } from "./form-field/form-field.component.js";
 export {
   o as SbbFormFieldElement
 };

package/form-field.js

@@ -1,5 +1,5 @@
-import { SbbFormFieldElement as m } from "./form-field/form-field/form-field.js";
-import { SbbFormFieldClearElement as l } from "./form-field/form-field-clear/form-field-clear.js";
+import { SbbFormFieldElement as m } from "./form-field/form-field/form-field.component.js";
+import { SbbFormFieldClearElement as l } from "./form-field/form-field-clear/form-field-clear.component.js";
 export {
   l as SbbFormFieldClearElement,
   m as SbbFormFieldElement

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;IAExC,SAAgB,UAAU,EAAE,iBAAiB,CAAC;IAC9C,SAAgB,QAAQ,EAAE,MAAM,CAAC;CAClC;AAGD,eAAO,MAAM,iCAAiC,GAC5C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,EAEnD,YAAY,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;AAExE,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,EAEnD,YAAY,CAAC,KACZ,mBAAmB,CAAC,qCAAqC,CAAC,GAAG,CA6B/D,CAAC"}

package/header/common/header-action-common.js

@@ -1,35 +1,36 @@
-var c = (e) => {
+var v = (e) => {
   throw TypeError(e);
 };
-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-duration, 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])){--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])){--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([data-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) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.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 {
+var f = (e, a, i) => a.has(e) || v("Cannot " + i);
+var g = (e, a, i) => (f(e, a, "read from private field"), i ? i.call(e) : a.get(e)), x = (e, a, i) => a.has(e) ? v("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, i), u = (e, a, i, r) => (f(e, a, "write to private field"), r ? r.call(e, i) : a.set(e, i), i);
+import { __esDecorate as w, __runInitializers as b } from "tslib";
+import { property as y } from "lit/decorators.js";
+import { html as z } from "lit/static-html.js";
+import { slotState as k } from "../../core/decorators/slot-state.js";
+import { SbbIconNameMixin as S } from "../../icon.js";
+import { css as F } from "lit";
+const H = F`*,: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-duration, 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])){--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])){--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([data-button]){--sbb-header-action-color: ButtonText}}:host(:not([data-slot-names~=icon],[icon-name])){--sbb-header-first-item-margin-inline-start: var(--_sbb-header-first-item-padding-shift)}.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) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.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}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-header-action__icon{display:none}.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]:is([data-slot-names~=icon],[icon-name])){--_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]:is([data-slot-names~=icon],[icon-name])) .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]:is([data-slot-names~=icon],[icon-name])){--_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]:is([data-slot-names~=icon],[icon-name])) .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]:is([data-slot-names~=icon],[icon-name])){--_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]:is([data-slot-names~=icon],[icon-name])) .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]:is([data-slot-names~=icon],[icon-name])){--_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]:is([data-slot-names~=icon],[icon-name])) .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]:is([data-slot-names~=icon],[icon-name])){--_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]:is([data-slot-names~=icon],[icon-name])) .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]:is([data-slot-names~=icon],[icon-name])){--_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]:is([data-slot-names~=icon],[icon-name])) .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]:is([data-slot-names~=icon],[icon-name])){--_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]:is([data-slot-names~=icon],[icon-name])) .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]:is([data-slot-names~=icon],[icon-name])){--_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]:is([data-slot-names~=icon],[icon-name])) .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}}::slotted([slot=icon]:is(sbb-image,img)){width:var(--sbb-header-action-icon-dimension);height:var(--sbb-header-action-icon-dimension);border-radius:var(--sbb-border-radius-infinity)}`, O = (e) => (() => {
+  var s, t;
+  let i = [k()], r, c = [], n, l = S(e), h, m = [], p = [];
+  return t = class extends l {
     constructor() {
       super(...arguments);
-      m(this, o, v(this, b, "medium"));
-      v(this, d);
+      x(this, s, b(this, m, "medium"));
+      b(this, p);
     }
     /**
      * 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.
+     * and hidden for all the others. Ignored if no icon is set.
      */
     get expandFrom() {
-      return l(this, o);
+      return g(this, s);
     }
-    set expandFrom(n) {
-      p(this, o, n);
+    set expandFrom(o) {
+      u(this, s, o);
     }
     renderTemplate() {
-      return u`
+      return z`
         <span class="sbb-header-action__wrapper">
           <span class="sbb-header-action__icon"> ${super.renderIconSlot()} </span>
           <span class="sbb-header-action__text">
@@ -38,13 +39,13 @@ const y = _`*,:before,:after{box-sizing:border-box}:host{display:inline-block;ou
         </span>
       `;
     }
-  }, 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;
+  }, s = new WeakMap(), n = t, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    h = [y({ attribute: "expand-from", reflect: !0 })], w(t, null, h, { kind: "accessor", name: "expandFrom", static: !1, private: !1, access: { has: (d) => "expandFrom" in d, get: (d) => d.expandFrom, set: (d, _) => {
+      d.expandFrom = _;
+    } }, metadata: o }, m, p), w(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: o }, null, c), n = r.value, o && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), t.styles = H, b(n, c), n;
 })();
 export {
-  j as SbbHeaderActionCommonElementMixin
+  O as SbbHeaderActionCommonElementMixin
 };

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

@@ -0,0 +1,61 @@
+import { CSSResultGroup, LitElement, PropertyDeclaration, TemplateResult } from 'lit';
+declare const SbbHeaderElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+/**
+ * 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);medium-ultra:var(--sbb-spacing-fixed-24x)] - Can be used to modify height of the header.
+ */
+export declare class SbbHeaderElement extends SbbHeaderElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * Whether to allow the header content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    accessor expanded: boolean;
+    /** The element's id or the element on which the scroll listener is attached. */
+    accessor scrollOrigin: string | HTMLElement | Document;
+    /** Whether the header should hide and show on scroll. */
+    accessor hideOnScroll: boolean;
+    /**
+     * Size of the header, either m or s.
+     * @default 'm' / 's' (lean)
+     */
+    accessor size: 'm' | 's';
+    private accessor _headerOnTop;
+    private _scrollElement;
+    private _scrollEventsController;
+    private _scrollFunction;
+    private _lastScroll;
+    private _scrollOriginIdReferenceController;
+    constructor();
+    /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
+    connectedCallback(): void;
+    /** Removes the scroll listener, if previously attached. */
+    disconnectedCallback(): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
+    private _updateScrollListener;
+    /** Returns the correct function to attach on scroll. */
+    private _getScrollFunction;
+    /** Returns the requested property of the scrollContext. */
+    private _getCurrentScrollProperty;
+    /**
+     * 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.
+     */
+    private _scrollListener;
+    /** Apply the shadow if the element/document has been scrolled down. */
+    private _scrollShadowListener;
+    private _closeOpenOverlays;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-header': SbbHeaderElement;
+    }
+}
+export {};
+//# sourceMappingURL=header.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header/header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAab;;;;;;GAMG;AACH,qBAEM,gBAAiB,SAAQ,qBAA6B;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAG1C,gFAAgF;IAChF,SACgB,YAAY,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAgC;IAE7F,yDAAyD;IACzD,SAEgB,YAAY,EAAE,OAAO,CAAS;IAE9C;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAE3E,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;IACxB,OAAO,CAAC,kCAAkC,CAAsD;;IAQhG,gGAAgG;IAChF,iBAAiB,IAAI,IAAI;IAKzC,2DAA2D;IAC3C,oBAAoB,IAAI,IAAI;IAM5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;IAQP,OAAO,CAAC,qBAAqB;IA0B7B,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;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,17 @@
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+declare const SbbHeaderButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbHeaderActionCommonElementMixinType> & typeof SbbButtonBaseElement;
+/**
+ * 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`.
+ */
+export declare class SbbHeaderButtonElement extends SbbHeaderButtonElement_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-header-button': SbbHeaderButtonElement;
+    }
+}
+export {};
+//# sourceMappingURL=header-button.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-button/header-button.component.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.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './header-button/header-button.js';
+export * from './header-button/header-button.component.js';
 //# sourceMappingURL=header-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-button.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kCAAkC,CAAC"}
+{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-button.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4CAA4C,CAAC"}

package/header/header-button.js

@@ -1,4 +1,4 @@
-import { SbbHeaderButtonElement as o } from "./header-button/header-button.js";
+import { SbbHeaderButtonElement as o } from "./header-button/header-button.component.js";
 export {
   o as SbbHeaderButtonElement
 };

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

@@ -0,0 +1,17 @@
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+declare const SbbHeaderLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbHeaderActionCommonElementMixinType> & typeof SbbLinkBaseElement;
+/**
+ * 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`.
+ */
+export declare class SbbHeaderLinkElement extends SbbHeaderLinkElement_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-header-link': SbbHeaderLinkElement;
+    }
+}
+export {};
+//# sourceMappingURL=header-link.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-link.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-link/header-link.component.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.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './header-link/header-link.js';
+export * from './header-link/header-link.component.js';
 //# sourceMappingURL=header-link.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"header-link.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-link.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"header-link.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-link.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wCAAwC,CAAC"}

package/header/header-link.js

@@ -1,4 +1,4 @@
-import { SbbHeaderLinkElement as b } from "./header-link/header-link.js";
+import { SbbHeaderLinkElement as b } from "./header-link/header-link.component.js";
 export {
   b as SbbHeaderLinkElement
 };

package/header/header.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './header/header.js';
+export * from './header/header.component.js';
 //# sourceMappingURL=header.d.ts.map

package/header/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8BAA8B,CAAC"}

package/header/header.js

@@ -1,4 +1,4 @@
-import { SbbHeaderElement as b } from "./header/header.js";
+import { SbbHeaderElement as b } from "./header/header.component.js";
 export {
   b as SbbHeaderElement
 };

package/header.js

@@ -1,6 +1,6 @@
-import { SbbHeaderElement as r } from "./header/header/header.js";
-import { SbbHeaderButtonElement as m } from "./header/header-button/header-button.js";
-import { SbbHeaderLinkElement as b } from "./header/header-link/header-link.js";
+import { SbbHeaderElement as r } from "./header/header/header.component.js";
+import { SbbHeaderButtonElement as m } from "./header/header-button/header-button.component.js";
+import { SbbHeaderLinkElement as b } from "./header/header-link/header-link.component.js";
 import { SbbHeaderActionCommonElementMixin as a } from "./header/common/header-action-common.js";
 export {
   a as SbbHeaderActionCommonElementMixin,

package/icon/icon-base.js

@@ -2,43 +2,43 @@ var A = (s) => {
   throw TypeError(s);
 };
 var $ = (s, a, i) => a.has(s) || A("Cannot " + i);
-var h = (s, a, i) => ($(s, a, "read from private field"), i ? i.call(s) : a.get(s)), u = (s, a, i) => a.has(s) ? A("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), p = (s, a, i, n) => ($(s, a, "write to private field"), n ? n.call(s, i) : a.set(s, i), i);
-import { __esDecorate as d, __runInitializers as l } from "tslib";
+var g = (s, a, i) => ($(s, a, "read from private field"), i ? i.call(s) : a.get(s)), d = (s, a, i) => a.has(s) ? A("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), u = (s, a, i, n) => ($(s, a, "write to private field"), n ? n.call(s, i) : a.set(s, i), i);
+import { __esDecorate as p, __runInitializers as l } from "tslib";
 import { css as j, LitElement as B, html as D } from "lit";
 import { state as E, property as L } from "lit/decorators.js";
 import { unsafeHTML as O } from "lit/directives/unsafe-html.js";
 import { until as U } from "lit/directives/until.js";
 import { hostAttributes as C, forceType as H } from "../core/decorators.js";
 import { getSvgContent as M } from "./icon-request.js";
-const P = j`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-namespace=default][name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`, _ = "default";
+const P = j`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-extra-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-extra-small)}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-namespace=default][name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`, _ = "default";
 let X = (() => {
-  var c, m, g, o;
+  var c, m, h, o;
   let s = [C({
     "data-namespace": _,
     "data-empty": ""
-  })], a, i = [], n, v = B, b, f = [], y = [], I, z = [], S = [], k, w = [], N = [];
-  return o = class extends v {
+  })], a, i = [], n, b = B, v, f = [], y = [], z, I = [], S = [], k, w = [], N = [];
+  return o = class extends b {
     constructor() {
       super(...arguments);
-      u(this, c, l(this, f, _));
-      u(this, m, (l(this, y), l(this, z, null)));
-      u(this, g, (l(this, S), l(this, w, !1)));
+      d(this, c, l(this, f, _));
+      d(this, m, (l(this, y), l(this, I, null)));
+      d(this, h, (l(this, S), l(this, w, !1)));
       l(this, N);
     }
     get _svgNamespace() {
-      return h(this, c);
+      return g(this, c);
     }
     set _svgNamespace(e) {
-      p(this, c, e);
+      u(this, c, e);
     }
     /**
      * The icon svg content rendered on the page: <svg>...</svg>.
      */
     get _svgIcon() {
-      return h(this, m);
+      return g(this, m);
     }
     set _svgIcon(e) {
-      p(this, m, e);
+      u(this, m, e);
     }
     /**
      * When set to `true`, SVG content that is HTTP fetched will not be checked
@@ -47,10 +47,10 @@ let X = (() => {
      * @default false
      */
     get noSanitize() {
-      return h(this, g);
+      return g(this, h);
     }
     set noSanitize(e) {
-      p(this, g, e);
+      u(this, h, e);
     }
     async loadSvgIcon(e) {
       if (!e)
@@ -93,15 +93,15 @@ let X = (() => {
       )}</span
     >`;
     }
-  }, c = new WeakMap(), m = new WeakMap(), g = new WeakMap(), n = o, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    b = [E()], I = [E()], k = [H(), L({ attribute: "no-sanitize", type: Boolean })], d(o, null, b, { kind: "accessor", name: "_svgNamespace", static: !1, private: !1, access: { has: (t) => "_svgNamespace" in t, get: (t) => t._svgNamespace, set: (t, r) => {
+  }, c = new WeakMap(), m = new WeakMap(), h = new WeakMap(), n = o, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    v = [E()], z = [E()], k = [H(), L({ attribute: "no-sanitize", type: Boolean })], p(o, null, v, { kind: "accessor", name: "_svgNamespace", static: !1, private: !1, access: { has: (t) => "_svgNamespace" in t, get: (t) => t._svgNamespace, set: (t, r) => {
       t._svgNamespace = r;
-    } }, metadata: e }, f, y), d(o, null, I, { kind: "accessor", name: "_svgIcon", static: !1, private: !1, access: { has: (t) => "_svgIcon" in t, get: (t) => t._svgIcon, set: (t, r) => {
+    } }, metadata: e }, f, y), p(o, null, z, { kind: "accessor", name: "_svgIcon", static: !1, private: !1, access: { has: (t) => "_svgIcon" in t, get: (t) => t._svgIcon, set: (t, r) => {
       t._svgIcon = r;
-    } }, metadata: e }, z, S), d(o, null, k, { kind: "accessor", name: "noSanitize", static: !1, private: !1, access: { has: (t) => "noSanitize" in t, get: (t) => t.noSanitize, set: (t, r) => {
+    } }, metadata: e }, I, S), p(o, null, k, { kind: "accessor", name: "noSanitize", static: !1, private: !1, access: { has: (t) => "noSanitize" in t, get: (t) => t.noSanitize, set: (t, r) => {
       t.noSanitize = r;
-    } }, metadata: e }, w, N), d(null, a = { value: n }, s, { kind: "class", name: n.name, metadata: e }, null, i), n = a.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, w, N), p(null, a = { value: n }, s, { kind: "class", name: n.name, metadata: e }, null, i), n = a.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), o.styles = P, l(n, i), n;
 })();
 export {

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;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,EACxE,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAuB9C,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,qBAAqB,CAAC;AAE7B,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,EACxE,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAuB9C,CAAC"}

package/icon/icon-name-mixin.js

@@ -7,7 +7,7 @@ import { __esDecorate as y, __runInitializers as f } from "tslib";
 import { nothing as _, html as d } from "lit";
 import { property as S } from "lit/decorators.js";
 import { forceType as g, omitEmptyConverter as v } from "../core/decorators.js";
-import "./icon.js";
+import "./icon.component.js";
 const k = (e) => (() => {
   var n, o;
   let a = e, i, s = [], m = [];