@sbb-esta/lyne-elements 2.8.0 → 2.9.0

package/development/option/optgroup.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"optgroup.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wBAAwB,CAAC;AACvC,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"optgroup.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/development/option/optgroup.js

@@ -1,4 +1,4 @@
-import { SbbOptGroupElement } from "./optgroup/optgroup.js";
+import { SbbOptGroupElement } from "./optgroup/optgroup.component.js";
 import { SbbOptgroupBaseElement } from "./optgroup/optgroup-base-element.js";
 export {
   SbbOptGroupElement,

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

@@ -0,0 +1,48 @@
+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;
+/**
+ * It displays on option item which can be used in `sbb-select` or `sbb-autocomplete`.
+ *
+ * @slot - Use the unnamed slot to add content to the option label.
+ * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
+ * @event {CustomEvent<void>} optionSelectionChange - Emits when the option selection status changes.
+ * @event {CustomEvent<void>} optionSelected - Emits when an option was selected by user.
+ * @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 SbbOptionBaseElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly selectionChange: "optionSelectionChange";
+        readonly optionSelected: "optionSelected";
+    };
+    protected optionId: string;
+    /** Emits when the option selection status changes. */
+    protected selectionChange: EventEmitter;
+    /** Emits when an option was selected by user. */
+    protected optionSelected: EventEmitter;
+    private set _variant(value);
+    private get _variant();
+    private set _isMultiple(value);
+    private get _isMultiple();
+    protected setAttributeFromParent(): void;
+    protected selectByClick(event: MouseEvent): void;
+    connectedCallback(): void;
+    protected init(): void;
+    private _setVariantByContext;
+    protected handleHighlightState(): void;
+    protected renderIcon(): TemplateResult;
+    protected renderLabel(): TemplateResult | typeof nothing;
+    protected renderTick(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-option': SbbOptionElement;
+    }
+    interface GlobalEventHandlersEventMap {
+        optionSelectionChange: CustomEvent<void>;
+    }
+}
+//# sourceMappingURL=option.component.d.ts.map

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

@@ -0,0 +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;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,qBAKM,gBAAiB,SAAQ,oBAAoB;IACjD,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/development/option/option/option.component.js

@@ -0,0 +1,264 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, nothing, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { hostAttributes } from "../../core/decorators.js";
+import { EventEmitter } from "../../core/eventing.js";
+import { SbbOptionBaseElement } from "./option-base-element.js";
+import "../../visual-checkbox.js";
+const style = css`*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-option-color: var(--sbb-color-charcoal);
+  --sbb-option-background-color: inherit;
+  --sbb-option-background-color-hover: var(--sbb-color-milk);
+  --sbb-option-background-color-active: var(--sbb-color-cloud);
+  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
+  --sbb-option-disabled-background-color: var(--sbb-color-milk);
+  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));
+  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-justify-content: start;
+  --sbb-option-cursor: pointer;
+  --sbb-option-border-radius: var(--sbb-border-radius-4x);
+  --sbb-option-icon-color: var(--sbb-color-metal);
+  display: block;
+}
+
+:host([data-negative]) {
+  --sbb-option-color: var(--sbb-color-milk);
+  --sbb-option-icon-color: var(--sbb-color-smoke);
+  --sbb-option-background-color-hover: var(--sbb-color-charcoal);
+  --sbb-option-background-color-active: var(--sbb-color-iron);
+  --sbb-option-disabled-border-color: var(--sbb-color-smoke);
+  --sbb-option-disabled-background-color: var(--sbb-color-charcoal);
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}
+
+:host([data-active]) {
+  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+}
+
+@media (any-hover: hover) {
+  :host(:hover:not([disabled], [data-group-disabled])) {
+    --sbb-option-background-color: var(--sbb-option-background-color-hover);
+  }
+}
+
+:host(:active:not([disabled], [data-group-disabled])) {
+  --sbb-option-background-color: var(--sbb-option-background-color-active);
+}
+
+:host(:not([data-disable-highlight])) .sbb-option__label slot {
+  display: none;
+}
+
+:host(:is([data-group-disabled], [disabled])) {
+  --sbb-option-cursor: default;
+}
+@media (forced-colors: active) {
+  :host(:is([data-group-disabled], [disabled])) {
+    --sbb-option-color: GrayText;
+  }
+}
+
+:host([data-variant=select]) {
+  --sbb-option-column-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-option-justify-content: space-between;
+}
+
+:host([data-variant=select][data-multiple]) {
+  --sbb-option-justify-content: start;
+}
+
+:host(:not(:is([disabled], [data-group-disabled]))) .sbb-option__label--highlight {
+  font-weight: bold;
+}
+@media (forced-colors: active) {
+  :host(:not(:is([disabled], [data-group-disabled]))) .sbb-option__label--highlight {
+    color: Highlight;
+  }
+}
+
+.sbb-option__container {
+  background-color: var(--sbb-option-background-color);
+}
+
+.sbb-option {
+  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-body-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  font-size: var(--sbb-text-font-size);
+  display: flex;
+  align-items: center;
+  column-gap: var(--sbb-option-column-gap);
+  padding-inline: var(--sbb-option-padding-inline);
+  padding-block: var(--sbb-option-padding-block);
+  justify-content: var(--sbb-option-justify-content);
+  color: var(--sbb-option-color);
+  background-color: var(--sbb-option-background-color);
+  cursor: var(--sbb-option-cursor);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-fill-color: var(--sbb-option-color);
+}
+:host([data-active]) .sbb-option {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+  --sbb-focus-outline-style: initial;
+  border-radius: var(--sbb-option-border-radius);
+}
+:host(:is([data-group-disabled], [disabled]):not([data-multiple])) .sbb-option {
+  position: relative;
+  z-index: 0;
+}
+:host(:is([data-group-disabled], [disabled]):not([data-multiple])) .sbb-option::before {
+  content: "";
+  display: block;
+  position: absolute;
+  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([data-group-disabled], [disabled]):not([data-multiple])) .sbb-option::before {
+    border-color: GrayText;
+  }
+}
+
+.sbb-option__icon {
+  display: flex;
+  min-width: var(--sbb-size-icon-ui-small);
+  min-height: var(--sbb-size-icon-ui-small);
+  color: var(--sbb-option-icon-color);
+}
+:host(:not([data-slot-names~=icon], [icon-name])) .sbb-option__icon {
+  display: var(--sbb-option-icon-container-display, none);
+}
+
+.sbb-option__label {
+  white-space: initial;
+}`;
+let SbbOptionElement = (() => {
+  var _a;
+  let _classDecorators = [customElement("sbb-option"), hostAttributes({
+    role: "option"
+  })];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbOptionBaseElement;
+  var SbbOptionElement2 = (_a = class extends _classSuper {
+    constructor() {
+      super(...arguments);
+      this.optionId = `sbb-option`;
+      this.selectionChange = new EventEmitter(this, SbbOptionElement2.events.selectionChange);
+      this.optionSelected = new EventEmitter(this, SbbOptionElement2.events.optionSelected);
+    }
+    set _variant(state) {
+      if (state) {
+        this.setAttribute("data-variant", state);
+      }
+    }
+    get _variant() {
+      return this.getAttribute("data-variant");
+    }
+    set _isMultiple(isMultiple) {
+      this.toggleAttribute("data-multiple", isMultiple);
+    }
+    get _isMultiple() {
+      return !this.hydrationRequired && this.hasAttribute("data-multiple");
+    }
+    setAttributeFromParent() {
+      var _a2, _b;
+      const parentGroup = (_a2 = this.closest) == null ? void 0 : _a2.call(this, "sbb-optgroup");
+      if (parentGroup) {
+        this.disabledFromGroup = parentGroup.disabled;
+        this.updateAriaDisabled();
+      }
+      this.negative = !!((_b = this.closest) == null ? void 0 : _b.call(
+        this,
+        // :is() selector not possible due to test environment
+        `sbb-autocomplete[negative],sbb-form-field[negative]`
+      ));
+      this.toggleAttribute("data-negative", this.negative);
+      this.toggleAttribute("data-multiple", this._isMultiple);
+    }
+    selectByClick(event) {
+      if (this.disabled || this.disabledFromGroup) {
+        event.stopPropagation();
+        return;
+      }
+      if (this._isMultiple) {
+        event.stopPropagation();
+        this.setSelectedViaUserInteraction(!this.selected);
+      } else {
+        this.setSelectedViaUserInteraction(true);
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+    }
+    init() {
+      super.init();
+      this._setVariantByContext();
+      this.handleHighlightState();
+    }
+    _setVariantByContext() {
+      var _a2, _b, _c;
+      if ((_a2 = this.closest) == null ? void 0 : _a2.call(this, "sbb-autocomplete")) {
+        this._variant = "autocomplete";
+      } else if ((_b = this.closest) == null ? void 0 : _b.call(this, "sbb-select")) {
+        this._variant = "select";
+      }
+      this._isMultiple = !!((_c = this.closest) == null ? void 0 : _c.call(this, "sbb-select[multiple]"));
+    }
+    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.negative}
+            ></sbb-visual-checkbox>
+          ` : nothing}
+    `;
+    }
+    renderLabel() {
+      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : nothing;
+    }
+    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);
+    SbbOptionElement2 = _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = style, _a.events = {
+    selectionChange: "optionSelectionChange",
+    optionSelected: "optionSelected"
+  }, __runInitializers(_classThis, _classExtraInitializers), _a);
+  return SbbOptionElement2 = _classThis;
+})();
+export {
+  SbbOptionElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL29wdGlvbi9vcHRpb24vb3B0aW9uLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBub3RoaW5nIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IGhvc3RBdHRyaWJ1dGVzIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciB9IGZyb20gJy4uLy4uL2NvcmUvZXZlbnRpbmcuanMnO1xuXG5pbXBvcnQgeyBTYmJPcHRpb25CYXNlRWxlbWVudCB9IGZyb20gJy4vb3B0aW9uLWJhc2UtZWxlbWVudC5qcyc7XG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9vcHRpb24uc2Nzcz9saXQmaW5saW5lJztcbmltcG9ydCAnLi4vLi4vdmlzdWFsLWNoZWNrYm94LmpzJztcblxuZXhwb3J0IHR5cGUgU2JiT3B0aW9uVmFyaWFudCA9ICdhdXRvY29tcGxldGUnIHwgJ3NlbGVjdCcgfCBudWxsO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIG9uIG9wdGlvbiBpdGVtIHdoaWNoIGNhbiBiZSB1c2VkIGluIGBzYmItc2VsZWN0YCBvciBgc2JiLWF1dG9jb21wbGV0ZWAuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgY29udGVudCB0byB0aGUgb3B0aW9uIGxhYmVsLlxuICogQHNsb3QgaWNvbiAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBpY29uLiBJZiBgaWNvbi1uYW1lYCBpcyBzZXQsIGEgc2JiLWljb24gd2lsbCBiZSB1c2VkLlxuICogQGV2ZW50IHtDdXN0b21FdmVudDx2b2lkPn0gb3B0aW9uU2VsZWN0aW9uQ2hhbmdlIC0gRW1pdHMgd2hlbiB0aGUgb3B0aW9uIHNlbGVjdGlvbiBzdGF0dXMgY2hhbmdlcy5cbiAqIEBldmVudCB7Q3VzdG9tRXZlbnQ8dm9pZD59IG9wdGlvblNlbGVjdGVkIC0gRW1pdHMgd2hlbiBhbiBvcHRpb24gd2FzIHNlbGVjdGVkIGJ5IHVzZXIuXG4gKiBAY3NzcHJvcCBbLS1zYmItb3B0aW9uLWljb24tY29udGFpbmVyLWRpc3BsYXk9bm9uZV0gLSBDYW4gYmUgdXNlZCB0byByZXNlcnZlIHNwYWNlIGV2ZW5cbiAqIHdoZW4gcHJlc2VydmUtaWNvbi1zcGFjZSBvbiBhdXRvY29tcGxldGUgaXMgbm90IHNldCBvciBpY29uTmFtZSBpcyBub3Qgc2V0LlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItb3B0aW9uJylcbkBob3N0QXR0cmlidXRlcyh7XG4gIHJvbGU6ICdvcHRpb24nLFxufSlcbmNsYXNzIFNiYk9wdGlvbkVsZW1lbnQgZXh0ZW5kcyBTYmJPcHRpb25CYXNlRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuICBwdWJsaWMgc3RhdGljIHJlYWRvbmx5IGV2ZW50cyA9IHtcbiAgICBzZWxlY3Rpb25DaGFuZ2U6ICdvcHRpb25TZWxlY3Rpb25DaGFuZ2UnLFxuICAgIG9wdGlvblNlbGVjdGVkOiAnb3B0aW9uU2VsZWN0ZWQnLFxuICB9IGFzIGNvbnN0O1xuXG4gIHByb3RlY3RlZCBvcHRpb25JZCA9IGBzYmItb3B0aW9uYDtcblxuICAvKiogRW1pdHMgd2hlbiB0aGUgb3B0aW9uIHNlbGVjdGlvbiBzdGF0dXMgY2hhbmdlcy4gKi9cbiAgcHJvdGVjdGVkIHNlbGVjdGlvbkNoYW5nZTogRXZlbnRFbWl0dGVyID0gbmV3IEV2ZW50RW1pdHRlcihcbiAgICB0aGlzLFxuICAgIFNiYk9wdGlvbkVsZW1lbnQuZXZlbnRzLnNlbGVjdGlvbkNoYW5nZSxcbiAgKTtcblxuICAvKiogRW1pdHMgd2hlbiBhbiBvcHRpb24gd2FzIHNlbGVjdGVkIGJ5IHVzZXIuICovXG4gIHByb3RlY3RlZCBvcHRpb25TZWxlY3RlZDogRXZlbnRFbWl0dGVyID0gbmV3IEV2ZW50RW1pdHRlcihcbiAgICB0aGlzLFxuICAgIFNiYk9wdGlvbkVsZW1lbnQuZXZlbnRzLm9wdGlvblNlbGVjdGVkLFxuICApO1xuXG4gIHByaXZhdGUgc2V0IF92YXJpYW50KHN0YXRlOiBTYmJPcHRpb25WYXJpYW50KSB7XG4gICAgaWYgKHN0YXRlKSB7XG4gICAgICB0aGlzLnNldEF0dHJpYnV0ZSgnZGF0YS12YXJpYW50Jywgc3RhdGUpO1xuICAgIH1cbiAgfVxuICBwcml2YXRlIGdldCBfdmFyaWFudCgpOiBTYmJPcHRpb25WYXJpYW50IHtcbiAgICByZXR1cm4gdGhpcy5nZXRBdHRyaWJ1dGUoJ2RhdGEtdmFyaWFudCcpIGFzIFNiYk9wdGlvblZhcmlhbnQ7XG4gIH1cblxuICBwcml2YXRlIHNldCBfaXNNdWx0aXBsZShpc011bHRpcGxlOiBib29sZWFuKSB7XG4gICAgdGhpcy50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtbXVsdGlwbGUnLCBpc011bHRpcGxlKTtcbiAgfVxuICBwcml2YXRlIGdldCBfaXNNdWx0aXBsZSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gIXRoaXMuaHlkcmF0aW9uUmVxdWlyZWQgJiYgdGhpcy5oYXNBdHRyaWJ1dGUoJ2RhdGEtbXVsdGlwbGUnKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBzZXRBdHRyaWJ1dGVGcm9tUGFyZW50KCk6IHZvaWQge1xuICAgIGNvbnN0IHBhcmVudEdyb3VwID0gdGhpcy5jbG9zZXN0Py4oJ3NiYi1vcHRncm91cCcpO1xuICAgIGlmIChwYXJlbnRHcm91cCkge1xuICAgICAgdGhpcy5kaXNhYmxlZEZyb21Hcm91cCA9IHBhcmVudEdyb3VwLmRpc2FibGVkO1xuICAgICAgdGhpcy51cGRhdGVBcmlhRGlzYWJsZWQoKTtcbiAgICB9XG5cbiAgICB0aGlzLm5lZ2F0aXZlID0gISF0aGlzLmNsb3Nlc3Q/LihcbiAgICAgIC8vIDppcygpIHNlbGVjdG9yIG5vdCBwb3NzaWJsZSBkdWUgdG8gdGVzdCBlbnZpcm9ubWVudFxuICAgICAgYHNiYi1hdXRvY29tcGxldGVbbmVnYXRpdmVdLHNiYi1mb3JtLWZpZWxkW25lZ2F0aXZlXWAsXG4gICAgKTtcbiAgICB0aGlzLnRvZ2dsZUF0dHJpYnV0ZSgnZGF0YS1uZWdhdGl2ZScsIHRoaXMubmVnYXRpdmUpO1xuXG4gICAgdGhpcy50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtbXVsdGlwbGUnLCB0aGlzLl9pc011bHRpcGxlKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBzZWxlY3RCeUNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQgfHwgdGhpcy5kaXNhYmxlZEZyb21Hcm91cCkge1xuICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuX2lzTXVsdGlwbGUpIHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgdGhpcy5zZXRTZWxlY3RlZFZpYVVzZXJJbnRlcmFjdGlvbighdGhpcy5zZWxlY3RlZCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuc2V0U2VsZWN0ZWRWaWFVc2VySW50ZXJhY3Rpb24odHJ1ZSk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgaW5pdCgpOiB2b2lkIHtcbiAgICBzdXBlci5pbml0KCk7XG4gICAgdGhpcy5fc2V0VmFyaWFudEJ5Q29udGV4dCgpO1xuICAgIC8vIFdlIG5lZWQgdG8gY2hlY2sgaGlnaGxpZ2h0IHN0YXRlIGJvdGggb24gc2xvdCBjaGFuZ2UsIGJ1dCBhbHNvIHdoZW4gY29ubmVjdGluZ1xuICAgIC8vIHRoZSBlbGVtZW50IHRvIHRoZSBET00uIFRoZSBzbG90IGNoYW5nZSBldmVudHMgbWlnaHQgYmUgc3dhbGxvd2VkIHdoZW4gdXNpbmcgZGVjbGFyYXRpdmVcbiAgICAvLyBzaGFkb3cgRE9NIHdpdGggU1NSIG9yIGlmIHRoZSBET00gaXMgY2hhbmdlZCB3aGVuIGRpc2Nvbm5lY3RlZC5cbiAgICB0aGlzLmhhbmRsZUhpZ2hsaWdodFN0YXRlKCk7XG4gIH1cblxuICBwcml2YXRlIF9zZXRWYXJpYW50QnlDb250ZXh0KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmNsb3Nlc3Q/Lignc2JiLWF1dG9jb21wbGV0ZScpKSB7XG4gICAgICB0aGlzLl92YXJpYW50ID0gJ2F1dG9jb21wbGV0ZSc7XG4gICAgfSBlbHNlIGlmICh0aGlzLmNsb3Nlc3Q/Lignc2JiLXNlbGVjdCcpKSB7XG4gICAgICB0aGlzLl92YXJpYW50ID0gJ3NlbGVjdCc7XG4gICAgfVxuICAgIHRoaXMuX2lzTXVsdGlwbGUgPSAhIXRoaXMuY2xvc2VzdD8uKCdzYmItc2VsZWN0W211bHRpcGxlXScpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIGhhbmRsZUhpZ2hsaWdodFN0YXRlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLl92YXJpYW50ICE9PSAnYXV0b2NvbXBsZXRlJykge1xuICAgICAgdGhpcy51cGRhdGVEaXNhYmxlSGlnaGxpZ2h0KHRydWUpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHN1cGVyLmhhbmRsZUhpZ2hsaWdodFN0YXRlKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVySWNvbigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8IS0tIEljb24gLS0+XG4gICAgICAkeyF0aGlzLl9pc011bHRpcGxlXG4gICAgICAgID8gaHRtbGAgPHNwYW4gY2xhc3M9XCJzYmItb3B0aW9uX19pY29uXCI+ICR7dGhpcy5yZW5kZXJJY29uU2xvdCgpfSA8L3NwYW4+YFxuICAgICAgICA6IG5vdGhpbmd9XG5cbiAgICAgIDwhLS0gQ2hlY2tib3ggLS0+XG4gICAgICAke3RoaXMuX2lzTXVsdGlwbGVcbiAgICAgICAgPyBodG1sYFxuICAgICAgICAgICAgPHNiYi12aXN1YWwtY2hlY2tib3hcbiAgICAgICAgICAgICAgP2NoZWNrZWQ9JHt0aGlzLnNlbGVjdGVkfVxuICAgICAgICAgICAgICA/ZGlzYWJsZWQ9JHt0aGlzLmRpc2FibGVkIHx8IHRoaXMuZGlzYWJsZWRGcm9tR3JvdXB9XG4gICAgICAgICAgICAgID9uZWdhdGl2ZT0ke3RoaXMubmVnYXRpdmV9XG4gICAgICAgICAgICA+PC9zYmItdmlzdWFsLWNoZWNrYm94PlxuICAgICAgICAgIGBcbiAgICAgICAgOiBub3RoaW5nfVxuICAgIGA7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyTGFiZWwoKTogVGVtcGxhdGVSZXN1bHQgfCB0eXBlb2Ygbm90aGluZyB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhcmlhbnQgPT09ICdhdXRvY29tcGxldGUnICYmIHRoaXMubGFiZWwgJiYgIXRoaXMuZGlzYWJsZUxhYmVsSGlnaGxpZ2h0XG4gICAgICA/IHRoaXMuZ2V0SGlnaGxpZ2h0ZWRMYWJlbCgpXG4gICAgICA6IG5vdGhpbmc7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGljaygpOiBUZW1wbGF0ZVJlc3VsdCB8IHR5cGVvZiBub3RoaW5nIHtcbiAgICByZXR1cm4gdGhpcy5fdmFyaWFudCA9PT0gJ3NlbGVjdCcgJiYgIXRoaXMuX2lzTXVsdGlwbGUgJiYgdGhpcy5zZWxlY3RlZFxuICAgICAgPyBodG1sYDxzYmItaWNvbiBuYW1lPVwidGljay1zbWFsbFwiPjwvc2JiLWljb24+YFxuICAgICAgOiBub3RoaW5nO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItb3B0aW9uJzogU2JiT3B0aW9uRWxlbWVudDtcbiAgfVxuXG4gIGludGVyZmFjZSBHbG9iYWxFdmVudEhhbmRsZXJzRXZlbnRNYXAge1xuICAgIG9wdGlvblNlbGVjdGlvbkNoYW5nZTogQ3VzdG9tRXZlbnQ8dm9pZD47XG4gIH1cbn1cbiJdLCJuYW1lcyI6WyJTYmJPcHRpb25FbGVtZW50IiwiX2EiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQTRCTSxvQkFBZ0IsTUFBQTs7QUFKckIsTUFBQSxtQkFBQSxDQUFBLGNBQWMsWUFBWSxHQUMxQixlQUFlO0FBQUEsSUFDZCxNQUFNO0FBQUEsRUFBQSxDQUNQLENBQUM7Ozs7b0JBQzZCO0FBQVJBLE1BQUFBLHFCQUFBLG1CQUFRLFlBQW9CO0FBQUE7O0FBT3ZDLFdBQVEsV0FBRztBQUdYLFdBQUEsa0JBQWdDLElBQUksYUFDNUMsTUFDQUEsa0JBQWlCLE9BQU8sZUFBZTtBQUkvQixXQUFBLGlCQUErQixJQUFJLGFBQzNDLE1BQ0FBLGtCQUFpQixPQUFPLGNBQWM7QUFBQSxJQUFBO0FBQUEsSUFHeEMsSUFBWSxTQUFTLE9BQXVCO0FBQzFDLFVBQUksT0FBTztBQUNKLGFBQUEsYUFBYSxnQkFBZ0IsS0FBSztBQUFBLE1BQUE7QUFBQSxJQUN6QztBQUFBLElBRUYsSUFBWSxXQUFRO0FBQ1gsYUFBQSxLQUFLLGFBQWEsY0FBYztBQUFBLElBQUE7QUFBQSxJQUd6QyxJQUFZLFlBQVksWUFBbUI7QUFDcEMsV0FBQSxnQkFBZ0IsaUJBQWlCLFVBQVU7QUFBQSxJQUFB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

package/development/option/option.d.ts

@@ -1,6 +1,6 @@
 /**
  * @entrypoint
  */
-export * from './option/option.js';
+export * from './option/option.component.js';
 export * from './option/option-base-element.js';
 //# 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,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC"}
+{"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

@@ -1,4 +1,4 @@
-import { SbbOptionElement } from "./option/option.js";
+import { SbbOptionElement } from "./option/option.component.js";
 import { SbbOptionBaseElement } from "./option/option-base-element.js";
 export {
   SbbOptionBaseElement,

package/development/option.js

@@ -1,6 +1,6 @@
-import { SbbOptGroupElement } from "./option/optgroup/optgroup.js";
+import { SbbOptGroupElement } from "./option/optgroup/optgroup.component.js";
 import { SbbOptgroupBaseElement } from "./option/optgroup/optgroup-base-element.js";
-import { SbbOptionElement } from "./option/option/option.js";
+import { SbbOptionElement } from "./option/option/option.component.js";
 import { SbbOptionBaseElement } from "./option/option/option-base-element.js";
 export {
   SbbOptGroupElement,

package/development/overlay/overlay.component.d.ts

@@ -0,0 +1,53 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbOverlayBaseElement } from './overlay-base-element.js';
+/**
+ * It displays an interactive overlay element.
+ *
+ * @slot - Use the unnamed slot to provide a content for the overlay.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-overlay` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<SbbOverlayCloseEventDetails>} didClose - Emits whenever the `sbb-overlay` is closed.
+ * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
+ * @cssprop [--sbb-overlay-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+export declare class SbbOverlayElement extends SbbOverlayBaseElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly willOpen: "willOpen";
+        readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
+        readonly backClick: "requestBackAction";
+    };
+    /**
+     * Whether to allow the overlay content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    accessor expanded: boolean;
+    /** Whether a back button is displayed next to the title. */
+    accessor backButton: boolean;
+    /** This will be forwarded as aria-label to the close button element. */
+    accessor accessibilityCloseLabel: string;
+    /** This will be forwarded as aria-label to the back button element. */
+    accessor accessibilityBackLabel: string;
+    protected closeAttribute: string;
+    /** Emits whenever the back button is clicked. */
+    private _backClick;
+    private _overlayContentElement;
+    /** Opens the component. */
+    open(): void;
+    protected isZeroAnimationDuration(): boolean;
+    private _handleOpening;
+    protected handleClosing(): void;
+    protected onOverlayAnimationEnd(event: AnimationEvent): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-overlay': SbbOverlayElement;
+    }
+}
+//# sourceMappingURL=overlay.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/overlay/overlay.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,qBAEM,iBAAkB,SAAQ,qBAAqB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,4DAA4D;IAC5D,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,uEAAuE;IACvE,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IAEvD,iDAAiD;IACjD,OAAO,CAAC,UAAU,CAGhB;IACF,OAAO,CAAC,sBAAsB,CAA4B;IAE1D,2BAA2B;IACpB,IAAI,IAAI,IAAI;IA8BnB,SAAS,CAAC,uBAAuB,IAAI,OAAO;IAI5C,OAAO,CAAC,cAAc;cAYH,aAAa,IAAI,IAAI;IAwBxC,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;cAQzC,MAAM,IAAI,cAAc;CAsD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}