@sbb-esta/lyne-elements 1.3.0 → 1.5.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 } from "../core/controllers.js";
-import { hostAttributes as y, slotState 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)
-    ), 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,162 +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"),
-  y({
+h = N([
+  _("sbb-option"),
+  x({
     role: "option"
-  }),
-  x()
-], 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.3.0",
+  "version": "1.5.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",
@@ -434,6 +469,26 @@
       "development": "./development/file-selector.js",
       "default": "./file-selector.js"
     },
+    "./flip-card.js": {
+      "types": "./development/flip-card.d.ts",
+      "development": "./development/flip-card.js",
+      "default": "./flip-card.js"
+    },
+    "./flip-card/flip-card.js": {
+      "types": "./development/flip-card/flip-card.d.ts",
+      "development": "./development/flip-card/flip-card.js",
+      "default": "./flip-card/flip-card.js"
+    },
+    "./flip-card/flip-card-details.js": {
+      "types": "./development/flip-card/flip-card-details.d.ts",
+      "development": "./development/flip-card/flip-card-details.js",
+      "default": "./flip-card/flip-card-details.js"
+    },
+    "./flip-card/flip-card-summary.js": {
+      "types": "./development/flip-card/flip-card-summary.d.ts",
+      "development": "./development/flip-card/flip-card-summary.js",
+      "default": "./flip-card/flip-card-summary.js"
+    },
     "./footer.js": {
       "types": "./development/footer.d.ts",
       "development": "./development/footer.js",

package/radio-button/common/radio-button-common.d.ts

@@ -3,7 +3,7 @@ import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '.
 import { AbstractConstructor } from '../../core/mixins.js';
 import { SbbRadioButtonGroupElement } from '../radio-button-group.js';
 
-export type SbbRadioButtonSize = 's' | 'm';
+export type SbbRadioButtonSize = 'xs' | 's' | 'm';
 export type SbbRadioButtonStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
 export declare class SbbRadioButtonCommonElementMixinType {
     get allowEmptySelection(): boolean;

package/radio-button/common/radio-button-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/common/radio-button-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAOtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3C,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oCAAoC;IACvD,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACtB,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACtD,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,OAAO,EADJ,OACI,EAAE;IACrB,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,cAC5E,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CAmK9D,CAAC"}
+{"version":3,"file":"radio-button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/common/radio-button-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAOtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAElD,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oCAAoC;IACvD,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACtB,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACtD,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,OAAO,EADJ,OACI,EAAE;IACrB,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,cAC5E,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CAuJ9D,CAAC"}

package/radio-button/common.js

@@ -9,10 +9,10 @@ var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (s, e, t
     (n = s[a]) && (r = (o ? n(e, t, r) : n(r)) || r);
   return o && r && m(e, t, r), r;
 };
-const z = (s) => {
+const C = (s) => {
   let e = class extends s {
     constructor() {
-      super(...arguments), this._allowEmptySelection = !1, this._disabled = !1, this._required = !1, this._group = null, this._checked = !1, this._size = "m", this._abort = new l(this), this._handlerRepository = new h(this, u), this._stateChange = new p(
+      super(...arguments), this._allowEmptySelection = !1, this._disabled = !1, this._required = !1, this._group = null, this._checked = !1, this._abort = new l(this), this._handlerRepository = new h(this, u), this._stateChange = new p(
         this,
         e.events.stateChange,
         { bubbles: !0 }
@@ -51,13 +51,6 @@ const z = (s) => {
     get checked() {
       return this._checked;
     }
-    set size(t) {
-      this._size = t;
-    }
-    get size() {
-      var t;
-      return ((t = this.group) == null ? void 0 : t.size) ?? this._size;
-    }
     select() {
       this.disabled || (this.allowEmptySelection ? this.checked = !this.checked : this.checked || (this.checked = !0));
     }
@@ -91,15 +84,13 @@ const z = (s) => {
     b({ reflect: !0, type: Boolean })
   ], e.prototype, "required", 1), i([
     b({ reflect: !0, type: Boolean })
-  ], e.prototype, "checked", 1), i([
-    b({ reflect: !0 })
-  ], e.prototype, "size", 1), e = i([
+  ], e.prototype, "checked", 1), e = i([
     d({
       role: "radio"
     })
   ], e), e;
-}, C = f`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 )}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host([disabled]){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-m);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:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-radio-button{--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)}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
+}, z = f`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 )}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host([disabled]){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}:host([size=xs]){--sbb-radio-button-dimension: 1.25rem}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-m);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:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-radio-button{--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)}:host([size=xs]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
 export {
-  z as SbbRadioButtonCommonElementMixin,
-  C as radioButtonCommonStyle
+  C as SbbRadioButtonCommonElementMixin,
+  z as radioButtonCommonStyle
 };

package/radio-button/radio-button/radio-button.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbRadioButtonSize } from '../common.js';
 
 declare const SbbRadioButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & typeof LitElement;
 /**
@@ -11,6 +12,12 @@ export declare class SbbRadioButtonElement extends SbbRadioButtonElement_base {
     static readonly events: {
         readonly stateChange: "stateChange";
     };
+    /**
+     * Size variant.
+     */
+    set size(value: SbbRadioButtonSize);
+    get size(): SbbRadioButtonSize;
+    private _size;
     protected render(): TemplateResult;
 }
 declare global {

package/radio-button/radio-button/radio-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;;AAQhD;;;;GAIG;AACH,qBAEa,qBAAsB,SAAQ,0BAA4C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAC3F,gBAAuB,MAAM;;MAElB;cAEQ,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,cAAc,CAAC;;AAItB;;;;GAIG;AACH,qBAEa,qBAAsB,SAAQ,0BAA4C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAC3F,gBAAuB,MAAM;;MAElB;IAEX;;OAEG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAExC;IACD,IAAW,IAAI,IAAI,kBAAkB,CAEpC;IACD,OAAO,CAAC,KAAK,CAA2B;cAErB,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/radio-button/radio-button-group/radio-button-group.d.ts

@@ -38,7 +38,7 @@ export declare class SbbRadioButtonGroupElement extends SbbRadioButtonGroupEleme
      */
     value?: any | null;
     /**
-     * Size variant, either m or s.
+     * Size variant.
      */
     size: SbbRadioButtonSize;
     /**

package/radio-button/radio-button-group/radio-button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAkB,MAAM,0BAA0B,CAAC;AAElG,OAAO,KAAK,EAAE,kBAAkB,EAA6B,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAIhE,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,qBAAqB,GAAG,0BAA0B,CAAC;CACjE,CAAC;;AAEF;;;;;;;;GAQG;AACH,qBAKa,0BAA2B,SAAQ,+BAA4B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACiC,QAAQ,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACgB,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACgB,IAAI,EAAE,kBAAkB,CAAO;IAElD;;OAEG;IAEI,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,GAAG,0BAA0B,CAAC,EAAE,CAOhF;IAED,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,CAAC,kCAAkC,CAAkB;IAC5D,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,aAAa;IAQrB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,OAAO,CAGb;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAGZ;IAEc,iBAAiB,IAAI,IAAI;IAuBzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAqBtD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAI5C,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;cA+BH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}
+{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAkB,MAAM,0BAA0B,CAAC;AAElG,OAAO,KAAK,EAA6B,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAIhE,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,qBAAqB,GAAG,0BAA0B,CAAC;CACjE,CAAC;;AAEF;;;;;;;;GAQG;AACH,qBAKa,0BAA2B,SAAQ,+BAA4B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACiC,QAAQ,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACgB,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACgB,IAAI,EAAE,kBAAkB,CAAO;IAElD;;OAEG;IAEI,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,GAAG,0BAA0B,CAAC,EAAE,CAOhF;IAED,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,CAAC,kCAAkC,CAAkB;IAC5D,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,aAAa;IAQrB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,OAAO,CAGb;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAGZ;IAEc,iBAAiB,IAAI,IAAI;IAuBzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAqBtD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAI5C,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;cA+BH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

package/radio-button/radio-button-panel/radio-button-panel.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SbbPanelSize } from '../../core/mixins.js';
 
 declare const SbbRadioButtonPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbPanelMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
 /**
@@ -16,6 +17,12 @@ export declare class SbbRadioButtonPanelElement extends SbbRadioButtonPanelEleme
         readonly stateChange: "stateChange";
         readonly panelConnected: "panelConnected";
     };
+    /**
+     * Size variant.
+     */
+    set size(value: SbbPanelSize);
+    get size(): SbbPanelSize;
+    private _size;
     protected willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
     protected render(): TemplateResult;
 }