@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

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

@@ -0,0 +1,276 @@
+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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

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

@@ -0,0 +1,18 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+declare const SbbOptionHintElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & typeof LitElement;
+/**
+ * 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 styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-option-hint': SbbOptionHintElement;
+    }
+}
+export {};
+//# sourceMappingURL=option-hint.component.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,71 @@
+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=

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

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

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

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

package/development/option/option-hint.js

@@ -0,0 +1,5 @@
+import { SbbOptionHintElement } from "./option-hint/option-hint.component.js";
+export {
+  SbbOptionHintElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLWhpbnQuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9

package/development/option/option.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @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

@@ -0,0 +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"}

package/development/option/option.js

@@ -0,0 +1,7 @@
+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=

package/development/option.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @entrypoint
+ */
+export * from './option/optgroup.ts';
+export * from './option/option.ts';
+export * from './option/option-hint.ts';
+//# sourceMappingURL=option.d.ts.map

package/development/option.d.ts.map

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

package/development/option.js

@@ -0,0 +1,13 @@
+import { SbbOptGroupElement } from "./option/optgroup/optgroup.component.js";
+import { SbbOptgroupBaseElement } from "./option/optgroup/optgroup-base-element.js";
+import { SbbOptionElement } from "./option/option/option.component.js";
+import { SbbOptionBaseElement } from "./option/option/option-base-element.js";
+import { SbbOptionHintElement } from "./option/option-hint/option-hint.component.js";
+export {
+  SbbOptGroupElement,
+  SbbOptgroupBaseElement,
+  SbbOptionBaseElement,
+  SbbOptionElement,
+  SbbOptionHintElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7In0=

package/development/overlay/overlay-base-element.d.ts

@@ -0,0 +1,93 @@
+import { PropertyDeclaration, PropertyValues } from 'lit';
+import { SbbFocusTrapController } from '../core/a11y.ts';
+import { SbbOpenCloseBaseElement } from '../core/base-elements.ts';
+import { SbbEscapableOverlayController, SbbInertController, SbbLanguageController } from '../core/controllers.ts';
+import { SbbScrollHandler } from '../core/dom.ts';
+import { SbbOverlayCloseEventDetails } from '../core/interfaces.ts';
+export declare class SbbOverlayCloseEvent<T = any> extends CustomEvent<SbbOverlayCloseEventDetails> {
+    /**
+     * The result associated with the closed overlay.
+     * This is either the result assigned to the `closeTarget` via
+     * `assignOverlayResult` / `assignDialogResult` or the value of the
+     * corresponding close attribute on the `closeTarget`
+     * (e.g. sbb-overlay-close="my-result" or sbb-dialog-close="my-result").
+     */
+    readonly result: T | null;
+    /**
+     * The element that was used to close the overlay/dialog, i.e. the element that the
+     * user clicked on that had the close attribute.
+     * Empty if closed programmatically or via Escape press.
+     */
+    readonly closeTarget: HTMLElement | null;
+    constructor(name: string, { cancelable, closeAttribute, closeTarget, result, }: {
+        cancelable?: boolean;
+        closeAttribute: string;
+        closeTarget?: HTMLElement;
+        result?: any;
+    });
+}
+export declare function assignOverlayResult<T>(element: HTMLElement, result: T): void;
+export declare const overlayRefs: SbbOverlayBaseElement[];
+declare const SbbOverlayBaseElement_base: import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
+export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElement_base {
+    /**
+     * The element that will trigger the menu overlay.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    accessor trigger: HTMLElement | null;
+    /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
+    accessor accessibilityLabel: string;
+    /**
+     * Whether to skip restoring focus to the previously-focused element when the overlay is closed.
+     * Note that automatic focus restoration is an accessibility feature, and it is recommended that
+     * you provide your own equivalent, if you decide to turn it off.
+     */
+    accessor skipFocusRestoration: boolean;
+    protected lastFocusedElement?: HTMLElement;
+    protected overlayCloseElement?: HTMLElement;
+    protected openOverlayController?: AbortController;
+    protected focusTrapController: SbbFocusTrapController;
+    protected scrollHandler: SbbScrollHandler;
+    protected returnValue: any;
+    protected language: SbbLanguageController;
+    protected inertController: SbbInertController;
+    protected escapableOverlayController: SbbEscapableOverlayController;
+    private _ariaLiveRefToggle;
+    private _ariaLiveRef?;
+    private _triggerElement;
+    private _triggerAbortController?;
+    protected abstract closeAttribute: string;
+    protected closeTag?: string;
+    protected abstract handleOpening(): void;
+    protected abstract handleClosing(): void;
+    protected abstract isZeroAnimationDuration(): boolean;
+    protected abstract dispatchBeforeCloseEvent(detail?: SbbOverlayCloseEventDetails): boolean;
+    protected abstract dispatchCloseEvent(detail?: SbbOverlayCloseEventDetails): boolean;
+    /** Opens the component. */
+    open(): void;
+    /** Closes the component. */
+    close(result?: any): void;
+    /** @deprecated */
+    close(result?: any, target?: HTMLElement): void;
+    private _close;
+    /**
+     * Check if there is a parent dialog or overlay in the DOM that is closed.
+     * In this case, the overlay should not be opened because it would break the state.
+     * Not nested but stacked overlays are supported so this logic does not apply in this case.
+     */
+    private _hasClosedParent;
+    connectedCallback(): void;
+    private _configureTrigger;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
+    protected attachOpenOverlayEvents(): void;
+    protected removeInstanceFromGlobalCollection(): void;
+    protected closeOnSbbOverlayCloseClick(event: Event): void;
+    protected removeAriaLiveRefContent(): void;
+    protected setAriaLiveRefContent(label?: string): void;
+    protected onOverlayAnimationEnd(event: AnimationEvent): void;
+}
+export {};
+//# sourceMappingURL=overlay-base-element.d.ts.map

package/development/overlay/overlay-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"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"}