@mastra/playground-ui 60.0.0-alpha.9 → 60.0.0

package/dist/{plan-rKBR_aWJ.cjs.map → plan-ZKAT5frg.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"plan-rKBR_aWJ.cjs","sources":["../src/ds/components/ai/plan/plan.tsx"],"sourcesContent":["import { CheckIcon, ClipboardList, CopyIcon, Maximize2, Minimize2 } from 'lucide-react';\nimport { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { cn } from '@/lib/utils';\n\nconst DEFAULT_COLLAPSED_HEIGHT = 220;\n\ninterface PlanContextValue {\n  collapsedHeight: number;\n  isExpanded: boolean;\n  /** Whether the rendered content overflows the collapsed height (measured, not estimated). */\n  isClipped: boolean;\n  setClipped: (clipped: boolean) => void;\n  toggleExpanded: () => void;\n}\n\nconst PlanContext = createContext<PlanContextValue | null>(null);\n\nconst usePlanContext = () => {\n  const context = useContext(PlanContext);\n\n  if (!context) {\n    throw new Error('Plan compound components must be rendered inside <Plan>.');\n  }\n\n  return context;\n};\n\nexport interface PlanProps extends ComponentProps<'div'> {\n  collapsedHeight?: number;\n}\n\nexport function Plan({ children, collapsedHeight = DEFAULT_COLLAPSED_HEIGHT, className, ...props }: PlanProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isClipped, setClipped] = useState(false);\n\n  const toggleExpanded = () => {\n    setIsExpanded(current => !current);\n  };\n\n  const contextValue = {\n    collapsedHeight,\n    isExpanded,\n    isClipped,\n    setClipped,\n    toggleExpanded,\n  };\n\n  return (\n    <PlanContext.Provider value={contextValue}>\n      <div data-slot=\"plan\" className={cn('w-full overflow-hidden rounded-xl bg-card', className)} {...props}>\n        {children}\n      </div>\n    </PlanContext.Provider>\n  );\n}\n\nexport type PlanHeaderProps = ComponentProps<'div'>;\n\nexport function PlanHeader({ children, className, ...props }: PlanHeaderProps) {\n  return (\n    <div\n      data-slot=\"plan-header\"\n      className={cn('flex min-h-10 items-center justify-between gap-3 px-4 pt-3', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type PlanLabelProps = ComponentProps<'div'>;\n\nexport function PlanLabel({ children = 'Plan', className, ...props }: PlanLabelProps) {\n  return (\n    <div data-slot=\"plan-label\" className={cn('flex min-w-0 items-center gap-2', className)} {...props}>\n      <Icon size=\"xs\" className=\"text-muted-foreground\">\n        <ClipboardList />\n      </Icon>\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n        {children}\n      </Txt>\n    </div>\n  );\n}\n\nexport type PlanHeaderActionsProps = ComponentProps<'div'>;\n\nexport function PlanHeaderActions({ children, className, ...props }: PlanHeaderActionsProps) {\n  return (\n    <div data-slot=\"plan-header-actions\" className={cn('flex shrink-0 items-center gap-1', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type PlanStatusProps = Omit<ComponentProps<typeof Badge>, 'icon' | 'indicator' | 'size'>;\n\nexport function PlanStatus({ children, variant = 'neutral', ...props }: PlanStatusProps) {\n  return (\n    <Badge {...props} variant={variant} size=\"xs\" indicator=\"dot\">\n      {children}\n    </Badge>\n  );\n}\n\nexport interface PlanCopyButtonProps extends Omit<\n  ComponentProps<typeof Button>,\n  'aria-label' | 'children' | 'onClick' | 'size' | 'tooltip' | 'type' | 'variant'\n> {\n  content: string;\n}\n\nexport function PlanCopyButton({ content, ...props }: PlanCopyButtonProps) {\n  const { isCopied, handleCopy } = useCopyToClipboard({\n    text: content,\n    copiedDuration: 1500,\n    showToast: false,\n  });\n\n  return (\n    <Button\n      {...props}\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      tooltip=\"Copy plan\"\n      aria-label=\"Copy plan\"\n      onClick={handleCopy}\n    >\n      {isCopied ? <CheckIcon /> : <CopyIcon />}\n    </Button>\n  );\n}\n\nexport type PlanBodyProps = ComponentProps<'div'>;\n\nexport function PlanBody({ children, className, ...props }: PlanBodyProps) {\n  return (\n    <div data-slot=\"plan-body\" className={cn('px-5 pt-4 pb-5', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type PlanIntroProps = ComponentProps<'div'>;\n\nexport function PlanIntro({ children, className, ...props }: PlanIntroProps) {\n  return (\n    <div data-slot=\"plan-intro\" className={cn('mb-5 space-y-1', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PlanTitleProps extends Omit<ComponentProps<typeof Txt>, 'as' | 'children' | 'variant'> {\n  children: ReactNode;\n}\n\nexport function PlanTitle({ children, className, ...props }: PlanTitleProps) {\n  return (\n    <Txt {...props} as=\"h3\" variant=\"heading\" tone=\"ink\" className={className}>\n      {children}\n    </Txt>\n  );\n}\n\nexport interface PlanPathProps extends Omit<\n  ComponentProps<typeof Txt>,\n  'as' | 'children' | 'font' | 'title' | 'variant'\n> {\n  children: string;\n}\n\nconst getFileName = (path: string) => {\n  const segments = path.split(/[\\\\/]/).filter(Boolean);\n  return segments[segments.length - 1] ?? path;\n};\n\nexport function PlanPath({ children, className, ...props }: PlanPathProps) {\n  return (\n    <Txt\n      {...props}\n      as=\"p\"\n      variant=\"meta\"\n      tone=\"muted\"\n      font=\"mono\"\n      title={children}\n      className={cn('max-w-full truncate overflow-hidden', className)}\n    >\n      {getFileName(children)}\n    </Txt>\n  );\n}\n\nexport type PlanMainProps = ComponentProps<'div'>;\n\nexport function PlanMain({ children, className, ...props }: PlanMainProps) {\n  return (\n    <div data-slot=\"plan-main\" className={cn('relative', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PlanContentProps extends Omit<ComponentProps<'div'>, 'children'> {\n  children: string;\n}\n\nexport function PlanContent({ children, className, style, ...props }: PlanContentProps) {\n  const { collapsedHeight, isExpanded, isClipped, setClipped } = usePlanContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // Measure the rendered content against the collapsed height so the clip hint\n  // and expand control track actual overflow — not an estimate of it.\n  useLayoutEffect(() => {\n    const element = contentRef.current;\n    if (!element) return;\n\n    const measure = () => setClipped(element.scrollHeight > collapsedHeight);\n    measure();\n\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [children, collapsedHeight, setClipped]);\n\n  const showClipHint = !isExpanded && isClipped;\n\n  return (\n    <div\n      data-slot=\"plan-content\"\n      // The clip hint masks the content itself, so it reads correctly on any card background.\n      {...(showClipHint ? { 'data-clipped': '' } : {})}\n      className={cn(\n        'relative',\n        !isExpanded && 'overflow-hidden',\n        showClipHint && 'mask-b-from-60% mask-b-to-100%',\n        className,\n      )}\n      style={!isExpanded ? { ...style, maxHeight: collapsedHeight } : style}\n      {...props}\n    >\n      <div\n        ref={contentRef}\n        className=\"[&_code]:bg-muted [&_h1]:text-title [&_h2]:text-heading [&_h3]:text-subheading [&_p]:text-body\"\n      >\n        <MarkdownRenderer className=\"text-foreground\">{children}</MarkdownRenderer>\n      </div>\n    </div>\n  );\n}\n\nexport interface PlanFileProps extends Omit<ComponentProps<'div'>, 'children'> {\n  children: string;\n}\n\nexport function PlanFile({ children, className, ...props }: PlanFileProps) {\n  return (\n    <div data-slot=\"plan-file\" className={className} {...props}>\n      <Txt as=\"p\" variant=\"meta\" tone=\"muted\" className=\"mb-2\">\n        Plan file\n      </Txt>\n      <Txt as=\"p\" variant=\"caption\" tone=\"ink\" font=\"mono\" className=\"break-all\">\n        {children}\n      </Txt>\n    </div>\n  );\n}\n\nexport type PlanControlsProps = ComponentProps<'div'>;\n\nexport function PlanControls({ children, className, ...props }: PlanControlsProps) {\n  const hasActions = Boolean(children);\n\n  return (\n    <div\n      data-slot=\"plan-controls\"\n      className={cn('relative z-10 mt-4 flex justify-center empty:hidden', className)}\n      {...props}\n    >\n      {hasActions ? (\n        <div className=\"grid w-full max-w-sm grid-cols-[1fr_auto_1fr] items-center gap-2 px-10\">{children}</div>\n      ) : (\n        <PlanExpandButton />\n      )}\n    </div>\n  );\n}\n\nexport type PlanActionGroupProps = ComponentProps<'div'>;\n\nexport function PlanActionGroup({ children, className, ...props }: PlanActionGroupProps) {\n  return (\n    <div data-slot=\"plan-action-group\" className={cn('flex justify-start gap-2 empty:hidden', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type PlanExpandButtonProps = Omit<\n  ComponentProps<typeof Button>,\n  'aria-label' | 'children' | 'onClick' | 'size' | 'type'\n>;\n\nexport function PlanExpandButton({ className, variant = 'default', ...props }: PlanExpandButtonProps) {\n  const { isExpanded, isClipped, toggleExpanded } = usePlanContext();\n\n  // Nothing to expand: the collapsed card already shows the whole plan.\n  if (!isClipped && !isExpanded) return null;\n\n  return (\n    <Button\n      {...props}\n      className={cn('shrink-0 whitespace-nowrap', className)}\n      type=\"button\"\n      variant={variant}\n      size=\"sm\"\n      aria-label={isExpanded ? 'Collapse plan' : 'Expand plan'}\n      onClick={toggleExpanded}\n      icon={isExpanded ? <Minimize2 /> : <Maximize2 />}\n    >\n      {isExpanded ? 'Collapse plan' : 'Expand plan'}\n    </Button>\n  );\n}\n"],"names":["createContext","useContext","useState","cn","jsx","jsxs","Icon","ClipboardList","Txt","Badge","useCopyToClipboard","Button","CheckIcon","CopyIcon","useRef","useLayoutEffect","MarkdownRenderer","Minimize2","Maximize2"],"mappings":"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"}
+{"version":3,"file":"plan-ZKAT5frg.cjs","sources":["../src/ds/components/ai/plan/plan.tsx"],"sourcesContent":["import { CheckIcon, ClipboardList, CopyIcon, Maximize2, Minimize2 } from 'lucide-react';\nimport { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { cn } from '@/lib/utils';\n\nconst DEFAULT_COLLAPSED_HEIGHT = 220;\n\ninterface PlanContextValue {\n  collapsedHeight: number;\n  isExpanded: boolean;\n  /** Whether the rendered content overflows the collapsed height (measured, not estimated). */\n  isClipped: boolean;\n  setClipped: (clipped: boolean) => void;\n  toggleExpanded: () => void;\n}\n\nconst PlanContext = createContext<PlanContextValue | null>(null);\n\nconst usePlanContext = () => {\n  const context = useContext(PlanContext);\n\n  if (!context) {\n    throw new Error('Plan compound components must be rendered inside <Plan>.');\n  }\n\n  return context;\n};\n\nexport interface PlanProps extends ComponentProps<'div'> {\n  collapsedHeight?: number;\n}\n\nexport function Plan({ children, collapsedHeight = DEFAULT_COLLAPSED_HEIGHT, className, ...props }: PlanProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isClipped, setClipped] = useState(false);\n\n  const toggleExpanded = () => {\n    setIsExpanded(current => !current);\n  };\n\n  const contextValue = {\n    collapsedHeight,\n    isExpanded,\n    isClipped,\n    setClipped,\n    toggleExpanded,\n  };\n\n  return (\n    <PlanContext.Provider value={contextValue}>\n      <div data-slot=\"plan\" className={cn('w-full overflow-hidden rounded-xl bg-card', className)} {...props}>\n        {children}\n      </div>\n    </PlanContext.Provider>\n  );\n}\n\nexport type PlanHeaderProps = ComponentProps<'div'>;\n\nexport function PlanHeader({ children, className, ...props }: PlanHeaderProps) {\n  return (\n    <div\n      data-slot=\"plan-header\"\n      className={cn('flex min-h-10 items-center justify-between gap-3 px-4 pt-3', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type PlanLabelProps = ComponentProps<'div'>;\n\nexport function PlanLabel({ children = 'Plan', className, ...props }: PlanLabelProps) {\n  return (\n    <div data-slot=\"plan-label\" className={cn('flex min-w-0 items-center gap-2', className)} {...props}>\n      <Icon size=\"xs\" className=\"text-muted-foreground\">\n        <ClipboardList />\n      </Icon>\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n        {children}\n      </Txt>\n    </div>\n  );\n}\n\nexport type PlanHeaderActionsProps = ComponentProps<'div'>;\n\nexport function PlanHeaderActions({ children, className, ...props }: PlanHeaderActionsProps) {\n  return (\n    <div data-slot=\"plan-header-actions\" className={cn('flex shrink-0 items-center gap-1', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type PlanStatusProps = Omit<ComponentProps<typeof Badge>, 'icon' | 'indicator' | 'size'>;\n\nexport function PlanStatus({ children, variant = 'neutral', ...props }: PlanStatusProps) {\n  return (\n    <Badge {...props} variant={variant} size=\"xs\" indicator=\"dot\">\n      {children}\n    </Badge>\n  );\n}\n\nexport interface PlanCopyButtonProps extends Omit<\n  ComponentProps<typeof Button>,\n  'aria-label' | 'children' | 'onClick' | 'size' | 'tooltip' | 'type' | 'variant'\n> {\n  content: string;\n}\n\nexport function PlanCopyButton({ content, ...props }: PlanCopyButtonProps) {\n  const { isCopied, handleCopy } = useCopyToClipboard({\n    text: content,\n    copiedDuration: 1500,\n    showToast: false,\n  });\n\n  return (\n    <Button\n      {...props}\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      tooltip=\"Copy plan\"\n      aria-label=\"Copy plan\"\n      onClick={handleCopy}\n    >\n      {isCopied ? <CheckIcon /> : <CopyIcon />}\n    </Button>\n  );\n}\n\nexport type PlanBodyProps = ComponentProps<'div'>;\n\nexport function PlanBody({ children, className, ...props }: PlanBodyProps) {\n  return (\n    <div data-slot=\"plan-body\" className={cn('px-5 pt-4 pb-5', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type PlanIntroProps = ComponentProps<'div'>;\n\nexport function PlanIntro({ children, className, ...props }: PlanIntroProps) {\n  return (\n    <div data-slot=\"plan-intro\" className={cn('mb-5 space-y-1', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PlanTitleProps extends Omit<ComponentProps<typeof Txt>, 'as' | 'children' | 'variant'> {\n  children: ReactNode;\n}\n\nexport function PlanTitle({ children, className, ...props }: PlanTitleProps) {\n  return (\n    <Txt {...props} as=\"h3\" variant=\"heading\" tone=\"ink\" className={className}>\n      {children}\n    </Txt>\n  );\n}\n\nexport interface PlanPathProps extends Omit<\n  ComponentProps<typeof Txt>,\n  'as' | 'children' | 'font' | 'title' | 'variant'\n> {\n  children: string;\n}\n\nconst getFileName = (path: string) => {\n  const segments = path.split(/[\\\\/]/).filter(Boolean);\n  return segments[segments.length - 1] ?? path;\n};\n\nexport function PlanPath({ children, className, ...props }: PlanPathProps) {\n  return (\n    <Txt\n      {...props}\n      as=\"p\"\n      variant=\"meta\"\n      tone=\"muted\"\n      font=\"mono\"\n      title={children}\n      className={cn('max-w-full truncate overflow-hidden', className)}\n    >\n      {getFileName(children)}\n    </Txt>\n  );\n}\n\nexport type PlanMainProps = ComponentProps<'div'>;\n\nexport function PlanMain({ children, className, ...props }: PlanMainProps) {\n  return (\n    <div data-slot=\"plan-main\" className={cn('relative', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PlanContentProps extends Omit<ComponentProps<'div'>, 'children'> {\n  children: string;\n}\n\nexport function PlanContent({ children, className, style, ...props }: PlanContentProps) {\n  const { collapsedHeight, isExpanded, isClipped, setClipped } = usePlanContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // Measure the rendered content against the collapsed height so the clip hint\n  // and expand control track actual overflow — not an estimate of it.\n  useLayoutEffect(() => {\n    const element = contentRef.current;\n    if (!element) return;\n\n    const measure = () => setClipped(element.scrollHeight > collapsedHeight);\n    measure();\n\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [children, collapsedHeight, setClipped]);\n\n  const showClipHint = !isExpanded && isClipped;\n\n  return (\n    <div\n      data-slot=\"plan-content\"\n      // The clip hint masks the content itself, so it reads correctly on any card background.\n      {...(showClipHint ? { 'data-clipped': '' } : {})}\n      className={cn(\n        'relative',\n        !isExpanded && 'overflow-hidden',\n        showClipHint && 'mask-b-from-60% mask-b-to-100%',\n        className,\n      )}\n      style={!isExpanded ? { ...style, maxHeight: collapsedHeight } : style}\n      {...props}\n    >\n      <div\n        ref={contentRef}\n        className=\"[&_code]:bg-muted [&_h1]:text-title [&_h2]:text-heading [&_h3]:text-subheading [&_p]:text-body\"\n      >\n        <MarkdownRenderer className=\"text-foreground\">{children}</MarkdownRenderer>\n      </div>\n    </div>\n  );\n}\n\nexport interface PlanFileProps extends Omit<ComponentProps<'div'>, 'children'> {\n  children: string;\n}\n\nexport function PlanFile({ children, className, ...props }: PlanFileProps) {\n  return (\n    <div data-slot=\"plan-file\" className={className} {...props}>\n      <Txt as=\"p\" variant=\"meta\" tone=\"muted\" className=\"mb-2\">\n        Plan file\n      </Txt>\n      <Txt as=\"p\" variant=\"caption\" tone=\"ink\" font=\"mono\" className=\"break-all\">\n        {children}\n      </Txt>\n    </div>\n  );\n}\n\nexport type PlanControlsProps = ComponentProps<'div'>;\n\nexport function PlanControls({ children, className, ...props }: PlanControlsProps) {\n  const hasActions = Boolean(children);\n\n  return (\n    <div\n      data-slot=\"plan-controls\"\n      className={cn('relative z-10 mt-4 flex justify-center empty:hidden', className)}\n      {...props}\n    >\n      {hasActions ? (\n        <div className=\"grid w-full max-w-sm grid-cols-[1fr_auto_1fr] items-center gap-2 px-10\">{children}</div>\n      ) : (\n        <PlanExpandButton />\n      )}\n    </div>\n  );\n}\n\nexport type PlanActionGroupProps = ComponentProps<'div'>;\n\nexport function PlanActionGroup({ children, className, ...props }: PlanActionGroupProps) {\n  return (\n    <div data-slot=\"plan-action-group\" className={cn('flex justify-start gap-2 empty:hidden', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type PlanExpandButtonProps = Omit<\n  ComponentProps<typeof Button>,\n  'aria-label' | 'children' | 'onClick' | 'size' | 'type'\n>;\n\nexport function PlanExpandButton({ className, variant = 'default', ...props }: PlanExpandButtonProps) {\n  const { isExpanded, isClipped, toggleExpanded } = usePlanContext();\n\n  // Nothing to expand: the collapsed card already shows the whole plan.\n  if (!isClipped && !isExpanded) return null;\n\n  return (\n    <Button\n      {...props}\n      className={cn('shrink-0 whitespace-nowrap', className)}\n      type=\"button\"\n      variant={variant}\n      size=\"sm\"\n      aria-label={isExpanded ? 'Collapse plan' : 'Expand plan'}\n      onClick={toggleExpanded}\n      icon={isExpanded ? <Minimize2 /> : <Maximize2 />}\n    >\n      {isExpanded ? 'Collapse plan' : 'Expand plan'}\n    </Button>\n  );\n}\n"],"names":["createContext","useContext","useState","cn","jsx","jsxs","Icon","ClipboardList","Txt","Badge","useCopyToClipboard","Button","CheckIcon","CopyIcon","useRef","useLayoutEffect","MarkdownRenderer","Minimize2","Maximize2"],"mappings":"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"}

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

@@ -7,9 +7,9 @@ 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 surfaceRimFocus = "focus-visible:outline-hidden focus-visible:[--surface-rim:var(--border-focus)]";
 const surfaceTintHoverWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:[--surface-tint:var(--fill-subtle)]";
-const fieldRimFocus = "focus-visible:[--surface-rim:var(--field-rim-focus)]";
+const fieldRimFocus = "focus-visible:outline-hidden focus-visible:[--surface-rim:var(--field-rim-focus)]";
 const fieldRimFocusWithin = "focus-within:[--surface-rim:var(--field-rim-focus)]";
 const fieldErrorRim = "[--field-rim:var(--destructive-indicator)] [--field-rim-focus:var(--destructive-indicator)]";
 const fieldErrorRimWithin = "has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)]";
@@ -35,5 +35,6 @@ exports.inputSurfaceAndFocusWithinStyle = inputSurfaceAndFocusWithinStyle;
 exports.raisedControlSurfaceStyle = raisedControlSurfaceStyle;
 exports.resolveFieldVariant = resolveFieldVariant;
 exports.sharedFormElementDisabledStyle = sharedFormElementDisabledStyle;
+exports.surfaceRimFocus = surfaceRimFocus;
 exports.unstyledFormElementStyle = unstyledFormElementStyle;
 //# sourceMappingURL=form-element.cjs.js.map

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// 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 =\n  '[--field-rim:var(--destructive-indicator)] [--field-rim-focus:var(--destructive-indicator)]';\nexport const fieldErrorRimWithin =\n  'has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)]';\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-indicator)] aria-invalid:[--field-rim-focus:var(--destructive-indicator)]';\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,GACX;AACK,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;;;;;;;;;;;;;;;"}
+{"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 repaints that rim to `--border-focus`, the one focus colour, rather than\n// drawing an outline beside it. Wrappers whose focus lives on a nested control\n// (InputGroup, a chip) take the `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)]';\nexport const surfaceRimFocus = 'focus-visible:outline-hidden focus-visible:[--surface-rim:var(--border-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:outline-hidden focus-visible:[--surface-rim:var(--field-rim-focus)]';\nconst fieldRimFocusWithin = 'focus-within:[--surface-rim:var(--field-rim-focus)]';\nexport const fieldErrorRim =\n  '[--field-rim:var(--destructive-indicator)] [--field-rim-focus:var(--destructive-indicator)]';\nexport const fieldErrorRimWithin =\n  'has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)]';\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-indicator)] aria-invalid:[--field-rim-focus:var(--destructive-indicator)]';\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;AA0B/G,MAAM,gBAAA,GACJ,yGAAA;AACK,MAAM,eAAA,GAAkB;AAI/B,MAAM,sBAAA,GAAyB,uFAAA;AAC/B,MAAM,aAAA,GAAgB,mFAAA;AACtB,MAAM,mBAAA,GAAsB,qDAAA;AACrB,MAAM,aAAA,GACX;AACK,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

@@ -3,9 +3,9 @@ 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 surfaceRimFocus = "focus-visible:outline-hidden focus-visible:[--surface-rim:var(--border-focus)]";
 const surfaceTintHoverWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:[--surface-tint:var(--fill-subtle)]";
-const fieldRimFocus = "focus-visible:[--surface-rim:var(--field-rim-focus)]";
+const fieldRimFocus = "focus-visible:outline-hidden focus-visible:[--surface-rim:var(--field-rim-focus)]";
 const fieldRimFocusWithin = "focus-within:[--surface-rim:var(--field-rim-focus)]";
 const fieldErrorRim = "[--field-rim:var(--destructive-indicator)] [--field-rim-focus:var(--destructive-indicator)]";
 const fieldErrorRimWithin = "has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)]";
@@ -20,5 +20,5 @@ function resolveFieldVariant(variant) {
 }
 const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
-export { controlFocusBorderVisible, fieldErrorRim, fieldErrorRimWithin, fieldTriggerStyle, inputFocusBorderVisible, inputFocusBorderWithin, inputSurfaceAndFocusStyle, inputSurfaceAndFocusWithinStyle, raisedControlSurfaceStyle, resolveFieldVariant, sharedFormElementDisabledStyle, unstyledFormElementStyle };
+export { controlFocusBorderVisible, fieldErrorRim, fieldErrorRimWithin, fieldTriggerStyle, inputFocusBorderVisible, inputFocusBorderWithin, inputSurfaceAndFocusStyle, inputSurfaceAndFocusWithinStyle, raisedControlSurfaceStyle, resolveFieldVariant, sharedFormElementDisabledStyle, surfaceRimFocus, 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// 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 =\n  '[--field-rim:var(--destructive-indicator)] [--field-rim-focus:var(--destructive-indicator)]';\nexport const fieldErrorRimWithin =\n  'has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)]';\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-indicator)] aria-invalid:[--field-rim-focus:var(--destructive-indicator)]';\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,GACX;AACK,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;;;;"}
+{"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 repaints that rim to `--border-focus`, the one focus colour, rather than\n// drawing an outline beside it. Wrappers whose focus lives on a nested control\n// (InputGroup, a chip) take the `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)]';\nexport const surfaceRimFocus = 'focus-visible:outline-hidden focus-visible:[--surface-rim:var(--border-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:outline-hidden focus-visible:[--surface-rim:var(--field-rim-focus)]';\nconst fieldRimFocusWithin = 'focus-within:[--surface-rim:var(--field-rim-focus)]';\nexport const fieldErrorRim =\n  '[--field-rim:var(--destructive-indicator)] [--field-rim-focus:var(--destructive-indicator)]';\nexport const fieldErrorRimWithin =\n  'has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)]';\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-indicator)] aria-invalid:[--field-rim-focus:var(--destructive-indicator)]';\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;AA0B/G,MAAM,gBAAA,GACJ,yGAAA;AACK,MAAM,eAAA,GAAkB;AAI/B,MAAM,sBAAA,GAAyB,uFAAA;AAC/B,MAAM,aAAA,GAAgB,mFAAA;AACtB,MAAM,mBAAA,GAAsB,qDAAA;AACrB,MAAM,aAAA,GACX;AACK,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-DbJn0bJX.cjs');
+const Button = require('../Button-BnmR2HRc.cjs');
 const primitives_raisedSurface = require('./raised-surface.cjs.js');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 

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

@@ -1,4 +1,4 @@
-import { b as buttonVariants } from '../Button-CHTvSq4d.js';
+import { b as buttonVariants } from '../Button-C6eUqcPI.js';
 import { overlaySurfaceStyle } from './raised-surface.es.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-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 fieldsOnSurface = "[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--field-rim-on-surface)]";
+const fieldsOnDialog = "[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)]";
+const fieldsOnPage = "[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)]";
 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;

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 */\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;;;;;;;;;"}
+{"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)]';\nconst fieldsOnDialog =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)]';\nconst fieldsOnPage = '[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)]';\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,wHAAA;AACF,MAAM,cAAA,GACJ,+GAAA;AACF,MAAM,YAAA,GAAe,8FAAA;AAEd,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;;;;;;;;;"}

package/dist/primitives/raised-surface.es.js

@@ -1,6 +1,6 @@
-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 fieldsOnSurface = "[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--field-rim-on-surface)]";
+const fieldsOnDialog = "[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)]";
+const fieldsOnPage = "[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)]";
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"raised-surface.es.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;;;;"}
+{"version":3,"file":"raised-surface.es.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)]';\nconst fieldsOnDialog =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)]';\nconst fieldsOnPage = '[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)]';\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,wHAAA;AACF,MAAM,cAAA,GACJ,+GAAA;AACF,MAAM,YAAA,GAAe,8FAAA;AAEd,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;;;;"}

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

@@ -6,11 +6,11 @@ const primitives_transitions = require('./transitions.cjs.js');
 
 const selectionControlStyle = [
   "flex size-4 shrink-0 cursor-pointer items-center justify-center",
-  "border border-border bg-fill-hover text-background outline-hidden",
+  "border border-border bg-fill-hover text-background",
   primitives_transitions.transitions.all,
   "hover:border-border-strong hover:bg-fill-active",
   "active:scale-95 active:border-border-hover active:bg-fill-strong",
-  "focus-visible:border-border-focus focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid",
+  primitives_transitions.focusRingOffset,
   "data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background",
   "data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90",
   "data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75",

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

@@ -1 +1 @@
-{"version":3,"file":"selection-control.cjs.js","sources":["../../src/ds/primitives/selection-control.ts"],"sourcesContent":["import { transitions } from './transitions';\n\n// Surface language shared by Checkbox and Radio. The two differ only in radius\n// and indicator glyph, so the surface lives here rather than in both files.\n//\n// Selection controls sit one rung brighter than field-sized surfaces: 16px of\n// fill needs more weight than a full-width input to read. Checked flips to the\n// solid `--foreground` chip; disabled resolves to muted roles (never opacity)\n// so an off and an on control stay distinguishable while both read inert.\n//\n// Base UI renders both roots as `<span>`, so `:disabled` never matches and the\n// disabled states hang off `data-disabled`.\nexport const selectionControlStyle = [\n  'flex size-4 shrink-0 cursor-pointer items-center justify-center',\n  'border border-border bg-fill-hover text-background outline-hidden',\n  transitions.all,\n  'hover:border-border-strong hover:bg-fill-active',\n  'active:scale-95 active:border-border-hover active:bg-fill-strong',\n  'focus-visible:border-border-focus focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid',\n  'data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background',\n  'data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90',\n  'data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-fill-subtle data-[disabled]:active:scale-100',\n  'data-[disabled]:data-[checked]:border-muted-foreground data-[disabled]:data-[checked]:bg-muted-foreground data-[disabled]:data-[checked]:text-background',\n].join(' ');\n"],"names":["transitions"],"mappings":";;;;;;AAYO,MAAM,qBAAA,GAAwB;AAAA,EACnC,iEAAA;AAAA,EACA,mEAAA;AAAA,EACAA,kCAAA,CAAY,GAAA;AAAA,EACZ,iDAAA;AAAA,EACA,kEAAA;AAAA,EACA,yJAAA;AAAA,EACA,8FAAA;AAAA,EACA,iFAAA;AAAA,EACA,mFAAA;AAAA,EACA,kIAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG;;;;"}
+{"version":3,"file":"selection-control.cjs.js","sources":["../../src/ds/primitives/selection-control.ts"],"sourcesContent":["import { focusRingOffset, transitions } from './transitions';\n\n// Surface language shared by Checkbox and Radio. The two differ only in radius\n// and indicator glyph, so the surface lives here rather than in both files.\n//\n// Selection controls sit one rung brighter than field-sized surfaces: 16px of\n// fill needs more weight than a full-width input to read. Checked flips to the\n// solid `--foreground` chip; disabled resolves to muted roles (never opacity)\n// so an off and an on control stay distinguishable while both read inert.\n//\n// Base UI renders both roots as `<span>`, so `:disabled` never matches and the\n// disabled states hang off `data-disabled`.\nexport const selectionControlStyle = [\n  'flex size-4 shrink-0 cursor-pointer items-center justify-center',\n  'border border-border bg-fill-hover text-background',\n  transitions.all,\n  'hover:border-border-strong hover:bg-fill-active',\n  'active:scale-95 active:border-border-hover active:bg-fill-strong',\n  focusRingOffset,\n  'data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background',\n  'data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90',\n  'data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-fill-subtle data-[disabled]:active:scale-100',\n  'data-[disabled]:data-[checked]:border-muted-foreground data-[disabled]:data-[checked]:bg-muted-foreground data-[disabled]:data-[checked]:text-background',\n].join(' ');\n"],"names":["transitions","focusRingOffset"],"mappings":";;;;;;AAYO,MAAM,qBAAA,GAAwB;AAAA,EACnC,iEAAA;AAAA,EACA,oDAAA;AAAA,EACAA,kCAAA,CAAY,GAAA;AAAA,EACZ,iDAAA;AAAA,EACA,kEAAA;AAAA,EACAC,sCAAA;AAAA,EACA,8FAAA;AAAA,EACA,iFAAA;AAAA,EACA,mFAAA;AAAA,EACA,kIAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG;;;;"}

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

@@ -1,12 +1,12 @@
-import { transitions } from './transitions.es.js';
+import { transitions, focusRingOffset } from './transitions.es.js';
 
 const selectionControlStyle = [
   "flex size-4 shrink-0 cursor-pointer items-center justify-center",
-  "border border-border bg-fill-hover text-background outline-hidden",
+  "border border-border bg-fill-hover text-background",
   transitions.all,
   "hover:border-border-strong hover:bg-fill-active",
   "active:scale-95 active:border-border-hover active:bg-fill-strong",
-  "focus-visible:border-border-focus focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid",
+  focusRingOffset,
   "data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background",
   "data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90",
   "data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75",

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

@@ -1 +1 @@
-{"version":3,"file":"selection-control.es.js","sources":["../../src/ds/primitives/selection-control.ts"],"sourcesContent":["import { transitions } from './transitions';\n\n// Surface language shared by Checkbox and Radio. The two differ only in radius\n// and indicator glyph, so the surface lives here rather than in both files.\n//\n// Selection controls sit one rung brighter than field-sized surfaces: 16px of\n// fill needs more weight than a full-width input to read. Checked flips to the\n// solid `--foreground` chip; disabled resolves to muted roles (never opacity)\n// so an off and an on control stay distinguishable while both read inert.\n//\n// Base UI renders both roots as `<span>`, so `:disabled` never matches and the\n// disabled states hang off `data-disabled`.\nexport const selectionControlStyle = [\n  'flex size-4 shrink-0 cursor-pointer items-center justify-center',\n  'border border-border bg-fill-hover text-background outline-hidden',\n  transitions.all,\n  'hover:border-border-strong hover:bg-fill-active',\n  'active:scale-95 active:border-border-hover active:bg-fill-strong',\n  'focus-visible:border-border-focus focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-border-focus focus-visible:outline-solid',\n  'data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background',\n  'data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90',\n  'data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-fill-subtle data-[disabled]:active:scale-100',\n  'data-[disabled]:data-[checked]:border-muted-foreground data-[disabled]:data-[checked]:bg-muted-foreground data-[disabled]:data-[checked]:text-background',\n].join(' ');\n"],"names":[],"mappings":";;AAYO,MAAM,qBAAA,GAAwB;AAAA,EACnC,iEAAA;AAAA,EACA,mEAAA;AAAA,EACA,WAAA,CAAY,GAAA;AAAA,EACZ,iDAAA;AAAA,EACA,kEAAA;AAAA,EACA,yJAAA;AAAA,EACA,8FAAA;AAAA,EACA,iFAAA;AAAA,EACA,mFAAA;AAAA,EACA,kIAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG;;;;"}
+{"version":3,"file":"selection-control.es.js","sources":["../../src/ds/primitives/selection-control.ts"],"sourcesContent":["import { focusRingOffset, transitions } from './transitions';\n\n// Surface language shared by Checkbox and Radio. The two differ only in radius\n// and indicator glyph, so the surface lives here rather than in both files.\n//\n// Selection controls sit one rung brighter than field-sized surfaces: 16px of\n// fill needs more weight than a full-width input to read. Checked flips to the\n// solid `--foreground` chip; disabled resolves to muted roles (never opacity)\n// so an off and an on control stay distinguishable while both read inert.\n//\n// Base UI renders both roots as `<span>`, so `:disabled` never matches and the\n// disabled states hang off `data-disabled`.\nexport const selectionControlStyle = [\n  'flex size-4 shrink-0 cursor-pointer items-center justify-center',\n  'border border-border bg-fill-hover text-background',\n  transitions.all,\n  'hover:border-border-strong hover:bg-fill-active',\n  'active:scale-95 active:border-border-hover active:bg-fill-strong',\n  focusRingOffset,\n  'data-[checked]:border-foreground data-[checked]:bg-foreground data-[checked]:text-background',\n  'data-[checked]:hover:border-foreground/90 data-[checked]:hover:bg-foreground/90',\n  'data-[checked]:active:border-foreground/75 data-[checked]:active:bg-foreground/75',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-fill-subtle data-[disabled]:active:scale-100',\n  'data-[disabled]:data-[checked]:border-muted-foreground data-[disabled]:data-[checked]:bg-muted-foreground data-[disabled]:data-[checked]:text-background',\n].join(' ');\n"],"names":[],"mappings":";;AAYO,MAAM,qBAAA,GAAwB;AAAA,EACnC,iEAAA;AAAA,EACA,oDAAA;AAAA,EACA,WAAA,CAAY,GAAA;AAAA,EACZ,iDAAA;AAAA,EACA,kEAAA;AAAA,EACA,eAAA;AAAA,EACA,8FAAA;AAAA,EACA,iFAAA;AAAA,EACA,mFAAA;AAAA,EACA,kIAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG;;;;"}

package/dist/primitives/transitions.cjs.js

@@ -27,17 +27,15 @@ const hoverEffects = {
   // Background lift
   lift: "hover:bg-foreground/10"
 };
-const focusRing = {
-  // Standard focus ring with glow
-  default: "focus:outline-hidden focus:ring-1 focus:ring-border-focus focus:shadow-focus-ring",
-  // Focus ring without glow
-  simple: "focus:outline-hidden focus:ring-1 focus:ring-border-focus",
-  // Focus visible only (keyboard navigation)
-  visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-border-focus focus-visible:shadow-focus-ring"
-};
+const focusLine = "focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus";
+const focusRing = `${focusLine} focus-visible:outline-offset-0`;
+const focusRingInset = `${focusLine} focus-visible:-outline-offset-1`;
+const focusRingOffset = `${focusLine} focus-visible:outline-offset-2`;
 
 exports.controlStateColorTransition = controlStateColorTransition;
 exports.focusRing = focusRing;
+exports.focusRingInset = focusRingInset;
+exports.focusRingOffset = focusRingOffset;
 exports.hoverEffects = hoverEffects;
 exports.transitions = transitions;
 //# sourceMappingURL=transitions.cjs.js.map

package/dist/primitives/transitions.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"transitions.cjs.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Motion policy for interactive state (hover / press / open / focus)\n//\n// A control's BACKGROUND switches instantly; only its COLOUR fades, over\n// 150ms. Hover fires more than any other interaction — sweeping a cursor\n// across a nav crosses ten rows a second — and fading the fill leaves the\n// surface trailing the pointer, while the colour crossfade is what stops the\n// label from snapping. This is measured from Linear, whose rows carry exactly\n// `transition: color 0.15s` and no background transition.\n//\n// Animate what moves or arrives instead: overlays entering, panels collapsing,\n// a switch thumb travelling. Those happen once per intent, not ten times a\n// second. https://craft.gustavofior.com/hover-restraint\nexport const controlStateColorTransition =\n  'transition-[color] duration-fast ease-out-custom motion-reduce:transition-none';\n\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-foreground/10',\n} as const;\n\n// Focus ring styles\nexport const focusRing = {\n  // Standard focus ring with glow\n  default: 'focus:outline-hidden focus:ring-1 focus:ring-border-focus focus:shadow-focus-ring',\n  // Focus ring without glow\n  simple: 'focus:outline-hidden focus:ring-1 focus:ring-border-focus',\n  // Focus visible only (keyboard navigation)\n  visible:\n    'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-border-focus focus-visible:shadow-focus-ring',\n} as const;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\nexport type FocusRingStyle = keyof typeof focusRing;\n"],"names":[],"mappings":";;;;AAYO,MAAM,2BAAA,GACX;AAEK,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGO,MAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,OAAA,EAAS,mFAAA;AAAA;AAAA,EAET,MAAA,EAAQ,2DAAA;AAAA;AAAA,EAER,OAAA,EACE;AACJ;;;;;;;"}
+{"version":3,"file":"transitions.cjs.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Motion policy for interactive state (hover / press / open / focus)\n//\n// A control's BACKGROUND switches instantly; only its COLOUR fades, over\n// 150ms. Hover fires more than any other interaction — sweeping a cursor\n// across a nav crosses ten rows a second — and fading the fill leaves the\n// surface trailing the pointer, while the colour crossfade is what stops the\n// label from snapping. This is measured from Linear, whose rows carry exactly\n// `transition: color 0.15s` and no background transition.\n//\n// Animate what moves or arrives instead: overlays entering, panels collapsing,\n// a switch thumb travelling. Those happen once per intent, not ten times a\n// second. https://craft.gustavofior.com/hover-restraint\nexport const controlStateColorTransition =\n  'transition-[color] duration-fast ease-out-custom motion-reduce:transition-none';\n\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-foreground/10',\n} as const;\n\n// An outline, not a ring: `ring-*` rewrites box-shadow and would erase a raised surface's rim and elevation.\nconst focusLine = 'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus';\n\nexport const focusRing = `${focusLine} focus-visible:outline-offset-0`;\n\nexport const focusRingInset = `${focusLine} focus-visible:-outline-offset-1`;\n\nexport const focusRingOffset = `${focusLine} focus-visible:outline-offset-2`;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\n"],"names":[],"mappings":";;;;AAYO,MAAM,2BAAA,GACX;AAEK,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGA,MAAM,SAAA,GAAY,wFAAA;AAEX,MAAM,SAAA,GAAY,GAAG,SAAS,CAAA,+BAAA;AAE9B,MAAM,cAAA,GAAiB,GAAG,SAAS,CAAA,gCAAA;AAEnC,MAAM,eAAA,GAAkB,GAAG,SAAS,CAAA,+BAAA;;;;;;;;;"}

package/dist/primitives/transitions.es.js

@@ -23,14 +23,10 @@ const hoverEffects = {
   // Background lift
   lift: "hover:bg-foreground/10"
 };
-const focusRing = {
-  // Standard focus ring with glow
-  default: "focus:outline-hidden focus:ring-1 focus:ring-border-focus focus:shadow-focus-ring",
-  // Focus ring without glow
-  simple: "focus:outline-hidden focus:ring-1 focus:ring-border-focus",
-  // Focus visible only (keyboard navigation)
-  visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-border-focus focus-visible:shadow-focus-ring"
-};
+const focusLine = "focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus";
+const focusRing = `${focusLine} focus-visible:outline-offset-0`;
+const focusRingInset = `${focusLine} focus-visible:-outline-offset-1`;
+const focusRingOffset = `${focusLine} focus-visible:outline-offset-2`;
 
-export { controlStateColorTransition, focusRing, hoverEffects, transitions };
+export { controlStateColorTransition, focusRing, focusRingInset, focusRingOffset, hoverEffects, transitions };
 //# sourceMappingURL=transitions.es.js.map

package/dist/primitives/transitions.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"transitions.es.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Motion policy for interactive state (hover / press / open / focus)\n//\n// A control's BACKGROUND switches instantly; only its COLOUR fades, over\n// 150ms. Hover fires more than any other interaction — sweeping a cursor\n// across a nav crosses ten rows a second — and fading the fill leaves the\n// surface trailing the pointer, while the colour crossfade is what stops the\n// label from snapping. This is measured from Linear, whose rows carry exactly\n// `transition: color 0.15s` and no background transition.\n//\n// Animate what moves or arrives instead: overlays entering, panels collapsing,\n// a switch thumb travelling. Those happen once per intent, not ten times a\n// second. https://craft.gustavofior.com/hover-restraint\nexport const controlStateColorTransition =\n  'transition-[color] duration-fast ease-out-custom motion-reduce:transition-none';\n\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-foreground/10',\n} as const;\n\n// Focus ring styles\nexport const focusRing = {\n  // Standard focus ring with glow\n  default: 'focus:outline-hidden focus:ring-1 focus:ring-border-focus focus:shadow-focus-ring',\n  // Focus ring without glow\n  simple: 'focus:outline-hidden focus:ring-1 focus:ring-border-focus',\n  // Focus visible only (keyboard navigation)\n  visible:\n    'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-border-focus focus-visible:shadow-focus-ring',\n} as const;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\nexport type FocusRingStyle = keyof typeof focusRing;\n"],"names":[],"mappings":"AAYO,MAAM,2BAAA,GACX;AAEK,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGO,MAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,OAAA,EAAS,mFAAA;AAAA;AAAA,EAET,MAAA,EAAQ,2DAAA;AAAA;AAAA,EAER,OAAA,EACE;AACJ;;;;"}
+{"version":3,"file":"transitions.es.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Motion policy for interactive state (hover / press / open / focus)\n//\n// A control's BACKGROUND switches instantly; only its COLOUR fades, over\n// 150ms. Hover fires more than any other interaction — sweeping a cursor\n// across a nav crosses ten rows a second — and fading the fill leaves the\n// surface trailing the pointer, while the colour crossfade is what stops the\n// label from snapping. This is measured from Linear, whose rows carry exactly\n// `transition: color 0.15s` and no background transition.\n//\n// Animate what moves or arrives instead: overlays entering, panels collapsing,\n// a switch thumb travelling. Those happen once per intent, not ten times a\n// second. https://craft.gustavofior.com/hover-restraint\nexport const controlStateColorTransition =\n  'transition-[color] duration-fast ease-out-custom motion-reduce:transition-none';\n\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-foreground/10',\n} as const;\n\n// An outline, not a ring: `ring-*` rewrites box-shadow and would erase a raised surface's rim and elevation.\nconst focusLine = 'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus';\n\nexport const focusRing = `${focusLine} focus-visible:outline-offset-0`;\n\nexport const focusRingInset = `${focusLine} focus-visible:-outline-offset-1`;\n\nexport const focusRingOffset = `${focusLine} focus-visible:outline-offset-2`;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\n"],"names":[],"mappings":"AAYO,MAAM,2BAAA,GACX;AAEK,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGA,MAAM,SAAA,GAAY,wFAAA;AAEX,MAAM,SAAA,GAAY,GAAG,SAAS,CAAA,+BAAA;AAE9B,MAAM,cAAA,GAAiB,GAAG,SAAS,CAAA,gCAAA;AAEnC,MAAM,eAAA,GAAkB,GAAG,SAAS,CAAA,+BAAA;;;;"}

package/dist/primitives/trigger-button.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const primitives_controlSize = require('./control-size.cjs.js');
-const Button = require('../Button-DbJn0bJX.cjs');
+const Button = require('../Button-BnmR2HRc.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function _interopNamespaceDefault(e) {

package/dist/primitives/trigger-button.es.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { controlTriggerOpenStateFor } from './control-size.es.js';
-import { B as Button } from '../Button-CHTvSq4d.js';
+import { B as Button } from '../Button-C6eUqcPI.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 
 function resolveTriggerRender({

package/dist/{property-filter-applied-gYYOGNLL.cjs → property-filter-applied-D0F0BYMY.cjs}

@@ -2,7 +2,7 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const Button = require('./Button-DbJn0bJX.cjs');
+const Button = require('./Button-BnmR2HRc.cjs');
 const dropdownMenu = require('./dropdown-menu-j2y37TL5.cjs');
 const React = require('react');
 const buttonsGroup = require('./buttons-group-CoZP3lJt.cjs');
@@ -338,4 +338,4 @@ function PropertyFilterApplied({
 exports.PickMultiPanel = PickMultiPanel;
 exports.PropertyFilterActions = PropertyFilterActions;
 exports.PropertyFilterApplied = PropertyFilterApplied;
-//# sourceMappingURL=property-filter-applied-gYYOGNLL.cjs.map
+//# sourceMappingURL=property-filter-applied-D0F0BYMY.cjs.map