@sbb-esta/lyne-elements 2.11.1 → 2.11.2

package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js

@@ -1,34 +1,30 @@
-import { __esDecorate as v, __runInitializers as f } from "tslib";
-import { customElement as g } from "lit/decorators.js";
-import { SbbAutocompleteBaseElement as A } from "../../autocomplete.js";
-import { getNextElementIndex as m } from "../../core/a11y.js";
-import { hostAttributes as I } from "../../core/decorators.js";
-import { isSafari as _ } from "../../core/dom.js";
-import { setAriaComboBoxAttributes as x } from "../../core/overlay.js";
-import { SbbAutocompleteGridOptionElement as b } from "../autocomplete-grid-option.js";
-let y = 0;
-const h = _;
-let D = (() => {
+import { __esDecorate as p, __runInitializers as v } from "tslib";
+import { customElement as f } from "lit/decorators.js";
+import { SbbAutocompleteBaseElement as g } from "../../autocomplete.js";
+import { getNextElementIndex as u } from "../../core/a11y.js";
+import { hostAttributes as A } from "../../core/decorators.js";
+import { isSafari as I } from "../../core/dom.js";
+import { setAriaComboBoxAttributes as _ } from "../../core/overlay.js";
+import { SbbAutocompleteGridOptionElement as m } from "../autocomplete-grid-option.js";
+let x = 0;
+const b = I;
+let q = (() => {
   var a;
-  let p = [g("sbb-autocomplete-grid"), I({
-    role: h ? "grid" : null
-  })], n, c = [], r, d = A;
-  return a = class extends d {
+  let h = [f("sbb-autocomplete-grid"), A({
+    role: b ? "grid" : null
+  })], l, n = [], s, c = g;
+  return a = class extends c {
     get options() {
-      var t;
-      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-option")) ?? []);
+      return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-option") ?? []);
     }
     get _row() {
-      var t;
-      return Array.from((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-row")).filter((e) => !e.hasAttribute("data-disabled")) ?? [];
+      return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-row")).filter((t) => !t.hasAttribute("data-disabled")) ?? [];
     }
     constructor() {
-      var t;
-      super(), this.overlayId = `sbb-autocomplete-grid-${++y}`, this.panelRole = "grid", this._activeItemIndex = -1, this._activeColumnIndex = 0, (t = this.addEventListener) == null || t.call(this, "autocompleteOptionSelectionChange", (e) => this.onOptionSelected(e));
+      super(), this.overlayId = `sbb-autocomplete-grid-${++x}`, this.panelRole = "grid", this._activeItemIndex = -1, this._activeColumnIndex = 0, this.addEventListener?.("autocompleteOptionSelectionChange", (t) => this.onOptionSelected(t));
     }
     syncNegative() {
-      var t, e;
-      (t = this.querySelectorAll) == null || t.call(this, "sbb-divider, sbb-autocomplete-grid-button").forEach((i) => i.negative = this.negative), (e = this.querySelectorAll) == null || e.call(this, "sbb-autocomplete-grid-row, sbb-autocomplete-grid-option, sbb-autocomplete-grid-optgroup").forEach((i) => i.toggleAttribute("data-negative", this.negative));
+      this.querySelectorAll?.("sbb-divider, sbb-autocomplete-grid-button").forEach((t) => t.negative = this.negative), this.querySelectorAll?.("sbb-autocomplete-grid-row, sbb-autocomplete-grid-option, sbb-autocomplete-grid-optgroup").forEach((t) => t.toggleAttribute("data-negative", this.negative));
     }
     openedPanelKeyboardInteraction(t) {
       if (this.state === "opened")
@@ -57,53 +53,49 @@ let D = (() => {
      * would always return a `SbbAutocompleteGridButtonElement`.
      */
     selectByKeyboard(t) {
-      var e;
-      t.preventDefault(), this._activeColumnIndex !== 0 ? this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")[this._activeColumnIndex].click() : (e = this.options[this._activeItemIndex]) == null || e.setSelectedViaUserInteraction(!0);
+      t.preventDefault(), this._activeColumnIndex !== 0 ? this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")[this._activeColumnIndex].click() : this.options[this._activeItemIndex]?.setSelectedViaUserInteraction(!0);
     }
     setNextActiveOption(t) {
-      var l;
-      const e = this.options.filter((o) => !o.disabled && !o.hasAttribute("data-group-disabled")), i = m(t, this._activeItemIndex, e.length);
-      if (isNaN(i))
+      const i = this.options.filter((e) => !e.disabled && !e.hasAttribute("data-group-disabled")), r = u(t, this._activeItemIndex, i.length);
+      if (isNaN(r))
         return;
-      const s = e[i];
-      if (s.setActive(!0), (l = this.triggerElement) == null || l.setAttribute("aria-activedescendant", s.id), s.scrollIntoView({ block: "nearest" }), this._activeColumnIndex !== 0)
-        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((o) => o.toggleAttribute("data-focus-visible", !1));
+      const o = i[r];
+      if (o.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex !== 0)
+        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((e) => e.toggleAttribute("data-focus-visible", !1));
       else {
-        const o = e[this._activeItemIndex];
-        o && o.setActive(!1);
+        const e = i[this._activeItemIndex];
+        e && e.setActive(!1);
       }
-      this._activeItemIndex = i, this._activeColumnIndex = 0;
+      this._activeItemIndex = r, this._activeColumnIndex = 0;
     }
     _setNextHorizontalActiveElement(t) {
-      var o;
       if (this._activeItemIndex < 0)
         return;
-      const e = Array.from(this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")).filter((u) => !u.disabled && !u.hasAttribute("data-group-disabled")), i = m(t, this._activeColumnIndex, e.length);
-      if (isNaN(i))
+      const i = Array.from(this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")).filter((d) => !d.disabled && !d.hasAttribute("data-group-disabled")), r = u(t, this._activeColumnIndex, i.length);
+      if (isNaN(r))
         return;
-      const s = e[i];
-      s instanceof b ? s.setActive(!0) : s.toggleAttribute("data-focus-visible", !0);
-      const l = e[this._activeColumnIndex];
-      l instanceof b ? l.setActive(!1) : l.toggleAttribute("data-focus-visible", !1), (o = this.triggerElement) == null || o.setAttribute("aria-activedescendant", s.id), s.scrollIntoView({ block: "nearest" }), this._activeColumnIndex = i;
+      const o = i[r];
+      o instanceof m ? o.setActive(!0) : o.toggleAttribute("data-focus-visible", !0);
+      const e = i[this._activeColumnIndex];
+      e instanceof m ? e.setActive(!1) : e.toggleAttribute("data-focus-visible", !1), this.triggerElement?.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex = r;
     }
     resetActiveElement() {
-      var t;
       if (this._activeColumnIndex !== 0)
-        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((e) => e.toggleAttribute("data-focus-visible", !1));
+        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((t) => t.toggleAttribute("data-focus-visible", !1));
       else {
-        const e = this.options.filter((i) => !i.disabled && !i.hasAttribute("data-group-disabled"))[this._activeItemIndex];
-        e && e.setActive(!1);
+        const t = this.options.filter((i) => !i.disabled && !i.hasAttribute("data-group-disabled"))[this._activeItemIndex];
+        t && t.setActive(!1);
       }
-      this._activeItemIndex = -1, this._activeColumnIndex = 0, (t = this.triggerElement) == null || t.removeAttribute("aria-activedescendant");
+      this._activeItemIndex = -1, this._activeColumnIndex = 0, this.triggerElement?.removeAttribute("aria-activedescendant");
     }
     setTriggerAttributes(t) {
-      x(t, h ? this.id : this.overlayId, !1, "grid");
+      _(t, b ? this.id : this.overlayId, !1, "grid");
     }
-  }, r = a, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    v(null, n = { value: r }, p, { kind: "class", name: r.name, metadata: t }, null, c), r = n.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), f(r, c);
-  })(), r;
+  }, s = a, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    p(null, l = { value: s }, h, { kind: "class", name: s.name, metadata: t }, null, n), s = l.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), v(s, n);
+  })(), s;
 })();
 export {
-  D as SbbAutocompleteGridElement
+  q as SbbAutocompleteGridElement
 };

package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js

@@ -7,7 +7,7 @@ import { hostAttributes as p, slotState as h } from "../../core/decorators.js";
 import { isEventPrevented as f } from "../../core/eventing.js";
 import { SbbDisabledMixin as g, SbbNegativeMixin as k } from "../../core/mixins.js";
 import { SbbIconNameMixin as y } from "../../icon.js";
-const x = u`*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:block;--sbb-button-display: flex}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-autocomplete-grid-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-autocomplete-grid-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-autocomplete-grid-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-active-background)}`;
+const x = u`*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:block;--sbb-button-display: flex}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-autocomplete-grid-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-autocomplete-grid-button:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-autocomplete-grid-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-active-background)}`;
 let _ = 0;
 const S = {
   attributeFilter: ["data-group-disabled"]
@@ -22,8 +22,7 @@ let T = (() => {
   return a = class extends r {
     /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
     get option() {
-      var t;
-      return ((t = this.closest("sbb-autocomplete-grid-row")) == null ? void 0 : t.querySelector("sbb-autocomplete-grid-option")) || null;
+      return this.closest("sbb-autocomplete-grid-row")?.querySelector("sbb-autocomplete-grid-option") || null;
     }
     constructor() {
       super(), this._disabledFromGroup = !1, this._handleButtonClick = async (t) => {
@@ -43,7 +42,7 @@ let T = (() => {
       return super.renderIconSlot();
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `sbb-autocomplete-grid-button-${++_}`);
+      super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-button-${++_}`;
       const t = this.closest("sbb-autocomplete-grid-optgroup");
       t && (this._disabledFromGroup = t.disabled, this._updateAriaDisabled());
     }

package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js

@@ -1,33 +1,30 @@
-import { __esDecorate as n, __runInitializers as b } from "tslib";
-import { customElement as m } from "lit/decorators.js";
-import { SbbOptgroupBaseElement as c } from "../../option/optgroup.js";
-let f = (() => {
-  var o;
-  let i = [m("sbb-autocomplete-grid-optgroup")], r, a = [], e, l = c;
-  return o = class extends l {
+import { __esDecorate as u, __runInitializers as n } from "tslib";
+import { customElement as b } from "lit/decorators.js";
+import { SbbOptgroupBaseElement as m } from "../../option/optgroup.js";
+let g = (() => {
+  var e;
+  let s = [b("sbb-autocomplete-grid-optgroup")], r, a = [], t, l = m;
+  return e = class extends l {
     get options() {
-      var t;
-      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-option")) ?? []);
+      return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-option") ?? []);
     }
     getAutocompleteParent() {
-      var t;
-      return ((t = this.closest) == null ? void 0 : t.call(this, "sbb-autocomplete-grid")) || null;
+      return this.closest?.("sbb-autocomplete-grid") || null;
     }
     setAttributeFromParent() {
       this.negative = !!this.closest(":is(sbb-autocomplete-grid, sbb-form-field)[negative]"), this.toggleAttribute("data-negative", this.negative);
     }
     proxyDisabledToOptions() {
-      var s;
       super.proxyDisabledToOptions();
-      const t = Array.from(((s = this.querySelectorAll) == null ? void 0 : s.call(this, "sbb-autocomplete-grid-button")) ?? []);
-      for (const u of t)
-        u.toggleAttribute("data-group-disabled", this.disabled);
+      const o = Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-button") ?? []);
+      for (const i of o)
+        i.toggleAttribute("data-group-disabled", this.disabled);
     }
-  }, e = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    n(null, r = { value: e }, i, { kind: "class", name: e.name, metadata: t }, null, a), e = r.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), b(e, a);
-  })(), e;
+  }, t = e, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    u(null, r = { value: t }, s, { kind: "class", name: t.name, metadata: o }, null, a), t = r.value, o && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o }), n(t, a);
+  })(), t;
 })();
 export {
-  f as SbbAutocompleteGridOptgroupElement
+  g as SbbAutocompleteGridOptgroupElement
 };

package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js

@@ -1,31 +1,28 @@
-import { __esDecorate as c, __runInitializers as p } from "tslib";
-import { customElement as u } from "lit/decorators.js";
-import { hostAttributes as m } from "../../core/decorators.js";
-import { EventEmitter as r } from "../../core/eventing.js";
-import { SbbOptionBaseElement as h } from "../../option.js";
-import { css as g } from "lit";
-const v = g`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));display:block}:host([data-active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}.sbb-option{--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;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;padding-block:var(--sbb-option-padding-block);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}:host([data-active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial;border-radius:var(--sbb-option-border-radius)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}`, f = "sbb-autocomplete-grid-option";
-let z = (() => {
+import { __esDecorate as r, __runInitializers as d } from "tslib";
+import { customElement as c } from "lit/decorators.js";
+import { hostAttributes as p } from "../../core/decorators.js";
+import { EventEmitter as b } from "../../core/eventing.js";
+import { SbbOptionBaseElement as u } from "../../option.js";
+import { css as m } from "lit";
+const h = m`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));display:block}:host([data-active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}.sbb-option{--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;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;padding-block:var(--sbb-option-padding-block);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}:host([data-active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial;border-radius:var(--sbb-option-border-radius)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}`, g = "sbb-autocomplete-grid-option";
+let w = (() => {
   var o;
-  let d = [u("sbb-autocomplete-grid-option"), m({
+  let n = [c("sbb-autocomplete-grid-option"), p({
     role: "gridcell"
-  })], l, b = [], i, n = h;
-  var a = (o = class extends n {
+  })], s, a = [], e, l = u;
+  var i = (o = class extends l {
     constructor() {
-      super(...arguments), this.optionId = f, this.selectionChange = new r(this, a.events.selectionChange), this.optionSelected = new r(this, a.events.optionSelected);
+      super(...arguments), this.optionId = g, this.selectionChange = new b(this, i.events.selectionChange), this.optionSelected = new b(this, i.events.optionSelected);
     }
     onExternalMutation(t) {
-      var e, s;
-      super.onExternalMutation(t), (s = (e = this.closest) == null ? void 0 : e.call(this, "sbb-autocomplete-grid-row")) == null || s.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup);
+      super.onExternalMutation(t), this.closest?.("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup);
     }
     willUpdate(t) {
-      var e, s;
-      super.willUpdate(t), t.has("disabled") && ((s = (e = this.closest) == null ? void 0 : e.call(this, "sbb-autocomplete-grid-row")) == null || s.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
+      super.willUpdate(t), t.has("disabled") && (this.closest?.("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
     }
     setAttributeFromParent() {
-      var e;
       const t = this.closest("sbb-autocomplete-grid-optgroup");
-      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), (e = this.closest("sbb-autocomplete-grid-row")) == null || e.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.negative = !!this.closest(":is(sbb-autocomplete-grid[negative],sbb-form-field[negative])"), this.toggleAttribute("data-negative", this.negative);
+      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.closest("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.negative = !!this.closest(":is(sbb-autocomplete-grid[negative],sbb-form-field[negative])"), this.toggleAttribute("data-negative", this.negative);
     }
     selectByClick(t) {
       if (this.disabled || this.disabledFromGroup) {
@@ -34,16 +31,16 @@ let z = (() => {
       }
       this.setSelectedViaUserInteraction(!0);
     }
-  }, i = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    c(null, l = { value: i }, d, { kind: "class", name: i.name, metadata: t }, null, b), a = i = l.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = v, o.events = {
+  }, e = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    r(null, s = { value: e }, n, { kind: "class", name: e.name, metadata: t }, null, a), i = e = s.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = h, o.events = {
     selectionChange: "autocompleteOptionSelectionChange",
     optionSelected: "autocompleteOptionSelected"
-  }, p(i, b), o);
-  return a = i;
+  }, d(e, a), o);
+  return i = e;
 })();
 export {
-  z as SbbAutocompleteGridOptionElement,
-  f as autocompleteGridOptionId
+  w as SbbAutocompleteGridOptionElement,
+  g as autocompleteGridOptionId
 };

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js

@@ -1,19 +1,19 @@
-import { __esDecorate as c, __runInitializers as s } from "tslib";
-import { css as i, LitElement as d, html as u } from "lit";
-import { customElement as n } from "lit/decorators.js";
+import { __esDecorate as s, __runInitializers as c } from "tslib";
+import { css as i, LitElement as d, html as n } from "lit";
+import { customElement as u } from "lit/decorators.js";
 import { hostAttributes as m } from "../../core/decorators.js";
-const p = i`*,:before,:after{box-sizing:border-box}:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-milk);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-cloud);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height);--sbb-autocomplete-grid-row-cursor: pointer;--sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-autocomplete-grid-row-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-iron);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([data-disabled])){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host([data-disabled]){--sbb-autocomplete-grid-row-cursor: default}@media (forced-colors: active){:host([data-disabled]){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x))}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host([data-disabled]) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host([data-disabled]) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media (forced-colors: active){:host([data-disabled]) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
+const p = i`*,:before,:after{box-sizing:border-box}:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-milk);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-cloud);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height);--sbb-autocomplete-grid-row-cursor: pointer;--sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-autocomplete-grid-row-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-iron);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([data-disabled])){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host([data-disabled]){--sbb-autocomplete-grid-row-cursor: default}@media (forced-colors: active){:host([data-disabled]){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x))}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host([data-disabled]) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host([data-disabled]) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media (forced-colors: active){:host([data-disabled]) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
 let g = 0, k = (() => {
   var r;
-  let l = [n("sbb-autocomplete-grid-row"), m({
+  let l = [u("sbb-autocomplete-grid-row"), m({
     role: "row"
   })], t, a = [], o, b = d;
   return r = class extends b {
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `sbb-autocomplete-grid-row-${++g}`);
+      super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-row-${++g}`;
     }
     render() {
-      return u`
+      return n`
       <span class="sbb-autocomplete-grid-row">
         <slot></slot>
       </span>
@@ -21,8 +21,8 @@ let g = 0, k = (() => {
     }
   }, o = r, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    c(null, t = { value: o }, l, { kind: "class", name: o.name, metadata: e }, null, a), o = t.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), r.styles = p, s(o, a), o;
+    s(null, t = { value: o }, l, { kind: "class", name: o.name, metadata: e }, null, a), o = t.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = p, c(o, a), o;
 })();
 export {
   k as SbbAutocompleteGridRowElement

package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js

@@ -1,39 +1,38 @@
-import { __esDecorate as h, __runInitializers as m } from "tslib";
-import { ResizeController as f } from "@lit-labs/observers/resize-controller.js";
-import { css as v, LitElement as x, html as a, nothing as y } from "lit";
-import { customElement as C, state as w } from "lit/decorators.js";
-import { isArrowKeyPressed as k, sbbInputModalityDetector as z, getNextElementIndex as E } from "../../core/a11y.js";
-import { SbbLanguageController as S } from "../../core/controllers.js";
-import { hostAttributes as A } from "../../core/decorators.js";
-import { setOrRemoveAttribute as B } from "../../core/dom.js";
-import { i18nBreadcrumbEllipsisButtonLabel as D } from "../../core/i18n.js";
-import { SbbNamedSlotListMixin as I } from "../../core/mixins.js";
+import { __esDecorate as u, __runInitializers as h } from "tslib";
+import { ResizeController as _ } from "@lit-labs/observers/resize-controller.js";
+import { css as f, LitElement as v, html as a, nothing as x } from "lit";
+import { customElement as y, state as C } from "lit/decorators.js";
+import { isArrowKeyPressed as w, sbbInputModalityDetector as k, getNextElementIndex as z } from "../../core/a11y.js";
+import { SbbLanguageController as E } from "../../core/controllers.js";
+import { hostAttributes as S } from "../../core/decorators.js";
+import { setOrRemoveAttribute as A } from "../../core/dom.js";
+import { i18nBreadcrumbEllipsisButtonLabel as B } from "../../core/i18n.js";
+import { SbbNamedSlotListMixin as D } from "../../core/mixins.js";
 import "../../icon.js";
-const N = v`*,:before,:after{box-sizing:border-box}:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-color-granite)}#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:pointer;color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media (forced-colors: active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media (any-hover: hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-charcoal);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-color-milk)}}@media (any-hover: hover) and (forced-colors: active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, p = 3;
-let P = (() => {
+const I = f`*,:before,:after{box-sizing:border-box}:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-color-granite)}#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:pointer;color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media (forced-colors: active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media (any-hover: hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-charcoal);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-color-milk)}}@media (any-hover: hover) and (forced-colors: active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, m = 3;
+let H = (() => {
   var t;
-  let g = [C("sbb-breadcrumb-group"), A({
+  let p = [y("sbb-breadcrumb-group"), S({
     role: "navigation"
-  })], l, o = [], s, b = I(x), n = [], d;
+  })], l, o = [], s, b = D(v), n = [], d;
   return t = class extends b {
     /* The state of the breadcrumb group. */
     set _state(e) {
-      B(this, "data-state", e);
+      A(this, "data-state", e);
     }
     get _state() {
       return this.getAttribute("data-state");
     }
     constructor() {
-      var e;
-      super(), this.listChildLocalNames = (m(this, n), ["sbb-breadcrumb"]), this._resizeObserver = new f(this, {
+      super(), this.listChildLocalNames = (h(this, n), ["sbb-breadcrumb"]), this._resizeObserver = new _(this, {
         target: null,
         skipInitial: !0,
         callback: () => this._evaluateCollapsedState()
-      }), this._language = new S(this), this._markForFocus = !1, (e = this.addEventListener) == null || e.call(this, "keydown", (r) => this._handleKeyDown(r));
+      }), this._language = new E(this), this._markForFocus = !1, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
     }
     _handleKeyDown(e) {
       if (!(!this.listChildren.length || // don't trap nested handling
-      e.target !== this && e.target.parentElement !== this) && k(e)) {
+      e.target !== this && e.target.parentElement !== this) && w(e)) {
         if (this._state === "collapsed")
           return this._focusNextCollapsed(e);
         this._focusNext(e);
@@ -46,13 +45,11 @@ let P = (() => {
       super.willUpdate(e), e.has("listChildren") && this._syncBreadcrumbs();
     }
     updated(e) {
-      var r;
-      super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && z.mostRecentModality === "keyboard" && ((r = this.listChildren[1]) == null || r.focus(), this._markForFocus = !1);
+      super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && k.mostRecentModality === "keyboard" && (this.listChildren[1]?.focus(), this._markForFocus = !1);
     }
     /** Apply the aria-current attribute to the last sbb-breadcrumb element. */
     _syncBreadcrumbs() {
-      var e;
-      this.listChildren.slice(0, -1).filter((r) => r.hasAttribute("accessibility-current")).forEach((r) => r.removeAttribute("accessibility-current")), (e = this.listChildren[this.listChildren.length - 1]) == null || e.setAttribute("accessibility-current", "page"), this.listChildren.length < p && (this._state = null);
+      this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length < m && (this._state = null);
     }
     /**
      * Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows.
@@ -66,9 +63,8 @@ let P = (() => {
       this._focusNext(e, r);
     }
     _focusNext(e, r = this.listChildren) {
-      var c;
-      const i = r.findIndex((u) => u === document.activeElement || u === this.shadowRoot.activeElement), _ = E(e, i, r.length);
-      (c = r[_]) == null || c.focus(), e.preventDefault();
+      const i = r.findIndex((c) => c === document.activeElement || c === this.shadowRoot.activeElement), g = z(e, i, r.length);
+      r[g]?.focus(), e.preventDefault();
     }
     /**
      * Note: due to @State annotation on _state, this method triggers a new render; as a consequence, the focus is moved
@@ -79,7 +75,7 @@ let P = (() => {
     }
     /** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
     _evaluateCollapsedState() {
-      !this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= p && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
+      !this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= m && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
     }
     _renderCollapsed() {
       return a`
@@ -94,7 +90,7 @@ let P = (() => {
         <button
           type="button"
           id="sbb-breadcrumb-ellipsis"
-          aria-label=${D[this._language.current]}
+          aria-label=${B[this._language.current]}
           aria-expanded="false"
           @click=${() => this._expandBreadcrumbs()}
         >
@@ -117,7 +113,7 @@ let P = (() => {
           ${r !== i.length - 1 ? a`<sbb-icon
                 name="chevron-small-right-small"
                 class="sbb-breadcrumb-group__divider-icon"
-              ></sbb-icon>` : y}
+              ></sbb-icon>` : x}
         </li>
       `);
     }
@@ -131,11 +127,11 @@ let P = (() => {
     }
   }, s = t, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    d = [w()], h(t, null, d, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (r) => "_state" in r, set: (r, i) => {
+    d = [C()], u(t, null, d, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (r) => "_state" in r, set: (r, i) => {
       r._state = i;
-    } }, metadata: e }, null, n), h(null, l = { value: s }, g, { kind: "class", name: s.name, metadata: e }, null, o), s = l.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), t.styles = N, m(s, o), s;
+    } }, metadata: e }, null, n), u(null, l = { value: s }, p, { kind: "class", name: s.name, metadata: e }, null, o), s = l.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), t.styles = I, h(s, o), s;
 })();
 export {
-  P as SbbBreadcrumbGroupElement
+  H as SbbBreadcrumbGroupElement
 };

package/button/mini-button/mini-button.component.js

@@ -5,7 +5,7 @@ import { slotState as c } from "../../core/decorators.js";
 import { SbbDisabledTabIndexActionMixin as u, SbbNegativeMixin as v } from "../../core/mixins.js";
 import { SbbIconNameMixin as m } from "../../icon.js";
 import { css as f } from "lit";
-const h = f`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-mini-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-mini-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-mini-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-mini-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-mini-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-mini-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-mini-button:before{background-color:var(--sbb-button-color-active-background)}`;
+const h = f`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-mini-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-mini-button:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-mini-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-mini-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-mini-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-mini-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-mini-button:before{background-color:var(--sbb-button-color-active-background)}`;
 let w = (() => {
   var o;
   let i = [l("sbb-mini-button"), c()], a, r = [], t, e = u(v(m(d)));

package/button/mini-button-group/mini-button-group.component.js

@@ -41,8 +41,7 @@ let $ = (() => {
       super.willUpdate(e), e.has("negative") && this._proxyNegative();
     }
     _proxyNegative() {
-      var e;
-      (e = this.querySelectorAll) == null || e.call(this, "sbb-divider, sbb-mini-button").forEach((b) => b.negative = this.negative);
+      this.querySelectorAll?.("sbb-divider, sbb-mini-button").forEach((e) => e.negative = this.negative);
     }
     render() {
       return N`