@sbb-esta/lyne-elements 1.2.1 → 1.4.0

package/option/option.js

@@ -1,38 +1,30 @@
-import { css as v, LitElement as _, html as l, nothing as n } from "lit";
-import { property as p, state as b, customElement as f } from "lit/decorators.js";
-import { SbbConnectedAbortController as m, SbbSlotStateController as y } from "../core/controllers.js";
-import { hostAttributes as x } from "../core/decorators.js";
-import { setOrRemoveAttribute as g, isAndroid as k, isSafari as A } from "../core/dom.js";
-import { EventEmitter as u } from "../core/eventing.js";
-import { SbbDisabledMixin as S, SbbHydrationMixin as C } from "../core/mixins.js";
+import { LitElement as f, html as a, nothing as d, css as m } from "lit";
+import { property as u, state as c, customElement as _ } from "lit/decorators.js";
+import { slotState as y, hostAttributes as x } from "../core/decorators.js";
+import { EventEmitter as g } from "../core/eventing.js";
+import { SbbConnectedAbortController as A } from "../core/controllers.js";
+import { setOrRemoveAttribute as v, isAndroid as k, isSafari as S } from "../core/dom.js";
+import { SbbDisabledMixin as C, SbbHydrationMixin as $ } from "../core/mixins.js";
 import { AgnosticMutationObserver as w } from "../core/observers.js";
-import { SbbIconNameMixin as $ } from "../icon.js";
+import { SbbIconNameMixin as O } from "../icon.js";
 import "../screen-reader-only.js";
 import "../visual-checkbox.js";
-const G = v`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-color-milk);--sbb-option-background-color-active: var(--sbb-color-cloud);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-background-color: var(--sbb-color-milk);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke);--sbb-option-background-color-hover: var(--sbb-color-charcoal);--sbb-option-background-color-active: var(--sbb-color-iron);--sbb-option-disabled-border-color: var(--sbb-color-smoke);--sbb-option-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}@media (any-hover: hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}: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__container{background-color:var(--sbb-option-background-color)}.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);padding-inline:var(--sbb-option-padding-inline);padding-block:var(--sbb-option-padding-block);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}:host([active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-option-border-radius)}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.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)}.sbb-option__label{white-space:initial}`;
-var O = Object.defineProperty, H = Object.getOwnPropertyDescriptor, s = (t, i, e, a) => {
-  for (var r = a > 1 ? void 0 : a ? H(i, e) : i, d = t.length - 1, h; d >= 0; d--)
-    (h = t[d]) && (r = (a ? h(i, e, r) : h(r)) || r);
-  return a && r && O(i, e, r), r;
+var H = Object.defineProperty, G = Object.getOwnPropertyDescriptor, l = (t, i, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? G(i, e) : i, n = t.length - 1, b; n >= 0; n--)
+    (b = t[n]) && (o = (r ? b(i, e, o) : b(o)) || o);
+  return r && o && H(i, e, o), o;
 };
-const c = A;
-let D = 0;
-const L = {
+let L = 0;
+const p = S, D = {
   attributeFilter: ["data-group-disabled", "data-negative"]
 };
-let o = class extends S(
-  $(C(_))
+let s = class extends C(
+  O($(f))
 ) {
   constructor() {
-    super(), this._selectionChange = new u(
-      this,
-      o.events.selectionChange
-    ), this._optionSelected = new u(
-      this,
-      o.events.optionSelected
-    ), this._negative = !1, this._disabledFromGroup = !1, this._highlightString = null, this._disableLabelHighlight = !1, this._inertAriaGroups = !1, this._abort = new m(this), this._optionAttributeObserver = new w(
-      (t) => this._onOptionAttributesChange(t)
-    ), new y(this), c && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = c) : this._inertAriaGroups = c);
+    super(), this.negative = !1, this.disabledFromGroup = !1, this.disableLabelHighlight = !1, this._highlightString = null, this._inertAriaGroups = !1, this._abort = new A(this), this._optionAttributeObserver = new w(
+      (t) => this.onOptionAttributesChange(t)
+    ), p && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = p) : this._inertAriaGroups = p);
   }
   set value(t) {
     this.setAttribute("value", `${t}`);
@@ -46,17 +38,8 @@ let o = class extends S(
   get selected() {
     return this.hasAttribute("selected");
   }
-  set _variant(t) {
-    t && this.setAttribute("data-variant", t);
-  }
-  get _variant() {
-    return this.getAttribute("data-variant");
-  }
-  set _isMultiple(t) {
-    this.toggleAttribute("data-multiple", t);
-  }
-  get _isMultiple() {
-    return !this.hydrationRequired && this.hasAttribute("data-multiple");
+  updateDisableHighlight(t) {
+    this.disableLabelHighlight = t, this.toggleAttribute("data-disable-highlight", t);
   }
   attributeChangedCallback(t, i, e) {
     (t !== "value" || i !== e) && super.attributeChangedCallback(t, i, e);
@@ -73,161 +56,220 @@ let o = class extends S(
    * @internal
    */
   setSelectedViaUserInteraction(t) {
-    this.selected = t, this._selectionChange.emit(), this.selected && this._optionSelected.emit();
-  }
-  _updateDisableHighlight(t) {
-    this._disableLabelHighlight = t, this.toggleAttribute("data-disable-highlight", t);
-  }
-  _selectByClick(t) {
-    if (this.disabled || this._disabledFromGroup) {
-      t.stopPropagation();
-      return;
-    }
-    this._isMultiple ? (t.stopPropagation(), this.setSelectedViaUserInteraction(!this.selected)) : this.setSelectedViaUserInteraction(!0);
+    this.selected = t, this.selectionChange.emit(), this.selected && this.optionSelected.emit();
   }
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `sbb-option-${D++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this._init()) : this._init();
+    super.connectedCallback(), this.id || (this.id = `${this.optionId}-${L++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("disabled") && (g(this, "tabindex", k && !this.disabled && 0), this._updateAriaDisabled());
+    super.willUpdate(t), t.has("disabled") && (v(this, "tabindex", k && !this.disabled && 0), this.updateAriaDisabled());
   }
   firstUpdated(t) {
     super.firstUpdated(t), this._updateAriaSelected();
   }
-  _init() {
-    var e, a;
-    const t = this._abort.signal, i = (e = this.closest) == null ? void 0 : e.call(this, "sbb-optgroup");
-    i && (this._disabledFromGroup = i.disabled, this._updateAriaDisabled()), this._optionAttributeObserver.observe(this, L), this._negative = !!((a = this.closest) != null && a.call(
-      this,
-      // :is() selector not possible due to test environment
-      "sbb-autocomplete[negative],sbb-select[negative],sbb-form-field[negative]"
-    )), this.toggleAttribute("data-negative", this._negative), this._setVariantByContext(), this._handleHighlightState(), this.addEventListener("click", (r) => this._selectByClick(r), {
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._optionAttributeObserver.disconnect();
+  }
+  init() {
+    this.setAttributeFromParent(), this._optionAttributeObserver.observe(this, D);
+    const t = this._abort.signal;
+    this.addEventListener("click", (i) => this.selectByClick(i), {
       signal: t,
       passive: !0
     });
   }
-  _updateAriaDisabled() {
-    g(
+  updateAriaDisabled() {
+    v(
       this,
       "aria-disabled",
-      this.disabled || this._disabledFromGroup ? "true" : null
+      this.disabled || this.disabledFromGroup ? "true" : null
     );
   }
   _updateAriaSelected() {
     this.setAttribute("aria-selected", `${this.selected}`);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._optionAttributeObserver.disconnect();
-  }
-  _setVariantByContext() {
-    var t, i, e;
-    (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (i = this.closest) != null && i.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((e = this.closest) != null && e.call(this, "sbb-select[multiple]"));
-  }
   /** Observe changes on data attributes and set the appropriate values. */
-  _onOptionAttributesChange(t) {
+  onOptionAttributesChange(t) {
     for (const i of t)
-      i.attributeName === "data-group-disabled" ? (this._disabledFromGroup = this.hasAttribute("data-group-disabled"), this._updateAriaDisabled()) : i.attributeName === "data-negative" && (this._negative = this.hasAttribute("data-negative"));
+      i.attributeName === "data-group-disabled" ? (this.disabledFromGroup = this.hasAttribute("data-group-disabled"), this.updateAriaDisabled()) : i.attributeName === "data-negative" && (this.negative = this.hasAttribute("data-negative"));
   }
-  _handleHighlightState() {
-    if (this._variant !== "autocomplete") {
-      this._updateDisableHighlight(!0);
-      return;
-    }
+  handleHighlightState() {
     const t = Array.from(this.childNodes ?? []).filter(
-      (e) => !(e instanceof Element) || e.slot !== "icon"
+      (e) => e.nodeType !== Node.COMMENT_NODE && (!(e instanceof Element) || e.slot !== "icon")
     ), i = t.filter((e) => e.nodeType === Node.TEXT_NODE);
     if (i.length === 0 || t.filter((e) => !(e instanceof Element) || e.localName !== "template").length !== i.length) {
-      this._updateDisableHighlight(!0);
+      this.updateDisableHighlight(!0);
       return;
     }
-    this._label = i.map((e) => e.wholeText).filter((e) => e.trim()).join();
+    this.label = i.map((e) => e.wholeText).filter((e) => e.trim()).join();
   }
-  _getHighlightedLabel() {
+  getHighlightedLabel() {
     if (!this._highlightString || !this._highlightString.trim())
-      return l`${this._label}`;
-    const t = this._label.toLowerCase().indexOf(this._highlightString.toLowerCase());
+      return a`${this.label}`;
+    const t = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
     if (t === -1)
-      return l`${this._label}`;
-    const i = this._label.substring(0, t), e = this._label.substring(
+      return a`${this.label}`;
+    const i = this.label.substring(0, t), e = this.label.substring(
       t,
       t + this._highlightString.length
-    ), a = this._label.substring(t + this._highlightString.length);
-    return l`
+    ), r = this.label.substring(t + this._highlightString.length);
+    return a`
       <span class="sbb-option__label--highlight">${i}</span><span>${e}</span
-      ><span class="sbb-option__label--highlight">${a}</span>
+      ><span class="sbb-option__label--highlight">${r}</span>
     `;
   }
+  renderIcon() {
+    return a` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
+  }
+  renderLabel() {
+    return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : d;
+  }
+  renderTick() {
+    return d;
+  }
   render() {
-    const t = this._isMultiple;
-    return l`
+    return a`
       <div class="sbb-option__container">
         <div class="sbb-option">
-          <!-- Icon -->
-          ${t ? n : l` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
-
-          <!-- Checkbox -->
-          ${t ? l` <sbb-visual-checkbox
-                ?checked=${this.selected}
-                ?disabled=${this.disabled || this._disabledFromGroup}
-                ?negative=${this._negative}
-              ></sbb-visual-checkbox>` : n}
-
-          <!-- Label -->
+          ${this.renderIcon()}
           <span class="sbb-option__label">
-            <slot @slotchange=${this._handleHighlightState}></slot>
-
-            <!-- Search highlight -->
-            ${this._variant === "autocomplete" && this._label && !this._disableLabelHighlight ? this._getHighlightedLabel() : n}
-            ${this._inertAriaGroups && this.getAttribute("data-group-label") ? l` <sbb-screen-reader-only>
+            <slot @slotchange=${this.handleHighlightState}></slot>
+            ${this.renderLabel()}
+            ${this._inertAriaGroups && this.getAttribute("data-group-label") ? a` <sbb-screen-reader-only>
                   (${this.getAttribute("data-group-label")})</sbb-screen-reader-only
-                >` : n}
+                >` : d}
           </span>
-
-          <!-- Selected tick -->
-          ${this._variant === "select" && !t && this.selected ? l`<sbb-icon name="tick-small"></sbb-icon>` : n}
+          ${this.renderTick()}
         </div>
       </div>
     `;
   }
 };
-o.styles = G;
-o.events = {
+l([
+  u()
+], s.prototype, "value", 1);
+l([
+  u({ reflect: !0, type: Boolean })
+], s.prototype, "active", 2);
+l([
+  u({ type: Boolean })
+], s.prototype, "selected", 1);
+l([
+  c()
+], s.prototype, "negative", 2);
+l([
+  c()
+], s.prototype, "disabledFromGroup", 2);
+l([
+  c()
+], s.prototype, "label", 2);
+l([
+  c()
+], s.prototype, "disableLabelHighlight", 2);
+l([
+  c()
+], s.prototype, "_highlightString", 2);
+l([
+  c()
+], s.prototype, "_inertAriaGroups", 2);
+s = l([
+  y()
+], s);
+const I = m`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-color-milk);--sbb-option-background-color-active: var(--sbb-color-cloud);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-background-color: var(--sbb-color-milk);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke);--sbb-option-background-color-hover: var(--sbb-color-charcoal);--sbb-option-background-color-active: var(--sbb-color-iron);--sbb-option-disabled-border-color: var(--sbb-color-smoke);--sbb-option-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}@media (any-hover: hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}: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__container{background-color:var(--sbb-option-background-color)}.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);padding-inline:var(--sbb-option-padding-inline);padding-block:var(--sbb-option-padding-block);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}:host([active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-option-border-radius)}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.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)}.sbb-option__label{white-space:initial}`;
+var M = Object.defineProperty, E = Object.getOwnPropertyDescriptor, N = (t, i, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? E(i, e) : i, n = t.length - 1, b; n >= 0; n--)
+    (b = t[n]) && (o = (r ? b(i, e, o) : b(o)) || o);
+  return r && o && M(i, e, o), o;
+};
+let h = class extends s {
+  constructor() {
+    super(...arguments), this.optionId = "sbb-option", this.selectionChange = new g(
+      this,
+      h.events.selectionChange
+    ), this.optionSelected = new g(
+      this,
+      h.events.optionSelected
+    );
+  }
+  set _variant(t) {
+    t && this.setAttribute("data-variant", t);
+  }
+  get _variant() {
+    return this.getAttribute("data-variant");
+  }
+  set _isMultiple(t) {
+    this.toggleAttribute("data-multiple", t);
+  }
+  get _isMultiple() {
+    return !this.hydrationRequired && this.hasAttribute("data-multiple");
+  }
+  setAttributeFromParent() {
+    var i, e;
+    const t = (i = this.closest) == null ? void 0 : i.call(this, "sbb-optgroup");
+    t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.negative = !!((e = this.closest) != null && e.call(
+      this,
+      // :is() selector not possible due to test environment
+      "sbb-autocomplete[negative],sbb-form-field[negative]"
+    )), this.toggleAttribute("data-negative", this.negative), this.toggleAttribute("data-multiple", this._isMultiple);
+  }
+  selectByClick(t) {
+    if (this.disabled || this.disabledFromGroup) {
+      t.stopPropagation();
+      return;
+    }
+    this._isMultiple ? (t.stopPropagation(), this.setSelectedViaUserInteraction(!this.selected)) : this.setSelectedViaUserInteraction(!0);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  init() {
+    super.init(), this._setVariantByContext(), this.handleHighlightState();
+  }
+  _setVariantByContext() {
+    var t, i, e;
+    (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (i = this.closest) != null && i.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((e = this.closest) != null && e.call(this, "sbb-select[multiple]"));
+  }
+  handleHighlightState() {
+    if (this._variant !== "autocomplete") {
+      this.updateDisableHighlight(!0);
+      return;
+    }
+    super.handleHighlightState();
+  }
+  renderIcon() {
+    return a`
+      <!-- Icon -->
+      ${this._isMultiple ? d : a` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+
+      <!-- Checkbox -->
+      ${this._isMultiple ? a`
+            <sbb-visual-checkbox
+              ?checked=${this.selected}
+              ?disabled=${this.disabled || this.disabledFromGroup}
+              ?negative=${this.negative}
+            ></sbb-visual-checkbox>
+          ` : d}
+    `;
+  }
+  renderLabel() {
+    return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : d;
+  }
+  renderTick() {
+    return this._variant === "select" && !this._isMultiple && this.selected ? a`<sbb-icon name="tick-small"></sbb-icon>` : d;
+  }
+};
+h.styles = I;
+h.events = {
   selectionChange: "optionSelectionChange",
   optionSelected: "optionSelected"
 };
-s([
-  p()
-], o.prototype, "value", 1);
-s([
-  p({ reflect: !0, type: Boolean })
-], o.prototype, "active", 2);
-s([
-  p({ type: Boolean })
-], o.prototype, "selected", 1);
-s([
-  b()
-], o.prototype, "_negative", 2);
-s([
-  b()
-], o.prototype, "_disabledFromGroup", 2);
-s([
-  b()
-], o.prototype, "_label", 2);
-s([
-  b()
-], o.prototype, "_highlightString", 2);
-s([
-  b()
-], o.prototype, "_disableLabelHighlight", 2);
-s([
-  b()
-], o.prototype, "_inertAriaGroups", 2);
-o = s([
-  f("sbb-option"),
+h = N([
+  _("sbb-option"),
   x({
     role: "option"
   })
-], o);
+], h);
 export {
-  o as SbbOptionElement
+  s as SbbOptionBaseElement,
+  h as SbbOptionElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -104,6 +104,41 @@
       "development": "./development/autocomplete.js",
       "default": "./autocomplete.js"
     },
+    "./autocomplete-grid.js": {
+      "types": "./development/autocomplete-grid.d.ts",
+      "development": "./development/autocomplete-grid.js",
+      "default": "./autocomplete-grid.js"
+    },
+    "./autocomplete-grid/autocomplete-grid.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid.js",
+      "default": "./autocomplete-grid/autocomplete-grid.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-button.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-button.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-button.js",
+      "default": "./autocomplete-grid/autocomplete-grid-button.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-cell.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-cell.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-cell.js",
+      "default": "./autocomplete-grid/autocomplete-grid-cell.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-optgroup.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-optgroup.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-optgroup.js",
+      "default": "./autocomplete-grid/autocomplete-grid-optgroup.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-option.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-option.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-option.js",
+      "default": "./autocomplete-grid/autocomplete-grid-option.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-row.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-row.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-row.js",
+      "default": "./autocomplete-grid/autocomplete-grid-row.js"
+    },
     "./breadcrumb.js": {
       "types": "./development/breadcrumb.d.ts",
       "development": "./development/breadcrumb.js",

package/popover/popover/popover.d.ts

@@ -2,6 +2,7 @@ import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { SbbOpenCloseBaseElement } from '../../core/base-elements.js';
 import { EventEmitter } from '../../core/eventing.js';
 
+declare const SbbPopoverElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays contextual information within a popover.
  *
@@ -15,7 +16,7 @@ import { EventEmitter } from '../../core/eventing.js';
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
-export declare class SbbPopoverElement extends SbbOpenCloseBaseElement {
+export declare class SbbPopoverElement extends SbbPopoverElement_base {
     static styles: CSSResultGroup;
     /**
      * The element that will trigger the popover overlay.
@@ -82,4 +83,5 @@ declare global {
         'sbb-popover': SbbPopoverElement;
     }
 }
+export {};
 //# sourceMappingURL=popover.d.ts.map

package/popover/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAGtE,OAAO,EAA4B,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAYhF,OAAO,kCAAkC,CAAC;AAS1C;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,uBAAuB;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAElD,iDAAiD;IACmB,eAAe,CAAC,EAAE,OAAO,CACrF;IAER,wDAAwD;IACQ,YAAY,EAAE,OAAO,CAAS;IAE9F,8CAA8C;IACc,SAAS,CAAC,qBAAK;IAE3E,+CAA+C;IACc,UAAU,CAAC,qBAAK;IAE7E,wEAAwE;IACX,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd,sEAAsE;IACtE,UAAmB,SAAS,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAGvE;IAEF,kDAAkD;IAClD,UAAmB,QAAQ,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAGtE;IAEF,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAE7C,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAC3C,OAAO,CAAC,4BAA4B,CAAC,CAAU;IAC/C,OAAO,CAAC,kBAAkB,CAAmB;IAC7C,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IAEpD,0CAA0C;IACnC,IAAI,IAAI,IAAI;IAyBnB,0BAA0B;IACnB,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAgBxC,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAYzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,UAAU;IAuDlB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,4BAA4B;IAUpC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAS3B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAMF,OAAO,CAAC,sBAAsB;IA8B9B,OAAO,CAAC,gBAAgB;IAyCxB,OAAO,CAAC,mBAAmB;cA6BR,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAGtE,OAAO,EAA4B,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAahF,OAAO,kCAAkC,CAAC;;AAS1C;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,sBAA0C;IAC/E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAElD,iDAAiD;IACmB,eAAe,CAAC,EAAE,OAAO,CACrF;IAER,wDAAwD;IACQ,YAAY,EAAE,OAAO,CAAS;IAE9F,8CAA8C;IACc,SAAS,CAAC,qBAAK;IAE3E,+CAA+C;IACc,UAAU,CAAC,qBAAK;IAE7E,wEAAwE;IACX,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd,sEAAsE;IACtE,UAAmB,SAAS,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAGvE;IAEF,kDAAkD;IAClD,UAAmB,QAAQ,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAGtE;IAEF,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAE7C,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAC3C,OAAO,CAAC,4BAA4B,CAAC,CAAU;IAC/C,OAAO,CAAC,kBAAkB,CAAmB;IAC7C,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IAEpD,0CAA0C;IACnC,IAAI,IAAI,IAAI;IAyBnB,0BAA0B;IACnB,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAgBxC,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAYzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,UAAU;IA8DlB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,4BAA4B;IAUpC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAS3B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAMF,OAAO,CAAC,sBAAsB;IA8B9B,OAAO,CAAC,gBAAgB;IAyCxB,OAAO,CAAC,mBAAmB;cA6BR,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/popover/popover-trigger.js

@@ -2,16 +2,16 @@ import { css as l, html as c } from "lit";
 import { customElement as d } from "lit/decorators.js";
 import { SbbButtonBaseElement as u } from "../core/base-elements.js";
 import { hostContext as n } from "../core/dom.js";
-import { SbbDisabledTabIndexActionMixin as v, SbbNegativeMixin as h } from "../core/mixins.js";
-import { SbbIconNameMixin as m } from "../icon.js";
-const p = l`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-color: inherit;outline:none!important;display:inline-block}@media (forced-colors: active){:host{--sbb-popover-color: ButtonText !important}}@media (any-hover: hover){:host(:hover){--sbb-popover-color: var(--sbb-color-iron)}:host(:hover[negative]){--sbb-popover-color: var(--sbb-color-cloud)}}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:active,[data-active])){--sbb-popover-color: var(--sbb-color-anthracite)}:host(:is(:active,[data-active])[negative]){--sbb-popover-color: var(--sbb-color-cement)}:host([disabled]){--sbb-popover-color: var(--sbb-color-graphite);pointer-events:none}@media (forced-colors: active){:host([disabled]){--sbb-popover-color: GrayText !important}}:host([disabled][negative]){--sbb-popover-color: var(--sbb-color-smoke)}:host([data-icon-small]){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([data-icon-small]){--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([data-icon-small]) .sbb-popover-trigger{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:flex}:host([data-icon-small]) .sbb-popover-trigger: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([data-icon-small][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([data-icon-small][disabled]){--sbb-button-border-width: var(--sbb-border-width-1x)}@media (forced-colors: active){:host([data-icon-small][disabled]){--sbb-button-color-disabled-text: GrayText !important}}:host([data-icon-small][disabled]) .sbb-popover-trigger{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host([data-icon-small][disabled]) .sbb-popover-trigger: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([data-icon-small]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-popover-trigger: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([data-icon-small]:not([disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (forced-colors: active){:host([data-icon-small]:not([disabled],:active,[data-active]):hover){--sbb-button-color-hover-border: Highlight !important}}@media (any-hover: hover){:host([data-icon-small]:not([disabled],:active,[data-active]):hover) .sbb-popover-trigger: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([data-icon-small]:not([disabled],:active,[data-active]):hover) .sbb-popover-trigger{color:var(--sbb-button-color-hover-text)}}:host([data-icon-small]:is(:active,[data-active])) .sbb-popover-trigger:before{color:var(--sbb-button-color-active-text);background-color:var(--sbb-button-color-active-background);border-color:var(--sbb-button-color-active-border)}:host(:not([data-icon-small])) .sbb-popover-trigger{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;cursor:pointer;color:var(--sbb-popover-color)}:host(:focus-visible:not([data-icon-small],[data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-popover-trigger{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-4x)}sbb-icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}`;
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, x = (t, r, e, b) => {
-  for (var o = b > 1 ? void 0 : b ? g(r, e) : r, a = t.length - 1, s; a >= 0; a--)
-    (s = t[a]) && (o = (b ? s(r, e, o) : s(o)) || o);
-  return b && o && f(r, e, o), o;
+import { SbbDisabledTabIndexActionMixin as v, SbbNegativeMixin as p } from "../core/mixins.js";
+import { SbbIconNameMixin as h } from "../icon.js";
+const m = l`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-color: inherit;outline:none!important;display:inline-block}@media (forced-colors: active){:host{--sbb-popover-color: ButtonText !important}}@media (any-hover: hover){:host(:hover){--sbb-popover-color: var(--sbb-color-iron)}:host(:hover[negative]){--sbb-popover-color: var(--sbb-color-cloud)}}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:active,[data-active])){--sbb-popover-color: var(--sbb-color-anthracite)}:host(:is(:active,[data-active])[negative]){--sbb-popover-color: var(--sbb-color-cement)}:host([disabled]){--sbb-popover-color: var(--sbb-color-graphite);pointer-events:none}@media (forced-colors: active){:host([disabled]){--sbb-popover-color: GrayText !important}}:host([disabled][negative]){--sbb-popover-color: var(--sbb-color-smoke)}:host([data-icon-small]){display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host([data-icon-small]){--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([data-icon-small]) .sbb-popover-trigger{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([data-icon-small]) .sbb-popover-trigger:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([data-icon-small][negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host([data-icon-small][disabled]) .sbb-popover-trigger{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host([data-icon-small][disabled]) .sbb-popover-trigger: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([data-icon-small]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-popover-trigger: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([data-icon-small]:not([disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host([data-icon-small]:not([disabled],:active,[data-active]):hover) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-hover-background)}}:host([data-icon-small]:is(:active,[data-active])) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-active-background)}:host(:not([data-icon-small])) .sbb-popover-trigger{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;cursor:pointer;color:var(--sbb-popover-color)}:host(:focus-visible:not([data-icon-small],[data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-popover-trigger{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-4x)}sbb-icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}`;
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, k = (t, r, a, b) => {
+  for (var o = b > 1 ? void 0 : b ? f(r, a) : r, e = t.length - 1, i; e >= 0; e--)
+    (i = t[e]) && (o = (b ? i(r, a, o) : i(o)) || o);
+  return b && o && g(r, a, o), o;
 };
-let i = class extends v(
-  h(m(u))
+let s = class extends v(
+  p(h(u))
 ) {
   connectedCallback() {
     super.connectedCallback();
@@ -26,10 +26,10 @@ let i = class extends v(
     `;
   }
 };
-i.styles = p;
-i = x([
+s.styles = m;
+s = k([
   d("sbb-popover-trigger")
-], i);
+], s);
 export {
-  i as SbbPopoverTriggerElement
+  s as SbbPopoverTriggerElement
 };