@sbb-esta/lyne-elements 1.2.1 → 1.4.0

package/option/optgroup.js

@@ -1,83 +1,74 @@
-import { css as d, LitElement as g, html as c } from "lit";
-import { property as h, state as n, customElement as u } from "lit/decorators.js";
-import { hostAttributes as v } from "../core/decorators.js";
-import { setOrRemoveAttribute as f, isSafari as x } from "../core/dom.js";
-import { SbbDisabledMixin as _, SbbHydrationMixin as m } from "../core/mixins.js";
-import { AgnosticMutationObserver as y } from "../core/observers.js";
+import { property as g, state as d, customElement as c } from "lit/decorators.js";
+import { css as u, LitElement as h, html as v } from "lit";
+import { hostAttributes as f } from "../core/decorators.js";
+import { setOrRemoveAttribute as x, isSafari as m } from "../core/dom.js";
+import { SbbDisabledMixin as _, SbbHydrationMixin as y } from "../core/mixins.js";
+import { AgnosticMutationObserver as A } from "../core/observers.js";
 import "../divider.js";
-const A = d`*,:before,:after{box-sizing:border-box}:host{--sbb-optgroup-divider-display: block;--sbb-optgroup-divider-spacing: 0;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);--sbb-optgroup-label-color: var(--sbb-color-metal);display:block}:host(:first-child){--sbb-optgroup-divider-display: none;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-2x)}:host([data-variant=select]){--sbb-optgroup-divider-spacing: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-optgroup-label-padding-start: 0;--sbb-optgroup-label-font-size: inherit}:host([data-variant=select]:first-child){--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x)}:host([data-negative]){--sbb-optgroup-label-color: var(--sbb-color-smoke)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block:var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x)}:host([data-variant=select][data-multiple]) .sbb-optgroup__label{--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);padding-inline-start:calc(var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-fixed-8x))}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display);padding-block:var(--sbb-optgroup-divider-spacing)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}`;
-var O = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? z(e, i) : e, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (s = (o ? p(e, i, s) : p(s)) || s);
-  return o && s && O(e, i, s), s;
+const O = u`*,:before,:after{box-sizing:border-box}:host{--sbb-optgroup-divider-display: block;--sbb-optgroup-divider-spacing: 0;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);--sbb-optgroup-label-color: var(--sbb-color-metal);display:block}:host(:first-child){--sbb-optgroup-divider-display: none;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-2x)}:host([data-variant=select]){--sbb-optgroup-divider-spacing: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-optgroup-label-padding-start: 0;--sbb-optgroup-label-font-size: inherit}:host([data-variant=select]:first-child){--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x)}:host([data-negative]){--sbb-optgroup-label-color: var(--sbb-color-smoke)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block:var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x)}:host([data-variant=select][data-multiple]) .sbb-optgroup__label{--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);padding-inline-start:calc(var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-fixed-8x))}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display);padding-block:var(--sbb-optgroup-divider-spacing)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}`;
+var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (t, i, e, o) => {
+  for (var s = o > 1 ? void 0 : o ? z(i, e) : i, a = t.length - 1, r; a >= 0; a--)
+    (r = t[a]) && (s = (o ? r(i, e, s) : r(s)) || s);
+  return o && s && C(i, e, s), s;
 };
-const r = x;
-let a = class extends _(m(g)) {
+const l = m;
+let b = class extends _(
+  y(h)
+) {
   constructor() {
-    super(), this._negative = !1, this._inertAriaGroups = !1, this._negativeObserver = new y(() => this._onNegativeChange()), r && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = r) : this._inertAriaGroups = r);
-  }
-  get _options() {
-    var t;
-    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-option")) ?? []);
+    super(), this.negative = !1, this._inertAriaGroups = !1, this._negativeObserver = new A(() => this._onNegativeChange()), l && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = l) : this._inertAriaGroups = l);
   }
   connectedCallback() {
-    var t, e;
-    super.connectedCallback(), (t = this._negativeObserver) == null || t.disconnect(), this._negative = !!((e = this.closest) != null && e.call(
-      this,
-      ":is(sbb-autocomplete, sbb-select, sbb-form-field)[negative]"
-    )), this.toggleAttribute("data-negative", this._negative), this._negativeObserver.observe(this, {
+    var t;
+    super.connectedCallback(), (t = this._negativeObserver) == null || t.disconnect(), this.setAttributeFromParent(), this._negativeObserver.observe(this, {
       attributes: !0,
       attributeFilter: ["data-negative"]
-    }), this._setVariantByContext(), this._proxyGroupLabelToOptions(), this.toggleAttribute("data-multiple", !!this.closest("sbb-select[multiple]"));
+    }), this._proxyGroupLabelToOptions();
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("disabled") && (this._inertAriaGroups || this.setAttribute("aria-disabled", this.disabled.toString()), this._proxyDisabledToOptions()), t.has("label") && this._proxyGroupLabelToOptions();
+    super.willUpdate(t), t.has("disabled") && (this._inertAriaGroups || this.setAttribute("aria-disabled", this.disabled.toString()), this.proxyDisabledToOptions()), t.has("label") && this._proxyGroupLabelToOptions();
   }
   disconnectedCallback() {
     var t;
     super.disconnectedCallback(), (t = this._negativeObserver) == null || t.disconnect();
   }
-  _setVariantByContext() {
-    var t, e;
-    (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this.setAttribute("data-variant", "autocomplete") : (e = this.closest) != null && e.call(this, "sbb-select") && this.setAttribute("data-variant", "select");
-  }
   _handleSlotchange() {
-    this._proxyDisabledToOptions(), this._proxyGroupLabelToOptions(), this._highlightOptions();
+    this.proxyDisabledToOptions(), this._proxyGroupLabelToOptions(), this._highlightOptions();
   }
   _proxyGroupLabelToOptions() {
-    var t, e;
+    var t, i;
     if (this._inertAriaGroups)
       if (this.label) {
         this.removeAttribute("aria-label");
-        for (const i of this._options)
-          i.setAttribute("data-group-label", this.label), (t = i.requestUpdate) == null || t.call(i);
+        for (const e of this.options)
+          e.setAttribute("data-group-label", this.label), (t = e.requestUpdate) == null || t.call(e);
       } else
-        for (const i of this._options)
-          i.removeAttribute("data-group-label"), (e = i.requestUpdate) == null || e.call(i);
+        for (const e of this.options)
+          e.removeAttribute("data-group-label"), (i = e.requestUpdate) == null || i.call(e);
     else {
-      f(this, "aria-label", this.label);
+      x(this, "aria-label", this.label);
       return;
     }
   }
-  _proxyDisabledToOptions() {
-    for (const t of this._options)
+  proxyDisabledToOptions() {
+    for (const t of this.options)
       t.toggleAttribute("data-group-disabled", this.disabled);
   }
   _highlightOptions() {
-    var i;
-    const t = this.closest("sbb-autocomplete");
+    var e;
+    const t = this.getAutocompleteParent();
     if (!t)
       return;
-    const e = (i = t.triggerElement) == null ? void 0 : i.value;
-    e && this._options.forEach((o) => o.highlight(e));
+    const i = (e = t.triggerElement) == null ? void 0 : e.value;
+    i && this.options.forEach((o) => o.highlight(i));
   }
   _onNegativeChange() {
-    this._negative = this.hasAttribute("data-negative");
+    this.negative = this.hasAttribute("data-negative");
   }
   render() {
-    return c`
+    return v`
       <div class="sbb-optgroup__divider">
-        <sbb-divider ?negative=${this._negative}></sbb-divider>
+        <sbb-divider ?negative=${this.negative}></sbb-divider>
       </div>
       <div class="sbb-optgroup__label" aria-hidden="true">
         <div class="sbb-optgroup__icon-space"></div>
@@ -87,20 +78,49 @@ let a = class extends _(m(g)) {
     `;
   }
 };
-a.styles = A;
-b([
-  h()
-], a.prototype, "label", 2);
-b([
-  n()
-], a.prototype, "_negative", 2);
-b([
-  n()
-], a.prototype, "_inertAriaGroups", 2);
-a = b([
-  u("sbb-optgroup"),
-  v({ role: r ? null : "group" })
-], a);
+b.styles = O;
+n([
+  g()
+], b.prototype, "label", 2);
+n([
+  d()
+], b.prototype, "negative", 2);
+n([
+  d()
+], b.prototype, "_inertAriaGroups", 2);
+b = n([
+  f({ role: l ? null : "group" })
+], b);
+var G = Object.defineProperty, w = Object.getOwnPropertyDescriptor, P = (t, i, e, o) => {
+  for (var s = o > 1 ? void 0 : o ? w(i, e) : i, a = t.length - 1, r; a >= 0; a--)
+    (r = t[a]) && (s = (o ? r(i, e, s) : r(s)) || s);
+  return o && s && G(i, e, s), s;
+};
+let p = class extends b {
+  get options() {
+    var t;
+    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-option")) ?? []);
+  }
+  getAutocompleteParent() {
+    var t;
+    return ((t = this.closest) == null ? void 0 : t.call(this, "sbb-autocomplete")) || null;
+  }
+  setAttributeFromParent() {
+    var t;
+    this.negative = !!((t = this.closest) != null && t.call(this, ":is(sbb-autocomplete, sbb-select, sbb-form-field)[negative]")), this.toggleAttribute("data-negative", this.negative);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.toggleAttribute("data-multiple", !!this.closest("sbb-select[multiple]")), this._setVariantByContext();
+  }
+  _setVariantByContext() {
+    var t, i;
+    (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this.setAttribute("data-variant", "autocomplete") : (i = this.closest) != null && i.call(this, "sbb-select") && this.setAttribute("data-variant", "select");
+  }
+};
+p = P([
+  c("sbb-optgroup")
+], p);
 export {
-  a as SbbOptGroupElement
+  p as SbbOptGroupElement,
+  b as SbbOptgroupBaseElement
 };

package/option/option/option-base-element.d.ts

@@ -0,0 +1,69 @@
+import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+import { EventEmitter } from '../../core/eventing.js';
+
+declare const SbbOptionBaseElement_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;
+export declare abstract class SbbOptionBaseElement extends SbbOptionBaseElement_base {
+    protected abstract optionId: string;
+    /**
+     * 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;
+    /** Emits when the option selection status changes. */
+    protected abstract selectionChange: EventEmitter;
+    /** Emits when an option was selected by user. */
+    protected abstract optionSelected: EventEmitter;
+    /** Whether to apply the negative styling */
+    protected negative: boolean;
+    /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
+    protected disabledFromGroup: boolean;
+    protected label?: string;
+    /** Disable the highlight of the label. */
+    protected disableLabelHighlight: boolean;
+    /** The portion of the highlighted label. */
+    private _highlightString;
+    private _inertAriaGroups;
+    private _abort;
+    protected abstract selectByClick(event: MouseEvent): void;
+    protected abstract setAttributeFromParent(): void;
+    protected updateDisableHighlight(disabled: boolean): void;
+    /** 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;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected init(): void;
+    protected updateAriaDisabled(): void;
+    private _updateAriaSelected;
+    /** Observe changes on data attributes and set the appropriate values. */
+    protected onOptionAttributesChange(mutationsList: MutationRecord[]): void;
+    protected handleHighlightState(): void;
+    protected getHighlightedLabel(): TemplateResult;
+    protected renderIcon(): TemplateResult;
+    protected renderLabel(): TemplateResult | typeof nothing;
+    protected renderTick(): TemplateResult | typeof nothing;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=option-base-element.d.ts.map

package/option/option/option-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI3D,OAAO,6BAA6B,CAAC;;AAgBrC,8BACsB,oBAAqB,SAAQ,yBAElD;IACC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAEpC;;;;;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,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;IAEjD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;IAEhD,4CAA4C;IACnC,SAAS,CAAC,QAAQ,UAAS;IAEpC,yFAAyF;IAChF,SAAS,CAAC,iBAAiB,UAAS;IAEpC,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAElC,0CAA0C;IACjC,SAAS,CAAC,qBAAqB,EAAE,OAAO,CAAS;IAE1D,4CAA4C;IACnC,OAAO,CAAC,gBAAgB,CAAuB;IAE/C,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,MAAM,CAAyC;IACvD,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IAEjD,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD,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;IAQ7C,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAK5C,SAAS,CAAC,IAAI,IAAI,IAAI;IAUtB,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAQpC,OAAO,CAAC,mBAAmB;IAI3B,yEAAyE;IACzE,SAAS,CAAC,wBAAwB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAWzE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAuBtC,SAAS,CAAC,mBAAmB,IAAI,cAAc;IAwB/C,SAAS,CAAC,UAAU,IAAI,cAAc;IAItC,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;IAIxD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;cAIpC,MAAM,IAAI,cAAc;CAmB5C"}

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,qBAIa,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;;IAec,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"}