@feugene/granularity 0.2.0 → 0.3.1

package/dist/components/DsDataTable/chunks/DsDataTable-nK4XgT1y.js

@@ -0,0 +1,142 @@
+import { t as e } from "../../DsIcon/chunks/DsIcon-Bk6qc4Kh.js";
+import { t } from "../../DsTable/chunks/DsTable-C27_FR_h.js";
+import { t as n } from "../../../chunks/arrow-up-Dv3dC3hu.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, markRaw as p, mergeProps as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+//#region ~icons/lucide/arrow-down
+var C = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function w(e, t) {
+	return g(), s("svg", C, [...t[0] ||= [c("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M12 5v14m7-7l-7 7l-7-7"
+	}, null, -1)]]);
+}
+var T = p({
+	name: "lucide-arrow-down",
+	render: w
+}), E = { "data-ds-datatable-header": "" }, D = ["aria-sort"], O = { class: "inline-flex items-center gap-2" }, k = ["aria-label", "onClick"], A = { class: "inline-flex" }, j = {
+	key: 1,
+	class: "text-[var(--muted-fg)]"
+}, M = {
+	key: 0,
+	"data-ds-datatable-empty": ""
+}, N = ["colspan"], P = /* @__PURE__ */ f({
+	__name: "DsDataTable",
+	props: {
+		rows: {},
+		columns: {},
+		rowKey: {
+			type: [String, Function],
+			default: "id"
+		},
+		initialSortKey: { default: void 0 },
+		initialSortDir: { default: "asc" },
+		density: { default: "regular" },
+		caption: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		ariaLabelledby: { default: void 0 },
+		regionLabel: { default: void 0 }
+	},
+	setup(f) {
+		let p = f, C = _(p.initialSortKey ?? ""), w = _(p.initialSortDir), P = i(() => {
+			let e = [...p.rows];
+			if (!C.value) return e;
+			let t = C.value, n = w.value;
+			return e.sort((e, r) => {
+				let i = e[t], a = r[t], o = typeof i == "number" ? i : Number(i), s = typeof a == "number" ? a : Number(a), c = Number.isFinite(o) && Number.isFinite(s) ? o - s : String(i ?? "").localeCompare(String(a ?? ""), void 0, { sensitivity: "base" });
+				return n === "asc" ? c : -c;
+			}), e;
+		});
+		function F(e) {
+			if (e.sortable) {
+				if (C.value !== e.key) {
+					C.value = e.key, w.value = "asc";
+					return;
+				}
+				w.value = w.value === "asc" ? "desc" : "asc";
+			}
+		}
+		function I(e) {
+			return e.align === "right" ? "text-right" : e.align === "center" ? "text-center" : "text-left";
+		}
+		function L(e) {
+			let t = p.rowKey;
+			if (typeof t == "function") return t(e);
+			let n = e[t];
+			return typeof n == "string" || typeof n == "number" ? n : String(n ?? "");
+		}
+		function R(e) {
+			if (e.sortable) return C.value === e.key ? w.value === "asc" ? "ascending" : "descending" : "none";
+		}
+		function z(e) {
+			return C.value === e.key ? w.value === "asc" ? `Sorted by ${e.label} ascending, activate to sort descending` : `Sorted by ${e.label} descending, activate to sort ascending` : `Sort by ${e.label}`;
+		}
+		let B = i(() => ({
+			density: p.density,
+			caption: p.caption,
+			ariaLabel: p.ariaLabel,
+			ariaLabelledby: p.ariaLabelledby,
+			regionLabel: p.regionLabel
+		})), V = i(() => P.value.length === 0);
+		function H(e, t) {
+			return e[t];
+		}
+		return (i, p) => (g(), a(t, m(B.value, { "data-ds-datatable": "" }), l({
+			head: S(() => [c("tr", E, [(g(!0), s(r, null, v(f.columns, (t) => (g(), s("th", {
+				key: t.key,
+				class: h(["font-700 text-xs px-4 py-3", I(t)]),
+				"aria-sort": R(t),
+				scope: "col"
+			}, [c("div", O, [t.sortable ? (g(), s("button", {
+				key: 0,
+				type: "button",
+				class: "inline-flex items-center gap-2 text-[var(--muted-fg)] hover:text-[var(--fg)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] rounded",
+				"aria-label": z(t),
+				onClick: (e) => F(t)
+			}, [c("span", null, b(t.label), 1), c("span", A, [C.value === t.key && w.value === "asc" ? (g(), a(e, {
+				key: 0,
+				size: "sm",
+				"aria-hidden": "true"
+			}, {
+				default: S(() => [d(x(n))]),
+				_: 1
+			})) : C.value === t.key && w.value === "desc" ? (g(), a(e, {
+				key: 1,
+				size: "sm",
+				"aria-hidden": "true"
+			}, {
+				default: S(() => [d(x(T))]),
+				_: 1
+			})) : o("", !0)])], 8, k)) : (g(), s("span", j, b(t.label), 1))])], 10, D))), 128))])]),
+			default: S(() => [V.value ? (g(), s("tr", M, [c("td", {
+				colspan: f.columns.length,
+				class: "px-4 py-6 text-center text-[var(--muted-fg)]"
+			}, [y(i.$slots, "empty", {}, () => [p[0] ||= u("Нет данных", -1)])], 8, N)])) : (g(!0), s(r, { key: 1 }, v(P.value, (e) => (g(), s("tr", {
+				key: L(e),
+				class: "border-t border-[var(--brd)]",
+				"data-ds-datatable-row": ""
+			}, [(g(!0), s(r, null, v(f.columns, (t) => (g(), s("td", {
+				key: t.key,
+				class: h(["px-4 py-3", I(t)])
+			}, [y(i.$slots, `cell-${t.key}`, { row: e }, () => [c("span", null, b(H(e, t.key)), 1)])], 2))), 128))]))), 128))]),
+			_: 2
+		}, [i.$slots.caption ? {
+			name: "caption",
+			fn: S(() => [y(i.$slots, "caption")]),
+			key: "0"
+		} : void 0, i.$slots.foot ? {
+			name: "foot",
+			fn: S(() => [y(i.$slots, "foot")]),
+			key: "1"
+		} : void 0]), 1040));
+	}
+});
+//#endregion
+export { P as t };

package/dist/components/DsDataTable/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsDataTable-DgBkEgDK.js";
-import { n as t, t as n } from "../../chunks/config-CVEwIRRR.js";
-export { e as DsDataTable, e as default, n as dsDataTableConfig, t as dsDataTableSafelist };
+import { t as e } from "./chunks/DsDataTable-nK4XgT1y.js";
+import { t } from "../../chunks/config-Cibru2a2.js";
+export { e as DsDataTable, e as default, t as dsDataTableConfig };

package/dist/components/DsDialog/chunks/DsDialog-BH23MSq-.js

@@ -0,0 +1,169 @@
+import { t as e } from "../../../chunks/x--kxrj3ez.js";
+import { t } from "../../DsButton/chunks/DsButton-9cB_fHZt.js";
+import { a as n } from "../../../chunks/transition-BJXMi52x.js";
+import { t as r } from "../../DsModal/chunks/DsModal-B2DLXV7F.js";
+import { a as i, i as a, n as o, r as s, t as c } from "../../../chunks/dialogShared-B7Ruf0mn.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as h, createVNode as g, defineComponent as _, guardReactiveProps as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, renderSlot as C, toDisplayString as w, unref as T, useAttrs as E, useSlots as D, withCtx as O } from "vue";
+//#endregion
+//#region src/components/DsDialog/DsDialogFooter.vue
+var k = /* @__PURE__ */ _({
+	__name: "DsDialogFooter",
+	props: { config: { default: void 0 } },
+	setup(e) {
+		let t = e, n = l(() => a(t.config, o)), r = l(() => [
+			n.value.paddingX,
+			n.value.paddingY,
+			n.value.bordered ? "border-t border-[var(--brd)]" : ""
+		]);
+		return (e, t) => (S(), f("div", {
+			"data-ds-dialog-footer": "",
+			class: b(r.value)
+		}, [C(e.$slots, "default")], 2));
+	}
+}), A = /* @__PURE__ */ _({
+	inheritAttrs: !1,
+	__name: "DsDialogCloseButton",
+	emits: ["click"],
+	setup(n) {
+		let r = E(), i = l(() => r["aria-label"] ?? "Close");
+		return (n, a) => (S(), u(t, y(T(r), {
+			"data-ds-dialog-close": "",
+			variant: "ghost",
+			size: "sm",
+			square: "",
+			"aria-label": i.value,
+			onClick: a[0] ||= (e) => n.$emit("click")
+		}), {
+			default: O(() => [g(T(e), {
+				class: "h-4 w-4",
+				"aria-hidden": "true"
+			})]),
+			_: 1
+		}, 16, ["aria-label"]));
+	}
+}), j = {
+	key: 0,
+	class: "flex-1 min-w-0 flex items-center"
+}, M = {
+	key: 2,
+	class: "flex-1 min-w-0"
+}, N = /* @__PURE__ */ _({
+	__name: "DsDialogHeader",
+	props: {
+		title: { default: void 0 },
+		showCloseButton: {
+			type: Boolean,
+			default: !0
+		},
+		config: { default: void 0 },
+		closeLabel: { default: "Close" }
+	},
+	emits: ["close"],
+	setup(e) {
+		let t = e, r = D(), o = l(() => i(t.title)), c = l(() => a(t.config, s)), p = l(() => [
+			c.value.paddingX,
+			c.value.paddingY,
+			c.value.bordered ? "border-b border-[var(--brd)]" : "",
+			"flex items-center justify-between gap-4"
+		]), m = l(() => !r.default && !!o.value);
+		return (t, i) => (S(), f("div", {
+			"data-ds-dialog-header": "",
+			class: b(p.value)
+		}, [r.default ? (S(), f("div", j, [C(t.$slots, "default", { title: o.value })])) : m.value ? (S(), u(T(n), {
+			key: 1,
+			as: "div",
+			class: "flex-1 min-w-0 text-[14px] font-700"
+		}, {
+			default: O(() => [h(w(o.value), 1)]),
+			_: 1
+		})) : (S(), f("div", M)), e.showCloseButton ? (S(), u(A, {
+			key: 3,
+			"aria-label": e.closeLabel,
+			onClick: i[0] ||= (e) => t.$emit("close")
+		}, null, 8, ["aria-label"])) : d("", !0)], 2));
+	}
+}), P = { class: "sr-only" }, F = { class: "overflow-hidden rounded-[inherit]" }, I = /* @__PURE__ */ _({
+	__name: "DsDialog",
+	props: {
+		modelValue: { type: Boolean },
+		title: { default: void 0 },
+		closeOnBackdrop: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: !0
+		},
+		showHeader: {
+			type: Boolean,
+			default: !0
+		},
+		showCloseButton: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "md" },
+		headerConfig: { default: void 0 },
+		footerConfig: { default: void 0 },
+		bodyConfig: { default: void 0 },
+		closeLabel: { default: "Close" }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, o = t, s = D(), f = l(() => i(n.title)), h = l(() => {
+			let e = a(n.bodyConfig, c);
+			return [e.paddingX, e.paddingY];
+		}), g = l(() => !!f.value && (!n.showHeader || !!s.header));
+		function _() {
+			o("update:modelValue", !1);
+		}
+		return (t, n) => (S(), u(r, {
+			"model-value": e.modelValue,
+			size: e.size,
+			"close-on-backdrop": e.closeOnBackdrop,
+			"close-on-esc": e.closeOnEsc,
+			"onUpdate:modelValue": n[0] ||= (e) => o("update:modelValue", e)
+		}, m({
+			default: O(() => [p("div", F, [
+				e.showHeader ? (S(), u(N, {
+					key: 0,
+					title: f.value,
+					"show-close-button": e.showCloseButton,
+					config: e.headerConfig,
+					"close-label": e.closeLabel,
+					onClose: _
+				}, m({ _: 2 }, [s.header ? {
+					name: "default",
+					fn: O((e) => [C(t.$slots, "header", x(v(e)))]),
+					key: "0"
+				} : void 0]), 1032, [
+					"title",
+					"show-close-button",
+					"config",
+					"close-label"
+				])) : d("", !0),
+				p("div", { class: b(h.value) }, [C(t.$slots, "default")], 2),
+				s.footer ? (S(), u(k, {
+					key: 1,
+					config: e.footerConfig
+				}, {
+					default: O(() => [C(t.$slots, "footer")]),
+					_: 3
+				}, 8, ["config"])) : d("", !0)
+			])]),
+			_: 2
+		}, [g.value ? {
+			name: "title",
+			fn: O(() => [p("span", P, w(f.value), 1)]),
+			key: "0"
+		} : void 0]), 1032, [
+			"model-value",
+			"size",
+			"close-on-backdrop",
+			"close-on-esc"
+		]));
+	}
+});
+//#endregion
+export { k as i, N as n, A as r, I as t };

package/dist/components/DsDialog/index.js

@@ -1,3 +1,4 @@
-import { t as e } from "../../chunks/DsDialog-BAGAa9DN.js";
-import { t } from "../../chunks/dsDialogStyles-C7QOvzmt.js";
-export { e as DsDialog, e as default, t as dsDialogSafelist };
+import { a as e, i as t, n, r, t as i } from "../../chunks/dialogShared-B7Ruf0mn.js";
+import { i as a, n as o, r as s, t as c } from "./chunks/DsDialog-BH23MSq-.js";
+import { t as l } from "../../chunks/safelist-CQOSs_yj.js";
+export { i as DEFAULT_DS_DIALOG_BODY_CONFIG, n as DEFAULT_DS_DIALOG_FOOTER_CONFIG, r as DEFAULT_DS_DIALOG_HEADER_CONFIG, c as DsDialog, c as default, s as DsDialogCloseButton, a as DsDialogFooter, o as DsDialogHeader, l as dsDialogSafelist, t as resolveDsDialogSectionConfig, e as resolveDsDialogTitle };

package/dist/components/DsDrawer/chunks/DsDrawer-GW4JyPf_.js

@@ -0,0 +1,135 @@
+import { t as e } from "../../../chunks/x--kxrj3ez.js";
+import { t } from "../../DsButton/chunks/DsButton-9cB_fHZt.js";
+import { t as n } from "../../DsIcon/chunks/DsIcon-Bk6qc4Kh.js";
+import { a as r, n as i, o as a, r as o, t as s } from "../../../chunks/transition-BJXMi52x.js";
+import { i as c, r as l } from "../../../chunks/config-DJxFkysW.js";
+import { Teleport as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, openBlock as b, renderSlot as x, toDisplayString as S, unref as C, useId as w, withCtx as T } from "vue";
+//#region src/components/DsDrawer/DsDrawer.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "fixed inset-0" }, D = {
+	"data-ds-drawer-header": "",
+	class: "px-5 py-4 border-b border-[var(--brd)] flex items-center justify-between gap-4"
+}, O = {
+	"data-ds-drawer-body": "",
+	class: "flex-1 overflow-y-auto"
+}, k = { class: "p-5" }, A = {
+	key: 0,
+	"data-ds-drawer-footer": "",
+	class: "px-5 py-4 border-t border-[var(--brd)]"
+}, j = /* @__PURE__ */ v({
+	__name: "DsDrawer",
+	props: {
+		modelValue: { type: Boolean },
+		title: { default: void 0 },
+		closeOnBackdrop: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: !0
+		},
+		side: { default: "right" },
+		size: { default: "md" },
+		closeLabel: { default: "Close" }
+	},
+	emits: ["update:modelValue"],
+	setup(v, { emit: j }) {
+		let M = v, N = j, P = w(), F = d(() => l({
+			side: M.side,
+			size: M.size
+		})), I = d(() => c(M.side));
+		function L() {
+			N("update:modelValue", !1);
+		}
+		function R() {
+			M.closeOnBackdrop && L();
+		}
+		function z() {
+			M.closeOnBackdrop && L();
+		}
+		function B(e) {
+			e.key === "Escape" && M.closeOnEsc && (e.stopPropagation(), e.preventDefault(), L());
+		}
+		return (c, l) => (b(), f(u, { to: "body" }, [_(C(s), {
+			show: v.modelValue,
+			as: "template"
+		}, {
+			default: T(() => [_(C(a), {
+				as: "div",
+				"data-ds-drawer": "",
+				class: "fixed inset-0 z-50",
+				static: !0,
+				"aria-labelledby": C(P),
+				onClose: R,
+				onKeydown: B
+			}, {
+				default: T(() => [h("div", E, [_(C(i), {
+					as: "template",
+					enter: "duration-200 ease-out",
+					"enter-from": "opacity-0",
+					"enter-to": "opacity-100",
+					leave: "duration-150 ease-in",
+					"leave-from": "opacity-100",
+					"leave-to": "opacity-0"
+				}, {
+					default: T(() => [h("div", {
+						"data-ds-drawer-overlay": "",
+						class: "fixed inset-0 bg-black/40",
+						"aria-hidden": "true",
+						onClick: z
+					})]),
+					_: 1
+				}), _(C(i), {
+					as: "template",
+					enter: "duration-200 ease-out",
+					"enter-from": I.value,
+					"enter-to": "translate-x-0",
+					leave: "duration-150 ease-in",
+					"leave-from": "translate-x-0",
+					"leave-to": I.value
+				}, {
+					default: T(() => [_(C(o), {
+						"data-ds-drawer-panel": "",
+						tabindex: "-1",
+						class: y(["fixed inset-y-0 flex flex-col", F.value])
+					}, {
+						default: T(() => [
+							h("div", D, [_(C(r), {
+								id: C(P),
+								as: "div",
+								"data-ds-drawer-title": "",
+								class: "text-[14px] font-700 min-w-0 truncate"
+							}, {
+								default: T(() => [x(c.$slots, "title", {}, () => [g(S(v.title ?? "Drawer"), 1)])]),
+								_: 3
+							}, 8, ["id"]), _(t, {
+								variant: "ghost",
+								size: "sm",
+								square: "",
+								"aria-label": v.closeLabel,
+								onClick: L
+							}, {
+								default: T(() => [_(n, {
+									size: "sm",
+									"aria-hidden": "true"
+								}, {
+									default: T(() => [_(C(e))]),
+									_: 1
+								})]),
+								_: 1
+							}, 8, ["aria-label"])]),
+							h("div", O, [h("div", k, [x(c.$slots, "default")])]),
+							c.$slots.footer ? (b(), m("div", A, [x(c.$slots, "footer")])) : p("", !0)
+						]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				}, 8, ["enter-from", "leave-to"])])]),
+				_: 3
+			}, 8, ["aria-labelledby"])]),
+			_: 3
+		}, 8, ["show"])]));
+	}
+});
+//#endregion
+export { j as t };

package/dist/components/DsDrawer/index.js

@@ -1,3 +1,3 @@
-import { i as e, t } from "../../chunks/config-G7h6ftb62.js";
-import { t as n } from "../../chunks/DsDrawer-gmVF_0I0.js";
+import { n as e, t } from "../../chunks/config-DJxFkysW.js";
+import { t as n } from "./chunks/DsDrawer-GW4JyPf_.js";
 export { n as DsDrawer, n as default, t as dsDrawerConfig, e as dsDrawerSafelist };

package/dist/{chunks/DsDropdown-BcFjxaMe.js → components/DsDropdown/chunks/DsDropdown-DmR1NWyV.js}

@@ -1,9 +1,8 @@
-import { vClickOutside as e } from "../directives/clickOutside.js";
-import { i as t, n, t as r } from "./dsDropdownStyles-DXGN-A-d.js";
+import { a as e } from "../../../chunks/directives-K8Vo0VhP.js";
+import { i as t, n, r } from "../../../chunks/dsDropdownStyles-_XO6eeSE.js";
 import { Teleport as i, Transition as a, computed as o, createBlock as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, onUnmounted as m, openBlock as h, ref as g, renderSlot as _, unref as v, vShow as y, watch as b, withCtx as x, withDirectives as S } from "vue";
-//#endregion
-//#region src/components/DsDropdown/DsDropdown.vue
-var C = /* @__PURE__ */ d({
+//#region src/components/DsDropdown/DsDropdown.vue?vue&type=script&setup=true&lang.ts
+var C = { "data-ds-dropdown": "" }, w = /* @__PURE__ */ d({
 	__name: "DsDropdown",
 	props: {
 		align: { default: "right" },
@@ -16,74 +15,75 @@ var C = /* @__PURE__ */ d({
 		teleportTo: { default: "body" }
 	},
 	setup(d) {
-		let C = d, w = g(!1), T = g(null), E = g(null), D = [() => E.value], O = g({
+		let w = d, T = g(!1), E = g(null), D = g(null), O = [() => D.value], k = g({
 			left: "0px",
 			top: "0px",
 			zIndex: "2147483647"
-		}), k = 0;
-		function A() {
-			typeof window > "u" || (k &&= (window.cancelAnimationFrame(k), 0));
-		}
+		}), A = 0;
 		function j() {
+			typeof window > "u" || (A &&= (window.cancelAnimationFrame(A), 0));
+		}
+		function M() {
 			if (typeof window > "u") return;
-			let e = T.value;
+			let e = E.value;
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			O.value = {
-				left: `${C.align === "right" ? t.right : C.align === "center" ? t.left + t.width / 2 : t.left}px`,
+			k.value = {
+				left: `${w.align === "right" ? t.right : w.align === "center" ? t.left + t.width / 2 : t.left}px`,
 				top: `${t.bottom + 8}px`,
 				zIndex: "2147483647"
 			};
 		}
-		function M() {
-			typeof window > "u" || (k ||= window.requestAnimationFrame(() => {
-				k = 0, w.value && j();
-			}));
-		}
 		function N() {
-			typeof window > "u" || (window.addEventListener("resize", M), window.addEventListener("scroll", M, !0));
+			typeof window > "u" || (A ||= window.requestAnimationFrame(() => {
+				A = 0, T.value && M();
+			}));
 		}
 		function P() {
-			typeof window > "u" || (window.removeEventListener("resize", M), window.removeEventListener("scroll", M, !0));
+			typeof window > "u" || (window.addEventListener("resize", N), window.addEventListener("scroll", N, !0));
 		}
 		function F() {
-			w.value = !w.value;
+			typeof window > "u" || (window.removeEventListener("resize", N), window.removeEventListener("scroll", N, !0));
 		}
 		function I() {
-			w.value = !1;
+			T.value = !T.value;
+		}
+		function L() {
+			T.value = !1;
 		}
-		function L(e) {
-			e.key === "Escape" && I();
+		function R(e) {
+			e.key === "Escape" && L();
 		}
-		b(w, (e) => {
-			typeof document > "u" || (document.removeEventListener("keydown", L), P(), A(), e && document.addEventListener("keydown", L), e && (N(), j()));
-		}, { immediate: !0 }), b(() => C.align, () => {
-			w.value && M();
+		b(T, (e) => {
+			typeof document > "u" || (document.removeEventListener("keydown", R), F(), j(), e && document.addEventListener("keydown", R), e && (P(), M()));
+		}, { immediate: !0 }), b(() => w.align, () => {
+			T.value && N();
 		}), m(() => {
-			typeof document > "u" || (document.removeEventListener("keydown", L), P(), A());
+			typeof document > "u" || (document.removeEventListener("keydown", R), F(), j());
 		});
-		let R = o(() => t(C.width)), z = o(() => n(C.contentClass)), B = o(() => [
+		let z = o(() => t(w.width)), B = o(() => r(w.contentClass)), V = o(() => [
 			"fixed z-50",
-			R.value,
-			r(C.align)
+			z.value,
+			n(w.align)
 		].filter(Boolean));
-		function V() {
-			C.closeOnContentClick && I();
+		function H() {
+			w.closeOnContentClick && L();
 		}
-		return (t, n) => (h(), c("div", null, [S((h(), c("div", {
+		return (t, n) => (h(), c("div", C, [S((h(), c("div", {
 			ref_key: "rootEl",
-			ref: T,
+			ref: E,
+			"data-ds-dropdown-trigger": "",
 			class: "inline-block max-w-full",
-			onClick: F
+			onClick: I
 		}, [_(t.$slots, "trigger", {
-			open: w.value,
-			toggle: F,
-			close: I
+			open: T.value,
+			toggle: I,
+			close: L
 		})])), [[v(e), {
-			handler: I,
-			enabled: w.value,
-			exclude: D
-		}]]), (h(), s(i, { to: C.teleportTo }, [u(a, {
+			handler: L,
+			enabled: T.value,
+			exclude: O
+		}]]), (h(), s(i, { to: d.teleportTo }, [u(a, {
 			"enter-active-class": "transition ease-out duration-150",
 			"enter-from-class": "transform opacity-0 scale-95",
 			"enter-to-class": "transform opacity-100 scale-100",
@@ -93,14 +93,18 @@ var C = /* @__PURE__ */ d({
 		}, {
 			default: x(() => [S(l("div", {
 				ref_key: "panelEl",
-				ref: E,
-				class: f(B.value),
-				style: p(O.value),
-				onClick: V
-			}, [l("div", { class: f(z.value) }, [_(t.$slots, "content", { close: I })], 2)], 6), [[y, w.value]])]),
+				ref: D,
+				"data-ds-dropdown-panel": "",
+				class: f(V.value),
+				style: p(k.value),
+				onClick: H
+			}, [l("div", {
+				"data-ds-dropdown-content": "",
+				class: f(B.value)
+			}, [_(t.$slots, "content", { close: L })], 2)], 6), [[y, T.value]])]),
 			_: 3
 		})], 8, ["to"]))]));
 	}
 });
 //#endregion
-export { C as t };
+export { w as t };

package/dist/components/DsDropdown/index.js

@@ -1,4 +1,3 @@
-import { r as e } from "../../chunks/dsDropdownStyles-DXGN-A-d.js";
-import { t } from "../../chunks/DsDropdown-BcFjxaMe.js";
-import { t as n } from "../../chunks/config-BeJEy8yN.js";
-export { t as DsDropdown, t as default, n as dsDropdownConfig, e as dsDropdownSafelist };
+import { t as e } from "./chunks/DsDropdown-DmR1NWyV.js";
+import { n as t, t as n } from "../../chunks/config-DopZCwNe.js";
+export { e as DsDropdown, e as default, n as dsDropdownConfig, t as dsDropdownSafelist };