@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/file-selector.js

@@ -1,121 +1,183 @@
-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 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";
+var Z = (s) => {
+  throw TypeError(s);
+};
+var ee = (s, r, n) => r.has(s) || Z("Cannot " + n);
+var h = (s, r, n) => (ee(s, r, "read from private field"), n ? n.call(s) : r.get(s)), f = (s, r, n) => r.has(s) ? Z("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, n), o = (s, r, n, c) => (ee(s, r, "write to private field"), c ? c.call(s, n) : r.set(s, n), n);
+import { __runInitializers as l, __esDecorate as b } from "tslib";
+import { css as se, LitElement as ae, nothing as L } from "lit";
+import { customElement as le, property as d } from "lit/decorators.js";
+import { ref as z } from "lit/directives/ref.js";
+import { html as x, unsafeStatic as E } from "lit/static-html.js";
+import { sbbInputModalityDetector as te } from "./core/a11y.js";
+import { SbbLanguageController as re } from "./core/controllers.js";
+import { slotState as oe, forceType as $ } from "./core/decorators.js";
+import { EventEmitter as ne, forwardEventToHost as ce } from "./core/eventing.js";
+import { i18nFileSelectorCurrentlySelected as be, i18nFileSelectorButtonLabel as w, i18nFileSelectorSubtitleLabel as de, i18nFileSelectorDeleteFile as he } from "./core/i18n.js";
+import { SbbDisabledMixin as fe, SbbFormAssociatedMixin as ue } from "./core/mixins.js";
 import "./button/secondary-button.js";
 import "./button/secondary-button-static.js";
 import "./icon.js";
-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(D(g)) {
-  constructor() {
-    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 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();
-  }
-  get files() {
-    return this._files;
-  }
-  /**
-   * @deprecated use the 'files' property instead
-   */
-  getFiles() {
-    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();
-  }
-  _checkFileEquality(e, t) {
-    return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
-  }
-  _onDragEnter(e) {
-    this._counter++, !this.disabled && !this.formDisabled && (this._setDragState(e.target, !0), this._blockEvent(e));
-  }
-  _onDragLeave(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.formDisabled && (this._setDragState(), this._blockEvent(e), this._createFileList(e.dataTransfer.files));
-  }
-  _onFocus() {
-    u.mostRecentModality === "keyboard" && this._loadButton.toggleAttribute("data-focus-visible", !0);
-  }
-  _onBlur() {
-    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), E(e, this);
-  }
-  _createFileList(e) {
-    !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((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 n`
+const _e = se`*,: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}`;
+let Ce = (() => {
+  var u, _, p, m, g, v, y, a;
+  let s = [le("sbb-file-selector"), oe()], r, n = [], c, M = fe(ue(ae)), k = [], D, S = [], C = [], A, I = [], R = [], T, B = [], P = [], G, N = [], j = [], V, W = [], q = [], H, O = [], J = [], K, Q = [], U = [], X, Y;
+  var F = (a = class extends M {
+    constructor() {
+      super(...arguments);
+      f(this, u);
+      f(this, _);
+      f(this, p);
+      f(this, m);
+      f(this, g);
+      f(this, v);
+      f(this, y);
+      o(this, u, (l(this, k), l(this, S, "default"))), o(this, _, (l(this, C), l(this, I, "m"))), o(this, p, (l(this, R), l(this, B, !1))), o(this, m, (l(this, P), l(this, N, "default"))), o(this, g, (l(this, j), l(this, W, ""))), o(this, v, (l(this, q), l(this, O, ""))), o(this, y, (l(this, J), l(this, Q, ""))), this._files = (l(this, U), []), this._fileChangedEvent = new ne(this, F.events.fileChangedEvent), this._counter = 0, this._suffixes = ["B", "kB", "MB", "GB", "TB"], this._language = new re(this);
+    }
+    /** Whether the component has a dropzone area or not. */
+    get variant() {
+      return h(this, u);
+    }
+    set variant(e) {
+      o(this, u, e);
+    }
+    /** Size variant, either s or m. */
+    get size() {
+      return h(this, _);
+    }
+    set size(e) {
+      o(this, _, e);
+    }
+    /** Whether more than one file can be selected. */
+    get multiple() {
+      return h(this, p);
+    }
+    set multiple(e) {
+      o(this, p, e);
+    }
+    /** Whether the newly added files should override the previously added ones. */
+    get multipleMode() {
+      return h(this, m);
+    }
+    set multipleMode(e) {
+      o(this, m, e);
+    }
+    /** A comma-separated list of allowed unique file type specifiers. */
+    get accept() {
+      return h(this, g);
+    }
+    set accept(e) {
+      o(this, g, e);
+    }
+    /** The title displayed in `dropzone` variant. */
+    get titleContent() {
+      return h(this, v);
+    }
+    set titleContent(e) {
+      o(this, v, e);
+    }
+    /** This will be forwarded as aria-label to the native input element. */
+    get accessibilityLabel() {
+      return h(this, y);
+    }
+    set accessibilityLabel(e) {
+      o(this, y, e);
+    }
+    /** The path of the first selected file. Empty string ('') if no file is selected */
+    set value(e) {
+      this._hiddenInput.value = e ?? "", e || (this.files = []);
+    }
+    get value() {
+      var e;
+      return (e = this._hiddenInput) == null ? void 0 : e.value;
+    }
+    /**
+     * The list of selected files.
+     */
+    set files(e) {
+      this._files = e ?? [];
+      const t = new DataTransfer();
+      this.files.forEach((i) => t.items.add(i)), this._hiddenInput.files = t.files, this.updateFormValue();
+    }
+    get files() {
+      return this._files;
+    }
+    /**
+     * @deprecated use the 'files' property instead
+     */
+    getFiles() {
+      return this.files;
+    }
+    formResetCallback() {
+      this.files = [];
+    }
+    formStateRestoreCallback(e, t) {
+      e && (this.files = e.map(([i, ie]) => ie));
+    }
+    updateFormValue() {
+      const e = new FormData();
+      this.files.forEach((t) => e.append(this.name, t)), this.internals.setFormValue(e);
+    }
+    _blockEvent(e) {
+      e.stopPropagation(), e.preventDefault();
+    }
+    _checkFileEquality(e, t) {
+      return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
+    }
+    _onDragEnter(e) {
+      this._counter++, !this.disabled && !this.formDisabled && (this._setDragState(e.target, !0), this._blockEvent(e));
+    }
+    _onDragLeave(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.formDisabled && (this._setDragState(), this._blockEvent(e), this._createFileList(e.dataTransfer.files));
+    }
+    _onFocus() {
+      te.mostRecentModality === "keyboard" && this._loadButton.toggleAttribute("data-focus-visible", !0);
+    }
+    _onBlur() {
+      te.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), ce(e, this);
+    }
+    _createFileList(e) {
+      !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((i) => this._checkFileEquality(t, i)) === -1
+      ).concat(this.files), this._updateA11yLiveRegion(), this._fileChangedEvent.emit(this.files);
+    }
+    _removeFile(e) {
+      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 = be(this.files.map((e) => e.name))[this._language.current];
+    }
+    _renderDefaultMode() {
+      return x`
       <sbb-secondary-button-static
         size=${this.size}
         icon-name="folder-open-small"
         ?disabled=${this.disabled || this.formDisabled}
-        ${b((e) => {
-      this._loadButton = e;
-    })}
+        ${z((e) => {
+        this._loadButton = e;
+      })}
       >
-        ${p[this._language.current]}
+        ${w[this._language.current]}
       </sbb-secondary-button-static>
     `;
-  }
-  _renderDropzoneArea() {
-    return n`
+    }
+    _renderDropzoneArea() {
+      return x`
       <span class="sbb-file-selector__dropzone-area">
         <span class="sbb-file-selector__dropzone-area--icon">
           <sbb-icon
@@ -124,29 +186,28 @@ let i = class extends F(D(g)) {
         </span>
         <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
         <span class="sbb-file-selector__dropzone-area--subtitle">
-          ${z[this._language.current]}
+          ${de[this._language.current]}
         </span>
         <span class="sbb-file-selector__dropzone-area--button">
           <sbb-secondary-button-static
             size=${this.size}
             ?disabled=${this.disabled || this.formDisabled}
-            ${b((e) => {
-      this._loadButton = e;
-    })}
+            ${z((e) => {
+        this._loadButton = e;
+      })}
           >
-            ${p[this._language.current]}
+            ${w[this._language.current]}
           </sbb-secondary-button-static>
         </span>
       </span>
     `;
-  }
-  _renderFileList() {
-    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) => n`
-          <${c(e.ELEMENT)} class="sbb-file-selector__file">
+    }
+    _renderFileList() {
+      const e = this.files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
+      return x`
+      <${E(e.WRAPPER)} class="sbb-file-selector__file-list">
+        ${this.files.map((t) => x`
+          <${E(e.ELEMENT)} class="sbb-file-selector__file">
             <span class="sbb-file-selector__file-details">
               <span class="sbb-file-selector__file-name">${t.name}</span>
               <span class="sbb-file-selector__file-size">${this._formatFileSize(t.size)}</span>
@@ -155,16 +216,15 @@ let i = class extends F(D(g)) {
               size=${this.size}
               icon-name="trash-small"
               @click=${() => this._removeFile(t)}
-              aria-label=${`${w[this._language.current]} - ${t.name}`}
+              aria-label=${`${he[this._language.current]} - ${t.name}`}
             ></sbb-secondary-button>
-          </${c(e.ELEMENT)}>`
-    )}
-      </${c(e.WRAPPER)}>
+          </${E(e.ELEMENT)}>`)}
+      </${E(e.WRAPPER)}>
     `;
-  }
-  render() {
-    const e = this.accessibilityLabel ? `${p[this._language.current]} - ${this.accessibilityLabel}` : void 0;
-    return n`
+    }
+    render() {
+      const e = this.accessibilityLabel ? `${w[this._language.current]} - ${this.accessibilityLabel}` : void 0;
+      return x`
       <div class="sbb-file-selector">
         <div
           class="sbb-file-selector__input-container"
@@ -180,65 +240,55 @@ let i = class extends F(D(g)) {
               type="file"
               ?disabled=${this.disabled || this.formDisabled}
               ?multiple=${this.multiple}
-              accept=${this.accept || h}
-              aria-label=${e || h}
+              accept=${this.accept || L}
+              aria-label=${e || L}
               @change=${this._readFiles}
               @focus=${this._onFocus}
               @blur=${this._onBlur}
-              ${b((t) => {
-      this._hiddenInput = t;
-    })}
+              ${z((t) => {
+        this._hiddenInput = t;
+      })}
             />
           </label>
         </div>
         <p
           role="status"
           class="sbb-file-selector__visually-hidden"
-          ${b((t) => this._liveRegion = t)}
+          ${z((t) => this._liveRegion = t)}
         ></p>
-        ${this.files.length > 0 ? this._renderFileList() : h}
+        ${this.files.length > 0 ? this._renderFileList() : L}
         <div class="sbb-file-selector__error">
           <slot name="error"></slot>
         </div>
       </div>
     `;
-  }
-};
-i.styles = k;
-i.events = {
-  fileChangedEvent: "fileChanged"
-};
-s([
-  l()
-], i.prototype, "variant", 2);
-s([
-  l({ reflect: !0 })
-], i.prototype, "size", 2);
-s([
-  l({ type: Boolean })
-], i.prototype, "multiple", 2);
-s([
-  l({ attribute: "multiple-mode" })
-], i.prototype, "multipleMode", 2);
-s([
-  l()
-], i.prototype, "accept", 2);
-s([
-  l({ attribute: "title-content" })
-], i.prototype, "titleContent", 2);
-s([
-  l({ attribute: "accessibility-label" })
-], i.prototype, "accessibilityLabel", 2);
-s([
-  l({ attribute: !1 })
-], i.prototype, "value", 1);
-s([
-  l({ attribute: !1 })
-], i.prototype, "files", 1);
-i = s([
-  m("sbb-file-selector"),
-  y()
-], i);
+    }
+  }, u = new WeakMap(), _ = new WeakMap(), p = new WeakMap(), m = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), c = a, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(M[Symbol.metadata] ?? null) : void 0;
+    D = [d()], A = [d({ reflect: !0 })], T = [$(), d({ type: Boolean })], G = [d({ attribute: "multiple-mode" })], V = [$(), d()], H = [$(), d({ attribute: "title-content" })], K = [$(), d({ attribute: "accessibility-label" })], X = [d({ attribute: !1 })], Y = [d({ attribute: !1 })], b(a, null, D, { kind: "accessor", name: "variant", static: !1, private: !1, access: { has: (t) => "variant" in t, get: (t) => t.variant, set: (t, i) => {
+      t.variant = i;
+    } }, metadata: e }, S, C), b(a, null, A, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
+      t.size = i;
+    } }, metadata: e }, I, R), b(a, null, T, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, i) => {
+      t.multiple = i;
+    } }, metadata: e }, B, P), b(a, null, G, { kind: "accessor", name: "multipleMode", static: !1, private: !1, access: { has: (t) => "multipleMode" in t, get: (t) => t.multipleMode, set: (t, i) => {
+      t.multipleMode = i;
+    } }, metadata: e }, N, j), b(a, null, V, { kind: "accessor", name: "accept", static: !1, private: !1, access: { has: (t) => "accept" in t, get: (t) => t.accept, set: (t, i) => {
+      t.accept = i;
+    } }, metadata: e }, W, q), b(a, null, H, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (t) => "titleContent" in t, get: (t) => t.titleContent, set: (t, i) => {
+      t.titleContent = i;
+    } }, metadata: e }, O, J), b(a, null, K, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, i) => {
+      t.accessibilityLabel = i;
+    } }, metadata: e }, Q, U), b(a, null, X, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
+      t.value = i;
+    } }, metadata: e }, null, k), b(a, null, Y, { kind: "setter", name: "files", static: !1, private: !1, access: { has: (t) => "files" in t, set: (t, i) => {
+      t.files = i;
+    } }, metadata: e }, null, k), b(null, r = { value: c }, s, { kind: "class", name: c.name, metadata: e }, null, n), F = c = r.value, e && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.styles = _e, a.events = {
+    fileChangedEvent: "fileChanged"
+  }, l(c, n), a);
+  return F = c;
+})();
 export {
-  i as SbbFileSelectorElement
+  Ce as SbbFileSelectorElement
 };

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

@@ -19,7 +19,7 @@ export declare class SbbFlipCardElement extends SbbFlipCardElement_base {
      * This will be forwarded as aria-label to the action in the non flipped state.
      * If not set, the textContent of the `sbb-flip-card-summary` is taken.
      */
-    accessibilityLabel: string | undefined;
+    accessor accessibilityLabel: string;
     /** Emits whenever the component is flipped. */
     protected flip: EventEmitter;
     /** Returns the slotted sbb-flip-card-summary. */
@@ -29,7 +29,7 @@ export declare class SbbFlipCardElement extends SbbFlipCardElement_base {
     /** Whether the flip card is flipped. */
     get isFlipped(): boolean;
     /** Whether the card is flipped or not. */
-    private _flipped;
+    private accessor _flipped;
     private _abort;
     private _language;
     connectedCallback(): void;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"flip-card-details.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-details/flip-card-details.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC;;;;GAIG;AACH,qBAIa,yBAA0B,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;;IActD,OAAO,CAAC,uBAAuB;cAQZ,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}
+{"version":3,"file":"flip-card-details.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-details/flip-card-details.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC;;;;GAIG;AACH,qBAKM,yBAA0B,SAAQ,UAAU;IAChD,OAAuB,MAAM,EAAE,cAAc,CAAS;;IActD,OAAO,CAAC,uBAAuB;cAQZ,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}

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

@@ -1,46 +1,44 @@
-import { MutationController as o } from "@lit-labs/observers/mutation-controller.js";
-import { css as b, LitElement as n, html as p } from "lit";
-import { customElement as c } from "lit/decorators.js";
-import { IS_FOCUSABLE_QUERY as f } from "../core/a11y.js";
-import { hostAttributes as v } from "../core/decorators.js";
-const m = b`*,:before,:after{box-sizing:border-box}:host{--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-zero-time, 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{display:grid;grid-template-rows:0fr;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:grid-template-rows,transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host([data-flipped]) .sbb-flip-card-details--wrapper{grid-template-rows:1fr;transition-delay:0s,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)}`;
-var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, g = (s, r, t, i) => {
-  for (var a = i > 1 ? void 0 : i ? y(r, t) : r, e = s.length - 1, l; e >= 0; e--)
-    (l = s[e]) && (a = (i ? l(r, t, a) : l(a)) || a);
-  return i && a && u(r, t, a), a;
-};
-let d = class extends n {
-  constructor() {
-    super(), new o(this, {
-      config: {
-        childList: !0,
-        subtree: !0
-      },
-      callback: () => this._checkForSlottedActions()
-    });
-  }
-  _checkForSlottedActions() {
-    var r;
-    const s = "data-card-focusable";
-    Array.from(((r = this.querySelectorAll) == null ? void 0 : r.call(this, f)) ?? []).filter((t) => !t.hasAttribute(s)).forEach((t) => t.setAttribute(s, ""));
-  }
-  render() {
-    return p`
+import { __esDecorate as n, __runInitializers as b } from "tslib";
+import { MutationController as c } from "@lit-labs/observers/mutation-controller.js";
+import { css as p, html as f, LitElement as m } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { IS_FOCUSABLE_QUERY as v } from "../core/a11y.js";
+import { hostAttributes as y } from "../core/decorators.js";
+const g = p`*,:before,:after{box-sizing:border-box}:host{--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-zero-time, 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{display:grid;grid-template-rows:0fr;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:grid-template-rows,transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host([data-flipped]) .sbb-flip-card-details--wrapper{grid-template-rows:1fr;transition-delay:0s,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 k = (() => {
+  var a;
+  let d = [u("sbb-flip-card-details"), y({
+    slot: "details"
+  })], r, i = [], t, l = m;
+  return a = class extends l {
+    constructor() {
+      super(), new c(this, {
+        config: {
+          childList: !0,
+          subtree: !0
+        },
+        callback: () => this._checkForSlottedActions()
+      });
+    }
+    _checkForSlottedActions() {
+      var o;
+      const e = "data-card-focusable";
+      Array.from(((o = this.querySelectorAll) == null ? void 0 : o.call(this, v)) ?? []).filter((s) => !s.hasAttribute(e)).forEach((s) => s.setAttribute(e, ""));
+    }
+    render() {
+      return f`
       <div class="sbb-flip-card-details--wrapper">
         <div class="sbb-flip-card-details">
           <slot></slot>
         </div>
       </div>
     `;
-  }
-};
-d.styles = m;
-d = g([
-  c("sbb-flip-card-details"),
-  v({
-    slot: "details"
-  })
-], d);
+    }
+  }, t = a, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    n(null, r = { value: t }, d, { kind: "class", name: t.name, metadata: e }, null, i), t = r.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.styles = g, b(t, i), t;
+})();
 export {
-  d as SbbFlipCardDetailsElement
+  k as SbbFlipCardDetailsElement
 };

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

@@ -9,7 +9,7 @@ export type SbbFlipCardImageAlignment = 'after' | 'below';
 export declare class SbbFlipCardSummaryElement extends LitElement {
     static styles: CSSResultGroup;
     /** The position where to render the image. */
-    imageAlignment: SbbFlipCardImageAlignment;
+    accessor imageAlignment: SbbFlipCardImageAlignment;
     protected willUpdate(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"flip-card-summary.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-summary/flip-card-summary.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,qBAIa,yBAA0B,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IAEvC,cAAc,EAAE,yBAAyB,CAAW;cAExC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAQpD,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.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-summary/flip-card-summary.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,qBAKM,yBAA0B,SAAQ,UAAU;IAChD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IAC9C,SACgB,cAAc,EAAE,yBAAyB,CAAW;cAEjD,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAQpD,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}