@bug-on/m3-expressive 1.3.1 → 1.3.3

package/dist/layout.mjs

@@ -2,7 +2,7 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { m, LazyMotion, domMax, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion } from 'motion/react';
-import * as React18 from 'react';
+import * as React23 from 'react';
 import { createContext, useState, useCallback, useMemo, useEffect, useContext, createElement } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -55,7 +55,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var RippleItem = React18.memo(function RippleItem2({
+var RippleItem = React23.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -99,8 +99,8 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React18.useState([]);
-  const onPointerDown = React18.useCallback(
+  const [ripples, setRipples] = React23.useState([]);
+  const onPointerDown = React23.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -117,21 +117,36 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React18.useCallback((id) => {
+  const removeRipple = React23.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
 }
+
+// src/ui/cards/card/card-tokens.ts
 var SHADOW = {
   level0: "none",
   level1: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)",
-  level2: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15)"
+  level2: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15)",
+  level3: "0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px 0px rgba(0,0,0,.3)",
+  level4: "0px 6px 10px 4px rgba(0,0,0,.15), 0px 2px 3px 0px rgba(0,0,0,.3)",
+  level5: "0px 8px 12px 6px rgba(0,0,0,.15), 0px 4px 4px 0px rgba(0,0,0,.3)"
 };
+function resolveElevationShadow(level) {
+  var _a;
+  if (level === void 0) return void 0;
+  if (typeof level === "number") {
+    const key = `level${level}`;
+    return (_a = SHADOW[key]) != null ? _a : SHADOW.level0;
+  }
+  return level;
+}
 var VARIANT_ELEVATION = {
   elevated: {
     rest: SHADOW.level1,
     hover: SHADOW.level2,
     pressed: SHADOW.level1,
+    dragged: SHADOW.level3,
     disabled: SHADOW.level1
     // ElevatedCardTokens.DisabledContainerElevation = Level1
   },
@@ -139,78 +154,177 @@ var VARIANT_ELEVATION = {
     rest: SHADOW.level0,
     hover: SHADOW.level1,
     pressed: SHADOW.level0,
+    dragged: SHADOW.level3,
     disabled: SHADOW.level0
   },
   outlined: {
     rest: SHADOW.level0,
     hover: SHADOW.level1,
     pressed: SHADOW.level0,
+    dragged: SHADOW.level3,
     disabled: SHADOW.level0
   }
 };
+function useCardElevation({
+  variant = "elevated",
+  disabled = false,
+  draggable = false,
+  elevation,
+  disableElevation = false,
+  hoverEffect = true
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const defaultLevels = VARIANT_ELEVATION[variant] || VARIANT_ELEVATION.elevated;
+  let restShadow = defaultLevels.rest;
+  let hoverShadow = defaultLevels.hover;
+  let pressedShadow = defaultLevels.pressed;
+  let draggedShadow = defaultLevels.dragged;
+  if (disableElevation) {
+    restShadow = SHADOW.level0;
+    hoverShadow = SHADOW.level0;
+    pressedShadow = SHADOW.level0;
+    draggedShadow = SHADOW.level0;
+  } else if (typeof elevation === "number") {
+    const resolved = (_a = resolveElevationShadow(elevation)) != null ? _a : SHADOW.level0;
+    restShadow = resolved;
+    const hoverLevel = hoverEffect ? Math.min(elevation + 1, 5) : elevation;
+    hoverShadow = (_b = resolveElevationShadow(hoverLevel)) != null ? _b : resolved;
+    pressedShadow = resolved;
+    draggedShadow = (_c = resolveElevationShadow(
+      Math.min(elevation + 2, 5)
+    )) != null ? _c : resolved;
+  } else if (elevation && typeof elevation === "object") {
+    if (elevation.rest !== void 0) {
+      restShadow = (_d = resolveElevationShadow(elevation.rest)) != null ? _d : restShadow;
+    }
+    if (elevation.hover !== void 0) {
+      hoverShadow = (_e = resolveElevationShadow(elevation.hover)) != null ? _e : hoverShadow;
+    }
+    if (elevation.pressed !== void 0) {
+      pressedShadow = (_f = resolveElevationShadow(elevation.pressed)) != null ? _f : pressedShadow;
+    }
+    if (elevation.dragged !== void 0) {
+      draggedShadow = (_g = resolveElevationShadow(elevation.dragged)) != null ? _g : draggedShadow;
+    }
+  }
+  if (!hoverEffect) {
+    hoverShadow = restShadow;
+  }
+  const animateShadow = disabled ? disableElevation ? SHADOW.level0 : defaultLevels.disabled : restShadow;
+  return {
+    animate: { boxShadow: animateShadow },
+    whileHover: disabled || !hoverEffect ? void 0 : { boxShadow: hoverShadow },
+    whileTap: disabled ? void 0 : { boxShadow: pressedShadow },
+    whileFocus: disabled || !hoverEffect ? void 0 : { boxShadow: hoverShadow },
+    whileDrag: !disabled && draggable ? { boxShadow: draggedShadow } : void 0,
+    transition: {
+      boxShadow: {
+        // Incoming: 120ms (from Elevation.kt DefaultIncomingSpec)
+        duration: 0.12,
+        ease: [0.4, 0, 0.2, 1]
+      }
+    }
+  };
+}
 var cardVariants = cva(
-  "rounded-m3-lg flex flex-col relative overflow-hidden transition-colors duration-200",
+  "rounded-m3-lg flex flex-col relative overflow-hidden transition-all duration-200",
   {
     variants: {
       variant: {
         // ElevatedCardTokens.ContainerColor = SurfaceContainerLow
-        elevated: "bg-m3-surface-container-low",
+        elevated: "bg-m3-surface-container-low text-m3-on-surface",
         // FilledCardTokens.ContainerColor = SurfaceContainerHighest
-        filled: "bg-m3-surface-container-highest",
+        filled: "bg-m3-surface-container-highest text-m3-on-surface",
         // OutlinedCardTokens.ContainerColor = Surface, OutlineColor = OutlineVariant
-        outlined: "bg-m3-surface border border-m3-outline-variant"
+        outlined: "bg-m3-surface text-m3-on-surface border border-m3-outline-variant"
       }
     },
     defaultVariants: { variant: "elevated" }
   }
 );
-function useCardElevation(variant, disabled) {
-  const levels = VARIANT_ELEVATION[variant];
-  return {
-    animate: { boxShadow: disabled ? levels.disabled : levels.rest },
-    whileHover: disabled ? void 0 : { boxShadow: levels.hover },
-    whileTap: disabled ? void 0 : { boxShadow: levels.pressed },
-    whileFocus: disabled ? void 0 : { boxShadow: levels.hover },
-    transition: {
-      boxShadow: {
-        // Incoming: 120ms (from Elevation.kt DefaultIncomingSpec)
-        duration: 0.12,
-        ease: [0.4, 0, 0.2, 1]
-      }
-    }
-  };
-}
-var CardImpl = React18.forwardRef(
+var CardImpl = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
       variant = "elevated",
+      elevation,
+      disableElevation = false,
+      ripple = true,
+      disableRipple = false,
+      hoverEffect = true,
+      disableHoverEffect = false,
+      stateLayer = true,
+      disableStateLayer = false,
       disabled = false,
       interactive = false,
+      draggable = false,
       href,
       target,
       rel: relProp,
       onClick,
+      onPointerDown: userOnPointerDown,
+      whileHover,
+      whileTap,
+      whileFocus,
+      whileDrag,
+      transition,
       asChild = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
       "variant",
+      "elevation",
+      "disableElevation",
+      "ripple",
+      "disableRipple",
+      "hoverEffect",
+      "disableHoverEffect",
+      "stateLayer",
+      "disableStateLayer",
       "disabled",
       "interactive",
+      "draggable",
       "href",
       "target",
       "rel",
       "onClick",
+      "onPointerDown",
+      "whileHover",
+      "whileTap",
+      "whileFocus",
+      "whileDrag",
+      "transition",
       "asChild",
       "children"
     ]);
-    const safeVariant = variant;
+    const safeVariant = variant || "elevated";
     const isInteractive = !!onClick || !!href || interactive || asChild;
-    const elevationProps = useCardElevation(safeVariant, disabled);
-    const { ripples, onPointerDown, removeRipple } = useRippleState();
+    const isHoverEnabled = hoverEffect !== false && !disableHoverEffect;
+    const isRippleEnabled = ripple !== false && !disableRipple && isInteractive && !disabled;
+    const isStateLayerEnabled = stateLayer !== false && !disableStateLayer && isInteractive && !disabled;
+    const elevationProps = useCardElevation({
+      variant: safeVariant,
+      disabled,
+      draggable,
+      elevation,
+      disableElevation,
+      hoverEffect: isHoverEnabled
+    });
+    const {
+      ripples,
+      onPointerDown: rippleOnPointerDown,
+      removeRipple
+    } = useRippleState();
+    const handlePointerDown = (event) => {
+      if (isRippleEnabled) {
+        rippleOnPointerDown(event);
+      }
+      userOnPointerDown == null ? void 0 : userOnPointerDown(
+        event
+      );
+    };
     const baseClass = cn(
-      cardVariants({ variant }),
+      cardVariants({ variant: safeVariant }),
       // Disabled state:
       // - pointer-events-none → disable interactions completely
       // - opacity-[0.38] → MD3 DisabledContainerOpacity
@@ -220,17 +334,25 @@ var CardImpl = React18.forwardRef(
     const interactiveClass = cn(
       // Remove default outline, use MD3 state overlay & elevation for focus
       "focus-visible:outline-none focus:outline-none group",
-      // Base pseudo-element overlay layer
-      "before:absolute before:inset-0 before:pointer-events-none before:bg-m3-on-surface before:opacity-0 before:transition-opacity before:duration-200",
-      // Interactive state opacities
-      "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.10] active:before:opacity-[0.10]",
-      // Outlined interactive card: change border color to m3-outline on focus/press/hover
-      variant === "outlined" && "hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
+      // Base pseudo-element overlay layer (when stateLayer is enabled)
+      isStateLayerEnabled && [
+        "before:absolute before:inset-0 before:pointer-events-none before:bg-m3-on-surface before:opacity-0 before:transition-opacity before:duration-200",
+        isHoverEnabled && "hover:before:opacity-[0.08]",
+        "focus-visible:before:opacity-[0.10] active:before:opacity-[0.10]",
+        draggable && "active:before:opacity-[0.16]"
+      ],
+      // Outlined interactive card: smooth transition of border color to m3-outline on hover/focus/press
+      safeVariant === "outlined" && "transition-colors duration-200 hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
     );
+    const mergedWhileHover = elevationProps.whileHover || whileHover ? __spreadValues(__spreadValues({}, elevationProps.whileHover), typeof whileHover === "object" ? whileHover : {}) : void 0;
+    const mergedWhileTap = elevationProps.whileTap || whileTap ? __spreadValues(__spreadValues({}, elevationProps.whileTap), typeof whileTap === "object" ? whileTap : {}) : void 0;
+    const mergedWhileFocus = elevationProps.whileFocus || whileFocus ? __spreadValues(__spreadValues({}, elevationProps.whileFocus), typeof whileFocus === "object" ? whileFocus : {}) : void 0;
+    const mergedWhileDrag = elevationProps.whileDrag || whileDrag ? __spreadValues(__spreadValues({}, elevationProps.whileDrag), typeof whileDrag === "object" ? whileDrag : {}) : void 0;
+    const mergedTransition = elevationProps.transition || transition ? __spreadValues(__spreadValues({}, elevationProps.transition), typeof transition === "object" ? transition : {}) : void 0;
     if (asChild) {
-      const child = React18.Children.only(children);
+      const child = React23.Children.only(children);
       const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+        isRippleEnabled && /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
         child.props.children
       ] });
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
@@ -240,22 +362,26 @@ var CardImpl = React18.forwardRef(
           className: cn(baseClass, interactiveClass),
           "aria-disabled": disabled ? true : void 0,
           tabIndex: disabled ? -1 : 0,
-          onPointerDown,
+          onPointerDown: handlePointerDown,
           onClick
         }, props), {
-          children: React18.cloneElement(child, { children: innerContent })
+          children: React23.cloneElement(child, { children: innerContent })
         })
       ) });
     }
     if (!isInteractive) {
       return /* @__PURE__ */ jsx(
         "div",
-        {
+        __spreadProps(__spreadValues({
           ref,
           className: baseClass,
-          "aria-disabled": disabled ? true : void 0,
+          style: __spreadValues({
+            boxShadow: elevationProps.animate.boxShadow
+          }, props.style || {}),
+          "aria-disabled": disabled ? true : void 0
+        }, props), {
           children
-        }
+        })
       );
     }
     const safeRel = href ? relProp != null ? relProp : target === "_blank" ? "noreferrer" : void 0 : void 0;
@@ -270,10 +396,16 @@ var CardImpl = React18.forwardRef(
           className: cn(baseClass, interactiveClass),
           "aria-disabled": disabled ? true : void 0,
           tabIndex: disabled ? -1 : 0,
-          onPointerDown
-        }, elevationProps), {
+          onPointerDown: handlePointerDown,
+          animate: elevationProps.animate,
+          whileHover: mergedWhileHover,
+          whileTap: mergedWhileTap,
+          whileFocus: mergedWhileFocus,
+          whileDrag: mergedWhileDrag,
+          transition: mergedTransition
+        }, props), {
           children: [
-            /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+            isRippleEnabled && /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
             children
           ]
         })
@@ -281,7 +413,7 @@ var CardImpl = React18.forwardRef(
     }
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       m.button,
-      __spreadProps(__spreadValues(__spreadValues({
+      __spreadProps(__spreadValues({
         ref,
         type: "button",
         disabled,
@@ -289,10 +421,16 @@ var CardImpl = React18.forwardRef(
         className: cn(baseClass, interactiveClass),
         "aria-disabled": disabled ? true : void 0,
         tabIndex: disabled ? -1 : 0,
-        onPointerDown
-      }, elevationProps), props), {
+        onPointerDown: handlePointerDown,
+        animate: elevationProps.animate,
+        whileHover: mergedWhileHover,
+        whileTap: mergedWhileTap,
+        whileFocus: mergedWhileFocus,
+        whileDrag: mergedWhileDrag,
+        transition: mergedTransition
+      }, props), {
         children: [
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          isRippleEnabled && /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
           children
         ]
       })
@@ -300,7 +438,1132 @@ var CardImpl = React18.forwardRef(
   }
 );
 CardImpl.displayName = "Card";
-var Card = React18.memo(CardImpl);
+var Card = React23.memo(CardImpl);
+var CardHeader = React23.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, avatar, title, subheader, action, children } = _b, props = __objRest(_b, ["className", "avatar", "title", "subheader", "action", "children"]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "flex items-center gap-4 px-6 pt-6 pb-2 relative z-1",
+          className
+        )
+      }, props), {
+        children: [
+          avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center", children: avatar }),
+          title || subheader ? /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            title && /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-m3-on-surface truncate", children: title }),
+            subheader && /* @__PURE__ */ jsx("div", { className: "text-sm text-m3-on-surface-variant truncate", children: subheader })
+          ] }) : null,
+          children,
+          action && /* @__PURE__ */ jsx("div", { className: "shrink-0 ml-auto flex items-center", children: action })
+        ]
+      })
+    );
+  }
+);
+CardHeader.displayName = "CardHeader";
+var ASPECT_RATIO_CLASSES = {
+  video: "aspect-video",
+  square: "aspect-square",
+  wide: "aspect-[21/9]",
+  auto: ""
+};
+var CardMedia = React23.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      src,
+      alt = "",
+      aspectRatio = "video",
+      component,
+      children
+    } = _b, props = __objRest(_b, [
+      "className",
+      "src",
+      "alt",
+      "aspectRatio",
+      "component",
+      "children"
+    ]);
+    const ratioClass = aspectRatio in ASPECT_RATIO_CLASSES ? ASPECT_RATIO_CLASSES[aspectRatio] : "";
+    const Component = component || (src && !children ? "img" : "div");
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "relative w-full overflow-hidden shrink-0",
+          ratioClass,
+          className
+        )
+      }, props), {
+        children: children ? children : src ? /* @__PURE__ */ jsx(
+          Component,
+          {
+            src,
+            alt,
+            className: "w-full h-full object-cover"
+          }
+        ) : null
+      })
+    );
+  }
+);
+CardMedia.displayName = "CardMedia";
+var CardContent = React23.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "px-6 py-4 text-sm text-m3-on-surface-variant flex-1 relative z-1",
+          className
+        )
+      }, props), {
+        children
+      })
+    );
+  }
+);
+CardContent.displayName = "CardContent";
+var ALIGN_CLASSES = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+var CardFooter = React23.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, align = "end", children } = _b, props = __objRest(_b, ["className", "align", "children"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "flex items-center gap-2 px-6 pb-6 pt-2 relative z-1",
+          ALIGN_CLASSES[align],
+          className
+        )
+      }, props), {
+        children
+      })
+    );
+  }
+);
+CardFooter.displayName = "CardFooter";
+function CarouselGrid(_a) {
+  var _b = _a, {
+    children,
+    items,
+    renderItem,
+    preferredItemWidth = 240,
+    className,
+    style
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "renderItem",
+    "preferredItemWidth",
+    "className",
+    "style"
+  ]);
+  const gridStyle = __spreadValues({
+    display: "grid",
+    gridTemplateColumns: `repeat(auto-fill, minmax(${preferredItemWidth}px, 1fr))`,
+    gap: "8px",
+    padding: "8px 16px",
+    width: "100%",
+    boxSizing: "border-box"
+  }, style);
+  const itemStyle = {
+    position: "relative",
+    width: "100%",
+    minHeight: "180px",
+    borderRadius: "28px",
+    overflow: "hidden"
+  };
+  if (items && renderItem) {
+    return /* @__PURE__ */ jsx(
+      "section",
+      __spreadProps(__spreadValues({
+        className,
+        style: gridStyle,
+        "aria-label": "Expanded carousel grid"
+      }, props), {
+        children: items.map((item, index) => {
+          const itemKey = typeof item === "object" && item !== null && "id" in item ? item.id : typeof item === "object" && item !== null && "key" in item ? item.key : index;
+          return /* @__PURE__ */ jsx("div", { style: itemStyle, children: renderItem(item, index) }, itemKey);
+        })
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "section",
+    __spreadProps(__spreadValues({
+      className,
+      style: gridStyle,
+      "aria-label": "Expanded carousel grid"
+    }, props), {
+      children: React23.Children.map(children, (child, index) => {
+        const childKey = React23.isValidElement(child) && child.key != null ? child.key : index;
+        return /* @__PURE__ */ jsx("div", { style: itemStyle, children: child }, childKey);
+      })
+    })
+  );
+}
+var CarouselItem = React23.forwardRef(
+  function CarouselItem2(_a, ref) {
+    var _b = _a, {
+      index,
+      totalItems,
+      layout = "multi-browse",
+      width,
+      minContentWidth,
+      maskClipPercent = 0,
+      parallaxOffset = 0,
+      isFocused = false,
+      isScrolling = false,
+      disabled = false,
+      className,
+      style,
+      children,
+      onClick,
+      onPointerDown
+    } = _b, props = __objRest(_b, [
+      "index",
+      "totalItems",
+      "layout",
+      "width",
+      "minContentWidth",
+      "maskClipPercent",
+      "parallaxOffset",
+      "isFocused",
+      "isScrolling",
+      "disabled",
+      "className",
+      "style",
+      "children",
+      "onClick",
+      "onPointerDown"
+    ]);
+    const {
+      ripples,
+      onPointerDown: handleRipplePointerDown,
+      removeRipple
+    } = useRippleState();
+    const itemNumber = index + 1;
+    const ariaLabel = props["aria-label"] || `Item ${itemNumber} of ${totalItems}`;
+    const isFullScreen = layout === "full-screen";
+    const isCenterHero = layout === "center-aligned-hero";
+    const combinedStyle = __spreadValues({
+      width: isFullScreen ? "100%" : width ? `${width}px` : void 0,
+      height: isFullScreen ? "100%" : void 0,
+      flexShrink: 0
+    }, style);
+    const handlePointerDown = (e) => {
+      if (!disabled) {
+        handleRipplePointerDown(e);
+      }
+      onPointerDown == null ? void 0 : onPointerDown(e);
+    };
+    const handleKeyDown = (e) => {
+      var _a2;
+      if (!disabled && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick(e);
+      }
+      (_a2 = props.onKeyDown) == null ? void 0 : _a2.call(props, e);
+    };
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: ARIA carousel pattern requires role="group" for slide items
+      /* @__PURE__ */ jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          role: "group",
+          "aria-roledescription": "slide",
+          "aria-label": ariaLabel,
+          tabIndex: disabled ? -1 : isFocused ? 0 : -1,
+          className: cn(
+            // Base item styles: overflow-hidden + rounded 28px acts as MD3 keyline mask
+            "relative flex flex-col overflow-hidden rounded-[28px] cursor-pointer select-none box-border outline-none shrink-0",
+            // GPU Composition & Layout Containment
+            "will-change-[transform,clip-path] contain-[layout_paint_style] [user-select:none] [-webkit-user-drag:none] [&_img]:pointer-events-none [&_img]:select-none [&_img]:[-webkit-user-drag:none]",
+            // Scroll snap: center-aligned hero snaps to center, all others snap start
+            isCenterHero ? "snap-center" : "snap-start",
+            // Full-screen: no rounding, fill height
+            isFullScreen && "rounded-none",
+            // State layers via ::after pseudo-element
+            "after:absolute after:inset-0 after:rounded-[inherit] after:bg-black after:opacity-0 after:pointer-events-none after:z-2 after:transition-opacity after:duration-150 after:motion-reduce:transition-none",
+            "hover:after:opacity-[0.08]",
+            "active:after:opacity-[0.10]",
+            // Focus ring
+            "focus-visible:outline-[3px] focus-visible:outline-(--md-sys-color-secondary,#625b71) focus-visible:outline-offset-2 focus-visible:z-3",
+            // Disabled
+            disabled && "opacity-[0.38] pointer-events-none",
+            className
+          ),
+          style: combinedStyle,
+          onPointerDown: handlePointerDown,
+          onKeyDown: handleKeyDown,
+          onClick: disabled ? void 0 : onClick
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-full flex-1 flex flex-col will-change-transform select-none",
+                style: {
+                  width: isFullScreen ? "100%" : minContentWidth ? `${minContentWidth}px` : "100%",
+                  minWidth: isFullScreen ? "100%" : minContentWidth ? `${minContentWidth}px` : void 0,
+                  transform: parallaxOffset !== 0 ? `translateX(${parallaxOffset}px)` : void 0
+                },
+                children
+              }
+            ),
+            /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple })
+          ]
+        })
+      )
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
+function useCarouselA11y({
+  totalItems,
+  onItemSelect,
+  onExitNavigation,
+  scrollToIndex
+}) {
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (totalItems === 0) return;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown": {
+          if (event.key === "ArrowDown" && onExitNavigation) {
+            onExitNavigation();
+            return;
+          }
+          event.preventDefault();
+          setFocusedIndex((prev) => {
+            const next = Math.min(totalItems - 1, prev + 1);
+            scrollToIndex == null ? void 0 : scrollToIndex(next);
+            return next;
+          });
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          if (event.key === "ArrowUp" && onExitNavigation) {
+            onExitNavigation();
+            return;
+          }
+          event.preventDefault();
+          setFocusedIndex((prev) => {
+            const next = Math.max(0, prev - 1);
+            scrollToIndex == null ? void 0 : scrollToIndex(next);
+            return next;
+          });
+          break;
+        }
+        case "Home": {
+          event.preventDefault();
+          setFocusedIndex(0);
+          scrollToIndex == null ? void 0 : scrollToIndex(0);
+          break;
+        }
+        case "End": {
+          event.preventDefault();
+          const lastIndex = totalItems - 1;
+          setFocusedIndex(lastIndex);
+          scrollToIndex == null ? void 0 : scrollToIndex(lastIndex);
+          break;
+        }
+        case " ":
+        case "Enter": {
+          event.preventDefault();
+          onItemSelect == null ? void 0 : onItemSelect(focusedIndex);
+          break;
+        }
+      }
+    },
+    [totalItems, focusedIndex, onItemSelect, onExitNavigation, scrollToIndex]
+  );
+  const getItemA11yProps = useCallback(
+    (index, customLabel) => {
+      const itemNumber = index + 1;
+      const defaultLabel = `Item ${itemNumber} of ${totalItems}`;
+      return {
+        role: "group",
+        "aria-roledescription": "slide",
+        "aria-label": customLabel ? `${customLabel} (${itemNumber} of ${totalItems})` : defaultLabel,
+        tabIndex: index === focusedIndex ? 0 : -1,
+        onFocus: () => setFocusedIndex(index)
+      };
+    },
+    [focusedIndex, totalItems]
+  );
+  return {
+    focusedIndex,
+    setFocusedIndex,
+    handleKeyDown,
+    getItemA11yProps
+  };
+}
+
+// src/ui/carousel/carousel.tokens.ts
+var CarouselTokens = {
+  /** Corner radius shape (M3 extraLarge shape: 28dp) */
+  containerRadius: 28,
+  /** Small item dimension limits (dp) */
+  smallItemMin: 40,
+  smallItemMax: 56,
+  /** Layout defaults (dp) */
+  itemSpacing: 8,
+  contentPadding: 16,
+  verticalPadding: 8,
+  /** Interactive state overlays */
+  hoverOpacity: 0.08,
+  focusOpacity: 0.1,
+  pressedOpacity: 0.1,
+  disabledOpacity: 0.38,
+  /** Focus indicator dimensions */
+  focusThickness: 3,
+  focusOffset: 2,
+  /** Touch target minimum size for accessibility (WCAG 2.1 AAA / M3) */
+  minTouchTargetSize: 48,
+  /** CSS Custom Property token maps for fallback and runtime injection */
+  cssVars: {
+    shape: "--carousel-item-shape",
+    spacing: "--carousel-item-spacing",
+    contentPadding: "--carousel-content-padding",
+    verticalPadding: "--carousel-vertical-padding",
+    smallMin: "--carousel-small-item-min",
+    smallMax: "--carousel-small-item-max",
+    hoverOpacity: "--carousel-hover-opacity",
+    focusThickness: "--carousel-focus-thickness",
+    focusOffset: "--carousel-focus-offset",
+    pressedOpacity: "--carousel-pressed-opacity",
+    disabledOpacity: "--carousel-disabled-opacity"
+  }
+};
+
+// src/ui/carousel/hooks/useCarouselKeylines.ts
+function useCarouselKeylines({
+  containerWidth,
+  preferredItemWidth = 300,
+  layout = "multi-browse",
+  itemSpacing = CarouselTokens.itemSpacing,
+  contentPadding = CarouselTokens.contentPadding,
+  totalItems,
+  scrollX: _scrollX = 0
+}) {
+  return useMemo(() => {
+    const safeContainerWidth = Math.max(containerWidth, 100);
+    const smallWidth = Math.min(
+      Math.max(
+        CarouselTokens.smallItemMin,
+        Math.round(safeContainerWidth * 0.1)
+      ),
+      CarouselTokens.smallItemMax
+    );
+    let largeWidth = preferredItemWidth;
+    let mediumWidth = Math.round(preferredItemWidth * 0.65);
+    switch (layout) {
+      case "hero": {
+        const availableWidth = safeContainerWidth - contentPadding * 2 - smallWidth - itemSpacing;
+        largeWidth = Math.max(160, availableWidth);
+        mediumWidth = largeWidth;
+        break;
+      }
+      case "center-aligned-hero": {
+        const availableWidth = safeContainerWidth - contentPadding * 2 - smallWidth * 2 - itemSpacing * 2;
+        largeWidth = Math.max(160, availableWidth);
+        mediumWidth = largeWidth;
+        break;
+      }
+      case "uncontained":
+      case "uncontained-multi-aspect": {
+        largeWidth = Math.min(
+          preferredItemWidth,
+          safeContainerWidth - contentPadding * 2
+        );
+        mediumWidth = largeWidth;
+        break;
+      }
+      case "full-screen": {
+        largeWidth = safeContainerWidth;
+        mediumWidth = safeContainerWidth;
+        break;
+      }
+      default: {
+        const maxLargeWidth = safeContainerWidth - contentPadding * 2 - smallWidth - itemSpacing;
+        largeWidth = Math.min(preferredItemWidth, Math.max(160, maxLargeWidth));
+        mediumWidth = Math.max(smallWidth + 16, Math.round(largeWidth * 0.65));
+        break;
+      }
+    }
+    const keylines = [];
+    if (layout === "hero") {
+      const smallMask = Math.max(
+        0,
+        Math.min(
+          100,
+          Math.round((largeWidth - smallWidth) / largeWidth * 100)
+        )
+      );
+      keylines.push(
+        {
+          offset: contentPadding,
+          width: largeWidth,
+          type: "large",
+          maskClip: 0
+        },
+        {
+          offset: contentPadding + largeWidth + itemSpacing,
+          width: smallWidth,
+          type: "small",
+          maskClip: smallMask
+        }
+      );
+    } else if (layout === "center-aligned-hero") {
+      const smallMask = Math.max(
+        0,
+        Math.min(
+          100,
+          Math.round((largeWidth - smallWidth) / largeWidth * 100)
+        )
+      );
+      keylines.push(
+        {
+          offset: contentPadding,
+          width: smallWidth,
+          type: "small",
+          maskClip: smallMask
+        },
+        {
+          offset: contentPadding + smallWidth + itemSpacing,
+          width: largeWidth,
+          type: "large",
+          maskClip: 0
+        },
+        {
+          offset: contentPadding + smallWidth + itemSpacing + largeWidth + itemSpacing,
+          width: smallWidth,
+          type: "small",
+          maskClip: smallMask
+        }
+      );
+    } else if (layout === "multi-browse") {
+      const mediumMask = Math.max(
+        0,
+        Math.min(
+          100,
+          Math.round((largeWidth - mediumWidth) / largeWidth * 100)
+        )
+      );
+      const smallMask = Math.max(
+        0,
+        Math.min(
+          100,
+          Math.round((largeWidth - smallWidth) / largeWidth * 100)
+        )
+      );
+      const availableWidth = safeContainerWidth - contentPadding * 2;
+      const numLarge = Math.max(
+        1,
+        Math.floor((availableWidth + itemSpacing) / (largeWidth + itemSpacing))
+      );
+      let offset = contentPadding;
+      for (let k = 0; k < numLarge; k++) {
+        keylines.push({
+          offset,
+          width: largeWidth,
+          type: "large",
+          maskClip: 0
+        });
+        offset += largeWidth + itemSpacing;
+      }
+      keylines.push({
+        offset,
+        width: mediumWidth,
+        type: "medium",
+        maskClip: mediumMask
+      });
+      offset += mediumWidth + itemSpacing;
+      keylines.push({
+        offset,
+        width: smallWidth,
+        type: "small",
+        maskClip: smallMask
+      });
+    } else {
+      keylines.push({
+        offset: contentPadding,
+        width: largeWidth,
+        type: "large",
+        maskClip: 0
+      });
+    }
+    const getItemRestWidth = (i) => {
+      if (layout === "full-screen") return safeContainerWidth;
+      if (layout === "uncontained") return largeWidth;
+      if (layout === "uncontained-multi-aspect") {
+        const ratios = [1.77, 1.33, 1, 0.56];
+        const ratio = ratios[i % ratios.length];
+        return Math.round(Math.min(largeWidth, 220 * ratio));
+      }
+      if (layout === "hero") return i === 0 ? largeWidth : smallWidth;
+      if (layout === "center-aligned-hero")
+        return i === 0 || i === totalItems - 1 ? smallWidth : largeWidth;
+      const pattern = [largeWidth, largeWidth, mediumWidth, smallWidth];
+      return pattern[i % pattern.length];
+    };
+    const snapPositions = [];
+    let currentOffset = 0;
+    const itemLayoutWidth = layout === "full-screen" ? safeContainerWidth : largeWidth;
+    for (let i = 0; i < totalItems; i++) {
+      snapPositions.push(currentOffset);
+      currentOffset += itemLayoutWidth + itemSpacing;
+    }
+    const getItemWidth = (_index) => {
+      if (layout === "full-screen") return safeContainerWidth;
+      return largeWidth;
+    };
+    const getItemMaskClip = (index) => {
+      if (layout === "full-screen" || layout === "uncontained" || layout === "uncontained-multi-aspect") {
+        return 0;
+      }
+      const itemW = getItemRestWidth(index);
+      if (itemW >= largeWidth || largeWidth <= 0) return 0;
+      return Math.max(
+        0,
+        Math.min(100, Math.round((largeWidth - itemW) / largeWidth * 100))
+      );
+    };
+    const getItemParallaxOffset = (index) => {
+      const maskClip = getItemMaskClip(index);
+      if (maskClip <= 0) return 0;
+      return calculateParallaxOffset(0, maskClip, largeWidth);
+    };
+    let maxAccumulatedShift = 0;
+    if (layout === "hero") {
+      maxAccumulatedShift = Math.max(
+        0,
+        (totalItems - 1) * (largeWidth - smallWidth)
+      );
+    } else if (layout === "center-aligned-hero") {
+      maxAccumulatedShift = Math.max(
+        0,
+        Math.min(totalItems, 2) * (largeWidth - smallWidth)
+      );
+    } else if (layout === "multi-browse") {
+      const availableWidth = safeContainerWidth - contentPadding * 2;
+      const numLarge = Math.max(
+        1,
+        Math.floor((availableWidth + itemSpacing) / (largeWidth + itemSpacing))
+      );
+      const nonLargeItems = Math.max(0, totalItems - numLarge);
+      if (nonLargeItems > 0) {
+        const mediumClipped = largeWidth - mediumWidth;
+        const smallClipped = largeWidth - smallWidth;
+        const numSmall = Math.max(0, nonLargeItems - 1);
+        maxAccumulatedShift = mediumClipped + numSmall * smallClipped;
+      }
+    }
+    return {
+      largeWidth,
+      mediumWidth,
+      smallWidth,
+      keylines,
+      snapPositions,
+      maxAccumulatedShift,
+      getItemWidth,
+      getItemMaskClip,
+      getItemParallaxOffset
+    };
+  }, [
+    containerWidth,
+    preferredItemWidth,
+    layout,
+    itemSpacing,
+    contentPadding,
+    totalItems
+  ]);
+}
+function calculateMaskClipForOffset(itemLeftInViewport, containerWidth, largeWidth, mediumWidth, smallWidth, contentPadding = 16, layout = "multi-browse") {
+  if (layout === "full-screen" || layout === "uncontained" || layout === "uncontained-multi-aspect" || largeWidth <= 0) {
+    return 0;
+  }
+  const mediumMask = Math.max(
+    0,
+    Math.min(100, (largeWidth - mediumWidth) / largeWidth * 100)
+  );
+  const smallMask = Math.max(
+    0,
+    Math.min(100, (largeWidth - smallWidth) / largeWidth * 100)
+  );
+  const trailingFocalThreshold = containerWidth - contentPadding - mediumWidth - (largeWidth - mediumWidth);
+  const trailingMediumThreshold = containerWidth - contentPadding - smallWidth;
+  const trailingEndThreshold = containerWidth - contentPadding;
+  const leadingThreshold = contentPadding;
+  if (itemLeftInViewport < leadingThreshold) {
+    const dist = leadingThreshold - itemLeftInViewport;
+    const progress = Math.min(1, Math.max(0, dist / largeWidth));
+    return Math.min(100, Math.max(0, progress * smallMask));
+  }
+  if (itemLeftInViewport > trailingFocalThreshold) {
+    if (itemLeftInViewport < trailingMediumThreshold) {
+      const range2 = Math.max(
+        1,
+        trailingMediumThreshold - trailingFocalThreshold
+      );
+      const progress2 = Math.min(
+        1,
+        Math.max(0, (itemLeftInViewport - trailingFocalThreshold) / range2)
+      );
+      return progress2 * mediumMask;
+    }
+    const range = Math.max(1, trailingEndThreshold - trailingMediumThreshold);
+    const progress = Math.min(
+      1,
+      Math.max(0, (itemLeftInViewport - trailingMediumThreshold) / range)
+    );
+    return mediumMask + progress * (smallMask - mediumMask);
+  }
+  return 0;
+}
+function calculateParallaxOffset(_itemLeftInViewport, maskClipPercent, largeWidth) {
+  if (maskClipPercent <= 0 || largeWidth <= 0) return 0;
+  return -Math.round(maskClipPercent / 100 * (largeWidth * 0.2));
+}
+function CarouselScrollClient(_a) {
+  var _b = _a, {
+    children,
+    items,
+    renderItem,
+    layout = "multi-browse",
+    preferredItemWidth = 300,
+    itemSpacing = 8,
+    contentPadding = 16,
+    verticalPadding = 8,
+    userScrollEnabled = true,
+    totalItemsCount,
+    className,
+    style
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "renderItem",
+    "layout",
+    "preferredItemWidth",
+    "itemSpacing",
+    "contentPadding",
+    "verticalPadding",
+    "userScrollEnabled",
+    "totalItemsCount",
+    "className",
+    "style"
+  ]);
+  const trackRef = React23.useRef(null);
+  const [containerWidth, setContainerWidth] = React23.useState(600);
+  const rafIdRef = React23.useRef(null);
+  const isDraggingRef = React23.useRef(false);
+  const hasMovedRef = React23.useRef(false);
+  const startPosRef = React23.useRef(0);
+  const startScrollRef = React23.useRef(0);
+  const keylines = useCarouselKeylines({
+    containerWidth,
+    preferredItemWidth,
+    layout,
+    itemSpacing,
+    contentPadding,
+    totalItems: totalItemsCount
+  });
+  const handleScroll = React23.useCallback(() => {
+    if (rafIdRef.current !== null) return;
+    rafIdRef.current = requestAnimationFrame(() => {
+      var _a2, _b2;
+      const track = trackRef.current;
+      if (track) {
+        const scrollVal = layout === "full-screen" ? track.scrollTop : track.scrollLeft;
+        track.style.setProperty("--carousel-scroll-left", `${scrollVal}px`);
+        if (layout !== "full-screen") {
+          const prefersReducedMotion = typeof window !== "undefined" && ((_b2 = (_a2 = window.matchMedia) == null ? void 0 : _a2.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b2.matches);
+          let accumulatedShift = 0;
+          const items2 = track.children;
+          for (let i = 0; i < items2.length; i++) {
+            const itemEl = items2[i];
+            if (!itemEl || itemEl.getAttribute("role") !== "group") continue;
+            if (prefersReducedMotion) {
+              itemEl.style.clipPath = "none";
+              itemEl.style.transform = "none";
+              const innerContent2 = itemEl.firstElementChild;
+              if (innerContent2) innerContent2.style.transform = "none";
+              continue;
+            }
+            const nativeOffset = itemEl.offsetLeft - scrollVal;
+            const visualOffset = nativeOffset - accumulatedShift;
+            const maskPercent = calculateMaskClipForOffset(
+              visualOffset,
+              containerWidth,
+              keylines.largeWidth,
+              keylines.mediumWidth,
+              keylines.smallWidth,
+              contentPadding,
+              layout
+            );
+            const clippedPixels = maskPercent / 100 * keylines.largeWidth;
+            itemEl.style.transform = accumulatedShift > 0 ? `translateX(${-accumulatedShift}px)` : "none";
+            itemEl.style.clipPath = maskPercent > 0 ? `inset(0px ${maskPercent}% 0px 0px round 28px)` : "none";
+            const innerContent = itemEl.firstElementChild;
+            if (innerContent) {
+              const parallaxX = calculateParallaxOffset(
+                visualOffset,
+                maskPercent,
+                keylines.largeWidth
+              );
+              innerContent.style.transform = parallaxX !== 0 ? `translateX(${parallaxX}px)` : "none";
+            }
+            accumulatedShift += clippedPixels;
+          }
+        }
+      }
+      rafIdRef.current = null;
+    });
+  }, [
+    layout,
+    containerWidth,
+    keylines.largeWidth,
+    keylines.mediumWidth,
+    keylines.smallWidth,
+    contentPadding
+  ]);
+  React23.useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const updateWidth = () => {
+      if (track.clientWidth > 0) {
+        setContainerWidth(track.clientWidth);
+      }
+    };
+    updateWidth();
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, []);
+  React23.useEffect(() => {
+    handleScroll();
+  }, [handleScroll]);
+  React23.useEffect(() => {
+    return () => {
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+    };
+  }, []);
+  const handlePointerDown = React23.useCallback(
+    (e) => {
+      var _a2, _b2;
+      if (!userScrollEnabled || e.button !== 0) return;
+      const track = trackRef.current;
+      if (!track) return;
+      isDraggingRef.current = true;
+      hasMovedRef.current = false;
+      startPosRef.current = layout === "full-screen" ? e.clientY : e.clientX;
+      startScrollRef.current = layout === "full-screen" ? track.scrollTop : track.scrollLeft;
+      try {
+        (_b2 = (_a2 = e.target).setPointerCapture) == null ? void 0 : _b2.call(_a2, e.pointerId);
+      } catch (e2) {
+      }
+    },
+    [userScrollEnabled, layout]
+  );
+  const handlePointerMove = React23.useCallback(
+    (e) => {
+      if (!isDraggingRef.current || !trackRef.current) return;
+      const currentPos = layout === "full-screen" ? e.clientY : e.clientX;
+      const delta = currentPos - startPosRef.current;
+      if (Math.abs(delta) > 4) {
+        hasMovedRef.current = true;
+      }
+      if (hasMovedRef.current) {
+        if (layout === "full-screen") {
+          trackRef.current.scrollTop = startScrollRef.current - delta;
+        } else {
+          trackRef.current.scrollLeft = startScrollRef.current - delta;
+        }
+      }
+    },
+    [layout]
+  );
+  const handlePointerUp = React23.useCallback(
+    (e) => {
+      var _a2, _b2;
+      if (!isDraggingRef.current) return;
+      isDraggingRef.current = false;
+      try {
+        (_b2 = (_a2 = e.target).releasePointerCapture) == null ? void 0 : _b2.call(_a2, e.pointerId);
+      } catch (e2) {
+      }
+    },
+    []
+  );
+  const handleClickCapture = React23.useCallback((e) => {
+    if (hasMovedRef.current) {
+      e.stopPropagation();
+      e.preventDefault();
+      hasMovedRef.current = false;
+    }
+  }, []);
+  const scrollToIndex = React23.useCallback(
+    (index) => {
+      const track = trackRef.current;
+      if (!track) return;
+      const itemEl = track.children[index];
+      if (!itemEl) return;
+      const targetPos = Math.max(0, itemEl.offsetLeft - contentPadding);
+      track.scrollTo({
+        left: targetPos,
+        behavior: "smooth"
+      });
+    },
+    [contentPadding]
+  );
+  const { focusedIndex, handleKeyDown, getItemA11yProps } = useCarouselA11y({
+    totalItems: totalItemsCount,
+    scrollToIndex
+  });
+  const isFullScreen = layout === "full-screen";
+  const isHero = layout === "hero" || layout === "center-aligned-hero";
+  const trackClasses = cn(
+    // Base layout & GPU containment
+    "relative box-border select-none [contain:layout_style]",
+    userScrollEnabled && "cursor-grab active:cursor-grabbing",
+    // Scrollbar hide
+    "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+    // Full-screen: vertical snap column
+    isFullScreen ? "flex flex-col flex-1 min-h-0 overflow-x-hidden overflow-y-auto p-0 gap-0 [scroll-snap-type:y_mandatory] [touch-action:pan-y]" : "flex flex-row items-stretch overflow-x-auto overflow-y-hidden [-webkit-overflow-scrolling:touch] [touch-action:pan-x]",
+    // Snap for hero/center-aligned-hero
+    isHero && !isFullScreen && "[scroll-snap-type:x_mandatory]",
+    // Disabled
+    !userScrollEnabled && "overflow-x-hidden pointer-events-none [touch-action:none]",
+    className
+  );
+  const trackStyle = isFullScreen ? __spreadValues({}, style) : __spreadValues({
+    paddingLeft: `${contentPadding}px`,
+    paddingRight: layout === "uncontained" || layout === "uncontained-multi-aspect" ? 0 : `${contentPadding}px`,
+    scrollPaddingLeft: `${contentPadding}px`,
+    scrollPaddingRight: `${contentPadding}px`,
+    paddingTop: `${verticalPadding}px`,
+    paddingBottom: `${verticalPadding}px`,
+    gap: `${itemSpacing}px`
+  }, style);
+  const renderSlides = () => {
+    if (items && renderItem) {
+      return items.map((item, index) => {
+        const itemWidth = keylines.largeWidth;
+        const maskClip = keylines.getItemMaskClip(index);
+        const parallax = keylines.getItemParallaxOffset(index);
+        const a11yProps = getItemA11yProps(index);
+        const itemKey = typeof item === "object" && item !== null && "id" in item ? item.id : typeof item === "object" && item !== null && "key" in item ? item.key : index;
+        return /* @__PURE__ */ jsx(
+          CarouselItem,
+          __spreadProps(__spreadValues({
+            index,
+            totalItems: totalItemsCount,
+            layout,
+            width: itemWidth,
+            minContentWidth: keylines.largeWidth,
+            maskClipPercent: maskClip,
+            parallaxOffset: parallax,
+            isFocused: focusedIndex === index
+          }, a11yProps), {
+            children: renderItem(item, index)
+          }),
+          itemKey
+        );
+      });
+    }
+    return React23.Children.map(children, (child, index) => {
+      if (!React23.isValidElement(child)) return child;
+      const itemWidth = keylines.largeWidth;
+      const maskClip = keylines.getItemMaskClip(index);
+      const parallax = keylines.getItemParallaxOffset(index);
+      const a11yProps = getItemA11yProps(index);
+      const childKey = child.key != null ? child.key : index;
+      return /* @__PURE__ */ jsx(
+        CarouselItem,
+        __spreadProps(__spreadValues({
+          index,
+          totalItems: totalItemsCount,
+          layout,
+          width: itemWidth,
+          minContentWidth: keylines.largeWidth,
+          maskClipPercent: maskClip,
+          parallaxOffset: parallax,
+          isFocused: focusedIndex === index
+        }, a11yProps), {
+          children: child
+        }),
+        childKey
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    __spreadProps(__spreadValues({
+      ref: trackRef,
+      "aria-roledescription": "carousel",
+      "aria-label": props["aria-label"] || "Content carousel",
+      tabIndex: 0,
+      className: trackClasses,
+      style: trackStyle,
+      onScroll: handleScroll,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onClickCapture: handleClickCapture,
+      onKeyDown: handleKeyDown
+    }, props), {
+      children: [
+        renderSlides(),
+        !isFullScreen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "shrink-0 pointer-events-none",
+            style: {
+              width: 0,
+              marginRight: keylines.maxAccumulatedShift > 0 ? `-${keylines.maxAccumulatedShift}px` : void 0
+            }
+          }
+        )
+      ]
+    })
+  );
+}
+function Carousel(_a) {
+  var _b = _a, {
+    children,
+    items,
+    renderItem,
+    layout = "multi-browse",
+    preferredItemWidth = 300,
+    itemSpacing = 8,
+    contentPadding = 16,
+    verticalPadding = 8,
+    isExpanded: controlledExpanded,
+    onShowAllClick,
+    showAllLabel = "Show all",
+    userScrollEnabled = true,
+    className,
+    style
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "renderItem",
+    "layout",
+    "preferredItemWidth",
+    "itemSpacing",
+    "contentPadding",
+    "verticalPadding",
+    "isExpanded",
+    "onShowAllClick",
+    "showAllLabel",
+    "userScrollEnabled",
+    "className",
+    "style"
+  ]);
+  const [internalExpanded, setInternalExpanded] = React23.useState(false);
+  const isExpanded = controlledExpanded != null ? controlledExpanded : internalExpanded;
+  const totalItemsCount = React23.useMemo(() => {
+    if (items) return items.length;
+    return React23.Children.count(children);
+  }, [items, children]);
+  const handleShowAllToggle = React23.useCallback(() => {
+    if (onShowAllClick) {
+      onShowAllClick();
+    } else {
+      setInternalExpanded((prev) => !prev);
+    }
+  }, [onShowAllClick]);
+  const isFullScreen = layout === "full-screen";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative w-full flex flex-col gap-3 box-border min-h-0",
+        // Full-screen: propagate height to track
+        isFullScreen && "flex-1",
+        className
+      ),
+      style,
+      children: [
+        !isFullScreen && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between",
+            style: { padding: `0 ${contentPadding}px` },
+            children: [
+              props["aria-label"] && /* @__PURE__ */ jsx("h3", { className: "m-0 text-(length:--md-sys-typescale-title-medium-size,1.125rem) font-medium text-(--md-sys-color-on-surface,currentColor)", children: props["aria-label"] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "inline-flex items-center justify-center min-h-12 min-w-12 px-4 py-2",
+                    "rounded-[20px] border border-(--md-sys-color-outline-variant,rgba(121,116,126,0.3))",
+                    "bg-transparent text-(--md-sys-color-primary,#6750a4) font-medium text-[0.875rem]",
+                    "cursor-pointer outline-none transition-colors duration-200",
+                    "hover:bg-(--md-sys-color-surface-container-high,rgba(103,80,164,0.08))",
+                    "focus-visible:outline-[3px] focus-visible:outline-(--md-sys-color-secondary,#625b71) focus-visible:outline-offset-2"
+                  ),
+                  onClick: handleShowAllToggle,
+                  "aria-expanded": isExpanded,
+                  "aria-label": isExpanded ? "Collapse carousel view" : `${showAllLabel} (${totalItemsCount} items)`,
+                  children: isExpanded ? "Show carousel" : showAllLabel
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded ? /* @__PURE__ */ jsx(
+          CarouselGrid,
+          {
+            items,
+            renderItem,
+            preferredItemWidth,
+            children
+          }
+        ) : /* @__PURE__ */ jsx(
+          CarouselScrollClient,
+          __spreadProps(__spreadValues({
+            items,
+            renderItem,
+            layout,
+            preferredItemWidth,
+            itemSpacing,
+            contentPadding,
+            verticalPadding,
+            userScrollEnabled,
+            totalItemsCount
+          }, props), {
+            children
+          })
+        )
+      ]
+    }
+  );
+}
 var SHAPE_KEY_TIMES = "0; 0.14; 0.14; 0.29; 0.29; 0.43; 0.43; 0.57; 0.57; 0.71; 0.71; 0.86; 0.86; 1";
 var SHAPE_KEY_SPLINES = [
   "0.5 0.2 0 0.8",
@@ -346,11 +1609,11 @@ var ROTATE_KEY_SPLINES = [
 var ROTATE_VALUES = "0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24";
 var DETERMINATE_CIRCLE = "M24 7 C34.49 7 41 13.51 41 24 C41 34.49 34.49 41 24 41 C13.51 41 7 34.49 7 24 C7 13.51 13.51 7 24 7 Z";
 var DETERMINATE_SOFT_BURST = "M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z";
-var IndeterminateSvg = React18.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React23.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React18.useState(false);
-  React18.useEffect(() => {
+  const [ready, setReady] = React23.useState(false);
+  React23.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -395,7 +1658,7 @@ var IndeterminateSvg = React18.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React18.memo(function DeterminateSvg2({
+var DeterminateSvg = React23.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -420,7 +1683,7 @@ var DeterminateSvg = React18.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React18.forwardRef(
+var LoadingIndicator = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -555,7 +1818,7 @@ var ADDITIONAL_ROTATION_EASE_DURATION = 500;
 var DEFAULT_MIN_PROGRESS = 0.1;
 var DEFAULT_MAX_PROGRESS = 0.8;
 var PROGRESS_CYCLE_DURATION = 1500;
-var CircularProgress = React18.forwardRef(
+var CircularProgress = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -609,19 +1872,19 @@ var CircularProgress = React18.forwardRef(
     const shouldShowDeterminateTrack = showTrack === "auto" ? true : showTrack;
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React18.useMemo(
+    const effectiveAmplitude = React23.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React18.useMemo(
+    const effectiveWavelength = React23.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const resolvedAmplitudeRange = React18.useMemo(
+    const resolvedAmplitudeRange = React23.useMemo(
       () => amplitudeRange != null ? amplitudeRange : [0, effectiveAmplitude],
       [amplitudeRange, effectiveAmplitude]
     );
-    const wavyActivePath = React18.useMemo(
+    const wavyActivePath = React23.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -630,8 +1893,8 @@ var CircularProgress = React18.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React18.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React18.useMemo(
+    const circumference = React23.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React23.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -639,17 +1902,17 @@ var CircularProgress = React18.forwardRef(
     const trackOffset = isDeterminate ? activeAngularFraction + gapForTrack : 0;
     const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
     const ActiveCircleElem = m.circle;
-    const indeterminateSvgRef = React18.useRef(null);
-    const indeterminateTrackRef = React18.useRef(null);
-    const indeterminateActiveRef = React18.useRef(null);
-    const indeterminateWavyTrackPathRef = React18.useRef(null);
-    const indeterminateWavyActivePathRef = React18.useRef(null);
-    const determinateWavyActivePathRef = React18.useRef(null);
-    const determinateWavyTrackPathRef = React18.useRef(null);
-    const cachedPathLengthRef = React18.useRef(0);
+    const indeterminateSvgRef = React23.useRef(null);
+    const indeterminateTrackRef = React23.useRef(null);
+    const indeterminateActiveRef = React23.useRef(null);
+    const indeterminateWavyTrackPathRef = React23.useRef(null);
+    const indeterminateWavyActivePathRef = React23.useRef(null);
+    const determinateWavyActivePathRef = React23.useRef(null);
+    const determinateWavyTrackPathRef = React23.useRef(null);
+    const cachedPathLengthRef = React23.useRef(0);
     const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 0);
     const amplitudeMV = useMotionValue(isWavy ? effectiveAmplitude : 0);
-    React18.useEffect(() => {
+    React23.useEffect(() => {
       if (isDeterminate) {
         animate(fractionMV, clampedValue / 100, {
           duration: 0.4,
@@ -657,7 +1920,7 @@ var CircularProgress = React18.forwardRef(
         });
       }
     }, [clampedValue, isDeterminate, fractionMV]);
-    React18.useEffect(() => {
+    React23.useEffect(() => {
       if (!isDeterminate || !isWavy) return;
       const fraction = clampedValue / 100;
       let targetAmp = effectiveAmplitude;
@@ -677,7 +1940,7 @@ var CircularProgress = React18.forwardRef(
       amplitudeMV,
       determinateAnimation
     ]);
-    React18.useLayoutEffect(() => {
+    React23.useLayoutEffect(() => {
       if (!isWavy || !wavyActivePath) {
         cachedPathLengthRef.current = circumference;
         return;
@@ -1054,9 +2317,9 @@ var CircularProgress = React18.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React18.useState(0);
-  const observerRef = React18.useRef(null);
-  const ref = React18.useCallback((node) => {
+  const [width, setWidth] = React23.useState(0);
+  const observerRef = React23.useRef(null);
+  const ref = React23.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -1070,7 +2333,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React18.useEffect(() => {
+  React23.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -1080,7 +2343,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React18.useCallback(
+  return React23.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -1094,7 +2357,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React18.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React23.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -1170,7 +2433,7 @@ var FlatLinearTrack = React18.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React18.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React23.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -1189,13 +2452,13 @@ var WavyLinearTrack = React18.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React18.useId();
+  const titleId = React23.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React18.useRef(null);
-  const trackPathRef = React18.useRef(null);
+  const activePathRef = React23.useRef(null);
+  const trackPathRef = React23.useRef(null);
   const amplitudeMV = useMotionValue(amplitude);
   const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React18.useEffect(() => {
+  React23.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -1383,7 +2646,7 @@ var WavyLinearTrack = React18.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React18.forwardRef(
+var LinearProgress = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -1424,10 +2687,10 @@ var LinearProgress = React18.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React18.useRef(null);
+    const containerRef = React23.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React18.useState(false);
-    React18.useEffect(() => {
+    const [isRtl, setIsRtl] = React23.useState(false);
+    React23.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -1435,16 +2698,16 @@ var LinearProgress = React18.forwardRef(
     }, []);
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
     const isWavy = shape === "wavy" || resolvedTrackShape === "wavy";
-    const effectiveAmplitude = React18.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React18.useMemo(
+    const effectiveAmplitude = React23.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React23.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React18.useMemo(
+    const shouldShowStop = React23.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && showStopIndicator !== false,
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React18.useMemo(
+    const stopSize = React23.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -1519,7 +2782,7 @@ var LinearProgress = React18.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React18.forwardRef((props, ref) => {
+var ProgressIndicator = React23.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsx(CircularProgress, __spreadValues({ ref }, props));
   }
@@ -1773,7 +3036,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React18.forwardRef(
+var ButtonComponent = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1839,9 +3102,9 @@ var ButtonComponent = React18.forwardRef(
       borderWidth: outlineWidth != null ? outlineWidth : colorStyle === "outlined" ? sizeTokens.outlineWidth : 0,
       borderStyle: colorStyle === "outlined" ? "solid" : void 0
     }, style);
-    const labelText = React18.useMemo(() => {
+    const labelText = React23.useMemo(() => {
       if (asChild) {
-        const child = React18.Children.only(children);
+        const child = React23.Children.only(children);
         return child.props.children;
       }
       return children;
@@ -1849,8 +3112,8 @@ var ButtonComponent = React18.forwardRef(
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = useMotionValue(animateRadius);
-    const asChildRef = React18.useRef(null);
-    const mergedRef = React18.useCallback(
+    const asChildRef = React23.useRef(null);
+    const mergedRef = React23.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -1859,14 +3122,14 @@ var ButtonComponent = React18.forwardRef(
       },
       [ref]
     );
-    React18.useEffect(() => {
+    React23.useEffect(() => {
       if (!asChild) return;
       return motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       });
     }, [motionRadius, asChild]);
-    React18.useEffect(() => {
+    React23.useEffect(() => {
       if (!asChild) return;
       const controls = springAnimate(motionRadius, animateRadius);
       return () => controls.stop();
@@ -1874,14 +3137,14 @@ var ButtonComponent = React18.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React18.useCallback(
+    const handleClick = React23.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React18.useCallback(
+    const handleKeyDown = React23.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -1960,17 +3223,17 @@ var ButtonComponent = React18.forwardRef(
         isSelected && selectedIcon ? "selected-icon" : "icon"
       ) })
     ] });
-    const handleAsChildPointerDown = React18.useCallback(
+    const handleAsChildPointerDown = React23.useCallback(
       (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
       },
       [motionRadius, pressedRadius, onPointerDown]
     );
-    const handleAsChildPointerUp = React18.useCallback(() => {
+    const handleAsChildPointerUp = React23.useCallback(() => {
       springAnimate(motionRadius, animateRadius);
     }, [motionRadius, animateRadius]);
-    const handlePointerDown = React18.useCallback(
+    const handlePointerDown = React23.useCallback(
       (e) => {
         onPointerDown(e);
       },
@@ -1980,7 +3243,7 @@ var ButtonComponent = React18.forwardRef(
       const strippedProps = __spreadValues({}, restProps);
       for (const key of MOTION_PROP_KEYS) delete strippedProps[key];
       const htmlProps = strippedProps;
-      const child = React18.Children.only(children);
+      const child = React23.Children.only(children);
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
         Slot,
         __spreadProps(__spreadValues({
@@ -1997,7 +3260,7 @@ var ButtonComponent = React18.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React18.cloneElement(child, { children: innerContent })
+          children: React23.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -2025,13 +3288,13 @@ var ButtonComponent = React18.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React18.memo(ButtonComponent);
+var Button = React23.memo(ButtonComponent);
 var VARIANT_FONT = {
   outlined: "'Material Symbols Outlined'",
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React18.forwardRef(
+var IconComponent = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -2097,8 +3360,8 @@ var IconComponent = React18.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React18.memo(IconComponent);
-var ScrollArea = React18.forwardRef(
+var Icon = React23.memo(IconComponent);
+var ScrollArea = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2119,15 +3382,15 @@ var ScrollArea = React18.forwardRef(
       "viewportRef",
       "viewportProps"
     ]);
-    const [isTouchDevice, setIsTouchDevice] = React18.useState(false);
-    React18.useEffect(() => {
+    const [isTouchDevice, setIsTouchDevice] = React23.useState(false);
+    React23.useEffect(() => {
       if (typeof window !== "undefined") {
         setIsTouchDevice(
           "ontouchstart" in window || navigator.maxTouchPoints > 0
         );
       }
     }, []);
-    const resolvedType = React18.useMemo(() => {
+    const resolvedType = React23.useMemo(() => {
       if (type === "hover" && isTouchDevice) {
         return "scroll";
       }
@@ -2178,7 +3441,7 @@ var ScrollArea = React18.forwardRef(
   }
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollAreaScrollbar = React18.forwardRef((_a, ref) => {
+var ScrollAreaScrollbar = React23.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsx(
     RadixScrollArea.Scrollbar,
@@ -2208,7 +3471,7 @@ var ScrollAreaScrollbar = React18.forwardRef((_a, ref) => {
   );
 });
 ScrollAreaScrollbar.displayName = RadixScrollArea.Scrollbar.displayName;
-var ScrollAreaCorner = React18.forwardRef((_a, ref) => {
+var ScrollAreaCorner = React23.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadixScrollArea.Corner,
@@ -2404,7 +3667,7 @@ function buildWavePath(startX, endX, amplitude = 2, wavelength = 32, yCenter = 4
   }
   return d;
 }
-var DividerImpl = React18.forwardRef(
+var DividerImpl = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "full-bleed",
@@ -2524,9 +3787,9 @@ var DividerImpl = React18.forwardRef(
   }
 );
 DividerImpl.displayName = "Divider";
-var Divider = React18.memo(DividerImpl);
-var ListContext = React18.createContext(null);
-var useListContext = () => React18.useContext(ListContext);
+var Divider = React23.memo(DividerImpl);
+var ListContext = React23.createContext(null);
+var useListContext = () => React23.useContext(ListContext);
 var LIST_TOKENS = {
   oneLineHeight: 56,
   twoLineHeight: 72,
@@ -2591,9 +3854,9 @@ function resolveItemId(item) {
   return String(item);
 }
 function isListItem(child) {
-  return React18.isValidElement(child) && child.props != null && typeof child.props === "object" && "value" in child.props;
+  return React23.isValidElement(child) && child.props != null && typeof child.props === "object" && "value" in child.props;
 }
-var ListImpl = React18.forwardRef(
+var ListImpl = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2624,12 +3887,12 @@ var ListImpl = React18.forwardRef(
       "innerRadius",
       "children"
     ]);
-    const listRef = React18.useRef(null);
-    const [draggedOrder, setDraggedOrder] = React18.useState(
+    const listRef = React23.useRef(null);
+    const [draggedOrder, setDraggedOrder] = React23.useState(
       null
     );
-    React18.useImperativeHandle(ref, () => listRef.current);
-    const [selectedState, setSelectedState] = React18.useState(
+    React23.useImperativeHandle(ref, () => listRef.current);
+    const [selectedState, setSelectedState] = React23.useState(
       () => {
         var _a2;
         const initialValue = (_a2 = value != null ? value : defaultValue) != null ? _a2 : [];
@@ -2639,13 +3902,13 @@ var ListImpl = React18.forwardRef(
       }
     );
     const isControlled = value !== void 0;
-    const selectedValues = React18.useMemo(() => {
+    const selectedValues = React23.useMemo(() => {
       if (isControlled) {
         return new Set(Array.isArray(value) ? value : value ? [value] : []);
       }
       return selectedState;
     }, [isControlled, value, selectedState]);
-    const onItemChange = React18.useCallback(
+    const onItemChange = React23.useCallback(
       (itemValue, selected) => {
         const nextSet = new Set(selectedValues);
         if (selectionMode === "single-select") {
@@ -2677,11 +3940,11 @@ var ListImpl = React18.forwardRef(
         coordinateGetter: sortableKeyboardCoordinates
       })
     );
-    const itemIds = React18.useMemo(
+    const itemIds = React23.useMemo(
       () => items ? items.map(resolveItemId) : [],
       [items]
     );
-    const currentOrder = React18.useMemo(
+    const currentOrder = React23.useMemo(
       () => draggedOrder || itemIds,
       [draggedOrder, itemIds]
     );
@@ -2741,20 +4004,20 @@ var ListImpl = React18.forwardRef(
       }
       (_a2 = focusableItems[nextIndex]) == null ? void 0 : _a2.focus();
     };
-    const childrenArray = React18.Children.toArray(children);
+    const childrenArray = React23.Children.toArray(children);
     const listItemCount = childrenArray.filter(isListItem).length;
     let currentListItemIndex = 0;
-    const processedChildren = React18.Children.map(children, (child) => {
+    const processedChildren = React23.Children.map(children, (child) => {
       if (!isListItem(child)) return child;
       const childValue = child.props.value;
       const index = reorderable && currentOrder.length > 0 ? currentOrder.indexOf(String(childValue)) : currentListItemIndex;
       currentListItemIndex++;
-      return React18.cloneElement(
+      return React23.cloneElement(
         child,
         { _listIndex: index }
       );
     });
-    const contextValue = React18.useMemo(
+    const contextValue = React23.useMemo(
       () => ({
         selectionMode,
         variant,
@@ -2778,7 +4041,7 @@ var ListImpl = React18.forwardRef(
         innerRadius
       ]
     );
-    const dndId = React18.useId();
+    const dndId = React23.useId();
     const isListbox = selectionMode === "single-select" || selectionMode === "multi-select";
     const role = isListbox ? "listbox" : "list";
     const ariaMultiselectable = selectionMode === "multi-select" ? true : void 0;
@@ -2825,13 +4088,13 @@ var ListImpl = React18.forwardRef(
   }
 );
 ListImpl.displayName = "List";
-var List = React18.memo(ListImpl);
+var List = React23.memo(ListImpl);
 var INSET_CLASSES = {
   icon: "pl-[56px]",
   avatar: "pl-[72px]",
   custom: "pl-4"
 };
-var ListDividerImpl = React18.forwardRef(
+var ListDividerImpl = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, inset = false, insetType = "avatar" } = _b, props = __objRest(_b, ["className", "inset", "insetType"]);
     const insetClass = inset ? INSET_CLASSES[insetType] : "";
@@ -2856,7 +4119,7 @@ var ListDividerImpl = React18.forwardRef(
   }
 );
 ListDividerImpl.displayName = "ListDivider";
-var ListDivider = React18.memo(ListDividerImpl);
+var ListDivider = React23.memo(ListDividerImpl);
 var MD3_STANDARD = [0.2, 0, 0, 1];
 var MD3_FAST_EFFECTS = [0.3, 0, 1, 1];
 var CHECKMARK_PATH = "M 4.5 9.5 L 7.5 12.5 L 13.5 5.5";
@@ -2870,7 +4133,7 @@ var NEXT_STATE = {
   checked: "indeterminate",
   indeterminate: "unchecked"
 };
-var CheckboxVisual = React18.memo(function CheckboxVisual2({
+var CheckboxVisual = React23.memo(function CheckboxVisual2({
   isSelected,
   isIndeterminate,
   containerBg,
@@ -2941,7 +4204,7 @@ var CheckboxVisual = React18.memo(function CheckboxVisual2({
   );
 });
 function useMergedRef2(externalRef, internalRef) {
-  return React18.useCallback(
+  return React23.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -2954,7 +4217,7 @@ function useMergedRef2(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var CheckboxComponent = React18.forwardRef(
+var CheckboxComponent = React23.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -2976,20 +4239,20 @@ var CheckboxComponent = React18.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const generatedId = React18.useId();
+    const generatedId = React23.useId();
     const inputId = idProp != null ? idProp : label ? `checkbox-${generatedId}` : void 0;
-    const [internalState, setInternalState] = React18.useState(
+    const [internalState, setInternalState] = React23.useState(
       () => defaultChecked ? "checked" : "unchecked"
     );
     const isControlled = stateProp !== void 0 || checked !== void 0;
     const baseState = isControlled ? resolveState(checked, false, stateProp) : internalState;
     const effectiveState = indeterminate ? "indeterminate" : baseState;
-    const [ripples, setRipples] = React18.useState([]);
-    const removeRipple = React18.useCallback(
+    const [ripples, setRipples] = React23.useState([]);
+    const removeRipple = React23.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React18.useCallback(
+    const onPointerDown = React23.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -3003,7 +4266,7 @@ var CheckboxComponent = React18.forwardRef(
       },
       [disabled]
     );
-    const handleChange = React18.useCallback(
+    const handleChange = React23.useCallback(
       (e) => {
         if (disabled) return;
         if (stateProp !== void 0) {
@@ -3029,9 +4292,9 @@ var CheckboxComponent = React18.forwardRef(
         onCheckedChange
       ]
     );
-    const inputRef = React18.useRef(null);
+    const inputRef = React23.useRef(null);
     const mergedRef = useMergedRef2(ref, inputRef);
-    React18.useEffect(() => {
+    React23.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = effectiveState === "indeterminate";
       }
@@ -3156,19 +4419,19 @@ var CheckboxComponent = React18.forwardRef(
   }
 );
 CheckboxComponent.displayName = "Checkbox";
-var Checkbox = React18.memo(CheckboxComponent);
-var TriStateCheckboxComponent = React18.forwardRef((_a, ref) => {
+var Checkbox = React23.memo(CheckboxComponent);
+var TriStateCheckboxComponent = React23.forwardRef((_a, ref) => {
   var _b = _a, { state, onStateChange } = _b, rest = __objRest(_b, ["state", "onStateChange"]);
   return /* @__PURE__ */ jsx(Checkbox, __spreadValues({ ref, state, onStateChange }, rest));
 });
 TriStateCheckboxComponent.displayName = "TriStateCheckbox";
-React18.memo(TriStateCheckboxComponent);
+React23.memo(TriStateCheckboxComponent);
 var MD3_FAST_EFFECTS2 = [0.3, 0, 1, 1];
-var RadioGroupContext = React18.createContext(
+var RadioGroupContext = React23.createContext(
   null
 );
 function useMergedRef3(externalRef, internalRef) {
-  return React18.useCallback(
+  return React23.useCallback(
     (node) => {
       internalRef.current = node;
       if (!externalRef) return;
@@ -3181,7 +4444,7 @@ function useMergedRef3(externalRef, internalRef) {
     [externalRef, internalRef]
   );
 }
-var RadioVisual = React18.memo(function RadioVisual2({
+var RadioVisual = React23.memo(function RadioVisual2({
   isSelected,
   disabled,
   error,
@@ -3234,7 +4497,7 @@ var RadioVisual = React18.memo(function RadioVisual2({
     }
   );
 });
-var RadioButtonComponent = React18.forwardRef(
+var RadioButtonComponent = React23.forwardRef(
   ({
     selected,
     defaultSelected = false,
@@ -3253,23 +4516,23 @@ var RadioButtonComponent = React18.forwardRef(
     required: requiredProp
   }, ref) => {
     var _a, _b;
-    const group = React18.useContext(RadioGroupContext);
+    const group = React23.useContext(RadioGroupContext);
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const generatedId = React18.useId();
+    const generatedId = React23.useId();
     const inputId = idProp != null ? idProp : label ? `radio-${generatedId}` : void 0;
     const name = (_b = group == null ? void 0 : group.name) != null ? _b : nameProp;
     const disabled = (group == null ? void 0 : group.disabled) || disabledProp;
     const error = (group == null ? void 0 : group.error) || errorProp || color === "error";
     const required = (group == null ? void 0 : group.required) || requiredProp;
-    const [internalSelected, setInternalSelected] = React18.useState(defaultSelected);
+    const [internalSelected, setInternalSelected] = React23.useState(defaultSelected);
     const isControlled = selected !== void 0;
     const isSelected = group ? group.selectedValue === value : isControlled ? selected != null ? selected : false : internalSelected;
-    const [ripples, setRipples] = React18.useState([]);
-    const removeRipple = React18.useCallback(
+    const [ripples, setRipples] = React23.useState([]);
+    const removeRipple = React23.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
-    const onPointerDown = React18.useCallback(
+    const onPointerDown = React23.useCallback(
       (e) => {
         if (disabled) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -3283,12 +4546,12 @@ var RadioButtonComponent = React18.forwardRef(
       },
       [disabled]
     );
-    const [isHovered, setIsHovered] = React18.useState(false);
-    const onPointerEnter = React18.useCallback(() => {
+    const [isHovered, setIsHovered] = React23.useState(false);
+    const onPointerEnter = React23.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const onPointerLeave = React18.useCallback(() => setIsHovered(false), []);
-    const handleChange = React18.useCallback(
+    const onPointerLeave = React23.useCallback(() => setIsHovered(false), []);
+    const handleChange = React23.useCallback(
       (_e) => {
         if (disabled || onClick === null) return;
         if (group) {
@@ -3302,7 +4565,7 @@ var RadioButtonComponent = React18.forwardRef(
       },
       [disabled, onClick, group, value, isControlled]
     );
-    const inputRef = React18.useRef(null);
+    const inputRef = React23.useRef(null);
     const mergedRef = useMergedRef3(ref, inputRef);
     const stateLayerBg = error ? "before:bg-m3-error" : "before:bg-m3-primary";
     const stateLayerClass = cn(
@@ -3413,8 +4676,8 @@ var RadioButtonComponent = React18.forwardRef(
   }
 );
 RadioButtonComponent.displayName = "RadioButton";
-var RadioButton = React18.memo(RadioButtonComponent);
-var RadioGroupComponent = React18.forwardRef(
+var RadioButton = React23.memo(RadioButtonComponent);
+var RadioGroupComponent = React23.forwardRef(
   ({
     name,
     value: valueProp,
@@ -3429,19 +4692,19 @@ var RadioGroupComponent = React18.forwardRef(
     children,
     className
   }, ref) => {
-    const [internalValue, setInternalValue] = React18.useState(defaultValue);
+    const [internalValue, setInternalValue] = React23.useState(defaultValue);
     const isControlled = valueProp !== void 0;
     const selectedValue = isControlled ? valueProp : internalValue;
-    const handleValueChange = React18.useCallback(
+    const handleValueChange = React23.useCallback(
       (val) => {
         if (!isControlled) setInternalValue(val);
         onValueChange == null ? void 0 : onValueChange(val);
       },
       [isControlled, onValueChange]
     );
-    const groupRef = React18.useRef(null);
+    const groupRef = React23.useRef(null);
     const mergedRef = useMergedRef3(ref, groupRef);
-    const onKeyDown = React18.useCallback(
+    const onKeyDown = React23.useCallback(
       (e) => {
         var _a, _b;
         if (disabled) return;
@@ -3465,7 +4728,7 @@ var RadioGroupComponent = React18.forwardRef(
       },
       [disabled, handleValueChange]
     );
-    const contextValue = React18.useMemo(
+    const contextValue = React23.useMemo(
       () => ({
         name,
         selectedValue,
@@ -3500,7 +4763,7 @@ var RadioGroupComponent = React18.forwardRef(
   }
 );
 RadioGroupComponent.displayName = "RadioGroup";
-React18.memo(RadioGroupComponent);
+React23.memo(RadioGroupComponent);
 
 // src/ui/switch/switch.tokens.ts
 var SwitchTokens = {
@@ -3578,7 +4841,7 @@ function isIconVisible(thumbContent, icons, showOnlySelectedIcon, checked) {
   if (icons) return true;
   return showOnlySelectedIcon && checked;
 }
-var SwitchVisual = React18.memo(function SwitchVisual2({
+var SwitchVisual = React23.memo(function SwitchVisual2({
   checked,
   disabled,
   isPressed,
@@ -3698,7 +4961,7 @@ var SwitchVisual = React18.memo(function SwitchVisual2({
     }
   );
 });
-var SwitchComponent = React18.forwardRef(
+var SwitchComponent = React23.forwardRef(
   ({
     checked,
     onCheckedChange,
@@ -3716,16 +4979,16 @@ var SwitchComponent = React18.forwardRef(
   }, ref) => {
     var _a;
     const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
-    const [isPressed, setIsPressed] = React18.useState(false);
-    const [isHovered, setIsHovered] = React18.useState(false);
-    const [isFocused, setIsFocused] = React18.useState(false);
-    const [ripples, setRipples] = React18.useState([]);
-    const generatedId = React18.useId();
+    const [isPressed, setIsPressed] = React23.useState(false);
+    const [isHovered, setIsHovered] = React23.useState(false);
+    const [isFocused, setIsFocused] = React23.useState(false);
+    const [ripples, setRipples] = React23.useState([]);
+    const generatedId = React23.useId();
     const switchId = label ? `switch-${generatedId}` : void 0;
-    const handleClick = React18.useCallback(() => {
+    const handleClick = React23.useCallback(() => {
       if (!disabled) onCheckedChange(!checked);
     }, [disabled, checked, onCheckedChange]);
-    const handleKeyDown = React18.useCallback(
+    const handleKeyDown = React23.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === " " || e.key === "Enter") {
@@ -3735,7 +4998,7 @@ var SwitchComponent = React18.forwardRef(
       },
       [disabled, checked, onCheckedChange]
     );
-    const handlePointerDown = React18.useCallback(
+    const handlePointerDown = React23.useCallback(
       (e) => {
         if (disabled) return;
         setIsPressed(true);
@@ -3750,19 +5013,19 @@ var SwitchComponent = React18.forwardRef(
       },
       [disabled]
     );
-    const handlePointerUp = React18.useCallback(() => {
+    const handlePointerUp = React23.useCallback(() => {
       setIsPressed(false);
     }, []);
-    const handlePointerEnter = React18.useCallback(() => {
+    const handlePointerEnter = React23.useCallback(() => {
       if (!disabled) setIsHovered(true);
     }, [disabled]);
-    const handlePointerLeave = React18.useCallback(() => {
+    const handlePointerLeave = React23.useCallback(() => {
       setIsHovered(false);
       setIsPressed(false);
     }, []);
-    const handleFocus = React18.useCallback(() => setIsFocused(true), []);
-    const handleBlur = React18.useCallback(() => setIsFocused(false), []);
-    const removeRipple = React18.useCallback(
+    const handleFocus = React23.useCallback(() => setIsFocused(true), []);
+    const handleBlur = React23.useCallback(() => setIsFocused(false), []);
+    const removeRipple = React23.useCallback(
       (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
       []
     );
@@ -3788,7 +5051,7 @@ var SwitchComponent = React18.forwardRef(
         onFocus: handleFocus,
         onBlur: handleBlur,
         className: cn(
-          "relative inline-flex items-center justify-center cursor-pointer select-none",
+          "relative inline-flex items-center justify-center cursor-pointer select-none shrink-0",
           // Touch target: 48×48 minimum (pad around 32px track)
           "min-w-12 min-h-12",
           // Focus ring — MD3 FocusIndicatorColor = secondary
@@ -3798,7 +5061,7 @@ var SwitchComponent = React18.forwardRef(
           disabled && "pointer-events-none cursor-not-allowed",
           !label && className
         ),
-        children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-full", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-full shrink-0", children: [
           /* @__PURE__ */ jsx(
             SwitchVisual,
             {
@@ -3847,7 +5110,7 @@ var SwitchComponent = React18.forwardRef(
   }
 );
 SwitchComponent.displayName = "Switch";
-var Switch = React18.memo(SwitchComponent);
+var Switch = React23.memo(SwitchComponent);
 
 // src/ui/lists/list-utils.ts
 function getListItemHeight(hasOverline, supportingTextLines) {
@@ -3987,7 +5250,7 @@ function renderSwitchTrailing({
   trailingClass
 }) {
   const isSelectingMode = selectionMode === "single-select" || selectionMode === "multi-select";
-  const switchElement = React18.isValidElement(trailingContent) ? (() => {
+  const switchElement = React23.isValidElement(trailingContent) ? (() => {
     const trailingProps = trailingContent.props;
     const checkedValue = !isSelectingMode && trailingProps.checked !== void 0 ? trailingProps.checked : isSelected;
     const disabledValue = trailingProps.disabled !== void 0 ? disabled || trailingProps.disabled : disabled;
@@ -3998,7 +5261,7 @@ function renderSwitchTrailing({
         onItemChange(value, checked);
       }
     };
-    return React18.cloneElement(
+    return React23.cloneElement(
       trailingContent,
       { checked: checkedValue, disabled: disabledValue, onCheckedChange }
     );
@@ -4023,7 +5286,7 @@ function renderSwitchTrailing({
     )
   );
 }
-var ListItemImpl = React18.forwardRef(
+var ListItemImpl = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4079,9 +5342,9 @@ var ListItemImpl = React18.forwardRef(
     });
     const reorderable = (_e = context == null ? void 0 : context.reorderable) != null ? _e : false;
     const isSelected = selected !== void 0 ? selected : (_f = context == null ? void 0 : context.selectedValues.has(value)) != null ? _f : false;
-    const [isHovered, setIsHovered] = React18.useState(false);
-    const [isFocused, setIsFocused] = React18.useState(false);
-    const [isPressed, setIsPressed] = React18.useState(false);
+    const [isHovered, setIsHovered] = React23.useState(false);
+    const [isFocused, setIsFocused] = React23.useState(false);
+    const [isPressed, setIsPressed] = React23.useState(false);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
@@ -4093,8 +5356,8 @@ var ListItemImpl = React18.forwardRef(
       transition,
       isDragging
     } = useSortable({ id: value, disabled: !reorderable });
-    const itemRef = React18.useRef(null);
-    const setRefs = React18.useCallback(
+    const itemRef = React23.useRef(null);
+    const setRefs = React23.useCallback(
       (node) => {
         itemRef.current = node;
         setNodeRef(node);
@@ -4547,7 +5810,7 @@ var ListItemImpl = React18.forwardRef(
   }
 );
 ListItemImpl.displayName = "ListItem";
-var ListItem = React18.memo(ListItemImpl);
+var ListItem = React23.memo(ListItemImpl);
 var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
   variants: {
     variant: {
@@ -4573,10 +5836,10 @@ var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
     variant: "body-md"
   }
 });
-var Text = React18.forwardRef(
+var Text = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, as: Component, color, weight, style } = _b, props = __objRest(_b, ["className", "variant", "as", "color", "weight", "style"]);
-    const defaultComponent = React18.useMemo(() => {
+    const defaultComponent = React23.useMemo(() => {
       const v = variant ? String(variant).toLowerCase() : "";
       if (v.startsWith("display") || v.startsWith("headline")) return "h1";
       if (v.startsWith("title")) return "h2";
@@ -4598,12 +5861,15 @@ Text.displayName = "Text";
 function TableOfContents({
   items,
   className,
-  scrollAreaProps
+  scrollAreaProps,
+  scrollContainerRef
 }) {
   const [activeId, setActiveId] = useState("");
   const itemIds = useMemo(() => items.map((i) => i.id), [items]);
   useEffect(() => {
+    var _a;
     if (typeof IntersectionObserver === "undefined") return;
+    const root = (_a = scrollContainerRef == null ? void 0 : scrollContainerRef.current) != null ? _a : null;
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
@@ -4611,19 +5877,20 @@ function TableOfContents({
         }
       },
       // rootMargin: top offset ~100px (fixed header), bottom -80% (early switch)
-      { rootMargin: "-100px 0% -80% 0%" }
+      { root, rootMargin: "-100px 0% -80% 0%" }
     );
     for (const id of itemIds) {
       const el = document.getElementById(id);
       if (el) observer.observe(el);
     }
     return () => observer.disconnect();
-  }, [itemIds]);
+  }, [itemIds, scrollContainerRef]);
   const handleClick = useCallback(
     (e, id) => {
-      var _a;
       e.preventDefault();
-      (_a = document.getElementById(id)) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" });
+      const target = document.getElementById(id);
+      if (!target) return;
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
     },
     []
   );
@@ -4640,19 +5907,35 @@ function TableOfContents({
             type: "hover"
           }, scrollAreaProps), {
             className: cn("flex-1 min-h-0", scrollAreaProps == null ? void 0 : scrollAreaProps.className),
-            children: /* @__PURE__ */ jsx("ul", { className: "space-y-4 pr-4", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: `#${item.id}`,
-                onClick: (e) => handleClick(e, item.id),
-                "aria-current": activeId === item.id ? "true" : void 0,
-                className: cn(
-                  "text-sm transition-colors hover:text-m3-primary block",
-                  activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant font-medium"
-                ),
-                children: item.label
-              }
-            ) }, item.id)) })
+            children: /* @__PURE__ */ jsx("ul", { className: "space-y-2 pr-4", children: items.map((item) => {
+              var _a;
+              const depth = (_a = item.depth) != null ? _a : 1;
+              const isSubItem = depth > 1;
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: cn(
+                    isSubItem && "pl-3.5 border-l border-m3-outline-variant/40 ml-1"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `#${item.id}`,
+                      onClick: (e) => handleClick(e, item.id),
+                      "aria-current": activeId === item.id ? "true" : void 0,
+                      className: cn(
+                        "transition-colors hover:text-m3-primary block truncate",
+                        isSubItem ? "text-xs py-0.5 leading-relaxed" : "text-sm py-1 font-medium leading-snug",
+                        activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant"
+                      ),
+                      title: item.label,
+                      children: item.label
+                    }
+                  )
+                },
+                item.id
+              );
+            }) })
           })
         )
       ]
@@ -5395,6 +6678,6 @@ function TypographyProvider({
   return /* @__PURE__ */ jsx(TypographyContext.Provider, { value, children });
 }
 
-export { Card, CodeBlock, DEFAULT_FONT_VARIATION_AXES, Divider, LIST_TOKENS, List, ListContext, ListDivider, ListItem, MD3_EXPRESSIVE_FONT_VARIATION, ScrollArea, ScrollAreaScrollbar, TableOfContents, Text, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, buildWavePath, getExpressiveShape, getListItemHeight, serializeFontVariationAxes, shouldTopAlign, typographyVariants, useListContext, useTypography };
+export { Card, CardContent, CardFooter, CardHeader, CardMedia, Carousel, CarouselGrid, CarouselItem, CarouselScrollClient, CarouselTokens, CodeBlock, DEFAULT_FONT_VARIATION_AXES, Divider, LIST_TOKENS, List, ListContext, ListDivider, ListItem, MD3_EXPRESSIVE_FONT_VARIATION, SHADOW, ScrollArea, ScrollAreaScrollbar, TableOfContents, Text, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveElevationShadow, serializeFontVariationAxes, shouldTopAlign, typographyVariants, useCardElevation, useCarouselA11y, useCarouselKeylines, useListContext, useTypography };
 //# sourceMappingURL=layout.mjs.map
 //# sourceMappingURL=layout.mjs.map