@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/file-selector.js

@@ -1,98 +1,98 @@
-import { css as g, LitElement as v, nothing as f } from "lit";
-import { property as l, state as y, customElement as _ } from "lit/decorators.js";
-import { ref as n } from "lit/directives/ref.js";
+import { css as g, LitElement as m, nothing as h } from "lit";
+import { property as r, state as v, customElement as y } 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 m } from "./core/a11y.js";
+import { sbbInputModalityDetector as _ } from "./core/a11y.js";
 import { SbbLanguageController as x, SbbSlotStateController as $ } from "./core/controllers.js";
 import { EventEmitter as z } from "./core/eventing.js";
-import { i18nFileSelectorCurrentlySelected as u, i18nFileSelectorButtonLabel as p, i18nFileSelectorSubtitleLabel as w, i18nFileSelectorDeleteFile as E } from "./core/i18n.js";
-import { SbbDisabledMixin as k } from "./core/mixins.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 "./button/secondary-button.js";
 import "./button/secondary-button-static.js";
 import "./icon.js";
-const M = 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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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 S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (e, t, s, b) => {
-  for (var r = b > 1 ? void 0 : b ? P(t, s) : t, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (r = (b ? h(t, s, r) : h(r)) || r);
-  return b && r && S(t, s, r), r;
+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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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 o = n > 1 ? void 0 : n ? D(t, s) : t, f = e.length - 1, d; f >= 0; f--)
+    (d = e[f]) && (o = (n ? d(t, s, o) : d(o)) || o);
+  return n && o && M(t, s, o), o;
 };
-let i = class extends k(v) {
+let i = class extends F(m) {
   constructor() {
-    super(), this.variant = "default", this.size = "m", this.multiple = !1, this.multipleMode = "default", this.h = new z(
+    super(), this.variant = "default", this.size = "m", this.multiple = !1, this.multipleMode = "default", this._fileChangedEvent = new z(
       this,
       i.events.fileChangedEvent
-    ), this.d = 0, this.m = ["B", "kB", "MB", "GB", "TB"], this.b = new x(this), new $(this);
+    ), this._counter = 0, this._suffixes = ["B", "kB", "MB", "GB", "TB"], this._language = new x(this), new $(this);
   }
   /**
    * Gets the currently selected files.
    */
   get files() {
-    return this.a || [];
+    return this._files || [];
   }
   /**
    * @deprecated use 'files' property instead
    */
   getFiles() {
-    return this.a || [];
+    return this._files || [];
   }
-  e(e) {
+  _blockEvent(e) {
     e.stopPropagation(), e.preventDefault();
   }
-  k(e, t) {
+  _checkFileEquality(e, t) {
     return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
   }
-  n(e) {
-    this.d++, this.disabled || (this.g(e.target, !0), this.e(e));
+  _onDragEnter(e) {
+    this._counter++, this.disabled || (this._setDragState(e.target, !0), this._blockEvent(e));
   }
-  o(e) {
-    this.d--, !this.disabled && e.target === this.i && this.d === 0 && (this.g(), this.e(e));
+  _onDragLeave(e) {
+    this._counter--, !this.disabled && e.target === this._dragTarget && this._counter === 0 && (this._setDragState(), this._blockEvent(e));
   }
-  p(e) {
-    this.d = 0, this.disabled || (this.g(), this.e(e), this.l(e.dataTransfer.files));
+  _onFileDrop(e) {
+    this._counter = 0, this.disabled || (this._setDragState(), this._blockEvent(e), this._createFileList(e.dataTransfer.files));
   }
-  q() {
-    m.mostRecentModality === "keyboard" && this.c.toggleAttribute("data-focus-visible", !0);
+  _onFocus() {
+    _.mostRecentModality === "keyboard" && this._loadButton.toggleAttribute("data-focus-visible", !0);
   }
-  r() {
-    m.mostRecentModality === "keyboard" && this.c.removeAttribute("data-focus-visible");
+  _onBlur() {
+    _.mostRecentModality === "keyboard" && this._loadButton.removeAttribute("data-focus-visible");
   }
-  g(e = void 0, t = !1) {
-    this.i = e, this.toggleAttribute("data-active", t), this.c.toggleAttribute("data-active", t);
+  _setDragState(e = void 0, t = !1) {
+    this._dragTarget = e, this.toggleAttribute("data-active", t), this._loadButton.toggleAttribute("data-active", t);
   }
-  s(e) {
+  _readFiles(e) {
     const t = e.target;
-    t.files && this.l(t.files);
+    t.files && this._createFileList(t.files);
   }
-  l(e) {
-    !this.multiple || this.multipleMode !== "persistent" || !this.a || this.a.length === 0 ? this.a = Array.from(e) : this.a = Array.from(e).filter(
-      (t) => this.a.findIndex((s) => this.k(t, s)) === -1
-    ).concat(this.a), this.f.innerText = u(this.a.map((t) => t.name))[this.b.current], this.h.emit(this.a);
+  _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);
   }
-  t(e) {
-    this.a = this.a.filter((s) => !this.k(e, s));
+  _removeFile(e) {
+    this._files = this._files.filter((s) => !this._checkFileEquality(e, s));
     const t = new DataTransfer();
-    this.a.forEach((s) => t.items.add(s)), this.j.files = t.files, this.f.innerText = u(this.a.map((s) => s.name))[this.b.current], this.h.emit(this.a);
+    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);
   }
   /** Calculates the correct unit for the file's size. */
-  u(e) {
+  _formatFileSize(e) {
     const t = Math.floor(Math.log(e) / Math.log(1024));
-    return `${(e / Math.pow(1024, t)).toFixed(0)} ${this.m[t]}`;
+    return `${(e / Math.pow(1024, t)).toFixed(0)} ${this._suffixes[t]}`;
   }
-  v() {
+  _renderDefaultMode() {
     return a`
       <sbb-secondary-button-static
         size=${this.size}
         icon-name="folder-open-small"
         ?disabled=${this.disabled}
-        ${n((e) => {
-      this.c = e;
+        ${b((e) => {
+      this._loadButton = e;
     })}
       >
-        ${p[this.b.current]}
+        ${p[this._language.current]}
       </sbb-secondary-button-static>
     `;
   }
-  w() {
+  _renderDropzoneArea() {
     return a`
       <span class="sbb-file-selector__dropzone-area">
         <span class="sbb-file-selector__dropzone-area--icon">
@@ -102,38 +102,38 @@ let i = class extends k(v) {
         </span>
         <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
         <span class="sbb-file-selector__dropzone-area--subtitle">
-          ${w[this.b.current]}
+          ${E[this._language.current]}
         </span>
         <span class="sbb-file-selector__dropzone-area--button">
           <sbb-secondary-button-static
             size=${this.size}
             ?disabled=${this.disabled}
-            ${n((e) => {
-      this.c = e;
+            ${b((e) => {
+      this._loadButton = e;
     })}
           >
-            ${p[this.b.current]}
+            ${p[this._language.current]}
           </sbb-secondary-button-static>
         </span>
       </span>
     `;
   }
-  x() {
-    const e = this.a.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
+  _renderFileList() {
+    const e = this._files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
     return a`
       <${c(e.WRAPPER)} class="sbb-file-selector__file-list">
-        ${this.a.map(
+        ${this._files.map(
       (t) => a`
           <${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>
-              <span class="sbb-file-selector__file-size">${this.u(t.size)}</span>
+              <span class="sbb-file-selector__file-size">${this._formatFileSize(t.size)}</span>
             </span>
             <sbb-secondary-button
               size=${this.size}
               icon-name="trash-small"
-              @click=${() => this.t(t)}
-              aria-label=${`${E[this.b.current]} - ${t.name}`}
+              @click=${() => this._removeFile(t)}
+              aria-label=${`${w[this._language.current]} - ${t.name}`}
             ></sbb-secondary-button>
           </${c(e.ELEMENT)}>`
     )}
@@ -141,30 +141,30 @@ let i = class extends k(v) {
     `;
   }
   render() {
-    const e = this.accessibilityLabel ? `${p[this.b.current]} - ${this.accessibilityLabel}` : void 0;
+    const e = this.accessibilityLabel ? `${p[this._language.current]} - ${this.accessibilityLabel}` : void 0;
     return a`
       <div class="sbb-file-selector">
         <div
           class="sbb-file-selector__input-container"
-          @dragenter=${this.n}
-          @dragover=${this.e}
-          @dragleave=${this.o}
-          @drop=${this.p}
+          @dragenter=${this._onDragEnter}
+          @dragover=${this._blockEvent}
+          @dragleave=${this._onDragLeave}
+          @drop=${this._onFileDrop}
         >
           <label>
-            ${this.variant === "default" ? this.v() : this.w()}
+            ${this.variant === "default" ? this._renderDefaultMode() : this._renderDropzoneArea()}
             <input
               class="sbb-file-selector__visually-hidden"
               type="file"
               ?disabled=${this.disabled}
               ?multiple=${this.multiple}
-              accept=${this.accept || f}
-              aria-label=${e || f}
-              @change=${this.s}
-              @focus=${this.q}
-              @blur=${this.r}
-              ${n((t) => {
-      this.j = t;
+              accept=${this.accept || h}
+              aria-label=${e || h}
+              @change=${this._readFiles}
+              @focus=${this._onFocus}
+              @blur=${this._onBlur}
+              ${b((t) => {
+      this._hiddenInput = t;
     })}
             />
           </label>
@@ -172,9 +172,9 @@ let i = class extends k(v) {
         <p
           role="status"
           class="sbb-file-selector__visually-hidden"
-          ${n((t) => this.f = t)}
+          ${b((t) => this._liveRegion = t)}
         ></p>
-        ${this.a && this.a.length > 0 ? this.x() : f}
+        ${this._files && this._files.length > 0 ? this._renderFileList() : h}
         <div class="sbb-file-selector__error">
           <slot name="error"></slot>
         </div>
@@ -182,36 +182,36 @@ let i = class extends k(v) {
     `;
   }
 };
-i.styles = M;
+i.styles = k;
 i.events = {
   fileChangedEvent: "fileChanged"
 };
-o([
-  l()
+l([
+  r()
 ], i.prototype, "variant", 2);
-o([
-  l({ reflect: !0 })
+l([
+  r({ reflect: !0 })
 ], i.prototype, "size", 2);
-o([
-  l({ type: Boolean })
+l([
+  r({ type: Boolean })
 ], i.prototype, "multiple", 2);
-o([
-  l({ attribute: "multiple-mode" })
+l([
+  r({ attribute: "multiple-mode" })
 ], i.prototype, "multipleMode", 2);
-o([
-  l()
+l([
+  r()
 ], i.prototype, "accept", 2);
-o([
-  l({ attribute: "title-content" })
+l([
+  r({ attribute: "title-content" })
 ], i.prototype, "titleContent", 2);
-o([
-  l({ attribute: "accessibility-label" })
+l([
+  r({ attribute: "accessibility-label" })
 ], i.prototype, "accessibilityLabel", 2);
-o([
-  y()
-], i.prototype, "a", 2);
-i = o([
-  _("sbb-file-selector")
+l([
+  v()
+], i.prototype, "_files", 2);
+i = l([
+  y("sbb-file-selector")
 ], i);
 export {
   i as SbbFileSelectorElement

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

@@ -8,27 +8,27 @@ import { i18nClearInput as m } from "../core/i18n.js";
 import { SbbNegativeMixin as p } from "../core/mixins.js";
 import "../icon.js";
 const g = l`*,: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-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-default-border: var(--sbb-color-black-alpha-0);--sbb-button-color-default-text: var(--sbb-color-charcoal);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-charcoal);--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-style: solid;--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: 0rem;--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);--sbb-button-inset: 0}@media (forced-colors: active){:host{--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-text: ButtonText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-hover-text: ButtonText !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-default-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:var(--sbb-button-display)}:host .sbb-form-field-clear:before{position:absolute;content:"";inset:var(--sbb-button-inset);border:var(--sbb-button-border-width) var(--sbb-button-border-style) var(--sbb-button-color-default-border);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,border-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-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-default-border: var(--sbb-color-black-alpha-0);--sbb-button-color-default-text: var(--sbb-color-milk);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-hover-border: var(--sbb-color-charcoal);--sbb-button-color-hover-text: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-active-border: var(--sbb-color-iron);--sbb-button-color-active-text: var(--sbb-color-milk);--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])){--sbb-button-border-width: var(--sbb-border-width-1x)}@media (forced-colors: active){:host(:is([disabled],[data-disabled])){--sbb-button-color-disabled-text: GrayText !important}}:host(:is([disabled],[data-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border-color:var(--sbb-button-color-disabled-border);border-style:var(--sbb-button-border-disabled-style)}:host(: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],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (forced-colors: active){:host(:not([disabled],[data-disabled],:active,[data-active]):hover){--sbb-button-color-hover-border: Highlight !important}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{inset:calc(var(--sbb-button-border-width) * -1);background-color:var(--sbb-button-color-hover-background);border-color:var(--sbb-button-color-hover-border)}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover) .sbb-form-field-clear{color:var(--sbb-button-color-hover-text)}}:host(:not([disabled],[data-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{color:var(--sbb-button-color-active-text);background-color:var(--sbb-button-color-active-background);border-color:var(--sbb-button-color-active-border)}`;
-var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, y = (o, t, r, e) => {
-  for (var b = e > 1 ? void 0 : e ? x(t, r) : t, a = o.length - 1, s; a >= 0; a--)
-    (s = o[a]) && (b = (e ? s(t, r, b) : s(b)) || b);
-  return e && b && k(t, r, b), b;
+var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, y = (o, t, b, e) => {
+  for (var r = e > 1 ? void 0 : e ? x(t, b) : t, a = o.length - 1, s; a >= 0; a--)
+    (s = o[a]) && (r = (e ? s(t, b, r) : s(r)) || r);
+  return e && r && k(t, b, r), r;
 };
 let n = class extends p(u) {
   constructor() {
-    super(...arguments), this.b = new v(this), this.c = new h(this);
+    super(...arguments), this._abort = new v(this), this._language = new h(this);
   }
   connectedCallback() {
     super.connectedCallback();
-    const o = this.b.signal;
-    this.addEventListener("click", () => this.d(), { signal: o }), this.a = i("sbb-form-field", this) ?? i("[data-form-field]", this), this.a && (this.negative = this.a.hasAttribute("negative"));
+    const o = this._abort.signal;
+    this.addEventListener("click", () => this._handleClick(), { signal: o }), this._formField = i("sbb-form-field", this) ?? i("[data-form-field]", this), this._formField && (this.negative = this._formField.hasAttribute("negative"));
   }
-  async d() {
-    var t, r;
-    const o = (t = this.a) == null ? void 0 : t.inputElement;
-    !o || o.localName !== "input" || ((r = this.a) == null || r.clear(), o.focus(), o.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), o.dispatchEvent(new Event("change", { bubbles: !0 })));
+  async _handleClick() {
+    var t, b;
+    const o = (t = this._formField) == null ? void 0 : t.inputElement;
+    !o || o.localName !== "input" || ((b = this._formField) == null || b.clear(), o.focus(), o.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), o.dispatchEvent(new Event("change", { bubbles: !0 })));
   }
   willUpdate(o) {
-    super.willUpdate(o), this.setAttribute("aria-label", m[this.c.current]);
+    super.willUpdate(o), this.setAttribute("aria-label", m[this._language.current]);
   }
   renderTemplate() {
     return c` <sbb-icon name="cross-small"></sbb-icon> `;