@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/primitives/fluid-menu.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const components_fluidHoverHighlight = require('../components/fluid-hover-highlight.cjs.js');
 const hooks_useFluidHover = require('../hooks/use-fluid-hover.cjs.js');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,21 +29,31 @@ const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const FluidMenuContext = React__namespace.createContext(null);
 function isMenuItemDisabled(element) {
-  return isAttrActive(element, "data-disabled") || element.getAttribute("aria-disabled") === "true";
+  return isAttrActive(element, "data-disabled") || element.getAttribute("aria-disabled") === "true" || element.disabled === true;
 }
 function isAttrActive(element, attr) {
   const value = element.getAttribute(attr);
   return value !== null && value !== "false";
 }
 function useFluidMenu({
-  activeAttr = "data-highlighted"
+  activeAttr = "data-highlighted",
+  gapClick
 } = {}) {
   const containerRef = React__namespace.useRef(null);
-  const hover = hooks_useFluidHover.useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled });
+  const hover = hooks_useFluidHover.useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled, gapClick });
   const counterRef = React__namespace.useRef(0);
+  const freeRef = React__namespace.useRef([]);
   const { registerItem, setActiveIndex, handlers } = hover;
   const context = React__namespace.useMemo(
-    () => ({ registerItem, setActiveIndex, activeAttr, allocateIndex: () => counterRef.current++ }),
+    () => ({
+      registerItem,
+      setActiveIndex,
+      activeAttr,
+      allocateIndex: () => freeRef.current.pop() ?? counterRef.current++,
+      releaseIndex: (index) => {
+        freeRef.current.push(index);
+      }
+    }),
     [registerItem, setActiveIndex, activeAttr]
   );
   const getContainerProps = React__namespace.useCallback(
@@ -80,7 +90,7 @@ function FluidMenuItems({
   children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(FluidMenuContext.Provider, { value: menu.context, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_fluidHoverHighlight.FluidHoverHighlight, { hover: menu.hover, className: utils_cn.cn("-z-1 rounded-lg bg-foreground/10", className) }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_fluidHoverHighlight.FluidHoverHighlight, { hover: menu.hover, className: utils_cn.cn("-z-1 rounded-lg bg-fill", className) }),
     children
   ] });
 }
@@ -93,13 +103,20 @@ function useFluidMenuItemRef(forwardedRef) {
       if (typeof forwardedRef === "function") forwardedRef(element);
       else if (forwardedRef) forwardedRef.current = element;
       if (!ctx) return;
-      const { registerItem, setActiveIndex, activeAttr, allocateIndex } = ctx;
-      if (indexRef.current === null) indexRef.current = allocateIndex();
-      const index = indexRef.current;
+      const { registerItem, setActiveIndex, activeAttr, allocateIndex, releaseIndex } = ctx;
       observerRef.current?.disconnect();
       observerRef.current = null;
+      if (!element) {
+        if (indexRef.current !== null) {
+          registerItem(indexRef.current, null);
+          releaseIndex(indexRef.current);
+          indexRef.current = null;
+        }
+        return;
+      }
+      if (indexRef.current === null) indexRef.current = allocateIndex();
+      const index = indexRef.current;
       registerItem(index, element);
-      if (!element) return;
       const sync = () => {
         if (isAttrActive(element, activeAttr)) setActiveIndex(index);
       };

package/dist/primitives/fluid-menu.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"fluid-menu.cjs.js","sources":["../../src/ds/primitives/fluid-menu.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components -- provider and its hooks intentionally share this module */\nimport * as React from 'react';\n\nimport { FluidHoverHighlight } from '@/components/fluid-hover-highlight';\nimport { useFluidHover } from '@/hooks/use-fluid-hover';\nimport type { UseFluidHoverReturn } from '@/hooks/use-fluid-hover';\nimport { cn } from '@/lib/utils';\n\n/**\n * Shared Fluid Hover wiring for every popup that lists items (DropdownMenu,\n * ContextMenu, Select, Combobox, Command). One highlight surface travels\n * between rows instead of each row painting its own hover background.\n *\n * Usage inside a popup component:\n *\n *   const menu = useFluidMenu();\n *   <Popup {...menu.getContainerProps(props, ref)} className={cn(menuPopupClass, menu.containerClassName, className)}>\n *     <FluidMenuItems menu={menu}>{children}</FluidMenuItems>\n *   </Popup>\n *\n * and on each row: `ref={useFluidMenuItemRef(forwardedRef)}`.\n *\n * The keyboard path stays honest: the library sets `activeAttr` on the row it\n * considers highlighted (Base UI: `data-highlighted`, cmdk: `data-selected`),\n * and the item hook mirrors that onto the fluid highlight, so arrow keys move\n * the same surface the mouse does.\n */\ntype FluidMenuContextValue = {\n  registerItem: UseFluidHoverReturn['registerItem'];\n  setActiveIndex: UseFluidHoverReturn['setActiveIndex'];\n  activeAttr: string;\n  allocateIndex: () => number;\n};\n\nconst FluidMenuContext = React.createContext<FluidMenuContextValue | null>(null);\n\n// Base UI sets a bare `data-disabled`; cmdk sets `data-disabled=\"true\" | \"false\"`.\nfunction isMenuItemDisabled(element: HTMLElement) {\n  return isAttrActive(element, 'data-disabled') || element.getAttribute('aria-disabled') === 'true';\n}\n\nfunction isAttrActive(element: HTMLElement, attr: string) {\n  const value = element.getAttribute(attr);\n  return value !== null && value !== 'false';\n}\n\ntype MouseHandlers = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'onMouseMove' | 'onMouseEnter' | 'onMouseLeave' | 'onClick'\n>;\n\nexport type UseFluidMenuOptions = {\n  /** Attribute the underlying library sets on its highlighted row. */\n  activeAttr?: 'data-highlighted' | 'data-selected';\n};\n\nexport type FluidMenu<T extends HTMLElement = HTMLElement> = {\n  hover: UseFluidHoverReturn;\n  context: FluidMenuContextValue;\n  /** `relative isolate`: positions the highlight and stacks it under the rows. */\n  containerClassName: string;\n  /** Ref + pointer handlers for the element that holds the rows, merged with the consumer's own. */\n  getContainerProps: (\n    own: MouseHandlers,\n    forwardedRef?: React.ForwardedRef<T>,\n  ) => MouseHandlers & { ref: React.Ref<T> };\n};\n\nexport function useFluidMenu<T extends HTMLElement = HTMLDivElement>({\n  activeAttr = 'data-highlighted',\n}: UseFluidMenuOptions = {}): FluidMenu<T> {\n  const containerRef = React.useRef<T>(null);\n  const hover = useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled });\n  const counterRef = React.useRef(0);\n\n  // Only the stable pieces go into context so item callback refs do not churn\n  // (and re-register) on every hover-state render.\n  const { registerItem, setActiveIndex, handlers } = hover;\n  const context = React.useMemo<FluidMenuContextValue>(\n    () => ({ registerItem, setActiveIndex, activeAttr, allocateIndex: () => counterRef.current++ }),\n    [registerItem, setActiveIndex, activeAttr],\n  );\n\n  const getContainerProps = React.useCallback<FluidMenu<T>['getContainerProps']>(\n    (own, forwardedRef) => ({\n      ref: element => {\n        containerRef.current = element;\n        if (typeof forwardedRef === 'function') forwardedRef(element);\n        else if (forwardedRef) forwardedRef.current = element;\n      },\n      onMouseMove: e => {\n        own.onMouseMove?.(e);\n        handlers.onMouseMove(e);\n      },\n      onMouseEnter: e => {\n        own.onMouseEnter?.(e);\n        handlers.onMouseEnter();\n      },\n      onMouseLeave: e => {\n        own.onMouseLeave?.(e);\n        handlers.onMouseLeave();\n      },\n      onClick: e => {\n        own.onClick?.(e);\n        handlers.onClick(e);\n      },\n    }),\n    [handlers],\n  );\n\n  return { hover, context, containerClassName: 'relative isolate', getContainerProps };\n}\n\n/**\n * Provides the item registry to the rows and renders the travelling surface.\n * Popups are `bg-popover`; the highlight is the control hover surface on top of it.\n * `-z-1` keeps it under the row content while the container's `isolate`\n * keeps it above the popup background.\n */\nexport function FluidMenuItems({\n  menu,\n  className,\n  children,\n}: {\n  menu: Pick<FluidMenu, 'hover' | 'context'>;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <FluidMenuContext.Provider value={menu.context}>\n      <FluidHoverHighlight hover={menu.hover} className={cn('-z-1 rounded-lg bg-foreground/10', className)} />\n      {children}\n    </FluidMenuContext.Provider>\n  );\n}\n\n/**\n * Callback ref for an item row. Registers the row with the popup's hover\n * state and mirrors the library's highlighted attribute onto it. A no-op\n * outside a provider, so rows still render standalone.\n */\nexport function useFluidMenuItemRef<T extends HTMLElement>(forwardedRef: React.ForwardedRef<T>) {\n  const ctx = React.useContext(FluidMenuContext);\n  const indexRef = React.useRef<number | null>(null);\n  const observerRef = React.useRef<MutationObserver | null>(null);\n\n  return React.useCallback(\n    (element: T | null) => {\n      if (typeof forwardedRef === 'function') forwardedRef(element);\n      else if (forwardedRef) forwardedRef.current = element;\n\n      if (!ctx) return;\n      const { registerItem, setActiveIndex, activeAttr, allocateIndex } = ctx;\n      if (indexRef.current === null) indexRef.current = allocateIndex();\n      const index = indexRef.current;\n\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n      registerItem(index, element);\n      if (!element) return;\n\n      const sync = () => {\n        if (isAttrActive(element, activeAttr)) setActiveIndex(index);\n      };\n      sync();\n      if (typeof MutationObserver !== 'undefined') {\n        const observer = new MutationObserver(sync);\n        observer.observe(element, { attributes: true, attributeFilter: [activeAttr] });\n        observerRef.current = observer;\n      }\n    },\n    [ctx, forwardedRef],\n  );\n}\n"],"names":["React","useFluidHover","jsx","FluidHoverHighlight","cn"],"mappings":"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"}
+{"version":3,"file":"fluid-menu.cjs.js","sources":["../../src/ds/primitives/fluid-menu.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components -- provider and its hooks intentionally share this module */\nimport * as React from 'react';\n\nimport { FluidHoverHighlight } from '@/components/fluid-hover-highlight';\nimport { useFluidHover } from '@/hooks/use-fluid-hover';\nimport type { UseFluidHoverOptions, UseFluidHoverReturn } from '@/hooks/use-fluid-hover';\nimport { cn } from '@/lib/utils';\n\n/**\n * Shared Fluid Hover wiring for every popup that lists items (DropdownMenu,\n * ContextMenu, Select, Combobox, Command). One highlight surface travels\n * between rows instead of each row painting its own hover background.\n *\n * Usage inside a popup component:\n *\n * const menu = useFluidMenu();\n * <Popup {...menu.getContainerProps(props, ref)} className={cn(menuPopupClass, menu.containerClassName, className)}>\n * <FluidMenuItems menu={menu}>{children}</FluidMenuItems>\n * </Popup>\n *\n * and on each row: `ref={useFluidMenuItemRef(forwardedRef)}`.\n *\n * The keyboard path stays honest: the library sets `activeAttr` on the row it\n * considers highlighted (Base UI: `data-highlighted`, cmdk: `data-selected`),\n * and the item hook mirrors that onto the fluid highlight, so arrow keys move\n * the same surface the mouse does.\n */\ntype FluidMenuContextValue = {\n  registerItem: UseFluidHoverReturn['registerItem'];\n  setActiveIndex: UseFluidHoverReturn['setActiveIndex'];\n  activeAttr: string;\n  allocateIndex: () => number;\n  releaseIndex: (index: number) => void;\n};\n\nconst FluidMenuContext = React.createContext<FluidMenuContextValue | null>(null);\n\n// Base UI sets a bare `data-disabled`; cmdk sets `data-disabled=\"true\" | \"false\"`;\n// native controls (DataList rows) use the `disabled` property.\nfunction isMenuItemDisabled(element: HTMLElement) {\n  return (\n    isAttrActive(element, 'data-disabled') ||\n    element.getAttribute('aria-disabled') === 'true' ||\n    (element as HTMLButtonElement).disabled === true\n  );\n}\n\nfunction isAttrActive(element: HTMLElement, attr: string) {\n  const value = element.getAttribute(attr);\n  return value !== null && value !== 'false';\n}\n\ntype MouseHandlers = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'onMouseMove' | 'onMouseEnter' | 'onMouseLeave' | 'onClick'\n>;\n\nexport type UseFluidMenuOptions = {\n  /** Attribute the underlying library sets on its highlighted row. */\n  activeAttr?: 'data-highlighted' | 'data-selected';\n  /** Forwarded to `useFluidHover`; lists with inert rows (subheaders, pagination) pass `false`. */\n  gapClick?: UseFluidHoverOptions['gapClick'];\n};\n\nexport type FluidMenu<T extends HTMLElement = HTMLElement> = {\n  hover: UseFluidHoverReturn;\n  context: FluidMenuContextValue;\n  /** `relative isolate`: positions the highlight and stacks it under the rows. */\n  containerClassName: string;\n  /** Ref + pointer handlers for the element that holds the rows, merged with the consumer's own. */\n  getContainerProps: (\n    own: MouseHandlers,\n    forwardedRef?: React.ForwardedRef<T>,\n  ) => MouseHandlers & { ref: React.Ref<T> };\n};\n\nexport function useFluidMenu<T extends HTMLElement = HTMLDivElement>({\n  activeAttr = 'data-highlighted',\n  gapClick,\n}: UseFluidMenuOptions = {}): FluidMenu<T> {\n  const containerRef = React.useRef<T>(null);\n  const hover = useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled, gapClick });\n  const counterRef = React.useRef(0);\n  // Indices released by unmounted rows, reused first so virtualized lists that\n  // mount/unmount rows while scrolling keep the index space bounded.\n  const freeRef = React.useRef<number[]>([]);\n\n  // Only the stable pieces go into context so item callback refs do not churn\n  // (and re-register) on every hover-state render.\n  const { registerItem, setActiveIndex, handlers } = hover;\n  const context = React.useMemo<FluidMenuContextValue>(\n    () => ({\n      registerItem,\n      setActiveIndex,\n      activeAttr,\n      allocateIndex: () => freeRef.current.pop() ?? counterRef.current++,\n      releaseIndex: index => {\n        freeRef.current.push(index);\n      },\n    }),\n    [registerItem, setActiveIndex, activeAttr],\n  );\n\n  const getContainerProps = React.useCallback<FluidMenu<T>['getContainerProps']>(\n    (own, forwardedRef) => ({\n      ref: element => {\n        containerRef.current = element;\n        if (typeof forwardedRef === 'function') forwardedRef(element);\n        else if (forwardedRef) forwardedRef.current = element;\n      },\n      onMouseMove: e => {\n        own.onMouseMove?.(e);\n        handlers.onMouseMove(e);\n      },\n      onMouseEnter: e => {\n        own.onMouseEnter?.(e);\n        handlers.onMouseEnter();\n      },\n      onMouseLeave: e => {\n        own.onMouseLeave?.(e);\n        handlers.onMouseLeave();\n      },\n      onClick: e => {\n        own.onClick?.(e);\n        handlers.onClick(e);\n      },\n    }),\n    [handlers],\n  );\n\n  return { hover, context, containerClassName: 'relative isolate', getContainerProps };\n}\n\n/**\n * Provides the item registry to the rows and renders the travelling surface.\n * Popups are `bg-popover`; the highlight is the control hover surface on top of it.\n * `-z-1` keeps it under the row content while the container's `isolate`\n * keeps it above the popup background.\n */\nexport function FluidMenuItems({\n  menu,\n  className,\n  children,\n}: {\n  menu: Pick<FluidMenu, 'hover' | 'context'>;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <FluidMenuContext.Provider value={menu.context}>\n      <FluidHoverHighlight hover={menu.hover} className={cn('-z-1 rounded-lg bg-fill', className)} />\n      {children}\n    </FluidMenuContext.Provider>\n  );\n}\n\n/**\n * Callback ref for an item row. Registers the row with the popup's hover\n * state and mirrors the library's highlighted attribute onto it. A no-op\n * outside a provider, so rows still render standalone.\n */\nexport function useFluidMenuItemRef<T extends HTMLElement>(forwardedRef: React.ForwardedRef<T>) {\n  const ctx = React.useContext(FluidMenuContext);\n  const indexRef = React.useRef<number | null>(null);\n  const observerRef = React.useRef<MutationObserver | null>(null);\n\n  return React.useCallback(\n    (element: T | null) => {\n      if (typeof forwardedRef === 'function') forwardedRef(element);\n      else if (forwardedRef) forwardedRef.current = element;\n\n      if (!ctx) return;\n      const { registerItem, setActiveIndex, activeAttr, allocateIndex, releaseIndex } = ctx;\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n\n      if (!element) {\n        if (indexRef.current !== null) {\n          registerItem(indexRef.current, null);\n          releaseIndex(indexRef.current);\n          indexRef.current = null;\n        }\n        return;\n      }\n\n      if (indexRef.current === null) indexRef.current = allocateIndex();\n      const index = indexRef.current;\n      registerItem(index, element);\n\n      const sync = () => {\n        if (isAttrActive(element, activeAttr)) setActiveIndex(index);\n      };\n      sync();\n      if (typeof MutationObserver !== 'undefined') {\n        const observer = new MutationObserver(sync);\n        observer.observe(element, { attributes: true, attributeFilter: [activeAttr] });\n        observerRef.current = observer;\n      }\n    },\n    [ctx, forwardedRef],\n  );\n}\n"],"names":["React","useFluidHover","jsx","FluidHoverHighlight","cn"],"mappings":"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"}

package/dist/primitives/fluid-menu.es.js

@@ -2,25 +2,35 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { FluidHoverHighlight } from '../components/fluid-hover-highlight.es.js';
 import { useFluidHover } from '../hooks/use-fluid-hover.es.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 const FluidMenuContext = React.createContext(null);
 function isMenuItemDisabled(element) {
-  return isAttrActive(element, "data-disabled") || element.getAttribute("aria-disabled") === "true";
+  return isAttrActive(element, "data-disabled") || element.getAttribute("aria-disabled") === "true" || element.disabled === true;
 }
 function isAttrActive(element, attr) {
   const value = element.getAttribute(attr);
   return value !== null && value !== "false";
 }
 function useFluidMenu({
-  activeAttr = "data-highlighted"
+  activeAttr = "data-highlighted",
+  gapClick
 } = {}) {
   const containerRef = React.useRef(null);
-  const hover = useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled });
+  const hover = useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled, gapClick });
   const counterRef = React.useRef(0);
+  const freeRef = React.useRef([]);
   const { registerItem, setActiveIndex, handlers } = hover;
   const context = React.useMemo(
-    () => ({ registerItem, setActiveIndex, activeAttr, allocateIndex: () => counterRef.current++ }),
+    () => ({
+      registerItem,
+      setActiveIndex,
+      activeAttr,
+      allocateIndex: () => freeRef.current.pop() ?? counterRef.current++,
+      releaseIndex: (index) => {
+        freeRef.current.push(index);
+      }
+    }),
     [registerItem, setActiveIndex, activeAttr]
   );
   const getContainerProps = React.useCallback(
@@ -57,7 +67,7 @@ function FluidMenuItems({
   children
 }) {
   return /* @__PURE__ */ jsxs(FluidMenuContext.Provider, { value: menu.context, children: [
-    /* @__PURE__ */ jsx(FluidHoverHighlight, { hover: menu.hover, className: cn("-z-1 rounded-lg bg-foreground/10", className) }),
+    /* @__PURE__ */ jsx(FluidHoverHighlight, { hover: menu.hover, className: cn("-z-1 rounded-lg bg-fill", className) }),
     children
   ] });
 }
@@ -70,13 +80,20 @@ function useFluidMenuItemRef(forwardedRef) {
       if (typeof forwardedRef === "function") forwardedRef(element);
       else if (forwardedRef) forwardedRef.current = element;
       if (!ctx) return;
-      const { registerItem, setActiveIndex, activeAttr, allocateIndex } = ctx;
-      if (indexRef.current === null) indexRef.current = allocateIndex();
-      const index = indexRef.current;
+      const { registerItem, setActiveIndex, activeAttr, allocateIndex, releaseIndex } = ctx;
       observerRef.current?.disconnect();
       observerRef.current = null;
+      if (!element) {
+        if (indexRef.current !== null) {
+          registerItem(indexRef.current, null);
+          releaseIndex(indexRef.current);
+          indexRef.current = null;
+        }
+        return;
+      }
+      if (indexRef.current === null) indexRef.current = allocateIndex();
+      const index = indexRef.current;
       registerItem(index, element);
-      if (!element) return;
       const sync = () => {
         if (isAttrActive(element, activeAttr)) setActiveIndex(index);
       };

package/dist/primitives/fluid-menu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"fluid-menu.es.js","sources":["../../src/ds/primitives/fluid-menu.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components -- provider and its hooks intentionally share this module */\nimport * as React from 'react';\n\nimport { FluidHoverHighlight } from '@/components/fluid-hover-highlight';\nimport { useFluidHover } from '@/hooks/use-fluid-hover';\nimport type { UseFluidHoverReturn } from '@/hooks/use-fluid-hover';\nimport { cn } from '@/lib/utils';\n\n/**\n * Shared Fluid Hover wiring for every popup that lists items (DropdownMenu,\n * ContextMenu, Select, Combobox, Command). One highlight surface travels\n * between rows instead of each row painting its own hover background.\n *\n * Usage inside a popup component:\n *\n *   const menu = useFluidMenu();\n *   <Popup {...menu.getContainerProps(props, ref)} className={cn(menuPopupClass, menu.containerClassName, className)}>\n *     <FluidMenuItems menu={menu}>{children}</FluidMenuItems>\n *   </Popup>\n *\n * and on each row: `ref={useFluidMenuItemRef(forwardedRef)}`.\n *\n * The keyboard path stays honest: the library sets `activeAttr` on the row it\n * considers highlighted (Base UI: `data-highlighted`, cmdk: `data-selected`),\n * and the item hook mirrors that onto the fluid highlight, so arrow keys move\n * the same surface the mouse does.\n */\ntype FluidMenuContextValue = {\n  registerItem: UseFluidHoverReturn['registerItem'];\n  setActiveIndex: UseFluidHoverReturn['setActiveIndex'];\n  activeAttr: string;\n  allocateIndex: () => number;\n};\n\nconst FluidMenuContext = React.createContext<FluidMenuContextValue | null>(null);\n\n// Base UI sets a bare `data-disabled`; cmdk sets `data-disabled=\"true\" | \"false\"`.\nfunction isMenuItemDisabled(element: HTMLElement) {\n  return isAttrActive(element, 'data-disabled') || element.getAttribute('aria-disabled') === 'true';\n}\n\nfunction isAttrActive(element: HTMLElement, attr: string) {\n  const value = element.getAttribute(attr);\n  return value !== null && value !== 'false';\n}\n\ntype MouseHandlers = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'onMouseMove' | 'onMouseEnter' | 'onMouseLeave' | 'onClick'\n>;\n\nexport type UseFluidMenuOptions = {\n  /** Attribute the underlying library sets on its highlighted row. */\n  activeAttr?: 'data-highlighted' | 'data-selected';\n};\n\nexport type FluidMenu<T extends HTMLElement = HTMLElement> = {\n  hover: UseFluidHoverReturn;\n  context: FluidMenuContextValue;\n  /** `relative isolate`: positions the highlight and stacks it under the rows. */\n  containerClassName: string;\n  /** Ref + pointer handlers for the element that holds the rows, merged with the consumer's own. */\n  getContainerProps: (\n    own: MouseHandlers,\n    forwardedRef?: React.ForwardedRef<T>,\n  ) => MouseHandlers & { ref: React.Ref<T> };\n};\n\nexport function useFluidMenu<T extends HTMLElement = HTMLDivElement>({\n  activeAttr = 'data-highlighted',\n}: UseFluidMenuOptions = {}): FluidMenu<T> {\n  const containerRef = React.useRef<T>(null);\n  const hover = useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled });\n  const counterRef = React.useRef(0);\n\n  // Only the stable pieces go into context so item callback refs do not churn\n  // (and re-register) on every hover-state render.\n  const { registerItem, setActiveIndex, handlers } = hover;\n  const context = React.useMemo<FluidMenuContextValue>(\n    () => ({ registerItem, setActiveIndex, activeAttr, allocateIndex: () => counterRef.current++ }),\n    [registerItem, setActiveIndex, activeAttr],\n  );\n\n  const getContainerProps = React.useCallback<FluidMenu<T>['getContainerProps']>(\n    (own, forwardedRef) => ({\n      ref: element => {\n        containerRef.current = element;\n        if (typeof forwardedRef === 'function') forwardedRef(element);\n        else if (forwardedRef) forwardedRef.current = element;\n      },\n      onMouseMove: e => {\n        own.onMouseMove?.(e);\n        handlers.onMouseMove(e);\n      },\n      onMouseEnter: e => {\n        own.onMouseEnter?.(e);\n        handlers.onMouseEnter();\n      },\n      onMouseLeave: e => {\n        own.onMouseLeave?.(e);\n        handlers.onMouseLeave();\n      },\n      onClick: e => {\n        own.onClick?.(e);\n        handlers.onClick(e);\n      },\n    }),\n    [handlers],\n  );\n\n  return { hover, context, containerClassName: 'relative isolate', getContainerProps };\n}\n\n/**\n * Provides the item registry to the rows and renders the travelling surface.\n * Popups are `bg-popover`; the highlight is the control hover surface on top of it.\n * `-z-1` keeps it under the row content while the container's `isolate`\n * keeps it above the popup background.\n */\nexport function FluidMenuItems({\n  menu,\n  className,\n  children,\n}: {\n  menu: Pick<FluidMenu, 'hover' | 'context'>;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <FluidMenuContext.Provider value={menu.context}>\n      <FluidHoverHighlight hover={menu.hover} className={cn('-z-1 rounded-lg bg-foreground/10', className)} />\n      {children}\n    </FluidMenuContext.Provider>\n  );\n}\n\n/**\n * Callback ref for an item row. Registers the row with the popup's hover\n * state and mirrors the library's highlighted attribute onto it. A no-op\n * outside a provider, so rows still render standalone.\n */\nexport function useFluidMenuItemRef<T extends HTMLElement>(forwardedRef: React.ForwardedRef<T>) {\n  const ctx = React.useContext(FluidMenuContext);\n  const indexRef = React.useRef<number | null>(null);\n  const observerRef = React.useRef<MutationObserver | null>(null);\n\n  return React.useCallback(\n    (element: T | null) => {\n      if (typeof forwardedRef === 'function') forwardedRef(element);\n      else if (forwardedRef) forwardedRef.current = element;\n\n      if (!ctx) return;\n      const { registerItem, setActiveIndex, activeAttr, allocateIndex } = ctx;\n      if (indexRef.current === null) indexRef.current = allocateIndex();\n      const index = indexRef.current;\n\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n      registerItem(index, element);\n      if (!element) return;\n\n      const sync = () => {\n        if (isAttrActive(element, activeAttr)) setActiveIndex(index);\n      };\n      sync();\n      if (typeof MutationObserver !== 'undefined') {\n        const observer = new MutationObserver(sync);\n        observer.observe(element, { attributes: true, attributeFilter: [activeAttr] });\n        observerRef.current = observer;\n      }\n    },\n    [ctx, forwardedRef],\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fluid-menu.es.js","sources":["../../src/ds/primitives/fluid-menu.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components -- provider and its hooks intentionally share this module */\nimport * as React from 'react';\n\nimport { FluidHoverHighlight } from '@/components/fluid-hover-highlight';\nimport { useFluidHover } from '@/hooks/use-fluid-hover';\nimport type { UseFluidHoverOptions, UseFluidHoverReturn } from '@/hooks/use-fluid-hover';\nimport { cn } from '@/lib/utils';\n\n/**\n * Shared Fluid Hover wiring for every popup that lists items (DropdownMenu,\n * ContextMenu, Select, Combobox, Command). One highlight surface travels\n * between rows instead of each row painting its own hover background.\n *\n * Usage inside a popup component:\n *\n * const menu = useFluidMenu();\n * <Popup {...menu.getContainerProps(props, ref)} className={cn(menuPopupClass, menu.containerClassName, className)}>\n * <FluidMenuItems menu={menu}>{children}</FluidMenuItems>\n * </Popup>\n *\n * and on each row: `ref={useFluidMenuItemRef(forwardedRef)}`.\n *\n * The keyboard path stays honest: the library sets `activeAttr` on the row it\n * considers highlighted (Base UI: `data-highlighted`, cmdk: `data-selected`),\n * and the item hook mirrors that onto the fluid highlight, so arrow keys move\n * the same surface the mouse does.\n */\ntype FluidMenuContextValue = {\n  registerItem: UseFluidHoverReturn['registerItem'];\n  setActiveIndex: UseFluidHoverReturn['setActiveIndex'];\n  activeAttr: string;\n  allocateIndex: () => number;\n  releaseIndex: (index: number) => void;\n};\n\nconst FluidMenuContext = React.createContext<FluidMenuContextValue | null>(null);\n\n// Base UI sets a bare `data-disabled`; cmdk sets `data-disabled=\"true\" | \"false\"`;\n// native controls (DataList rows) use the `disabled` property.\nfunction isMenuItemDisabled(element: HTMLElement) {\n  return (\n    isAttrActive(element, 'data-disabled') ||\n    element.getAttribute('aria-disabled') === 'true' ||\n    (element as HTMLButtonElement).disabled === true\n  );\n}\n\nfunction isAttrActive(element: HTMLElement, attr: string) {\n  const value = element.getAttribute(attr);\n  return value !== null && value !== 'false';\n}\n\ntype MouseHandlers = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'onMouseMove' | 'onMouseEnter' | 'onMouseLeave' | 'onClick'\n>;\n\nexport type UseFluidMenuOptions = {\n  /** Attribute the underlying library sets on its highlighted row. */\n  activeAttr?: 'data-highlighted' | 'data-selected';\n  /** Forwarded to `useFluidHover`; lists with inert rows (subheaders, pagination) pass `false`. */\n  gapClick?: UseFluidHoverOptions['gapClick'];\n};\n\nexport type FluidMenu<T extends HTMLElement = HTMLElement> = {\n  hover: UseFluidHoverReturn;\n  context: FluidMenuContextValue;\n  /** `relative isolate`: positions the highlight and stacks it under the rows. */\n  containerClassName: string;\n  /** Ref + pointer handlers for the element that holds the rows, merged with the consumer's own. */\n  getContainerProps: (\n    own: MouseHandlers,\n    forwardedRef?: React.ForwardedRef<T>,\n  ) => MouseHandlers & { ref: React.Ref<T> };\n};\n\nexport function useFluidMenu<T extends HTMLElement = HTMLDivElement>({\n  activeAttr = 'data-highlighted',\n  gapClick,\n}: UseFluidMenuOptions = {}): FluidMenu<T> {\n  const containerRef = React.useRef<T>(null);\n  const hover = useFluidHover(containerRef, { isItemDisabled: isMenuItemDisabled, gapClick });\n  const counterRef = React.useRef(0);\n  // Indices released by unmounted rows, reused first so virtualized lists that\n  // mount/unmount rows while scrolling keep the index space bounded.\n  const freeRef = React.useRef<number[]>([]);\n\n  // Only the stable pieces go into context so item callback refs do not churn\n  // (and re-register) on every hover-state render.\n  const { registerItem, setActiveIndex, handlers } = hover;\n  const context = React.useMemo<FluidMenuContextValue>(\n    () => ({\n      registerItem,\n      setActiveIndex,\n      activeAttr,\n      allocateIndex: () => freeRef.current.pop() ?? counterRef.current++,\n      releaseIndex: index => {\n        freeRef.current.push(index);\n      },\n    }),\n    [registerItem, setActiveIndex, activeAttr],\n  );\n\n  const getContainerProps = React.useCallback<FluidMenu<T>['getContainerProps']>(\n    (own, forwardedRef) => ({\n      ref: element => {\n        containerRef.current = element;\n        if (typeof forwardedRef === 'function') forwardedRef(element);\n        else if (forwardedRef) forwardedRef.current = element;\n      },\n      onMouseMove: e => {\n        own.onMouseMove?.(e);\n        handlers.onMouseMove(e);\n      },\n      onMouseEnter: e => {\n        own.onMouseEnter?.(e);\n        handlers.onMouseEnter();\n      },\n      onMouseLeave: e => {\n        own.onMouseLeave?.(e);\n        handlers.onMouseLeave();\n      },\n      onClick: e => {\n        own.onClick?.(e);\n        handlers.onClick(e);\n      },\n    }),\n    [handlers],\n  );\n\n  return { hover, context, containerClassName: 'relative isolate', getContainerProps };\n}\n\n/**\n * Provides the item registry to the rows and renders the travelling surface.\n * Popups are `bg-popover`; the highlight is the control hover surface on top of it.\n * `-z-1` keeps it under the row content while the container's `isolate`\n * keeps it above the popup background.\n */\nexport function FluidMenuItems({\n  menu,\n  className,\n  children,\n}: {\n  menu: Pick<FluidMenu, 'hover' | 'context'>;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <FluidMenuContext.Provider value={menu.context}>\n      <FluidHoverHighlight hover={menu.hover} className={cn('-z-1 rounded-lg bg-fill', className)} />\n      {children}\n    </FluidMenuContext.Provider>\n  );\n}\n\n/**\n * Callback ref for an item row. Registers the row with the popup's hover\n * state and mirrors the library's highlighted attribute onto it. A no-op\n * outside a provider, so rows still render standalone.\n */\nexport function useFluidMenuItemRef<T extends HTMLElement>(forwardedRef: React.ForwardedRef<T>) {\n  const ctx = React.useContext(FluidMenuContext);\n  const indexRef = React.useRef<number | null>(null);\n  const observerRef = React.useRef<MutationObserver | null>(null);\n\n  return React.useCallback(\n    (element: T | null) => {\n      if (typeof forwardedRef === 'function') forwardedRef(element);\n      else if (forwardedRef) forwardedRef.current = element;\n\n      if (!ctx) return;\n      const { registerItem, setActiveIndex, activeAttr, allocateIndex, releaseIndex } = ctx;\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n\n      if (!element) {\n        if (indexRef.current !== null) {\n          registerItem(indexRef.current, null);\n          releaseIndex(indexRef.current);\n          indexRef.current = null;\n        }\n        return;\n      }\n\n      if (indexRef.current === null) indexRef.current = allocateIndex();\n      const index = indexRef.current;\n      registerItem(index, element);\n\n      const sync = () => {\n        if (isAttrActive(element, activeAttr)) setActiveIndex(index);\n      };\n      sync();\n      if (typeof MutationObserver !== 'undefined') {\n        const observer = new MutationObserver(sync);\n        observer.observe(element, { attributes: true, attributeFilter: [activeAttr] });\n        observerRef.current = observer;\n      }\n    },\n    [ctx, forwardedRef],\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/primitives/form-element.cjs.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
-const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-muted";
+const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-fill-subtle";
 const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
-const inputFocusBorderVisible = "focus-visible:border-foreground/60";
-const inputFocusBorderWithin = "focus-within:border-foreground/60";
+const inputFocusBorderVisible = "focus-visible:border-border-focus";
+const inputFocusBorderWithin = "focus-within:border-border-focus";
 const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;
-const inputHoverBorderVisible = "[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45";
-const inputHoverBorderWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45";
-const inputSurfaceAndFocusStyle = "bg-foreground/10 border border-border text-foreground not-disabled:hover:bg-foreground/14 outline-hidden focus-visible:outline-hidden focus-visible:bg-foreground/14 " + inputFocusBorderVisible;
-const inputOutlineAndFocusStyle = "bg-transparent border border-foreground/30 text-foreground " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
-const fieldTriggerSurfaceStyle = "bg-foreground/10 border-border text-foreground not-disabled:hover:bg-foreground/14 not-disabled:active:bg-foreground/14 focus-visible:bg-foreground/14 " + inputFocusBorderVisible;
+const surfaceTintHover = "[&:hover:not(:focus-visible):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]";
+const surfaceRimFocus = "focus-visible:[--surface-rim:var(--surface-rim-focus)]";
+const surfaceTintHoverWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:[--surface-tint:var(--fill-subtle)]";
+const surfaceRimFocusWithin = "focus-within:[--surface-rim:var(--surface-rim-focus)]";
+const inputSurfaceAndFocusStyle = "bg-card shadow-raised text-foreground disabled:bg-fill-subtle " + surfaceTintHover + " outline-hidden focus-visible:outline-hidden " + surfaceRimFocus;
+const inputSurfaceAndFocusWithinStyle = "bg-card shadow-raised text-foreground has-[:disabled]:bg-fill-subtle " + surfaceTintHoverWithin + " outline-hidden focus-within:outline-hidden " + surfaceRimFocusWithin;
+const fieldTriggerSurfaceStyle = "bg-card not-disabled:hover:bg-card not-disabled:active:bg-card border-0 shadow-raised text-foreground " + surfaceTintHover + " " + surfaceRimFocus;
 function resolveFieldVariant(variant) {
   return variant === "filled" ? "default" : variant;
 }
@@ -24,10 +26,8 @@ exports.disabledOutlineSurfaceStyle = disabledOutlineSurfaceStyle;
 exports.fieldTriggerSurfaceStyle = fieldTriggerSurfaceStyle;
 exports.inputFocusBorderVisible = inputFocusBorderVisible;
 exports.inputFocusBorderWithin = inputFocusBorderWithin;
-exports.inputHoverBorderVisible = inputHoverBorderVisible;
-exports.inputHoverBorderWithin = inputHoverBorderWithin;
-exports.inputOutlineAndFocusStyle = inputOutlineAndFocusStyle;
 exports.inputSurfaceAndFocusStyle = inputSurfaceAndFocusStyle;
+exports.inputSurfaceAndFocusWithinStyle = inputSurfaceAndFocusWithinStyle;
 exports.resolveFieldVariant = resolveFieldVariant;
 exports.sharedFormElementDisabledStyle = sharedFormElementDisabledStyle;
 exports.unstyledFormElementStyle = unstyledFormElementStyle;

package/dist/primitives/form-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-element.cjs.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["// Disabled controls resolve to dedicated muted roles rather than a blanket opacity:\n// an opacity wash inherits whatever sits behind the control, so the same disabled\n// field clears contrast on one surface and fails on another. The `not-disabled:`\n// guards on each variant keep hover and active fills from painting over these.\nexport const sharedFormElementDisabledStyle = 'disabled:cursor-not-allowed disabled:text-muted-foreground';\n\n// Surface half of the disabled language, for neutral controls that carry a fill.\n// Variants with their own hue (primary, destructive) keep that hue at reduced\n// emphasis instead, so a disabled destructive action still reads as destructive.\n// Transparent variants (ghost) opt out entirely: a disabled icon button in a\n// toolbar should stay invisible rather than resolve into a muted pill.\nexport const disabledFilledSurfaceStyle = 'disabled:border-border disabled:bg-muted';\nexport const disabledOutlineSurfaceStyle = 'disabled:border-border disabled:bg-transparent';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent\n// `foreground` (theme-aware — light on dark surfaces, dark on light) that clears\n// WCAG 1.4.11 non-text contrast (3:1) on any surface, where the resting `border`\n// token alone does not. `focus-visible` for the bare control, `focus-within` for\n// wrapper variants (InputGroup) whose focus lives on a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-foreground/60';\nexport const inputFocusBorderWithin = 'focus-within:border-foreground/60';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45';\n// The wrapper itself is never `:disabled` — the control it wraps is — so the guard\n// has to ask about descendants. Without it, hovering a group that contains a\n// disabled input repaints the enabled border over the muted disabled one.\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45';\n\n// Background-agnostic surface + focus recipe shared by Input, Textarea and the\n// filled field triggers (Select/Combobox `default`). Reads on any underlying\n// surface, with no accent on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\n// Filled fields carry their affordance in the fill, exactly like a default Button:\n// the resting `border` stays put on hover and only the surface steps up.\nexport const inputSurfaceAndFocusStyle =\n  'bg-foreground/10 border border-border text-foreground ' +\n  'not-disabled:hover:bg-foreground/14 ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-foreground/14 ' +\n  inputFocusBorderVisible;\n\n// Outline fields share Button's outline ladder exactly: a visible resting border\n// (`foreground/30`), brightening on hover, then the shared focus border.\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-foreground/30 text-foreground ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Filled field trigger (Select/Combobox `default`): the same surface as Input.\n// Applied *after* `buttonVariants` so tailwind-merge replaces the Button's fill\n// and border with the field overlay — a field is not a button. Like every filled\n// control it carries hover in the fill and leaves the resting border alone.\nexport const fieldTriggerSurfaceStyle =\n  'bg-foreground/10 border-border text-foreground ' +\n  'not-disabled:hover:bg-foreground/14 not-disabled:active:bg-foreground/14 ' +\n  'focus-visible:bg-foreground/14 ' +\n  inputFocusBorderVisible;\n\n// `filled` was an alias for `default` (both render the filled surface) and has been\n// removed from the variant set. An unknown value makes cva emit nothing for the\n// variant group, so a field would lose its surface entirely rather than fall back;\n// resolve it here instead. Drop this once no published consumer passes `filled`.\nexport type DeprecatedFilledVariant = 'filled';\n\nexport function resolveFieldVariant<TVariant extends string>(\n  variant: TVariant | DeprecatedFilledVariant | null | undefined,\n): TVariant | 'default' | null | undefined {\n  return variant === 'filled' ? 'default' : (variant as TVariant | null | undefined);\n}\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":";;;;AAIO,MAAM,8BAAA,GAAiC;AAOvC,MAAM,0BAAA,GAA6B;AACnC,MAAM,2BAAA,GAA8B;AAQpC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAIhC,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,4BACX,uKAAA,GAGA;AAIK,MAAM,yBAAA,GACX,6DAAA,GACA,uBAAA,GACA,+CAAA,GAEA;AAMK,MAAM,2BACX,yJAAA,GAGA;AAQK,SAAS,oBACd,OAAA,EACyC;AACzC,EAAA,OAAO,OAAA,KAAY,WAAW,SAAA,GAAa,OAAA;AAC7C;AAIO,MAAM,wBAAA,GAA2B;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form-element.cjs.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["// Disabled controls resolve to dedicated muted roles rather than a blanket opacity:\n// an opacity wash inherits whatever sits behind the control, so the same disabled\n// field clears contrast on one surface and fails on another. The `not-disabled:`\n// guards on each variant keep hover and active fills from painting over these.\nexport const sharedFormElementDisabledStyle = 'disabled:cursor-not-allowed disabled:text-muted-foreground';\n\n// Surface half of the disabled language, for neutral controls that carry a fill.\n// It recesses to the lowest rung of the fill ladder, one step below the resting\n// `--fill`, so a disabled field reads quieter than an enabled one on every\n// surface. Variants with their own hue (primary, destructive) keep that hue at\n// reduced emphasis instead, so a disabled destructive action still reads as\n// destructive. Transparent variants (ghost) opt out entirely: a disabled icon\n// button in a toolbar should stay invisible rather than resolve into a pill.\nexport const disabledFilledSurfaceStyle = 'disabled:border-border disabled:bg-fill-subtle';\nexport const disabledOutlineSurfaceStyle = 'disabled:border-border disabled:bg-transparent';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent\n// `foreground` (theme-aware — light on dark surfaces, dark on light) that clears\n// WCAG 1.4.11 non-text contrast (3:1) on any surface, where the resting `border`\n// token alone does not. `focus-visible` for the bare control, `focus-within` for\n// wrapper variants (InputGroup) whose focus lives on a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-border-focus';\nexport const inputFocusBorderWithin = 'focus-within:border-border-focus';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// A field is the same material as a card: `bg-card` plus `shadow-raised`, which\n// carries the 1px rim, so a field draws no border of its own. That is what makes a\n// filter input and the panel beside it read as one system — in light the field is\n// white on the off-white canvas, in dark it is the same step above it.\n//\n// Hover washes the fill, focus repaints the rim. Both go through `shadow-raised`:\n// an `<input>` cannot carry a pseudo-element, so `--surface-tint` reaches into an\n// inset layer of that utility and gives a field the same state layer a `Card` gets\n// from `state-layer` — the rung a filter chip's segments already wear, which is the\n// weight a resting field should move by. Brightening the rim on hover instead made\n// every field in a form announce the pointer: the boundary is the loudest part of a\n// surface that has no border of its own, so it is reserved for focus, where being\n// unmissable is the point. Disabled is the exception that drops the card fill for\n// the lowest translucent rung, which is how a disabled field reads as recessed.\n//\n// Focus sits at `--surface-rim-focus` rather than the `--border-focus` weight a bare\n// outline needs, because the edge here bounds a surface that already reads as raised.\n// Wrappers whose focus lives on a nested control (InputGroup, a chip) take the\n// `within` flavour.\n//\n// Caller appends a radius (`rounded-full` for single-line inputs, `rounded-xl` for\n// textareas).\n// `:not([data-popup-open])` because a trigger's open rung is a plain attribute\n// selector and would otherwise lose to this compound one while the pointer is\n// still on the trigger that opened the popup.\nconst surfaceTintHover =\n  '[&:hover:not(:focus-visible):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]';\nconst surfaceRimFocus = 'focus-visible:[--surface-rim:var(--surface-rim-focus)]';\n\n// The wrapper itself is never `:disabled` — the control it wraps is — so both\n// guards have to ask about descendants.\nconst surfaceTintHoverWithin = '[&:hover:not(:focus-within):not(:has(:disabled))]:[--surface-tint:var(--fill-subtle)]';\nconst surfaceRimFocusWithin = 'focus-within:[--surface-rim:var(--surface-rim-focus)]';\n\nexport const inputSurfaceAndFocusStyle =\n  'bg-card shadow-raised text-foreground disabled:bg-fill-subtle ' +\n  surfaceTintHover +\n  ' outline-hidden focus-visible:outline-hidden ' +\n  surfaceRimFocus;\n\nexport const inputSurfaceAndFocusWithinStyle =\n  'bg-card shadow-raised text-foreground has-[:disabled]:bg-fill-subtle ' +\n  surfaceTintHoverWithin +\n  ' outline-hidden focus-within:outline-hidden ' +\n  surfaceRimFocusWithin;\n\n// Filled field trigger (Select/Combobox `default`): the same surface as Input.\n// Applied *after* `buttonVariants` so tailwind-merge replaces the Button's fill\n// and border with the field material — a field is not a button. The pins have to\n// repeat the Button's own `not-disabled:` prefix: tailwind-merge keys a class by\n// its variants, so a bare `hover:bg-card` sits in a different group from\n// `not-disabled:hover:bg-fill-hover`, both survive, and the Button's two-variant\n// selector then wins on specificity — which is how a field trigger ended up\n// swapping its whole fill on hover while every other field only washed.\nexport const fieldTriggerSurfaceStyle =\n  'bg-card not-disabled:hover:bg-card not-disabled:active:bg-card border-0 shadow-raised text-foreground ' +\n  surfaceTintHover +\n  ' ' +\n  surfaceRimFocus;\n\n// `filled` was an alias for `default` (both render the filled surface) and has been\n// removed from the variant set. An unknown value makes cva emit nothing for the\n// variant group, so a field would lose its surface entirely rather than fall back;\n// resolve it here instead. Drop this once no published consumer passes `filled`.\nexport type DeprecatedFilledVariant = 'filled';\n\nexport function resolveFieldVariant<TVariant extends string>(\n  variant: TVariant | DeprecatedFilledVariant | null | undefined,\n): TVariant | 'default' | null | undefined {\n  return variant === 'filled' ? 'default' : (variant as TVariant | null | undefined);\n}\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":";;;;AAIO,MAAM,8BAAA,GAAiC;AASvC,MAAM,0BAAA,GAA6B;AACnC,MAAM,2BAAA,GAA8B;AAQpC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AA2B/G,MAAM,gBAAA,GACJ,yGAAA;AACF,MAAM,eAAA,GAAkB,wDAAA;AAIxB,MAAM,sBAAA,GAAyB,uFAAA;AAC/B,MAAM,qBAAA,GAAwB,uDAAA;AAEvB,MAAM,yBAAA,GACX,gEAAA,GACA,gBAAA,GACA,+CAAA,GACA;AAEK,MAAM,+BAAA,GACX,uEAAA,GACA,sBAAA,GACA,8CAAA,GACA;AAUK,MAAM,wBAAA,GACX,wGAAA,GACA,gBAAA,GACA,GAAA,GACA;AAQK,SAAS,oBACd,OAAA,EACyC;AACzC,EAAA,OAAO,OAAA,KAAY,WAAW,SAAA,GAAa,OAAA;AAC7C;AAIO,MAAM,wBAAA,GAA2B;;;;;;;;;;;;;;"}

package/dist/primitives/form-element.es.js

@@ -1,18 +1,20 @@
 const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
-const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-muted";
+const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-fill-subtle";
 const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
-const inputFocusBorderVisible = "focus-visible:border-foreground/60";
-const inputFocusBorderWithin = "focus-within:border-foreground/60";
+const inputFocusBorderVisible = "focus-visible:border-border-focus";
+const inputFocusBorderWithin = "focus-within:border-border-focus";
 const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;
-const inputHoverBorderVisible = "[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45";
-const inputHoverBorderWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45";
-const inputSurfaceAndFocusStyle = "bg-foreground/10 border border-border text-foreground not-disabled:hover:bg-foreground/14 outline-hidden focus-visible:outline-hidden focus-visible:bg-foreground/14 " + inputFocusBorderVisible;
-const inputOutlineAndFocusStyle = "bg-transparent border border-foreground/30 text-foreground " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
-const fieldTriggerSurfaceStyle = "bg-foreground/10 border-border text-foreground not-disabled:hover:bg-foreground/14 not-disabled:active:bg-foreground/14 focus-visible:bg-foreground/14 " + inputFocusBorderVisible;
+const surfaceTintHover = "[&:hover:not(:focus-visible):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]";
+const surfaceRimFocus = "focus-visible:[--surface-rim:var(--surface-rim-focus)]";
+const surfaceTintHoverWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:[--surface-tint:var(--fill-subtle)]";
+const surfaceRimFocusWithin = "focus-within:[--surface-rim:var(--surface-rim-focus)]";
+const inputSurfaceAndFocusStyle = "bg-card shadow-raised text-foreground disabled:bg-fill-subtle " + surfaceTintHover + " outline-hidden focus-visible:outline-hidden " + surfaceRimFocus;
+const inputSurfaceAndFocusWithinStyle = "bg-card shadow-raised text-foreground has-[:disabled]:bg-fill-subtle " + surfaceTintHoverWithin + " outline-hidden focus-within:outline-hidden " + surfaceRimFocusWithin;
+const fieldTriggerSurfaceStyle = "bg-card not-disabled:hover:bg-card not-disabled:active:bg-card border-0 shadow-raised text-foreground " + surfaceTintHover + " " + surfaceRimFocus;
 function resolveFieldVariant(variant) {
   return variant === "filled" ? "default" : variant;
 }
 const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
-export { controlFocusBorderVisible, disabledFilledSurfaceStyle, disabledOutlineSurfaceStyle, fieldTriggerSurfaceStyle, inputFocusBorderVisible, inputFocusBorderWithin, inputHoverBorderVisible, inputHoverBorderWithin, inputOutlineAndFocusStyle, inputSurfaceAndFocusStyle, resolveFieldVariant, sharedFormElementDisabledStyle, unstyledFormElementStyle };
+export { controlFocusBorderVisible, disabledFilledSurfaceStyle, disabledOutlineSurfaceStyle, fieldTriggerSurfaceStyle, inputFocusBorderVisible, inputFocusBorderWithin, inputSurfaceAndFocusStyle, inputSurfaceAndFocusWithinStyle, resolveFieldVariant, sharedFormElementDisabledStyle, unstyledFormElementStyle };
 //# sourceMappingURL=form-element.es.js.map

package/dist/primitives/form-element.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-element.es.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["// Disabled controls resolve to dedicated muted roles rather than a blanket opacity:\n// an opacity wash inherits whatever sits behind the control, so the same disabled\n// field clears contrast on one surface and fails on another. The `not-disabled:`\n// guards on each variant keep hover and active fills from painting over these.\nexport const sharedFormElementDisabledStyle = 'disabled:cursor-not-allowed disabled:text-muted-foreground';\n\n// Surface half of the disabled language, for neutral controls that carry a fill.\n// Variants with their own hue (primary, destructive) keep that hue at reduced\n// emphasis instead, so a disabled destructive action still reads as destructive.\n// Transparent variants (ghost) opt out entirely: a disabled icon button in a\n// toolbar should stay invisible rather than resolve into a muted pill.\nexport const disabledFilledSurfaceStyle = 'disabled:border-border disabled:bg-muted';\nexport const disabledOutlineSurfaceStyle = 'disabled:border-border disabled:bg-transparent';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent\n// `foreground` (theme-aware — light on dark surfaces, dark on light) that clears\n// WCAG 1.4.11 non-text contrast (3:1) on any surface, where the resting `border`\n// token alone does not. `focus-visible` for the bare control, `focus-within` for\n// wrapper variants (InputGroup) whose focus lives on a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-foreground/60';\nexport const inputFocusBorderWithin = 'focus-within:border-foreground/60';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45';\n// The wrapper itself is never `:disabled` — the control it wraps is — so the guard\n// has to ask about descendants. Without it, hovering a group that contains a\n// disabled input repaints the enabled border over the muted disabled one.\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45';\n\n// Background-agnostic surface + focus recipe shared by Input, Textarea and the\n// filled field triggers (Select/Combobox `default`). Reads on any underlying\n// surface, with no accent on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\n// Filled fields carry their affordance in the fill, exactly like a default Button:\n// the resting `border` stays put on hover and only the surface steps up.\nexport const inputSurfaceAndFocusStyle =\n  'bg-foreground/10 border border-border text-foreground ' +\n  'not-disabled:hover:bg-foreground/14 ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-foreground/14 ' +\n  inputFocusBorderVisible;\n\n// Outline fields share Button's outline ladder exactly: a visible resting border\n// (`foreground/30`), brightening on hover, then the shared focus border.\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-foreground/30 text-foreground ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Filled field trigger (Select/Combobox `default`): the same surface as Input.\n// Applied *after* `buttonVariants` so tailwind-merge replaces the Button's fill\n// and border with the field overlay — a field is not a button. Like every filled\n// control it carries hover in the fill and leaves the resting border alone.\nexport const fieldTriggerSurfaceStyle =\n  'bg-foreground/10 border-border text-foreground ' +\n  'not-disabled:hover:bg-foreground/14 not-disabled:active:bg-foreground/14 ' +\n  'focus-visible:bg-foreground/14 ' +\n  inputFocusBorderVisible;\n\n// `filled` was an alias for `default` (both render the filled surface) and has been\n// removed from the variant set. An unknown value makes cva emit nothing for the\n// variant group, so a field would lose its surface entirely rather than fall back;\n// resolve it here instead. Drop this once no published consumer passes `filled`.\nexport type DeprecatedFilledVariant = 'filled';\n\nexport function resolveFieldVariant<TVariant extends string>(\n  variant: TVariant | DeprecatedFilledVariant | null | undefined,\n): TVariant | 'default' | null | undefined {\n  return variant === 'filled' ? 'default' : (variant as TVariant | null | undefined);\n}\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":"AAIO,MAAM,8BAAA,GAAiC;AAOvC,MAAM,0BAAA,GAA6B;AACnC,MAAM,2BAAA,GAA8B;AAQpC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAIhC,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,4BACX,uKAAA,GAGA;AAIK,MAAM,yBAAA,GACX,6DAAA,GACA,uBAAA,GACA,+CAAA,GAEA;AAMK,MAAM,2BACX,yJAAA,GAGA;AAQK,SAAS,oBACd,OAAA,EACyC;AACzC,EAAA,OAAO,OAAA,KAAY,WAAW,SAAA,GAAa,OAAA;AAC7C;AAIO,MAAM,wBAAA,GAA2B;;;;"}
+{"version":3,"file":"form-element.es.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["// Disabled controls resolve to dedicated muted roles rather than a blanket opacity:\n// an opacity wash inherits whatever sits behind the control, so the same disabled\n// field clears contrast on one surface and fails on another. The `not-disabled:`\n// guards on each variant keep hover and active fills from painting over these.\nexport const sharedFormElementDisabledStyle = 'disabled:cursor-not-allowed disabled:text-muted-foreground';\n\n// Surface half of the disabled language, for neutral controls that carry a fill.\n// It recesses to the lowest rung of the fill ladder, one step below the resting\n// `--fill`, so a disabled field reads quieter than an enabled one on every\n// surface. Variants with their own hue (primary, destructive) keep that hue at\n// reduced emphasis instead, so a disabled destructive action still reads as\n// destructive. Transparent variants (ghost) opt out entirely: a disabled icon\n// button in a toolbar should stay invisible rather than resolve into a pill.\nexport const disabledFilledSurfaceStyle = 'disabled:border-border disabled:bg-fill-subtle';\nexport const disabledOutlineSurfaceStyle = 'disabled:border-border disabled:bg-transparent';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent\n// `foreground` (theme-aware — light on dark surfaces, dark on light) that clears\n// WCAG 1.4.11 non-text contrast (3:1) on any surface, where the resting `border`\n// token alone does not. `focus-visible` for the bare control, `focus-within` for\n// wrapper variants (InputGroup) whose focus lives on a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-border-focus';\nexport const inputFocusBorderWithin = 'focus-within:border-border-focus';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// A field is the same material as a card: `bg-card` plus `shadow-raised`, which\n// carries the 1px rim, so a field draws no border of its own. That is what makes a\n// filter input and the panel beside it read as one system — in light the field is\n// white on the off-white canvas, in dark it is the same step above it.\n//\n// Hover washes the fill, focus repaints the rim. Both go through `shadow-raised`:\n// an `<input>` cannot carry a pseudo-element, so `--surface-tint` reaches into an\n// inset layer of that utility and gives a field the same state layer a `Card` gets\n// from `state-layer` — the rung a filter chip's segments already wear, which is the\n// weight a resting field should move by. Brightening the rim on hover instead made\n// every field in a form announce the pointer: the boundary is the loudest part of a\n// surface that has no border of its own, so it is reserved for focus, where being\n// unmissable is the point. Disabled is the exception that drops the card fill for\n// the lowest translucent rung, which is how a disabled field reads as recessed.\n//\n// Focus sits at `--surface-rim-focus` rather than the `--border-focus` weight a bare\n// outline needs, because the edge here bounds a surface that already reads as raised.\n// Wrappers whose focus lives on a nested control (InputGroup, a chip) take the\n// `within` flavour.\n//\n// Caller appends a radius (`rounded-full` for single-line inputs, `rounded-xl` for\n// textareas).\n// `:not([data-popup-open])` because a trigger's open rung is a plain attribute\n// selector and would otherwise lose to this compound one while the pointer is\n// still on the trigger that opened the popup.\nconst surfaceTintHover =\n  '[&:hover:not(:focus-visible):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]';\nconst surfaceRimFocus = 'focus-visible:[--surface-rim:var(--surface-rim-focus)]';\n\n// The wrapper itself is never `:disabled` — the control it wraps is — so both\n// guards have to ask about descendants.\nconst surfaceTintHoverWithin = '[&:hover:not(:focus-within):not(:has(:disabled))]:[--surface-tint:var(--fill-subtle)]';\nconst surfaceRimFocusWithin = 'focus-within:[--surface-rim:var(--surface-rim-focus)]';\n\nexport const inputSurfaceAndFocusStyle =\n  'bg-card shadow-raised text-foreground disabled:bg-fill-subtle ' +\n  surfaceTintHover +\n  ' outline-hidden focus-visible:outline-hidden ' +\n  surfaceRimFocus;\n\nexport const inputSurfaceAndFocusWithinStyle =\n  'bg-card shadow-raised text-foreground has-[:disabled]:bg-fill-subtle ' +\n  surfaceTintHoverWithin +\n  ' outline-hidden focus-within:outline-hidden ' +\n  surfaceRimFocusWithin;\n\n// Filled field trigger (Select/Combobox `default`): the same surface as Input.\n// Applied *after* `buttonVariants` so tailwind-merge replaces the Button's fill\n// and border with the field material — a field is not a button. The pins have to\n// repeat the Button's own `not-disabled:` prefix: tailwind-merge keys a class by\n// its variants, so a bare `hover:bg-card` sits in a different group from\n// `not-disabled:hover:bg-fill-hover`, both survive, and the Button's two-variant\n// selector then wins on specificity — which is how a field trigger ended up\n// swapping its whole fill on hover while every other field only washed.\nexport const fieldTriggerSurfaceStyle =\n  'bg-card not-disabled:hover:bg-card not-disabled:active:bg-card border-0 shadow-raised text-foreground ' +\n  surfaceTintHover +\n  ' ' +\n  surfaceRimFocus;\n\n// `filled` was an alias for `default` (both render the filled surface) and has been\n// removed from the variant set. An unknown value makes cva emit nothing for the\n// variant group, so a field would lose its surface entirely rather than fall back;\n// resolve it here instead. Drop this once no published consumer passes `filled`.\nexport type DeprecatedFilledVariant = 'filled';\n\nexport function resolveFieldVariant<TVariant extends string>(\n  variant: TVariant | DeprecatedFilledVariant | null | undefined,\n): TVariant | 'default' | null | undefined {\n  return variant === 'filled' ? 'default' : (variant as TVariant | null | undefined);\n}\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":"AAIO,MAAM,8BAAA,GAAiC;AASvC,MAAM,0BAAA,GAA6B;AACnC,MAAM,2BAAA,GAA8B;AAQpC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AA2B/G,MAAM,gBAAA,GACJ,yGAAA;AACF,MAAM,eAAA,GAAkB,wDAAA;AAIxB,MAAM,sBAAA,GAAyB,uFAAA;AAC/B,MAAM,qBAAA,GAAwB,uDAAA;AAEvB,MAAM,yBAAA,GACX,gEAAA,GACA,gBAAA,GACA,+CAAA,GACA;AAEK,MAAM,+BAAA,GACX,uEAAA,GACA,sBAAA,GACA,8CAAA,GACA;AAUK,MAAM,wBAAA,GACX,wGAAA,GACA,gBAAA,GACA,GAAA,GACA;AAQK,SAAS,oBACd,OAAA,EACyC;AACzC,EAAA,OAAO,OAAA,KAAY,WAAW,SAAA,GAAa,OAAA;AAC7C;AAIO,MAAM,wBAAA,GAA2B;;;;"}

package/dist/primitives/menu-item.cjs.js

@@ -2,11 +2,16 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const Button = require('../Button-C2dx_QZN.cjs');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const Button = require('../Button-CVewl8nT.cjs');
+const primitives_raisedSurface = require('./raised-surface.cjs.js');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 const MENU_ITEM_OVERRIDES = utils_cn.cn(
   "flex w-full justify-start rounded-lg text-left select-none",
+  // An item may carry a second line (a name over its description). The Button
+  // height becomes the floor so single-line rows keep the control rhythm and a
+  // taller item grows instead of overflowing into its neighbour.
+  "h-auto min-h-control-md py-1",
   // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.
   "focus-visible:border-transparent",
   // No row background: the popup's FluidMenuItems highlight travels between rows;
@@ -28,23 +33,24 @@ const menuItemInsetClass = "pl-[calc(.9em+1.1em+.75em)]";
 const MENU_SIDE_OFFSET = 4;
 const menuPositionerClass = "z-50 outline-none data-[anchor-hidden]:hidden";
 const menuPopupClass = utils_cn.cn(
-  "z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]",
+  "z-50 max-h-[min(var(--spacing-dropdown),var(--available-height))]",
   "w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]",
   "origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto",
-  "new-theme rounded-xl border border-border bg-popover p-1 text-foreground/90 shadow-dialog outline-none",
+  utils_cn.cn("rounded-xl p-1 text-foreground/90 outline-none", primitives_raisedSurface.overlaySurfaceStyle),
   "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
   "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
 );
-const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-muted-foreground uppercase";
+const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-meta tracking-wider text-muted-foreground uppercase";
 const menuSeparatorClass = "-mx-1 my-1 h-px bg-border";
-const menuShortcutClass = "ml-auto text-ui-xs tracking-wider text-muted-foreground tabular-nums";
-const menuEmptyClass = "flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd text-muted-foreground box-content";
+const menuShortcutClass = "ml-auto text-meta tracking-wider text-muted-foreground tabular-nums";
+const menuEmptyClass = "flex h-control-md items-center gap-[.75em] px-[.9em] py-0.5 text-body-sm text-muted-foreground box-content";
 const menuSearchClasses = {
-  // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the
-  // divider does not crowd the first option while the text stays on the item grid.
-  container: "flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-ui-smd",
+  // The input is a full control rung and the row adds `py-0.5` on top, so the search
+  // row sits one notch taller than an item: the divider does not crowd the first
+  // option while the text stays on the item grid.
+  container: "flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-body-sm focus-within:bg-fill-subtle",
   icon: "size-[1.1em] shrink-0 text-muted-foreground",
-  input: "h-form-md w-full bg-transparent text-ui-smd text-foreground outline-hidden placeholder:text-muted-foreground focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-foreground/45 focus-visible:outline-solid"
+  input: "h-control-md w-full bg-transparent text-body-sm text-foreground outline-hidden placeholder:text-muted-foreground"
 };
 
 exports.MENU_SIDE_OFFSET = MENU_SIDE_OFFSET;

package/dist/primitives/menu-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.cjs.js","sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter, DataFilter). An item is a ghost/md Button laid out\n// left-aligned, with `rounded-lg` instead of the pill radius so stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start rounded-lg text-left select-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  // No row background: the popup's FluidMenuItems highlight travels between rows;\n  // the row only lifts its text color.\n  'hover:bg-transparent data-highlighted:text-foreground',\n  'data-selected:text-foreground',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'data-highlighted:bg-destructive/20 data-highlighted:text-destructive',\n);\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, because the Button recipe's `[&>svg]:mx-[-.3em]` would beat `ml-auto`.\nexport const menuItemTrailingIconClass =\n  'ml-auto flex size-[1.1em] shrink-0 items-center justify-center [&>svg]:size-full';\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-foreground');\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(.9em+1.1em+.75em)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  'new-theme rounded-xl border border-border bg-popover p-1 text-foreground/90 shadow-dialog outline-none',\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\nexport const menuLabelClass =\n  'px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-muted-foreground uppercase';\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border';\n\nexport const menuShortcutClass = 'ml-auto text-ui-xs tracking-wider text-muted-foreground tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the\n  // divider does not crowd the first option while the text stays on the item grid.\n  container: 'flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-ui-smd',\n  icon: 'size-[1.1em] shrink-0 text-muted-foreground',\n  input:\n    'h-form-md w-full bg-transparent text-ui-smd text-foreground outline-hidden placeholder:text-muted-foreground focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-foreground/45 focus-visible:outline-solid',\n};\n"],"names":["cn","buttonVariants"],"mappings":";;;;;;;AAWA,MAAM,mBAAA,GAAsBA,WAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA,EAEA,kCAAA;AAAA;AAAA;AAAA,EAGA,uDAAA;AAAA,EACA,+BAAA;AAAA,EACA,6FAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,aAAA,GAAgBA,WAAA,CAAGC,qBAAA,CAAe,EAAE,OAAA,EAAS,SAAS,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,mBAAmB;AAE9F,MAAM,wBAAA,GAA2BD,WAAA;AAAA,EACtCC,sBAAe,EAAE,OAAA,EAAS,mBAAA,EAAqB,IAAA,EAAM,MAAM,CAAA;AAAA,EAC3D,mBAAA;AAAA,EACA;AACF;AAIO,MAAM,yBAAA,GACX;AAEK,MAAM,kBAAA,GAAqBD,WAAA,CAAG,yBAAA,EAA2B,iBAAiB;AAG1E,MAAM,kBAAA,GAAqB;AAE3B,MAAM,gBAAA,GAAmB;AAGzB,MAAM,mBAAA,GAAsB;AAI5B,MAAM,cAAA,GAAiBA,WAAA;AAAA,EAC5B,iFAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACA,wGAAA;AAAA,EACA,kJAAA;AAAA,EACA;AACF;AAEO,MAAM,cAAA,GACX;AAEK,MAAM,kBAAA,GAAqB;AAE3B,MAAM,iBAAA,GAAoB;AAG1B,MAAM,cAAA,GACX;AAEK,MAAM,iBAAA,GAAoB;AAAA;AAAA;AAAA,EAG/B,SAAA,EAAW,mFAAA;AAAA,EACX,IAAA,EAAM,6CAAA;AAAA,EACN,KAAA,EACE;AACJ;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"menu-item.cjs.js","sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter, DataFilter). An item is a ghost/md Button laid out\n// left-aligned, with `rounded-lg` instead of the pill radius so stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start rounded-lg text-left select-none',\n  // An item may carry a second line (a name over its description). The Button\n  // height becomes the floor so single-line rows keep the control rhythm and a\n  // taller item grows instead of overflowing into its neighbour.\n  'h-auto min-h-control-md py-1',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  // No row background: the popup's FluidMenuItems highlight travels between rows;\n  // the row only lifts its text color.\n  'hover:bg-transparent data-highlighted:text-foreground',\n  'data-selected:text-foreground',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'data-highlighted:bg-destructive/20 data-highlighted:text-destructive',\n);\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, because the Button recipe's `[&>svg]:mx-[-.3em]` would beat `ml-auto`.\nexport const menuItemTrailingIconClass =\n  'ml-auto flex size-[1.1em] shrink-0 items-center justify-center [&>svg]:size-full';\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-foreground');\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(.9em+1.1em+.75em)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--spacing-dropdown),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  cn('rounded-xl p-1 text-foreground/90 outline-none', overlaySurfaceStyle),\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\nexport const menuLabelClass = 'px-[.9em] pt-1.5 pb-1 text-meta tracking-wider text-muted-foreground uppercase';\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border';\n\nexport const menuShortcutClass = 'ml-auto text-meta tracking-wider text-muted-foreground tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-control-md items-center gap-[.75em] px-[.9em] py-0.5 text-body-sm text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // The input is a full control rung and the row adds `py-0.5` on top, so the search\n  // row sits one notch taller than an item: the divider does not crowd the first\n  // option while the text stays on the item grid.\n  container:\n    'flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-body-sm focus-within:bg-fill-subtle',\n  icon: 'size-[1.1em] shrink-0 text-muted-foreground',\n  input:\n    'h-control-md w-full bg-transparent text-body-sm text-foreground outline-hidden placeholder:text-muted-foreground',\n};\n"],"names":["cn","buttonVariants","overlaySurfaceStyle"],"mappings":";;;;;;;;AAYA,MAAM,mBAAA,GAAsBA,WAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA;AAAA;AAAA,EAIA,8BAAA;AAAA;AAAA,EAEA,kCAAA;AAAA;AAAA;AAAA,EAGA,uDAAA;AAAA,EACA,+BAAA;AAAA,EACA,6FAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,aAAA,GAAgBA,WAAA,CAAGC,qBAAA,CAAe,EAAE,OAAA,EAAS,SAAS,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,mBAAmB;AAE9F,MAAM,wBAAA,GAA2BD,WAAA;AAAA,EACtCC,sBAAe,EAAE,OAAA,EAAS,mBAAA,EAAqB,IAAA,EAAM,MAAM,CAAA;AAAA,EAC3D,mBAAA;AAAA,EACA;AACF;AAIO,MAAM,yBAAA,GACX;AAEK,MAAM,kBAAA,GAAqBD,WAAA,CAAG,yBAAA,EAA2B,iBAAiB;AAG1E,MAAM,kBAAA,GAAqB;AAE3B,MAAM,gBAAA,GAAmB;AAGzB,MAAM,mBAAA,GAAsB;AAI5B,MAAM,cAAA,GAAiBA,WAAA;AAAA,EAC5B,mEAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACAA,WAAA,CAAG,kDAAkDE,4CAAmB,CAAA;AAAA,EACxE,kJAAA;AAAA,EACA;AACF;AAEO,MAAM,cAAA,GAAiB;AAEvB,MAAM,kBAAA,GAAqB;AAE3B,MAAM,iBAAA,GAAoB;AAG1B,MAAM,cAAA,GACX;AAEK,MAAM,iBAAA,GAAoB;AAAA;AAAA;AAAA;AAAA,EAI/B,SAAA,EACE,gHAAA;AAAA,EACF,IAAA,EAAM,6CAAA;AAAA,EACN,KAAA,EACE;AACJ;;;;;;;;;;;;;;;;"}

package/dist/primitives/menu-item.es.js

@@ -1,8 +1,13 @@
-import { b as buttonVariants } from '../Button-DS6O6fvU.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { b as buttonVariants } from '../Button-cWcBEd-G.js';
+import { overlaySurfaceStyle } from './raised-surface.es.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 const MENU_ITEM_OVERRIDES = cn(
   "flex w-full justify-start rounded-lg text-left select-none",
+  // An item may carry a second line (a name over its description). The Button
+  // height becomes the floor so single-line rows keep the control rhythm and a
+  // taller item grows instead of overflowing into its neighbour.
+  "h-auto min-h-control-md py-1",
   // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.
   "focus-visible:border-transparent",
   // No row background: the popup's FluidMenuItems highlight travels between rows;
@@ -24,23 +29,24 @@ const menuItemInsetClass = "pl-[calc(.9em+1.1em+.75em)]";
 const MENU_SIDE_OFFSET = 4;
 const menuPositionerClass = "z-50 outline-none data-[anchor-hidden]:hidden";
 const menuPopupClass = cn(
-  "z-50 max-h-[min(var(--max-height-dropdown-max-height),var(--available-height))]",
+  "z-50 max-h-[min(var(--spacing-dropdown),var(--available-height))]",
   "w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]",
   "origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto",
-  "new-theme rounded-xl border border-border bg-popover p-1 text-foreground/90 shadow-dialog outline-none",
+  cn("rounded-xl p-1 text-foreground/90 outline-none", overlaySurfaceStyle),
   "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
   "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
 );
-const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-muted-foreground uppercase";
+const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-meta tracking-wider text-muted-foreground uppercase";
 const menuSeparatorClass = "-mx-1 my-1 h-px bg-border";
-const menuShortcutClass = "ml-auto text-ui-xs tracking-wider text-muted-foreground tabular-nums";
-const menuEmptyClass = "flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd text-muted-foreground box-content";
+const menuShortcutClass = "ml-auto text-meta tracking-wider text-muted-foreground tabular-nums";
+const menuEmptyClass = "flex h-control-md items-center gap-[.75em] px-[.9em] py-0.5 text-body-sm text-muted-foreground box-content";
 const menuSearchClasses = {
-  // Row = h-form-md input + py-0.5 → 32px, one notch above the 28px items so the
-  // divider does not crowd the first option while the text stays on the item grid.
-  container: "flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-ui-smd",
+  // The input is a full control rung and the row adds `py-0.5` on top, so the search
+  // row sits one notch taller than an item: the divider does not crowd the first
+  // option while the text stays on the item grid.
+  container: "flex items-center gap-[.75em] border-b border-border px-[.9em] py-0.5 text-body-sm focus-within:bg-fill-subtle",
   icon: "size-[1.1em] shrink-0 text-muted-foreground",
-  input: "h-form-md w-full bg-transparent text-ui-smd text-foreground outline-hidden placeholder:text-muted-foreground focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-foreground/45 focus-visible:outline-solid"
+  input: "h-control-md w-full bg-transparent text-body-sm text-foreground outline-hidden placeholder:text-muted-foreground"
 };
 
 export { MENU_SIDE_OFFSET, menuEmptyClass, menuItemCheckClass, menuItemClass, menuItemDestructiveClass, menuItemInsetClass, menuItemTrailingIconClass, menuLabelClass, menuPopupClass, menuPositionerClass, menuSearchClasses, menuSeparatorClass, menuShortcutClass };