@sbb-esta/lyne-elements 1.12.0 → 1.13.0

package/file-selector.js

@@ -1,40 +1,59 @@
-import { css as g, LitElement as m, nothing as h } from "lit";
-import { property as o, state as v, customElement as y } from "lit/decorators.js";
+import { css as _, LitElement as g, nothing as h } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
 import { ref as b } from "lit/directives/ref.js";
-import { html as a, unsafeStatic as c } from "lit/static-html.js";
-import { sbbInputModalityDetector as _ } from "./core/a11y.js";
-import { SbbLanguageController as x } from "./core/controllers.js";
-import { slotState as $ } from "./core/decorators.js";
-import { EventEmitter as z } from "./core/eventing.js";
-import { i18nFileSelectorCurrentlySelected as u, i18nFileSelectorButtonLabel as p, i18nFileSelectorSubtitleLabel as E, i18nFileSelectorDeleteFile as w } from "./core/i18n.js";
-import { SbbDisabledMixin as F } from "./core/mixins.js";
+import { html as n, unsafeStatic as c } from "lit/static-html.js";
+import { sbbInputModalityDetector as u } from "./core/a11y.js";
+import { SbbLanguageController as v } from "./core/controllers.js";
+import { slotState as y } from "./core/decorators.js";
+import { EventEmitter as x, forwardEventToHost as E } from "./core/eventing.js";
+import { i18nFileSelectorCurrentlySelected as $, i18nFileSelectorButtonLabel as p, i18nFileSelectorSubtitleLabel as z, i18nFileSelectorDeleteFile as w } from "./core/i18n.js";
+import { SbbDisabledMixin as F, SbbFormAssociatedMixin as D } from "./core/mixins.js";
 import "./button/secondary-button.js";
 import "./button/secondary-button-static.js";
 import "./icon.js";
-const k = g`*,:before,:after{box-sizing:border-box}:host{--sbb-file-selector-color: var(--sbb-color-black);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-background-color: var(--sbb-color-white);--sbb-file-selector-border-color: var(--sbb-color-cloud);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media (forced-colors: active){:host([disabled]){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host([data-active]){--sbb-file-selector-background-color: var(--sbb-color-milk);--sbb-file-selector-border-color: var(--sbb-color-storm)}@media (forced-colors: active){:host([data-active]){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--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);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--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);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal)}:host(:not([data-slot-names~=error])) .sbb-file-selector__error{display:none}`;
-var M = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (e, t, s, n) => {
-  for (var r = n > 1 ? void 0 : n ? D(t, s) : t, f = e.length - 1, d; f >= 0; f--)
-    (d = e[f]) && (r = (n ? d(t, s, r) : d(r)) || r);
-  return n && r && M(t, s, r), r;
+const k = _`*,:before,:after{box-sizing:border-box}:host{--sbb-file-selector-color: var(--sbb-color-black);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-background-color: var(--sbb-color-white);--sbb-file-selector-border-color: var(--sbb-color-cloud);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media (forced-colors: active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host([data-active]){--sbb-file-selector-background-color: var(--sbb-color-milk);--sbb-file-selector-border-color: var(--sbb-color-storm)}@media (forced-colors: active){:host([data-active]){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--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);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--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);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal)}:host(:not([data-slot-names~=error])) .sbb-file-selector__error{display:none}`;
+var L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, s = (e, t, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? M(t, r) : t, f = e.length - 1, d; f >= 0; f--)
+    (d = e[f]) && (o = (a ? d(t, r, o) : d(o)) || o);
+  return a && o && L(t, r, o), o;
 };
-let i = class extends F(m) {
+let i = class extends F(D(g)) {
   constructor() {
-    super(...arguments), this.variant = "default", this.size = "m", this.multiple = !1, this.multipleMode = "default", this._fileChangedEvent = new z(
+    super(...arguments), this.variant = "default", this.size = "m", this.multiple = !1, this.multipleMode = "default", this._files = [], this._fileChangedEvent = new x(
       this,
       i.events.fileChangedEvent
-    ), this._counter = 0, this._suffixes = ["B", "kB", "MB", "GB", "TB"], this._language = new x(this);
+    ), this._counter = 0, this._suffixes = ["B", "kB", "MB", "GB", "TB"], this._language = new v(this);
+  }
+  set value(e) {
+    this._hiddenInput.value = e ?? "", e || (this.files = []);
+  }
+  get value() {
+    var e;
+    return (e = this._hiddenInput) == null ? void 0 : e.value;
+  }
+  set files(e) {
+    this._files = e ?? [];
+    const t = new DataTransfer();
+    this.files.forEach((r) => t.items.add(r)), this._hiddenInput.files = t.files, this.updateFormValue();
   }
-  /**
-   * Gets the currently selected files.
-   */
   get files() {
-    return this._files || [];
+    return this._files;
   }
   /**
-   * @deprecated use 'files' property instead
+   * @deprecated use the 'files' property instead
    */
   getFiles() {
-    return this._files || [];
+    return this.files;
+  }
+  formResetCallback() {
+    this.files = [];
+  }
+  formStateRestoreCallback(e, t) {
+    e && (this.files = e.map(([r, a]) => a));
+  }
+  updateFormValue() {
+    const e = new FormData();
+    this.files.forEach((t) => e.append(this.name, t)), this.internals.setFormValue(e);
   }
   _blockEvent(e) {
     e.stopPropagation(), e.preventDefault();
@@ -43,48 +62,50 @@ let i = class extends F(m) {
     return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
   }
   _onDragEnter(e) {
-    this._counter++, this.disabled || (this._setDragState(e.target, !0), this._blockEvent(e));
+    this._counter++, !this.disabled && !this.formDisabled && (this._setDragState(e.target, !0), this._blockEvent(e));
   }
   _onDragLeave(e) {
-    this._counter--, !this.disabled && e.target === this._dragTarget && this._counter === 0 && (this._setDragState(), this._blockEvent(e));
+    this._counter--, !this.disabled && !this.formDisabled && e.target === this._dragTarget && this._counter === 0 && (this._setDragState(), this._blockEvent(e));
   }
   _onFileDrop(e) {
-    this._counter = 0, this.disabled || (this._setDragState(), this._blockEvent(e), this._createFileList(e.dataTransfer.files));
+    this._counter = 0, !this.disabled && !this.formDisabled && (this._setDragState(), this._blockEvent(e), this._createFileList(e.dataTransfer.files));
   }
   _onFocus() {
-    _.mostRecentModality === "keyboard" && this._loadButton.toggleAttribute("data-focus-visible", !0);
+    u.mostRecentModality === "keyboard" && this._loadButton.toggleAttribute("data-focus-visible", !0);
   }
   _onBlur() {
-    _.mostRecentModality === "keyboard" && this._loadButton.removeAttribute("data-focus-visible");
+    u.mostRecentModality === "keyboard" && this._loadButton.removeAttribute("data-focus-visible");
   }
   _setDragState(e = void 0, t = !1) {
     this._dragTarget = e, this.toggleAttribute("data-active", t), this._loadButton.toggleAttribute("data-active", t);
   }
   _readFiles(e) {
     const t = e.target;
-    t.files && this._createFileList(t.files);
+    t.files && this._createFileList(t.files), E(e, this);
   }
   _createFileList(e) {
-    !this.multiple || this.multipleMode !== "persistent" || !this._files || this._files.length === 0 ? this._files = Array.from(e) : this._files = Array.from(e).filter(
-      (t) => this._files.findIndex((s) => this._checkFileEquality(t, s)) === -1
-    ).concat(this._files), this._liveRegion.innerText = u(this._files.map((t) => t.name))[this._language.current], this._fileChangedEvent.emit(this._files);
+    !this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = Array.from(e) : this.files = Array.from(e).filter(
+      // Remove duplicates
+      (t) => this.files.findIndex((r) => this._checkFileEquality(t, r)) === -1
+    ).concat(this.files), this._updateA11yLiveRegion(), this._fileChangedEvent.emit(this.files);
   }
   _removeFile(e) {
-    this._files = this._files.filter((s) => !this._checkFileEquality(e, s));
-    const t = new DataTransfer();
-    this._files.forEach((s) => t.items.add(s)), this._hiddenInput.files = t.files, this._liveRegion.innerText = u(this._files.map((s) => s.name))[this._language.current], this._fileChangedEvent.emit(this._files);
+    this.files = this.files.filter((t) => !this._checkFileEquality(e, t)), this._updateA11yLiveRegion(), this.dispatchEvent(new Event("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._fileChangedEvent.emit(this.files);
   }
   /** Calculates the correct unit for the file's size. */
   _formatFileSize(e) {
     const t = Math.floor(Math.log(e) / Math.log(1024));
     return `${(e / Math.pow(1024, t)).toFixed(0)} ${this._suffixes[t]}`;
   }
+  _updateA11yLiveRegion() {
+    this._liveRegion.innerText = $(this.files.map((e) => e.name))[this._language.current];
+  }
   _renderDefaultMode() {
-    return a`
+    return n`
       <sbb-secondary-button-static
         size=${this.size}
         icon-name="folder-open-small"
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.formDisabled}
         ${b((e) => {
       this._loadButton = e;
     })}
@@ -94,7 +115,7 @@ let i = class extends F(m) {
     `;
   }
   _renderDropzoneArea() {
-    return a`
+    return n`
       <span class="sbb-file-selector__dropzone-area">
         <span class="sbb-file-selector__dropzone-area--icon">
           <sbb-icon
@@ -103,12 +124,12 @@ let i = class extends F(m) {
         </span>
         <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
         <span class="sbb-file-selector__dropzone-area--subtitle">
-          ${E[this._language.current]}
+          ${z[this._language.current]}
         </span>
         <span class="sbb-file-selector__dropzone-area--button">
           <sbb-secondary-button-static
             size=${this.size}
-            ?disabled=${this.disabled}
+            ?disabled=${this.disabled || this.formDisabled}
             ${b((e) => {
       this._loadButton = e;
     })}
@@ -120,11 +141,11 @@ let i = class extends F(m) {
     `;
   }
   _renderFileList() {
-    const e = this._files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
-    return a`
+    const e = this.files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
+    return n`
       <${c(e.WRAPPER)} class="sbb-file-selector__file-list">
-        ${this._files.map(
-      (t) => a`
+        ${this.files.map(
+      (t) => n`
           <${c(e.ELEMENT)} class="sbb-file-selector__file">
             <span class="sbb-file-selector__file-details">
               <span class="sbb-file-selector__file-name">${t.name}</span>
@@ -143,7 +164,7 @@ let i = class extends F(m) {
   }
   render() {
     const e = this.accessibilityLabel ? `${p[this._language.current]} - ${this.accessibilityLabel}` : void 0;
-    return a`
+    return n`
       <div class="sbb-file-selector">
         <div
           class="sbb-file-selector__input-container"
@@ -157,7 +178,7 @@ let i = class extends F(m) {
             <input
               class="sbb-file-selector__visually-hidden"
               type="file"
-              ?disabled=${this.disabled}
+              ?disabled=${this.disabled || this.formDisabled}
               ?multiple=${this.multiple}
               accept=${this.accept || h}
               aria-label=${e || h}
@@ -175,7 +196,7 @@ let i = class extends F(m) {
           class="sbb-file-selector__visually-hidden"
           ${b((t) => this._liveRegion = t)}
         ></p>
-        ${this._files && this._files.length > 0 ? this._renderFileList() : h}
+        ${this.files.length > 0 ? this._renderFileList() : h}
         <div class="sbb-file-selector__error">
           <slot name="error"></slot>
         </div>
@@ -187,33 +208,36 @@ i.styles = k;
 i.events = {
   fileChangedEvent: "fileChanged"
 };
-l([
-  o()
+s([
+  l()
 ], i.prototype, "variant", 2);
-l([
-  o({ reflect: !0 })
+s([
+  l({ reflect: !0 })
 ], i.prototype, "size", 2);
-l([
-  o({ type: Boolean })
+s([
+  l({ type: Boolean })
 ], i.prototype, "multiple", 2);
-l([
-  o({ attribute: "multiple-mode" })
+s([
+  l({ attribute: "multiple-mode" })
 ], i.prototype, "multipleMode", 2);
-l([
-  o()
+s([
+  l()
 ], i.prototype, "accept", 2);
-l([
-  o({ attribute: "title-content" })
+s([
+  l({ attribute: "title-content" })
 ], i.prototype, "titleContent", 2);
-l([
-  o({ attribute: "accessibility-label" })
+s([
+  l({ attribute: "accessibility-label" })
 ], i.prototype, "accessibilityLabel", 2);
-l([
-  v()
-], i.prototype, "_files", 2);
-i = l([
-  y("sbb-file-selector"),
-  $()
+s([
+  l({ attribute: !1 })
+], i.prototype, "value", 1);
+s([
+  l({ attribute: !1 })
+], i.prototype, "files", 1);
+i = s([
+  m("sbb-file-selector"),
+  y()
 ], i);
 export {
   i as SbbFileSelectorElement

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

@@ -6,7 +6,7 @@ import { hostAttributes as f } from "../core/decorators.js";
 import { i18nClearInput as m } from "../core/i18n.js";
 import { SbbNegativeMixin as h } from "../core/mixins.js";
 import "../icon.js";
-const p = n`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-form-field-clear:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-active-background)}`;
+const p = n`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-form-field-clear:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-active-background)}`;
 var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, x = (o, t, b, a) => {
   for (var r = a > 1 ? void 0 : a ? k(t, b) : t, e = o.length - 1, s; e >= 0; e--)
     (s = o[e]) && (r = (a ? s(t, b, r) : s(r)) || r);

package/header/common.js

@@ -1,15 +1,15 @@
 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{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-action-icon-dimension: var(--sbb-size-icon-ui-small);--_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}}@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-zero, 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-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}@media (max-width: -.0625rem){:host([expand-from=zero]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}: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);
-  return a && c(e, i, a), a;
+import { SbbIconNameMixin as b } from "../icon.js";
+import { css as d } from "lit";
+const c = d`*,: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-action-icon-dimension: var(--sbb-size-icon-ui-small);--sbb-header-action-active-border-width: var(--sbb-border-width-2x);--sbb-header-action-active-border-color: var(--sbb-color-black);--sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);--sbb-header-action-active-border-scale: 0;--_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-icon-shift: .125rem;--sbb-header-first-item-margin-inline-start: calc( var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift) )}@media (forced-colors: active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText;--sbb-header-action-active-border-width: 0}}@media (any-hover: hover){:host(:hover:not(:active,[data-active],[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}}: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([role=button]){--sbb-header-action-color: ButtonText}}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media (forced-colors: active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-action-base:after{content:"";position:absolute;border-bottom:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}@media (max-width: -.0625rem){:host([expand-from=zero]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`;
+var h = Object.defineProperty, l = (r, e, i, p) => {
+  for (var a = void 0, t = r.length - 1, o; t >= 0; t--)
+    (o = r[t]) && (a = o(e, i, a) || a);
+  return a && h(e, i, a), a;
 };
-const v = (t) => {
-  const i = class i extends d(t) {
+const x = (r) => {
+  const i = class i extends b(r) {
     constructor() {
       super(...arguments), this.expandFrom = "medium";
     }
@@ -24,12 +24,12 @@ const v = (t) => {
       `;
     }
   };
-  i.styles = h;
+  i.styles = c;
   let e = i;
   return l([
     n({ attribute: "expand-from", reflect: !0 })
   ], e.prototype, "expandFrom"), e;
 };
 export {
-  v as SbbHeaderActionCommonElementMixin
+  x as SbbHeaderActionCommonElementMixin
 };

package/image/image.d.ts

@@ -28,6 +28,7 @@ export interface InterfaceImageAttributesSizesConfigMediaQuery {
  * @cssprop [--sbb-image-border-radius=var(--sbb-border-radius-4x)] - Can be used to override the
  * `borderRadius` property in case of different values for different viewports.
  * @cssprop [--sbb-image-object-position] - Can be used to set the object-position css property of the image itself if the image itself is cropped.
+ * @cssprop [--sbb-image-object-fit=cover] - Can be used to set the object-fit css property of the image itself if the image itself is cropped.
  */
 export declare class SbbImageElement extends LitElement {
     static styles: CSSResultGroup;

package/image/image.d.ts.map

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

package/image.js

@@ -2,9 +2,9 @@ import { css as y, LitElement as _, html as d, nothing as m } from "lit";
 import { property as s, eventOptions as k, customElement as v } from "lit/decorators.js";
 import { ref as $ } from "lit/directives/ref.js";
 import { hostContext as x } from "./core/dom.js";
-const w = 0, S = 359, P = 360, M = 599, z = 600, C = 839, B = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, E = 1440, T = 2579, I = 16, R = y`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-4x);margin:0;height:100%}.sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host([data-loaded]) .sbb-image__blurred{opacity:0}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:cover;object-position:var(--sbb-image-object-position);transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{display:flex;position:relative;overflow:hidden;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:var(--sbb-image-border-radius)}.sbb-image__caption{--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)}`;
-var h = Object.freeze, u = Object.defineProperty, j = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? j(t, r) : t, c = e.length - 1, b; c >= 0; c--)
+const w = 0, S = 359, P = 360, M = 599, z = 600, C = 839, B = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, E = 1440, T = 2579, j = 16, I = y`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-image-object-fit: cover;display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-4x);margin:0;height:100%}.sbb-image__img{opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host(:not([skip-lqip])) .sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0}:host([data-loaded]) .sbb-image__blurred{opacity:0}picture{display:contents}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:var(--sbb-image-object-fit);object-position:var(--sbb-image-object-position);transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{display:flex;position:relative;overflow:hidden;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:var(--sbb-image-border-radius)}.sbb-image__caption{--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)}`;
+var h = Object.freeze, u = Object.defineProperty, R = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
+  for (var n = i > 1 ? void 0 : i ? R(t, r) : t, c = e.length - 1, b; c >= 0; c--)
     (b = e[c]) && (n = (i ? b(t, r, n) : b(n)) || n);
   return i && n && u(t, r, n), n;
 }, A = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
@@ -34,7 +34,7 @@ const U = (e) => {
 }, H = {
   once: !0,
   passive: !0
-}, p = (e) => e / I, V = {
+}, p = (e) => e / j, q = {
   "sbb-breakpoint-zero-min": p(w),
   "sbb-breakpoint-zero-max": p(S),
   "sbb-breakpoint-micro-min": p(P),
@@ -78,7 +78,7 @@ let a = class extends _ {
     this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
   }
   _matchMediaQueryDesignToken(e) {
-    const t = V[e];
+    const t = q[e];
     return t ? `${t}rem` : "";
   }
   _addFocusAbilityToLinksInCaption() {
@@ -225,7 +225,7 @@ let a = class extends _ {
     `;
   }
 };
-a.styles = R;
+a.styles = I;
 a.events = {
   error: "error",
   load: "load"
@@ -234,7 +234,7 @@ o([
   s()
 ], a.prototype, "alt", 2);
 o([
-  s({ attribute: "skip-lqip", type: Boolean })
+  s({ attribute: "skip-lqip", type: Boolean, reflect: !0 })
 ], a.prototype, "skipLqip", 2);
 o([
   s()

package/lists.css

@@ -8,7 +8,6 @@
   margin: 0;
   padding: 0;
   padding-inline-start: var(--sbb-list-padding-inline-start);
-  color: var(--sbb-color-iron);
 }
 .sbb-list:where(ol, ul) > li + li,
 .sbb-list:where(ol, ul) :is(ol, ul) > li + li {
@@ -58,16 +57,12 @@
   display: grid;
   grid-template-columns: auto minmax(20%, 1fr);
   gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
-  color: var(--sbb-color-iron);
 }
 .sbb-list:where(dl) :is(dt, dd) {
   margin: 0;
   padding: 0;
 }
 
-.sbb-step-list {
-  /* stylelint-disable-next-line no-descending-specificity */
-}
 .sbb-step-list {
   --sbb-step-list-dimensions: 2.125rem;
   --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
@@ -116,6 +111,7 @@
   --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
   --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
   counter-reset: steps;
+  color: var(--sbb-color-iron);
 }
 .sbb-step-list:where(.sbb-text-s) {
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -147,9 +143,6 @@
   border-end-end-radius: var(--sbb-step-list-border-radius);
 }
 
-.sbb-icon-list {
-  /* stylelint-disable-next-line no-descending-specificity */
-}
 .sbb-icon-list {
   --sbb-icon-list-dimensions: 2.125rem;
   --sbb-icon-list-padding-inline: var(--sbb-spacing-responsive-xxs);

package/loading-indicator.js

@@ -1,7 +1,7 @@
 import { css as c, LitElement as g, html as b, nothing as m } from "lit";
-import { property as s, customElement as h } from "lit/decorators.js";
-import { hostAttributes as w } from "./core/decorators.js";
-const p = c`*,:before,:after{box-sizing:border-box}:host{--sbb-loading-indicator-color: var(--sbb-color-red);display:inline-block;line-height:0}:host([color=smoke]){--sbb-loading-indicator-color: var(--sbb-color-smoke)}:host([color=white]){--sbb-loading-indicator-color: var(--sbb-color-white)}:host([variant=circle]){--sbb-loading-indicator-height: var(--sbb-size-icon-ui-small);--sbb-loading-indicator-width: var(--sbb-size-icon-ui-small);--sbb-loading-indicator-padding: var(--sbb-border-width-2x);--sbb-loading-indicator-duration: var(--sbb-disable-animation-zero-time, 1.5s);--sbb-loading-indicator-background-color: var(--sbb-color-white);--sbb-loading-indicator-circle-background: conic-gradient( from 90deg, var(--sbb-loading-indicator-background-color), var(--sbb-loading-indicator-color) );--sbb-loading-indicator-circle-animated-width: .1875em;--sbb-loading-indicator-circle-animated-height: .1875em;--sbb-loading-indicator-circle-animated-border-radius: 50%}:host([color=white][variant=circle]){--sbb-loading-indicator-background-color: var(--sbb-color-iron)}:host([variant=circle]) .sbb-loading-indicator{display:inline-flex;height:auto;width:auto;padding-inline:var(--sbb-loading-indicator-padding);padding-block:var(--sbb-loading-indicator-padding);vertical-align:middle;line-height:1}:host([variant=circle]) .sbb-loading-indicator__animated-element{width:1.25em;height:1.25em;display:inline-block;color:transparent;position:relative;margin:0 auto;overflow:hidden;border-radius:50%;background:var(--sbb-loading-indicator-circle-background);-webkit-mask:radial-gradient(circle .4375em,rgba(0,0,0,0) 98%,var(--sbb-loading-indicator-background-color));mask:radial-gradient(circle .4375em,rgba(0,0,0,0) 98%,var(--sbb-loading-indicator-background-color));animation:rotation var(--sbb-loading-indicator-duration) infinite linear}:host([variant=circle]) .sbb-loading-indicator__animated-element:after{content:"";width:var(--sbb-loading-indicator-circle-animated-width);height:var(--sbb-loading-indicator-circle-animated-height);background:var(--sbb-loading-indicator-color);border-radius:var(--sbb-loading-indicator-circle-animated-border-radius);position:absolute;top:50%;right:0;transform:translateY(-50%);overflow:hidden;margin:auto}@media (forced-colors: active){:host([variant=circle]) .sbb-loading-indicator__animated-element:after{--sbb-loading-indicator-color: CanvasText;--sbb-loading-indicator-circle-animated-width: 50%;--sbb-loading-indicator-circle-animated-height: 100%;--sbb-loading-indicator-circle-animated-border-radius: 0}}@media (forced-colors: active){:host([variant=circle]) .sbb-loading-indicator__animated-element{--sbb-loading-indicator-circle-background: transparent}}@media (forced-colors: active){:host([color=white][variant=circle]) .sbb-loading-indicator__animated-element:after{--sbb-loading-indicator-color: var(--sbb-color-white)}}:host([variant=window]){--sbb-loading-indicator-height: sbb.px-to-rem-build(32);--sbb-loading-indicator-width: sbb.px-to-rem-build(55);--sbb-loading-indicator-padding: 0;--sbb-loading-indicator-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) )}:host([variant=window][size=s]){--sbb-loading-indicator-window-height: 1.66666625rem;--sbb-loading-indicator-window-padding-block-start: .66666625rem;--sbb-loading-indicator-window-element-width: 3.46666625rem;--sbb-loading-indicator-window-element-height: .333333125rem;--sbb-loading-indicator-window-element-perspective: 6rem;--sbb-loading-indicator-window-element-animation-name: loading-container-small;--sbb-loading-indicator-window-last-span-width: .533333125rem;--sbb-loading-indicator-window-last-span-height: .333333125rem;--sbb-loading-indicator-window-last-span-margin: .2rem;--sbb-loading-indicator-window-last-span-transform: translate3d( -.1rem, 0, 0 )}:host([variant=window][size=l]){--sbb-loading-indicator-window-height: 3rem;--sbb-loading-indicator-window-padding-block-start: 1.2rem;--sbb-loading-indicator-window-element-width: 5.79980625rem;--sbb-loading-indicator-window-element-height: .599609375rem;--sbb-loading-indicator-window-element-perspective: 8rem;--sbb-loading-indicator-window-element-animation-name: loading-container-large;--sbb-loading-indicator-window-last-span-width: 1rem;--sbb-loading-indicator-window-last-span-height: .599609375rem;--sbb-loading-indicator-window-last-span-margin: .2rem}:host([variant=window]) span{display:inline-block}:host([variant=window]) .sbb-loading-indicator{display:flex;height:var(--sbb-loading-indicator-window-height);padding-block-start:var(--sbb-loading-indicator-window-padding-block-start)}:host([variant=window]) .sbb-loading-indicator__animated-element{margin:0 auto;transform-origin:center;transform:translate3d(-3em,0,0);backface-visibility:hidden;transform-style:preserve-3d;width:var(--sbb-loading-indicator-window-element-width);height:var(--sbb-loading-indicator-window-element-height);perspective:var(--sbb-loading-indicator-window-element-perspective)}:host([variant=window]) .sbb-loading-indicator__animated-element>span{position:relative;transform:rotateY(50deg) translateZ(1em);transform-origin:right;backface-visibility:hidden}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span{position:relative;display:flex;animation-name:var(--sbb-loading-indicator-window-element-animation-name);animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--sbb-loading-indicator-duration)}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span{background:var(--sbb-loading-indicator-color);backface-visibility:hidden;outline:var(--sbb-border-width-1x) solid rgba(0,0,0,0);width:var(--sbb-loading-indicator-window-last-span-width);height:var(--sbb-loading-indicator-window-last-span-height);margin-right:var(--sbb-loading-indicator-window-last-span-margin);transform:var(--sbb-loading-indicator-window-last-span-transform)}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(1){animation:loading-rectangle1 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(2){animation:loading-rectangle2 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(3){animation:loading-rectangle3 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(4){animation:loading-rectangle4 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(5){animation:loading-rectangle5 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:last-child{margin-right:0}@keyframes loading-container-small{0%{transform:translate(.73333em)}to{transform:translate(0)}}@keyframes loading-container-large{0%{transform:translate(1.2em)}to{transform:translate(0)}}@keyframes loading-rectangle1{0%{opacity:.5}to{opacity:0}}@keyframes loading-rectangle2{0%{opacity:1}to{opacity:.5}}@keyframes loading-rectangle3{0%{opacity:.5}to{opacity:1}}@keyframes loading-rectangle4{0%{opacity:.25}to{opacity:.5}}@keyframes loading-rectangle5{0%{opacity:0}to{opacity:.25}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}`;
+import { property as s, customElement as w } from "lit/decorators.js";
+import { hostAttributes as h } from "./core/decorators.js";
+const p = c`*,:before,:after{box-sizing:border-box}:host{--sbb-loading-indicator-color: var(--sbb-color-red);display:inline-block;line-height:0}:host([color=smoke]){--sbb-loading-indicator-color: var(--sbb-color-smoke)}:host([color=white]){--sbb-loading-indicator-color: var(--sbb-color-white)}:host([variant=circle]){--sbb-loading-indicator-padding: var(--sbb-border-width-2x);--sbb-loading-indicator-duration: var(--sbb-disable-animation-zero-time, 1.5s);--sbb-loading-indicator-background-color: var(--sbb-color-white);--sbb-loading-indicator-circle-background: conic-gradient( from 90deg, var(--sbb-loading-indicator-background-color), var(--sbb-loading-indicator-color) );--sbb-loading-indicator-circle-animated-width: .1875em;--sbb-loading-indicator-circle-animated-height: .1875em;--sbb-loading-indicator-circle-animated-border-radius: 50%}:host([color=white][variant=circle]){--sbb-loading-indicator-background-color: var(--sbb-color-iron)}:host([variant=circle]) .sbb-loading-indicator{display:inline-flex;height:auto;width:auto;padding-inline:var(--sbb-loading-indicator-padding);padding-block:var(--sbb-loading-indicator-padding);vertical-align:middle;line-height:1}:host([variant=circle]) .sbb-loading-indicator__animated-element{width:1.25em;height:1.25em;display:inline-block;color:transparent;position:relative;margin:0 auto;overflow:hidden;border-radius:50%;background:var(--sbb-loading-indicator-circle-background);-webkit-mask:radial-gradient(circle .4375em,rgba(0,0,0,0) 98%,var(--sbb-loading-indicator-background-color));mask:radial-gradient(circle .4375em,rgba(0,0,0,0) 98%,var(--sbb-loading-indicator-background-color));animation:rotation var(--sbb-loading-indicator-duration) infinite linear}:host([variant=circle]) .sbb-loading-indicator__animated-element:after{content:"";width:var(--sbb-loading-indicator-circle-animated-width);height:var(--sbb-loading-indicator-circle-animated-height);background:var(--sbb-loading-indicator-color);border-radius:var(--sbb-loading-indicator-circle-animated-border-radius);position:absolute;top:50%;right:0;transform:translateY(-50%);overflow:hidden;margin:auto}@media (forced-colors: active){:host([variant=circle]) .sbb-loading-indicator__animated-element:after{--sbb-loading-indicator-color: CanvasText;--sbb-loading-indicator-circle-animated-width: 50%;--sbb-loading-indicator-circle-animated-height: 100%;--sbb-loading-indicator-circle-animated-border-radius: 0}}@media (forced-colors: active){:host([variant=circle]) .sbb-loading-indicator__animated-element{--sbb-loading-indicator-circle-background: transparent}}@media (forced-colors: active){:host([color=white][variant=circle]) .sbb-loading-indicator__animated-element:after{--sbb-loading-indicator-color: var(--sbb-color-white)}}:host([variant=window]){--sbb-loading-indicator-padding: 0;--sbb-loading-indicator-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) )}:host([variant=window][size=s]){--sbb-loading-indicator-window-height: 1.66666625rem;--sbb-loading-indicator-window-padding-block-start: .66666625rem;--sbb-loading-indicator-window-element-width: 3.46666625rem;--sbb-loading-indicator-window-element-height: .333333125rem;--sbb-loading-indicator-window-element-perspective: 6rem;--sbb-loading-indicator-window-element-animation-name: loading-container-small;--sbb-loading-indicator-window-last-span-width: .533333125rem;--sbb-loading-indicator-window-last-span-height: .333333125rem;--sbb-loading-indicator-window-last-span-margin: .2rem;--sbb-loading-indicator-window-last-span-transform: translate3d( -.1rem, 0, 0 )}:host([variant=window][size=l]){--sbb-loading-indicator-window-height: 3rem;--sbb-loading-indicator-window-padding-block-start: 1.2rem;--sbb-loading-indicator-window-element-width: 5.79980625rem;--sbb-loading-indicator-window-element-height: .599609375rem;--sbb-loading-indicator-window-element-perspective: 8rem;--sbb-loading-indicator-window-element-animation-name: loading-container-large;--sbb-loading-indicator-window-last-span-width: 1rem;--sbb-loading-indicator-window-last-span-height: .599609375rem;--sbb-loading-indicator-window-last-span-margin: .2rem}:host([variant=window]) span{display:inline-block}:host([variant=window]) .sbb-loading-indicator{display:flex;height:var(--sbb-loading-indicator-window-height);padding-block-start:var(--sbb-loading-indicator-window-padding-block-start)}:host([variant=window]) .sbb-loading-indicator__animated-element{margin:0 auto;transform-origin:center;transform:translate3d(-2em,0,0);backface-visibility:hidden;transform-style:preserve-3d;width:var(--sbb-loading-indicator-window-element-width);height:var(--sbb-loading-indicator-window-element-height);perspective:var(--sbb-loading-indicator-window-element-perspective)}:host([variant=window]) .sbb-loading-indicator__animated-element>span{position:relative;transform:rotateY(50deg) translateZ(1em);transform-origin:right;backface-visibility:hidden}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span{position:relative;display:flex;animation-name:var(--sbb-loading-indicator-window-element-animation-name);animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--sbb-loading-indicator-duration)}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span{background:var(--sbb-loading-indicator-color);backface-visibility:hidden;outline:var(--sbb-border-width-1x) solid rgba(0,0,0,0);width:var(--sbb-loading-indicator-window-last-span-width);height:var(--sbb-loading-indicator-window-last-span-height);margin-right:var(--sbb-loading-indicator-window-last-span-margin);transform:var(--sbb-loading-indicator-window-last-span-transform)}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(1){animation:loading-rectangle1 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(2){animation:loading-rectangle2 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(3){animation:loading-rectangle3 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(4){animation:loading-rectangle4 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:nth-child(5){animation:loading-rectangle5 var(--sbb-loading-indicator-duration) linear infinite}:host([variant=window]) .sbb-loading-indicator__animated-element>span>span>span:last-child{margin-right:0}@keyframes loading-container-small{0%{transform:translate(.73333em)}to{transform:translate(0)}}@keyframes loading-container-large{0%{transform:translate(1.2em)}to{transform:translate(0)}}@keyframes loading-rectangle1{0%{opacity:.5}to{opacity:0}}@keyframes loading-rectangle2{0%{opacity:1}to{opacity:.5}}@keyframes loading-rectangle3{0%{opacity:.5}to{opacity:1}}@keyframes loading-rectangle4{0%{opacity:.25}to{opacity:.5}}@keyframes loading-rectangle5{0%{opacity:0}to{opacity:.25}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}`;
 var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (l, n, r, o) => {
   for (var i = o > 1 ? void 0 : o ? f(n, r) : n, e = l.length - 1, d; e >= 0; e--)
     (d = l[e]) && (i = (o ? d(n, r, i) : d(i)) || i);
@@ -40,8 +40,8 @@ t([
   s({ reflect: !0 })
 ], a.prototype, "color", 2);
 a = t([
-  h("sbb-loading-indicator"),
-  w({
+  w("sbb-loading-indicator"),
+  h({
     role: "progressbar",
     "aria-busy": "true"
   })