@sbb-esta/lyne-elements 4.0.0-next.2 → 4.0.0-next.4

package/flip-card/flip-card-details/flip-card-details.component.js

@@ -1,20 +1,22 @@
-import { __esDecorate as d, __runInitializers as n } from "tslib";
-import { MutationController as c } from "@lit-labs/observers/mutation-controller.js";
-import { css as b, LitElement as p, html as u } from "lit";
+import { __esDecorate as o, __runInitializers as n } from "tslib";
+import { MutationController as d } from "@lit-labs/observers/mutation-controller.js";
+import { css as b, LitElement as c, html as p } from "lit";
 import { customElement as f } from "lit/decorators.js";
 import { IS_FOCUSABLE_QUERY as m } from "../../core/a11y.js";
+import { SbbElementInternalsMixin as u } from "../../core/mixins.js";
 import { boxSizingStyles as v } from "../../core/styles.js";
-const y = b`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-flip-card-details-opacity: 0;--sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);--sbb-flip-card-details-padding-block-end: calc( var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m) );display:contents}.sbb-flip-card-details--wrapper{position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host([data-flipped]) .sbb-flip-card-details--wrapper{transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-details-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}`;
-let A = (() => {
+const y = b`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-flip-card-details-opacity: 0;--sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);--sbb-flip-card-details-padding-block-end: calc( var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m) );display:contents}.sbb-flip-card-details--wrapper{position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card-details--wrapper{transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-details-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}`;
+let w = (() => {
   var a;
-  let l = [f("sbb-flip-card-details")], e, i = [], t, r = p;
+  let l = [f("sbb-flip-card-details")], s, i = [], t, r = u(c);
   return a = class extends r {
     constructor() {
-      super(), this.addController(new c(this, {
+      super(), this.addController(new d(this, {
         config: {
           childList: !0,
           subtree: !0,
-          attributes: !0
+          attributes: !0,
+          attributeFilter: ["href", "tabindex", "disabled", "inert"]
         },
         callback: () => this._checkForSlottedActions()
       }));
@@ -23,11 +25,10 @@ let A = (() => {
       super.connectedCallback(), this.slot ||= "details";
     }
     _checkForSlottedActions() {
-      const s = "data-card-focusable";
-      Array.from(this.querySelectorAll?.(m) ?? []).forEach((o) => o.toggleAttribute(s, !0));
+      Array.from(this.querySelectorAll?.(m) ?? []).forEach((e) => e.classList.toggle("sbb-action", !0));
     }
     render() {
-      return u`
+      return p`
       <div class="sbb-flip-card-details--wrapper">
         <div class="sbb-flip-card-details">
           <slot></slot>
@@ -36,10 +37,10 @@ let A = (() => {
     `;
     }
   }, t = a, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    d(null, e = { value: t }, l, { kind: "class", name: t.name, metadata: s }, null, i), t = e.value, s && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    o(null, s = { value: t }, l, { kind: "class", name: t.name, metadata: e }, null, i), t = s.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), a.styles = [v, y], n(t, i), t;
 })();
 export {
-  A as SbbFlipCardDetailsElement
+  w as SbbFlipCardDetailsElement
 };

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

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

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { CSSResultGroup, 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.
@@ -11,7 +11,6 @@ export declare class SbbFlipCardSummaryElement extends LitElement {
     /** The position where to render the image. */
     accessor imageAlignment: SbbFlipCardImageAlignment;
     connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"flip-card-summary.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-summary/flip-card-summary.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,MAAM,MAAM,yBAAyB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,qBAEM,yBAA0B,SAAQ,UAAU;IAChD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,8CAA8C;IAC9C,SACgB,cAAc,EAAE,yBAAyB,CAAW;IAEpD,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}
+{"version":3,"file":"flip-card-summary.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-summary/flip-card-summary.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,MAAM,MAAM,yBAAyB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,qBAEM,yBAA0B,SAAQ,UAAU;IAChD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,8CAA8C;IAC9C,SACgB,cAAc,EAAE,yBAAyB,CAAW;IAEpD,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}

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

@@ -1,37 +1,34 @@
-var c = (a) => {
+var g = (a) => {
   throw TypeError(a);
 };
-var p = (a, e, t) => e.has(a) || c("Cannot " + t);
-var u = (a, e, t) => (p(a, e, "read from private field"), t ? t.call(a) : e.get(a)), f = (a, e, t) => e.has(a) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), h = (a, e, t, i) => (p(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
-import { __esDecorate as y, __runInitializers as n } from "tslib";
-import { css as w, LitElement as _, html as A } from "lit";
-import { customElement as x, property as S } from "lit/decorators.js";
+var p = (a, e, t) => e.has(a) || g("Cannot " + t);
+var u = (a, e, t) => (p(a, e, "read from private field"), t ? t.call(a) : e.get(a)), f = (a, e, t) => e.has(a) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), h = (a, e, t, i) => (p(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
+import { __esDecorate as y, __runInitializers as l } from "tslib";
+import { css as _, LitElement as w, html as x } from "lit";
+import { customElement as A, property as S } from "lit/decorators.js";
 import { boxSizingStyles as k } from "../../core/styles.js";
-const z = w`:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;min-height:var(--sbb-flip-card-min-height);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:minmax(0,1fr);grid-template-rows:auto minmax(0,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,minmax(0,1fr));grid-template-rows:1fr}}@media(min-width:64rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,minmax(0,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:64rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{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:64rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted([slot=image]){width:100%;height:100%}`;
-let U = (() => {
-  var m, s;
-  let a = [x("sbb-flip-card-summary")], e, t = [], i, o = _, d, b = [], g = [];
-  return s = class extends o {
+const z = _`:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;min-height:var(--sbb-flip-card-min-height);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:minmax(0,1fr);grid-template-rows:auto minmax(0,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,minmax(0,1fr));grid-template-rows:1fr}}@media(min-width:64rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,minmax(0,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:64rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{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:64rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted([slot=image]){width:100%;height:100%}`;
+let F = (() => {
+  var m, r;
+  let a = [A("sbb-flip-card-summary")], e, t = [], i, o = w, d, b = [], c = [];
+  return r = class extends o {
     constructor() {
       super(...arguments);
-      f(this, m, n(this, b, "after"));
-      n(this, g);
+      f(this, m, l(this, b, "after"));
+      l(this, c);
     }
     /** The position where to render the image. */
     get imageAlignment() {
       return u(this, m);
     }
-    set imageAlignment(r) {
-      h(this, m, r);
+    set imageAlignment(s) {
+      h(this, m, s);
     }
     connectedCallback() {
       super.connectedCallback(), this.slot ||= "summary";
     }
-    willUpdate(r) {
-      super.willUpdate(r), r.has("imageAlignment") && this.closest?.("sbb-flip-card")?.setAttribute("data-image-alignment", this.imageAlignment);
-    }
     render() {
-      return A`
+      return x`
       <div class="sbb-flip-card-summary">
         <slot></slot>
         <div class="sbb-flip-card-summary--image-wrapper">
@@ -40,13 +37,13 @@ let U = (() => {
       </div>
     `;
     }
-  }, m = new WeakMap(), i = s, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    d = [S({ attribute: "image-alignment", reflect: !0 })], y(s, null, d, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (l) => "imageAlignment" in l, get: (l) => l.imageAlignment, set: (l, v) => {
-      l.imageAlignment = v;
-    } }, metadata: r }, b, g), y(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: r }, null, t), i = e.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), s.styles = [k, z], n(i, t), i;
+  }, m = new WeakMap(), i = r, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    d = [S({ attribute: "image-alignment", reflect: !0 })], y(r, null, d, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (n) => "imageAlignment" in n, get: (n) => n.imageAlignment, set: (n, v) => {
+      n.imageAlignment = v;
+    } }, metadata: s }, b, c), y(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: s }, null, t), i = e.value, s && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), r.styles = [k, z], l(i, t), i;
 })();
 export {
-  U as SbbFlipCardSummaryElement
+  F as SbbFlipCardSummaryElement
 };

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

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

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

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

package/flip-card.d.ts

@@ -1,7 +1,7 @@
 /**
  * @entrypoint
  */
-export * from './flip-card/flip-card.js';
-export * from './flip-card/flip-card-summary.js';
-export * from './flip-card/flip-card-details.js';
+export * from './flip-card/flip-card.ts';
+export * from './flip-card/flip-card-summary.ts';
+export * from './flip-card/flip-card-details.ts';
 //# sourceMappingURL=flip-card.d.ts.map

package/footer/footer.component.d.ts

@@ -1,6 +1,6 @@
 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;
+import { SbbTitleLevel } from '../title.ts';
+declare const SbbFooterElement_base: import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbNegativeMixinType> & typeof LitElement;
 /**
  * It displays a footer section for the page.
  *

package/footer.d.ts

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

package/{development/form-error/form-error.component.d.ts → form-field/error/error.component.d.ts}

@@ -1,20 +1,20 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-declare const SbbFormErrorElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
+declare const SbbErrorElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & typeof LitElement;
 /**
  * It displays an error message in the `sbb-form-field`.
  *
  * @slot - Use this slot to display the error message.
  * @slot icon - Use this slot to override the default error icon.
  */
-export declare class SbbFormErrorElement extends SbbFormErrorElement_base {
+export declare class SbbErrorElement extends SbbErrorElement_base {
     static styles: CSSResultGroup;
     connectedCallback(): void;
     protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sbb-form-error': SbbFormErrorElement;
+        'sbb-error': SbbErrorElement;
     }
 }
 export {};
-//# sourceMappingURL=form-error.component.d.ts.map
+//# sourceMappingURL=error.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/error/error.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAUvC;;;;;GAKG;AACH,qBAEM,eAAgB,SAAQ,oBAA4B;IACxD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzD,iBAAiB,IAAI,IAAI;cAStB,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/form-field/error/error.component.js

@@ -0,0 +1,47 @@
+import { __esDecorate as l, __runInitializers as n } from "tslib";
+import { css as b, LitElement as c, html as h } from "lit";
+import { customElement as m } from "lit/decorators.js";
+import { SbbNegativeMixin as g } from "../../core/mixins.js";
+import { boxSizingStyles as v } from "../../core/styles.js";
+const f = b`:host{--sbb-error-color: var(--sbb-color-error);--sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em);--sbb-error-icon-size: 1.0625rem;--sbb-icon-svg-width: var(--sbb-error-icon-size);--sbb-icon-svg-height: var(--sbb-error-icon-size);display:flex;align-items:flex-start;color:var(--sbb-error-color);min-height:var(--sbb-error-height);--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}@media(forced-colors:active){:host{--sbb-error-color: LinkText !important}}:host([negative]){--sbb-error-color: var(--sbb-color-red85)}.error__icon{display:flex;align-items:center;height:var(--sbb-error-height);margin-inline-end:var(--sbb-spacing-fixed-1x)}.error-content{line-height:var(--sbb-typo-line-height-text);vertical-align:text-top}.error__icon-svg{stroke:currentcolor;height:var(--sbb-error-height)}`;
+let p = 0, z = (() => {
+  var t;
+  let a = [m("sbb-error")], s, i = [], e, o = g(c);
+  return t = class extends o {
+    connectedCallback() {
+      super.connectedCallback(), this.id ||= `sbb-error-${p++}`;
+      const r = this.closest?.("sbb-form-field");
+      r && (this.negative = r.hasAttribute("negative"));
+    }
+    render() {
+      return h`
+      <span class="error__icon">
+        <slot name="icon">
+          <svg
+            class="error__icon-svg"
+            aria-hidden="true"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line x1="7" y1="3" x2="7" y2="8.5" />
+            <line x1="7" y1="10" x2="7" y2="11" />
+            <circle cx="7" cy="7" r="6.5" />
+          </svg>
+        </slot>
+      </span>
+      <span class="error-content">
+        <slot></slot>
+      </span>
+    `;
+    }
+  }, e = t, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    l(null, s = { value: e }, a, { kind: "class", name: e.name, metadata: r }, null, i), e = s.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), t.styles = [v, f], n(e, i), e;
+})();
+export {
+  z as SbbErrorElement
+};

package/form-field/error.d.ts

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

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

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

package/form-field/error.js

@@ -0,0 +1,4 @@
+import { SbbErrorElement as o } from "./error/error.component.js";
+export {
+  o as SbbErrorElement
+};

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

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-/** An interface which allows a control to work inside of a `SbbFormField`. */
+/** An interface which allows a control to work inside a `SbbFormField`. */
 export interface SbbFormFieldElementControl {
     /** The id of the form field control. */
     readonly id: string;
@@ -20,7 +20,7 @@ export declare class SbbFormFieldControlEvent extends Event {
     get control(): SbbFormFieldElementControl | null;
     constructor(control: SbbFormFieldElementControl | null);
 }
-declare const SbbFormFieldElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
+declare const SbbFormFieldElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbElementInternalsMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbHydrationMixinType> & typeof LitElement & import('../../core/mixins.ts').SbbElementInternalsConstructor;
 /**
  * It wraps an input element adding label, errors, icon, etc.
  *
@@ -99,7 +99,7 @@ export declare class SbbFormFieldElement extends SbbFormFieldElement_base {
     private _isInputEmpty;
     private _isInputValueEmpty;
     /**
-     * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
+     * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-error> instances.
      */
     private _onSlotErrorChange;
     private _assignErrorMessageElements;

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field/form-field.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field/form-field.component.ts"],"names":[],"mappings":"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"}

package/form-field/form-field/form-field.component.js

@@ -177,10 +177,10 @@ let je = (() => {
       this._assignSlots(), this._connectInputElement();
     }
     _assignSlots() {
-      this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label")), this.querySelectorAll("sbb-form-error:not([slot])").forEach((e) => e.setAttribute("slot", "error"));
+      this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label")), this.querySelectorAll("sbb-error:not([slot])").forEach((e) => e.setAttribute("slot", "error"));
     }
     _connectInputElement() {
-      let e = null;
+      let e;
       if (this._control?.id)
         e = this.getRootNode().getElementById(this._control.id);
       else {
@@ -250,7 +250,7 @@ let je = (() => {
       return ["", void 0, null].includes(e) || Array.isArray(e) && e.length === 0;
     }
     /**
-     * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
+     * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-error> instances.
      */
     _onSlotErrorChange(e) {
       const t = e.target.assignedElements();
@@ -271,7 +271,7 @@ let je = (() => {
       this._input?.localName === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
     }
     _syncNegative() {
-      this.querySelectorAll?.("sbb-form-error,sbb-mini-button,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group").forEach((e) => e.toggleAttribute("negative", this.negative));
+      this.querySelectorAll?.("sbb-error,sbb-mini-button,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group").forEach((e) => e.toggleAttribute("negative", this.negative));
     }
     _syncSize() {
       this.querySelectorAll?.("sbb-autocomplete,sbb-autocomplete-grid,sbb-select").forEach((e) => e.size = this.size === "s" ? "s" : "m");

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

@@ -1,6 +1,6 @@
 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;
+import { SbbButtonBaseElement } from '../../core/base-elements.ts';
+declare const SbbFormFieldClearElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & typeof SbbButtonBaseElement;
 /**
  * Combined with `sbb-form-field`, it displays a button which clears the input value.
  */

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

@@ -3,27 +3,27 @@ import { html as m } from "lit";
 import { customElement as c } from "lit/decorators.js";
 import { miniButtonStyle as u } from "../../button/common.js";
 import { SbbButtonBaseElement as b } from "../../core/base-elements.js";
-import { SbbLanguageController as d } from "../../core/controllers.js";
-import { i18nClearInput as f } from "../../core/i18n.js";
-import { SbbNegativeMixin as p } from "../../core/mixins.js";
+import { SbbLanguageController as p } from "../../core/controllers.js";
+import { i18nClearInput as d } from "../../core/i18n.js";
+import { SbbNegativeMixin as f } from "../../core/mixins.js";
 import { boxSizingStyles as h } from "../../core/styles.js";
 import "../../icon.js";
 let x = (() => {
   var i;
-  let s = [c("sbb-form-field-clear")], l, a = [], e, r = p(b);
+  let s = [c("sbb-form-field-clear")], l, a = [], e, r = f(b);
   return i = class extends r {
     constructor() {
-      super(), this._language = new d(this), this.addEventListener?.("click", () => this._handleClick());
+      super(), this._language = new p(this), this.addEventListener?.("click", () => this._handleClick());
     }
     connectedCallback() {
-      super.connectedCallback(), this._formField = this.closest("sbb-form-field, [data-form-field]"), this._formField && (this.slot ||= "suffix", this.negative = this._formField.hasAttribute("negative"));
+      super.connectedCallback(), this._formField = this.closest("sbb-form-field"), this._formField && (this.slot ||= "suffix", this.negative = this._formField.hasAttribute("negative"));
     }
     async _handleClick() {
       const t = this._formField?.inputElement;
       !t || t.localName !== "input" || (this._formField?.clear(), t.focus(), t.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 })));
     }
     willUpdate(t) {
-      super.willUpdate(t), this.internals.ariaLabel = f[this._language.current];
+      super.willUpdate(t), this.internals.ariaLabel = d[this._language.current];
     }
     renderTemplate() {
       return m`<sbb-icon name="cross-small"></sbb-icon>`;

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

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

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

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

package/form-field.d.ts

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

package/form-field.d.ts.map

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

package/form-field.js

@@ -1,7 +1,9 @@
-import { SbbFormFieldControlEvent as r, SbbFormFieldElement as l } from "./form-field/form-field/form-field.component.js";
-import { SbbFormFieldClearElement as b } from "./form-field/form-field-clear/form-field-clear.component.js";
+import { SbbErrorElement as o } from "./form-field/error/error.component.js";
+import { SbbFormFieldControlEvent as b, SbbFormFieldElement as l } from "./form-field/form-field/form-field.component.js";
+import { SbbFormFieldClearElement as F } from "./form-field/form-field-clear/form-field-clear.component.js";
 export {
-  b as SbbFormFieldClearElement,
-  r as SbbFormFieldControlEvent,
+  o as SbbErrorElement,
+  F as SbbFormFieldClearElement,
+  b as SbbFormFieldControlEvent,
   l as SbbFormFieldElement
 };

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

@@ -1,7 +1,7 @@
-import { SbbActionBaseElement } from '../../core/base-elements.js';
-import { SbbHorizontalFrom } from '../../core/interfaces.js';
-import { AbstractConstructor } from '../../core/mixins.js';
-declare const SbbHeaderActionCommonElementMixinType_base: AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbActionBaseElement;
+import { SbbActionBaseElement } from '../../core/base-elements.ts';
+import { SbbHorizontalFrom } from '../../core/interfaces.ts';
+import { AbstractConstructor } from '../../core/mixins.ts';
+declare const SbbHeaderActionCommonElementMixinType_base: AbstractConstructor<import('../../icon.ts').SbbIconNameMixinType> & typeof SbbActionBaseElement;
 export declare class SbbHeaderActionCommonElementMixinType extends SbbHeaderActionCommonElementMixinType_base {
     accessor expandFrom: SbbHorizontalFrom;
 }

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

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

package/header/common.d.ts

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