@sbb-esta/lyne-elements 1.5.0 → 1.7.0

package/flip-card/flip-card/flip-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flip-card.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card/flip-card.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIzE,OAAO,kCAAkC,CAAC;;AAE1C;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,uBAA6B;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,iDAAiD;IACjD,IAAW,OAAO,IAAI,yBAAyB,CAE9C;IAED,iDAAiD;IACjD,IAAW,OAAO,IAAI,yBAAyB,CAE9C;IAED,0CAA0C;IACjC,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,SAAS,CAAmC;IAEpD,8CAA8C;IACvC,MAAM,IAAI,IAAI;cAOF,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"flip-card.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card/flip-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM3F,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGtD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,6BAA6B,CAAC;;AAErC;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,uBAA6B;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACoD,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,+CAA+C;IAC/C,SAAS,CAAC,IAAI,EAAE,YAAY,CAA0D;IAEtF,iDAAiD;IACjD,IAAW,OAAO,IAAI,yBAAyB,GAAG,IAAI,CAErD;IAED,iDAAiD;IACjD,IAAW,OAAO,IAAI,yBAAyB,GAAG,IAAI,CAErD;IAED,wCAAwC;IACxC,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,0CAA0C;IACjC,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAgBzC,8CAA8C;IACvC,MAAM,IAAI,IAAI;YAQP,mBAAmB;cAWd,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/flip-card/flip-card-details/flip-card-details.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-
 /**
  * Combined with a `sbb-flip-card`, it displays its content when the card is flipped.
  *

package/flip-card/flip-card-summary/flip-card-summary.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-
 export type SbbFlipCardImageAlignment = 'after' | 'below';
 /**
  * Combined with a `sbb-flip-card`, it displays its content when the card is not flipped.

package/flip-card/flip-card-summary.js

@@ -1,8 +1,8 @@
-import { css as d, LitElement as o, html as p } from "lit";
-import { property as b, customElement as g } from "lit/decorators.js";
+import { css as n, LitElement as o, html as b } from "lit";
+import { property as p, customElement as g } from "lit/decorators.js";
 import { hostAttributes as f } from "../core/decorators.js";
-const c = d`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;position:absolute;pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:1fr;grid-template-rows:auto 1fr;width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media (min-width: 37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (min-width: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}.sbb-flip-card-summary--image-wrapper{max-height:var(--sbb-flip-card-min-height);grid-area:2/1/3/2}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted(img){object-fit:cover;width:100%;height:100%}::slotted(sbb-image){width:100%;height:100%}`;
-var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (i, e, a, t) => {
+const c = n`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;position:absolute;pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:1fr;grid-template-rows:auto 1fr;width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media (min-width: 37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (min-width: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}.sbb-flip-card-summary--image-wrapper{max-height:var(--sbb-flip-card-min-height);grid-area:2/1/3/2}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted(img){object-fit:cover;width:100%;height:100%}::slotted(sbb-image){--sbb-image-border-radius: 0;--sbb-image-aspect-ratio: auto;width:100%;height:100%}`;
+var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, d = (i, e, a, t) => {
   for (var r = t > 1 ? void 0 : t ? h(e, a) : e, m = i.length - 1, l; m >= 0; m--)
     (l = i[m]) && (r = (t ? l(e, a, r) : l(r)) || r);
   return t && r && u(e, a, r), r;
@@ -16,7 +16,7 @@ let s = class extends o {
     super.willUpdate(i), i.has("imageAlignment") && ((a = (e = this.closest) == null ? void 0 : e.call(this, "sbb-flip-card")) == null || a.setAttribute("data-image-alignment", this.imageAlignment));
   }
   render() {
-    return p`
+    return b`
       <div class="sbb-flip-card-summary">
         <slot></slot>
         <div class="sbb-flip-card-summary--image-wrapper">
@@ -27,10 +27,10 @@ let s = class extends o {
   }
 };
 s.styles = c;
-n([
-  b({ attribute: "image-alignment", reflect: !0 })
+d([
+  p({ attribute: "image-alignment", reflect: !0 })
 ], s.prototype, "imageAlignment", 2);
-s = n([
+s = d([
   g("sbb-flip-card-summary"),
   f({
     slot: "summary"

package/flip-card/flip-card.js

@@ -1,58 +1,89 @@
-import { css as b, LitElement as d, html as p } from "lit";
-import { state as c, customElement as m } from "lit/decorators.js";
-import { SbbLanguageController as f } from "../core/controllers.js";
-import { i18nFlipCard as u, i18nReverseCard as h } from "../core/i18n.js";
-import { SbbHydrationMixin as g } from "../core/mixins.js";
-import "../button/secondary-button.js";
-const v = b`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-background-color: var(--sbb-color-cloud);--sbb-flip-card-border-radius: var(--sbb-border-radius-4x);--sbb-flip-card-min-height: 17.5rem;--sbb-flip-card-details-min-height: var(--sbb-flip-card-min-height);--sbb-flip-card-summary-transition-duration: var(--sbb-animation-duration-5x);--sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);--sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-4x);--sbb-flip-card-details-transition-delay: var(--sbb-disable-animation-zero-time);position:relative;display:block}@media (min-width: 52.5rem){:host{--sbb-flip-card-min-height: 20rem}}:host(:hover){--sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80)}:host([data-flipped]){--sbb-flip-card-background-color: var(--sbb-color-midnight);--sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-2x);--sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);--sbb-flip-card-summary-transition-delay: var(--sbb-disable-animation-zero-time);--sbb-flip-card-details-min-height: fit-content}:host([data-flipped]) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host([data-flipped]) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media (min-width: 37.5rem) and (max-width: 52.4375rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 15rem}}@media (min-width: 80rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;gap:var(--sbb-spacing-responsive-xs);min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s)}:host([data-flipped]) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}button{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;cursor:pointer;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-flip-card-border-radius)}button:not([data-focus-origin=mouse],[data-focus-origin=touch]):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (n, t, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? _(t, s) : t, e = n.length - 1, o; e >= 0; e--)
-    (o = n[e]) && (i = (a ? o(t, s, i) : o(i)) || i);
-  return a && i && y(t, s, i), i;
+import { css as l, LitElement as d, isServer as p, html as c } from "lit";
+import { property as m, state as f, customElement as u } from "lit/decorators.js";
+import { until as h } from "lit/directives/until.js";
+import { IS_FOCUSABLE_QUERY as g } from "../core/a11y.js";
+import { SbbConnectedAbortController as v, SbbLanguageController as y } from "../core/controllers.js";
+import { EventEmitter as _ } from "../core/eventing.js";
+import { i18nFlipCard as x, i18nReverseCard as w } from "../core/i18n.js";
+import { SbbHydrationMixin as C } from "../core/mixins.js";
+import "../button/secondary-button-static.js";
+import "../screen-reader-only.js";
+const S = l`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-background-color: var(--sbb-color-cloud);--sbb-flip-card-border-radius: var(--sbb-border-radius-4x);--sbb-flip-card-min-height: 17.5rem;--sbb-flip-card-details-min-height: var(--sbb-flip-card-min-height);--sbb-flip-card-summary-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x) );--sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-flip-card-details-transition-delay: 0s;position:relative;display:block}@media (min-width: 52.5rem){:host{--sbb-flip-card-min-height: 20rem}}@media (any-hover: hover){:host(:hover){--sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80)}}:host([data-flipped]){--sbb-flip-card-background-color: var(--sbb-color-midnight);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);--sbb-flip-card-summary-transition-delay: 0s;--sbb-flip-card-details-min-height: fit-content}:host([data-flipped]) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host([data-flipped]) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media (min-width: 37.5rem) and (max-width: 52.4375rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 15rem}}@media (min-width: 80rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;gap:var(--sbb-spacing-responsive-xs);min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:pointer}@media (forced-colors: active){.sbb-flip-card:after{content:"";border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}}@media (forced-colors: active) and (any-hover: hover){:host(:hover) .sbb-flip-card:after{border-color:Highlight}}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s)}:host([data-flipped]) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-flip-card-button{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;border-radius:var(--sbb-flip-card-border-radius);cursor:pointer}.sbb-flip-card-button:not([data-focus-origin=mouse],[data-focus-origin=touch]):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
+var k = Object.defineProperty, L = Object.getOwnPropertyDescriptor, n = (i, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? L(t, e) : t, o = i.length - 1, b; o >= 0; o--)
+    (b = i[o]) && (r = (s ? b(t, e, r) : b(r)) || r);
+  return s && r && k(t, e, r), r;
 };
-let r = class extends g(d) {
+let a = class extends C(d) {
   constructor() {
-    super(...arguments), this._flipped = !1, this._language = new f(this);
+    super(...arguments), this.flip = new _(this, a.events.flip), this._flipped = !1, this._abort = new v(this), this._language = new y(this);
   }
   /** Returns the slotted sbb-flip-card-summary. */
   get summary() {
-    return this.querySelector("sbb-flip-card-summary");
+    var i;
+    return (i = this.querySelector) == null ? void 0 : i.call(this, "sbb-flip-card-summary");
   }
   /** Returns the slotted sbb-flip-card-details. */
   get details() {
-    return this.querySelector("sbb-flip-card-details");
+    var i;
+    return (i = this.querySelector) == null ? void 0 : i.call(this, "sbb-flip-card-details");
+  }
+  /** Whether the flip card is flipped. */
+  get isFlipped() {
+    return this._flipped;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener(
+      "click",
+      (i) => {
+        var t, e;
+        (i.target === this || !((e = (t = i.target) == null ? void 0 : t.matches) != null && e.call(t, g))) && this.toggle();
+      },
+      { signal: this._abort.signal }
+    );
   }
   /** Toggles the state of the sbb-flip-card. */
   toggle() {
-    this._flipped = !this._flipped, this.toggleAttribute("data-flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped;
+    this._flipped = !this._flipped, this.toggleAttribute("data-flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped, this.flip.emit();
+  }
+  async _accessibilityLabel() {
+    var i, t;
+    return p ? "" : (await this.hydrationComplete, this._flipped ? w[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : (t = (i = this.summary) == null ? void 0 : i.textContent) == null ? void 0 : t.trim()) ?? ""}, ${x[this._language.current]}`);
   }
   render() {
-    return p`
+    return c`
       <div class="sbb-flip-card">
-        <slot name="summary" @slotchange=${() => this.summary.inert = this._flipped}></slot>
         <button
-          @click=${() => this.toggle()}
-          aria-label=${this._flipped ? h[this._language.current] : u[this._language.current]}
+          class="sbb-flip-card-button"
           aria-expanded=${this._flipped.toString()}
-        ></button>
+          type="button"
+        >
+          <sbb-screen-reader-only>${h(this._accessibilityLabel(), "")}</sbb-screen-reader-only>
+        </button>
+        <slot name="summary" @slotchange=${() => this.summary.inert = this._flipped}></slot>
         <slot name="details" @slotchange=${() => this.details.inert = !this._flipped}></slot>
-        <sbb-secondary-button
+        <sbb-secondary-button-static
           class="sbb-flip-card--toggle-button"
           icon-name=${this._flipped ? "cross-small" : "plus-small"}
-          @click=${() => this.toggle()}
           size="s"
-        ></sbb-secondary-button>
+        ></sbb-secondary-button-static>
       </div>
     `;
   }
 };
-r.styles = v;
-l([
-  c()
-], r.prototype, "_flipped", 2);
-r = l([
-  m("sbb-flip-card")
-], r);
+a.styles = S;
+a.events = {
+  flip: "flip"
+};
+n([
+  m({ attribute: "accessibility-label" })
+], a.prototype, "accessibilityLabel", 2);
+n([
+  f()
+], a.prototype, "_flipped", 2);
+a = n([
+  u("sbb-flip-card")
+], a);
 export {
-  r as SbbFlipCardElement
+  a as SbbFlipCardElement
 };

package/footer/footer.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbTitleLevel } from '../title.js';
-
 declare const SbbFooterElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
 /**
  * It displays a footer section for the page.

package/footer.js

@@ -2,7 +2,7 @@ import { css as m, LitElement as h, nothing as p } from "lit";
 import { property as l, customElement as v } from "lit/decorators.js";
 import { html as b, unsafeStatic as d } from "lit/static-html.js";
 import { SbbNegativeMixin as f } from "./core/mixins.js";
-const g = m`*,:before,:after{box-sizing:border-box}:host{--sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);--sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);--sbb-footer-background-color: var(--sbb-color-milk);--sbb-footer-clock-width: 4.75rem;--sbb-footer-color: var(--sbb-color-granite);--sbb-link-text-decoration: none;display:block}@media (min-width: 37.5rem){:host{--sbb-footer-clock-width: 7rem}}:host([negative]){--sbb-footer-background-color: var(--sbb-color-charcoal);--sbb-footer-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-footer{--sbb-text-font-size: var(--sbb-font-size-text-s);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);color:var(--sbb-footer-color);padding-block:var(--sbb-spacing-responsive-l);background-color:var(--sbb-footer-background-color)}@media (forced-colors: active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-footer-wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-footer-wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-footer__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}::slotted(.sbb-link-list-button-group){display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-6x);align-items:flex-start}:host([variant=clock-columns]) slot{display:grid;grid-template-columns:auto;grid-template-rows:auto;column-gap:var(--sbb-footer-gap-horizontal)}@media (min-width: 37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media (min-width: 80rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);margin-inline:auto;grid-template-columns:repeat(4,1fr)}}:host([variant=clock-columns]) ::slotted(*:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){align-self:start;grid-row:2}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:1;grid-column:4/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:3;grid-column:1/4;width:100%}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:4}}@media (min-width: 64rem){:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/4}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/5}}`;
+const g = m`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);--sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);--sbb-footer-background-color: var(--sbb-color-milk);--sbb-footer-clock-width: 4.75rem;--sbb-footer-color: var(--sbb-color-granite);--sbb-link-text-decoration: none}@media (min-width: 37.5rem){:host{--sbb-footer-clock-width: 7rem}}:host([negative]){--sbb-footer-background-color: var(--sbb-color-charcoal);--sbb-footer-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-footer{--sbb-text-font-size: var(--sbb-font-size-text-s);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);color:var(--sbb-footer-color);padding-block:var(--sbb-spacing-responsive-l);background-color:var(--sbb-footer-background-color)}@media (forced-colors: active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-footer-wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-footer-wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-footer__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}::slotted(.sbb-link-list-button-group){display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-6x);align-items:flex-start}:host([variant=clock-columns]) slot{display:grid;grid-template-columns:auto;grid-template-rows:auto;column-gap:var(--sbb-footer-gap-horizontal)}@media (min-width: 37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media (min-width: 80rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);margin-inline:auto;grid-template-columns:repeat(4,1fr)}}:host([variant=clock-columns]) ::slotted(*:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){align-self:start;grid-row:2}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:1;grid-column:4/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:3;grid-column:1/4;width:100%}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:4}}@media (min-width: 64rem){:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/4}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/5}}`;
 var u = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (i, e, a, r) => {
   for (var t = r > 1 ? void 0 : r ? w(e, a) : e, c = i.length - 1, n; c >= 0; c--)
     (n = i[c]) && (t = (r ? n(e, a, t) : n(t)) || t);

package/form-error/form-error.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-
 declare const SbbFormErrorElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
 /**
  * It displays an error message in the `sbb-form-field`.

package/form-error.js

@@ -1,7 +1,7 @@
 import { css as l, LitElement as a, html as c } from "lit";
 import { customElement as f } from "lit/decorators.js";
 import { SbbNegativeMixin as m } from "./core/mixins.js";
-const h = l`*,:before,:after{box-sizing:border-box}:host{--sbb-form-error-color: var(--sbb-color-red125);--sbb-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);--sbb-form-error-icon-size: 1.0625rem;--sbb-icon-svg-width: var(--sbb-form-error-icon-size);--sbb-icon-svg-height: var(--sbb-form-error-icon-size);--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);display:flex;align-items:flex-start;color:var(--sbb-form-error-color);min-height:var(--sbb-form-error-height)}@media (forced-colors: active){:host{--sbb-form-error-color: LinkText !important}}:host([negative]){--sbb-form-error-color: var(--sbb-color-red-mode-dark)}.form-error__icon{display:flex;align-items:center;height:var(--sbb-form-error-height);margin-inline-end:var(--sbb-spacing-fixed-1x)}.form-error-content{line-height:var(--sbb-typo-line-height-body-text);vertical-align:text-top}.form-error__icon-svg{stroke:currentcolor;height:var(--sbb-form-error-height)}`;
+const h = l`*,:before,:after{box-sizing:border-box}:host{--sbb-form-error-color: var(--sbb-color-red125);--sbb-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);--sbb-form-error-icon-size: 1.0625rem;--sbb-icon-svg-width: var(--sbb-form-error-icon-size);--sbb-icon-svg-height: var(--sbb-form-error-icon-size);display:flex;align-items:flex-start;color:var(--sbb-form-error-color);min-height:var(--sbb-form-error-height);--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)}@media (forced-colors: active){:host{--sbb-form-error-color: LinkText !important}}:host([negative]){--sbb-form-error-color: var(--sbb-color-red-mode-dark)}.form-error__icon{display:flex;align-items:center;height:var(--sbb-form-error-height);margin-inline-end:var(--sbb-spacing-fixed-1x)}.form-error-content{line-height:var(--sbb-typo-line-height-body-text);vertical-align:text-top}.form-error__icon-svg{stroke:currentcolor;height:var(--sbb-form-error-height)}`;
 var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, x = (t, r, o, s) => {
   for (var e = s > 1 ? void 0 : s ? g(r, o) : r, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (e = (s ? n(r, o, e) : n(e)) || e);

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

@@ -1,5 +1,4 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } 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.
@@ -26,7 +25,7 @@ export declare class SbbFormFieldElement extends SbbFormFieldElement_base {
     /** Indicates whether the input is optional. */
     optional?: boolean;
     /** Size variant, either l or m. */
-    size?: 'l' | 'm';
+    size?: 'l' | 'm' | 's';
     /** Whether to display the form field without a border. */
     borderless: boolean;
     /** Defines the width of the component:

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAehD,OAAO,eAAe,CAAC;;AAOvB;;;;;;;;GAQG;AACH,qBAEa,mBAAoB,SAAQ,wBAA+C;IACtF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAAmC;IAEjF,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAItC;IAEF,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAA6B;IAEpE,OAAO,CAAC,QAAQ,CAAC,oCAAoC,CAKnD;IAEF,OAAO,CAAC,QAAQ,CAAC,iCAAiC,CAQhD;IAEF;;;;OAIG;IAEI,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAU;IAEhD,+CAA+C;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvD,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D,0DAA0D;IACP,UAAU,UAAS;IAEtE;;+EAE2E;IACvC,KAAK,EAAE,SAAS,GAAG,UAAU,CAAa;IAE9E,wFAAwF;IACV,WAAW,UAAS;IAElG,4FAA4F;IACZ,aAAa,UACrF;IAER,qDAAqD;IAC5C,OAAO,CAAC,cAAc,CAAiB;IAEhD,oEAAoE;IACpE,OAAO,CAAC,6BAA6B,CAAC,CAAgB;IAEtD,8CAA8C;IACrC,OAAO,CAAC,MAAM,CAAC,CAAqD;IAE7E,+CAA+C;IACtC,OAAO,CAAC,MAAM,CAAC,CAAmB;IAE3C,iCAAiC;IACjC,IAAW,YAAY,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAExF;IAED,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAMjC;IAEF,OAAO,CAAC,qBAAqB,CAAyB;IAEtC,iBAAiB,IAAI,IAAI;cAStB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,kBAAkB;IAW1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA4B1B,OAAO,CAAC,yBAAyB;IA4BjC,OAAO,CAAC,sBAAsB;IAuD9B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAevB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,qBAAqB;IAiB7B,qFAAqF;IAC9E,KAAK,IAAI,IAAI;IAIpB,4FAA4F;IACrF,KAAK,IAAI,IAAI;IAQpB;;;OAGG;IACI,eAAe,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS;IAIxF,OAAO,CAAC,aAAa;cAMF,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAehD,OAAO,eAAe,CAAC;;AAOvB;;;;;;;;GAQG;AACH,qBAEa,mBAAoB,SAAQ,wBAA+C;IACtF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAAmC;IAEjF,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAItC;IAEF,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAA6B;IAEpE,OAAO,CAAC,QAAQ,CAAC,oCAAoC,CAKnD;IAEF,OAAO,CAAC,QAAQ,CAAC,iCAAiC,CAQhD;IAEF;;;;OAIG;IAEI,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAU;IAEhD,+CAA+C;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvD,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAO;IAEjE,0DAA0D;IACP,UAAU,UAAS;IAEtE;;+EAE2E;IACvC,KAAK,EAAE,SAAS,GAAG,UAAU,CAAa;IAE9E,wFAAwF;IACV,WAAW,UAAS;IAElG,4FAA4F;IACZ,aAAa,UACrF;IAER,qDAAqD;IAC5C,OAAO,CAAC,cAAc,CAAiB;IAEhD,oEAAoE;IACpE,OAAO,CAAC,6BAA6B,CAAC,CAAgB;IAEtD,8CAA8C;IACrC,OAAO,CAAC,MAAM,CAAC,CAAqD;IAE7E,+CAA+C;IACtC,OAAO,CAAC,MAAM,CAAC,CAAmB;IAE3C,iCAAiC;IACjC,IAAW,YAAY,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAExF;IAED,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAMjC;IAEF,OAAO,CAAC,qBAAqB,CAAyB;IAEtC,iBAAiB,IAAI,IAAI;cAStB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,kBAAkB;IAW1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA4B1B,OAAO,CAAC,yBAAyB;IA4BjC,OAAO,CAAC,sBAAsB;IAuD9B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAevB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,qBAAqB;IAiB7B,qFAAqF;IAC9E,KAAK,IAAI,IAAI;IAIpB,4FAA4F;IACrF,KAAK,IAAI,IAAI;IAQpB;;;OAGG;IACI,eAAe,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS;IAIxF,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.d.ts

@@ -1,6 +1,5 @@
 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.

package/form-field/form-field.js

@@ -1,22 +1,22 @@
-import { css as u, LitElement as m, html as d, nothing as f } from "lit";
-import { property as a, state as c, customElement as v } from "lit/decorators.js";
-import { sbbInputModalityDetector as _ } from "../core/a11y.js";
-import { SbbConnectedAbortController as g, SbbLanguageController as x } from "../core/controllers.js";
+import { css as h, LitElement as u, html as d, nothing as f } from "lit";
+import { property as b, state as c, customElement as v } from "lit/decorators.js";
+import { sbbInputModalityDetector as g } from "../core/a11y.js";
+import { SbbConnectedAbortController as _, SbbLanguageController as x } from "../core/controllers.js";
 import { slotState as y } from "../core/decorators.js";
 import { isFirefox as w, setOrRemoveAttribute as k } from "../core/dom.js";
 import { i18nOptional as A } from "../core/i18n.js";
-import { SbbNegativeMixin as E, SbbHydrationMixin as I } from "../core/mixins.js";
-import { AgnosticMutationObserver as z } from "../core/observers.js";
+import { SbbNegativeMixin as E, SbbHydrationMixin as z } from "../core/mixins.js";
+import { AgnosticMutationObserver as I } from "../core/observers.js";
 import "../icon.js";
-const L = u`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--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-label-size: calc( var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-input-size: calc( var(--sbb-font-size-text-m) * 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-input-size ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--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);display:inline-block}@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=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],[data-has-popup-open])){--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],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[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-has-popup-open])[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-font-size-text-xs) * var(--sbb-typo-line-height-body-text));margin-block-end:calc(-1 * var(--sbb-form-field-label-to-input-overlapping))}: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{--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);display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color)}: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-zero-time, 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-font-size-text-m);transform:translateY(.53125rem)}@media (min-width: 52.5rem){: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{transform:translateY(.65625rem)}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--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-font-size-text-m)!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))::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))::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))::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))::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)){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);position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}.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)}}: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))}`;
+const L = h`@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],[data-has-popup-open])){--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],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[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-has-popup-open],[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-zero-time, 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])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--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))::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))::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))::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))::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)){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))}`;
 var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
-  for (var s = l > 1 ? void 0 : l ? S(t, r) : t, b = e.length - 1, n; b >= 0; b--)
-    (n = e[b]) && (s = (l ? n(t, r, s) : n(s)) || s);
+  for (var s = l > 1 ? void 0 : l ? S(t, r) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (s = (l ? n(t, r, s) : n(s)) || s);
   return l && s && C(t, r, s), s;
 };
 let p = 0, N = 0;
-const h = ["sbb-autocomplete", "sbb-autocomplete-grid", "sbb-select"];
-let o = class extends E(I(m)) {
+const m = ["sbb-autocomplete", "sbb-autocomplete-grid", "sbb-select"];
+let o = class extends E(z(u)) {
   constructor() {
     super(...arguments), this._supportedNativeInputElements = ["input", "select", "textarea"], this._supportedInputElements = [
       ...this._supportedNativeInputElements,
@@ -35,7 +35,7 @@ let o = class extends E(I(m)) {
       "tel",
       "text",
       "url"
-    ], this.errorSpace = "none", this.size = "m", this.borderless = !1, this.width = "default", this.hiddenLabel = !1, this.floatingLabel = !1, this._errorElements = [], this._abort = new g(this), this._language = new x(this), this._formFieldAttributeObserver = new z(
+    ], this.errorSpace = "none", this.size = "m", this.borderless = !1, this.width = "default", this.hiddenLabel = !1, this.floatingLabel = !1, this._errorElements = [], this._abort = new _(this), this._language = new x(this), this._formFieldAttributeObserver = new I(
       (e) => {
         e.some((t) => t.type === "attributes") && this._readInputState();
       }
@@ -57,10 +57,10 @@ let o = class extends E(I(m)) {
     super.disconnectedCallback(), this._formFieldAttributeObserver.disconnect(), this._inputAbortController.abort();
   }
   _onPopupOpen({ target: e }) {
-    h.includes(e.localName) && this.toggleAttribute("data-has-popup-open", !0);
+    m.includes(e.localName) && this.toggleAttribute("data-has-popup-open", !0);
   }
   _onPopupClose({ target: e }) {
-    h.includes(e.localName) && this.removeAttribute("data-has-popup-open");
+    m.includes(e.localName) && this.removeAttribute("data-has-popup-open");
   }
   _handleWrapperClick(e) {
     var t, r;
@@ -114,7 +114,7 @@ let o = class extends E(I(m)) {
       () => {
         this.toggleAttribute("data-input-focused", !0), this.setAttribute(
           "data-focus-origin",
-          _.mostRecentModality ?? ""
+          g.mostRecentModality ?? ""
         );
       },
       {
@@ -232,25 +232,25 @@ let o = class extends E(I(m)) {
 };
 o.styles = L;
 i([
-  a({ attribute: "error-space", reflect: !0 })
+  b({ attribute: "error-space", reflect: !0 })
 ], o.prototype, "errorSpace", 2);
 i([
-  a({ type: Boolean })
+  b({ type: Boolean })
 ], o.prototype, "optional", 2);
 i([
-  a({ reflect: !0 })
+  b({ reflect: !0 })
 ], o.prototype, "size", 2);
 i([
-  a({ reflect: !0, type: Boolean })
+  b({ reflect: !0, type: Boolean })
 ], o.prototype, "borderless", 2);
 i([
-  a({ reflect: !0 })
+  b({ reflect: !0 })
 ], o.prototype, "width", 2);
 i([
-  a({ attribute: "hidden-label", reflect: !0, type: Boolean })
+  b({ attribute: "hidden-label", reflect: !0, type: Boolean })
 ], o.prototype, "hiddenLabel", 2);
 i([
-  a({ attribute: "floating-label", reflect: !0, type: Boolean })
+  b({ attribute: "floating-label", reflect: !0, type: Boolean })
 ], o.prototype, "floatingLabel", 2);
 i([
   c()

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

@@ -2,7 +2,6 @@ import { SbbActionBaseElement } from '../../core/base-elements.js';
 import { SbbHorizontalFrom } from '../../core/interfaces.js';
 import { AbstractConstructor } from '../../core/mixins.js';
 import { SbbIconNameMixinType } from '../../icon.js';
-
 export declare class SbbHeaderActionCommonElementMixinType implements Partial<SbbIconNameMixinType> {
     expandFrom: SbbHorizontalFrom;
     iconName?: string;

package/header/common.js

@@ -2,7 +2,7 @@ import { property as n } from "lit/decorators.js";
 import { html as s } from "lit/static-html.js";
 import { SbbIconNameMixin as d } from "../icon.js";
 import { css as b } from "lit";
-const h = b`*,:before,:after{box-sizing:border-box}:host{--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-black);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-first-item-margin-inline-start: calc(-1 * var(--sbb-header-action-padding-inline));display:inline-block;outline:none!important}@media (forced-colors: active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText}}@media (any-hover: hover){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-background-color: var(--sbb-color-milk);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}@media (forced-colors: active){:host([role=button]){--sbb-header-action-color: ButtonText}}:is(.sbb-header-button,.sbb-header-link){font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:is(.sbb-header-button,.sbb-header-link):before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media (forced-colors: active){:is(.sbb-header-button,.sbb-header-link):before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);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-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`;
+const h = b`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-black);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-first-item-margin-inline-start: calc(-1 * var(--sbb-header-action-padding-inline))}@media (forced-colors: active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText}}@media (any-hover: hover){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-background-color: var(--sbb-color-milk);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}@media (forced-colors: active){:host([role=button]){--sbb-header-action-color: ButtonText}}:is(.sbb-header-button,.sbb-header-link){font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:is(.sbb-header-button,.sbb-header-link):before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media (forced-colors: active){:is(.sbb-header-button,.sbb-header-link):before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);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-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`;
 var c = Object.defineProperty, l = (t, e, i, p) => {
   for (var a = void 0, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (a = o(e, i, a) || a);

package/header/header/header.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, LitElement, 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.

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

@@ -1,5 +1,4 @@
 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.

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

@@ -1,5 +1,4 @@
 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.

package/header/header.js

@@ -4,7 +4,7 @@ import { SbbFocusVisibleWithinController as m } from "../core/a11y.js";
 import { findReferencedElement as p } from "../core/dom.js";
 import { SbbHydrationMixin as g } from "../core/mixins.js";
 import "../logo.js";
-const _ = h`*,:before,:after{box-sizing:border-box}:host{--sbb-logo-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0;display:block;height:var(--sbb-header-height)}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-fixed]){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-visible]){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll][data-fixed][data-has-visible-focus-within]){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-color-white);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@media (forced-colors: active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=logo]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`;
+const _ = h`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-fixed]){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-visible]){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll][data-fixed][data-has-visible-focus-within]){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-color-white);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@media (forced-colors: active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=logo]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`;
 var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, t, s, r) => {
   for (var o = r > 1 ? void 0 : r ? x(t, s) : t, l = e.length - 1, n; l >= 0; l--)
     (n = e[l]) && (o = (r ? n(t, s, o) : n(o)) || o);

package/icon/icon-base.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-
 /**
  * @cssprop [--sbb-icon-svg-width=auto] - Can be used to set a custom width.
  * @cssprop [--sbb-icon-svg-height=auto] - Can be used to set a custom height.

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

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

package/icon/icon.d.ts

@@ -1,6 +1,5 @@
-import { PropertyValues } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { SbbIconBase } from './icon-base.js';
-
 /**
  * It displays an icon loaded from a registered namespace.
  */
@@ -12,9 +11,17 @@ export declare class SbbIconElement extends SbbIconBase {
      */
     name: string;
     private _defaultAriaLabel;
+    /**
+     * The sbb-angular library has a sbb-icon component as well. In order to provide
+     * compatibility with it (as some icons are used internally inside the other sbb-angular
+     * components) we need to check whether the attribute svgicon is used.
+     */
+    private _sbbAngularCompatibility;
     protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {