@sbb-esta/lyne-elements 4.7.0 → 4.8.1

package/toggle.component-D1n5S5ev.js

@@ -0,0 +1,161 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r, isServer as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o } from "./core/base-elements.js";
+import { forceType as s } from "./core/decorators.js";
+import { isLean as c } from "./core/dom.js";
+import { SbbDisabledMixin as l, SbbFormAssociatedMixin as u } from "./core/mixins.js";
+import { boxSizingStyles as d } from "./core/styles.js";
+import { interactivityChecker as f } from "./core/a11y.js";
+//#region src/elements/toggle/toggle/toggle.scss?lit&inline
+var p = n`:host{border-radius:var(--sbb-toggle-border-radius);--sbb-toggle-width:fit-content;--sbb-toggle-min-width:calc(var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small));--sbb-toggle-selected-option-border-width:var(--sbb-border-width-1x);--sbb-toggle-selected-option-border-style:solid;--sbb-toggle-selected-option-border-color:var(--sbb-border-color-5);--sbb-toggle-selected-option-background-color:var(--sbb-background-color-1);--sbb-toggle-background-inset:.125rem;--sbb-toggle-padding-inline:var(--sbb-spacing-responsive-xs);--sbb-toggle-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-toggle-height:var(--sbb-size-element-m);--sbb-toggle-border-radius:var(--sbb-border-radius-infinity);--sbb-toggle-grid-template-columns:auto auto;width:fit-content;display:block}@media (forced-colors:active){:host{--sbb-toggle-selected-option-border-color:Highlight;--sbb-toggle-selected-option-border-width:var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width:100%;--sbb-toggle-grid-template-columns:50% 50%;width:100%}:host(:disabled){--sbb-toggle-selected-option-border-color:var(--lightningcss-light,var(--sbb-color-graphite))var(--lightningcss-dark,var(--sbb-color-smoke));--sbb-toggle-selected-option-border-style:dashed}@media (forced-colors:active){:host(:disabled){--sbb-toggle-selected-option-border-style:solid;--sbb-toggle-selected-option-border-color:GrayText}}:host([size=s]){--sbb-toggle-padding-inline:var(--sbb-spacing-responsive-xxxs);--sbb-toggle-height:var(--sbb-size-element-xxs)}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(disable-animation-on-resizing),[state--disable-animation-on-resizing]))){--sbb-disable-animation-duration:0s}.sbb-toggle{--sbb-text-font-size:var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);grid-template-columns:var(--sbb-toggle-grid-template-columns);min-width:var(--sbb-toggle-min-width);width:var(--sbb-toggle-width);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--sbb-toggle-border-radius);grid-template-areas:"start end";align-items:center;max-width:100%;display:grid}.sbb-toggle:before{content:"";margin-inline:var(--sbb-toggle-option-left,0) var(--sbb-toggle-option-right,0);background-color:var(--sbb-toggle-selected-option-background-color);border-radius:var(--sbb-toggle-border-radius);border:var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);max-width:100%;height:100%;transition-duration:var(--sbb-toggle-animation-duration);grid-area:start/start/end/end;transition-property:margin-inline-start,margin-inline-end;transition-timing-function:ease;display:block}.sbb-toggle:after{content:"";background:var(--sbb-background-color-4);margin-inline:var(--sbb-toggle-background-inset);height:calc(100% - 2 * var(--sbb-toggle-background-inset));border-radius:var(--sbb-toggle-border-radius);order:-1;grid-area:start/start/end/end}@media (forced-colors:active){.sbb-toggle:after{border:var(--sbb-border-width-1x) solid CanvasText}}::slotted(sbb-toggle-option:first-of-type){grid-area:start}::slotted(sbb-toggle-option:last-of-type){grid-area:end}`, m = (() => {
+	let n = l(u(o)), m = [], h, g = [], _ = [], v, y = [], b = [], x;
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			h = [s(), a({
+				reflect: !0,
+				type: Boolean
+			})], v = [a({ reflect: !0 })], x = [a()], e(this, null, h, {
+				kind: "accessor",
+				name: "even",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "even" in e,
+					get: (e) => e.even,
+					set: (e, t) => {
+						e.even = 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), e(this, null, x, {
+				kind: "setter",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, null, m), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-toggle";
+		}
+		static {
+			this.role = "radiogroup";
+		}
+		static {
+			this.styles = [d, p];
+		}
+		static {
+			this.events = { change: "change" };
+		}
+		#e;
+		get even() {
+			return this.#e;
+		}
+		set even(e) {
+			this.#e = e;
+		}
+		#t;
+		get size() {
+			return this.#t;
+		}
+		set size(e) {
+			this.#t = e;
+		}
+		set value(e) {
+			i || !this.hasUpdated ? this._fallbackValue = e : this._valueChanged(e);
+		}
+		get value() {
+			return i ? this._fallbackValue ?? null : this.options.find((e) => e.checked)?.value ?? this.options[0]?.value ?? null;
+		}
+		get options() {
+			return Array.from(this.querySelectorAll?.("sbb-toggle-option") ?? []);
+		}
+		constructor() {
+			super(), this.#e = (t(this, m), t(this, g, !1)), this.#t = (t(this, _), t(this, y, c() ? "s" : "m")), this._fallbackValue = (t(this, b), null), this.addEventListener?.("input", () => this._handleInput(), { passive: !0 }), this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+		}
+		willUpdate(e) {
+			super.willUpdate(e), (e.has("disabled") || e.has("formDisabled")) && this._updateDisabled(), this.hasUpdated || this._valueChanged(this._fallbackValue);
+		}
+		statusChanged() {
+			this.updateFormValue(), this.updatePillPosition();
+		}
+		formResetCallback() {
+			this.value = this.hasAttribute("value") ? this.getAttribute("value") : null;
+		}
+		formStateRestoreCallback(e, t) {
+			typeof e == "string" || e == null ? this.value = e ?? null : e instanceof FormData && this._readFormData(e).then((e) => {
+				this.value = e;
+			});
+		}
+		async _readFormData(e) {
+			let t = e.get(this.name);
+			return t instanceof Blob ? JSON.parse(await t.text()) : t;
+		}
+		updatePillPosition(e = !1) {
+			let t = this.options, n = this.shadowRoot?.querySelector(".sbb-toggle");
+			if (t.length < 2 || !n || t.every((e) => !e.checked) || t.every((e) => !e.clientWidth)) return;
+			this.toggleState("disable-animation-on-resizing", e);
+			let r = t[0], i = r.checked, a = i ? "0px" : `${r.clientWidth}px`, o = i ? `${n.clientWidth - r.clientWidth}px` : "0px";
+			o === "0px" && a === "0px" || (this.style?.setProperty("--sbb-toggle-option-left", a), this.style?.setProperty("--sbb-toggle-option-right", o), this.offsetWidth, this.internals.states.add("initialized"));
+		}
+		_updateToggle() {
+			this._valueChanged(this.value), this._updateDisabled();
+		}
+		_valueChanged(e) {
+			let t = this.options, n = t.find((t) => e === t.value) ?? t.find((e) => e.checked) ?? t[0];
+			n && (n.checked = !0, this.statusChanged());
+		}
+		_updateDisabled() {
+			for (let e of this.options) e.disabled = this.disabled || this.formDisabled;
+		}
+		_handleInput() {
+			this.statusChanged(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		}
+		_handleKeyDown(e) {
+			if (!this.options.filter((e) => !e.disabled && f.isVisible(e)) || e.target !== this && e.target.parentElement !== this) return;
+			let t = this.options, n = this.matches(":dir(rtl)"), r = t.findIndex((e) => e.checked) ?? t[0], i = t.slice(r + 1).concat(t.slice(0, r)).filter((e) => !e.disabled && f.isVisible(e));
+			(n ? e.key === "ArrowLeft" : e.key === " " || e.key === "ArrowRight") ? (this._selectAndFocusOption(i[0]), e.preventDefault()) : (n ? e.key === " " || e.key === "ArrowRight" : e.key === "ArrowLeft") && (this._selectAndFocusOption(i.at(-1)), e.preventDefault());
+		}
+		_selectAndFocusOption(e) {
+			!e || e.disabled || e.checked || (e.checked = !0, e.focus(), e.dispatchEvent(new InputEvent("input", {
+				bubbles: !0,
+				composed: !0
+			})));
+		}
+		render() {
+			return r`
+      <div class="sbb-toggle">
+        <slot @slotchange=${this._updateToggle}></slot>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { m as t };

package/toggle.js

@@ -1,6 +1,6 @@
-import { SbbToggleElement as t } from "./toggle/toggle/toggle.component.js";
-import { SbbToggleOptionElement as g } from "./toggle/toggle-option/toggle-option.component.js";
-export {
-  t as SbbToggleElement,
-  g as SbbToggleOptionElement
-};
+import { t as e } from "./toggle-option.component-NMfqwd12.js";
+import { t } from "./toggle.component-D1n5S5ev.js";
+import "./toggle.pure.js";
+t.define(), e.define();
+//#endregion
+export { t as SbbToggleElement, e as SbbToggleOptionElement };

package/toggle.pure.js

@@ -0,0 +1,3 @@
+import { t as e } from "./toggle-option.component-NMfqwd12.js";
+import { t } from "./toggle.component-D1n5S5ev.js";
+export { t as SbbToggleElement, e as SbbToggleOptionElement };

package/tooltip/tooltip.component.js

@@ -1,197 +1,2 @@
-var E = (s) => {
-  throw TypeError(s);
-};
-var O = (s, o, a) => o.has(s) || E("Cannot " + a);
-var x = (s, o, a) => (O(s, o, "read from private field"), a ? a.call(s) : o.get(s)), k = (s, o, a) => o.has(s) ? E("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, a), g = (s, o, a, l) => (O(s, o, "write to private field"), l ? l.call(s, a) : o.set(s, a), a);
-import { __esDecorate as p, __runInitializers as c } from "tslib";
-import { css as S, isServer as P, html as L } from "lit";
-import { customElement as z, property as h } from "lit/decorators.js";
-import { SbbOpenCloseBaseElement as N } from "../core/base-elements.js";
-import { readConfig as u } from "../core/config.js";
-import { SbbEscapableOverlayController as B, SbbOverlayPositionController as I } from "../core/controllers.js";
-import { idReference as M } from "../core/decorators.js";
-import { queueDomContentLoaded as U, isZeroAnimationDuration as H, isAndroid as q, isIOS as Z } from "../core/dom.js";
-import { SbbDisabledMixin as j, appendAriaElements as $, removeAriaElements as R } from "../core/mixins.js";
-import { sbbOverlayOutsidePointerEventListener as A } from "../core/overlay.js";
-import { boxSizingStyles as F } from "../core/styles.js";
-const G = S`:host{--sbb-tooltip-pointer-events: all;--sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-border-radius: var(--sbb-border-radius-8x);--sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-color: var(--sbb-color-2-inverted);--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-tooltip-animation-easing: ease-out;--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);--sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);--sbb-overlay-position-area: block-start;--sbb-overlay-position-try-fallbacks: block-start span-inline-end, block-start span-inline-start, block-end, block-end span-inline-end, block-end span-inline-start;position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);display:none;position:fixed;background-color:transparent;pointer-events:var(--sbb-tooltip-pointer-events);z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);border:none;inset:initial;padding:0;margin:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block;--sbb-tooltip-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=" start"],[data-position$=" end"])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}`, W = 500, Y = q || Z, m = /* @__PURE__ */ new WeakMap();
-let J = 0, dt = (() => {
-  var d, n;
-  let s = [z("sbb-tooltip")], o, a = [], l, _ = j(N), b = [], y, v = [], f = [], T, C, D;
-  return n = class extends _ {
-    constructor() {
-      super();
-      k(this, d);
-      g(this, d, (c(this, b), c(this, v, null))), this._openDelay = (c(this, f), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new B(this), this._overlayController = new I(this), this.addEventListener("mouseleave", (t) => {
-        (this.state === "opened" || this.state === "opening") && (!t.relatedTarget || !this._triggerElement?.contains(t.relatedTarget)) && this._delayedClose();
-      }, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 }), this.addEventListener("animationend", (t) => this._onTooltipAnimationEnd(t), { passive: !0 });
-    }
-    /**
-     * The element that will trigger the tooltip overlay.
-     *
-     * For attribute usage, provide an id reference.
-     */
-    get trigger() {
-      return x(this, d);
-    }
-    set trigger(t) {
-      g(this, d, t);
-    }
-    /**
-     * Open the tooltip after a given delay in milliseconds.
-     * Global configuration is used as default, if not set.
-     *
-     * @default null
-     */
-    set openDelay(t) {
-      this._openDelay = t;
-    }
-    get openDelay() {
-      return this._openDelay ?? u().tooltip?.openDelay ?? 0;
-    }
-    /**
-     * Close the tooltip after a given delay in milliseconds.
-     * Global configuration is used as default, if not set.
-     *
-     * @default null
-     */
-    set closeDelay(t) {
-      this._closeDelay = t;
-    }
-    get closeDelay() {
-      return this._closeDelay ?? u().tooltip?.closeDelay ?? 0;
-    }
-    /**
-     * Automatically close the tooltip after it has been open by long press.
-     * Global configuration is used as default, if not set.
-     *
-     * @default 1500
-     */
-    set longPressCloseDelay(t) {
-      this._longPressCloseDelay = +t;
-    }
-    get longPressCloseDelay() {
-      return this._longPressCloseDelay ?? u().tooltip?.longPressCloseDelay ?? 1500;
-    }
-    static _initializeTooltipOutlet() {
-      this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet), new MutationObserver((t) => {
-        for (const e of t)
-          if (e.type === "attributes")
-            this._handleTooltipTrigger(e.target);
-          else if (e.type === "childList")
-            for (const i of [...e.addedNodes, ...e.removedNodes].filter((r) => r.nodeType === r.ELEMENT_NODE))
-              this._handleTooltipTrigger(i), this._findAndHandleTooltipTriggers(i);
-      }).observe(document.documentElement, {
-        attributeFilter: [
-          "sbb-tooltip",
-          "sbb-tooltip-open-delay",
-          "sbb-tooltip-close-delay",
-          "sbb-tooltip-position"
-        ],
-        childList: !0,
-        subtree: !0
-      }), this._findAndHandleTooltipTriggers(document.body);
-    }
-    static _findAndHandleTooltipTriggers(t) {
-      t.querySelectorAll("[sbb-tooltip]").forEach((e) => this._handleTooltipTrigger(e));
-    }
-    static _handleTooltipTrigger(t) {
-      const e = t.getAttribute("sbb-tooltip");
-      let i = m.get(t);
-      if (e && t.isConnected) {
-        i || (i = document.createElement("sbb-tooltip"), m.set(t, i), this._tooltipOutlet.appendChild(i), i.trigger = t), i.textContent = e, i.openDelay = t.hasAttribute("sbb-tooltip-open-delay") ? +t.getAttribute("sbb-tooltip-open-delay") : null, i.closeDelay = t.hasAttribute("sbb-tooltip-close-delay") ? +t.getAttribute("sbb-tooltip-close-delay") : null;
-        const r = t.hasAttribute("sbb-tooltip-position") ? t.getAttribute("sbb-tooltip-position").split(",").map((w) => w.trim()) : t.tooltipPositions;
-        r && r.length > 0 ? (i.style.setProperty("--sbb-overlay-position-area", r[0]), i.style.setProperty("--sbb-overlay-position-try-fallbacks", r.slice(1).join(", "))) : (i.style.removeProperty("--sbb-overlay-position-area"), i.style.removeProperty("--sbb-overlay-position-try-fallbacks"));
-      } else i && (m.delete(t), i._destroy());
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++J}`, this.state = "closed", A.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback(), A.disconnect(this), this._detach();
-    }
-    requestUpdate(t, e, i) {
-      super.requestUpdate(t, e, i), !P && (!t || t === "trigger") && this.hasUpdated && this._attach(this.trigger);
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._attach(this.trigger);
-    }
-    open() {
-      this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.trigger || !this.dispatchBeforeOpenEvent()) && (this.showPopover?.(), this.state = "opening", this._overlayController.connect(this.trigger), this._isZeroAnimationDuration() && this._handleOpening());
-    }
-    close() {
-      this._resetOpenCloseTimeout(), !(this.state !== "opened" && this.state !== "opening") && (this.dispatchBeforeCloseEvent(), this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
-    }
-    _delayedOpen() {
-      this._resetOpenCloseTimeout(), this._openTimeout = setTimeout(() => this.open(), this.openDelay);
-    }
-    _handleOpening() {
-      this.state = "opened", this._escapableOverlayController.connect(), this.dispatchOpenEvent();
-    }
-    _delayedClose() {
-      this._resetOpenCloseTimeout(), this._closeTimeout = setTimeout(() => this.close(), this.closeDelay);
-    }
-    _handleClosing() {
-      this.state = "closed", this.hidePopover?.(), this._overlayController.disconnect(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
-    }
-    _onTooltipAnimationEnd(t) {
-      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
-    }
-    _attach(t) {
-      this._triggerElement && this._detach(), this._triggerElement = t, this._triggerElement && (this._triggerElement.ariaDescribedByElements = $(this._triggerElement.ariaDescribedByElements, this), this._addTriggerEventHandlers());
-    }
-    _detach() {
-      this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement && (this._triggerElement.ariaDescribedByElements = R(this._triggerElement.ariaDescribedByElements, this), this._triggerElement = null);
-    }
-    _destroy() {
-      this._detach(), this.remove();
-    }
-    _addTriggerEventHandlers() {
-      const t = this._triggerElement;
-      if (!t)
-        return;
-      this._triggerAbortController?.abort(), this._triggerAbortController = new AbortController();
-      const e = {
-        signal: this._triggerAbortController.signal,
-        passive: !0
-      };
-      Y || (t.addEventListener("mouseenter", () => this._delayedOpen(), e), t.addEventListener("mouseleave", (i) => {
-        const r = i.relatedTarget;
-        (!r || r !== this) && this._delayedClose();
-      }, e), t.addEventListener("blur", () => this.close(), e), t.addEventListener("focus", () => this._delayedOpen(), e)), t.addEventListener("touchstart", () => {
-        clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), W);
-      }, e), t.addEventListener("touchend", () => {
-        clearTimeout(this._longPressOpenTimeout), this._longPressCloseTimeout = setTimeout(() => this.close(), this.longPressCloseDelay);
-      }, e), t.addEventListener("touchcancel", () => {
-        clearTimeout(this._longPressOpenTimeout);
-      }, e);
-    }
-    _isZeroAnimationDuration() {
-      return H(this, "--sbb-tooltip-animation-duration");
-    }
-    _resetOpenCloseTimeout() {
-      clearTimeout(this._openTimeout), clearTimeout(this._closeTimeout);
-    }
-    render() {
-      return L`
-      <div class="sbb-tooltip">
-        <slot></slot>
-      </div>
-    `;
-    }
-  }, d = new WeakMap(), l = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    y = [M(), h()], T = [h({ attribute: "open-delay", type: Number })], C = [h({ attribute: "close-delay", type: Number })], D = [h({ attribute: "long-press-close-delay", type: Number })], p(n, null, y, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, i) => {
-      e.trigger = i;
-    } }, metadata: t }, v, f), p(n, null, T, { kind: "setter", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, set: (e, i) => {
-      e.openDelay = i;
-    } }, metadata: t }, null, b), p(n, null, C, { kind: "setter", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, set: (e, i) => {
-      e.closeDelay = i;
-    } }, metadata: t }, null, b), p(n, null, D, { kind: "setter", name: "longPressCloseDelay", static: !1, private: !1, access: { has: (e) => "longPressCloseDelay" in e, set: (e, i) => {
-      e.longPressCloseDelay = i;
-    } }, metadata: t }, null, b), p(null, o = { value: l }, s, { kind: "class", name: l.name, metadata: t }, null, a), l = o.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.role = "tooltip", n.styles = [F, G], P || U(() => l._initializeTooltipOutlet()), c(l, a), l;
-})();
-export {
-  dt as SbbTooltipElement
-};
+import { t as e } from "../tooltip.component-X45T6iQH.js";
+export { e as SbbTooltipElement };

package/tooltip.component-X45T6iQH.js

@@ -0,0 +1,228 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r, isServer as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbOpenCloseBaseElement as o } from "./core/base-elements.js";
+import { idReference as s } from "./core/decorators.js";
+import { isAndroid as c, isIOS as l, isZeroAnimationDuration as u, queueDomContentLoaded as d } from "./core/dom.js";
+import { SbbDisabledMixin as f, appendAriaElements as p, removeAriaElements as m } from "./core/mixins.js";
+import { boxSizingStyles as h } from "./core/styles.js";
+import { SbbEscapableOverlayController as g, SbbOverlayPositionController as _ } from "./core/controllers.js";
+import { sbbOverlayOutsidePointerEventListener as v } from "./core/overlay.js";
+import { readConfig as y } from "./core/config.js";
+//#region src/elements/tooltip/tooltip.scss?lit&inline
+var b = n`:host{--sbb-tooltip-pointer-events:all;--sbb-tooltip-min-width:var(--sbb-spacing-fixed-8x);--sbb-tooltip-max-width:min(25rem, calc(100vw - var(--sbb-spacing-fixed-2x)));--sbb-tooltip-border-color:var(--sbb-background-color-1-inverted);--sbb-tooltip-border-radius:var(--sbb-border-radius-8x);--sbb-tooltip-padding:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-tooltip-background-color:var(--sbb-background-color-1-inverted);--sbb-tooltip-color:var(--sbb-color-2-inverted);--sbb-tooltip-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-tooltip-animation-easing:ease-out;--sbb-tooltip-animation-translate:0 var(--sbb-spacing-fixed-2x);--sbb-tooltip-gap:var(--sbb-spacing-fixed-2x);--sbb-overlay-position-area:block-start;--sbb-overlay-position-try-fallbacks:block-start span-inline-end, block-start span-inline-start, block-end, block-end span-inline-end, block-end span-inline-start;position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);pointer-events:var(--sbb-tooltip-pointer-events);z-index:var(--sbb-tooltip-z-index,var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);inset:initial;background-color:#0000;border:none;margin:0;padding:0;display:none;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-tooltip-animation-name:open;display:block}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name:close;--sbb-tooltip-pointer-events:none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=\\ start],[data-position$=\\ end])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);--sbb-text-font-size:var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}`, x = 500, S = c || l, C = /* @__PURE__ */ new WeakMap(), w = 0, T = (() => {
+	let n = f(o), c = [], l, T = [], E = [], D, O, k;
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			l = [s(), a()], D = [a({
+				attribute: "open-delay",
+				type: Number
+			})], O = [a({
+				attribute: "close-delay",
+				type: Number
+			})], k = [a({
+				attribute: "long-press-close-delay",
+				type: Number
+			})], e(this, null, l, {
+				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
+			}, T, E), e(this, null, D, {
+				kind: "setter",
+				name: "openDelay",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "openDelay" in e,
+					set: (e, t) => {
+						e.openDelay = t;
+					}
+				},
+				metadata: t
+			}, null, c), e(this, null, O, {
+				kind: "setter",
+				name: "closeDelay",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "closeDelay" in e,
+					set: (e, t) => {
+						e.closeDelay = t;
+					}
+				},
+				metadata: t
+			}, null, c), e(this, null, k, {
+				kind: "setter",
+				name: "longPressCloseDelay",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "longPressCloseDelay" in e,
+					set: (e, t) => {
+						e.longPressCloseDelay = t;
+					}
+				},
+				metadata: t
+			}, null, c), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-tooltip";
+		}
+		static {
+			this.role = "tooltip";
+		}
+		static {
+			this.styles = [h, b];
+		}
+		static {
+			i || d(() => this._initializeTooltipOutlet());
+		}
+		#e;
+		get trigger() {
+			return this.#e;
+		}
+		set trigger(e) {
+			this.#e = e;
+		}
+		set openDelay(e) {
+			this._openDelay = e;
+		}
+		get openDelay() {
+			return this._openDelay ?? y().tooltip?.openDelay ?? 0;
+		}
+		set closeDelay(e) {
+			this._closeDelay = e;
+		}
+		get closeDelay() {
+			return this._closeDelay ?? y().tooltip?.closeDelay ?? 0;
+		}
+		set longPressCloseDelay(e) {
+			this._longPressCloseDelay = +e;
+		}
+		get longPressCloseDelay() {
+			return this._longPressCloseDelay ?? y().tooltip?.longPressCloseDelay ?? 1500;
+		}
+		constructor() {
+			super(), this.#e = (t(this, c), t(this, T, null)), this._openDelay = (t(this, E), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new g(this), this._overlayController = new _(this), this.addEventListener("mouseleave", (e) => {
+				(this.state === "opened" || this.state === "opening") && (!e.relatedTarget || !this._triggerElement?.contains(e.relatedTarget)) && this._delayedClose();
+			}, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 }), this.addEventListener("animationend", (e) => this._onTooltipAnimationEnd(e), { passive: !0 });
+		}
+		static _initializeTooltipOutlet() {
+			this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet), new MutationObserver((e) => {
+				for (let t of e) if (t.type === "attributes") this._handleTooltipTrigger(t.target);
+				else if (t.type === "childList") for (let e of [...t.addedNodes, ...t.removedNodes].filter((e) => e.nodeType === e.ELEMENT_NODE)) this._handleTooltipTrigger(e), this._findAndHandleTooltipTriggers(e);
+			}).observe(document.documentElement, {
+				attributeFilter: [
+					"sbb-tooltip",
+					"sbb-tooltip-open-delay",
+					"sbb-tooltip-close-delay",
+					"sbb-tooltip-position"
+				],
+				childList: !0,
+				subtree: !0
+			}), this._findAndHandleTooltipTriggers(document.body);
+		}
+		static _findAndHandleTooltipTriggers(e) {
+			e.querySelectorAll("[sbb-tooltip]").forEach((e) => this._handleTooltipTrigger(e));
+		}
+		static _handleTooltipTrigger(e) {
+			let t = e.getAttribute("sbb-tooltip"), n = C.get(e);
+			if (t && e.isConnected) {
+				n || (n = document.createElement("sbb-tooltip"), C.set(e, n), this._tooltipOutlet.appendChild(n), n.trigger = e), n.textContent = t, n.openDelay = e.hasAttribute("sbb-tooltip-open-delay") ? +e.getAttribute("sbb-tooltip-open-delay") : null, n.closeDelay = e.hasAttribute("sbb-tooltip-close-delay") ? +e.getAttribute("sbb-tooltip-close-delay") : null;
+				let r = e.hasAttribute("sbb-tooltip-position") ? e.getAttribute("sbb-tooltip-position").split(",").map((e) => e.trim()) : e.tooltipPositions;
+				r && r.length > 0 ? (n.style.setProperty("--sbb-overlay-position-area", r[0]), n.style.setProperty("--sbb-overlay-position-try-fallbacks", r.slice(1).join(", "))) : (n.style.removeProperty("--sbb-overlay-position-area"), n.style.removeProperty("--sbb-overlay-position-try-fallbacks"));
+			} else n && (C.delete(e), n._destroy?.());
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++w}`, this.state = "closed", v.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), v.disconnect(this), this._detach();
+		}
+		requestUpdate(e, t, n) {
+			super.requestUpdate(e, t, n), !i && (!e || e === "trigger") && this.hasUpdated && this._attach(this.trigger);
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), this._attach(this.trigger);
+		}
+		open() {
+			this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.trigger || !this.dispatchBeforeOpenEvent()) && (this.showPopover?.(), this.state = "opening", this._overlayController.connect(this.trigger), this._isZeroAnimationDuration() && this._handleOpening());
+		}
+		close() {
+			this._resetOpenCloseTimeout(), !(this.state !== "opened" && this.state !== "opening") && (this.dispatchBeforeCloseEvent(), this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
+		}
+		_delayedOpen() {
+			this._resetOpenCloseTimeout(), this._openTimeout = setTimeout(() => this.open(), this.openDelay);
+		}
+		_handleOpening() {
+			this.state = "opened", this._escapableOverlayController.connect(), this.dispatchOpenEvent();
+		}
+		_delayedClose() {
+			this._resetOpenCloseTimeout(), this._closeTimeout = setTimeout(() => this.close(), this.closeDelay);
+		}
+		_handleClosing() {
+			this.state = "closed", this.hidePopover?.(), this._overlayController.disconnect(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
+		}
+		_onTooltipAnimationEnd(e) {
+			e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
+		}
+		_attach(e) {
+			this._triggerElement && this._detach(), this._triggerElement = e, this._triggerElement && (this._triggerElement.ariaDescribedByElements = p(this._triggerElement.ariaDescribedByElements, this), this._addTriggerEventHandlers());
+		}
+		_detach() {
+			this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement &&= (this._triggerElement.ariaDescribedByElements = m(this._triggerElement.ariaDescribedByElements, this), null);
+		}
+		_destroy() {
+			this._detach(), this.remove();
+		}
+		_addTriggerEventHandlers() {
+			let e = this._triggerElement;
+			if (!e) return;
+			this._triggerAbortController?.abort(), this._triggerAbortController = new AbortController();
+			let t = {
+				signal: this._triggerAbortController.signal,
+				passive: !0
+			};
+			S || (e.addEventListener("mouseenter", () => this._delayedOpen(), t), e.addEventListener("mouseleave", (e) => {
+				let t = e.relatedTarget;
+				(!t || t !== this) && this._delayedClose();
+			}, t), e.addEventListener("blur", () => this.close(), t), e.addEventListener("focus", () => this._delayedOpen(), t)), e.addEventListener("touchstart", () => {
+				clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), x);
+			}, t), e.addEventListener("touchend", () => {
+				clearTimeout(this._longPressOpenTimeout), this._longPressCloseTimeout = setTimeout(() => this.close(), this.longPressCloseDelay);
+			}, t), e.addEventListener("touchcancel", () => {
+				clearTimeout(this._longPressOpenTimeout);
+			}, t);
+		}
+		_isZeroAnimationDuration() {
+			return u(this, "--sbb-tooltip-animation-duration");
+		}
+		_resetOpenCloseTimeout() {
+			clearTimeout(this._openTimeout), clearTimeout(this._closeTimeout);
+		}
+		render() {
+			return r`
+      <div class="sbb-tooltip">
+        <slot></slot>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { T as t };

package/tooltip.js

@@ -1,4 +1,6 @@
-import { SbbTooltipElement as t } from "./tooltip/tooltip.component.js";
-export {
-  t as SbbTooltipElement
-};
+import { t as e } from "./tooltip.component-X45T6iQH.js";
+import "./tooltip.pure.js";
+//#region src/elements/tooltip.ts
+e.define();
+//#endregion
+export { e as SbbTooltipElement };

package/tooltip.pure.js

@@ -0,0 +1,2 @@
+import { t as e } from "./tooltip.component-X45T6iQH.js";
+export { e as SbbTooltipElement };