@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/expansion-panel/expansion-panel.js

@@ -1,116 +1,116 @@
 import { css as c, LitElement as h } from "lit";
 import { property as r, customElement as x } from "lit/decorators.js";
-import { html as u, unsafeStatic as p } from "lit/static-html.js";
-import { SbbConnectedAbortController as m } from "../core/controllers.js";
-import { EventEmitter as b } from "../core/eventing.js";
-import { SbbHydrationMixin as v } from "../core/mixins.js";
-const g = c`*,:before,:after{box-sizing:border-box}:host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-expansion-panel-background-color: var(--sbb-color-white);--sbb-expansion-panel-content-visibility: hidden;--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-border-block-start-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-4x);--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);display:block}:host([size=s]){--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host([disabled]){--sbb-expansion-panel-border-color: GrayText;--sbb-expansion-panel-border-block-start-color: GrayText}}:host([expanded]){--sbb-expansion-panel-content-visibility: visible}:host([data-accordion][data-accordion-first]){--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius)}:host([data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent;--sbb-expansion-panel-start-end-radius: 0;--sbb-expansion-panel-start-start-radius: 0}:host([data-accordion][data-accordion-last]){--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius)}:host([data-accordion]:not([data-accordion-last])){--sbb-expansion-panel-end-end-radius: 0;--sbb-expansion-panel-end-start-radius: 0}:host([color=milk]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}:host([borderless]){--sbb-expansion-panel-border-width: 0;--sbb-expansion-panel-border-color: transparent;--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent}@media (forced-colors: active){:host([borderless]){--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width)}}:host([borderless][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x)}@media (forced-colors: active){:host([borderless][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: 0}}:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}@media (forced-colors: active){:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-border-color: Highlight;--sbb-expansion-panel-border-block-start-color: Highlight}}:host(:not([disabled])[color=milk][data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-white)}.sbb-expansion-panel{background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:grid;visibility:var(--sbb-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-expansion-panel__content-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-expansion-panel-animation-duration)}:host([data-state=closing]) .sbb-expansion-panel__content-wrapper{animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}.sbb-expansion-panel__content{overflow:hidden}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
-var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, a, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? w(a, t) : a, d = e.length - 1, l; d >= 0; d--)
-    (l = e[d]) && (i = (n ? l(a, t, i) : l(i)) || i);
-  return n && i && f(a, t, i), i;
+import { html as _, unsafeStatic as p } from "lit/static-html.js";
+import { SbbConnectedAbortController as u } from "../core/controllers.js";
+import { EventEmitter as d } from "../core/eventing.js";
+import { SbbHydrationMixin as f } from "../core/mixins.js";
+const m = c`*,:before,:after{box-sizing:border-box}:host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-expansion-panel-background-color: var(--sbb-color-white);--sbb-expansion-panel-content-visibility: hidden;--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-border-block-start-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-4x);--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);display:block}:host([size=s]){--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host([disabled]){--sbb-expansion-panel-border-color: GrayText;--sbb-expansion-panel-border-block-start-color: GrayText}}:host([expanded]){--sbb-expansion-panel-content-visibility: visible}:host([data-accordion][data-accordion-first]){--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius)}:host([data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent;--sbb-expansion-panel-start-end-radius: 0;--sbb-expansion-panel-start-start-radius: 0}:host([data-accordion][data-accordion-last]){--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius)}:host([data-accordion]:not([data-accordion-last])){--sbb-expansion-panel-end-end-radius: 0;--sbb-expansion-panel-end-start-radius: 0}:host([color=milk]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}:host([borderless]){--sbb-expansion-panel-border-width: 0;--sbb-expansion-panel-border-color: transparent;--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent}@media (forced-colors: active){:host([borderless]){--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width)}}:host([borderless][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x)}@media (forced-colors: active){:host([borderless][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: 0}}:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}@media (forced-colors: active){:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-border-color: Highlight;--sbb-expansion-panel-border-block-start-color: Highlight}}:host(:not([disabled])[color=milk][data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-white)}.sbb-expansion-panel{background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:grid;visibility:var(--sbb-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-expansion-panel__content-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-expansion-panel-animation-duration)}:host([data-state=closing]) .sbb-expansion-panel__content-wrapper{animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}.sbb-expansion-panel__content{overflow:hidden}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, a, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? v(a, t) : a, b = e.length - 1, l; b >= 0; b--)
+    (l = e[b]) && (i = (s ? l(a, t, i) : l(i)) || i);
+  return s && i && g(a, t, i), i;
 };
-let y = 0, s = class extends v(h) {
+let w = 0, n = class extends f(h) {
   constructor() {
-    super(...arguments), this.color = "white", this.e = !1, this.d = !1, this.borderless = !1, this.size = "l", this.l = new b(
+    super(...arguments), this.color = "white", this._expanded = !1, this._disabled = !1, this.borderless = !1, this.size = "l", this._willOpen = new d(
       this,
-      s.events.willOpen
-    ), this.f = new b(
+      n.events.willOpen
+    ), this._didOpen = new d(
       this,
-      s.events.didOpen
-    ), this.m = new b(
+      n.events.didOpen
+    ), this._willClose = new d(
       this,
-      s.events.willClose
-    ), this.n = new b(
+      n.events.willClose
+    ), this._didClose = new d(
       this,
-      s.events.didClose
-    ), this.g = `-${++y}`, this.o = new m(this), this.h = !1;
+      n.events.didClose
+    ), this._progressiveId = `-${++w}`, this._abort = new u(this), this._initialized = !1;
   }
   set expanded(e) {
-    this.e = e, this.j();
+    this._expanded = e, this._onExpandedChange();
   }
   get expanded() {
-    return this.e;
+    return this._expanded;
   }
   set disabled(e) {
-    this.d = e, this.k(this.d);
+    this._disabled = e, this._updateDisabledOnHeader(this._disabled);
   }
   get disabled() {
-    return this.d;
+    return this._disabled;
   }
   /**
    * The state of the notification.
    */
-  set b(e) {
+  set _state(e) {
     this.setAttribute("data-state", e);
   }
-  get b() {
+  get _state() {
     return this.getAttribute("data-state");
   }
   connectedCallback() {
     var a;
     super.connectedCallback();
-    const e = this.o.signal;
-    this.addEventListener("toggleExpanded", () => this.p(), { signal: e }), this.toggleAttribute("data-accordion", !!((a = this.closest) != null && a.call(this, "sbb-accordion")));
+    const e = this._abort.signal;
+    this.addEventListener("toggleExpanded", () => this._toggleExpanded(), { signal: e }), this.toggleAttribute("data-accordion", !!((a = this.closest) != null && a.call(this, "sbb-accordion")));
   }
   willUpdate(e) {
     var a, t;
-    super.willUpdate(e), e.has("size") && ((a = this.a) == null || a.setAttribute("data-size", String(this.size)), (t = this.c) == null || t.setAttribute("data-size", String(this.size)));
+    super.willUpdate(e), e.has("size") && ((a = this._headerRef) == null || a.setAttribute("data-size", String(this.size)), (t = this._contentRef) == null || t.setAttribute("data-size", String(this.size)));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeAttribute("data-accordion");
   }
   firstUpdated(e) {
-    super.firstUpdated(e), this.h = !0;
+    super.firstUpdated(e), this._initialized = !0;
   }
-  p() {
+  _toggleExpanded() {
     this.expanded = !this.expanded;
   }
-  j() {
+  _onExpandedChange() {
     var e, a;
-    (e = this.a) == null || e.setAttribute("aria-expanded", String(this.expanded)), (a = this.c) == null || a.setAttribute("aria-hidden", String(!this.expanded)), this.expanded ? this.q(!this.h) : this.b === "opened" && this.r();
+    (e = this._headerRef) == null || e.setAttribute("aria-expanded", String(this.expanded)), (a = this._contentRef) == null || a.setAttribute("aria-hidden", String(!this.expanded)), this.expanded ? this._open(!this._initialized) : this._state === "opened" && this._close();
   }
-  q(e = !1) {
-    this.b = "opening", this.l.emit(), e && (this.b = "opened", this.f.emit());
+  _open(e = !1) {
+    this._state = "opening", this._willOpen.emit(), e && (this._state = "opened", this._didOpen.emit());
   }
-  r() {
-    this.b = "closing", this.m.emit();
+  _close() {
+    this._state = "closing", this._willClose.emit();
   }
-  k(e) {
-    this.a && (this.a.disabled = e);
+  _updateDisabledOnHeader(e) {
+    this._headerRef && (this._headerRef.disabled = e);
   }
-  i() {
+  _handleSlotchange() {
     const e = Array.from(this.children ?? []), a = e.find(
-      (n) => n.localName === "sbb-expansion-panel-header"
+      (s) => s.localName === "sbb-expansion-panel-header"
     ), t = e.find(
-      (n) => n.localName === "sbb-expansion-panel-content"
+      (s) => s.localName === "sbb-expansion-panel-content"
     );
-    this.a === a && this.c === t || (a && this.a !== a && (a.id || (a.id = `sbb-expansion-panel-header${this.g}`), a.setAttribute("aria-expanded", String(this.expanded)), a.toggleAttribute("disabled", this.disabled), a.setAttribute("data-size", String(this.size))), t && this.c !== t && (t.id || (t.id = `sbb-expansion-panel-content${this.g}`), t.setAttribute("aria-hidden", String(!this.expanded)), t.setAttribute("data-size", String(this.size))), this.a = a, this.c = t, this.a && this.c && (this.a.setAttribute("aria-controls", this.c.id), this.c.setAttribute("aria-labelledby", this.a.id), this.c.toggleAttribute(
+    this._headerRef === a && this._contentRef === t || (a && this._headerRef !== a && (a.id || (a.id = `sbb-expansion-panel-header${this._progressiveId}`), a.setAttribute("aria-expanded", String(this.expanded)), a.toggleAttribute("disabled", this.disabled), a.setAttribute("data-size", String(this.size))), t && this._contentRef !== t && (t.id || (t.id = `sbb-expansion-panel-content${this._progressiveId}`), t.setAttribute("aria-hidden", String(!this.expanded)), t.setAttribute("data-size", String(this.size))), this._headerRef = a, this._contentRef = t, this._headerRef && this._contentRef && (this._headerRef.setAttribute("aria-controls", this._contentRef.id), this._contentRef.setAttribute("aria-labelledby", this._headerRef.id), this._contentRef.toggleAttribute(
       "data-icon-space",
-      this.a.hasAttribute("data-icon")
+      this._headerRef.hasAttribute("data-icon")
     )));
   }
-  s(e) {
-    e.animationName === "open-opacity" && this.b === "opening" ? (this.b = "opened", this.f.emit()) : e.animationName === "close" && this.b === "closing" && (this.b = "closed", this.n.emit());
+  _onAnimationEnd(e) {
+    e.animationName === "open-opacity" && this._state === "opening" ? (this._state = "opened", this._didOpen.emit()) : e.animationName === "close" && this._state === "closing" && (this._state = "closed", this._didClose.emit());
   }
   render() {
     const e = this.titleLevel ? `h${this.titleLevel}` : "div";
-    return u`
+    return _`
       <div class="sbb-expansion-panel">
         <${p(e)} class="sbb-expansion-panel__header">
-          <slot name="header" @slotchange=${this.i}></slot>
+          <slot name="header" @slotchange=${this._handleSlotchange}></slot>
         </${p(e)}>
-        <div class="sbb-expansion-panel__content-wrapper" @animationend=${this.s}>
+        <div class="sbb-expansion-panel__content-wrapper" @animationend=${this._onAnimationEnd}>
           <span class="sbb-expansion-panel__content">
-            <slot name="content" @slotchange=${this.i}></slot>
+            <slot name="content" @slotchange=${this._handleSlotchange}></slot>
           </span>
         </div>
       </div>
     `;
   }
 };
-s.styles = g;
-s.events = {
+n.styles = m;
+n.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
   willClose: "willClose",
@@ -118,25 +118,25 @@ s.events = {
 };
 o([
   r({ attribute: "title-level" })
-], s.prototype, "titleLevel", 2);
+], n.prototype, "titleLevel", 2);
 o([
   r()
-], s.prototype, "color", 2);
+], n.prototype, "color", 2);
 o([
   r({ reflect: !0, type: Boolean })
-], s.prototype, "expanded", 1);
+], n.prototype, "expanded", 1);
 o([
   r({ reflect: !0, type: Boolean })
-], s.prototype, "disabled", 1);
+], n.prototype, "disabled", 1);
 o([
   r({ reflect: !0, type: Boolean })
-], s.prototype, "borderless", 2);
+], n.prototype, "borderless", 2);
 o([
   r({ reflect: !0 })
-], s.prototype, "size", 2);
-s = o([
+], n.prototype, "size", 2);
+n = o([
   x("sbb-expansion-panel")
-], s);
+], n);
 export {
-  s as SbbExpansionPanelElement
+  n as SbbExpansionPanelElement
 };

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> `;