@sbb-esta/lyne-elements-dev 0.0.0 → 4.0.0-dev.1775551720

package/core/base-elements/open-close-base-element.js

@@ -0,0 +1,41 @@
+import { SbbElement as e } from "./element.js";
+//#region src/elements/core/base-elements/open-close-base-element.ts
+var t = class extends e {
+	static {
+		this.events = {
+			beforeopen: "beforeopen",
+			open: "open",
+			beforeclose: "beforeclose",
+			close: "close"
+		};
+	}
+	set state(e) {
+		this._state && this.internals.states.delete(`state-${this._state}`), this._state = e, this._state && this.internals.states.add(`state-${this._state}`);
+	}
+	get state() {
+		return this._state;
+	}
+	get isOpen() {
+		return this.state === "opened";
+	}
+	constructor() {
+		super(), this.state = "closed";
+	}
+	escapeStrategy() {
+		this.close();
+	}
+	dispatchBeforeOpenEvent() {
+		return this.dispatchEvent(new Event("beforeopen", { cancelable: !0 }));
+	}
+	dispatchOpenEvent() {
+		return this.dispatchEvent(new Event("open"));
+	}
+	dispatchBeforeCloseEvent() {
+		return this.dispatchEvent(new Event("beforeclose", { cancelable: !0 }));
+	}
+	dispatchCloseEvent() {
+		return this.dispatchEvent(new Event("close"));
+	}
+};
+//#endregion
+export { t as SbbOpenCloseBaseElement };

package/core/base-elements/selection-group-base-element.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../selection-group-base-element-B2VHp5_l.js";
+export { e as SbbSelectionGroupBaseElement };

package/core/base-elements.js

@@ -0,0 +1,7 @@
+import { SbbElement as e } from "./base-elements/element.js";
+import { SbbActionBaseElement as t } from "./base-elements/action-base-element.js";
+import { SbbButtonBaseElement as n, SbbButtonLikeBaseElement as r } from "./base-elements/button-base-element.js";
+import { SbbLinkBaseElement as i } from "./base-elements/link-base-element.js";
+import { SbbOpenCloseBaseElement as a } from "./base-elements/open-close-base-element.js";
+import { t as o } from "../selection-group-base-element-B2VHp5_l.js";
+export { t as SbbActionBaseElement, n as SbbButtonBaseElement, r as SbbButtonLikeBaseElement, e as SbbElement, i as SbbLinkBaseElement, a as SbbOpenCloseBaseElement, o as SbbSelectionGroupBaseElement };

package/core/config/config.js

@@ -0,0 +1,10 @@
+//#region src/elements/core/config/config.ts
+function e() {
+	return "sbbConfig" in globalThis || (globalThis.sbbConfig = {}), globalThis.sbbConfig;
+}
+function t(t) {
+	let n = e();
+	Object.assign(n, t);
+}
+//#endregion
+export { t as mergeConfig, e as readConfig };

package/core/config.js

@@ -0,0 +1,2 @@
+import { mergeConfig as e, readConfig as t } from "./config/config.js";
+export { e as mergeConfig, t as readConfig };

package/core/controllers/escapable-overlay-controller.js

@@ -0,0 +1,25 @@
+import { isServer as e } from "lit";
+//#region src/elements/core/controllers/escapable-overlay-controller.ts
+var t = [];
+e || window.addEventListener("keydown", (e) => {
+	e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), t.at(-1)?.escapeStrategy());
+});
+var n = class {
+	constructor(e, n = t) {
+		this._host = e, this._overlayStack = n, this._host.addController?.(this);
+	}
+	hostDisconnected() {
+		this.disconnect();
+	}
+	connect() {
+		this.disconnect(), this._overlayStack.push(this._host);
+	}
+	disconnect() {
+		if (this._overlayStack.length) {
+			let e = this._overlayStack.findIndex((e) => e === this._host);
+			e !== -1 && this._overlayStack.splice(e, 1);
+		}
+	}
+};
+//#endregion
+export { n as SbbEscapableOverlayController };

package/core/controllers/id-reference-controller.js

@@ -0,0 +1,51 @@
+import { isServer as e } from "lit";
+//#region src/elements/core/controllers/id-reference-controller.ts
+var t = /* @__PURE__ */ new WeakMap(), n = class {
+	constructor(e, n, r = t) {
+		this._host = e, this._idRef = n, this._observers = r, this._rootNode = null, this._host.addController(this);
+	}
+	hostConnected() {
+		if (e) return;
+		this._rootNode = this._host.getRootNode();
+		let t = this._observers.get(this._rootNode);
+		if (t) t.controllers.add(this);
+		else {
+			let e = new Set([this]), t = new MutationObserver((t) => {
+				let n = /* @__PURE__ */ new Set();
+				for (let e of t) if (e.type === "attributes") n.add(e.oldValue), n.add(e.target.id);
+				else if (e.type === "childList") for (let t of [...e.addedNodes, ...e.removedNodes]) t instanceof HTMLElement && (n.add(t.id), t.querySelectorAll("[id]").forEach((e) => n.add(e.id)));
+				for (let t of e) {
+					let e = t._host[t._idRef];
+					e && typeof e == "string" && n.has(e) && t._host.requestUpdate();
+				}
+			});
+			t.observe(this._rootNode, {
+				attributeFilter: ["id"],
+				childList: !0,
+				subtree: !0,
+				attributeOldValue: !0
+			}), this._observers.set(this._rootNode, {
+				observer: t,
+				controllers: e
+			});
+		}
+	}
+	hostDisconnected() {
+		if (e || !this._rootNode) return;
+		let t = this._observers.get(this._rootNode);
+		if (!t) {
+			this._rootNode = null;
+			return;
+		}
+		t.controllers.delete(this), t.controllers.size === 0 && (t.observer.disconnect(), this._observers.delete(this._rootNode)), this._rootNode = null;
+	}
+	find() {
+		if (e || !this._rootNode) return null;
+		{
+			let e = this._host[this._idRef];
+			return typeof e == "string" ? this._rootNode?.getElementById(e) : null;
+		}
+	}
+};
+//#endregion
+export { n as SbbIdReferenceController };

package/core/controllers/inert-controller.js

@@ -0,0 +1,56 @@
+//#region src/elements/core/controllers/inert-controller.ts
+var e = [
+	"script",
+	"head",
+	"template",
+	"style"
+], t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), i = class {
+	constructor(e, i = t, a = r, o = n) {
+		this._host = e, this._inertElements = i, this._inertOverlays = a, this._exemptedElements = o, this._host.addController?.(this);
+	}
+	hostConnected() {
+		this._host.isOpen && this.activate();
+	}
+	hostDisconnected() {
+		this.isInert() && this.deactivate();
+	}
+	activate() {
+		this._inertOverlays.size && this._removeAllInertAttributes(), this._inertOverlays.add(this._host), this._addAllInertAttributes();
+	}
+	deactivate() {
+		if (this._currentOverlay() !== this._host) {
+			this._inertOverlays.has(this._host) && this._inertOverlays.delete(this._host);
+			return;
+		}
+		this._removeAllInertAttributes(), this._inertOverlays.delete(this._host), this._inertOverlays.size && this._addAllInertAttributes();
+	}
+	isInert() {
+		return this._inertOverlays.has(this._host);
+	}
+	exempt(e) {
+		this._inertElements.has(e) && !this._exemptedElements.has(e) && (this._removeInertAttributes(e), this._inertElements.delete(e), this._exemptedElements.add(e));
+	}
+	restoreAllExempted() {
+		this._exemptedElements.forEach((e) => this._addInertAttributes(e)), this._exemptedElements.clear();
+	}
+	_currentOverlay() {
+		return [...this._inertOverlays].pop() ?? null;
+	}
+	_removeAllInertAttributes() {
+		this._inertElements.forEach((e) => this._removeInertAttributes(e)), this._inertElements.clear();
+	}
+	_removeInertAttributes(e) {
+		e && (e.hasAttribute("data-sbb-inert") && (e.inert = !1, e.removeAttribute("data-sbb-inert")), e.hasAttribute("data-sbb-aria-hidden") && (e.removeAttribute("aria-hidden"), e.removeAttribute("data-sbb-aria-hidden")));
+	}
+	_addAllInertAttributes() {
+		let t = this._currentOverlay();
+		for (; t !== document.documentElement && t !== null;) Array.from((t?.parentElement ?? t?.getRootNode())?.childNodes ?? []).filter((n) => n !== t && n instanceof window.HTMLElement && !e.includes(n.localName) && !n.classList.contains("sbb-live-announcer-element")).forEach((e) => {
+			this._addInertAttributes(e);
+		}), t = t?.parentElement ?? t?.getRootNode()?.host ?? null;
+	}
+	_addInertAttributes(e) {
+		this._inertElements.add(e), e.inert || (e.inert = !0, e.toggleAttribute("data-sbb-inert", !0)), e.hasAttribute("aria-hidden") || (e.setAttribute("aria-hidden", "true"), e.toggleAttribute("data-sbb-aria-hidden", !0));
+	}
+};
+//#endregion
+export { i as SbbInertController };

package/core/controllers/language-controller.js

@@ -0,0 +1,54 @@
+import { isServer as e } from "lit";
+import { readConfig as t } from "../config.js";
+//#region src/elements/core/controllers/language-controller.ts
+var n = class n {
+	static {
+		this._defaultLanguage = "en";
+	}
+	static {
+		this._supportedLocales = [
+			"en",
+			"de",
+			"fr",
+			"it"
+		];
+	}
+	static {
+		this._listeners = /* @__PURE__ */ new Set();
+	}
+	static {
+		this._observer = e ? null : new MutationObserver((e) => {
+			e[0].oldValue !== document.documentElement.getAttribute("lang") && n._listeners.forEach((e) => e._callHandlers());
+		});
+	}
+	static {
+		this._observerConfig = {
+			attributeFilter: ["lang"],
+			attributeOldValue: !0
+		};
+	}
+	static get current() {
+		let r = ((t().language ?? (e ? n._defaultLanguage : document.documentElement.getAttribute("lang"))) || n._defaultLanguage).split("-")[0];
+		return n._supportedLocales.includes(r) ? r : n._defaultLanguage;
+	}
+	get current() {
+		return n.current;
+	}
+	constructor(e) {
+		this._host = e, this._handlers = [], this._host.addController(this);
+	}
+	withHandler(e) {
+		return this._handlers.unshift(e), this;
+	}
+	hostConnected() {
+		e || (n._listeners.size || n._observer.observe(document.documentElement, n._observerConfig), n._listeners.add(this), this._previousLanguage !== this.current && this._callHandlers(this._previousLanguage !== void 0));
+	}
+	hostDisconnected() {
+		e || (this._previousLanguage = this.current, n._listeners.delete(this), n._listeners.size || n._observer.disconnect());
+	}
+	_callHandlers(e = !0) {
+		this._handlers.forEach((e) => e()), e && this._host.requestUpdate();
+	}
+};
+//#endregion
+export { n as SbbLanguageController };

package/core/controllers/media-matchers-controller.js

@@ -0,0 +1,83 @@
+import { c as e, i as t, n, o as r, r as i, t as a } from "../../sbb-tokens-CWYlBuxJ.js";
+import { isServer as o } from "lit";
+import { ɵstateController as s } from "../mixins/element-internals-mixin.js";
+//#region src/elements/core/controllers/media-matchers-controller.ts
+var c = "(forced-colors: active)", l = "(prefers-color-scheme: dark)", u = "(any-hover: hover)", d = "(pointer: coarse)", f = `(min-width: ${e})`, p = `(min-width: ${t})`, m = `(min-width: ${n})`, h = `(min-width: ${r})`, g = `(max-width: ${i})`, _ = `(max-width: ${a})`, v = /* @__PURE__ */ new Map(), y = class {
+	constructor(e, t) {
+		this._queries = t, e.addController(this);
+	}
+	matches(e) {
+		return o ? null : matchMedia(e).matches;
+	}
+	hostConnected() {
+		if (!o) for (let [e, t] of Object.entries(this._queries)) {
+			let n = v.get(e);
+			if (n) n.handlers.add(t);
+			else {
+				let n = matchMedia(e), r = new Set([t]), i = (e) => r.forEach((t) => t(e.matches));
+				n.addEventListener("change", i), v.set(e, {
+					mediaQueryList: n,
+					handlers: r,
+					eventHandler: i
+				});
+			}
+		}
+	}
+	hostDisconnected() {
+		for (let [e, t] of Object.entries(this._queries)) {
+			let n = v.get(e);
+			n && (n.handlers.delete(t), n.handlers.size || v.delete(e));
+		}
+	}
+}, b = class e extends y {
+	static {
+		this._currentMode = this._readLightDarkClass();
+	}
+	static {
+		this._observer = o ? null : new MutationObserver((t) => {
+			if (t[0].oldValue !== document.documentElement.getAttribute("class")) {
+				let t = this._readLightDarkClass();
+				this._currentMode !== t && (e.requestUpdate(), this._currentMode = t);
+			}
+		});
+	}
+	static {
+		this._observerConfig = {
+			attributeFilter: ["class"],
+			attributeOldValue: !0
+		};
+	}
+	constructor(e, t) {
+		let n = () => {
+			t(this.matches()), s(this._host).toggle("dark", this.matches());
+		};
+		super(e, { [l]: n }), this._host = e, this._onChangeWithStateUpdater = n;
+	}
+	static _readLightDarkClass() {
+		if (o) return null;
+		let e = document.documentElement.classList;
+		return [
+			"sbb-light-dark",
+			"sbb-dark",
+			"sbb-light"
+		].find((t) => e.contains(t)) ?? null;
+	}
+	static requestUpdate() {
+		let e = v.get(l);
+		e && e.handlers.forEach((t) => t(e.mediaQueryList.matches));
+	}
+	hostConnected() {
+		let t = (v.get("(prefers-color-scheme: dark)")?.handlers.size ?? 0) === 0;
+		super.hostConnected(), t && e._observer.observe(document.documentElement, e._observerConfig), this._onChangeWithStateUpdater();
+	}
+	hostDisconnected() {
+		super.hostDisconnected(), (v.get("(prefers-color-scheme: dark)")?.handlers.size ?? 0) === 0 && e._observer.disconnect();
+	}
+	matches() {
+		if (o) return !1;
+		let e = getComputedStyle(this._host).getPropertyValue("color-scheme"), t = e.includes("dark"), n = e.trim() === "dark";
+		return super.matches("(prefers-color-scheme: dark)") && t || n;
+	}
+};
+//#endregion
+export { b as SbbDarkModeController, y as SbbMediaMatcherController, m as SbbMediaQueryBreakpointLargeAndAbove, _ as SbbMediaQueryBreakpointLargeAndBelow, p as SbbMediaQueryBreakpointSmallAndAbove, g as SbbMediaQueryBreakpointSmallAndBelow, h as SbbMediaQueryBreakpointUltraAndAbove, f as SbbMediaQueryBreakpointZeroAndAbove, l as SbbMediaQueryDarkMode, c as SbbMediaQueryForcedColors, u as SbbMediaQueryHover, d as SbbMediaQueryPointerCoarse };

package/core/controllers/overlay-position-controller.js

@@ -0,0 +1,217 @@
+import { isServer as e } from "lit";
+//#region src/elements/core/controllers/overlay-position-controller.ts
+var t = !e && CSS.supports("anchor-name", "--test"), n = [
+	"top",
+	"bottom",
+	"left",
+	"right",
+	"top span-left",
+	"top span-right",
+	"bottom span-left",
+	"bottom span-right",
+	"left span-top",
+	"left span-bottom",
+	"right span-top",
+	"right span-bottom"
+], r = [
+	"block-start",
+	"block-end",
+	"inline-start",
+	"inline-end",
+	"block-start span-inline-start",
+	"block-start span-inline-end",
+	"block-end span-inline-start",
+	"block-end span-inline-end",
+	"inline-start span-block-start",
+	"inline-start span-block-end",
+	"inline-end span-block-start",
+	"inline-end span-block-end"
+], i = {
+	"block-start": "block-start",
+	"block-end": "block-end",
+	"inline-start": "inline-end",
+	"inline-end": "inline-start",
+	"block-start span-inline-start": "block-start span-inline-end",
+	"block-start span-inline-end": "block-start span-inline-start",
+	"block-end span-inline-start": "block-end span-inline-end",
+	"block-end span-inline-end": "block-end span-inline-start",
+	"inline-start span-block-start": "inline-end span-block-start",
+	"inline-start span-block-end": "inline-end span-block-end",
+	"inline-end span-block-start": "inline-start span-block-start",
+	"inline-end span-block-end": "inline-start span-block-end"
+};
+[...n, ...r];
+var a = 0, o = class {
+	get currentPosition() {
+		return this._usePolyfill ? this._lastPosition ?? this._positions[0] ?? "" : (this._overlayStyles ??= getComputedStyle(this._overlay), this._overlayStyles.getPropertyValue("position-area"));
+	}
+	constructor(n, r = !t) {
+		this._usePolyfill = r, this._resizeObserver = e ? null : new ResizeObserver(() => this._requestCalculatePosition()), this._anchorName = `--sbb-overlay-anchor-${++a}`, this._positions = [], n.addController(this), this._overlay = n;
+	}
+	hostConnected() {
+		this._usePolyfill ? this._overlay.style.setProperty("position-area", "initial") : this._overlay.style.setProperty("position-anchor", this._anchorName);
+	}
+	hostUpdate() {
+		e || this._readPositionsFromCss();
+	}
+	connect(t) {
+		e || (this._anchor && this.disconnect(), this._anchor = t, this._usePolyfill || this._anchor.style.setProperty("anchor-name", this._anchorName), this._readPositionsFromCss(), this._calculatePosition(), this._abortController?.abort(), this._abortController = new AbortController(), document.addEventListener("scroll", () => this._requestCalculatePosition(), {
+			capture: !0,
+			passive: !0,
+			signal: this._abortController.signal
+		}), window.addEventListener("resize", () => this._requestCalculatePosition(), {
+			passive: !0,
+			signal: this._abortController.signal
+		}), this._resizeObserver.observe(t, { box: "border-box" }), this._resizeObserver.observe(this._overlay, { box: "border-box" }));
+	}
+	disconnect() {
+		this._anchor?.style.removeProperty("anchor-name"), this._anchor = void 0, this._abortController?.abort(), this._resizeObserver.disconnect();
+	}
+	_requestCalculatePosition() {
+		this._frame ??= requestAnimationFrame(() => {
+			this._calculatePosition(), this._frame = void 0;
+		});
+	}
+	_calculatePosition() {
+		if (this._anchor) {
+			if (this._usePolyfill) {
+				let e = this._getOptimalPosition(this._positions);
+				this._applyOverlayPosition(e.position, e.left, e.top);
+			}
+			this._overlay.setAttribute("data-position", this.currentPosition);
+		}
+	}
+	_getOptimalPosition(e) {
+		let { offsetHeight: t, offsetWidth: n } = this._overlay, { innerHeight: a, innerWidth: o } = window, { top: s, left: c, height: l, width: u } = this._anchor.getBoundingClientRect(), d = this._overlay.matches(":dir(rtl)"), f = s, p = a - l - s, m = c, h = o - u - c, g = n - u, _ = t - l, v = g / 2, y = _ / 2;
+		this._overlay.style.setProperty("--sbb-overlay-controller-trigger-height", `${l}px`), this._overlay.style.setProperty("--sbb-overlay-controller-trigger-width", `${u}px`);
+		let b = {
+			left: 0,
+			top: 0,
+			position: ""
+		}, x;
+		for (let a of e) {
+			switch (d && r.includes(a) ? i[a] : a) {
+				default:
+				case "bottom":
+				case "block-end":
+					b = {
+						position: a,
+						left: c - v,
+						top: s + l,
+						fits: t <= p && v <= m && v <= h
+					};
+					break;
+				case "top":
+				case "block-start":
+					b = {
+						position: a,
+						left: c - v,
+						top: s - t,
+						fits: t <= f && v <= m && v <= h
+					};
+					break;
+				case "right":
+				case "inline-end":
+					b = {
+						position: a,
+						left: c + u,
+						top: s - y,
+						fits: n <= h && y <= f && y <= p
+					};
+					break;
+				case "left":
+				case "inline-start":
+					b = {
+						position: a,
+						left: c - n,
+						top: s - y,
+						fits: n <= m && y <= f && y <= p
+					};
+					break;
+				case "top span-left":
+				case "block-start span-inline-start":
+					b = {
+						position: a,
+						left: c - g,
+						top: s - t,
+						fits: t <= f && g <= m
+					};
+					break;
+				case "top span-right":
+				case "block-start span-inline-end":
+					b = {
+						position: a,
+						left: c,
+						top: s - t,
+						fits: t <= f && g <= h
+					};
+					break;
+				case "bottom span-left":
+				case "block-end span-inline-start":
+					b = {
+						position: a,
+						left: c - g,
+						top: s + l,
+						fits: t <= p && g <= m
+					};
+					break;
+				case "bottom span-right":
+				case "block-end span-inline-end":
+					b = {
+						position: a,
+						left: c,
+						top: s + l,
+						fits: t <= p && g <= h
+					};
+					break;
+				case "left span-top":
+				case "inline-start span-block-start":
+					b = {
+						position: a,
+						left: c - n,
+						top: s + l - t,
+						fits: n <= m && _ <= f
+					};
+					break;
+				case "left span-bottom":
+				case "inline-start span-block-end":
+					b = {
+						position: a,
+						left: c - n,
+						top: s,
+						fits: n <= m && _ <= p
+					};
+					break;
+				case "right span-top":
+				case "inline-end span-block-start":
+					b = {
+						position: a,
+						left: c + u,
+						top: s + l - t,
+						fits: n <= h && _ <= f
+					};
+					break;
+				case "right span-bottom":
+				case "inline-end span-block-end":
+					b = {
+						position: a,
+						left: c + u,
+						top: s,
+						fits: n <= h && _ <= p
+					};
+					break;
+			}
+			if (b.fits) return b;
+			x ??= b;
+		}
+		return x;
+	}
+	_applyOverlayPosition(e, t, n) {
+		this._lastPosition = e, this._overlay.style.left = `${t}px`, this._overlay.style.top = `${n}px`;
+	}
+	_readPositionsFromCss() {
+		this._usePolyfill && (this._overlayStyles ??= getComputedStyle(this._overlay), this._positions = [this._overlayStyles.getPropertyValue("--sbb-overlay-position-area") || "block-end", ...this._overlayStyles.getPropertyValue("--sbb-overlay-position-try-fallbacks").split(",").map((e) => e.trim()).filter((e) => !!e)], this._lastPosition && !this._positions.includes(this._lastPosition) && (this._lastPosition = void 0));
+	}
+};
+//#endregion
+export { o as SbbOverlayPositionController };

package/core/controllers/property-watcher-controller.js

@@ -0,0 +1,56 @@
+import { isServer as e } from "lit";
+//#region src/elements/core/controllers/property-watcher-controller.ts
+var t = class {
+	get size() {
+		return this._handlers.size;
+	}
+	constructor(t, n) {
+		this._host = t, this._property = n, this._handlers = /* @__PURE__ */ new Set(), this._hostDefinedPromise = null, e || (customElements.get(this._host.localName) ? customElements.upgrade(this._host) : this._hostDefinedPromise = customElements.whenDefined(this._host.localName).then(() => {
+			customElements.upgrade(this._host), this._hostDefinedPromise = null;
+		})), this._value = this._host[this._property];
+	}
+	addHandler(e) {
+		this._handlers.size || (this._host.addController ? this._host.addController(this) : this._hostDefinedPromise && this._hostDefinedPromise.then(() => this._host.addController(this))), this._handlers.add(e), this._hostDefinedPromise ? this._hostDefinedPromise.then(() => e(this._host)) : e(this._host);
+	}
+	removeHandler(e) {
+		this._handlers.delete(e), this._handlers.size || (this._host.removeController ? this._host.removeController(this) : this._hostDefinedPromise && this._hostDefinedPromise.then(() => this._host.removeController(this)));
+	}
+	hostUpdate() {
+		let e = this._host[this._property];
+		if (this._value !== e) {
+			this._value = e;
+			for (let e of this._handlers) e(this._host);
+		}
+	}
+}, n = /* @__PURE__ */ new WeakMap(), r = class {
+	constructor(e, t, n) {
+		this._host = e, this._referenceResolver = t, this._handlers = n, this._host.addController(this);
+	}
+	hostConnected() {
+		this.connect();
+	}
+	hostDisconnected() {
+		this._reference !== this._referenceResolver() && this.disconnect();
+	}
+	connect() {
+		let e = this._referenceResolver();
+		if (this._reference === e || (this.disconnect(), this._reference = e, !this._reference)) return;
+		let r = n.get(this._reference);
+		r || (r = /* @__PURE__ */ new Map(), n.set(this._reference, r)), this._watchers = r;
+		for (let [e, n] of Object.entries(this._handlers)) {
+			let r = this._watchers.get(e);
+			r || (r = new t(this._reference, e), this._watchers.set(e, r)), r.addHandler(n);
+		}
+	}
+	disconnect() {
+		if (this._reference) {
+			for (let [e, t] of Object.entries(this._handlers)) {
+				let r = this._watchers?.get(e);
+				r && (r.removeHandler(t), r.size || (this._watchers.delete(e), !this._watchers.size && this._reference && n.delete(this._reference)));
+			}
+			this._reference = null;
+		}
+	}
+};
+//#endregion
+export { r as SbbPropertyWatcherController };

package/core/controllers/slot-state-controller.js

@@ -0,0 +1,35 @@
+import { isServer as e } from "lit";
+//#region src/elements/core/controllers/slot-state-controller.ts
+var t = class extends Event {
+	constructor(e) {
+		super("slottedchange", { composed: !0 }), this.slot = e;
+	}
+}, n = class {
+	constructor(t, n) {
+		this._host = t, this._internals = n, this._textObserver = !e && new MutationObserver(() => {
+			let e = this._host.shadowRoot.querySelector("slot:not([name])");
+			e ? this._updateSlottedState(e) : this._textObserver.disconnect();
+		}), this.hostConnected = () => {
+			this._host.shadowRoot?.addEventListener("slotchange", (e) => this._slotchangeHandler(e, e.target)), this._host.shadowRoot?.addEventListener("slottedchange", (e) => this._slotchangeHandler(e, e.slot), { capture: !0 }), this._internals.shadowRoot?.querySelectorAll("slot").forEach((e) => this._handleSlotChange(e)), this.hostConnected = void 0;
+		}, this._host.addController(this);
+	}
+	_slotchangeHandler(e, t) {
+		let n = this._host.shadowRoot.contains(t) ? t : e.composedPath().find((e) => e instanceof HTMLSlotElement && this._host.shadowRoot.contains(e));
+		n && this._handleSlotChange(n);
+	}
+	_handleSlotChange(e) {
+		this._updateSlottedState(e), e.name || this._observeTextNodesInSlot(e);
+	}
+	_updateSlottedState(e) {
+		let n = e.name ? `slotted-${e.name}` : "slotted", r = this._hasSlottedContent(e);
+		r && !this._internals.states.has(n) ? (this._internals.states.add(n), this._host.dispatchEvent(new t(e))) : !r && this._internals.states.has(n) && (this._internals.states.delete(n), this._host.dispatchEvent(new t(e)));
+	}
+	_observeTextNodesInSlot(e) {
+		this._textObserver.disconnect(), e.assignedNodes().filter((e) => e.nodeType === e.TEXT_NODE).forEach((e) => this._textObserver.observe(e, { characterData: !0 }));
+	}
+	_hasSlottedContent(e) {
+		return e.name ? e.assignedElements().some((e) => !(e instanceof HTMLSlotElement) || this._hasSlottedContent(e)) : e.assignedNodes().some((e) => e instanceof HTMLSlotElement ? this._hasSlottedContent(e) : e.nodeType !== e.TEXT_NODE || !!e.textContent?.trim());
+	}
+};
+//#endregion
+export { n as SbbSlotStateController, t as SbbSlottedChangeEvent };

package/core/controllers.js

@@ -0,0 +1,9 @@
+import { SbbPropertyWatcherController as e } from "./controllers/property-watcher-controller.js";
+import { SbbEscapableOverlayController as t } from "./controllers/escapable-overlay-controller.js";
+import { SbbIdReferenceController as n } from "./controllers/id-reference-controller.js";
+import { SbbInertController as r } from "./controllers/inert-controller.js";
+import { SbbLanguageController as i } from "./controllers/language-controller.js";
+import { SbbDarkModeController as a, SbbMediaMatcherController as o, SbbMediaQueryBreakpointLargeAndAbove as s, SbbMediaQueryBreakpointLargeAndBelow as c, SbbMediaQueryBreakpointSmallAndAbove as l, SbbMediaQueryBreakpointSmallAndBelow as u, SbbMediaQueryBreakpointUltraAndAbove as d, SbbMediaQueryBreakpointZeroAndAbove as f, SbbMediaQueryDarkMode as p, SbbMediaQueryForcedColors as m, SbbMediaQueryHover as h, SbbMediaQueryPointerCoarse as g } from "./controllers/media-matchers-controller.js";
+import { SbbSlotStateController as _, SbbSlottedChangeEvent as v } from "./controllers/slot-state-controller.js";
+import { SbbOverlayPositionController as y } from "./controllers/overlay-position-controller.js";
+export { a as SbbDarkModeController, t as SbbEscapableOverlayController, n as SbbIdReferenceController, r as SbbInertController, i as SbbLanguageController, o as SbbMediaMatcherController, s as SbbMediaQueryBreakpointLargeAndAbove, c as SbbMediaQueryBreakpointLargeAndBelow, l as SbbMediaQueryBreakpointSmallAndAbove, u as SbbMediaQueryBreakpointSmallAndBelow, d as SbbMediaQueryBreakpointUltraAndAbove, f as SbbMediaQueryBreakpointZeroAndAbove, p as SbbMediaQueryDarkMode, m as SbbMediaQueryForcedColors, h as SbbMediaQueryHover, g as SbbMediaQueryPointerCoarse, y as SbbOverlayPositionController, e as SbbPropertyWatcherController, _ as SbbSlotStateController, v as SbbSlottedChangeEvent };