@moldable-ai/ui 0.2.26 → 0.2.31

package/dist/catalog/component-catalog.d.ts

@@ -1,14 +1,21 @@
 import * as React from 'react';
+import type { UIPlatform, UIPlatformVersion, UITheme } from '../tokens/contracts.js';
 import type { CatalogCase, CatalogCaseFilter, CatalogManifest } from './catalog-types.js';
 export interface ComponentCatalogProps extends Omit<React.ComponentProps<'main'>, 'children'> {
     manifest: CatalogManifest;
     filter?: CatalogCaseFilter;
     showCaseLabels?: boolean;
+    platform?: UIPlatform;
+    platformVersion?: UIPlatformVersion;
+    uiTheme?: UITheme;
 }
 export interface CatalogCaseFrameProps extends Omit<React.ComponentProps<'article'>, 'children'> {
     catalogCase: CatalogCase;
     showLabel?: boolean;
+    platform?: UIPlatform;
+    platformVersion?: UIPlatformVersion;
+    uiTheme?: UITheme;
 }
-export declare function CatalogCaseFrame({ catalogCase, showLabel, className, ...props }: CatalogCaseFrameProps): import("react/jsx-runtime").JSX.Element;
-export declare function ComponentCatalog({ manifest, filter, showCaseLabels, className, ...props }: ComponentCatalogProps): import("react/jsx-runtime").JSX.Element;
+export declare function CatalogCaseFrame({ catalogCase, showLabel, platform, platformVersion, uiTheme, className, ...props }: CatalogCaseFrameProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComponentCatalog({ manifest, filter, showCaseLabels, platform, platformVersion, uiTheme, className, ...props }: ComponentCatalogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=component-catalog.d.ts.map

package/dist/catalog/component-catalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-catalog.d.ts","sourceRoot":"","sources":["../../src/catalog/component-catalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EACV,WAAW,EACX,iBAAiB,EACjB,eAAe,EAChB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACtD,QAAQ,EAAE,eAAe,CAAA;IACzB,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IACzD,WAAW,EAAE,WAAW,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAiBD,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,SAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAyDvB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,cAAqB,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA0GvB"}
+{"version":3,"file":"component-catalog.d.ts","sourceRoot":"","sources":["../../src/catalog/component-catalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,OAAO,EACR,MAAM,qBAAqB,CAAA;AAG5B,OAAO,KAAK,EACV,WAAW,EACX,iBAAiB,EACjB,eAAe,EAChB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACtD,QAAQ,EAAE,eAAe,CAAA;IACzB,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IACzD,WAAW,EAAE,WAAW,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAwBD,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,SAAgB,EAChB,QAAkB,EAClB,eAAsB,EACtB,OAAoB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAoEvB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,cAAqB,EACrB,QAAkB,EAClB,eAAsB,EACtB,OAAoB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA6GvB"}

package/dist/catalog/component-catalog.js

@@ -1,9 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
+import { resolvePlatformPack } from '../tokens/contracts.js';
 import { buildCatalogCases } from './catalog-manifest.js';
-function caseLabel(catalogCase) {
+function caseLabel(catalogCase, platform, platformVersion, uiTheme) {
     const labels = [
+        `${platform}-${platformVersion}`,
+        uiTheme,
         catalogCase.theme,
         catalogCase.density,
         catalogCase.viewport,
@@ -14,19 +17,20 @@ function caseLabel(catalogCase) {
     }
     return labels.join(' · ');
 }
-export function CatalogCaseFrame({ catalogCase, showLabel = true, className, ...props }) {
+export function CatalogCaseFrame({ catalogCase, showLabel = true, platform = 'macos', platformVersion = '27', uiTheme = 'moldable', className, ...props }) {
     const isDark = catalogCase.theme === 'dark';
-    return (_jsxs("article", { "data-slot": "catalog-case", "data-catalog-case": catalogCase.caseId, "data-theme": catalogCase.theme, "data-density": catalogCase.density, "data-viewport": catalogCase.viewport, "data-accessibility-mode": catalogCase.accessibilityMode, "data-transparency": catalogCase.accessibilityMode === 'reduced-transparency'
+    const platformPack = resolvePlatformPack(platform, platformVersion);
+    return (_jsxs("article", { "data-slot": "catalog-case", "data-catalog-case": catalogCase.caseId, "data-ui-platform": platformPack.platform, "data-ui-platform-version": platformPack.version, "data-ui-platform-pack": platformPack.id, "data-ui-theme": uiTheme, "data-ui-appearance": catalogCase.theme, "data-theme": catalogCase.theme, "data-density": catalogCase.density, "data-viewport": catalogCase.viewport, "data-accessibility-mode": catalogCase.accessibilityMode, "data-transparency": catalogCase.accessibilityMode === 'reduced-transparency'
             ? 'reduced'
             : undefined, "data-contrast": catalogCase.accessibilityMode === 'increased-contrast'
             ? 'increased'
             : undefined, "data-motion": catalogCase.accessibilityMode === 'reduced-motion'
             ? 'reduced'
-            : undefined, "data-interaction": catalogCase.interaction, "aria-label": `${catalogCase.storyTitle}: ${caseLabel(catalogCase)}`, className: cn('bg-background text-foreground border-border isolate overflow-hidden rounded-lg border shadow-sm', catalogCase.viewport === 'narrow'
+            : undefined, "data-interaction": catalogCase.interaction, "aria-label": `${catalogCase.storyTitle}: ${caseLabel(catalogCase, platform, platformVersion, uiTheme)}`, className: cn('bg-background text-foreground border-border isolate overflow-hidden rounded-lg border shadow-sm', catalogCase.viewport === 'narrow'
             ? 'w-full max-w-80'
-            : 'w-full max-w-3xl', isDark && 'dark', className), ...props, children: [showLabel ? (_jsx("header", { "data-slot": "catalog-case-label", className: "border-border bg-muted/40 text-muted-foreground border-b px-3 py-2 font-mono text-[11px] leading-4", children: caseLabel(catalogCase) })) : null, _jsx("div", { "data-slot": "catalog-case-stage", className: cn('bg-background text-foreground min-h-24', catalogCase.density === 'compact' ? 'p-2' : 'p-4'), children: catalogCase.render(catalogCase) })] }));
+            : 'w-full max-w-3xl', isDark && 'dark', className), ...props, children: [showLabel ? (_jsx("header", { "data-slot": "catalog-case-label", className: "border-border bg-muted/40 text-muted-foreground border-b px-3 py-2 font-mono text-[11px] leading-4", children: caseLabel(catalogCase, platform, platformVersion, uiTheme) })) : null, _jsx("div", { "data-slot": "catalog-case-stage", className: cn('bg-background text-foreground min-h-24', catalogCase.density === 'compact' ? 'p-2' : 'p-4'), children: catalogCase.render(catalogCase) })] }));
 }
-export function ComponentCatalog({ manifest, filter, showCaseLabels = true, className, ...props }) {
+export function ComponentCatalog({ manifest, filter, showCaseLabels = true, platform = 'macos', platformVersion = '27', uiTheme = 'moldable', className, ...props }) {
     const cases = buildCatalogCases(manifest, filter);
     const groupedCases = new Map();
     for (const catalogCase of cases) {
@@ -44,6 +48,6 @@ export function ComponentCatalog({ manifest, filter, showCaseLabels = true, clas
                         .filter((group) => group.cases.length > 0);
                     if (storyGroups.length === 0)
                         return null;
-                    return (_jsxs("section", { "data-slot": "catalog-section", "data-catalog-section": section.id, "aria-labelledby": `catalog-section-${section.id}`, children: [_jsxs("div", { className: "mb-4", children: [_jsx("h2", { id: `catalog-section-${section.id}`, className: "text-lg font-semibold tracking-tight", children: section.title }), section.description ? (_jsx("div", { className: "text-muted-foreground mt-1 max-w-3xl text-sm", children: section.description })) : null] }), _jsx("div", { className: "grid gap-8", children: storyGroups.map(({ story, cases: storyCases }) => (_jsxs("section", { "data-slot": "catalog-story", "data-catalog-story": story.id, "aria-labelledby": `catalog-story-${section.id}-${story.id}`, children: [_jsxs("div", { className: "mb-3", children: [_jsx("h3", { id: `catalog-story-${section.id}-${story.id}`, className: "text-sm font-medium", children: story.title }), story.description ? (_jsx("div", { className: "text-muted-foreground mt-1 text-xs", children: story.description })) : null] }), _jsx("div", { "data-slot": "catalog-case-grid", className: "grid items-start gap-4 xl:grid-cols-2", children: storyCases.map((catalogCase) => (_jsx(CatalogCaseFrame, { catalogCase: catalogCase, showLabel: showCaseLabels }, catalogCase.caseId))) })] }, story.id))) })] }, section.id));
+                    return (_jsxs("section", { "data-slot": "catalog-section", "data-catalog-section": section.id, "aria-labelledby": `catalog-section-${section.id}`, children: [_jsxs("div", { className: "mb-4", children: [_jsx("h2", { id: `catalog-section-${section.id}`, className: "text-lg font-semibold tracking-tight", children: section.title }), section.description ? (_jsx("div", { className: "text-muted-foreground mt-1 max-w-3xl text-sm", children: section.description })) : null] }), _jsx("div", { className: "grid gap-8", children: storyGroups.map(({ story, cases: storyCases }) => (_jsxs("section", { "data-slot": "catalog-story", "data-catalog-story": story.id, "aria-labelledby": `catalog-story-${section.id}-${story.id}`, children: [_jsxs("div", { className: "mb-3", children: [_jsx("h3", { id: `catalog-story-${section.id}-${story.id}`, className: "text-sm font-medium", children: story.title }), story.description ? (_jsx("div", { className: "text-muted-foreground mt-1 text-xs", children: story.description })) : null] }), _jsx("div", { "data-slot": "catalog-case-grid", className: "grid items-start gap-4 xl:grid-cols-2", children: storyCases.map((catalogCase) => (_jsx(CatalogCaseFrame, { catalogCase: catalogCase, platform: platform, platformVersion: platformVersion, showLabel: showCaseLabels, uiTheme: uiTheme }, catalogCase.caseId))) })] }, story.id))) })] }, section.id));
                 }) })] }));
 }

package/dist/catalog/core-control-stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-control-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-control-stories.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAuC/D,eAAO,MAAM,mBAAmB,EAAE,wBAoUjC,CAAA"}
+{"version":3,"file":"core-control-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-control-stories.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAuC/D,eAAO,MAAM,mBAAmB,EAAE,wBAqUjC,CAAA"}

package/dist/catalog/core-control-stories.js

@@ -45,7 +45,7 @@ export const coreControlsSection = {
             components: ['button'],
             interactions: ['rest', 'focus-visible', 'disabled'],
             liveStates: ['hover', 'focus', 'pressed'],
-            render: ({ interaction }) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "xs", variant: "outline", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Extra small"] }), _jsxs(Button, { size: "sm", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Small"] }), _jsxs(Button, { "data-catalog-target": true, "data-state-target": "hover focus pressed", autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Default"] }), _jsxs(Button, { size: "lg", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Large"] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: ['xs', 'sm', 'default', 'lg'].map((size) => (_jsx(IconButton, { label: `Add item, ${size} size`, size: size, variant: "outline", disabled: interaction === 'disabled', children: _jsx(PlusIcon, {}) }, size))) })] })),
+            render: ({ interaction }) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "xs", variant: "outline", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Extra small"] }), _jsxs(Button, { size: "sm", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Small"] }), _jsxs(Button, { "data-catalog-target": true, "data-state-target": "hover focus pressed", autoFocus: interaction === 'focus-visible', variant: "prominent", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Prominent"] }), _jsxs(Button, { size: "lg", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Large"] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: ['xs', 'sm', 'default', 'lg'].map((size) => (_jsx(IconButton, { label: `Add item, ${size} size`, size: size, variant: "outline", disabled: interaction === 'disabled', children: _jsx(PlusIcon, {}) }, size))) })] })),
         },
         {
             id: 'icon-button',

package/dist/catalog/core-foundation-stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-foundation-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-foundation-stories.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,qBAAqB,EAAE,wBA2InC,CAAA"}
+{"version":3,"file":"core-foundation-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-foundation-stories.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,qBAAqB,EAAE,wBAuLnC,CAAA"}

package/dist/catalog/core-foundation-stories.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronLeftIcon, ChevronRightIcon, LocateFixedIcon, PlusIcon, } from 'lucide-react';
-import { AppFrame, AppFrameContent, } from '../components/ui/app-frame.js';
+import { ChevronLeftIcon, ChevronRightIcon, ImageIcon, LocateFixedIcon, PaletteIcon, PlusIcon, Redo2Icon, Undo2Icon, } from 'lucide-react';
+import { AppFrame, AppFrameContent } from '../components/ui/app-frame.js';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../components/ui/card.js';
 import { IconButton } from '../components/ui/icon-button.js';
 import { Material, MaterialGroup } from '../components/ui/material.js';
 import { Panel, PanelContent, PanelGroup, PanelHeader, } from '../components/ui/panel.js';
 import { Text } from '../components/ui/text.js';
 import { Toolbar, ToolbarActions, ToolbarContent, ToolbarDescription, ToolbarTitle, } from '../components/ui/toolbar.js';
+import { ToolbarBackButton, ToolbarButton, ToolbarControlGroup, ToolbarControlSeparator, ToolbarIconButton, ToolbarOverflowMenu, ToolbarSidebarToggle, ToolbarTitleField, } from '../components/ui/toolbar-controls.js';
 export const coreFoundationSection = {
     id: 'window-foundations',
     title: 'Window foundations',
@@ -40,12 +41,23 @@ export const coreFoundationSection = {
             viewports: ['narrow'],
             render: () => (_jsxs(Toolbar, { className: "rounded-container border", children: [_jsxs(ToolbarContent, { children: [_jsx(ToolbarTitle, { children: "Daily plan" }), _jsx(ToolbarDescription, { children: "Three tasks remaining" })] }), _jsx(ToolbarActions, { children: _jsx(IconButton, { label: "Add task", variant: "ghost", size: "sm", children: _jsx(PlusIcon, {}) }) })] })),
         },
+        {
+            id: 'document-toolbar-controls',
+            title: 'Document toolbar controls',
+            description: 'Contextual navigation, closely related groups, secondary actions, overflow, and one primary action.',
+            components: ['toolbar', 'toolbar-controls'],
+            viewports: ['wide'],
+            render: () => (_jsxs(Toolbar, { position: "top", className: "rounded-container border", children: [_jsxs(ToolbarControlGroup, { "aria-label": "Navigation", children: [_jsx(ToolbarSidebarToggle, { expanded: true, onExpandedChange: () => undefined }), _jsx(ToolbarControlSeparator, {}), _jsx(ToolbarBackButton, { onClick: () => undefined })] }), _jsx(ToolbarTitleField, { defaultValue: "Open House" }), _jsxs(ToolbarActions, { children: [_jsxs(ToolbarControlGroup, { "aria-label": "Editing tools", children: [_jsx(ToolbarIconButton, { label: "Undo", children: _jsx(Undo2Icon, {}) }), _jsx(ToolbarControlSeparator, {}), _jsx(ToolbarIconButton, { label: "Redo", children: _jsx(Redo2Icon, {}) }), _jsx(ToolbarIconButton, { label: "Style", children: _jsx(PaletteIcon, {}) }), _jsx(ToolbarIconButton, { label: "Assets", children: _jsx(ImageIcon, {}) })] }), _jsx(ToolbarControlGroup, { "aria-label": "History and sharing", children: _jsx(ToolbarOverflowMenu, { items: [
+                                        { id: 'history', label: 'Version history' },
+                                        { id: 'publish', label: 'Publish' },
+                                    ] }) }), _jsx(ToolbarButton, { variant: "prominent", children: "Present" })] })] })),
+        },
         {
             id: 'work-surfaces',
             title: 'Work surfaces',
             components: ['card', 'panel'],
             interactions: ['rest', 'empty'],
-            render: ({ interaction }) => (_jsxs(PanelGroup, { className: "rounded-container h-48 border", children: [_jsxs(Panel, { surface: "sidebar", className: "w-32", children: [_jsx(PanelHeader, { children: _jsx(Text, { variant: "small-strong", children: "Library" }) }), _jsx(PanelContent, { className: "p-3", children: _jsx(Text, { color: "secondary", variant: "small", children: "Projects" }) })] }), _jsx(Panel, { className: "flex-1", children: _jsx(PanelContent, { className: "p-3", children: _jsxs(Card, { className: "shadow-panel gap-3 py-4", children: [_jsxs(CardHeader, { className: "gap-1 px-4", children: [_jsx(CardTitle, { className: "text-sm", children: interaction === 'empty' ? 'No selection' : 'Project brief' }), _jsx(CardDescription, { children: interaction === 'empty'
+            render: ({ interaction }) => (_jsxs(PanelGroup, { className: "rounded-container h-48 border", children: [_jsxs(Panel, { surface: "sidebar", className: "w-32", children: [_jsx(PanelHeader, { children: _jsx(Text, { variant: "small-strong", children: "Library" }) }), _jsx(PanelContent, { className: "p-3", children: _jsx(Text, { color: "secondary", variant: "small", children: "Projects" }) })] }), _jsx(Panel, { className: "flex-1", children: _jsx(PanelContent, { className: "p-3", children: _jsxs(Card, { surface: "raised", className: "gap-3 py-4", children: [_jsxs(CardHeader, { className: "gap-1 px-4", children: [_jsx(CardTitle, { className: "text-sm", children: interaction === 'empty' ? 'No selection' : 'Project brief' }), _jsx(CardDescription, { children: interaction === 'empty'
                                                     ? 'Choose an item from the library.'
                                                     : 'A quiet, bounded working surface.' })] }), _jsx(CardContent, { className: "px-4", children: _jsx(Text, { variant: "small", color: "secondary", children: "Updated today" }) })] }) }) })] })),
         },

package/dist/components/ui/app-frame.d.ts

@@ -1,6 +1,18 @@
 import * as React from 'react';
 import type { MaterialVariant } from './material.js';
 export type AppFrameMode = 'auto' | 'embedded' | 'window';
+export interface AppFrameNativeMaterial {
+    /**
+     * Reveal the host-rendered frosted window background while keeping the
+     * portable canvas fill as the fallback.
+     */
+    background?: boolean;
+    /**
+     * Allow a compatible leading `Sidebar` to request host-rendered native
+     * material when the app manifest and host both advertise support.
+     */
+    sidebar?: boolean;
+}
 declare function resolveAppFrameMode(mode: AppFrameMode): Exclude<AppFrameMode, 'auto'>;
 export interface AppFrameProps extends React.ComponentProps<'div'> {
     /**
@@ -8,14 +20,21 @@ export interface AppFrameProps extends React.ComponentProps<'div'> {
      * in catalogs, previews, and tests where the runtime environment is ambiguous.
      */
     mode?: AppFrameMode;
+    /**
+     * Explicitly opts this app frame into renderer-owned native material
+     * regions. The matching region must also be enabled in `moldable.json`.
+     */
+    nativeMaterial?: AppFrameNativeMaterial;
 }
 interface AppFrameRuntimeContextValue {
     mode: Exclude<AppFrameMode, 'auto'>;
+    backgroundMaterialActive: boolean;
     sidebarMaterialAvailable: boolean;
+    sidebarMaterialEnabled: boolean;
     sidebarMaterialRegionId: string | null;
 }
 export declare function useAppFrameRuntime(): AppFrameRuntimeContextValue | null;
-declare function AppFrame({ mode, className, style, ...props }: AppFrameProps): import("react/jsx-runtime").JSX.Element;
+declare function AppFrame({ mode, nativeMaterial, className, style, ...props }: AppFrameProps): import("react/jsx-runtime").JSX.Element;
 export interface AppFrameTitlebarProps extends React.ComponentPropsWithoutRef<'header'> {
     material?: MaterialVariant | 'none';
 }

package/dist/components/ui/app-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAMjD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,iBAAS,mBAAmB,CAC1B,IAAI,EAAE,YAAY,GACjB,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAM/B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB,EAAE,OAAO,CAAA;IACjC,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;CACvC;AAKD,wBAAgB,kBAAkB,IAAI,2BAA2B,GAAG,IAAI,CAEvE;AAsBD,iBAAS,QAAQ,CAAC,EAChB,IAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CAoEf;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAoB,EACpB,aAAa,EACb,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+BvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAWvC;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAiB,EACjB,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoBtB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAoB,EACpB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,CAAA"}
+{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAMjD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,mBAAmB,CAC1B,IAAI,EAAE,YAAY,GACjB,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAM/B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;CACxC;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB,EAAE,OAAO,CAAA;IACjC,wBAAwB,EAAE,OAAO,CAAA;IACjC,sBAAsB,EAAE,OAAO,CAAA;IAC/B,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;CACvC;AAKD,wBAAgB,kBAAkB,IAAI,2BAA2B,GAAG,IAAI,CAEvE;AA8BD,iBAAS,QAAQ,CAAC,EAChB,IAAa,EACb,cAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CAuGf;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAoB,EACpB,aAAa,EACb,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+BvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAWvC;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAiB,EACjB,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoBtB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAoB,EACpB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,CAAA"}

package/dist/components/ui/app-frame.js

@@ -30,13 +30,20 @@ function sidebarMaterialAvailable() {
         document.documentElement.dataset.moldableNativeMaterialSidebar ===
             'available');
 }
-function AppFrame({ mode = 'auto', className, style, ...props }) {
+function backgroundMaterialAvailable() {
+    return (typeof document !== 'undefined' &&
+        document.documentElement.dataset.moldableNativeMaterialBackground ===
+            'available');
+}
+function AppFrame({ mode = 'auto', nativeMaterial, className, style, ...props }) {
     const [resolvedMode, setResolvedMode] = React.useState(() => resolveAppFrameMode(mode));
     const [sidebarMaterialRegionId, setSidebarMaterialRegionId] = React.useState(activeSidebarMaterialRegionId);
     const [nativeSidebarMaterialAvailable, setNativeSidebarMaterialAvailable] = React.useState(sidebarMaterialAvailable);
+    const [nativeBackgroundMaterialAvailable, setNativeBackgroundMaterialAvailable,] = React.useState(backgroundMaterialAvailable);
     React.useEffect(() => {
         const updateHostState = () => {
             setResolvedMode(resolveAppFrameMode(mode));
+            setNativeBackgroundMaterialAvailable(backgroundMaterialAvailable());
             setNativeSidebarMaterialAvailable(sidebarMaterialAvailable());
             setSidebarMaterialRegionId(activeSidebarMaterialRegionId());
         };
@@ -50,19 +57,42 @@ function AppFrame({ mode = 'auto', className, style, ...props }) {
         };
     }, [mode]);
     const sidebarMaterialActive = resolvedMode === 'window' && sidebarMaterialRegionId !== null;
+    const backgroundMaterialActive = resolvedMode === 'window' &&
+        nativeMaterial?.background === true &&
+        nativeBackgroundMaterialAvailable;
+    React.useEffect(() => {
+        if (!backgroundMaterialActive)
+            return;
+        const previousBackgroundColor = document.body.style.backgroundColor;
+        document.body.style.backgroundColor = 'transparent';
+        return () => {
+            if (previousBackgroundColor) {
+                document.body.style.backgroundColor = previousBackgroundColor;
+            }
+            else {
+                document.body.style.removeProperty('background-color');
+            }
+        };
+    }, [backgroundMaterialActive]);
     return (_jsx(AppFrameRuntimeContext.Provider, { value: {
             mode: resolvedMode,
+            backgroundMaterialActive,
             sidebarMaterialAvailable: nativeSidebarMaterialAvailable,
+            sidebarMaterialEnabled: nativeMaterial?.sidebar === true,
             sidebarMaterialRegionId,
-        }, children: _jsx("div", { "data-slot": "app-frame", "data-mode": resolvedMode, "data-native-material-sidebar": sidebarMaterialActive ? 'active' : undefined, className: cn('text-foreground flex h-dvh min-h-0 min-w-0 flex-col overflow-hidden bg-[var(--surface-canvas,var(--background))]', className), style: {
+        }, children: _jsx("div", { "data-slot": "app-frame", "data-mode": resolvedMode, "data-native-material-background": backgroundMaterialActive ? 'active' : undefined, "data-native-material-sidebar": sidebarMaterialActive ? 'active' : undefined, "data-native-material-sidebar-enabled": nativeMaterial?.sidebar === true ? 'true' : undefined, className: cn('text-foreground flex h-dvh min-h-0 min-w-0 flex-col overflow-hidden', backgroundMaterialActive
+                ? 'bg-transparent'
+                : 'bg-[var(--surface-canvas,var(--background))]', className), style: {
                 paddingInlineStart: 'var(--window-safe-area-inline-start, 0px)',
                 paddingInlineEnd: 'var(--window-safe-area-inline-end, 0px)',
                 ...style,
-                ...(sidebarMaterialActive
-                    ? {
-                        background: 'linear-gradient(to right, transparent 0 var(--moldable-material-region-sidebar-width), var(--surface-canvas, var(--background)) var(--moldable-material-region-sidebar-width) 100%)',
-                    }
-                    : {}),
+                ...(backgroundMaterialActive
+                    ? { background: 'transparent' }
+                    : sidebarMaterialActive
+                        ? {
+                            background: 'linear-gradient(to right, transparent 0 var(--moldable-material-region-sidebar-width), var(--surface-canvas, var(--background)) var(--moldable-material-region-sidebar-width) 100%)',
+                        }
+                        : {}),
             }, ...props }) }));
 }
 function AppFrameTitlebar({ className, material = 'regular', onDoubleClick, onMouseDown, style, ...props }) {

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/ui/badge.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const badgeVariants = cva('text-ui-caption inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-2 py-0.5 font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3', {
+const badgeVariants = cva('inline-flex h-[var(--density-badge-height)] w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-[var(--density-badge-padding-inline)] py-0 text-[length:var(--type-badge-size)] leading-[var(--type-badge-line-height)] font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3', {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',

package/dist/components/ui/button.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import type { ControlSize } from '../../tokens/contracts.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "toolbar" | "default" | "outline" | "prominent" | "bordered" | "borderless" | "tinted" | "destructive" | "destructive-tinted" | "secondary" | "ghost" | null | undefined;
+    size?: "small" | "default" | "sm" | "xs" | "lg" | "xl" | "mini" | "medium" | "large" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    controlSize?: ControlSize;
     loading?: boolean;
 };
-declare function Button({ 'aria-busy': ariaBusy, children, className, disabled, loading, onClick, onKeyDown, variant, size, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ 'aria-busy': ariaBusy, children, className, controlSize, disabled, loading, onClick, onKeyDown, variant, size, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAkCnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAqDb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAwDnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CA0Eb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -4,25 +4,37 @@ import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { Spinner } from './spinner.js';
 import { cva } from 'class-variance-authority';
-const buttonVariants = cva("text-ui-body relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap outline-none transition-all focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-[var(--m-ui-button-radius)] font-[var(--m-ui-button-font-weight)] whitespace-nowrap outline-none transition-[background-color,border-color,box-shadow,color] text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] focus-visible:ring-[3px] focus-visible:ring-ring aria-invalid:ring-[3px] aria-invalid:ring-destructive/45 disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
-            destructive: 'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 dark:bg-destructive/60',
+            default: 'bg-[var(--m-ui-button-prominent-fill)] text-[var(--m-ui-button-prominent-label)] active:bg-[var(--m-ui-button-prominent-fill-pressed)] disabled:bg-[var(--m-ui-button-prominent-fill-disabled)] disabled:!text-[var(--m-ui-button-prominent-label-disabled)]',
+            prominent: 'bg-[var(--m-ui-button-prominent-fill)] text-[var(--m-ui-button-prominent-label)] active:bg-[var(--m-ui-button-prominent-fill-pressed)] disabled:bg-[var(--m-ui-button-prominent-fill-disabled)] disabled:!text-[var(--m-ui-button-prominent-label-disabled)]',
+            bordered: 'bg-[var(--m-ui-button-bordered-fill)] text-[var(--m-ui-button-bordered-label)] active:bg-[var(--m-ui-button-bordered-fill-pressed)] disabled:bg-[var(--m-ui-button-bordered-fill-disabled)] disabled:!text-[var(--m-ui-button-bordered-label-disabled)]',
+            borderless: 'bg-transparent text-[var(--m-ui-button-borderless-label)] active:text-[var(--m-ui-button-borderless-label-pressed)] disabled:!text-[var(--m-ui-button-borderless-label-disabled)]',
+            tinted: 'bg-[var(--m-ui-button-tinted-fill)] text-[var(--m-ui-button-tinted-label)] active:bg-[var(--m-ui-button-tinted-fill-pressed)] disabled:bg-[var(--m-ui-button-tinted-fill-disabled)] disabled:!text-[var(--m-ui-button-tinted-label-disabled)]',
+            toolbar: 'rounded-pill border-[var(--toolbar-control-border)] bg-[var(--toolbar-control-background)] text-foreground shadow-[var(--toolbar-control-shadow)] border hover:bg-[var(--toolbar-control-hover)] active:bg-[var(--toolbar-control-pressed)]',
+            destructive: 'bg-[var(--m-ui-button-destructive-fill)] text-[var(--m-ui-button-destructive-label)] active:bg-[var(--m-ui-button-destructive-fill-pressed)] disabled:bg-[var(--m-ui-button-destructive-fill-disabled)] disabled:!text-[var(--m-ui-button-destructive-label-disabled)]',
+            'destructive-tinted': 'bg-[var(--m-ui-button-destructive-tinted-fill)] text-[var(--m-ui-button-destructive-tinted-label)] active:bg-[var(--m-ui-button-destructive-tinted-fill-pressed)] disabled:bg-[var(--m-ui-button-destructive-tinted-fill-disabled)] disabled:!text-[var(--m-ui-button-destructive-tinted-label-disabled)]',
             outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground active:bg-control-pressed dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-control-pressed',
             secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/65',
             ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-control-pressed dark:hover:bg-accent/50 dark:active:bg-control-pressed',
             link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {
-            default: 'h-control-md px-control-inline has-[>[data-slot=button-content]>svg]:px-control-inline',
+            default: 'h-[var(--m-ui-control-height)] px-[var(--m-ui-control-padding-inline)]',
             xs: "text-ui-caption h-control-xs gap-1 px-2 has-[>[data-slot=button-content]>svg]:px-2 [&_svg:not([class*='size-'])]:size-3",
             sm: 'h-control-sm gap-1.5 px-control-inline has-[>[data-slot=button-content]>svg]:px-control-inline',
             lg: 'h-control-lg px-[calc(var(--density-control-padding-inline)+0.25rem)] has-[>[data-slot=button-content]>svg]:px-control-inline',
-            icon: 'size-control-md',
-            'icon-xs': "size-control-xs [&_svg:not([class*='size-'])]:size-3",
-            'icon-sm': 'size-control-sm',
-            'icon-lg': 'size-control-lg',
+            xl: 'h-control-xl px-[calc(var(--density-control-padding-inline)+0.375rem)] has-[>[data-slot=button-content]>svg]:px-control-inline',
+            mini: "h-[var(--m-ui-control-height)] px-[var(--m-ui-control-padding-inline)] text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] [&_svg:not([class*='size-'])]:size-3",
+            small: "h-[var(--m-ui-control-height)] px-[var(--m-ui-control-padding-inline)] text-[length:var(--m-ui-control-font-size)] leading-[var(--m-ui-control-line-height)] [&_svg:not([class*='size-'])]:size-3.5",
+            medium: 'h-[var(--m-ui-control-height)] px-[var(--m-ui-control-padding-inline)]',
+            large: 'h-[var(--m-ui-control-height)] px-[var(--m-ui-control-padding-inline)]',
+            icon: 'size-control-md rounded-pill',
+            'icon-xs': "size-control-xs rounded-pill [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': 'size-control-sm rounded-pill',
+            'icon-lg': 'size-control-lg rounded-pill',
+            'icon-xl': 'size-control-xl rounded-pill',
         },
     },
     defaultVariants: {
@@ -37,7 +49,24 @@ function blockLoadingInteraction(event) {
     event.preventDefault();
     event.stopPropagation();
 }
-function Button({ 'aria-busy': ariaBusy, children, className, disabled, loading = false, onClick, onKeyDown, variant = 'default', size = 'default', asChild = false, ...props }) {
+function Button({ 'aria-busy': ariaBusy, children, className, controlSize, disabled, loading = false, onClick, onKeyDown, variant = 'default', size = 'default', asChild = false, ...props }) {
+    const resolvedControlSize = controlSize ??
+        {
+            xs: 'mini',
+            'icon-xs': 'mini',
+            sm: 'small',
+            'icon-sm': 'small',
+            default: 'medium',
+            icon: 'medium',
+            medium: 'medium',
+            mini: 'mini',
+            small: 'small',
+            lg: 'large',
+            'icon-lg': 'large',
+            large: 'large',
+            xl: 'xl',
+            'icon-xl': 'xl',
+        }[size ?? 'default'];
     const Comp = asChild ? Slot : 'button';
     const buttonChildren = (_jsx(ButtonContent, { loading: loading, children: children }));
     const renderedChildren = asChild && React.isValidElement(children)
@@ -62,6 +91,6 @@ function Button({ 'aria-busy': ariaBusy, children, className, disabled, loading
         }
         onKeyDown?.(event);
     };
-    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, "data-loading": loading || undefined, "aria-busy": loading || ariaBusy || undefined, disabled: disabled || loading, className: cn(buttonVariants({ variant, size, className })), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: renderedChildren }));
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, "data-control-size": resolvedControlSize, "data-loading": loading || undefined, "aria-busy": loading || ariaBusy || undefined, disabled: disabled || loading, className: cn(buttonVariants({ variant, size, className })), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: renderedChildren }));
 }
 export { Button, buttonVariants };

package/dist/components/ui/card.d.ts

@@ -1,10 +1,20 @@
 import * as React from 'react';
-declare function Card({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export type CardSurface = 'default' | 'raised' | 'recessed' | 'plain';
+interface CardProps extends React.ComponentProps<'div'> {
+    /**
+     * Controls the card's place in the surface hierarchy.
+     *
+     * `raised` is suited to grouped settings and dashboard modules,
+     * `recessed` to inset content, and `plain` to structure without chrome.
+     */
+    surface?: CardSurface;
+}
+declare function Card({ className, surface, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, type CardProps, };
 //# sourceMappingURL=card.d.ts.map

package/dist/components/ui/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAA;AAErE,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAiBpE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,KAAK,SAAS,GACf,CAAA"}

package/dist/components/ui/card.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils.js';
-function Card({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground rounded-card flex flex-col gap-6 border py-6 shadow-sm', className), ...props }));
+function Card({ className, surface = 'default', ...props }) {
+    return (_jsx("div", { "data-slot": "card", "data-surface": surface, className: cn('text-card-foreground rounded-card flex flex-col gap-6 py-6', surface === 'default' && 'bg-card shadow-card border', surface === 'raised' &&
+            'bg-surface-raised border-separator shadow-card border', surface === 'recessed' && 'bg-surface-recessed', surface === 'plain' && 'bg-transparent', className), ...props }));
 }
 function CardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6', className), ...props }));

package/dist/components/ui/checkbox.d.ts

@@ -1,5 +1,8 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as React from 'react';
-declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+import type { ControlSize } from '../../tokens/contracts.js';
+declare function Checkbox({ className, controlSize, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
+    controlSize?: ControlSize;
+}): import("react/jsx-runtime").JSX.Element;
 export { Checkbox };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/components/ui/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAmBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IACvD,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,2CAqBA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/checkbox.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon } from 'lucide-react';
+import { CheckIcon, MinusIcon } from 'lucide-react';
 import { cn } from '../../lib/utils.js';
-function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('group/checkbox text-primary-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:before:border-destructive rounded-checkbox size-control-xs before:rounded-checkbox before:border-input before:shadow-xs data-[state=checked]:before:border-primary data-[state=checked]:before:bg-primary dark:before:bg-input/30 dark:data-[state=checked]:before:bg-primary peer relative shrink-0 cursor-pointer border border-transparent bg-transparent p-1 outline-none transition-shadow before:pointer-events-none before:absolute before:left-1/2 before:top-1/2 before:size-4 before:-translate-x-1/2 before:-translate-y-1/2 before:border before:bg-transparent focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { forceMount: true, "data-slot": "checkbox-indicator", className: "pointer-events-none absolute left-1/2 top-1/2 z-10 grid size-4 -translate-x-1/2 -translate-y-1/2 place-content-center text-current transition-none group-data-[state=unchecked]/checkbox:opacity-0", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+function Checkbox({ className, controlSize, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", "data-control-size": controlSize, className: cn('group/checkbox focus-visible:border-ring focus-visible:ring-ring aria-invalid:border-destructive shadow-xs peer relative h-[var(--m-ui-checkbox-size)] w-[var(--m-ui-checkbox-size)] shrink-0 cursor-pointer rounded-[var(--m-ui-checkbox-radius)] border border-[var(--m-ui-color-fill-primary)] bg-[var(--m-ui-color-fill-quinary)] text-white outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-[var(--m-ui-color-accent)] data-[state=indeterminate]:border-[var(--m-ui-color-accent)] data-[state=checked]:bg-[var(--m-ui-color-accent)] data-[state=indeterminate]:bg-[var(--m-ui-color-accent)]', className), ...props, children: _jsxs(CheckboxPrimitive.Indicator, { forceMount: true, "data-slot": "checkbox-indicator", className: "pointer-events-none absolute left-1/2 top-1/2 z-10 grid size-full -translate-x-1/2 -translate-y-1/2 place-content-center text-current transition-none group-data-[state=unchecked]/checkbox:opacity-0", children: [_jsx(CheckIcon, { className: "size-[var(--m-ui-checkbox-checkmark-width)] group-data-[state=indeterminate]/checkbox:hidden" }), _jsx(MinusIcon, { className: "hidden size-[var(--m-ui-radio-dash-width)] group-data-[state=indeterminate]/checkbox:block" })] }) }));
 }
 export { Checkbox };

package/dist/components/ui/context-menu.js

@@ -78,22 +78,22 @@ function ContextMenuRadioGroup({ ...props }) {
     return (_jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props }));
 }
 function ContextMenuSubTrigger({ className, inset, children, variant = 'default', ...props }) {
-    return (_jsxs(ContextMenuPrimitive.SubTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden rounded-control text-ui-body flex cursor-default select-none items-center px-2 py-1.5 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+    return (_jsxs(ContextMenuPrimitive.SubTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden text-ui-body flex cursor-default select-none items-center rounded-[var(--m-ui-menu-item-radius)] px-2 py-1.5 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
 }
 function ContextMenuSubContent({ className, ...props }) {
-    return (_jsx(ContextMenuPrimitive.SubContent, { "data-slot": "context-menu-sub-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) rounded-overlay shadow-overlay z-50 min-w-[8rem] overflow-hidden border p-1', className), ...props }));
+    return (_jsx(ContextMenuPrimitive.SubContent, { "data-slot": "context-menu-sub-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) rounded-overlay shadow-overlay z-50 min-w-[8rem] overflow-hidden border px-1 py-[var(--m-ui-menu-padding-block)]', className), ...props }));
 }
 function ContextMenuContent({ className, ...props }) {
-    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Content, { "data-slot": "context-menu-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) rounded-overlay shadow-overlay z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden border p-1', className), ...props }) }));
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Content, { "data-slot": "context-menu-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) rounded-overlay shadow-overlay z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden border px-1 py-[var(--m-ui-menu-padding-block)]', className), ...props }) }));
 }
 function ContextMenuItem({ className, inset, variant = 'default', ...props }) {
-    return (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden rounded-control text-ui-body relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props }));
+    return (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden text-ui-body relative flex cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] px-2 py-1.5 data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props }));
 }
 function ContextMenuCheckboxItem({ className, children, checked, variant = 'default', ...props }) {
-    return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden rounded-control text-ui-body relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+    return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden text-ui-body relative flex cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
 }
 function ContextMenuRadioItem({ className, children, variant = 'default', ...props }) {
-    return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden rounded-control text-ui-body relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+    return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden text-ui-body relative flex cursor-default select-none items-center gap-2 rounded-[var(--m-ui-menu-item-radius)] py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
 }
 function ContextMenuLabel({ className, inset, ...props }) {
     return (_jsx(ContextMenuPrimitive.Label, { "data-slot": "context-menu-label", "data-inset": inset, className: cn('text-foreground text-ui-body px-2 py-1.5 font-medium data-[inset]:pl-8', className), ...props }));

package/dist/components/ui/date-field.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const dateFieldVariants: (props?: ({
     variant?: "default" | "filled" | null | undefined;
-    density?: "default" | "compact" | "comfortable" | null | undefined;
+    density?: "compact" | "default" | "comfortable" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface DateFieldProps extends Omit<React.ComponentProps<'input'>, 'defaultValue' | 'size' | 'type' | 'value'>, VariantProps<typeof dateFieldVariants> {
     /** ISO calendar date in YYYY-MM-DD form. No timezone conversion is applied. */