@mks2508/mks-ui 0.5.2 → 0.5.7

package/dist/react-ui/ui/DataCard/index.js

@@ -5,63 +5,58 @@ import { CountingNumber } from "../../primitives/CountingNumber/index.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { Switch, SwitchThumb } from "../Switch/index.js";
 import { CornerBracket } from "../CornerBracket/index.js";
-import { dataCardStateStyles, dataCardStyles, dataCardVariants } from "./DataCard.styles.js";
+import { dataCardStyles, dataCardVariants } from "./DataCard.styles.js";
 import * as React$1 from "react";
 import { motion } from "motion/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/ui/DataCard/index.tsx
-const [DataCardProvider, useDataCard] = getStrictContext("DataCardContext");
 /**
-* DataCard — comprehensive showcase component demonstrating mks-ui patterns.
+* DataCard — glassmorphism dashboard metric card.
+*
+* Features: animated numbers, corner brackets, toggle, size/variant CVA,
+* state-based styling, slot overrides, config for animation tuning.
 *
-* Features:
-* - Slot overrides for customization
-* - State-based styling (hover, pressed, disabled)
-* - CVA variants (size, color variant)
-* - asChild composition pattern
-* - Motion/animation integration
-* - Custom render functions
-* - Form field integration
-* - Icon composition
-* - Glassmorphism effects
+* @module @mks2508/mks-ui/react/ui/DataCard
 *
 * @example
 * ```tsx
 * <DataCard variant="accent" size="default">
-*   <DataCardValue number={1234} />
-*   <DataCardToggle />
+*   <DataCardLabel title="Revenue" description="This month" />
+*   <DataCardValue number={45678} unit="$" />
 * </DataCard>
 * ```
 */
-function DataCard({ variant = "default", size = "default", disabled = false, glass = true, showBrackets = true, className, style, slots, config, children, ...props }) {
+const [DataCardProvider, useDataCard] = getStrictContext("DataCardContext");
+/**
+* Root card container with glassmorphism, corner brackets, and state tracking.
+*
+* @param props - {@link IDataCardProps}
+* @returns A motion.div card with context provider
+*/
+function DataCard({ variant = "default", size = "default", disabled = false, glass = true, showBrackets = true, className, style, slots, config, children }) {
 	const [state, setState] = React$1.useState({
 		hovered: false,
 		pressed: false,
-		disabled: disabled ?? false
+		disabled
 	});
 	const contextValue = React$1.useMemo(() => ({
 		variant,
 		size,
-		disabled: disabled ?? false,
+		disabled,
 		glass,
-		slots,
-		setState
+		config,
+		slots
 	}), [
 		variant,
 		size,
 		disabled,
 		glass,
+		config,
 		slots
 	]);
-	const computedClassName = React$1.useMemo(() => {
-		if (typeof className === "function") return className(state);
-		return className;
-	}, [className, state]);
-	const computedStyle = React$1.useMemo(() => {
-		if (typeof style === "function") return style(state);
-		return style;
-	}, [style, state]);
+	const computedClassName = typeof className === "function" ? className(state) : className;
+	const computedStyle = typeof style === "function" ? style(state) : style;
 	return /* @__PURE__ */ jsx(DataCardProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs(motion.div, {
@@ -74,29 +69,28 @@ function DataCard({ variant = "default", size = "default", disabled = false, gla
 				variant,
 				size,
 				glass
-			}), slots?.root, computedClassName, state.hovered && dataCardStateStyles.hovered, state.pressed && dataCardStateStyles.pressed, disabled && dataCardStateStyles.disabled),
+			}), disabled && "opacity-50 pointer-events-none", slots?.root, computedClassName),
 			style: computedStyle,
-			onHoverStart: () => setState((prev) => ({
-				...prev,
+			onHoverStart: () => setState((p) => ({
+				...p,
 				hovered: true
 			})),
-			onHoverEnd: () => setState((prev) => ({
-				...prev,
+			onHoverEnd: () => setState((p) => ({
+				...p,
 				hovered: false
 			})),
-			onTapStart: () => setState((prev) => ({
-				...prev,
+			onTapStart: () => setState((p) => ({
+				...p,
 				pressed: true
 			})),
-			onTap: () => setState((prev) => ({
-				...prev,
+			onTap: () => setState((p) => ({
+				...p,
 				pressed: false
 			})),
-			onTapCancel: () => setState((prev) => ({
-				...prev,
+			onTapCancel: () => setState((p) => ({
+				...p,
 				pressed: false
 			})),
-			...props,
 			children: [showBrackets && /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(DataCardBracket, {
 					position: "tl",
@@ -119,22 +113,19 @@ function DataCard({ variant = "default", size = "default", disabled = false, gla
 	});
 }
 /**
-* DataCardValue — displays animated number with CountingNumber.
+* Animated number display with optional label and unit.
 *
-* @example
-* ```tsx
-* <DataCardValue
-*   number={1234}
-*   label="Active Users"
-*   unit="users"
-* />
-* ```
+* @param props - {@link IDataCardValueProps}
+* @returns Animated number with CountingNumber primitive
 */
 function DataCardValue({ number, label, unit, decimalPlaces = 0, padStart = false }) {
-	const { variant, size } = useDataCard();
+	const { size, config, slots } = useDataCard();
+	const stiffness = config?.counterStiffness ?? 90;
+	const damping = config?.counterDamping ?? 10;
+	const sizeClass = size === "compact" ? "text-3xl font-bold" : size === "spacious" ? "text-5xl font-bold" : "text-4xl font-bold";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-card-value",
-		className: cn(dataCardStyles.value),
+		className: cn(dataCardStyles.value, slots?.value),
 		children: [
 			label && /* @__PURE__ */ jsx("span", {
 				className: "text-muted-foreground text-xs uppercase tracking-wider font-mono",
@@ -145,10 +136,10 @@ function DataCardValue({ number, label, unit, decimalPlaces = 0, padStart = fals
 				decimalPlaces,
 				padStart,
 				transition: {
-					stiffness: variant === "accent" ? 150 : 90,
-					damping: variant === "accent" ? 20 : 10
+					stiffness,
+					damping
 				},
-				className: size === "compact" ? "text-3xl font-bold" : size === "spacious" ? "text-5xl font-bold" : "text-4xl font-bold"
+				className: sizeClass
 			}),
 			unit && /* @__PURE__ */ jsx("span", {
 				className: "text-muted-foreground text-lg ml-1",
@@ -158,15 +149,10 @@ function DataCardValue({ number, label, unit, decimalPlaces = 0, padStart = fals
 	});
 }
 /**
-* DataCardLabel — displays title and description.
+* Title + description label.
 *
-* @example
-* ```tsx
-* <DataCardLabel
-*   title="Revenue"
-*   description="This month"
-* />
-* ```
+* @param props - {@link IDataCardLabelProps}
+* @returns Title and optional description text
 */
 function DataCardLabel({ title, description, className, ...props }) {
 	const { slots } = useDataCard();
@@ -184,60 +170,36 @@ function DataCardLabel({ title, description, className, ...props }) {
 	});
 }
 /**
-* DataCardToggle — interactive switch element.
+* Switch toggle control inside a DataCard.
 *
-* Uses asChild pattern for composition with Switch component.
-*
-* @example
-* ```tsx
-* <DataCardToggle
-*   checked={enabled}
-*   onCheckedChange={setEnabled}
-*   label="Enable notifications"
-*   checkedIcon={<BellIcon />}
-*   uncheckedIcon={<BellOffIcon />}
-* />
-* ```
+* @param props - {@link IDataCardToggleProps}
+* @returns Label + Switch toggle
 */
-function DataCardToggle({ checked, onCheckedChange, checkedIcon, uncheckedIcon, label }) {
-	const { disabled, variant, size, glass, slots } = useDataCard();
+function DataCardToggle({ checked, onCheckedChange, label }) {
+	const { disabled, slots } = useDataCard();
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-card-toggle",
 		className: cn(dataCardStyles.toggle, slots?.toggle),
 		children: [label && /* @__PURE__ */ jsx("span", {
 			className: "text-sm text-muted-foreground",
 			children: label
-		}), /* @__PURE__ */ jsxs(Switch, {
+		}), /* @__PURE__ */ jsx(Switch, {
 			checked,
 			onCheckedChange,
 			disabled,
-			children: [
-				/* @__PURE__ */ jsx(SwitchThumb, {}),
-				checkedIcon && /* @__PURE__ */ jsx("div", {
-					className: "text-primary",
-					children: checkedIcon
-				}),
-				!checkedIcon && /* @__PURE__ */ jsx("div", {
-					className: "text-muted-foreground",
-					children: uncheckedIcon
-				})
-			]
+			nativeButton: true,
+			children: /* @__PURE__ */ jsx(SwitchThumb, {})
 		})]
 	});
 }
 /**
-* DataCardActions — container for action buttons.
+* Action button container.
 *
-* @example
-* ```tsx
-* <DataCardActions align="end">
-*   <Button size="sm">Edit</Button>
-*   <Button size="sm" variant="ghost">Delete</Button>
-* </DataCardActions>
-* ```
+* @param props - {@link IDataCardActionsProps}
+* @returns Flex container for action buttons
 */
 function DataCardActions({ align = "end", className, children, ...props }) {
-	const { variant, size, glass, slots } = useDataCard();
+	const { slots } = useDataCard();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "data-card-actions",
 		"data-align": align,
@@ -247,28 +209,24 @@ function DataCardActions({ align = "end", className, children, ...props }) {
 	});
 }
 /**
-* DataCardBracket — decorative corner bracket.
+* Decorative corner bracket. Rendered directly via CornerBracket
+* (no wrapper div — the SVG positions itself via absolute positioning).
 *
-* Wraps CornerBracket with motion animations.
-*
-* @example
-* ```tsx
-* <DataCardBracket position="tl" variant="accent" />
-* ```
+* @param props - {@link IDataCardBracketProps}
+* @returns CornerBracket SVG at the specified corner
 */
-function DataCardBracket({ position, variant = "default", className }) {
-	const { size, glass, slots } = useDataCard();
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(dataCardStyles.bracket, slots?.bracket, className),
-		children: /* @__PURE__ */ jsx(CornerBracket, {
-			position,
-			variant,
-			size: {
-				compact: 16,
-				default: 20,
-				spacious: 24
-			}[size ?? "default"]
-		})
+function DataCardBracket({ position, variant = "default" }) {
+	const { size, config } = useDataCard();
+	const animate = config?.animateBrackets ?? true;
+	return /* @__PURE__ */ jsx(CornerBracket, {
+		position,
+		variant,
+		size: {
+			compact: 16,
+			default: 20,
+			spacious: 24
+		}[size ?? "default"],
+		className: cn(animate && "opacity-60 group-hover/data-card:opacity-100 transition-opacity", !animate && "opacity-50")
 	});
 }
 

package/dist/react-ui/ui/DynamicToggle/DynamicToggle-DOR3Ld-k.css

@@ -0,0 +1,376 @@
+/**
+ * DynamicToggle — CSS state transitions.
+ *
+ * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
+ * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
+ *
+ * @import '@mks2508/mks-ui/dist/react-ui/ui/DynamicToggle/DynamicToggle.css';
+ */
+
+/* ── Variables ── */
+[data-slot="dt-root"] {
+  --dt-dur: 0.22s;
+  --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --dt-fade: 0.45;
+  --dt-indicator-dur: 0.3s;
+  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Track: explicit row prevents h-full items from overflowing container ── */
+[data-slot="dt-root"] [data-slot="dt-track"] {
+  grid-template-rows: minmax(0, 1fr);
+}
+
+/* ── Top-level option spans 2 grid cols ── */
+[data-slot="dt-root"] [data-slot="dt-track"] > label {
+  grid-column: span 2;
+}
+
+/* ── Primary option text ── */
+[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
+  color: var(--accent-foreground);
+  z-index: 2;
+}
+[data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
+  color: var(--foreground);
+  opacity: var(--dt-fade);
+}
+
+/* ── Group: container queries ── */
+[data-slot="dt-root"] [data-slot="dt-group"] {
+  container-type: size;
+  overflow: hidden;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * INDICATOR POSITIONING
+ *
+ * Modern: CSS Anchor Positioning — indicator follows active option
+ * Fallback: translate-based positioning for older browsers
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── Anchor-based indicator (requires full anchor API) ── */
+@supports (anchor-scope: all) {
+  /* Scope anchors per toggle instance */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) {
+    anchor-scope: --dt-active;
+  }
+
+  /* Active option becomes the anchor via native :checked */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-track"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+
+  /* Single unified indicator: morphs from full-width to half-width */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-indicator"] {
+    position-anchor: --dt-active;
+    top: anchor(top);
+    right: anchor(right);
+    bottom: anchor(bottom);
+    left: anchor(left);
+    translate: none;
+    width: auto;
+    transition:
+      top var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease),
+      bottom var(--dt-indicator-dur) var(--dt-indicator-ease),
+      left var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+
+  /* Hide the group indicator — unified indicator handles everything */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Inset-based fallback (older browsers) — same morph as anchor but hardcoded ── */
+@supports not (anchor-scope: all) {
+  /* Unified indicator: left/right transition morphs width + position */
+  [data-slot="dt-root"] [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 0;
+    width: auto;
+    translate: none;
+    transition:
+      left var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+  /* Top-level checked: indicator covers left half */
+  [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+    left: 0;
+    right: 50%;
+  }
+  /* Group option 1 checked: indicator at 3rd quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 25%;
+  }
+  /* Group option 2 checked: indicator at 4th quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+    left: 75%;
+    right: 0;
+  }
+  /* Hide group indicator — unified indicator handles everything */
+  [data-slot="dt-root"] [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Force inset mode via data-indicator="translate" (works regardless of @supports) ── */
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 0;
+  width: auto;
+  translate: none;
+  transition:
+    left var(--dt-indicator-dur) var(--dt-indicator-ease),
+    right var(--dt-indicator-dur) var(--dt-indicator-ease);
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  left: 0;
+  right: 50%;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 25%;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+  left: 75%;
+  right: 0;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-group-indicator"] {
+  display: none;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * GROUP COLLAPSED STATE
+ *
+ * ::before = title text (via data-label attr)
+ * ::after  = combined opts text (via data-opts attr)
+ * <label>s = controlled by data-collapsed mode
+ *
+ * 3 modes: title | opts | title-opts (default)
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── ::before — group title ── */
+[data-slot="dt-group"]::before {
+  content: attr(data-label);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -80%;
+  color: var(--foreground);
+  font-size: inherit;
+  font-weight: 500;
+  z-index: 2;
+  white-space: nowrap;
+  pointer-events: none;
+  transition:
+    scale var(--dt-dur) var(--dt-ease),
+    translate var(--dt-dur) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease);
+}
+
+/* ── ::after — combined opts text ── */
+[data-slot="dt-group"]::after {
+  content: attr(data-opts);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% 20%;
+  color: var(--muted-foreground);
+  font-size: 0.85em;
+  opacity: 0.6;
+  z-index: 2;
+  white-space: nowrap;
+  pointer-events: none;
+  transition: opacity var(--dt-dur) var(--dt-ease);
+}
+[data-slot="dt-group"]:not([data-opts])::after {
+  content: none;
+}
+
+/* ── Group labels — transition props ── */
+[data-slot="dt-root"] [data-slot="dt-group"] label {
+  color: var(--muted-foreground);
+  cursor: pointer;
+  z-index: 2;
+  transition:
+    color var(--dt-dur) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease),
+    translate var(--dt-dur) var(--dt-ease);
+}
+[data-slot="dt-root"] [data-slot="dt-group"] label span {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--dt-radius, 9999px);
+  transition: scale var(--dt-dur) var(--dt-ease);
+}
+
+/* ── Collapsed mode: "title" — only ::before, labels slide+scale out ── */
+[data-slot="dt-group"][data-collapsed="title"]::before {
+  translate: -50% -50%;
+}
+[data-slot="dt-group"][data-collapsed="title"]::after {
+  display: none;
+}
+[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label span {
+  scale: 0.5;
+}
+
+/* ── Collapsed mode: "opts" — only ::after, labels slide+scale out ── */
+[data-slot="dt-group"][data-collapsed="opts"]::before {
+  display: none;
+}
+[data-slot="dt-group"][data-collapsed="opts"]::after {
+  translate: -50% -50%;
+  font-size: inherit;
+  opacity: 0.7;
+}
+[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label span {
+  scale: 0.5;
+}
+
+/* ── Collapsed mode: "title-opts" — WIP: disabled, falls back to "title" behavior ── */
+/* TODO: title-opts needs a redesign — title (::before) and scaled labels overlap
+   at all container sizes. The codepen original morph relied on specific dimensions
+   that don't translate to the component's size variants. Needs a different approach
+   (e.g., crossfade, flex layout, or JS-measured positions). */
+[data-slot="dt-group"][data-collapsed="title-opts"]::after {
+  content: none;
+}
+[data-slot="dt-group"][data-collapsed="title-opts"]::before {
+  translate: -50% -50%;
+}
+[data-slot="dt-group"][data-collapsed="title-opts"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+
+/* ── When group expanded ── */
+[data-slot="dt-group"]:has(input:checked)::before {
+  translate: -50% -250%;
+  scale: 0.85;
+}
+[data-slot="dt-group"]:has(input:checked)::after {
+  opacity: 0;
+}
+[data-slot="dt-group"]:has(input:checked) label {
+  opacity: 0.75;
+  color: var(--muted-foreground);
+  translate: 0 0;
+}
+[data-slot="dt-group"]:has(input:checked) label span {
+  scale: 1;
+}
+[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),
+[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2) {
+  color: var(--foreground);
+  opacity: 1;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * GROUP LABEL (above/below the pill)
+ *
+ * Replaces the old "bubble" element. Positioned via CSS grid.
+ * In filter/path morph modes, rendered inside GooeyCanvas.
+ * In none mode, simple CSS-driven show/hide.
+ * ══════════════════════════════════════════════════════════ */
+
+[data-slot="dt-group-label"] {
+  display: grid;
+  grid-template-rows: 0fr;
+  left: 20%;
+  right: 20%;
+  transition:
+    grid-template-rows calc(var(--dt-dur) * 1.5) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease);
+  opacity: 0;
+  background: var(--card);
+  border: 1px solid var(--border);
+  z-index: 3;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+[data-slot="dt-group-label"] > span {
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.75em;
+  height: calc(var(--dt-h, 38px) * 0.4);
+  box-sizing: border-box;
+}
+
+/* Top position */
+[data-slot="dt-group-label"][data-position="top"] {
+  bottom: 100%;
+  border-radius: calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2) 0 0;
+  border-bottom: none;
+  margin-bottom: -1px;
+}
+
+/* Bottom position */
+[data-slot="dt-group-label"][data-position="bottom"] {
+  top: 100%;
+  border-radius: 0 0 calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2);
+  border-top: none;
+  margin-top: -1px;
+}
+
+/* When group active → group label grows */
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] > span {
+  padding: 0.35em 0.75em;
+}
+
+/* ── Filter morph mode ── */
+[data-slot="dt-root"][data-morph="filter"] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  overflow: visible;
+}
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group-label"] {
+  border: none;
+}
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-track"] {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Filter morph: ::before hides on expand, gooey canvas handles junction ── */
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group"]:has(input:checked)::before {
+  opacity: 0;
+  translate: -50% -80%;
+  scale: 1;
+}
+
+/* ── Path morph mode ── */
+[data-slot="dt-root"][data-morph="path"] {
+  background: transparent;
+  border-color: transparent;
+}
+[data-slot="dt-root"][data-morph="path"] [data-slot="dt-track"] {
+  position: relative;
+  z-index: 1;
+}