@plitzi/sdk-style 0.37.8 → 0.37.10

package/dist/components/StyleInspector/categories/Others/Others.mjs

@@ -6,108 +6,99 @@ import i from "./OthersForm.mjs";
 import a from "./OthersInteraction.mjs";
 import o from "./OthersOutline.mjs";
 import s from "./OthersScrollbar.mjs";
-import c from "./OthersSvg.mjs";
-import l from "./OthersTable.mjs";
-import { memo as u, use as d, useCallback as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import c from "./OthersScrollSnap.mjs";
+import l from "./OthersSvg.mjs";
+import u from "./OthersTable.mjs";
+import { memo as d, use as f, useCallback as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Others/Others.tsx
-var h = [
-	"pointer-events",
-	"user-select",
+var g = /* @__PURE__ */ "pointer-events.user-select.touch-action.resize.appearance.scroll-behavior.overscroll-behavior.scroll-snap-type.scroll-snap-align.scroll-snap-stop.scroll-padding-top.scroll-margin-top.accent-color.caret-color.color-scheme.scrollbar-width.scrollbar-color.outline-width.outline-style.outline-color.outline-offset.border-collapse.border-spacing.table-layout.fill.stroke.stroke-width".split("."), _ = [
 	"touch-action",
 	"resize",
 	"appearance",
 	"scroll-behavior",
 	"overscroll-behavior",
+	"scroll-snap-type",
+	"scroll-snap-align",
+	"scroll-snap-stop",
+	"scroll-padding-top",
+	"scroll-margin-top",
 	"accent-color",
 	"caret-color",
 	"color-scheme",
 	"scrollbar-width",
 	"scrollbar-color",
-	"outline-width",
-	"outline-style",
-	"outline-color",
-	"outline-offset",
 	"border-collapse",
 	"border-spacing",
 	"table-layout",
 	"fill",
 	"stroke",
 	"stroke-width"
-], g = [
-	"touch-action",
-	"resize",
-	"appearance",
-	"scroll-behavior",
-	"overscroll-behavior",
-	"accent-color",
-	"caret-color",
-	"color-scheme",
-	"scrollbar-width",
-	"scrollbar-color",
-	"border-collapse",
-	"border-spacing",
-	"table-layout",
-	"fill",
-	"stroke",
-	"stroke-width"
-], _ = u(({ replaceTokens: u = !1, isCollapsed: _ = !0, onCollapse: v }) => {
-	let { setValue: y } = d(e), { "pointer-events": b, "user-select": x, "touch-action": S, resize: C, appearance: w, "scroll-behavior": T, "overscroll-behavior": E, "accent-color": D, "caret-color": O, "color-scheme": k, "scrollbar-width": A, "scrollbar-color": j, "outline-width": M, "outline-style": N, "outline-color": P, "outline-offset": F, "border-collapse": I, "border-spacing": L, "table-layout": R, fill: z, stroke: B, "stroke-width": V } = t({
-		keys: h,
+], v = d(({ replaceTokens: d = !1, isCollapsed: v = !0, onCollapse: y }) => {
+	let { setValue: b } = f(e), { "pointer-events": x, "user-select": S, "touch-action": C, resize: w, appearance: T, "scroll-behavior": E, "overscroll-behavior": D, "scroll-snap-type": O, "scroll-snap-align": k, "scroll-snap-stop": A, "scroll-padding-top": j, "scroll-margin-top": M, "accent-color": N, "caret-color": P, "color-scheme": F, "scrollbar-width": I, "scrollbar-color": L, "outline-width": R, "outline-style": z, "outline-color": B, "outline-offset": V, "border-collapse": H, "border-spacing": U, "table-layout": W, fill: G, stroke: K, "stroke-width": q } = t({
+		keys: g,
 		asValue: !0,
-		replaceTokens: u
-	}), H = f((e) => v?.("others", e), [v]), U = f((e) => (t) => y(e, t), [y]);
-	return /* @__PURE__ */ m(r, {
+		replaceTokens: d
+	}), J = p((e) => y?.("others", e), [y]), Y = p((e) => (t) => b(e, t), [b]);
+	return /* @__PURE__ */ h(r, {
 		title: "Others",
-		dotKeys: h,
-		advancedKeys: g,
-		isCollapsed: _,
-		onCollapse: H,
+		dotKeys: g,
+		advancedKeys: _,
+		isCollapsed: v,
+		onCollapse: J,
 		children: [
-			/* @__PURE__ */ p(a, {
-				pointerEvents: b,
-				userSelect: x,
-				touchAction: S,
-				resize: C,
-				appearance: w,
-				scrollBehavior: T,
-				overscrollBehavior: E,
-				onChange: U
+			/* @__PURE__ */ m(a, {
+				pointerEvents: x,
+				userSelect: S,
+				touchAction: C,
+				resize: w,
+				appearance: T,
+				scrollBehavior: E,
+				overscrollBehavior: D,
+				onChange: Y
 			}),
-			/* @__PURE__ */ p(o, {
-				outlineWidth: M,
-				outlineStyle: N,
-				outlineColor: P,
-				outlineOffset: F,
-				onChange: U
+			/* @__PURE__ */ m(o, {
+				outlineWidth: R,
+				outlineStyle: z,
+				outlineColor: B,
+				outlineOffset: V,
+				onChange: Y
 			}),
-			/* @__PURE__ */ m(n, { children: [
-				/* @__PURE__ */ p(s, {
-					scrollbarWidth: A,
-					scrollbarColor: j,
-					onChange: U
+			/* @__PURE__ */ h(n, { children: [
+				/* @__PURE__ */ m(s, {
+					scrollbarWidth: I,
+					scrollbarColor: L,
+					onChange: Y
+				}),
+				/* @__PURE__ */ m(c, {
+					scrollSnapType: O,
+					scrollSnapAlign: k,
+					scrollSnapStop: A,
+					scrollPaddingTop: j,
+					scrollMarginTop: M,
+					onChange: Y
 				}),
-				/* @__PURE__ */ p(i, {
-					accentColor: D,
-					caretColor: O,
-					colorScheme: k,
-					onChange: U
+				/* @__PURE__ */ m(i, {
+					accentColor: N,
+					caretColor: P,
+					colorScheme: F,
+					onChange: Y
 				}),
-				/* @__PURE__ */ p(l, {
-					borderCollapse: I,
-					borderSpacing: L,
-					tableLayout: R,
-					onChange: U
+				/* @__PURE__ */ m(u, {
+					borderCollapse: H,
+					borderSpacing: U,
+					tableLayout: W,
+					onChange: Y
 				}),
-				/* @__PURE__ */ p(c, {
-					fill: z,
-					stroke: B,
-					strokeWidth: V,
-					onChange: U
+				/* @__PURE__ */ m(l, {
+					fill: G,
+					stroke: K,
+					strokeWidth: q,
+					onChange: Y
 				})
 			] })
 		]
 	});
 });
 //#endregion
-export { _ as default };
+export { v as default };

package/dist/components/StyleInspector/categories/Others/OthersScrollSnap.d.ts

@@ -0,0 +1,16 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type OthersScrollSnapProps = {
+    scrollSnapType?: StyleValue;
+    scrollSnapAlign?: StyleValue;
+    scrollSnapStop?: StyleValue;
+    scrollPaddingTop?: StyleValue;
+    scrollMarginTop?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+/**
+ * Where scrolling comes to rest. On the box that scrolls, the axis it snaps on; on each child, where it lines up — a row
+ * of cards that stops on a card, a carousel that stops on a slide. And for a page with a fixed header, the room an
+ * anchor lands with (`scroll-padding-top` on the page, `scroll-margin-top` on the section).
+ */
+declare const OthersScrollSnap: ({ scrollSnapType, scrollSnapAlign, scrollSnapStop, scrollPaddingTop, scrollMarginTop, onChange }: OthersScrollSnapProps) => import('react').JSX.Element;
+export default OthersScrollSnap;

package/dist/components/StyleInspector/categories/Others/OthersScrollSnap.mjs

@@ -0,0 +1,93 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Others/OthersScrollSnap.tsx
+var i = ({ scrollSnapType: i, scrollSnapAlign: a, scrollSnapStop: o, scrollPaddingTop: s, scrollMarginTop: c, onChange: l }) => /* @__PURE__ */ r(t, {
+	label: "Scroll snap",
+	children: [
+		/* @__PURE__ */ r(e, {
+			keys: ["scroll-snap-type"],
+			label: "Snap",
+			value: i,
+			onChange: l?.("scroll-snap-type"),
+			type: "select",
+			children: [
+				/* @__PURE__ */ n("option", {
+					value: "none",
+					children: "None"
+				}),
+				/* @__PURE__ */ n("option", {
+					value: "x mandatory",
+					children: "Across, always"
+				}),
+				/* @__PURE__ */ n("option", {
+					value: "x proximity",
+					children: "Across, when close"
+				}),
+				/* @__PURE__ */ n("option", {
+					value: "y mandatory",
+					children: "Down, always"
+				}),
+				/* @__PURE__ */ n("option", {
+					value: "y proximity",
+					children: "Down, when close"
+				})
+			]
+		}),
+		/* @__PURE__ */ r(e, {
+			keys: ["scroll-snap-align"],
+			label: "Align",
+			value: a,
+			onChange: l?.("scroll-snap-align"),
+			type: "select",
+			children: [
+				/* @__PURE__ */ n("option", {
+					value: "none",
+					children: "None"
+				}),
+				/* @__PURE__ */ n("option", {
+					value: "start",
+					children: "Start"
+				}),
+				/* @__PURE__ */ n("option", {
+					value: "center",
+					children: "Center"
+				}),
+				/* @__PURE__ */ n("option", {
+					value: "end",
+					children: "End"
+				})
+			]
+		}),
+		/* @__PURE__ */ r(e, {
+			keys: ["scroll-snap-stop"],
+			label: "Stop",
+			value: o,
+			onChange: l?.("scroll-snap-stop"),
+			type: "select",
+			children: [/* @__PURE__ */ n("option", {
+				value: "normal",
+				children: "Normal"
+			}), /* @__PURE__ */ n("option", {
+				value: "always",
+				children: "Always"
+			})]
+		}),
+		/* @__PURE__ */ n(e, {
+			keys: ["scroll-padding-top"],
+			label: "Padding top",
+			value: s,
+			onChange: l?.("scroll-padding-top"),
+			type: "input"
+		}),
+		/* @__PURE__ */ n(e, {
+			keys: ["scroll-margin-top"],
+			label: "Margin top",
+			value: c,
+			onChange: l?.("scroll-margin-top"),
+			type: "input"
+		})
+	]
+});
+//#endregion
+export { i as default };

package/dist/components/StyleInspector/categories/Typography/Typography.mjs

@@ -15,8 +15,8 @@ import f from "./TypographyStyle.mjs";
 import p from "./TypographyTextShadow.mjs";
 import m from "./TypographyTransform.mjs";
 import { memo as h, use as g, useCallback as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { primaryFamily as b } from "@plitzi/sdk-shared/style";
+import { primaryFamily as v } from "@plitzi/sdk-shared/style";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Typography/Typography.tsx
 var x = /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.text-align.font-style.text-decoration.text-decoration-thickness.text-underline-offset.letter-spacing.word-spacing.text-indent.text-transform.direction.text-shadow.white-space.text-wrap.word-break.overflow-wrap.hyphens.vertical-align.text-overflow.line-clamp.font-variant-numeric.font-feature-settings.-webkit-text-fill-color".split("."), S = [
 	"text-decoration-thickness",
@@ -38,36 +38,36 @@ var x = /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.tex
 		keys: x,
 		asValue: !0,
 		replaceTokens: h
-	}), re = _((e) => T?.("typography", e), [T]), ie = E.find((e) => e.family === b(typeof O == "string" ? O : "")), $ = _((e) => (t) => D(e, t), [D]), ae = _((e) => D(void 0, e), [D]);
-	return /* @__PURE__ */ y(a, {
+	}), re = _((e) => T?.("typography", e), [T]), ie = E.find((e) => e.family === v(typeof O == "string" ? O : "")), $ = _((e) => (t) => D(e, t), [D]), ae = _((e) => D(void 0, e), [D]);
+	return /* @__PURE__ */ b(a, {
 		title: "Typography",
 		dotKeys: x,
 		advancedKeys: S,
 		isCollapsed: w,
 		onCollapse: re,
 		children: [
-			/* @__PURE__ */ v(ee, {
+			/* @__PURE__ */ y(ee, {
 				partialValue: M,
 				onChange: $("text-align")
 			}),
-			/* @__PURE__ */ v(d, {
+			/* @__PURE__ */ y(d, {
 				partialValue: O,
 				onChange: $("font-family")
 			}),
-			/* @__PURE__ */ y(r, {
+			/* @__PURE__ */ b(r, {
 				label: "",
-				children: [/* @__PURE__ */ v(n, {
+				children: [/* @__PURE__ */ y(n, {
 					keys: ["font-weight"],
 					label: "Weight",
 					value: k,
 					onChange: $("font-weight"),
 					type: "select",
-					children: Object.keys(c).map((e) => /* @__PURE__ */ v("option", {
+					children: Object.keys(c).map((e) => /* @__PURE__ */ y("option", {
 						value: e,
 						disabled: !ie?.weights.includes(Number(e)),
 						children: c[Number(e)]
 					}, e))
-				}), /* @__PURE__ */ v(n, {
+				}), /* @__PURE__ */ y(n, {
 					keys: ["color"],
 					label: "Color",
 					type: "color",
@@ -75,15 +75,15 @@ var x = /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.tex
 					onChange: $("color")
 				})]
 			}),
-			/* @__PURE__ */ y(r, {
+			/* @__PURE__ */ b(r, {
 				label: "",
-				children: [/* @__PURE__ */ v(n, {
+				children: [/* @__PURE__ */ y(n, {
 					keys: ["font-size"],
 					label: "Size",
 					value: A,
 					onChange: $("font-size"),
 					type: "metric"
-				}), /* @__PURE__ */ v(n, {
+				}), /* @__PURE__ */ y(n, {
 					keys: ["line-height"],
 					label: "Line Height",
 					value: K,
@@ -91,32 +91,32 @@ var x = /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.tex
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ v(f, {
+			/* @__PURE__ */ y(f, {
 				fontStyle: j,
 				textDecoration: N,
 				textDecorationThickness: P,
 				textUnderlineOffset: te,
 				onChange: $
 			}),
-			/* @__PURE__ */ y(r, {
+			/* @__PURE__ */ b(r, {
 				label: "Letter",
 				keys: C,
 				children: [
-					/* @__PURE__ */ v(n, {
+					/* @__PURE__ */ y(n, {
 						keys: ["letter-spacing"],
 						label: "Spacing",
 						value: J,
 						onChange: $("letter-spacing"),
 						type: "metric"
 					}),
-					/* @__PURE__ */ v(n, {
+					/* @__PURE__ */ y(n, {
 						keys: ["word-spacing"],
 						label: "Word",
 						value: Y,
 						onChange: $("word-spacing"),
 						type: "metric"
 					}),
-					/* @__PURE__ */ v(n, {
+					/* @__PURE__ */ y(n, {
 						keys: ["text-indent"],
 						label: "Indent",
 						value: F,
@@ -125,12 +125,12 @@ var x = /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.tex
 					})
 				]
 			}),
-			/* @__PURE__ */ v(m, {
+			/* @__PURE__ */ y(m, {
 				textTransform: I,
 				direction: X,
 				onChange: $
 			}),
-			/* @__PURE__ */ v(o, {
+			/* @__PURE__ */ y(o, {
 				whiteSpace: R,
 				textWrap: z,
 				wordBreak: B,
@@ -139,45 +139,45 @@ var x = /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.tex
 				verticalAlign: U,
 				onChange: $
 			}),
-			/* @__PURE__ */ y(r, {
+			/* @__PURE__ */ b(r, {
 				label: "",
-				children: [/* @__PURE__ */ y(n, {
+				children: [/* @__PURE__ */ b(n, {
 					keys: ["text-overflow"],
 					label: "Overflow",
 					value: W,
 					onChange: $("text-overflow"),
 					type: "select",
 					children: [
-						/* @__PURE__ */ v("option", {
+						/* @__PURE__ */ y("option", {
 							value: "clip",
 							children: "Clip"
 						}),
-						/* @__PURE__ */ v("option", {
+						/* @__PURE__ */ y("option", {
 							value: "ellipsis",
 							children: "Ellipsis"
 						}),
-						/* @__PURE__ */ v("option", {
+						/* @__PURE__ */ y("option", {
 							value: "string",
 							children: "String"
 						}),
-						/* @__PURE__ */ v("option", {
+						/* @__PURE__ */ y("option", {
 							value: "initial",
 							children: "Initial"
 						}),
-						/* @__PURE__ */ v("option", {
+						/* @__PURE__ */ y("option", {
 							value: "inherit",
 							children: "Inherit"
 						})
 					]
-				}), /* @__PURE__ */ v(s, {
+				}), /* @__PURE__ */ y(s, {
 					value: G,
 					onChange: ae
 				})]
 			}),
-			/* @__PURE__ */ y(i, { children: [/* @__PURE__ */ v(p, {
+			/* @__PURE__ */ b(i, { children: [/* @__PURE__ */ y(p, {
 				value: L,
 				onChange: $("text-shadow")
-			}), /* @__PURE__ */ v(l, {
+			}), /* @__PURE__ */ y(l, {
 				fontVariantNumeric: Z,
 				fontFeatureSettings: Q,
 				textFillColor: ne,

package/dist/components/StyleInspector/categories/Typography/TypographyFont.mjs

@@ -2,23 +2,23 @@ import e from "../../components/CategoryOption/index.mjs";
 import t from "../../components/CategorySection/index.mjs";
 import n from "../../../../hooks/useSpaceFonts.mjs";
 import { useCallback as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-import { fontFamilyStack as a, primaryFamily as o } from "@plitzi/sdk-shared/style";
+import { fontFamilyStack as i, primaryFamily as a } from "@plitzi/sdk-shared/style";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Typography/TypographyFont.tsx
 var s = ({ partialValue: s, onChange: c }) => {
-	let l = n(), u = typeof s == "string" ? o(s) : "", d = r((e) => {
+	let l = n(), u = typeof s == "string" ? a(s) : "", d = r((e) => {
 		let t = l.find((t) => t.family === e);
-		c?.(t ? a(t) : e);
+		c?.(t ? i(t) : e);
 	}, [l, c]);
-	return /* @__PURE__ */ i(t, {
+	return /* @__PURE__ */ o(t, {
 		label: "F. Family",
 		keys: ["font-family"],
-		children: /* @__PURE__ */ i(e, {
+		children: /* @__PURE__ */ o(e, {
 			value: u,
 			onChange: d,
 			type: "select",
-			children: l.map((e) => /* @__PURE__ */ i("option", {
-				style: { fontFamily: a(e) },
+			children: l.map((e) => /* @__PURE__ */ o("option", {
+				style: { fontFamily: i(e) },
 				value: e.family,
 				children: e.family
 			}, e.family))

package/dist/helpers/calculateInheriting.mjs

@@ -1,5 +1,5 @@
-import { get as e, pick as t } from "@plitzi/plitzi-ui/helpers";
-import { inheritableAttributesBase as n } from "@plitzi/sdk-shared/style";
+import { inheritableAttributesBase as e } from "@plitzi/sdk-shared/style";
+import { get as t, pick as n } from "@plitzi/plitzi-ui/helpers";
 //#region src/helpers/calculateInheriting.ts
 var r = (e, t) => {
 	let n = [], r = t;
@@ -28,12 +28,12 @@ var r = (e, t) => {
 		e && e.name && !["class", "element"].includes(e.type) && (o.has(e.name) || (o.add(e.name), a.push(e)));
 	}
 	return a;
-}, a = (t, n, r, i) => {
-	let a = e(i, `${t}.defaultStyle`, void 0);
+}, a = (e, n, r, i) => {
+	let a = t(i, `${e}.defaultStyle`, void 0);
 	if (a) return a.subTypes && !n && (n = Object.keys(a.subTypes)[0]), n && a.subTypes?.[n] && (a = a.subTypes[n]), {
 		name: "defaultStyle",
-		attributes: { [r]: e(a, `style.${r}`, {}) },
-		componentType: t,
+		attributes: { [r]: t(a, `style.${r}`, {}) },
+		componentType: e,
 		isParent: !1,
 		isAncestor: !1,
 		isDefault: !0
@@ -58,21 +58,21 @@ var r = (e, t) => {
 		...c,
 		...l
 	};
-}, s = (e, t, n, r, i) => o(e.attributes, t, n, r, i), c = (e, o, c, l, u = {}, d = {}) => {
+}, s = (e, t, n, r, i) => o(e.attributes, t, n, r, i), c = (t, o, c, l, u = {}, d = {}) => {
 	let { componentSubType: f, styleSelector: p = "base", styleState: m, styleVariant: h, styleAncestor: g, includeSelf: _ = !1, skipSelectors: v = [], addSelectors: y = [] } = d, b = {
 		tree: [],
 		style: {},
 		parentStyle: {}
-	}, x = e ? r(c, e) : [], S = /* @__PURE__ */ new Set();
-	for (let t of Object.keys(l)) {
-		let n = l[t];
+	}, x = t ? r(c, t) : [], S = /* @__PURE__ */ new Set();
+	for (let e of Object.keys(l)) {
+		let n = l[e];
 		if (n) {
-			if (!e && !o) {
-				for (let e of y) {
-					let r = n[e];
+			if (!t && !o) {
+				for (let t of y) {
+					let r = n[t];
 					r && b.tree.push({
-						name: e,
-						displayMode: t,
+						name: t,
+						displayMode: e,
 						attributes: r.attributes,
 						isParent: !1,
 						isAncestor: !1
@@ -80,8 +80,8 @@ var r = (e, t) => {
 				}
 				continue;
 			}
-			if (!e && o) {
-				let e = i({
+			if (!t && o) {
+				let t = i({
 					definition: {
 						type: o,
 						styleSelectors: {},
@@ -89,9 +89,9 @@ var r = (e, t) => {
 					},
 					attributes: {}
 				}, o, n, p, y);
-				for (let n of e) v.includes(n.name) || b.tree.push({
+				for (let n of t) v.includes(n.name) || b.tree.push({
 					name: n.name,
-					displayMode: t,
+					displayMode: e,
 					attributes: n.attributes,
 					isParent: !1,
 					isAncestor: !1
@@ -99,18 +99,18 @@ var r = (e, t) => {
 				let r = a(o, f, p, u);
 				r && b.tree.push({
 					...r,
-					displayMode: t
+					displayMode: e
 				});
 				continue;
 			}
 			for (let r of x) {
-				let s = e?.definition.parentId === r.id, c = r.id !== e?.id, l = i(r, r.definition.type === o ? o : void 0, n, p, y);
+				let s = t?.definition.parentId === r.id, c = r.id !== t?.id, l = i(r, r.definition.type === o ? o : void 0, n, p, y);
 				!_ && !c && !m && !h && Object.keys(l).length && (l = l.filter((e) => e.type === "element"));
-				for (let e of l) (!v.includes(e.name) || c) && b.tree.push({
-					name: e.name,
-					displayMode: t,
-					attributes: e.attributes,
-					componentType: e.componentType,
+				for (let t of l) (!v.includes(t.name) || c) && b.tree.push({
+					name: t.name,
+					displayMode: e,
+					attributes: t.attributes,
+					componentType: t.componentType,
 					isParent: s,
 					isAncestor: c,
 					isDefault: !1
@@ -118,7 +118,7 @@ var r = (e, t) => {
 				let d = a(r.definition.type, r.attributes.subType, p, u);
 				d && !S.has(r.definition.type) && (S.add(r.definition.type), b.tree.push({
 					...d,
-					displayMode: t,
+					displayMode: e,
 					isParent: s,
 					isAncestor: !1
 				}));
@@ -126,12 +126,12 @@ var r = (e, t) => {
 		}
 	}
 	let C = {};
-	for (let e of b.tree) {
-		let r = s(e, p, m, h, g);
-		if (r && Object.keys(r).length && ((e.isAncestor || e.isDefault && e.componentType !== o) && (r = t(r, n)), Object.keys(r).length)) for (let t of Object.keys(r)) C[t] || (C[t] = []), C[t].push({
-			key: e.name,
-			value: r[t],
-			displayMode: e.displayMode
+	for (let t of b.tree) {
+		let r = s(t, p, m, h, g);
+		if (r && Object.keys(r).length && ((t.isAncestor || t.isDefault && t.componentType !== o) && (r = n(r, e)), Object.keys(r).length)) for (let e of Object.keys(r)) C[e] || (C[e] = []), C[e].push({
+			key: t.name,
+			value: r[e],
+			displayMode: t.displayMode
 		});
 	}
 	let w = b.tree.filter((e) => e.isParent).reduce((e, t) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-style",
-  "version": "0.37.8",
+  "version": "0.37.10",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -526,6 +526,10 @@
       "types": "./dist/components/StyleInspector/categories/Others/OthersOutline.d.ts",
       "import": "./dist/components/StyleInspector/categories/Others/OthersOutline.mjs"
     },
+    "./components/StyleInspector/categories/Others/OthersScrollSnap": {
+      "types": "./dist/components/StyleInspector/categories/Others/OthersScrollSnap.d.ts",
+      "import": "./dist/components/StyleInspector/categories/Others/OthersScrollSnap.mjs"
+    },
     "./components/StyleInspector/categories/Others/OthersScrollbar": {
       "types": "./dist/components/StyleInspector/categories/Others/OthersScrollbar.d.ts",
       "import": "./dist/components/StyleInspector/categories/Others/OthersScrollbar.mjs"
@@ -936,10 +940,10 @@
     "build:prod": "vite build && node ../sdk-shared/scripts/generate-exports.mjs"
   },
   "dependencies": {
-    "@plitzi/plitzi-ui": "^1.6.24",
-    "@plitzi/sdk-plugins": "0.37.8",
-    "@plitzi/sdk-shared": "0.37.8",
-    "@plitzi/sdk-variables": "0.37.8",
+    "@plitzi/plitzi-ui": "^1.6.29",
+    "@plitzi/sdk-plugins": "0.37.10",
+    "@plitzi/sdk-shared": "0.37.10",
+    "@plitzi/sdk-variables": "0.37.10",
     "clsx": "^2.1.1",
     "immer": "^11.1.18",
     "prop-types": "^15.8.1",