@mks2508/mks-ui 0.5.7 → 0.5.8

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts

@@ -50,6 +50,8 @@ export interface IGooeyCanvasProps {
     bubbleHeight?: number;
     /** Bubble inset from edges as fraction 0-1 (default: 0.2) */
     bubbleInset?: number;
+    /** Bubble position relative to the pill (default: 'top') */
+    bubblePosition?: 'top' | 'bottom' | 'left' | 'right';
     /** Whether the bubble is expanded */
     expanded?: boolean;
     /** Drop-shadow outline blur in px (default: 0.5) */

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gooey.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/Gooey.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}
+{"version":3,"file":"Gooey.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/Gooey.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACrD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts

@@ -2,7 +2,7 @@ import type { IGooeyCanvasProps } from './Gooey.types';
 /**
  * GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
  */
-declare function GooeyCanvas({ blur, height, width, radius, fillColor, bubbleHeight: bubbleHeightProp, bubbleInset, expanded, outlineBlur, outlineColor, outlineLayers, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className, }: IGooeyCanvasProps): import("react/jsx-runtime").JSX.Element;
+declare function GooeyCanvas({ blur, height, width, radius, fillColor, bubbleHeight: bubbleHeightProp, bubbleInset, bubblePosition, expanded, outlineBlur, outlineColor, outlineLayers, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className, }: IGooeyCanvasProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GooeyCanvas {
     var displayName: string;
 }

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GooeyCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAW,EACX,KAAW,EACX,MAAa,EACb,SAAyB,EACzB,YAAY,EAAE,gBAAgB,EAC9B,WAAiB,EACjB,QAAgB,EAChB,WAAiB,EACjB,YAA8B,EAC9B,aAAiB,EACjB,SAAS,EACT,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,2CAuKnB;kBA1LQ,WAAW;;;AA8LpB,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"GooeyCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOvD;;GAEG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAW,EACX,KAAW,EACX,MAAa,EACb,SAAyB,EACzB,YAAY,EAAE,gBAAgB,EAC9B,WAAiB,EACjB,cAAsB,EACtB,QAAgB,EAChB,WAAiB,EACjB,YAA8B,EAC9B,aAAiB,EACjB,SAAS,EACT,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,2CAwPnB;kBA5QQ,WAAW;;;AAgRpB,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.js

@@ -13,6 +13,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Uses SVG `<rect>` elements inside a filtered container. The bubble rect
 * animates via WAAPI for smooth cross-browser rendering.
 *
+* Supports four bubble positions: top (default), bottom, left, right.
+* For vertical positions (top/bottom), animates y/height.
+* For horizontal positions (left/right), animates x/width.
+*
 * Key patterns (derived from Sileo):
 * - Filter applied to canvas div, SVG content inside (not HTML children)
 * - `transform: translateZ(0)` + `contain: layout style` on canvas
@@ -21,26 +25,153 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
 */
+/** Whether a bubble position is horizontal (left/right). */
+function isHorizontal(pos) {
+	return pos === "left" || pos === "right";
+}
 /**
 * GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
 */
-function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor = "var(--card)", bubbleHeight: bubbleHeightProp, bubbleInset = .2, expanded = false, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className }) {
+function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor = "var(--card)", bubbleHeight: bubbleHeightProp, bubbleInset = .2, bubblePosition = "top", expanded = false, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className }) {
 	const filterId = React$1.useId().replace(/:/g, "") + "-goo";
 	const computedBlur = blur ?? computeBlur(height);
 	const bubbleRectRef = React$1.useRef(null);
 	const animRef = React$1.useRef(null);
 	const [ready, setReady] = React$1.useState(false);
 	const lastValues = React$1.useRef({
-		y: -1,
-		h: -1
+		a: -1,
+		b: -1
 	});
 	const pad = 2;
 	const effectiveR = Math.min(radius, height / 2);
+	const horiz = isHorizontal(bubblePosition);
 	const bubbleH = bubbleHeightProp ?? Math.round(height * .4);
-	const insetPx = width * bubbleInset;
-	const bubbleW = width - 2 * insetPx;
 	const bubbleR = Math.min(effectiveR * .6, bubbleH * .45, 12);
-	const totalH = height + bubbleH;
+	const spanDim = horiz ? height : width;
+	const insetPx = spanDim * bubbleInset;
+	const bubbleSpan = spanDim - 2 * insetPx;
+	const svgW = horiz ? width + bubbleH : width;
+	const svgH = horiz ? height : height + bubbleH;
+	const pillX = bubblePosition === "left" ? bubbleH + pad : pad;
+	const pillY = bubblePosition === "top" ? bubbleH : 0;
+	const bubbleInitial = React$1.useMemo(() => {
+		switch (bubblePosition) {
+			case "top": return {
+				x: insetPx,
+				y: bubbleH,
+				w: bubbleSpan,
+				h: 0
+			};
+			case "bottom": return {
+				x: insetPx,
+				y: height,
+				w: bubbleSpan,
+				h: 0
+			};
+			case "left": return {
+				x: bubbleH,
+				y: insetPx,
+				w: 0,
+				h: bubbleSpan
+			};
+			case "right": return {
+				x: width - pad,
+				y: insetPx,
+				w: 0,
+				h: bubbleSpan
+			};
+		}
+	}, [
+		bubblePosition,
+		insetPx,
+		bubbleH,
+		bubbleSpan,
+		height,
+		width,
+		pad
+	]);
+	const animTargets = React$1.useMemo(() => {
+		switch (bubblePosition) {
+			case "top": return {
+				attrs: ["y", "height"],
+				collapsed: {
+					a: bubbleH,
+					b: 0
+				},
+				expanded: {
+					a: 0,
+					b: bubbleH
+				}
+			};
+			case "bottom": return {
+				attrs: ["y", "height"],
+				collapsed: {
+					a: height,
+					b: 0
+				},
+				expanded: {
+					a: height,
+					b: bubbleH
+				}
+			};
+			case "left": return {
+				attrs: ["x", "width"],
+				collapsed: {
+					a: bubbleH,
+					b: 0
+				},
+				expanded: {
+					a: 0,
+					b: bubbleH
+				}
+			};
+			case "right": return {
+				attrs: ["x", "width"],
+				collapsed: {
+					a: width - pad,
+					b: 0
+				},
+				expanded: {
+					a: width - pad,
+					b: bubbleH
+				}
+			};
+		}
+	}, [
+		bubblePosition,
+		bubbleH,
+		height,
+		width,
+		pad
+	]);
+	const svgStyle = React$1.useMemo(() => {
+		const base = {
+			position: "absolute",
+			overflow: "visible"
+		};
+		switch (bubblePosition) {
+			case "top": return {
+				...base,
+				top: -bubbleH,
+				left: 0
+			};
+			case "bottom": return {
+				...base,
+				top: 0,
+				left: 0
+			};
+			case "left": return {
+				...base,
+				top: 0,
+				left: -bubbleH
+			};
+			case "right": return {
+				...base,
+				top: 0,
+				left: 0
+			};
+		}
+	}, [bubblePosition, bubbleH]);
 	const filterUrl = React$1.useMemo(() => `url(#${filterId})`, [filterId]);
 	const outlineShadow = React$1.useMemo(() => {
 		const shadow = `drop-shadow(0 0 ${outlineBlur}px ${outlineColor})`;
@@ -58,17 +189,21 @@ function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor
 	React$1.useEffect(() => {
 		const rect = bubbleRectRef.current;
 		if (!rect) return;
+		const init = expanded ? animTargets.expanded : animTargets.collapsed;
 		lastValues.current = {
-			y: expanded ? 0 : bubbleH,
-			h: expanded ? bubbleH : 0
+			a: init.a,
+			b: init.b
 		};
-		if (expanded) rect.animate([{
-			y: "0px",
-			height: `${bubbleH}px`
-		}], {
-			duration: 0,
-			fill: "forwards"
-		});
+		if (expanded) {
+			const [attrA, attrB] = animTargets.attrs;
+			rect.animate([{
+				[attrA]: `${init.a}px`,
+				[attrB]: `${init.b}px`
+			}], {
+				duration: 0,
+				fill: "forwards"
+			});
+		}
 		const raf = requestAnimationFrame(() => setReady(true));
 		return () => cancelAnimationFrame(raf);
 	}, []);
@@ -76,21 +211,21 @@ function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor
 		const rect = bubbleRectRef.current;
 		if (!rect || !ready) return;
 		const isExpanding = expanded;
+		const [attrA, attrB] = animTargets.attrs;
 		const duration = getResponsiveDuration(isExpanding ? expandDuration ?? GOOEY_TIMING.EXPAND_DURATION : collapseDuration ?? GOOEY_TIMING.COLLAPSE_DURATION);
 		const easing = isExpanding ? expandEasing ?? EASINGS.SPRING_GENTLE : collapseEasing ?? EASINGS.EASE_OUT_CUBIC;
-		const toY = isExpanding ? 0 : bubbleH;
-		const toH = isExpanding ? bubbleH : 0;
-		const fromY = lastValues.current.y;
-		const fromH = lastValues.current.h;
+		const to = isExpanding ? animTargets.expanded : animTargets.collapsed;
+		const fromA = lastValues.current.a;
+		const fromB = lastValues.current.b;
 		lastValues.current = {
-			y: toY,
-			h: toH
+			a: to.a,
+			b: to.b
 		};
 		if (duration === 0) {
 			if (animRef.current) animRef.current.cancel();
 			rect.animate([{
-				y: `${toY}px`,
-				height: `${toH}px`
+				[attrA]: `${to.a}px`,
+				[attrB]: `${to.b}px`
 			}], {
 				duration: 0,
 				fill: "forwards"
@@ -99,11 +234,11 @@ function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor
 		}
 		if (animRef.current) animRef.current.cancel();
 		animRef.current = rect.animate([{
-			y: `${fromY}px`,
-			height: `${fromH}px`
+			[attrA]: `${fromA}px`,
+			[attrB]: `${fromB}px`
 		}, {
-			y: `${toY}px`,
-			height: `${toH}px`
+			[attrA]: `${to.a}px`,
+			[attrB]: `${to.b}px`
 		}], {
 			duration,
 			easing,
@@ -112,7 +247,7 @@ function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor
 	}, [
 		ready,
 		expanded,
-		bubbleH,
+		animTargets,
 		expandDuration,
 		collapseDuration,
 		expandEasing,
@@ -124,15 +259,10 @@ function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor
 		className: cn("absolute inset-0 rounded-[inherit] pointer-events-none z-0 overflow-visible", className),
 		children: /* @__PURE__ */ jsxs("svg", {
 			"data-slot": "gooey-svg",
-			width,
-			height: totalH,
-			viewBox: `0 0 ${width} ${totalH}`,
-			style: {
-				position: "absolute",
-				top: -bubbleH,
-				left: 0,
-				overflow: "visible"
-			},
+			width: svgW,
+			height: svgH,
+			viewBox: `0 0 ${svgW} ${svgH}`,
+			style: svgStyle,
 			"aria-hidden": "true",
 			children: [
 				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
@@ -162,8 +292,8 @@ function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor
 					]
 				}) }),
 				/* @__PURE__ */ jsx("rect", {
-					x: pad,
-					y: bubbleH,
+					x: pillX,
+					y: pillY,
 					width: width - pad * 2,
 					height: height - pad * 2,
 					rx: effectiveR,
@@ -172,10 +302,10 @@ function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor
 				}),
 				/* @__PURE__ */ jsx("rect", {
 					ref: bubbleRectRef,
-					x: insetPx,
-					y: bubbleH,
-					width: bubbleW,
-					height: 0,
+					x: bubbleInitial.x,
+					y: bubbleInitial.y,
+					width: bubbleInitial.w,
+					height: bubbleInitial.h,
 					rx: bubbleR,
 					ry: bubbleR,
 					fill: fillColor

package/dist/react-ui/ui/DynamicToggle/{DynamicToggle-DOR3Ld-k.css → DynamicToggle-DJLwEkHr.css}

@@ -1,5 +1,5 @@
 /**
- * DynamicToggle — CSS state transitions.
+ * DynamicToggle v2 — CSS state transitions.
  *
  * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
  * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
@@ -285,11 +285,11 @@
 }
 
 /* ══════════════════════════════════════════════════════════
- * GROUP LABEL (above/below the pill)
+ * GROUP LABEL / BUBBLE (above or below the pill)
  *
- * Replaces the old "bubble" element. Positioned via CSS grid.
- * In filter/path morph modes, rendered inside GooeyCanvas.
+ * Positioned via CSS. In filter/path morph modes, rendered with GooeyCanvas.
  * In none mode, simple CSS-driven show/hide.
+ * bubblePosition: top | bottom (no left/right in v2)
  * ══════════════════════════════════════════════════════════ */
 
 [data-slot="dt-group-label"] {
@@ -319,7 +319,7 @@
 }
 
 /* Top position */
-[data-slot="dt-group-label"][data-position="top"] {
+[data-slot="dt-group-label"][data-bubble-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;
@@ -327,29 +327,25 @@
 }
 
 /* Bottom position */
-[data-slot="dt-group-label"][data-position="bottom"] {
+[data-slot="dt-group-label"][data-bubble-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"] {
+/* When group active → group label grows (vertical: top/bottom) */
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"],
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] {
   grid-template-rows: 1fr;
   opacity: 1;
 }
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] > span {
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"] > span,
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] > 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;
 }
@@ -366,11 +362,8 @@
 }
 
 /* ── 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;
 }
+

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

@@ -1,5 +1,5 @@
 /**
- * DynamicToggle — CSS state transitions.
+ * DynamicToggle v2 — CSS state transitions.
  *
  * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
  * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
@@ -285,11 +285,11 @@
 }
 
 /* ══════════════════════════════════════════════════════════
- * GROUP LABEL (above/below the pill)
+ * GROUP LABEL / BUBBLE (above or below the pill)
  *
- * Replaces the old "bubble" element. Positioned via CSS grid.
- * In filter/path morph modes, rendered inside GooeyCanvas.
+ * Positioned via CSS. In filter/path morph modes, rendered with GooeyCanvas.
  * In none mode, simple CSS-driven show/hide.
+ * bubblePosition: top | bottom (no left/right in v2)
  * ══════════════════════════════════════════════════════════ */
 
 [data-slot="dt-group-label"] {
@@ -319,7 +319,7 @@
 }
 
 /* Top position */
-[data-slot="dt-group-label"][data-position="top"] {
+[data-slot="dt-group-label"][data-bubble-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;
@@ -327,29 +327,25 @@
 }
 
 /* Bottom position */
-[data-slot="dt-group-label"][data-position="bottom"] {
+[data-slot="dt-group-label"][data-bubble-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"] {
+/* When group active → group label grows (vertical: top/bottom) */
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"],
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] {
   grid-template-rows: 1fr;
   opacity: 1;
 }
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] > span {
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"] > span,
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] > 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;
 }
@@ -366,11 +362,7 @@
 }
 
 /* ── 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;
-}
+}

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts

@@ -29,6 +29,7 @@ export declare const dynamicToggleVariants: (props?: ({
     variant?: "muted" | "default" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     shape?: "square" | "pill" | "rounded" | null | undefined;
+    morph?: "filter" | "path" | "none" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Variant props extracted from CVA */
 export type DynamicToggleVariantProps = VariantProps<typeof dynamicToggleVariants>;

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicToggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,YAAY,CAAC;AAEjB;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAa7D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB;;;;8EA8BhC,CAAC;AAEH,uCAAuC;AACvC,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"DynamicToggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,YAAY,CAAC;AAEjB;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAa7D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB;;;;;8EAqChC,CAAC;AAEH,uCAAuC;AACvC,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.js

@@ -54,12 +54,18 @@ const dynamicToggleVariants = cva(dynamicToggleStyles.root, {
 			pill: "rounded-full [--dt-radius:9999px]",
 			rounded: "rounded-xl [--dt-radius:0.75rem]",
 			square: "rounded-md [--dt-radius:0.375rem]"
+		},
+		morph: {
+			none: "",
+			filter: "bg-transparent border-transparent shadow-none overflow-visible",
+			path: "bg-transparent border-transparent"
 		}
 	},
 	defaultVariants: {
 		variant: "default",
 		size: "default",
-		shape: "pill"
+		shape: "pill",
+		morph: "none"
 	}
 });