@sbb-esta/lyne-elements 1.3.0 → 1.4.0

package/option/option/option.d.ts

@@ -1,7 +1,8 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { CSSResultGroup, TemplateResult, nothing } from 'lit';
+import { EventEmitter } from '../../core/eventing.js';
+import { SbbOptionBaseElement } from './option-base-element.js';
 
 export type SbbOptionVariant = 'autocomplete' | 'select' | null;
-declare const SbbOptionElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
 /**
  * It displays on option item which can be used in `sbb-select` or `sbb-autocomplete`.
  *
@@ -12,73 +13,30 @@ declare const SbbOptionElement_base: import('../../core/mixins.js').AbstractCons
  * @cssprop [--sbb-option-icon-container-display=none] - Can be used to reserve space even
  * when preserve-icon-space on autocomplete is not set or iconName is not set.
  */
-export declare class SbbOptionElement extends SbbOptionElement_base {
+export declare class SbbOptionElement extends SbbOptionBaseElement {
     static styles: CSSResultGroup;
     static readonly events: {
         readonly selectionChange: "optionSelectionChange";
         readonly optionSelected: "optionSelected";
     };
-    /**
-     * Value of the option.
-     *
-     * @description Developer note: In this case updating the attribute must be synchronous.
-     * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
-     */
-    set value(value: string);
-    get value(): string;
-    /** Whether the option is currently active. */
-    active?: boolean;
-    /** Whether the option is selected. */
-    set selected(value: boolean);
-    get selected(): boolean;
+    protected optionId: string;
     /** Emits when the option selection status changes. */
-    private _selectionChange;
+    protected selectionChange: EventEmitter;
     /** Emits when an option was selected by user. */
-    private _optionSelected;
-    /** Whether to apply the negative styling */
-    private _negative;
-    /** Whether the component must be set disabled due disabled attribute on sbb-checkbox-group. */
-    private _disabledFromGroup;
-    private _label?;
-    /** The portion of the highlighted label. */
-    private _highlightString;
-    /** Disable the highlight of the label. */
-    private _disableLabelHighlight;
-    private _inertAriaGroups;
+    protected optionSelected: EventEmitter;
     private set _variant(value);
     private get _variant();
     private set _isMultiple(value);
     private get _isMultiple();
-    private _abort;
-    /** MutationObserver on data attributes. */
-    private _optionAttributeObserver;
-    constructor();
-    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
-    /**
-     * Highlight the label of the option
-     * @param value the highlighted portion of the label
-     * @internal
-     */
-    highlight(value: string): void;
-    /**
-     * @internal
-     */
-    setSelectedViaUserInteraction(selected: boolean): void;
-    private _updateDisableHighlight;
-    private _selectByClick;
+    protected setAttributeFromParent(): void;
+    protected selectByClick(event: MouseEvent): void;
     connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    private _init;
-    private _updateAriaDisabled;
-    private _updateAriaSelected;
-    disconnectedCallback(): void;
+    protected init(): void;
     private _setVariantByContext;
-    /** Observe changes on data attributes and set the appropriate values. */
-    private _onOptionAttributesChange;
-    private _handleHighlightState;
-    private _getHighlightedLabel;
-    protected render(): TemplateResult;
+    protected handleHighlightState(): void;
+    protected renderIcon(): TemplateResult;
+    protected renderLabel(): TemplateResult | typeof nothing;
+    protected renderTick(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -88,5 +46,4 @@ declare global {
         optionSelectionChange: CustomEvent<void>;
     }
 }
-export {};
 //# sourceMappingURL=option.d.ts.map

package/option/option/option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAgBlC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;;AAEhE;;;;;;;;;GASG;AACH,qBAKa,gBAAiB,SAAQ,qBAErC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,8CAA8C;IACK,MAAM,CAAC,EAAE,OAAO,CAAC;IAEpE,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,OAAO,CAAC,gBAAgB,CAGtB;IAEF,iDAAiD;IACjD,OAAO,CAAC,eAAe,CAGrB;IAEF,4CAA4C;IACnC,OAAO,CAAC,SAAS,CAAS;IAEnC,+FAA+F;IACtF,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,MAAM,CAAC,CAAS;IAEjC,4CAA4C;IACnC,OAAO,CAAC,gBAAgB,CAAuB;IAExD,0CAA0C;IACjC,OAAO,CAAC,sBAAsB,CAAkB;IAEhD,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,KAAK,QAAQ,QAInB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,QAEtB;IACD,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,MAAM,CAAyC;IAEvD,2CAA2C;IAC3C,OAAO,CAAC,wBAAwB,CAE9B;;IAcc,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7D,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,cAAc;IAcN,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,OAAO,CAAC,KAAK;IA2Bb,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAIX,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB;IAS5B,yEAAyE;IACzE,OAAO,CAAC,yBAAyB;IAWjC,OAAO,CAAC,qBAAqB;IA4B7B,OAAO,CAAC,oBAAoB;cAwBT,MAAM,IAAI,cAAc;CA2C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC1C;CACF"}
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAIpC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;GASG;AACH,qBAIa,gBAAiB,SAAQ,oBAAoB;IACxD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,sDAAsD;IACtD,SAAS,CAAC,eAAe,EAAE,YAAY,CAGrC;IAEF,iDAAiD;IACjD,SAAS,CAAC,cAAc,EAAE,YAAY,CAGpC;IAEF,OAAO,KAAK,QAAQ,QAInB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,QAEtB;IACD,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAgBxC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAchC,iBAAiB,IAAI,IAAI;cAItB,IAAI,IAAI,IAAI;IAS/B,OAAO,CAAC,oBAAoB;cAST,oBAAoB,IAAI,IAAI;cAS5B,UAAU,IAAI,cAAc;cAoB5B,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;cAM9C,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;CAKjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC1C;CACF"}

package/option/option.d.ts

@@ -1,2 +1,3 @@
 export * from './option/option.js';
+export * from './option/option-base-element.js';
 //# sourceMappingURL=option.d.ts.map

package/option/option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../src/elements/option/option.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../src/elements/option/option.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC"}

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.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/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"}