@mastra/playground-ui 57.0.0 → 58.0.0-alpha.1

package/dist/{page-header-CSigVThQ.js → page-header-CyXAezlZ.js}

@@ -1,15 +1,9 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { c as cn } from './cn-65Adrsfj.js';
+import { Children, isValidElement } from 'react';
 
 function PageHeaderAction({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "page-header-action",
-      className: cn("col-start-[action] row-start-1 self-center justify-self-end", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { "data-slot": "page-header-action", className: cn("ml-auto shrink-0 self-start pt-0.5", className), ...props });
 }
 
 function PageHeaderDescription({ children, className, isLoading, ...props }) {
@@ -34,7 +28,7 @@ function PageHeaderIcon({ className, ...props }) {
     {
       "data-slot": "page-header-icon",
       className: cn(
-        "col-start-[icon] row-start-1 flex items-center self-center text-muted-foreground [&>svg]:size-6",
+        "col-start-[icon] row-start-1 flex items-center self-center text-muted-foreground [&>svg]:size-5",
         className
       ),
       ...props
@@ -86,22 +80,27 @@ function PageHeaderRoot({
   ...props
 }) {
   const useLegacyApi = children === void 0 && title !== void 0;
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      className: cn(
-        "relative grid w-full grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]] gap-x-3 gap-y-1",
-        "has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]]",
-        className
-      ),
-      ...props,
-      children: useLegacyApi ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        !isLoading && icon !== void 0 && /* @__PURE__ */ jsx(PageHeaderIcon, { children: icon }),
-        /* @__PURE__ */ jsx(PageHeaderTitle, { isLoading, children: title }),
-        description !== void 0 && /* @__PURE__ */ jsx(PageHeaderDescription, { isLoading, children: description })
-      ] }) : children
-    }
-  );
+  const items = Children.toArray(children);
+  const actions = items.filter((child) => isValidElement(child) && child.type === PageHeaderAction);
+  const content = items.filter((child) => !actions.includes(child));
+  return /* @__PURE__ */ jsxs("header", { className: cn("relative flex w-full items-start gap-3", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "page-header-grid",
+        className: cn(
+          "grid min-w-0 flex-1 grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[end]] gap-x-3 gap-y-1",
+          "has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[end]]"
+        ),
+        children: useLegacyApi ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          !isLoading && icon !== void 0 && /* @__PURE__ */ jsx(PageHeaderIcon, { children: icon }),
+          /* @__PURE__ */ jsx(PageHeaderTitle, { isLoading, children: title }),
+          description !== void 0 && /* @__PURE__ */ jsx(PageHeaderDescription, { isLoading, children: description })
+        ] }) : content
+      }
+    ),
+    actions
+  ] });
 }
 
 const PageHeader = Object.assign(PageHeaderRoot, {
@@ -113,4 +112,4 @@ const PageHeader = Object.assign(PageHeaderRoot, {
 });
 
 export { PageHeader as P };
-//# sourceMappingURL=page-header-CSigVThQ.js.map
+//# sourceMappingURL=page-header-CyXAezlZ.js.map

package/dist/page-header-CyXAezlZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-CyXAezlZ.js","sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div data-slot=\"page-header-action\" className={cn('ml-auto shrink-0 self-start pt-0.5', className)} {...props} />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <p\n      data-slot=\"page-header-description\"\n      className={cn(\n        'col-[title/end] flex max-w-140 flex-wrap gap-x-4 gap-y-1 text-caption text-muted-foreground',\n        isLoading && 'w-160 max-w-[80%] animate-pulse rounded-md bg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </p>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn(\n        'col-start-[icon] row-start-1 flex items-center self-center text-muted-foreground [&>svg]:size-5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside ? 'col-start-[meta] row-start-1 self-center justify-self-start' : 'col-[title/end]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps) {\n  return (\n    <h1\n      data-slot=\"page-header-title\"\n      className={cn(\n        'col-start-[title] row-start-1 flex min-w-0 items-center gap-2 self-start',\n        'text-heading text-foreground',\n        '[&>svg]:size-[1.25em] [&>svg]:opacity-50',\n        isLoading && 'w-60 max-w-[50%] animate-pulse rounded-md bg-fill',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </h1>\n  );\n}\n","import { Children, isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderRootProps extends Omit<ComponentPropsWithoutRef<'header'>, 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  isLoading?: boolean;\n}\n\nexport function PageHeaderRoot({\n  children,\n  className,\n  title,\n  description,\n  icon,\n  isLoading,\n  ...props\n}: PageHeaderRootProps) {\n  const useLegacyApi = children === undefined && title !== undefined;\n\n  // Actions sit outside the title grid so their height never affects title/meta/description alignment.\n  const items = Children.toArray(children);\n  const actions = items.filter(child => isValidElement(child) && child.type === PageHeaderAction);\n  const content = items.filter(child => !actions.includes(child));\n\n  return (\n    <header className={cn('relative flex w-full items-start gap-3', className)} {...props}>\n      <div\n        data-slot=\"page-header-grid\"\n        className={cn(\n          'grid min-w-0 flex-1 grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[end]] gap-x-3 gap-y-1',\n          'has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[end]]',\n        )}\n      >\n        {useLegacyApi ? (\n          <>\n            {!isLoading && icon !== undefined && <PageHeaderIcon>{icon}</PageHeaderIcon>}\n            <PageHeaderTitle isLoading={isLoading}>{title}</PageHeaderTitle>\n            {description !== undefined && (\n              <PageHeaderDescription isLoading={isLoading}>{description}</PageHeaderDescription>\n            )}\n          </>\n        ) : (\n          content\n        )}\n      </div>\n      {actions}\n    </header>\n  );\n}\n","import { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"names":[],"mappings":"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"}

package/dist/{page-header-DzEEkOca.cjs → page-header-Dk3s3XtC.cjs}

@@ -2,16 +2,10 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
+const React = require('react');
 
 function PageHeaderAction({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "page-header-action",
-      className: utils_cn.cn("col-start-[action] row-start-1 self-center justify-self-end", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-action", className: utils_cn.cn("ml-auto shrink-0 self-start pt-0.5", className), ...props });
 }
 
 function PageHeaderDescription({ children, className, isLoading, ...props }) {
@@ -36,7 +30,7 @@ function PageHeaderIcon({ className, ...props }) {
     {
       "data-slot": "page-header-icon",
       className: utils_cn.cn(
-        "col-start-[icon] row-start-1 flex items-center self-center text-muted-foreground [&>svg]:size-6",
+        "col-start-[icon] row-start-1 flex items-center self-center text-muted-foreground [&>svg]:size-5",
         className
       ),
       ...props
@@ -88,22 +82,27 @@ function PageHeaderRoot({
   ...props
 }) {
   const useLegacyApi = children === void 0 && title !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "header",
-    {
-      className: utils_cn.cn(
-        "relative grid w-full grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]] gap-x-3 gap-y-1",
-        "has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]]",
-        className
-      ),
-      ...props,
-      children: useLegacyApi ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        !isLoading && icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PageHeaderIcon, { children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(PageHeaderTitle, { isLoading, children: title }),
-        description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PageHeaderDescription, { isLoading, children: description })
-      ] }) : children
-    }
-  );
+  const items = React.Children.toArray(children);
+  const actions = items.filter((child) => React.isValidElement(child) && child.type === PageHeaderAction);
+  const content = items.filter((child) => !actions.includes(child));
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: utils_cn.cn("relative flex w-full items-start gap-3", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "page-header-grid",
+        className: utils_cn.cn(
+          "grid min-w-0 flex-1 grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[end]] gap-x-3 gap-y-1",
+          "has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[end]]"
+        ),
+        children: useLegacyApi ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          !isLoading && icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PageHeaderIcon, { children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(PageHeaderTitle, { isLoading, children: title }),
+          description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PageHeaderDescription, { isLoading, children: description })
+        ] }) : content
+      }
+    ),
+    actions
+  ] });
 }
 
 const PageHeader = Object.assign(PageHeaderRoot, {
@@ -115,4 +114,4 @@ const PageHeader = Object.assign(PageHeaderRoot, {
 });
 
 exports.PageHeader = PageHeader;
-//# sourceMappingURL=page-header-DzEEkOca.cjs.map
+//# sourceMappingURL=page-header-Dk3s3XtC.cjs.map

package/dist/page-header-Dk3s3XtC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-Dk3s3XtC.cjs","sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div data-slot=\"page-header-action\" className={cn('ml-auto shrink-0 self-start pt-0.5', className)} {...props} />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <p\n      data-slot=\"page-header-description\"\n      className={cn(\n        'col-[title/end] flex max-w-140 flex-wrap gap-x-4 gap-y-1 text-caption text-muted-foreground',\n        isLoading && 'w-160 max-w-[80%] animate-pulse rounded-md bg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </p>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn(\n        'col-start-[icon] row-start-1 flex items-center self-center text-muted-foreground [&>svg]:size-5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside ? 'col-start-[meta] row-start-1 self-center justify-self-start' : 'col-[title/end]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps) {\n  return (\n    <h1\n      data-slot=\"page-header-title\"\n      className={cn(\n        'col-start-[title] row-start-1 flex min-w-0 items-center gap-2 self-start',\n        'text-heading text-foreground',\n        '[&>svg]:size-[1.25em] [&>svg]:opacity-50',\n        isLoading && 'w-60 max-w-[50%] animate-pulse rounded-md bg-fill',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </h1>\n  );\n}\n","import { Children, isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderRootProps extends Omit<ComponentPropsWithoutRef<'header'>, 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  isLoading?: boolean;\n}\n\nexport function PageHeaderRoot({\n  children,\n  className,\n  title,\n  description,\n  icon,\n  isLoading,\n  ...props\n}: PageHeaderRootProps) {\n  const useLegacyApi = children === undefined && title !== undefined;\n\n  // Actions sit outside the title grid so their height never affects title/meta/description alignment.\n  const items = Children.toArray(children);\n  const actions = items.filter(child => isValidElement(child) && child.type === PageHeaderAction);\n  const content = items.filter(child => !actions.includes(child));\n\n  return (\n    <header className={cn('relative flex w-full items-start gap-3', className)} {...props}>\n      <div\n        data-slot=\"page-header-grid\"\n        className={cn(\n          'grid min-w-0 flex-1 grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[end]] gap-x-3 gap-y-1',\n          'has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[end]]',\n        )}\n      >\n        {useLegacyApi ? (\n          <>\n            {!isLoading && icon !== undefined && <PageHeaderIcon>{icon}</PageHeaderIcon>}\n            <PageHeaderTitle isLoading={isLoading}>{title}</PageHeaderTitle>\n            {description !== undefined && (\n              <PageHeaderDescription isLoading={isLoading}>{description}</PageHeaderDescription>\n            )}\n          </>\n        ) : (\n          content\n        )}\n      </div>\n      {actions}\n    </header>\n  );\n}\n","import { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"names":["jsx","cn","Fragment","Children","isValidElement","jsxs"],"mappings":"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"}

package/dist/primitives/control-size.cjs.js

@@ -36,11 +36,10 @@ const controlSizeClasses = {
 };
 const controlTriggerOpenState = {
   default: "data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground",
-  outline: "data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground data-[popup-open]:border-border-hover",
   ghost: "data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground"
 };
 function controlTriggerOpenStateFor(variant) {
-  return variant === "default" || variant === "outline" || variant === "ghost" ? controlTriggerOpenState[variant] : void 0;
+  return variant === "default" || variant === "ghost" ? controlTriggerOpenState[variant] : void 0;
 }
 
 exports.ControlSizeContext = ControlSizeContext;

package/dist/primitives/control-size.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-size.cjs.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["import * as React from 'react';\n\n// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n// The rung a wrapper imposes on the controls inside it (ButtonsGroup). A control's box is\n// forced by the wrapper's stylesheet, which reaches segments a provider cannot name — Base\n// UI renders a trigger as its own child. This carries what a stylesheet cannot reach\n// instead: the type role and adornment scale a field keys off its own `data-size`.\nexport const ControlSizeContext = React.createContext<ControlSize | undefined>(undefined);\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  sm: 'h-control-sm',\n  md: 'h-control-md',\n  lg: 'h-control-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + text role. Heights: sm 28px / md 30px / lg 32px. `md` is the default\n// everywhere, and a control's label is a label at every height — the box grows, the\n// type does not, which is why all three share `text-label` (13px/500, measured from\n// Linear, whose buttons are 13px regardless of height). The 20px rung is gone: a\n// control that small cannot hold a 13px label, and the pages here carry few enough\n// items that they never needed it.\n// The role carries the weight, so no control adds `font-medium` on top.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  sm: 'h-control-sm text-label',\n  md: 'h-control-md text-label',\n  lg: 'h-control-lg text-label',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` washes through `--surface-tint`, the\n// layer its raised material expresses every other state in: its fill is a pinned card\n// colour, and swapping that would drop the control out of the material it shares with a\n// field. The transparent variants have no material to wash, so they take a fill rung.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground',\n  outline: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground data-[popup-open]:border-border-hover',\n  ghost: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,kBAAA,GAAqBA,gBAAA,CAAM,aAAA,CAAuC,MAAS;AAIjF,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,cAAA;AAAA,EACJ,EAAA,EAAI,cAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAeO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAQO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,kFAAA;AAAA,EACT,OAAA,EAAS,0GAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;;;;;"}
+{"version":3,"file":"control-size.cjs.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["import * as React from 'react';\n\n// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n// The rung a wrapper imposes on the controls inside it (ButtonsGroup). A control's box is\n// forced by the wrapper's stylesheet, which reaches segments a provider cannot name — Base\n// UI renders a trigger as its own child. This carries what a stylesheet cannot reach\n// instead: the type role and adornment scale a field keys off its own `data-size`.\nexport const ControlSizeContext = React.createContext<ControlSize | undefined>(undefined);\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  sm: 'h-control-sm',\n  md: 'h-control-md',\n  lg: 'h-control-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + text role. Heights: sm 28px / md 30px / lg 32px. `md` is the default\n// everywhere, and a control's label is a label at every height — the box grows, the\n// type does not, which is why all three share `text-label` (13px/500, measured from\n// Linear, whose buttons are 13px regardless of height). The 20px rung is gone: a\n// control that small cannot hold a 13px label, and the pages here carry few enough\n// items that they never needed it.\n// The role carries the weight, so no control adds `font-medium` on top.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  sm: 'h-control-sm text-label',\n  md: 'h-control-md text-label',\n  lg: 'h-control-lg text-label',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` washes through `--surface-tint`, the\n// layer its raised material expresses every other state in: its fill is a pinned card\n// colour, and swapping that would drop the control out of the material it shares with a\n// field. `ghost` has no material to wash, so it takes a fill rung.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground',\n  ghost: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'ghost' ? controlTriggerOpenState[variant] : undefined;\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,kBAAA,GAAqBA,gBAAA,CAAM,aAAA,CAAuC,MAAS;AAIjF,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,cAAA;AAAA,EACJ,EAAA,EAAI,cAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAeO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAQO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,kFAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,YAAY,SAAA,IAAa,OAAA,KAAY,OAAA,GAAU,uBAAA,CAAwB,OAAO,CAAA,GAAI,MAAA;AAC3F;;;;;;;;"}

package/dist/primitives/control-size.es.js

@@ -13,11 +13,10 @@ const controlSizeClasses = {
 };
 const controlTriggerOpenState = {
   default: "data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground",
-  outline: "data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground data-[popup-open]:border-border-hover",
   ghost: "data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground"
 };
 function controlTriggerOpenStateFor(variant) {
-  return variant === "default" || variant === "outline" || variant === "ghost" ? controlTriggerOpenState[variant] : void 0;
+  return variant === "default" || variant === "ghost" ? controlTriggerOpenState[variant] : void 0;
 }
 
 export { ControlSizeContext, controlHeight, controlSizeClasses, controlTriggerOpenState, controlTriggerOpenStateFor };

package/dist/primitives/control-size.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-size.es.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["import * as React from 'react';\n\n// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n// The rung a wrapper imposes on the controls inside it (ButtonsGroup). A control's box is\n// forced by the wrapper's stylesheet, which reaches segments a provider cannot name — Base\n// UI renders a trigger as its own child. This carries what a stylesheet cannot reach\n// instead: the type role and adornment scale a field keys off its own `data-size`.\nexport const ControlSizeContext = React.createContext<ControlSize | undefined>(undefined);\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  sm: 'h-control-sm',\n  md: 'h-control-md',\n  lg: 'h-control-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + text role. Heights: sm 28px / md 30px / lg 32px. `md` is the default\n// everywhere, and a control's label is a label at every height — the box grows, the\n// type does not, which is why all three share `text-label` (13px/500, measured from\n// Linear, whose buttons are 13px regardless of height). The 20px rung is gone: a\n// control that small cannot hold a 13px label, and the pages here carry few enough\n// items that they never needed it.\n// The role carries the weight, so no control adds `font-medium` on top.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  sm: 'h-control-sm text-label',\n  md: 'h-control-md text-label',\n  lg: 'h-control-lg text-label',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` washes through `--surface-tint`, the\n// layer its raised material expresses every other state in: its fill is a pinned card\n// colour, and swapping that would drop the control out of the material it shares with a\n// field. The transparent variants have no material to wash, so they take a fill rung.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground',\n  outline: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground data-[popup-open]:border-border-hover',\n  ghost: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":";;AAeO,MAAM,kBAAA,GAAqB,KAAA,CAAM,aAAA,CAAuC,MAAS;AAIjF,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,cAAA;AAAA,EACJ,EAAA,EAAI,cAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAeO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAQO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,kFAAA;AAAA,EACT,OAAA,EAAS,0GAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;"}
+{"version":3,"file":"control-size.es.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["import * as React from 'react';\n\n// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n// The rung a wrapper imposes on the controls inside it (ButtonsGroup). A control's box is\n// forced by the wrapper's stylesheet, which reaches segments a provider cannot name — Base\n// UI renders a trigger as its own child. This carries what a stylesheet cannot reach\n// instead: the type role and adornment scale a field keys off its own `data-size`.\nexport const ControlSizeContext = React.createContext<ControlSize | undefined>(undefined);\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  sm: 'h-control-sm',\n  md: 'h-control-md',\n  lg: 'h-control-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + text role. Heights: sm 28px / md 30px / lg 32px. `md` is the default\n// everywhere, and a control's label is a label at every height — the box grows, the\n// type does not, which is why all three share `text-label` (13px/500, measured from\n// Linear, whose buttons are 13px regardless of height). The 20px rung is gone: a\n// control that small cannot hold a 13px label, and the pages here carry few enough\n// items that they never needed it.\n// The role carries the weight, so no control adds `font-medium` on top.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  sm: 'h-control-sm text-label',\n  md: 'h-control-md text-label',\n  lg: 'h-control-lg text-label',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` washes through `--surface-tint`, the\n// layer its raised material expresses every other state in: its fill is a pinned card\n// colour, and swapping that would drop the control out of the material it shares with a\n// field. `ghost` has no material to wash, so it takes a fill rung.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground',\n  ghost: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'ghost' ? controlTriggerOpenState[variant] : undefined;\n}\n"],"names":[],"mappings":";;AAeO,MAAM,kBAAA,GAAqB,KAAA,CAAM,aAAA,CAAuC,MAAS;AAIjF,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,cAAA;AAAA,EACJ,EAAA,EAAI,cAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAeO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAQO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,kFAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,YAAY,SAAA,IAAa,OAAA,KAAY,OAAA,GAAU,uBAAA,CAAwB,OAAO,CAAA,GAAI,MAAA;AAC3F;;;;"}

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

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
-const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
 const inputFocusBorderVisible = "focus-visible:border-border-focus";
 const inputFocusBorderWithin = "focus-within:border-border-focus";
 const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${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 fieldRimFocus = "focus-visible:[--surface-rim:var(--field-rim-focus)]";
+const fieldRimFocusWithin = "focus-within:[--surface-rim:var(--field-rim-focus)]";
+const fieldErrorRim = "[--field-rim:var(--destructive)] [--field-rim-focus:var(--destructive)]";
+const fieldErrorRimWithin = "has-[[aria-invalid=true]]:[--field-rim:var(--destructive)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive)]";
+const fieldTriggerStyle = "bg-field shadow-input " + fieldRimFocus + " disabled:bg-field-disabled aria-disabled:bg-field-disabled data-[disabled]:bg-field-disabled aria-invalid:[--field-rim:var(--destructive)] aria-invalid:[--field-rim-focus:var(--destructive)]";
+const inputSurfaceAndFocusStyle = "bg-field shadow-input text-foreground disabled:bg-field-disabled " + surfaceTintHover + " outline-hidden focus-visible:outline-hidden " + fieldRimFocus;
+const inputSurfaceAndFocusWithinStyle = "bg-field shadow-input text-foreground has-[:disabled]:bg-field-disabled " + surfaceTintHoverWithin + " outline-hidden focus-within:outline-hidden " + fieldRimFocusWithin;
 const controlTintHover = "[&:hover:not(:active):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]";
 const controlTintActive = "[&:active:not(:disabled)]:[--surface-tint:var(--fill)]";
 const raisedControlSurfaceStyle = "bg-card shadow-raised text-foreground " + controlTintHover + " " + controlTintActive + " " + surfaceRimFocus;
@@ -22,7 +25,9 @@ function resolveFieldVariant(variant) {
 const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
 exports.controlFocusBorderVisible = controlFocusBorderVisible;
-exports.disabledOutlineSurfaceStyle = disabledOutlineSurfaceStyle;
+exports.fieldErrorRim = fieldErrorRim;
+exports.fieldErrorRimWithin = fieldErrorRimWithin;
+exports.fieldTriggerStyle = fieldTriggerStyle;
 exports.inputFocusBorderVisible = inputFocusBorderVisible;
 exports.inputFocusBorderWithin = inputFocusBorderWithin;
 exports.inputSurfaceAndFocusStyle = inputSurfaceAndFocusStyle;

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// 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 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// The same material, for a neutral control that is a button rather than a field: `Button`'s\n// `default` variant, and with it every trigger built on it (Select, Combobox, DateTimePicker).\n// A filled neutral control is one material across the system — a `md` input beside a `md`\n// button had two resting fills, `--card` and the 6% `--fill` rung, and read as two systems.\n//\n// A button answers the pointer harder than a field does: a field washes on hover only\n// (its rim is reserved for focus), a button washes on hover and again on press. Both go\n// through `--surface-tint` for the reason above it — an element with a fill cannot carry a\n// pseudo-element state layer. `:not(:active)` on the hover guard keeps the two off each\n// other's specificity: they are both arbitrary property setters, so whichever matched last\n// would otherwise decide the press.\nconst controlTintHover =\n  '[&:hover:not(:active):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]';\nconst controlTintActive = '[&:active:not(:disabled)]:[--surface-tint:var(--fill)]';\n\nexport const raisedControlSurfaceStyle =\n  'bg-card shadow-raised text-foreground ' + controlTintHover + ' ' + controlTintActive + ' ' + 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,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;AAaF,MAAM,gBAAA,GACJ,kGAAA;AACF,MAAM,iBAAA,GAAoB,wDAAA;AAEnB,MAAM,yBAAA,GACX,wCAAA,GAA2C,gBAAA,GAAmB,GAAA,GAAM,oBAAoB,GAAA,GAAM;AAQzF,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// 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 fieldRimFocus = 'focus-visible:[--surface-rim:var(--field-rim-focus)]';\nconst fieldRimFocusWithin = 'focus-within:[--surface-rim:var(--field-rim-focus)]';\nexport const fieldErrorRim = '[--field-rim:var(--destructive)] [--field-rim-focus:var(--destructive)]';\nexport const fieldErrorRimWithin =\n  'has-[[aria-invalid=true]]:[--field-rim:var(--destructive)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive)]';\nexport const fieldTriggerStyle =\n  'bg-field shadow-input ' +\n  fieldRimFocus +\n  ' disabled:bg-field-disabled aria-disabled:bg-field-disabled data-[disabled]:bg-field-disabled aria-invalid:[--field-rim:var(--destructive)] aria-invalid:[--field-rim-focus:var(--destructive)]';\n\nexport const inputSurfaceAndFocusStyle =\n  'bg-field shadow-input text-foreground disabled:bg-field-disabled ' +\n  surfaceTintHover +\n  ' outline-hidden focus-visible:outline-hidden ' +\n  fieldRimFocus;\n\nexport const inputSurfaceAndFocusWithinStyle =\n  'bg-field shadow-input text-foreground has-[:disabled]:bg-field-disabled ' +\n  surfaceTintHoverWithin +\n  ' outline-hidden focus-within:outline-hidden ' +\n  fieldRimFocusWithin;\n\n// The same material, for a neutral control that is a button rather than a field: `Button`'s\n// `default` variant, and with it every trigger built on it (Select, Combobox, DateTimePicker).\n// A filled neutral control is one material across the system — a `md` input beside a `md`\n// button had two resting fills, `--card` and the 6% `--fill` rung, and read as two systems.\n//\n// A button answers the pointer harder than a field does: a field washes on hover only\n// (its rim is reserved for focus), a button washes on hover and again on press. Both go\n// through `--surface-tint` for the reason above it — an element with a fill cannot carry a\n// pseudo-element state layer. `:not(:active)` on the hover guard keeps the two off each\n// other's specificity: they are both arbitrary property setters, so whichever matched last\n// would otherwise decide the press.\nconst controlTintHover =\n  '[&:hover:not(:active):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]';\nconst controlTintActive = '[&:active:not(:disabled)]:[--surface-tint:var(--fill)]';\n\nexport const raisedControlSurfaceStyle =\n  'bg-card shadow-raised text-foreground ' + controlTintHover + ' ' + controlTintActive + ' ' + 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;AAQvC,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,aAAA,GAAgB,sDAAA;AACtB,MAAM,mBAAA,GAAsB,qDAAA;AACrB,MAAM,aAAA,GAAgB;AACtB,MAAM,mBAAA,GACX;AACK,MAAM,iBAAA,GACX,2BACA,aAAA,GACA;AAEK,MAAM,yBAAA,GACX,mEAAA,GACA,gBAAA,GACA,+CAAA,GACA;AAEK,MAAM,+BAAA,GACX,0EAAA,GACA,sBAAA,GACA,8CAAA,GACA;AAaF,MAAM,gBAAA,GACJ,kGAAA;AACF,MAAM,iBAAA,GAAoB,wDAAA;AAEnB,MAAM,yBAAA,GACX,wCAAA,GAA2C,gBAAA,GAAmB,GAAA,GAAM,oBAAoB,GAAA,GAAM;AAQzF,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,14 +1,17 @@
 const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
-const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
 const inputFocusBorderVisible = "focus-visible:border-border-focus";
 const inputFocusBorderWithin = "focus-within:border-border-focus";
 const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${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 fieldRimFocus = "focus-visible:[--surface-rim:var(--field-rim-focus)]";
+const fieldRimFocusWithin = "focus-within:[--surface-rim:var(--field-rim-focus)]";
+const fieldErrorRim = "[--field-rim:var(--destructive)] [--field-rim-focus:var(--destructive)]";
+const fieldErrorRimWithin = "has-[[aria-invalid=true]]:[--field-rim:var(--destructive)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive)]";
+const fieldTriggerStyle = "bg-field shadow-input " + fieldRimFocus + " disabled:bg-field-disabled aria-disabled:bg-field-disabled data-[disabled]:bg-field-disabled aria-invalid:[--field-rim:var(--destructive)] aria-invalid:[--field-rim-focus:var(--destructive)]";
+const inputSurfaceAndFocusStyle = "bg-field shadow-input text-foreground disabled:bg-field-disabled " + surfaceTintHover + " outline-hidden focus-visible:outline-hidden " + fieldRimFocus;
+const inputSurfaceAndFocusWithinStyle = "bg-field shadow-input text-foreground has-[:disabled]:bg-field-disabled " + surfaceTintHoverWithin + " outline-hidden focus-within:outline-hidden " + fieldRimFocusWithin;
 const controlTintHover = "[&:hover:not(:active):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]";
 const controlTintActive = "[&:active:not(:disabled)]:[--surface-tint:var(--fill)]";
 const raisedControlSurfaceStyle = "bg-card shadow-raised text-foreground " + controlTintHover + " " + controlTintActive + " " + surfaceRimFocus;
@@ -17,5 +20,5 @@ function resolveFieldVariant(variant) {
 }
 const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
-export { controlFocusBorderVisible, disabledOutlineSurfaceStyle, inputFocusBorderVisible, inputFocusBorderWithin, inputSurfaceAndFocusStyle, inputSurfaceAndFocusWithinStyle, raisedControlSurfaceStyle, resolveFieldVariant, sharedFormElementDisabledStyle, unstyledFormElementStyle };
+export { controlFocusBorderVisible, fieldErrorRim, fieldErrorRimWithin, fieldTriggerStyle, inputFocusBorderVisible, inputFocusBorderWithin, inputSurfaceAndFocusStyle, inputSurfaceAndFocusWithinStyle, raisedControlSurfaceStyle, 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// 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 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// The same material, for a neutral control that is a button rather than a field: `Button`'s\n// `default` variant, and with it every trigger built on it (Select, Combobox, DateTimePicker).\n// A filled neutral control is one material across the system — a `md` input beside a `md`\n// button had two resting fills, `--card` and the 6% `--fill` rung, and read as two systems.\n//\n// A button answers the pointer harder than a field does: a field washes on hover only\n// (its rim is reserved for focus), a button washes on hover and again on press. Both go\n// through `--surface-tint` for the reason above it — an element with a fill cannot carry a\n// pseudo-element state layer. `:not(:active)` on the hover guard keeps the two off each\n// other's specificity: they are both arbitrary property setters, so whichever matched last\n// would otherwise decide the press.\nconst controlTintHover =\n  '[&:hover:not(:active):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]';\nconst controlTintActive = '[&:active:not(:disabled)]:[--surface-tint:var(--fill)]';\n\nexport const raisedControlSurfaceStyle =\n  'bg-card shadow-raised text-foreground ' + controlTintHover + ' ' + controlTintActive + ' ' + 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,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;AAaF,MAAM,gBAAA,GACJ,kGAAA;AACF,MAAM,iBAAA,GAAoB,wDAAA;AAEnB,MAAM,yBAAA,GACX,wCAAA,GAA2C,gBAAA,GAAmB,GAAA,GAAM,oBAAoB,GAAA,GAAM;AAQzF,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// 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 fieldRimFocus = 'focus-visible:[--surface-rim:var(--field-rim-focus)]';\nconst fieldRimFocusWithin = 'focus-within:[--surface-rim:var(--field-rim-focus)]';\nexport const fieldErrorRim = '[--field-rim:var(--destructive)] [--field-rim-focus:var(--destructive)]';\nexport const fieldErrorRimWithin =\n  'has-[[aria-invalid=true]]:[--field-rim:var(--destructive)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive)]';\nexport const fieldTriggerStyle =\n  'bg-field shadow-input ' +\n  fieldRimFocus +\n  ' disabled:bg-field-disabled aria-disabled:bg-field-disabled data-[disabled]:bg-field-disabled aria-invalid:[--field-rim:var(--destructive)] aria-invalid:[--field-rim-focus:var(--destructive)]';\n\nexport const inputSurfaceAndFocusStyle =\n  'bg-field shadow-input text-foreground disabled:bg-field-disabled ' +\n  surfaceTintHover +\n  ' outline-hidden focus-visible:outline-hidden ' +\n  fieldRimFocus;\n\nexport const inputSurfaceAndFocusWithinStyle =\n  'bg-field shadow-input text-foreground has-[:disabled]:bg-field-disabled ' +\n  surfaceTintHoverWithin +\n  ' outline-hidden focus-within:outline-hidden ' +\n  fieldRimFocusWithin;\n\n// The same material, for a neutral control that is a button rather than a field: `Button`'s\n// `default` variant, and with it every trigger built on it (Select, Combobox, DateTimePicker).\n// A filled neutral control is one material across the system — a `md` input beside a `md`\n// button had two resting fills, `--card` and the 6% `--fill` rung, and read as two systems.\n//\n// A button answers the pointer harder than a field does: a field washes on hover only\n// (its rim is reserved for focus), a button washes on hover and again on press. Both go\n// through `--surface-tint` for the reason above it — an element with a fill cannot carry a\n// pseudo-element state layer. `:not(:active)` on the hover guard keeps the two off each\n// other's specificity: they are both arbitrary property setters, so whichever matched last\n// would otherwise decide the press.\nconst controlTintHover =\n  '[&:hover:not(:active):not(:disabled):not([data-popup-open])]:[--surface-tint:var(--fill-subtle)]';\nconst controlTintActive = '[&:active:not(:disabled)]:[--surface-tint:var(--fill)]';\n\nexport const raisedControlSurfaceStyle =\n  'bg-card shadow-raised text-foreground ' + controlTintHover + ' ' + controlTintActive + ' ' + 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;AAQvC,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,aAAA,GAAgB,sDAAA;AACtB,MAAM,mBAAA,GAAsB,qDAAA;AACrB,MAAM,aAAA,GAAgB;AACtB,MAAM,mBAAA,GACX;AACK,MAAM,iBAAA,GACX,2BACA,aAAA,GACA;AAEK,MAAM,yBAAA,GACX,mEAAA,GACA,gBAAA,GACA,+CAAA,GACA;AAEK,MAAM,+BAAA,GACX,0EAAA,GACA,sBAAA,GACA,8CAAA,GACA;AAaF,MAAM,gBAAA,GACJ,kGAAA;AACF,MAAM,iBAAA,GAAoB,wDAAA;AAEnB,MAAM,yBAAA,GACX,wCAAA,GAA2C,gBAAA,GAAmB,GAAA,GAAM,oBAAoB,GAAA,GAAM;AAQzF,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,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const Button = require('../Button-MMZPEb_q.cjs');
+const Button = require('../Button-BAMnPqos.cjs');
 const primitives_raisedSurface = require('./raised-surface.cjs.js');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 

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 { 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. Same modifiers as Button's ghost fills so\n  // tailwind-merge drops them; any other spelling leaves both surfaces painted.\n  'not-disabled:hover:bg-transparent not-disabled:active: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: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  // A destructive row tints the travelling highlight instead of painting its own.\n  '[&:has([data-variant=destructive][data-fluid-hover-active])_[data-slot=fluid-hover-highlight]]:bg-destructive/20',\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;AAAA,EAIA,uGAAA;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;AAAA,EAExE,kHAAA;AAAA,EACA,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;;;;;;;;;;;;;;;;"}
+{"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). 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. Same modifiers as Button's ghost fills so\n  // tailwind-merge drops them; any other spelling leaves both surfaces painted.\n  'not-disabled:hover:bg-transparent not-disabled:active: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: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  // A destructive row tints the travelling highlight instead of painting its own.\n  '[&:has([data-variant=destructive][data-fluid-hover-active])_[data-slot=fluid-hover-highlight]]:bg-destructive/20',\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;AAAA,EAIA,uGAAA;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;AAAA,EAExE,kHAAA;AAAA,EACA,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,4 +1,4 @@
-import { b as buttonVariants } from '../Button-KUj0U-5I.js';
+import { b as buttonVariants } from '../Button-B8nF87ai.js';
 import { overlaySurfaceStyle } from './raised-surface.es.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.es.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. Same modifiers as Button's ghost fills so\n  // tailwind-merge drops them; any other spelling leaves both surfaces painted.\n  'not-disabled:hover:bg-transparent not-disabled:active: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: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  // A destructive row tints the travelling highlight instead of painting its own.\n  '[&:has([data-variant=destructive][data-fluid-hover-active])_[data-slot=fluid-hover-highlight]]:bg-destructive/20',\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":[],"mappings":";;;;AAYA,MAAM,mBAAA,GAAsB,EAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA;AAAA;AAAA,EAIA,8BAAA;AAAA;AAAA,EAEA,kCAAA;AAAA;AAAA;AAAA;AAAA,EAIA,uGAAA;AAAA,EACA,+BAAA;AAAA,EACA,6FAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,aAAA,GAAgB,EAAA,CAAG,cAAA,CAAe,EAAE,OAAA,EAAS,SAAS,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,mBAAmB;AAE9F,MAAM,wBAAA,GAA2B,EAAA;AAAA,EACtC,eAAe,EAAE,OAAA,EAAS,mBAAA,EAAqB,IAAA,EAAM,MAAM,CAAA;AAAA,EAC3D,mBAAA;AAAA,EACA;AACF;AAIO,MAAM,yBAAA,GACX;AAEK,MAAM,kBAAA,GAAqB,EAAA,CAAG,yBAAA,EAA2B,iBAAiB;AAG1E,MAAM,kBAAA,GAAqB;AAE3B,MAAM,gBAAA,GAAmB;AAGzB,MAAM,mBAAA,GAAsB;AAI5B,MAAM,cAAA,GAAiB,EAAA;AAAA,EAC5B,mEAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACA,EAAA,CAAG,kDAAkD,mBAAmB,CAAA;AAAA;AAAA,EAExE,kHAAA;AAAA,EACA,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;;;;"}
+{"version":3,"file":"menu-item.es.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). 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. Same modifiers as Button's ghost fills so\n  // tailwind-merge drops them; any other spelling leaves both surfaces painted.\n  'not-disabled:hover:bg-transparent not-disabled:active: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: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  // A destructive row tints the travelling highlight instead of painting its own.\n  '[&:has([data-variant=destructive][data-fluid-hover-active])_[data-slot=fluid-hover-highlight]]:bg-destructive/20',\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":[],"mappings":";;;;AAYA,MAAM,mBAAA,GAAsB,EAAA;AAAA,EAC1B,4DAAA;AAAA;AAAA;AAAA;AAAA,EAIA,8BAAA;AAAA;AAAA,EAEA,kCAAA;AAAA;AAAA;AAAA;AAAA,EAIA,uGAAA;AAAA,EACA,+BAAA;AAAA,EACA,6FAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,aAAA,GAAgB,EAAA,CAAG,cAAA,CAAe,EAAE,OAAA,EAAS,SAAS,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,mBAAmB;AAE9F,MAAM,wBAAA,GAA2B,EAAA;AAAA,EACtC,eAAe,EAAE,OAAA,EAAS,mBAAA,EAAqB,IAAA,EAAM,MAAM,CAAA;AAAA,EAC3D,mBAAA;AAAA,EACA;AACF;AAIO,MAAM,yBAAA,GACX;AAEK,MAAM,kBAAA,GAAqB,EAAA,CAAG,yBAAA,EAA2B,iBAAiB;AAG1E,MAAM,kBAAA,GAAqB;AAE3B,MAAM,gBAAA,GAAmB;AAGzB,MAAM,mBAAA,GAAsB;AAI5B,MAAM,cAAA,GAAiB,EAAA;AAAA,EAC5B,mEAAA;AAAA,EACA,wEAAA;AAAA,EACA,oEAAA;AAAA,EACA,EAAA,CAAG,kDAAkD,mBAAmB,CAAA;AAAA;AAAA,EAExE,kHAAA;AAAA,EACA,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/raised-surface.cjs.js

@@ -2,12 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const raisedSurfaceStyle = "bg-card hover:bg-card active:bg-card shadow-raised";
-const overlaySurfaceStyle = "bg-card shadow-overlay";
-const frameSurfaceStyle = "bg-background shadow-raised";
+const fieldsOnSurface = "[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--field-rim-on-surface)] [--field-rim-focus:var(--field-rim-focus-on-surface)]";
+const fieldsOnDialog = "[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)] [--field-rim-focus:var(--surface-rim-focus)]";
+const fieldsOnPage = "[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)] [--field-rim-focus:var(--surface-rim-focus)]";
+const raisedSurfaceStyle = "bg-card hover:bg-card active:bg-card shadow-raised " + fieldsOnSurface;
+const overlaySurfaceStyle = "bg-card shadow-overlay " + fieldsOnSurface;
+const dialogSurfaceStyle = "bg-dialog shadow-overlay " + fieldsOnDialog;
+const frameSurfaceStyle = "bg-background shadow-raised " + fieldsOnPage;
 const surfaceStateLayerStyle = "state-layer";
 const surfaceGroupStateLayerStyle = "relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle";
 
+exports.dialogSurfaceStyle = dialogSurfaceStyle;
 exports.frameSurfaceStyle = frameSurfaceStyle;
 exports.overlaySurfaceStyle = overlaySurfaceStyle;
 exports.raisedSurfaceStyle = raisedSurfaceStyle;

package/dist/primitives/raised-surface.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"raised-surface.cjs.js","sources":["../../src/ds/primitives/raised-surface.ts"],"sourcesContent":["/**\n * Two recipes, because elevation encodes distance from the canvas and there are\n * only two distances in this product.\n *\n * A *raised* surface sits in the flow — card, list panel, settings container,\n * table head, app frame. It lifts a couple of pixels, which is also what keeps\n * it honest: a tile in a grid inside a scroller is clipped by that scroller, so\n * a shadow that bleeds further than the tile's own clearance gets sliced into a\n * hard line along the container edge.\n *\n * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is\n * never clipped, has to separate from arbitrary content beneath it, and so\n * carries the long falloff.\n *\n * Both tokens carry the rim as well as the elevation (the rim is `--border`\n * itself, plus a top inset highlight in dark), so neither draws a border of its\n * own: adding `border` on top doubles the edge.\n *\n * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a\n * popup, `rounded-studio-frame` for the app frame).\n *\n * A raised surface pins its own fill across states. Interaction is expressed by\n * the state layer below, never by swapping the background: `Button`'s variants\n * all drive `background-color` on hover, and a raised surface wearing one would\n * otherwise turn translucent mid-hover and composite over the canvas. A call\n * site that genuinely wants another fill still overrides it, since its own\n * classes come after these.\n */\nexport const raisedSurfaceStyle = 'bg-card hover:bg-card active:bg-card shadow-raised';\n\nexport const overlaySurfaceStyle = 'bg-card shadow-overlay';\n\n/**\n * The app frame and the panels docked beside it. Same elevation as a card, one\n * step lower fill: a frame is a hole cut in the rail, and what sits inside it —\n * cards, fields, tables — needs a step to rise above. `Card` is for that\n * content, never for the frame around it.\n */\nexport const frameSurfaceStyle = 'bg-background shadow-raised';\n\n/**\n * Interaction states for a surface that already carries an opaque fill. The\n * `state-layer` utility in `src/index.css` holds the reasoning and the measured\n * numbers: the rung has to be layered, never swapped into `background-color`.\n */\nexport const surfaceStateLayerStyle = 'state-layer';\n\n/**\n * Same layer, driven by an ancestor marked `group` rather than the surface\n * itself. A utility cannot read an ancestor's state, so this one stays composed\n * from variants — `isolate` and the negative z-index do the same job as the\n * utility's, and `inset-px` likewise keeps the inset rim visible.\n */\nexport const surfaceGroupStateLayerStyle =\n  'relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle';\n"],"names":[],"mappings":";;;;AA4BO,MAAM,kBAAA,GAAqB;AAE3B,MAAM,mBAAA,GAAsB;AAQ5B,MAAM,iBAAA,GAAoB;AAO1B,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,2BAAA,GACX;;;;;;;;"}
+{"version":3,"file":"raised-surface.cjs.js","sources":["../../src/ds/primitives/raised-surface.ts"],"sourcesContent":["/**\n * Two recipes, because elevation encodes distance from the canvas and there are\n * only two distances in this product.\n *\n * A *raised* surface sits in the flow — card, list panel, settings container,\n * table head, app frame. It lifts a couple of pixels, which is also what keeps\n * it honest: a tile in a grid inside a scroller is clipped by that scroller, so\n * a shadow that bleeds further than the tile's own clearance gets sliced into a\n * hard line along the container edge.\n *\n * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is\n * never clipped, has to separate from arbitrary content beneath it, and so\n * carries the long falloff.\n *\n * Both tokens carry the rim as well as the elevation (the rim is `--border`\n * itself, plus a top inset highlight in dark), so neither draws a border of its\n * own: adding `border` on top doubles the edge.\n *\n * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a\n * popup, `rounded-studio-frame` for the app frame).\n *\n * A raised surface pins its own fill across states. Interaction is expressed by\n * the state layer below, never by swapping the background: `Button`'s variants\n * all drive `background-color` on hover, and a raised surface wearing one would\n * otherwise turn translucent mid-hover and composite over the canvas. A call\n * site that genuinely wants another fill still overrides it, since its own\n * classes come after these.\n */\nconst fieldsOnSurface =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--field-rim-on-surface)] [--field-rim-focus:var(--field-rim-focus-on-surface)]';\nconst fieldsOnDialog =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)] [--field-rim-focus:var(--surface-rim-focus)]';\nconst fieldsOnPage =\n  '[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)] [--field-rim-focus:var(--surface-rim-focus)]';\n\nexport const raisedSurfaceStyle = 'bg-card hover:bg-card active:bg-card shadow-raised ' + fieldsOnSurface;\n\nexport const overlaySurfaceStyle = 'bg-card shadow-overlay ' + fieldsOnSurface;\n\nexport const dialogSurfaceStyle = 'bg-dialog shadow-overlay ' + fieldsOnDialog;\n\n/**\n * The app frame and the panels docked beside it. Same elevation as a card, one\n * step lower fill: a frame is a hole cut in the rail, and what sits inside it —\n * cards, fields, tables — needs a step to rise above. `Card` is for that\n * content, never for the frame around it.\n */\nexport const frameSurfaceStyle = 'bg-background shadow-raised ' + fieldsOnPage;\n\n/**\n * Interaction states for a surface that already carries an opaque fill. The\n * `state-layer` utility in `src/index.css` holds the reasoning and the measured\n * numbers: the rung has to be layered, never swapped into `background-color`.\n */\nexport const surfaceStateLayerStyle = 'state-layer';\n\n/**\n * Same layer, driven by an ancestor marked `group` rather than the surface\n * itself. A utility cannot read an ancestor's state, so this one stays composed\n * from variants — `isolate` and the negative z-index do the same job as the\n * utility's, and `inset-px` likewise keeps the inset rim visible.\n */\nexport const surfaceGroupStateLayerStyle =\n  'relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle';\n"],"names":[],"mappings":";;;;AA4BA,MAAM,eAAA,GACJ,8KAAA;AACF,MAAM,cAAA,GACJ,4JAAA;AACF,MAAM,YAAA,GACJ,2IAAA;AAEK,MAAM,qBAAqB,qDAAA,GAAwD;AAEnF,MAAM,sBAAsB,yBAAA,GAA4B;AAExD,MAAM,qBAAqB,2BAAA,GAA8B;AAQzD,MAAM,oBAAoB,8BAAA,GAAiC;AAO3D,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,2BAAA,GACX;;;;;;;;;"}