@sbb-esta/lyne-elements-dev 4.13.1-dev.1781017607 → 5.0.0-dev.1781073732

package/paginator.component-buCkeyDv.js

@@ -0,0 +1,212 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, nothing as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o, buttonResetStyles as s, forceType as c, i18nItemsPerPage as l, i18nPage as u, listResetStyles as d, sbbInputModalityDetector as f } from "./core.js";
+import { SbbOptionElement as p } from "./option.pure.js";
+import { SbbPaginatorCommonElementMixin as m } from "./paginator/common/paginator-common.js";
+import { repeat as h } from "lit/directives/repeat.js";
+import { SbbFormFieldElement as g } from "./form-field.pure.js";
+import { SbbSelectElement as _ } from "./select.pure.js";
+//#region src/elements/paginator/paginator/paginator.scss?inline
+var v = ":host{--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:block;line-height:var(--sbb-typo-line-height-text)}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content, start)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap, wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap, wrap-reverse)}.sbb-paginator__page-size-options{display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-color);font-size:var(--sbb-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}.sbb-paginator__page-size-options sbb-select{color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{position:relative;font-size:var(--sbb-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-paginator-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{font-family:var(--sbb-typo-font-family);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-paginator-font-size);line-height:var(--sbb-typo-line-height-text);font-weight:400;position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:\"\";position:absolute;background-color:var(--sbb-paginator-page-background-color, transparent);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style, none) var(--sbb-paginator-page-border-color, none);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset, 0);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-color: var(--sbb-color-3);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-border-color-2)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-color: var(--sbb-color-3-negative);--sbb-paginator-page-border-color: var(--sbb-border-color-2-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-color: var(--sbb-color-5);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-border-color-5);--sbb-paginator-page-background-color: var(--sbb-background-color-3);--sbb-paginator-page-cursor: var(--sbb-cursor-default)}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-color: var(--sbb-color-5);--sbb-paginator-page-background-color: var(--sbb-background-color-3-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media(any-hover:hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-background-color-3);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-background-color-3-negative)}}@media(any-hover:hover)and (forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-color: var(--sbb-color-3);--sbb-paginator-page-background-color: var(--sbb-background-color-4);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-color: var(--sbb-color-3-negative);--sbb-paginator-page-background-color: var(--sbb-background-color-4-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0))}", y = 3, b = (() => {
+	let b = m(o), x, S = [], C = [], w, T = [], E = [], D, O = [], k = [];
+	return class extends b {
+		constructor() {
+			super(...arguments), this.#e = t(this, S, []), this.#t = (t(this, C), t(this, T, "start")), this.#n = (t(this, E), t(this, O, "")), this._markForFocus = (t(this, k), !1);
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+			x = [a({
+				attribute: "page-size-options",
+				type: Array
+			})], w = [a({
+				attribute: "pager-position",
+				reflect: !0
+			})], D = [c(), a({ attribute: "accessibility-items-per-page-label" })], e(this, null, x, {
+				kind: "accessor",
+				name: "pageSizeOptions",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "pageSizeOptions" in e,
+					get: (e) => e.pageSizeOptions,
+					set: (e, t) => {
+						e.pageSizeOptions = t;
+					}
+				},
+				metadata: t
+			}, S, C), e(this, null, w, {
+				kind: "accessor",
+				name: "pagerPosition",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "pagerPosition" in e,
+					get: (e) => e.pagerPosition,
+					set: (e, t) => {
+						e.pagerPosition = t;
+					}
+				},
+				metadata: t
+			}, T, E), e(this, null, D, {
+				kind: "accessor",
+				name: "accessibilityItemsPerPageLabel",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accessibilityItemsPerPageLabel" in e,
+					get: (e) => e.accessibilityItemsPerPageLabel,
+					set: (e, t) => {
+						e.accessibilityItemsPerPageLabel = t;
+					}
+				},
+				metadata: t
+			}, O, k), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-paginator";
+		}
+		static {
+			this.elementDependencies = [
+				g,
+				_,
+				p
+			];
+		}
+		static {
+			this.styles = [
+				d,
+				s,
+				i(v)
+			];
+		}
+		static {
+			this.events = { page: "page" };
+		}
+		#e;
+		get pageSizeOptions() {
+			return this.#e;
+		}
+		set pageSizeOptions(e) {
+			this.#e = e;
+		}
+		#t;
+		get pagerPosition() {
+			return this.#t;
+		}
+		set pagerPosition(e) {
+			this.#t = e;
+		}
+		#n;
+		get accessibilityItemsPerPageLabel() {
+			return this.#n;
+		}
+		set accessibilityItemsPerPageLabel(e) {
+			this.#n = e;
+		}
+		updated(e) {
+			if (super.updated(e), this._markForFocus) {
+				let e = this._getVisiblePages().find((e) => this.pageIndex === +e.getAttribute("data-index"));
+				e && e.focus(), this._markForFocus = !1;
+			}
+		}
+		_getVisiblePages() {
+			return Array.from(this.shadowRoot.querySelectorAll(".sbb-paginator__page--number-item"));
+		}
+		_getVisiblePagesIndex() {
+			let e = this.numberOfPages(), t = this.pageIndex;
+			return e <= 5 ? this._range(e) : t < y ? [
+				...this._range(4),
+				"ellipsis",
+				e - 1
+			] : t >= e - y ? [
+				0,
+				"ellipsis",
+				...this._range(4, e - 1 - y)
+			] : [
+				0,
+				"ellipsis",
+				t - 1,
+				t,
+				t + 1,
+				"ellipsis",
+				e - 1
+			];
+		}
+		_range(e, t = 0) {
+			return Array.from({ length: e }, (e, n) => n + t);
+		}
+		_onPageNumberClick(e) {
+			this.selectPage(e), this._markForFocus = f.mostRecentModality === "keyboard";
+		}
+		_renderItemPerPageTemplate() {
+			return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? n`
+          <div class="sbb-paginator__page-size-options">
+            <label for="select"
+              >${this.accessibilityItemsPerPageLabel ? this.accessibilityItemsPerPageLabel : l[this.language.current]}</label
+            >
+            <sbb-form-field
+              borderless
+              width="collapse"
+              ?negative=${this.negative}
+              size=${this.size || r}
+            >
+              <sbb-select
+                id="select"
+                ?disabled=${this.disabled}
+                value=${this.pageSizeOptions?.find((e) => e === this.pageSize) ?? this.pageSizeOptions[0]}
+                @change=${(e) => this.pageSize = +e.target.value}
+              >
+                ${h(this.pageSizeOptions, (e) => n`<sbb-option value=${e}>${e}</sbb-option>`)}
+              </sbb-select>
+            </sbb-form-field>
+          </div>
+        ` : r;
+		}
+		_renderPageNumbers() {
+			return n`
+      <ul class="sbb-paginator__pages">
+        ${h(this._getVisiblePagesIndex(), (e) => e === "ellipsis" ? n`
+                  <li class="sbb-paginator__page--ellipsis">
+                    <span class="sbb-paginator__page--ellipsis-item">…</span>
+                  </li>
+                ` : n`
+                  <li class="sbb-paginator__page--number">
+                    <button
+                      ?data-selected=${this.pageIndex === e}
+                      ?disabled=${this.disabled}
+                      class="sbb-paginator__page--number-item"
+                      data-index=${e}
+                      aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : u[this.language.current]} ${e + 1}"
+                      aria-current=${this.pageIndex === e ? "true" : r}
+                      @click=${() => this._onPageNumberClick(e)}
+                    >
+                      <span class="sbb-paginator__page--number-item-label">${e + 1}</span>
+                    </button>
+                  </li>
+                `)}
+      </ul>
+    `;
+		}
+		renderPaginator() {
+			return n`
+      <div class="sbb-paginator">
+        ${this.pagerPosition === "start" ? n`<span class="sbb-paginator__wrapping-group">
+                  ${this.renderPrevNextButtons()} ${this._renderPageNumbers()}
+                </span>
+                ${this._renderItemPerPageTemplate()}` : n`${this._renderItemPerPageTemplate()}
+                <span class="sbb-paginator__wrapping-group">
+                  ${this._renderPageNumbers()} ${this.renderPrevNextButtons()}
+                </span>`}</span>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { b as t };

package/paginator.js

@@ -1,7 +1,7 @@
-import { SbbPaginatorCommonElementMixin as e } from "./paginator/common/paginator-common.js";
-import { t } from "./compact-paginator.component-CQDbQFSM.js";
-import { t as n } from "./paginator.component-Dqwz6i2O.js";
+import { n as e, t } from "./paginator-common-Xiv6UZlo.js";
+import { t as n } from "./compact-paginator.component-CmPlZsd4.js";
+import { t as r } from "./paginator.component-buCkeyDv.js";
 import "./paginator.pure.js";
-t.define(), n.define();
+n.define(), r.define();
 //#endregion
-export { t as SbbCompactPaginatorElement, e as SbbPaginatorCommonElementMixin, n as SbbPaginatorElement };
+export { n as SbbCompactPaginatorElement, t as SbbPaginatorCommonElementMixin, r as SbbPaginatorElement, e as SbbPaginatorPageEvent };

package/paginator.pure.js

@@ -1,4 +1,4 @@
-import { SbbPaginatorCommonElementMixin as e } from "./paginator/common/paginator-common.js";
-import { t } from "./compact-paginator.component-CQDbQFSM.js";
-import { t as n } from "./paginator.component-Dqwz6i2O.js";
-export { t as SbbCompactPaginatorElement, e as SbbPaginatorCommonElementMixin, n as SbbPaginatorElement };
+import { n as e, t } from "./paginator-common-Xiv6UZlo.js";
+import { t as n } from "./compact-paginator.component-CmPlZsd4.js";
+import { t as r } from "./paginator.component-buCkeyDv.js";
+export { n as SbbCompactPaginatorElement, t as SbbPaginatorCommonElementMixin, r as SbbPaginatorElement, e as SbbPaginatorPageEvent };

package/panel-mixin-CG-f0J6K.js

@@ -0,0 +1,114 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { forceType as i } from "./core/decorators/force-type.js";
+import { getOverride as a } from "./core/decorators/get-override.js";
+//#region src/elements/core/mixins/panel-common.scss?inline
+var o = ":host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-selection-panel-background-default) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-selection-panel-border-width-default) );--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block;outline:none!important}:host([size=xs]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-xs);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-xs) var(--sbb-selection-panel-input-padding-inline-xs)}:host([size=s]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-s);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-s) var(--sbb-selection-panel-input-padding-inline-s)}:host([size=m]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-m);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-m) var(--sbb-selection-panel-input-padding-inline-m)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-selection-panel-background-milk) )}:host([borderless]:not(:is(:state(checked),[state--checked]))){--sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-borderless)}:host(:is(:is(:state(checked),[state--checked])):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-checked);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-selection-panel-border-width-checked) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: var(--sbb-cursor-default)}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);height:100%;transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media(forced-colors:active){.sbb-selection-panel:after{content:\"\";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{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-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:calc(var(--sbb-selection-panel-checkbox-dimension) + var(--sbb-spacing-fixed-2x))}:host(:not(:is(:state(slotted-subtext),[state--slotted-subtext]))) slot[name=subtext]{display:none}", s = (s) => (() => {
+	let c = s, l, u = [], d = [], f, p = [], m = [], h, g = [], _ = [], v, y = [], b = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [r({ reflect: !0 })], f = [i(), r({
+				reflect: !0,
+				type: Boolean
+			})], h = [i(), r()], v = [r({ reflect: !0 }), a((e, t) => e.group?.size ?? t)], e(this, null, l, {
+				kind: "accessor",
+				name: "color",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "color" in e,
+					get: (e) => e.color,
+					set: (e, t) => {
+						e.color = t;
+					}
+				},
+				metadata: t
+			}, u, d), e(this, null, f, {
+				kind: "accessor",
+				name: "borderless",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "borderless" in e,
+					get: (e) => e.borderless,
+					set: (e, t) => {
+						e.borderless = t;
+					}
+				},
+				metadata: t
+			}, p, m), e(this, null, h, {
+				kind: "accessor",
+				name: "expansionState",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "expansionState" in e,
+					get: (e) => e.expansionState,
+					set: (e, t) => {
+						e.expansionState = t;
+					}
+				},
+				metadata: t
+			}, g, _), e(this, null, v, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, y, b), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.styles = [n(o)];
+		}
+		#e = t(this, u, "white");
+		get color() {
+			return this.#e;
+		}
+		set color(e) {
+			this.#e = e;
+		}
+		#t = (t(this, d), t(this, p, !1));
+		get borderless() {
+			return this.#t;
+		}
+		set borderless(e) {
+			this.#t = e;
+		}
+		#n = (t(this, m), t(this, g, ""));
+		get expansionState() {
+			return this.#n;
+		}
+		set expansionState(e) {
+			this.#n = e;
+		}
+		#r = (t(this, _), t(this, y, null));
+		get size() {
+			return this.#r;
+		}
+		set size(e) {
+			this.#r = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.dispatchEvent(new Event("panelconnected", { bubbles: !0 }));
+		}
+		constructor() {
+			super(...arguments), t(this, b);
+		}
+	};
+})();
+//#endregion
+export { s as t };

package/popover/_popover.global.scss

@@ -0,0 +1,12 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
+  --sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
+  --sbb-popover-border-radius: var(--sbb-border-radius-8x);
+  --sbb-popover-padding: var(--sbb-spacing-fixed-4x);
+  --sbb-popover-background: var(--sbb-background-color-2);
+  --sbb-popover-animation-easing: ease-out;
+}

package/popover/popover/popover.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../popover.component-BHg4Qtqd.js";
+export { e as SbbPopoverElement };

package/popover/popover-base/popover-base.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../../popover-base-DlSa-ajc.js";
+export { t as SbbPopoverBaseElement, e as SbbPopoverCloseEvent };

package/popover/popover-close-button/popover-close-button.component.js

@@ -0,0 +1,20 @@
+import "lit";
+import { SbbLanguageController as e, i18nClosePopover as t } from "../../core.js";
+import { SbbSecondaryButtonElement as n } from "../../button.pure.js";
+//#region src/elements/popover/popover-close-button/popover-close-button.component.ts
+var r = class extends n {
+	static {
+		this.elementName = "sbb-popover-close-button";
+	}
+	constructor() {
+		super(), this._languageController = new e(this).withHandler(() => this.internals.ariaLabel = t[this._languageController.current]), this.size = "s";
+	}
+	renderTemplate() {
+		return super.renderIconSlot();
+	}
+	renderIconName() {
+		return super.renderIconName() || "cross-small";
+	}
+};
+//#endregion
+export { r as SbbPopoverCloseButtonElement };

package/popover-base-DlSa-ajc.js

@@ -0,0 +1,181 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, isServer as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { IS_FOCUSABLE_QUERY as o, SbbEscapableOverlayController as s, SbbFocusTrapController as c, SbbOpenCloseBaseElement as l, getElementPosition as u, idReference as d, isEventOnElement as f, isZeroAnimationDuration as p, popoverResetStyles as m, removeAriaOverlayTriggerProperties as h, setAriaOverlayTriggerProperties as g } from "./core.js";
+import { ResizeController as _ } from "@lit-labs/observers/resize-controller.js";
+import { ref as v } from "lit/directives/ref.js";
+//#region src/elements/popover/popover-base/popover-base.scss?inline
+var y = ":host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-popover-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--_sbb-popover-inset: 0 auto auto 0;--_sbb-popover-translate: 0 var(--sbb-spacing-fixed-2x);--_sbb-popover-box-shadow: var(--sbb-box-shadow-level-9-hard);outline:none!important;display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--_sbb-popover-inset: 0;display:block}:host(:is(:state(position-above),[state--position-above])){--_sbb-popover-translate: 0 calc(var(--sbb-spacing-fixed-2x) * -1)}.sbb-popover:after,.sbb-popover__content:before{content:\"\";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--_sbb-popover-arrow-position-x, 0);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;rotate:45deg}.sbb-popover__container{position:fixed;inset:var(--_sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index))}.sbb-popover{display:none;position:var(--sbb-popover-position, absolute);top:var(--_sbb-popover-position-y, 0);bottom:unset;left:var(--_sbb-popover-position-x, 0);right:unset;background-color:var(--sbb-popover-background);max-width:var(--sbb-popover-max-width);width:max-content;padding:0;box-shadow:var(--_sbb-popover-box-shadow);border:none;border-radius:var(--sbb-popover-border-radius);outline:none;pointer-events:all}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--_sbb-popover-box-shadow)}@media(forced-colors:active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media(forced-colors:active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:\"\";display:block;position:absolute;inset:0;z-index:-1;background-color:transparent}:host(:is(:state(position-below),[state--position-below])) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background)}.sbb-popover__content:before{clip-path:polygon(100% 0,0% 0%,0% 100%)}:host(:is(:state(position-above),[state--position-above])) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2);clip-path:polygon(100% 0,100% 100%,0% 100%)}@keyframes open{0%{opacity:0;translate:var(--_sbb-popover-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--_sbb-popover-translate)}}", b = 16, x = 32, S = /* @__PURE__ */ new Set(), C = class extends Event {
+	get closeTarget() {
+		return this._closeTarget;
+	}
+	constructor(e, { closeTarget: t, cancelable: n }) {
+		super(e, { cancelable: n }), this._closeTarget = t;
+	}
+}, w = (() => {
+	let w = l, T, E = [], D = [];
+	return class extends w {
+		constructor() {
+			super(...arguments), this.#e = t(this, E, null), this._nextFocusedElement = t(this, D), this._skipCloseFocus = !1, this._resizeController = new _(this, {
+				target: null,
+				callback: () => this._setPopoverPosition()
+			}), this._escapableOverlayController = new s(this), this._focusTrapController = new c(this), this._blurTimeout = null, this._pointerDownListener = (e) => {
+				this._isPointerDownEventOnPopover = f(this.overlay, e);
+			}, this._closeOnBackdropClick = (e) => {
+				let t = e.composedPath();
+				!this._isPointerDownEventOnPopover && !f(this.overlay, e) && (!this.trigger || !t.includes(this.trigger)) && (this._nextFocusedElement = t.filter((e) => e instanceof window.HTMLElement).find((e) => e.matches(o)), clearTimeout(this.closeTimeout), this.close());
+			};
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+			T = [d(), a()], e(this, null, T, {
+				kind: "accessor",
+				name: "trigger",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "trigger" in e,
+					get: (e) => e.trigger,
+					set: (e, t) => {
+						e.trigger = t;
+					}
+				},
+				metadata: t
+			}, E, D), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.styles = [m, i(y)];
+		}
+		#e;
+		get trigger() {
+			return this.#e;
+		}
+		set trigger(e) {
+			this.#e = e;
+		}
+		open() {
+			if (!(this.state !== "closed" && this.state !== "closing" || !this.overlay || !this.dispatchBeforeOpenEvent())) {
+				for (let e of S) (e.state === "opened" || e.state === "opening") && e.close();
+				this.showPopover?.(), this.state = "opening", this.inert = !0, this._setPopoverPosition(), this._attachWindowEvents(), this._escapableOverlayController.connect(), this._nextFocusedElement = void 0, this._skipCloseFocus = !1, this._triggerElement && (this._triggerElement.ariaExpanded = "true"), this._isZeroAnimationDuration() && this._handleOpening();
+			}
+		}
+		close(e) {
+			this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.dispatchBeforeCloseEvent({ closeTarget: e ?? null }) && (this.state = "closing", this.inert = !0, this._triggerElement && (this._triggerElement.ariaExpanded = "false"), this._isZeroAnimationDuration() && this._handleClosing()));
+		}
+		_isZeroAnimationDuration() {
+			return p(this, "--sbb-popover-animation-duration");
+		}
+		_handleClosing() {
+			this.state = "closed", this.hidePopover?.(), this.overlay && (this._resizeController.unobserve(this.overlay), this.overlay.firstElementChild?.scrollTo(0, 0)), this.removeAttribute("tabindex"), this._skipCloseFocus || (this._nextFocusedElement || this._triggerElement)?.focus(), this._escapableOverlayController.disconnect(), this._openStateController?.abort(), this._focusTrapController.enabled = !1, this.dispatchCloseEvent({ closeTarget: this._popoverCloseElement ?? null });
+		}
+		_handleOpening() {
+			this.state = "opened", this.inert = !1, this._setPopoverFocus(), this._focusTrapController.enabled = !0, this.overlay && this._resizeController.observe(this.overlay), this.dispatchOpenEvent();
+		}
+		connectedCallback() {
+			this.popover = "manual", super.connectedCallback(), this.state = "closed", S.add(this), this.hasUpdated && this._configureTrigger();
+		}
+		requestUpdate(e, t, n) {
+			super.requestUpdate(e, t, n), !r && (!e || e === "trigger" || e === "hoverTrigger") && this.hasUpdated && this._configureTrigger();
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), this._configureTrigger();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._openStateController?.abort(), S.delete(this), this._blurTimeout && clearTimeout(this._blurTimeout);
+		}
+		_configureTrigger() {
+			if (!r) {
+				if (this.hydrationRequired) {
+					this.hydrationComplete.then(() => this._configureTrigger());
+					return;
+				}
+				this.configureTrigger(this._triggerElement ?? null);
+			}
+		}
+		configureTrigger(e) {
+			this._triggerAbortController?.abort(), h(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (g(this, this._triggerElement, "dialog", this.state), this._triggerAbortController = new AbortController(), this.registerTriggerListeners(this._triggerAbortController.signal));
+		}
+		registerTriggerListeners(e) {
+			this._triggerElement.addEventListener("click", () => this.open(), { signal: e });
+		}
+		_attachWindowEvents() {
+			this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
+				passive: !0,
+				signal: this._openStateController.signal,
+				capture: !0
+			}), window.addEventListener("resize", () => this._setPopoverPosition(), {
+				passive: !0,
+				signal: this._openStateController.signal
+			}), window.addEventListener("pointerdown", this._pointerDownListener, { signal: this._openStateController.signal }), window.addEventListener("pointerup", this._closeOnBackdropClick, { signal: this._openStateController.signal });
+		}
+		_closeOnSbbPopoverCloseClick(e) {
+			let t = e.composedPath().find((e, t, n) => e instanceof HTMLElement && t < n.indexOf(this) && (e.hasAttribute("sbb-popover-close") || e.localName === "sbb-popover-close-button") && !e.hasAttribute("disabled"));
+			t && (clearTimeout(this.closeTimeout), this.close(t));
+		}
+		_onPopoverAnimationEnd(e) {
+			e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
+		}
+		_setPopoverFocus() {
+			!this._focusTrapController.focusInitialElement() && this._openStateController && (this.setAttribute("tabindex", "0"), this.focus(), this.addEventListener("blur", (e) => {
+				this._blurTimeout = setTimeout(() => {
+					if (document.visibilityState !== "hidden") {
+						if (this.removeAttribute("tabindex"), this.contains(e.relatedTarget) || e.relatedTarget === this.trigger) return;
+						(this.state === "opened" || this.state === "opening") && (this._skipCloseFocus = !0), this.close();
+					}
+				});
+			}, { signal: this._openStateController.signal }));
+		}
+		_setPopoverPosition() {
+			if (!this.overlay || !this._triggerElement) return;
+			let e = u(this.overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
+				verticalOffset: b,
+				horizontalOffset: x,
+				centered: !0,
+				responsiveHeight: !0
+			}), t = e.alignment.vertical;
+			for (let e of ["above", "below"]) this.toggleState(`position-${e}`, e === t);
+			let n = this._triggerElement.getBoundingClientRect().left - e.left + this._triggerElement.clientWidth / 2 - 8;
+			this.style.setProperty("--_sbb-popover-position-x", `${e.left}px`), this.style.setProperty("--_sbb-popover-position-y", `${e.top}px`), this.style.setProperty("--_sbb-popover-arrow-position-x", `${n}px`), this.style.setProperty("--_sbb-popover-max-height", e.maxHeight);
+		}
+		dispatchBeforeCloseEvent(e) {
+			let t = e?.closeTarget ?? null;
+			return this.dispatchEvent(new C("beforeclose", {
+				closeTarget: t,
+				cancelable: !0
+			}));
+		}
+		dispatchCloseEvent(e) {
+			let t = e?.closeTarget ?? null;
+			return this.dispatchEvent(new C("close", {
+				closeTarget: t,
+				cancelable: !1
+			}));
+		}
+		render() {
+			return n`
+      <div class="sbb-popover__container">
+        <div
+          @animationend=${this._onPopoverAnimationEnd}
+          class="sbb-popover"
+          role="tooltip"
+          ${v((e) => this.overlay = e)}
+        >
+          <div
+            @click=${(e) => this._closeOnSbbPopoverCloseClick(e)}
+            class="sbb-popover__content"
+          >
+            ${this.renderContent()}
+          </div>
+        </div>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { C as n, w as t };