@sbb-esta/lyne-elements 4.6.0 → 4.8.0

package/development/option/option/option.component.d.ts

@@ -11,6 +11,7 @@ export type SbbOptionVariant = 'autocomplete' | 'select' | null;
  * @overrideType value - (T = string) | null
  */
 export declare class SbbOptionElement<T = string> extends SbbOptionBaseElement<T> {
+    static readonly elementName: string;
     static readonly role = "option";
     static styles: CSSResultGroup;
     static readonly events: {

package/development/option/option/option.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/option/option/option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAQpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;GAQG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAChE,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAgC,MAAM;;;MAG3B;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,OAAO,KAAK,QAAQ,QAQnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IACD,OAAO,CAAC,gBAAgB,CAAC,CAAmB;;IA8B5C,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,qBAAqB;IAOb,iBAAiB,IAAI,IAAI;IAazC,OAAO,CAAC,KAAK;IAKb,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;cAc7B,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAMpE,OAAO,CAAC,oBAAoB;cAQT,oBAAoB,IAAI,IAAI;cAS5B,UAAU,IAAI,cAAc;cAoB5B,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;cAO9C,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,KAAK,CAAC;KAC9B;CACF"}
+{"version":3,"file":"option.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/option/option/option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAOpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;GAQG;AACH,qBAAa,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACvE,gBAAgC,WAAW,EAAE,MAAM,CAAgB;IACnE,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAgC,MAAM;;;MAG3B;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,OAAO,KAAK,QAAQ,QAQnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IACD,OAAO,CAAC,gBAAgB,CAAC,CAAmB;;IA8B5C,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,qBAAqB;IAOb,iBAAiB,IAAI,IAAI;IAazC,OAAO,CAAC,KAAK;IAKb,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;cAc7B,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAMpE,OAAO,CAAC,oBAAoB;cAQT,oBAAoB,IAAI,IAAI;cAS5B,UAAU,IAAI,cAAc;cAoB5B,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;cAO9C,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,KAAK,CAAC;KAC9B;CACF"}

package/development/option/option/option.component.js

@@ -1,276 +1,2 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { css, nothing, html } from "lit";
-import { customElement } from "lit/decorators.js";
-import { SbbPropertyWatcherController } from "../../core/controllers.js";
-import { boxSizingStyles } from "../../core/styles.js";
-import { SbbOptionBaseElement } from "./option-base-element.js";
-import "../../visual-checkbox.js";
-const style = css`:host {
-  --sbb-option-color: var(--sbb-color-3);
-  --sbb-option-background-color: inherit;
-  --sbb-option-background-color-hover: var(--sbb-background-color-3);
-  --sbb-option-background-color-active: var(--sbb-background-color-4);
-  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
-  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
-  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
-  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
-  --sbb-option-min-height: var(--sbb-size-element-s);
-  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
-  --sbb-option-justify-content: start;
-  --sbb-option-cursor: var(--sbb-cursor-pointer);
-  --sbb-option-border-radius: var(--sbb-border-radius-4x);
-  --sbb-option-icon-color: var(--sbb-color-metal);
-  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-option-focus-outline-color: transparent;
-  --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
-  display: block;
-}
-
-:host(:is(:state(negative),[state--negative])) {
-  --sbb-option-color: var(--sbb-color-3-negative);
-  --sbb-option-icon-color: var(--sbb-color-5);
-  --sbb-option-background-color-hover: var(--sbb-background-color-3-negative);
-  --sbb-option-background-color-active: var(--sbb-background-color-4-negative);
-  --sbb-option-disabled-border-color: var(--sbb-border-color-5);
-  --sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
-}
-
-@media (any-hover: hover) {
-  :host(:hover:not(:is(:state(disabled),[state--disabled]))) {
-    --sbb-option-background-color: var(--sbb-option-background-color-hover);
-  }
-}
-
-:host(:active:not(:is(:state(disabled),[state--disabled]))) {
-  --sbb-option-background-color: var(--sbb-option-background-color-active);
-}
-
-:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot {
-  display: none;
-}
-
-:host(:is(:state(disabled),[state--disabled])) {
-  --sbb-option-cursor: var(--sbb-cursor-default);
-}
-@media (forced-colors: active) {
-  :host(:is(:state(disabled),[state--disabled])) {
-    --sbb-option-color: GrayText;
-  }
-}
-
-:host(:is(:state(variant-select),[state--variant-select])) {
-  --sbb-option-column-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-option-justify-content: space-between;
-}
-
-:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])) {
-  --sbb-option-justify-content: start;
-}
-
-:host(:is(:state(active),[state--active])) {
-  --sbb-option-focus-outline-color: var(--sbb-focus-outline-color);
-}
-
-:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {
-  font-weight: bold;
-}
-@media (forced-colors: active) {
-  :host(:not(:is(:is(:state(disabled),[state--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-text-font-size-s);
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-  position: relative;
-  display: flex;
-  min-height: var(--sbb-option-min-height);
-  align-items: center;
-  column-gap: var(--sbb-option-column-gap);
-  padding-inline: var(--sbb-option-padding-inline);
-  justify-content: var(--sbb-option-justify-content);
-  color: var(--sbb-option-color);
-  cursor: var(--sbb-option-cursor);
-  -webkit-tap-highlight-color: transparent;
-  -webkit-text-fill-color: var(--sbb-option-color);
-}
-.sbb-option::after {
-  content: "";
-  display: block;
-  position: absolute;
-  inset: var(--sbb-option-focus-outline-inset);
-  pointer-events: none;
-  border: var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);
-  border-radius: var(--sbb-option-border-radius);
-}
-:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option {
-  position: relative;
-  z-index: 0;
-}
-:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {
-  content: "";
-  display: block;
-  position: absolute;
-  inset: 0.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(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--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(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon {
-  display: var(--sbb-option-icon-container-display, none);
-}
-
-.sbb-option__label {
-  text-overflow: var(--sbb-option-text-overflow);
-  overflow: var(--sbb-option-overflow);
-  white-space: var(--sbb-option-white-space, initial);
-}`;
-let SbbOptionElement = (() => {
-  var _a;
-  let _classDecorators = [customElement("sbb-option")];
-  let _classDescriptor;
-  let _classExtraInitializers = [];
-  let _classThis;
-  let _classSuper = SbbOptionBaseElement;
-  _a = class extends _classSuper {
-    set _variant(variant) {
-      if (this._variantInternal) {
-        this.internals.states.delete(`variant-${this._variantInternal}`);
-      }
-      this._variantInternal = variant;
-      if (this._variantInternal) {
-        this.internals.states.add(`variant-${this._variantInternal}`);
-      }
-    }
-    get _variant() {
-      return this._variantInternal ?? null;
-    }
-    constructor() {
-      super();
-      this.optionId = `sbb-option`;
-      this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-optgroup"), {
-        disabled: (p) => this.disabledFromGroup = p.disabled,
-        label: (p) => this.groupLabel = p.label
-      }));
-      this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete"), {
-        negative: (e) => this._handleNegativeChange(e)
-      }));
-      this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-select"), {
-        multiple: (ancestor) => {
-          this.toggleState("multiple", ancestor.multiple);
-          this.requestUpdate();
-        },
-        negative: (e) => this._handleNegativeChange(e)
-      }));
-    }
-    _isMultiple() {
-      return !this.hydrationRequired && this.internals.states.has("multiple");
-    }
-    _handleNegativeChange(ancestor) {
-      this.toggleState("negative", ancestor.negative);
-      this.requestUpdate();
-    }
-    connectedCallback() {
-      super.connectedCallback();
-      if (this.hydrationRequired) {
-        this.hydrationComplete.then(() => this._init());
-      } else {
-        this._init();
-      }
-    }
-    _init() {
-      this._setVariantByContext();
-      this.handleHighlightState();
-    }
-    selectByClick(event) {
-      if (this.disabled || this.disabledFromGroup) {
-        event.stopPropagation();
-        return;
-      }
-      if (this._isMultiple()) {
-        event.stopPropagation();
-        this.selectViaUserInteraction(!this.selected);
-      } else {
-        this.selectViaUserInteraction(true);
-      }
-    }
-    selectViaUserInteraction(selected) {
-      super.selectViaUserInteraction(selected);
-      this.dispatchEvent(new Event("optionselectionchange", { bubbles: true, composed: true }));
-    }
-    _setVariantByContext() {
-      if (this.closest?.("sbb-autocomplete")) {
-        this._variant = "autocomplete";
-      } else if (this.closest?.("sbb-select")) {
-        this._variant = "select";
-      }
-    }
-    handleHighlightState() {
-      if (this._variant !== "autocomplete") {
-        this.updateDisableHighlight(true);
-        return;
-      }
-      super.handleHighlightState();
-    }
-    renderIcon() {
-      return html`
-      <!-- Icon -->
-      ${!this._isMultiple() ? html` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>` : nothing}
-
-      <!-- Checkbox -->
-      ${this._isMultiple() ? html`
-            <sbb-visual-checkbox
-              ?checked=${this.selected}
-              ?disabled=${this.disabled || this.disabledFromGroup}
-              ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
-            ></sbb-visual-checkbox>
-          ` : nothing}
-    `;
-    }
-    renderLabel() {
-      if (this._variant !== "autocomplete") {
-        return nothing;
-      }
-      return super.renderLabel();
-    }
-    renderTick() {
-      return this._variant === "select" && !this._isMultiple() && this.selected ? html`<sbb-icon name="tick-small"></sbb-icon>` : nothing;
-    }
-  }, _classThis = _a, (() => {
-    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-    _classThis = _classDescriptor.value;
-    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-  })(), _a.role = "option", _a.styles = [boxSizingStyles, style], _a.events = {
-    optionselectionchange: "optionselectionchange",
-    optionselected: "optionselected"
-  }, __runInitializers(_classThis, _classExtraInitializers), _a;
-  return _classThis;
-})();
-export {
-  SbbOptionElement
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL29wdGlvbi9vcHRpb24vb3B0aW9uLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBub3RoaW5nIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB0eXBlIHsgU2JiQXV0b2NvbXBsZXRlRWxlbWVudCB9IGZyb20gJy4uLy4uL2F1dG9jb21wbGV0ZS50cyc7XG5pbXBvcnQgeyBTYmJQcm9wZXJ0eVdhdGNoZXJDb250cm9sbGVyIH0gZnJvbSAnLi4vLi4vY29yZS9jb250cm9sbGVycy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYlNlbGVjdEVsZW1lbnQgfSBmcm9tICcuLi8uLi9zZWxlY3QudHMnO1xuXG5pbXBvcnQgeyBTYmJPcHRpb25CYXNlRWxlbWVudCB9IGZyb20gJy4vb3B0aW9uLWJhc2UtZWxlbWVudC50cyc7XG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9vcHRpb24uc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICcuLi8uLi92aXN1YWwtY2hlY2tib3gudHMnO1xuXG5leHBvcnQgdHlwZSBTYmJPcHRpb25WYXJpYW50ID0gJ2F1dG9jb21wbGV0ZScgfCAnc2VsZWN0JyB8IG51bGw7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgb24gb3B0aW9uIGl0ZW0gd2hpY2ggY2FuIGJlIHVzZWQgaW4gYHNiYi1zZWxlY3RgIG9yIGBzYmItYXV0b2NvbXBsZXRlYC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBjb250ZW50IHRvIHRoZSBvcHRpb24gbGFiZWwuXG4gKiBAc2xvdCBpY29uIC0gVXNlIHRoaXMgc2xvdCB0byBwcm92aWRlIGFuIGljb24uIElmIGBpY29uLW5hbWVgIGlzIHNldCwgYSBzYmItaWNvbiB3aWxsIGJlIHVzZWQuXG4gKiBAY3NzcHJvcCBbLS1zYmItb3B0aW9uLWljb24tY29udGFpbmVyLWRpc3BsYXk9bm9uZV0gLSBDYW4gYmUgdXNlZCB0byByZXNlcnZlIHNwYWNlIGV2ZW5cbiAqIHdoZW4gcHJlc2VydmUtaWNvbi1zcGFjZSBvbiBhdXRvY29tcGxldGUgaXMgbm90IHNldCBvciBpY29uTmFtZSBpcyBub3Qgc2V0LlxuICogQG92ZXJyaWRlVHlwZSB2YWx1ZSAtIChUID0gc3RyaW5nKSB8IG51bGxcbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLW9wdGlvbicpXG5jbGFzcyBTYmJPcHRpb25FbGVtZW50PFQgPSBzdHJpbmc+IGV4dGVuZHMgU2JiT3B0aW9uQmFzZUVsZW1lbnQ8VD4ge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IHJvbGUgPSAnb3B0aW9uJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IGV2ZW50cyA9IHtcbiAgICBvcHRpb25zZWxlY3Rpb25jaGFuZ2U6ICdvcHRpb25zZWxlY3Rpb25jaGFuZ2UnLFxuICAgIG9wdGlvbnNlbGVjdGVkOiAnb3B0aW9uc2VsZWN0ZWQnLFxuICB9IGFzIGNvbnN0O1xuXG4gIHByb3RlY3RlZCBvcHRpb25JZCA9IGBzYmItb3B0aW9uYDtcblxuICBwcml2YXRlIHNldCBfdmFyaWFudCh2YXJpYW50OiBTYmJPcHRpb25WYXJpYW50KSB7XG4gICAgaWYgKHRoaXMuX3ZhcmlhbnRJbnRlcm5hbCkge1xuICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmRlbGV0ZShgdmFyaWFudC0ke3RoaXMuX3ZhcmlhbnRJbnRlcm5hbH1gKTtcbiAgICB9XG4gICAgdGhpcy5fdmFyaWFudEludGVybmFsID0gdmFyaWFudDtcbiAgICBpZiAodGhpcy5fdmFyaWFudEludGVybmFsKSB7XG4gICAgICB0aGlzLmludGVybmFscy5zdGF0ZXMuYWRkKGB2YXJpYW50LSR7dGhpcy5fdmFyaWFudEludGVybmFsfWApO1xuICAgIH1cbiAgfVxuICBwcml2YXRlIGdldCBfdmFyaWFudCgpOiBTYmJPcHRpb25WYXJpYW50IHtcbiAgICByZXR1cm4gdGhpcy5fdmFyaWFudEludGVybmFsID8/IG51bGw7XG4gIH1cbiAgcHJpdmF0ZSBfdmFyaWFudEludGVybmFsPzogU2JiT3B0aW9uVmFyaWFudDtcblxuICBwdWJsaWMgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgICB0aGlzLmFkZENvbnRyb2xsZXIoXG4gICAgICBuZXcgU2JiUHJvcGVydHlXYXRjaGVyQ29udHJvbGxlcih0aGlzLCAoKSA9PiB0aGlzLmNsb3Nlc3QoJ3NiYi1vcHRncm91cCcpLCB7XG4gICAgICAgIGRpc2FibGVkOiAocCkgPT4gKHRoaXMuZGlzYWJsZWRGcm9tR3JvdXAgPSBwLmRpc2FibGVkKSxcbiAgICAgICAgbGFiZWw6IChwKSA9PiAodGhpcy5ncm91cExhYmVsID0gcC5sYWJlbCksXG4gICAgICB9KSxcbiAgICApO1xuXG4gICAgdGhpcy5hZGRDb250cm9sbGVyKFxuICAgICAgbmV3IFNiYlByb3BlcnR5V2F0Y2hlckNvbnRyb2xsZXIodGhpcywgKCkgPT4gdGhpcy5jbG9zZXN0KCdzYmItYXV0b2NvbXBsZXRlJyksIHtcbiAgICAgICAgbmVnYXRpdmU6IChlKSA9PiB0aGlzLl9oYW5kbGVOZWdhdGl2ZUNoYW5nZShlKSxcbiAgICAgIH0pLFxuICAgICk7XG5cbiAgICB0aGlzLmFkZENvbnRyb2xsZXIoXG4gICAgICBuZXcgU2JiUHJvcGVydHlXYXRjaGVyQ29udHJvbGxlcih0aGlzLCAoKSA9PiB0aGlzLmNsb3Nlc3QoJ3NiYi1zZWxlY3QnKSwge1xuICAgICAgICBtdWx0aXBsZTogKGFuY2VzdG9yKSA9PiB7XG4gICAgICAgICAgdGhpcy50b2dnbGVTdGF0ZSgnbXVsdGlwbGUnLCBhbmNlc3Rvci5tdWx0aXBsZSk7XG5cbiAgICAgICAgICAvLyBNdWx0aXBsZSBoYXMgdG8gYmUgcHJvcGFnYXRlZCB0byBzYmItdmlzdWFsLWNoZWNrYm94IGluc2lkZSB0aGUgb3B0aW9uLlxuICAgICAgICAgIHRoaXMucmVxdWVzdFVwZGF0ZSgpO1xuICAgICAgICB9LFxuICAgICAgICBuZWdhdGl2ZTogKGUpID0+IHRoaXMuX2hhbmRsZU5lZ2F0aXZlQ2hhbmdlKGUpLFxuICAgICAgfSksXG4gICAgKTtcbiAgfVxuXG4gIHByaXZhdGUgX2lzTXVsdGlwbGUoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICF0aGlzLmh5ZHJhdGlvblJlcXVpcmVkICYmIHRoaXMuaW50ZXJuYWxzLnN0YXRlcy5oYXMoJ211bHRpcGxlJyk7XG4gIH1cblxuICBwcml2YXRlIF9oYW5kbGVOZWdhdGl2ZUNoYW5nZShhbmNlc3RvcjogU2JiQXV0b2NvbXBsZXRlRWxlbWVudCB8IFNiYlNlbGVjdEVsZW1lbnQpOiB2b2lkIHtcbiAgICB0aGlzLnRvZ2dsZVN0YXRlKCduZWdhdGl2ZScsIGFuY2VzdG9yLm5lZ2F0aXZlKTtcblxuICAgIC8vIE5lZ2F0aXZlIGhhcyB0byBiZSBwcm9wYWdhdGVkIHRvIHNiYi12aXN1YWwtY2hlY2tib3ggaW5zaWRlIHRoZSBvcHRpb24uXG4gICAgdGhpcy5yZXF1ZXN0VXBkYXRlKCk7XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcblxuICAgIC8vIFdlIG5lZWQgdG8gY2hlY2sgaGlnaGxpZ2h0IHN0YXRlIGJvdGggb24gc2xvdCBjaGFuZ2UsIGJ1dCBhbHNvIHdoZW4gY29ubmVjdGluZ1xuICAgIC8vIHRoZSBlbGVtZW50IHRvIHRoZSBET00uIFRoZSBzbG90IGNoYW5nZSBldmVudHMgbWlnaHQgYmUgc3dhbGxvd2VkIHdoZW4gdXNpbmcgZGVjbGFyYXRpdmVcbiAgICAvLyBzaGFkb3cgRE9NIHdpdGggU1NSIG9yIGlmIHRoZSBET00gaXMgY2hhbmdlZCB3aGVuIGRpc2Nvbm5lY3RlZC5cbiAgICBpZiAodGhpcy5oeWRyYXRpb25SZXF1aXJlZCkge1xuICAgICAgdGhpcy5oeWRyYXRpb25Db21wbGV0ZS50aGVuKCgpID0+IHRoaXMuX2luaXQoKSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuX2luaXQoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9pbml0KCk6IHZvaWQge1xuICAgIHRoaXMuX3NldFZhcmlhbnRCeUNvbnRleHQoKTtcbiAgICB0aGlzLmhhbmRsZUhpZ2hsaWdodFN0YXRlKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgc2VsZWN0QnlDbGljayhldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmRpc2FibGVkIHx8IHRoaXMuZGlzYWJsZWRGcm9tR3JvdXApIHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGlmICh0aGlzLl9pc011bHRpcGxlKCkpIHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgdGhpcy5zZWxlY3RWaWFVc2VySW50ZXJhY3Rpb24oIXRoaXMuc2VsZWN0ZWQpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNlbGVjdFZpYVVzZXJJbnRlcmFjdGlvbih0cnVlKTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgc2VsZWN0VmlhVXNlckludGVyYWN0aW9uKHNlbGVjdGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgc3VwZXIuc2VsZWN0VmlhVXNlckludGVyYWN0aW9uKHNlbGVjdGVkKTtcbiAgICAvKiogVGhlIG9wdGlvbnNlbGVjdGlvbmNoYW5nZSBldmVudCBpcyBkaXNwYXRjaGVkIHdoZW4gdGhlIG9wdGlvbiBzZWxlY3Rpb24gc3RhdHVzIGNoYW5nZXMuICovXG4gICAgdGhpcy5kaXNwYXRjaEV2ZW50KG5ldyBFdmVudCgnb3B0aW9uc2VsZWN0aW9uY2hhbmdlJywgeyBidWJibGVzOiB0cnVlLCBjb21wb3NlZDogdHJ1ZSB9KSk7XG4gIH1cblxuICBwcml2YXRlIF9zZXRWYXJpYW50QnlDb250ZXh0KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmNsb3Nlc3Q/Lignc2JiLWF1dG9jb21wbGV0ZScpKSB7XG4gICAgICB0aGlzLl92YXJpYW50ID0gJ2F1dG9jb21wbGV0ZSc7XG4gICAgfSBlbHNlIGlmICh0aGlzLmNsb3Nlc3Q/Lignc2JiLXNlbGVjdCcpKSB7XG4gICAgICB0aGlzLl92YXJpYW50ID0gJ3NlbGVjdCc7XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIGhhbmRsZUhpZ2hsaWdodFN0YXRlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLl92YXJpYW50ICE9PSAnYXV0b2NvbXBsZXRlJykge1xuICAgICAgdGhpcy51cGRhdGVEaXNhYmxlSGlnaGxpZ2h0KHRydWUpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHN1cGVyLmhhbmRsZUhpZ2hsaWdodFN0YXRlKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVySWNvbigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8IS0tIEljb24gLS0+XG4gICAgICAkeyF0aGlzLl9pc011bHRpcGxlKClcbiAgICAgICAgPyBodG1sYCA8c3BhbiBjbGFzcz1cInNiYi1vcHRpb25fX2ljb25cIj4gJHt0aGlzLnJlbmRlckljb25TbG90KCl9IDwvc3Bhbj5gXG4gICAgICAgIDogbm90aGluZ31cblxuICAgICAgPCEtLSBDaGVja2JveCAtLT5cbiAgICAgICR7dGhpcy5faXNNdWx0aXBsZSgpXG4gICAgICAgID8gaHRtbGBcbiAgICAgICAgICAgIDxzYmItdmlzdWFsLWNoZWNrYm94XG4gICAgICAgICAgICAgID9jaGVja2VkPSR7dGhpcy5zZWxlY3RlZH1cbiAgICAgICAgICAgICAgP2Rpc2FibGVkPSR7dGhpcy5kaXNhYmxlZCB8fCB0aGlzLmRpc2FibGVkRnJvbUdyb3VwfVxuICAgICAgICAgICAgICA/bmVnYXRpdmU9JHt0aGlzLm1hdGNoZXM/LignOnN0YXRlKG5lZ2F0aXZlKScpfVxuICAgICAgICAgICAgPjwvc2JiLXZpc3VhbC1jaGVja2JveD5cbiAgICAgICAgICBgXG4gICAgICAgIDogbm90aGluZ31cbiAgICBgO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlckxhYmVsKCk6IFRlbXBsYXRlUmVzdWx0IHwgdHlwZW9mIG5vdGhpbmcge1xuICAgIGlmICh0aGlzLl92YXJpYW50ICE9PSAnYXV0b2NvbXBsZXRlJykge1xuICAgICAgcmV0dXJuIG5vdGhpbmc7XG4gICAgfVxuICAgIHJldHVybiBzdXBlci5yZW5kZXJMYWJlbCgpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlclRpY2soKTogVGVtcGxhdGVSZXN1bHQgfCB0eXBlb2Ygbm90aGluZyB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhcmlhbnQgPT09ICdzZWxlY3QnICYmICF0aGlzLl9pc011bHRpcGxlKCkgJiYgdGhpcy5zZWxlY3RlZFxuICAgICAgPyBodG1sYDxzYmItaWNvbiBuYW1lPVwidGljay1zbWFsbFwiPjwvc2JiLWljb24+YFxuICAgICAgOiBub3RoaW5nO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItb3B0aW9uJzogU2JiT3B0aW9uRWxlbWVudDtcbiAgfVxuXG4gIGludGVyZmFjZSBHbG9iYWxFdmVudEhhbmRsZXJzRXZlbnRNYXAge1xuICAgIG9wdGlvbnNlbGVjdGlvbmNoYW5nZTogRXZlbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUEyQk0sb0JBQWdCLE1BQUE7OzBCQURyQixjQUFjLFlBQVksQ0FBQzs7OztvQkFDZTtBQUFSLEVBQUEsbUJBQVEsWUFBdUI7QUFBQSxJQVVoRSxJQUFZLFNBQVMsU0FBeUI7QUFDNUMsVUFBSSxLQUFLLGtCQUFrQjtBQUN6QixhQUFLLFVBQVUsT0FBTyxPQUFPLFdBQVcsS0FBSyxnQkFBZ0IsRUFBRTtBQUFBLE1BQ2pFO0FBQ0EsV0FBSyxtQkFBbUI7QUFDeEIsVUFBSSxLQUFLLGtCQUFrQjtBQUN6QixhQUFLLFVBQVUsT0FBTyxJQUFJLFdBQVcsS0FBSyxnQkFBZ0IsRUFBRTtBQUFBLE1BQzlEO0FBQUEsSUFDRjtBQUFBLElBQ0EsSUFBWSxXQUFRO0FBQ2xCLGFBQU8sS0FBSyxvQkFBb0I7QUFBQSxJQUNsQztBQUFBLElBR0EsY0FBQTtBQUNFLFlBQUE7QUFqQlEsV0FBQSxXQUFXO0FBa0JuQixXQUFLLGNBQ0gsSUFBSSw2QkFBNkIsTUFBTSxNQUFNLEtBQUssUUFBUSxjQUFjLEdBQUc7QUFBQSxRQUN6RSxVQUFVLENBQUMsTUFBTyxLQUFLLG9CQUFvQixFQUFFO0FBQUEsUUFDN0MsT0FBTyxDQUFDLE1BQU8sS0FBSyxhQUFhLEVBQUU7QUFBQSxNQUFBLENBQ3BDLENBQUM7QUFHSixXQUFLLGNBQ0gsSUFBSSw2QkFBNkIsTUFBTSxNQUFNLEtBQUssUUFBUSxrQkFBa0IsR0FBRztBQUFBLFFBQzdFLFVBQVUsQ0FBQyxNQUFNLEtBQUss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
+import { t as SbbOptionElement } from "../../option.component-BPN2WTiI.js";
+export { SbbOptionElement };

package/development/option/option-hint/option-hint.component.d.ts

@@ -1,11 +1,13 @@
-import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-declare const SbbOptionHintElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & typeof LitElement;
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbElement } from '../../core/base-elements.ts';
+declare const SbbOptionHintElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & typeof SbbElement;
 /**
  * Display a textual hint inside a `sbb-autocomplete` or a `sbb-select`.
  *
  * @slot - Use the unnamed slot to display the hint message.
  */
 export declare class SbbOptionHintElement extends SbbOptionHintElement_base {
+    static readonly elementName: string;
     static styles: CSSResultGroup;
     protected render(): TemplateResult;
 }

package/development/option/option-hint/option-hint.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option-hint.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/option/option-hint/option-hint.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAQvC;;;;GAIG;AACH,qBAEM,oBAAqB,SAAQ,yBAA4B;IAC7D,OAAuB,MAAM,EAAE,cAAc,CAA4B;cAEtD,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"option-hint.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/option/option-hint/option-hint.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;;AAMzD;;;;GAIG;AACH,qBAAa,oBAAqB,SAAQ,yBAA4B;IACpE,gBAAgC,WAAW,EAAE,MAAM,CAAqB;IACxE,OAAuB,MAAM,EAAE,cAAc,CAA4B;cAEtD,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/development/option/option-hint/option-hint.component.js

@@ -1,71 +1,2 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { css, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
-import { SbbNegativeMixin } from "../../core/mixins.js";
-import { boxSizingStyles } from "../../core/styles.js";
-const style = css`:host {
-  display: block;
-  --sbb-option-hint-color: var(--sbb-color-metal);
-  --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
-  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
-  --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
-}
-
-:host([negative]) {
-  --sbb-option-hint-color: var(--sbb-color-5);
-}
-
-.sbb-option-hint__wrapper {
-  display: flex;
-  column-gap: var(--sbb-option-hint-column-gap);
-  padding-inline: var(--sbb-option-hint-padding-inline);
-  padding-block-end: var(--sbb-option-hint-padding-block-end);
-}
-
-.sbb-optgroup__icon-space {
-  display: var(--sbb-option-icon-container-display, none);
-  min-width: var(--sbb-size-icon-ui-small);
-}
-
-.sbb-option-hint {
-  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-  color: var(--sbb-option-hint-color);
-  -webkit-text-fill-color: var(--sbb-option-hint-color);
-  flex-grow: 1;
-}`;
-let SbbOptionHintElement = (() => {
-  var _a;
-  let _classDecorators = [customElement("sbb-option-hint")];
-  let _classDescriptor;
-  let _classExtraInitializers = [];
-  let _classThis;
-  let _classSuper = SbbNegativeMixin(LitElement);
-  _a = class extends _classSuper {
-    render() {
-      return html`
-      <div class="sbb-option-hint__wrapper">
-        <div class="sbb-optgroup__icon-space"></div>
-        <span class="sbb-option-hint">
-          <slot></slot>
-        </span>
-      </div>
-    `;
-    }
-  }, _classThis = _a, (() => {
-    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-    _classThis = _classDescriptor.value;
-    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-  })(), _a.styles = [boxSizingStyles, style], __runInitializers(_classThis, _classExtraInitializers), _a;
-  return _classThis;
-})();
-export {
-  SbbOptionHintElement
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLWhpbnQuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvb3B0aW9uL29wdGlvbi1oaW50L29wdGlvbi1oaW50LmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYk5lZ2F0aXZlTWl4aW4gfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL29wdGlvbi1oaW50LnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogRGlzcGxheSBhIHRleHR1YWwgaGludCBpbnNpZGUgYSBgc2JiLWF1dG9jb21wbGV0ZWAgb3IgYSBgc2JiLXNlbGVjdGAuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBkaXNwbGF5IHRoZSBoaW50IG1lc3NhZ2UuXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi1vcHRpb24taGludCcpXG5jbGFzcyBTYmJPcHRpb25IaW50RWxlbWVudCBleHRlbmRzIFNiYk5lZ2F0aXZlTWl4aW4oTGl0RWxlbWVudCkge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLW9wdGlvbi1oaW50X193cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzYmItb3B0Z3JvdXBfX2ljb24tc3BhY2VcIj48L2Rpdj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItb3B0aW9uLWhpbnRcIj5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1vcHRpb24taGludCc6IFNiYk9wdGlvbkhpbnRFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFnQk0sd0JBQW9CLE1BQUE7OzBCQUR6QixjQUFjLGlCQUFpQixDQUFDOzs7O29CQUNFLGlCQUFpQixVQUFVO0FBQW5DLEVBQUEsbUJBQVEsWUFBNEI7QUFBQSxJQUcxQyxTQUFNO0FBQ3ZCLGFBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLElBUVQ7QUFBQTs7QUFaRixpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ3lCLEdBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsS0FBSyxHQURuRSxrQkFBQSxZQUFBLHVCQUFBLEdBQXFCOzs7In0=
+import { t as SbbOptionHintElement } from "../../option-hint.component-w-UQdEdu.js";
+export { SbbOptionHintElement };

package/development/option/option-hint.d.ts

@@ -1,5 +1,2 @@
-/**
- * @entrypoint
- */
 export * from './option-hint/option-hint.component.ts';
 //# sourceMappingURL=option-hint.d.ts.map

package/development/option/option-hint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option-hint.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option-hint.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"option-hint.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option-hint.ts"],"names":[],"mappings":"AAGA,cAAc,wCAAwC,CAAC"}

package/development/option/option-hint.js

@@ -1,5 +1,10 @@
-import { SbbOptionHintElement } from "./option-hint/option-hint.component.js";
-export {
-  SbbOptionHintElement
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLWhpbnQuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9
+import { t as SbbOptionHintElement } from "../option-hint.component-w-UQdEdu.js";
+//#region src/elements/option/option-hint.ts
+/** @entrypoint */
+SbbOptionHintElement.define();
+console.warn(`The entrypoint '@sbb-esta/elements/option/option-hint.js' has been deprecated.
+Use either '@sbb-esta/elements/option.js' or '@sbb-esta/elements/option.pure.js' instead.`);
+//#endregion
+export { SbbOptionHintElement };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLWhpbnQuanMiLCJuYW1lcyI6W10sInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL29wdGlvbi9vcHRpb24taGludC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGVudHJ5cG9pbnQgKi9cbmltcG9ydCB7IFNiYk9wdGlvbkhpbnRFbGVtZW50IH0gZnJvbSAnLi9vcHRpb24taGludC9vcHRpb24taGludC5jb21wb25lbnQudHMnO1xuXG5leHBvcnQgKiBmcm9tICcuL29wdGlvbi1oaW50L29wdGlvbi1oaW50LmNvbXBvbmVudC50cyc7XG5cblNiYk9wdGlvbkhpbnRFbGVtZW50LmRlZmluZSgpO1xuXG5jb25zb2xlLndhcm4oYFRoZSBlbnRyeXBvaW50ICdAc2JiLWVzdGEvZWxlbWVudHMvb3B0aW9uL29wdGlvbi1oaW50LmpzJyBoYXMgYmVlbiBkZXByZWNhdGVkLlxuVXNlIGVpdGhlciAnQHNiYi1lc3RhL2VsZW1lbnRzL29wdGlvbi5qcycgb3IgJ0BzYmItZXN0YS9lbGVtZW50cy9vcHRpb24ucHVyZS5qcycgaW5zdGVhZC5gKTtcbiJdLCJtYXBwaW5ncyI6Ijs7O0FBS0EscUJBQXFCLFFBQVE7QUFFN0IsUUFBUSxLQUFLOzJGQUM4RSJ9

package/development/option/option.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option.ts"],"names":[],"mappings":"AAGA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC"}

package/development/option/option.js

@@ -1,7 +1,11 @@
-import { SbbOptionElement } from "./option/option.component.js";
 import { SbbOptionBaseElement } from "./option/option-base-element.js";
-export {
-  SbbOptionBaseElement,
-  SbbOptionElement
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7In0=
+import { t as SbbOptionElement } from "../option.component-BPN2WTiI.js";
+//#region src/elements/option/option.ts
+/** @entrypoint */
+SbbOptionElement.define();
+console.warn(`The entrypoint '@sbb-esta/elements/option/option.js' has been deprecated.
+Use either '@sbb-esta/elements/option.js' or '@sbb-esta/elements/option.pure.js' instead.`);
+//#endregion
+export { SbbOptionBaseElement, SbbOptionElement };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9vcHRpb24vb3B0aW9uLnRzIl0sInNvdXJjZXNDb250ZW50IjpbIi8qKiBAZW50cnlwb2ludCAqL1xuaW1wb3J0IHsgU2JiT3B0aW9uRWxlbWVudCB9IGZyb20gJy4vb3B0aW9uL29wdGlvbi5jb21wb25lbnQudHMnO1xuXG5leHBvcnQgKiBmcm9tICcuL29wdGlvbi9vcHRpb24uY29tcG9uZW50LnRzJztcbmV4cG9ydCAqIGZyb20gJy4vb3B0aW9uL29wdGlvbi1iYXNlLWVsZW1lbnQudHMnO1xuXG5TYmJPcHRpb25FbGVtZW50LmRlZmluZSgpO1xuXG5jb25zb2xlLndhcm4oYFRoZSBlbnRyeXBvaW50ICdAc2JiLWVzdGEvZWxlbWVudHMvb3B0aW9uL29wdGlvbi5qcycgaGFzIGJlZW4gZGVwcmVjYXRlZC5cblVzZSBlaXRoZXIgJ0BzYmItZXN0YS9lbGVtZW50cy9vcHRpb24uanMnIG9yICdAc2JiLWVzdGEvZWxlbWVudHMvb3B0aW9uLnB1cmUuanMnIGluc3RlYWQuYCk7XG4iXSwibWFwcGluZ3MiOiI7Ozs7QUFNQSxpQkFBaUIsUUFBUTtBQUV6QixRQUFRLEtBQUs7MkZBQzhFIn0=

package/development/option-hint.component-w-UQdEdu.js

@@ -0,0 +1,55 @@
+import { css, html } from "lit";
+import { SbbElement } from "./core/base-elements.js";
+import { SbbNegativeMixin } from "./core/mixins.js";
+import { boxSizingStyles } from "./core/styles.js";
+//#region src/elements/option/option-hint/option-hint.scss?lit&inline
+var option_hint_default = css`:host {
+  display: flex;
+  column-gap: var(--sbb-option-hint-column-gap);
+  padding-inline: var(--sbb-option-hint-padding-inline);
+  padding-block-end: var(--sbb-option-hint-padding-block-end);
+  font-size: var(--sbb-option-hint-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+}
+
+:host([negative]) {
+  --sbb-option-hint-color: var(--sbb-color-5);
+}
+
+.sbb-optgroup__icon-space {
+  display: var(--sbb-option-icon-container-display, none);
+  min-width: var(--sbb-size-icon-ui-small);
+}
+
+.sbb-option-hint {
+  color: var(--sbb-option-hint-color);
+  -webkit-text-fill-color: var(--sbb-option-hint-color);
+  flex-grow: 1;
+}`;
+//#endregion
+//#region src/elements/option/option-hint/option-hint.component.ts
+/**
+* Display a textual hint inside a `sbb-autocomplete` or a `sbb-select`.
+*
+* @slot - Use the unnamed slot to display the hint message.
+*/
+var SbbOptionHintElement = class extends SbbNegativeMixin(SbbElement) {
+	static {
+		this.elementName = "sbb-option-hint";
+	}
+	static {
+		this.styles = [boxSizingStyles, option_hint_default];
+	}
+	render() {
+		return html`
+      <div class="sbb-optgroup__icon-space"></div>
+      <span class="sbb-option-hint">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+//#endregion
+export { SbbOptionHintElement as t };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLWhpbnQuY29tcG9uZW50LXctVVFkRWR1LmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9vcHRpb24vb3B0aW9uLWhpbnQvb3B0aW9uLWhpbnQuc2Nzcz9saXQmaW5saW5lIiwiLi4vLi4vLi4vc3JjL2VsZW1lbnRzL29wdGlvbi9vcHRpb24taGludC9vcHRpb24taGludC5jb21wb25lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiQHVzZSAnLi4vLi4vY29yZS9zdHlsZXMnIGFzIHNiYjtcblxuOmhvc3Qge1xuICBkaXNwbGF5OiBmbGV4O1xuICBjb2x1bW4tZ2FwOiB2YXIoLS1zYmItb3B0aW9uLWhpbnQtY29sdW1uLWdhcCk7XG4gIHBhZGRpbmctaW5saW5lOiB2YXIoLS1zYmItb3B0aW9uLWhpbnQtcGFkZGluZy1pbmxpbmUpO1xuICBwYWRkaW5nLWJsb2NrLWVuZDogdmFyKC0tc2JiLW9wdGlvbi1oaW50LXBhZGRpbmctYmxvY2stZW5kKTtcbiAgZm9udC1zaXplOiB2YXIoLS1zYmItb3B0aW9uLWhpbnQtZm9udC1zaXplKTtcbiAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLXNiYi10eXBvLWxldHRlci1zcGFjaW5nLXRleHQpO1xufVxuXG46aG9zdChbbmVnYXRpdmVdKSB7XG4gIC0tc2JiLW9wdGlvbi1oaW50LWNvbG9yOiB2YXIoLS1zYmItY29sb3ItNSk7XG59XG5cbi5zYmItb3B0Z3JvdXBfX2ljb24tc3BhY2Uge1xuICAvLyBDYW4gYmUgb3ZlcnJpZGRlbiBieSB0aGUgJ3ByZXNlcnZlLWljb24tc3BhY2UnIG9uIHRoZSBhdXRvY29tcGxldGVcbiAgZGlzcGxheTogdmFyKC0tc2JiLW9wdGlvbi1pY29uLWNvbnRhaW5lci1kaXNwbGF5LCBub25lKTtcbiAgbWluLXdpZHRoOiB2YXIoLS1zYmItc2l6ZS1pY29uLXVpLXNtYWxsKTtcbn1cblxuLnNiYi1vcHRpb24taGludCB7XG4gIGNvbG9yOiB2YXIoLS1zYmItb3B0aW9uLWhpbnQtY29sb3IpO1xuICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogdmFyKC0tc2JiLW9wdGlvbi1oaW50LWNvbG9yKTtcbiAgZmxleC1ncm93OiAxO1xufVxuIiwiaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCB9IGZyb20gJ2xpdCc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgU2JiTmVnYXRpdmVNaXhpbiB9IGZyb20gJy4uLy4uL2NvcmUvbWl4aW5zLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uLy4uL2NvcmUvc3R5bGVzLnRzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vb3B0aW9uLWhpbnQuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBEaXNwbGF5IGEgdGV4dHVhbCBoaW50IGluc2lkZSBhIGBzYmItYXV0b2NvbXBsZXRlYCBvciBhIGBzYmItc2VsZWN0YC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGRpc3BsYXkgdGhlIGhpbnQgbWVzc2FnZS5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYk9wdGlvbkhpbnRFbGVtZW50IGV4dGVuZHMgU2JiTmVnYXRpdmVNaXhpbihTYmJFbGVtZW50KSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItb3B0aW9uLWhpbnQnO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLW9wdGdyb3VwX19pY29uLXNwYWNlXCI+PC9kaXY+XG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi1vcHRpb24taGludFwiPlxuICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLW9wdGlvbi1oaW50JzogU2JiT3B0aW9uSGludEVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUNjQSxJQUFhLHVCQUFiLGNBQTBDLGlCQUFpQixXQUFXLENBQUE7O0FBQ3BDLE9BQUEsY0FBc0I7OztBQUMvQixPQUFBLFNBQXlCLENBQUMsaUJBQWlCLG9CQUFNOztDQUVyRCxTQUFNO0FBQ3ZCLFNBQU8sSUFBSSJ9