@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/form-field/form-field.js

@@ -1,358 +1,4 @@
-var ae = (o) => {
-  throw TypeError(o);
-};
-var be = (o, a, b) => a.has(o) || ae("Cannot " + b);
-var n = (o, a, b) => (be(o, a, "read from private field"), b ? b.call(o) : a.get(o)), d = (o, a, b) => a.has(o) ? ae("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(o) : a.set(o, b), i = (o, a, b, f) => (be(o, a, "write to private field"), f ? f.call(o, b) : a.set(o, b), b);
-import { __runInitializers as s, __esDecorate as c } from "tslib";
-import { css as fe, LitElement as pe, isServer as he, nothing as ne, html as I } from "lit";
-import { customElement as me, property as h, state as L } from "lit/decorators.js";
-import { sbbInputModalityDetector as ue } from "../core/a11y.js";
-import { SbbLanguageController as _e } from "../core/controllers.js";
-import { slotState as ge, forceType as A } from "../core/decorators.js";
-import { isLean as ve, isFirefox as xe, setOrRemoveAttribute as ye } from "../core/dom.js";
-import { i18nOptional as we } from "../core/i18n.js";
-import { SbbNegativeMixin as ke, SbbHydrationMixin as ze } from "../core/mixins.js";
-import "../icon.js";
-const Ee = fe`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (min-width: 52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@media (forced-colors: active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media (min-width: 52.5rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:is([data-readonly],[data-disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:is([data-readonly],[data-disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:is([data-readonly],[data-disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host([data-disabled]){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host([data-disabled]){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host([data-disabled][negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host([data-readonly]:not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:is([data-input-focused])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host(:is([data-input-focused])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}:host([data-invalid]){--sbb-form-field-border-color: var(--sbb-color-red125);--sbb-form-field-text-color: var(--sbb-color-red125)}@media (forced-colors: active){:host([data-invalid]){--sbb-form-field-border-color: LinkText !important;--sbb-form-field-text-color: LinkText !important}}:host([data-invalid][negative]){--sbb-form-field-border-color: var(--sbb-color-red-mode-dark);--sbb-form-field-text-color: var(--sbb-color-red-mode-dark)}:host(:not([data-has-error])){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media (forced-colors: active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label],[label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host([data-input-type=sbb-slider]){--sbb-form-field-overflow: visible}:host([data-input-type=textarea]){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host([data-input-focused][data-focus-origin=keyboard]) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: none){:host(:is([borderless],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-disabled])[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:is([data-input-empty],[data-disabled],[data-readonly])) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){height:calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors: active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=label],[label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);z-index:1;--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)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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)}:host([data-input-type=select]) .sbb-form-field__label,:host([data-input-type=sbb-select]) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex}:host([size=s]:is([data-input-type=input],[data-input-type=select],[data-input-type=sbb-select])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select,sbb-date-input)){--sbb-text-font-size: var(--sbb-font-size-text-m);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;border:none;padding:0;-webkit-appearance:none;outline:none!important;overflow:var(--sbb-form-field-overflow);width:100%;box-sizing:border-box;color:var(--sbb-form-field-text-color);-webkit-text-fill-color:var(--sbb-form-field-text-color);opacity:1;background-color:transparent;font-size:var(--sbb-form-field-input-text-size)!important;font-family:var(--sbb-typo-font-family)!important;line-height:var(--sbb-typo-line-height-body-text)!important}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select,sbb-date-input))::placeholder{color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select,sbb-date-input))::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important}@media (forced-colors: active){:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select,sbb-date-input))::placeholder{color:Canvas!important;-webkit-text-fill-color:Canvas!important}}:host([data-disabled]:not([floating-label])) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select,sbb-date-input))::placeholder{color:var(--sbb-color-granite);-webkit-text-fill-color:var(--sbb-color-granite)}:host([data-input-type=select]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select,sbb-date-input)){vertical-align:middle}.sbb-form-field__input ::slotted(:where(select,sbb-select)){padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__input ::slotted(textarea){position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}:host([size=l]) .sbb-form-field__input ::slotted(textarea){padding-block-end:.34375rem}:host([negative]) .sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([negative]) .sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
-let de = 0, Ae = 0;
-const S = /* @__PURE__ */ new WeakMap();
-let Be = (() => {
-  var m, u, _, g, v, x, y, w, k, z, l;
-  let o = [me("sbb-form-field"), ge()], a, b = [], f, C = ke(ze(pe)), N, D = [], T = [], O, F = [], U = [], $, M = [], B = [], V, j = [], H = [], P, R = [], q = [], G, W = [], Y = [], J, K = [], Q = [], X, Z = [], ee = [], te, re = [], ie = [], se, oe = [], le = [];
-  return l = class extends C {
-    constructor() {
-      super(...arguments);
-      d(this, m);
-      d(this, u);
-      d(this, _);
-      d(this, g);
-      d(this, v);
-      d(this, x);
-      d(this, y);
-      d(this, w);
-      d(this, k);
-      d(this, z);
-      this._supportedNativeInputElements = [
-        "input",
-        "select",
-        "textarea",
-        "sbb-date-input"
-      ], this._supportedInputElements = [
-        ...this._supportedNativeInputElements,
-        "sbb-select",
-        "sbb-slider"
-      ], this._excludedFocusElements = ["button", "sbb-popover", "sbb-option"], this._floatingLabelSupportedInputElements = [
-        "input",
-        "select",
-        "sbb-date-input",
-        "sbb-select",
-        "textarea"
-      ], this._floatingLabelSupportedInputTypes = [
-        "email",
-        "number",
-        "password",
-        "search",
-        "tel",
-        "text",
-        "url"
-      ], i(this, m, s(this, D, "none")), i(this, u, (s(this, T), s(this, F, !1))), i(this, _, (s(this, U), s(this, M, ve() ? "s" : "m"))), i(this, g, (s(this, B), s(this, j, !1))), i(this, v, (s(this, H), s(this, R, "default"))), i(this, x, (s(this, q), s(this, W, !1))), i(this, y, (s(this, Y), s(this, K, !1))), i(this, w, (s(this, Q), s(this, Z, []))), this._originalInputAriaDescribedby = s(this, ee), i(this, k, s(this, re, void 0)), i(this, z, (s(this, ie), s(this, oe, void 0))), this._language = (s(this, le), new _e(this)), this._formFieldAttributeObserver = he ? null : new MutationObserver((e) => {
-        e.some((t) => t.type === "attributes") && this._readInputState();
-      }), this._inputAbortController = new AbortController();
-    }
-    /**
-     * Whether to reserve space for an error message.
-     * `none` does not reserve any space.
-     * `reserve` does reserve one row for an error message.
-     */
-    get errorSpace() {
-      return n(this, m);
-    }
-    set errorSpace(e) {
-      i(this, m, e);
-    }
-    /** Indicates whether the input is optional. */
-    get optional() {
-      return n(this, u);
-    }
-    set optional(e) {
-      i(this, u, e);
-    }
-    /**
-     * Size variant, either l, m or s.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return n(this, _);
-    }
-    set size(e) {
-      i(this, _, e);
-    }
-    /** Whether to display the form field without a border. */
-    get borderless() {
-      return n(this, g);
-    }
-    set borderless(e) {
-      i(this, g, e);
-    }
-    /** 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. */
-    get width() {
-      return n(this, v);
-    }
-    set width(e) {
-      i(this, v, e);
-    }
-    /** Whether to visually hide the label. If hidden, screen readers will still read it. */
-    get hiddenLabel() {
-      return n(this, x);
-    }
-    set hiddenLabel(e) {
-      i(this, x, e);
-    }
-    /** Whether the label should float. If activated, the placeholder of the input is hidden. */
-    get floatingLabel() {
-      return n(this, y);
-    }
-    set floatingLabel(e) {
-      i(this, y, e);
-    }
-    /** It is used internally to get the `error` slot. */
-    get _errorElements() {
-      return n(this, w);
-    }
-    set _errorElements(e) {
-      i(this, w, e);
-    }
-    /** Reference to the slotted input element. */
-    get _input() {
-      return n(this, k);
-    }
-    set _input(e) {
-      i(this, k, e);
-    }
-    /** Reference to the slotted label elements. */
-    get _label() {
-      return n(this, z);
-    }
-    set _label(e) {
-      i(this, z, e);
-    }
-    /** Returns the input element. */
-    get inputElement() {
-      return this._input;
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._registerInputListener(), this._syncNegative();
-    }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("negative") && this._syncNegative();
-    }
-    disconnectedCallback() {
-      var e, t;
-      super.disconnectedCallback(), (e = this._formFieldAttributeObserver) == null || e.disconnect(), this._inputAbortController.abort(), ((t = this._input) == null ? void 0 : t.localName) === "input" && this._unpatchInputValue();
-    }
-    _handleWrapperClick(e) {
-      var t, r;
-      this._isElementFocusExcluded(e) || (((t = this._input) == null ? void 0 : t.localName) === "sbb-select" && e.target.localName !== "sbb-select" ? (this._input.click(), this._input.focus()) : e.target.localName !== "label" && ((r = this._input) == null || r.focus()));
-    }
-    _isElementFocusExcluded(e) {
-      return e.composedPath().some((t) => t instanceof window.HTMLElement && (t.getAttribute("tabindex") === "0" || t.hasAttribute("contenteditable")) || this._excludedFocusElements.includes(t.localName));
-    }
-    _onSlotLabelChange() {
-      const e = Array.from(this.querySelectorAll("label"));
-      this._label = e[0], this._syncLabelInputReferences();
-    }
-    /**
-     * It is used internally to assign the attributes of `<input>` to `_id` and `_input` and to observe the native readonly and disabled attributes.
-     */
-    _onSlotInputChange(e) {
-      var r, p;
-      const t = e.target.assignedElements().find((E) => this._supportedInputElements.includes(E.localName));
-      this._assignSlots(), this._input && this._input.localName === "input" && t !== this._input && this._unpatchInputValue(), this._input = t, this._input && (this._originalInputAriaDescribedby = this._input.getAttribute("aria-describedby"), this._applyAriaDescribedby(), this._readInputState(), this._registerInputListener(), this._input.localName === "textarea" && this._input.setAttribute("rows", this._input.getAttribute("rows") || "3"), (r = this._formFieldAttributeObserver) == null || r.disconnect(), (p = this._formFieldAttributeObserver) == null || p.observe(this._input, {
-        attributes: !0,
-        attributeFilter: ["readonly", "disabled", "class", "data-sbb-invalid", "data-expanded"]
-      }), this.setAttribute("data-input-type", this._input.localName), this._syncLabelInputReferences());
-    }
-    _syncLabelInputReferences() {
-      var e;
-      if (!(!this._input || !this._label))
-        if (this._supportedNativeInputElements.includes(this._input.localName))
-          this._input.id || (this._input.id = `sbb-form-field-input-${de++}`), this._label.htmlFor = this._input.id;
-        else {
-          this._label.id || (this._label.id = `sbb-form-field-label-${de++}`);
-          const t = ((e = this._input.getAttribute("aria-labelledby")) == null ? void 0 : e.split(" ").filter((r) => !!r && r !== this._label.id)) ?? [];
-          this._input.setAttribute("aria-labelledby", [...t, this._label.id].join(" "));
-        }
-    }
-    _registerInputListener() {
-      var t;
-      if (!this._input)
-        return;
-      this._inputAbortController.abort(), this._inputAbortController = new AbortController(), this._checkAndUpdateInputEmpty(), (t = this._getInputForm()) == null || t.addEventListener("reset", () => setTimeout(() => this.reset()), {
-        signal: this._inputAbortController.signal
-      }), this._input.addEventListener("input", () => this._checkAndUpdateInputEmpty(), {
-        signal: this._inputAbortController.signal
-      }), this._input.addEventListener("blur", () => this._checkAndUpdateInputEmpty(), {
-        signal: this._inputAbortController.signal
-      }), this._input.addEventListener("invalid", (r) => r.preventDefault(), {
-        signal: this._inputAbortController.signal
-      });
-      let e = this._input;
-      if (this._input.localName === "input")
-        this._patchInputValue();
-      else if (this._input.localName === "sbb-select") {
-        this._input.addEventListener("displayValueChange", () => this._checkAndUpdateInputEmpty(), {
-          signal: this._inputAbortController.signal
-        });
-        const r = this._input;
-        if (e = r.inputElement, !e) {
-          const p = {
-            hostUpdated: () => {
-              r.removeController(p), this._registerInputListener();
-            }
-          };
-          r.addController(p);
-        }
-      }
-      e == null || e.addEventListener("focusin", () => {
-        this.toggleAttribute("data-input-focused", !0), this.setAttribute("data-focus-origin", ue.mostRecentModality ?? "");
-      }, {
-        signal: this._inputAbortController.signal
-      }), e == null || e.addEventListener("focusout", () => ["data-focus-origin", "data-input-focused"].forEach((r) => this.removeAttribute(r)), {
-        signal: this._inputAbortController.signal
-      });
-    }
-    _getInputForm() {
-      var e;
-      return this._input instanceof HTMLInputElement || this._input instanceof HTMLSelectElement ? this._input.form : (e = this._input) == null ? void 0 : e.closest("form");
-    }
-    // We need to patch the value property of the HTMLInputElement in order
-    // to be able to reset the floating label in the empty state.
-    _patchInputValue() {
-      const e = this._input, t = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e), "value");
-      if (!t || !t.set || !t.get)
-        return;
-      S.set(e, t);
-      const { get: r, set: p } = t, E = () => this._checkAndUpdateInputEmpty();
-      Object.defineProperty(e, "value", {
-        ...t,
-        get() {
-          return r.call(this);
-        },
-        set(ce) {
-          p.call(this, ce), E();
-        }
-      });
-    }
-    _unpatchInputValue() {
-      const e = this._input, t = S.get(e);
-      t && (Object.defineProperty(e, "value", t), S.delete(e));
-    }
-    _checkAndUpdateInputEmpty() {
-      var e;
-      this.toggleAttribute("data-input-empty", this._floatingLabelSupportedInputElements.includes((e = this._input) == null ? void 0 : e.localName) && this._isInputEmpty());
-    }
-    _isInputEmpty() {
-      var e, t, r, p, E;
-      return this._input instanceof HTMLInputElement ? this._floatingLabelSupportedInputTypes.includes(this._input.type) && this._isInputValueEmpty() : this._input instanceof HTMLSelectElement ? ((r = (t = (e = this._input.selectedOptions) == null ? void 0 : e.item(0)) == null ? void 0 : t.label) == null ? void 0 : r.trim()) === "" : ((p = this._input) == null ? void 0 : p.localName) === "sbb-select" ? ((E = this._input.getDisplayValue()) == null ? void 0 : E.trim()) === "" : this._isInputValueEmpty();
-    }
-    _isInputValueEmpty() {
-      const e = this._input.value;
-      return ["", void 0, null].includes(e) || Array.isArray(e) && e.length === 0;
-    }
-    _assignSlots() {
-      this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label")), this.querySelectorAll("sbb-form-error:not([slot])").forEach((e) => e.setAttribute("slot", "error"));
-    }
-    _readInputState() {
-      this._input && (this.toggleAttribute("data-readonly", this._input.hasAttribute("readonly")), this.toggleAttribute("data-disabled", this._input.hasAttribute("disabled")), this.toggleAttribute("data-invalid", this._input.hasAttribute("data-sbb-invalid") || this._input.classList.contains("sbb-invalid") || this._input.classList.contains("ng-touched") && this._input.classList.contains("ng-invalid")), this.toggleAttribute("data-has-popup-open", this._input.hasAttribute("data-expanded")));
-    }
-    /**
-     * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
-     */
-    _onSlotErrorChange(e) {
-      this._errorElements = e.target.assignedElements();
-      for (const t of this._errorElements)
-        t.id || (t.id = `sbb-form-field-error-${++Ae}`), t.role || (t.role = "status", xe && t.setAttribute("role", "status"));
-      this._applyAriaDescribedby(), this.toggleAttribute("data-has-error", !!this._errorElements.length), this._syncNegative();
-    }
-    _applyAriaDescribedby() {
-      const e = [];
-      this._originalInputAriaDescribedby && e.push(this._originalInputAriaDescribedby), this._errorElements.length && this._errorElements.forEach((r) => e.push(r.id));
-      const t = e.join(" ");
-      this._input && ye(this._input, "aria-describedby", t);
-    }
-    /** Manually reset the form field. Currently, this only resets the floating label. */
-    reset() {
-      this._checkAndUpdateInputEmpty();
-    }
-    /** Manually clears the input value. It only works for inputs, selects are not supported. */
-    clear() {
-      var e;
-      ((e = this._input) == null ? void 0 : e.localName) === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
-    }
-    _syncNegative() {
-      var e;
-      (e = this.querySelectorAll) == null || e.call(this, "sbb-form-error,sbb-mini-button,sbb-popover-trigger,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid").forEach((t) => t.toggleAttribute("negative", this.negative));
-    }
-    render() {
-      var e;
-      return I`
-      <div class="sbb-form-field__space-wrapper">
-        ${/* Queried by id from the autocomplete/select to be used as the anchor element */
-      ""}
-        <div @click=${this._handleWrapperClick} class="sbb-form-field__wrapper" id="overlay-anchor">
-          <slot name="prefix" @slotchange=${this._syncNegative}></slot>
-          <div class="sbb-form-field__input-container">
-            <span class="sbb-form-field__label-spacer" aria-hidden="true"></span>
-            <span class="sbb-form-field__label">
-              <span class="sbb-form-field__label-ellipsis">
-                <slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
-                ${this.optional ? I` <span aria-hidden="true"> ${we[this._language.current]} </span>` : ne}
-              </span>
-            </span>
-            <div class="sbb-form-field__input">
-              <slot @slotchange=${this._onSlotInputChange}></slot>
-            </div>
-            ${["select", "sbb-select"].includes((e = this._input) == null ? void 0 : e.localName) ? I`<sbb-icon
-                  name="chevron-small-down-small"
-                  class="sbb-form-field__select-input-icon"
-                ></sbb-icon>` : ne}
-          </div>
-          <slot name="suffix" @slotchange=${this._syncNegative}></slot>
-        </div>
-
-        <div class="sbb-form-field__error">
-          <slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
-        </div>
-      </div>
-    `;
-    }
-  }, m = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), x = new WeakMap(), y = new WeakMap(), w = new WeakMap(), k = new WeakMap(), z = new WeakMap(), f = l, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
-    N = [h({ attribute: "error-space", reflect: !0 })], O = [A(), h({ type: Boolean })], $ = [h({ reflect: !0 })], V = [A(), h({ reflect: !0, type: Boolean })], P = [h({ reflect: !0 })], G = [A(), h({ attribute: "hidden-label", reflect: !0, type: Boolean })], J = [A(), h({ attribute: "floating-label", reflect: !0, type: Boolean })], X = [L()], te = [L()], se = [L()], c(l, null, N, { kind: "accessor", name: "errorSpace", static: !1, private: !1, access: { has: (t) => "errorSpace" in t, get: (t) => t.errorSpace, set: (t, r) => {
-      t.errorSpace = r;
-    } }, metadata: e }, D, T), c(l, null, O, { kind: "accessor", name: "optional", static: !1, private: !1, access: { has: (t) => "optional" in t, get: (t) => t.optional, set: (t, r) => {
-      t.optional = r;
-    } }, metadata: e }, F, U), c(l, null, $, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
-      t.size = r;
-    } }, metadata: e }, M, B), c(l, null, V, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, r) => {
-      t.borderless = r;
-    } }, metadata: e }, j, H), c(l, null, P, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, r) => {
-      t.width = r;
-    } }, metadata: e }, R, q), c(l, null, G, { kind: "accessor", name: "hiddenLabel", static: !1, private: !1, access: { has: (t) => "hiddenLabel" in t, get: (t) => t.hiddenLabel, set: (t, r) => {
-      t.hiddenLabel = r;
-    } }, metadata: e }, W, Y), c(l, null, J, { kind: "accessor", name: "floatingLabel", static: !1, private: !1, access: { has: (t) => "floatingLabel" in t, get: (t) => t.floatingLabel, set: (t, r) => {
-      t.floatingLabel = r;
-    } }, metadata: e }, K, Q), c(l, null, X, { kind: "accessor", name: "_errorElements", static: !1, private: !1, access: { has: (t) => "_errorElements" in t, get: (t) => t._errorElements, set: (t, r) => {
-      t._errorElements = r;
-    } }, metadata: e }, Z, ee), c(l, null, te, { kind: "accessor", name: "_input", static: !1, private: !1, access: { has: (t) => "_input" in t, get: (t) => t._input, set: (t, r) => {
-      t._input = r;
-    } }, metadata: e }, re, ie), c(l, null, se, { kind: "accessor", name: "_label", static: !1, private: !1, access: { has: (t) => "_label" in t, get: (t) => t._label, set: (t, r) => {
-      t._label = r;
-    } }, metadata: e }, oe, le), c(null, a = { value: f }, o, { kind: "class", name: f.name, metadata: e }, null, b), f = a.value, e && Object.defineProperty(f, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = Ee, s(f, b), f;
-})();
+import { SbbFormFieldElement as o } from "./form-field/form-field.js";
 export {
-  Be as SbbFormFieldElement
+  o as SbbFormFieldElement
 };

package/form-field.d.ts

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

package/form-field.d.ts.map

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

package/form-field.js

@@ -1,2 +1,6 @@
-export * from "./form-field/form-field.js";
-export * from "./form-field/form-field-clear.js";
+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";
+export {
+  l as SbbFormFieldClearElement,
+  m as SbbFormFieldElement
+};

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

@@ -0,0 +1,50 @@
+var c = (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 {
+    constructor() {
+      super(...arguments);
+      m(this, o, v(this, b, "medium"));
+      v(this, d);
+    }
+    /**
+     * Used to set the minimum breakpoint from which the text is displayed.
+     * E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra,
+     * and hidden for all the others.
+     */
+    get expandFrom() {
+      return l(this, o);
+    }
+    set expandFrom(n) {
+      p(this, o, n);
+    }
+    renderTemplate() {
+      return u`
+        <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>
+      `;
+    }
+  }, o = new WeakMap(), (() => {
+    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    t = [x({ attribute: "expand-from", reflect: !0 })], g(r, null, t, { kind: "accessor", name: "expandFrom", static: !1, private: !1, access: { has: (s) => "expandFrom" in s, get: (s) => s.expandFrom, set: (s, f) => {
+      s.expandFrom = f;
+    } }, metadata: n }, b, d), n && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
+  })(), r.styles = y, r;
+})();
+export {
+  j as SbbHeaderActionCommonElementMixin
+};

package/header/common.d.ts

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

package/header/common.d.ts.map

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

package/header/common.js

@@ -1,50 +1,4 @@
-var c = (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, r) => (h(e, i, "write to private field"), r ? r.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:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-action-base:after{content:"";position:absolute;border-bottom:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}@media (max-width: -.0625rem){:host([expand-from=zero]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`, j = (e) => (() => {
-  var o, t;
-  let a = w(e), r, b = [], d = [];
-  return t = class extends a {
-    constructor() {
-      super(...arguments);
-      m(this, o, v(this, b, "medium"));
-      v(this, d);
-    }
-    /**
-     * Used to set the minimum breakpoint from which the text is displayed.
-     * E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra,
-     * and hidden for all the others.
-     */
-    get expandFrom() {
-      return l(this, o);
-    }
-    set expandFrom(n) {
-      p(this, o, n);
-    }
-    renderTemplate() {
-      return u`
-        <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>
-      `;
-    }
-  }, o = new WeakMap(), (() => {
-    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    r = [x({ attribute: "expand-from", reflect: !0 })], g(t, null, r, { 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(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
-  })(), t.styles = y, t;
-})();
+import { SbbHeaderActionCommonElementMixin as m } from "./common/header-action-common.js";
 export {
-  j as SbbHeaderActionCommonElementMixin
+  m as SbbHeaderActionCommonElementMixin
 };

package/header/header/header.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+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.
@@ -15,9 +15,7 @@ export declare class SbbHeaderElement extends SbbHeaderElement_base {
      */
     accessor expanded: boolean;
     /** The element's id or the element on which the scroll listener is attached. */
-    set scrollOrigin(value: string | HTMLElement | Document);
-    get scrollOrigin(): string | HTMLElement | Document;
-    private _scrollOrigin;
+    accessor scrollOrigin: string | HTMLElement | Document;
     /** Whether the header should hide and show on scroll. */
     accessor hideOnScroll: boolean;
     /**
@@ -30,13 +28,14 @@ export declare class SbbHeaderElement extends SbbHeaderElement_base {
     private _scrollEventsController;
     private _scrollFunction;
     private _lastScroll;
-    private _updateScrollOrigin;
+    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;
-    /** Sets the value of `_scrollElement` and `_scrollFunction` and possibly adds the function on the correct element. */
-    private _setListenerOnScrollElement;
+    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. */

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAY3F;;;;;;GAMG;AACH,qBAEM,gBAAiB,SAAQ,qBAA6B;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,gFAAgF;IAChF,IACW,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,EAI7D;IACD,IAAW,YAAY,IAAI,MAAM,GAAG,WAAW,GAAG,QAAQ,CAEzD;IACD,OAAO,CAAC,aAAa,CAAiE;IAEtF,yDAAyD;IACzD,SAEgB,YAAY,EAAE,OAAO,CAAS;IAE9C;;;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;IAExB,OAAO,CAAC,mBAAmB;IAY3B,gGAAgG;IAChF,iBAAiB,IAAI,IAAI;IAMzC,2DAA2D;IAC3C,oBAAoB,IAAI,IAAI;IAK5C,sHAAsH;IACtH,OAAO,CAAC,2BAA2B;IAWnC,wDAAwD;IACxD,OAAO,CAAC,kBAAkB;IAI1B,2DAA2D;IAC3D,OAAO,CAAC,yBAAyB;IAOjC;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IA8CvB,uEAAuE;IACvE,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;cAgBP,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,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"}