@vireo-ai/trellis-ui 0.1.8 → 0.1.10

package/packages/client/types/components/layout.d.ts

@@ -1,4 +1,4 @@
-import { SURFACE_ALPHA_COMPOUNDS, type ComponentRadius, type Elevation, type LayoutSpace, type Surface, type SurfaceTone } from './common';
+import { type ComponentRadius, type ElevationReference, type LayoutSpace, type SurfaceReference } from './common';
 declare const LAYOUT_AS_VALUES: readonly ["div", "section", "article", "aside", "header", "footer", "main", "nav", "form", "ul", "ol", "li", "span"];
 declare const LAYOUT_WIDTHS: readonly ["auto", "full", "xs", "sm", "md", "lg", "xl", "prose"];
 declare const LAYOUT_HEIGHTS: readonly ["auto", "full", "xs", "sm", "md", "lg", "xl"];
@@ -7,28 +7,27 @@ declare const LAYOUT_JUSTIFIES: readonly ["start", "center", "end", "between"];
 declare const LAYOUT_COLUMNS: readonly ["none", "1", "2", "3", "4", "5", "6"];
 declare const LAYOUT_ROWS: readonly ["none", "1", "2", "3", "4", "5", "6"];
 declare const layoutSurfaceSchema: {
-    padding: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    paddingX: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    paddingY: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    margin: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    marginX: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    marginY: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    surface: import("../runtime/codecs").OneOfCodec<"none" | "subtle" | "accent" | "app" | "chrome" | "panel" | "raised" | "overlay" | "inverse">;
-    tone: import("../runtime/codecs").OneOfCodec<"solid" | "alpha">;
+    padding: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    paddingX: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    paddingY: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    margin: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    marginX: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    marginY: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    surface: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "inherit" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
     radius: import("../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
-    elevation: import("../runtime/codecs").OneOfCodec<"1" | "none" | "2" | "3" | "4" | "5" | "6">;
+    elevation: import("../runtime/codecs").OneOfCodec<"1" | "match" | "2" | "none" | "3" | "4" | "5" | "6" | "7" | "8">;
     width: import("../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "full" | "auto" | "xl" | "prose">;
     height: import("../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "full" | "auto" | "xl">;
     class: import("../runtime/codecs").StringCodec;
 };
 declare const layoutSpacingSchema: {
-    gap: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    gapX: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
-    gapY: import("../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
+    gap: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    gapX: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    gapY: import("../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
 };
 declare const layoutAlignmentSchema: {
-    align: import("../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "stretch" | "baseline">;
-    justify: import("../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "between">;
+    align: import("../runtime/codecs").OneOfCodec<"start" | "center" | "end" | "stretch" | "baseline">;
+    justify: import("../runtime/codecs").OneOfCodec<"start" | "center" | "end" | "between">;
 };
 declare const layoutSurfaceDetails: {
     padding: {
@@ -52,9 +51,6 @@ declare const layoutSurfaceDetails: {
     surface: {
         description: string;
     };
-    tone: {
-        description: string;
-    };
     radius: {
         description: string;
     };
@@ -124,12 +120,12 @@ declare const LAYOUT_JUSTIFY_CLASSES: {
 };
 declare const LAYOUT_COLUMN_CLASSES: {
     readonly none: "";
-    readonly '1': "grid-cols-1";
-    readonly '2': "grid-cols-1 sm:grid-cols-2";
-    readonly '3': "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
-    readonly '4': "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
-    readonly '5': "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5";
-    readonly '6': "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6";
+    readonly '1': "";
+    readonly '2': "";
+    readonly '3': "";
+    readonly '4': "";
+    readonly '5': "";
+    readonly '6': "";
 };
 declare const LAYOUT_ROW_CLASSES: {
     readonly none: "";
@@ -141,145 +137,22 @@ declare const LAYOUT_ROW_CLASSES: {
     readonly '6': "grid-rows-6";
 };
 declare const layoutBaseVariants: {
-    gap: {
-        readonly '0': "";
-        readonly '1': "gap-1";
-        readonly '2': "gap-2";
-        readonly '3': "gap-3";
-        readonly '4': "gap-4";
-        readonly '5': "gap-5";
-        readonly '6': "gap-6";
-        readonly '7': "gap-7";
-        readonly '8': "gap-8";
-        readonly '9': "gap-9";
-    };
-    gapX: {
-        readonly '0': "";
-        readonly '1': "gap-x-1";
-        readonly '2': "gap-x-2";
-        readonly '3': "gap-x-3";
-        readonly '4': "gap-x-4";
-        readonly '5': "gap-x-5";
-        readonly '6': "gap-x-6";
-        readonly '7': "gap-x-7";
-        readonly '8': "gap-x-8";
-        readonly '9': "gap-x-9";
-    };
-    gapY: {
-        readonly '0': "";
-        readonly '1': "gap-y-1";
-        readonly '2': "gap-y-2";
-        readonly '3': "gap-y-3";
-        readonly '4': "gap-y-4";
-        readonly '5': "gap-y-5";
-        readonly '6': "gap-y-6";
-        readonly '7': "gap-y-7";
-        readonly '8': "gap-y-8";
-        readonly '9': "gap-y-9";
-    };
-    padding: {
-        readonly '0': "";
-        readonly '1': "p-1";
-        readonly '2': "p-2";
-        readonly '3': "p-3";
-        readonly '4': "p-4";
-        readonly '5': "p-5";
-        readonly '6': "p-6";
-        readonly '7': "p-7";
-        readonly '8': "p-8";
-        readonly '9': "p-9";
-    };
-    paddingX: {
-        readonly '0': "";
-        readonly '1': "px-1";
-        readonly '2': "px-2";
-        readonly '3': "px-3";
-        readonly '4': "px-4";
-        readonly '5': "px-5";
-        readonly '6': "px-6";
-        readonly '7': "px-7";
-        readonly '8': "px-8";
-        readonly '9': "px-9";
-    };
-    paddingY: {
-        readonly '0': "";
-        readonly '1': "py-1";
-        readonly '2': "py-2";
-        readonly '3': "py-3";
-        readonly '4': "py-4";
-        readonly '5': "py-5";
-        readonly '6': "py-6";
-        readonly '7': "py-7";
-        readonly '8': "py-8";
-        readonly '9': "py-9";
-    };
-    margin: {
-        readonly '0': "";
-        readonly '1': "m-1";
-        readonly '2': "m-2";
-        readonly '3': "m-3";
-        readonly '4': "m-4";
-        readonly '5': "m-5";
-        readonly '6': "m-6";
-        readonly '7': "m-7";
-        readonly '8': "m-8";
-        readonly '9': "m-9";
-    };
-    marginX: {
-        readonly '0': "";
-        readonly '1': "mx-1";
-        readonly '2': "mx-2";
-        readonly '3': "mx-3";
-        readonly '4': "mx-4";
-        readonly '5': "mx-5";
-        readonly '6': "mx-6";
-        readonly '7': "mx-7";
-        readonly '8': "mx-8";
-        readonly '9': "mx-9";
-    };
-    marginY: {
-        readonly '0': "";
-        readonly '1': "my-1";
-        readonly '2': "my-2";
-        readonly '3': "my-3";
-        readonly '4': "my-4";
-        readonly '5': "my-5";
-        readonly '6': "my-6";
-        readonly '7': "my-7";
-        readonly '8': "my-8";
-        readonly '9': "my-9";
-    };
-    surface: {
-        readonly none: "bg-transparent text-inherit";
-        readonly app: "bg-app text-foreground";
-        readonly chrome: "bg-chrome text-foreground";
-        readonly subtle: "bg-surface-subtle text-foreground";
-        readonly panel: "bg-surface-panel text-foreground";
-        readonly raised: "bg-surface-raised text-foreground";
-        readonly overlay: "bg-surface-overlay text-foreground";
-        readonly accent: "bg-surface-accent text-surface-accent-fg";
-        readonly inverse: "bg-surface-inverse text-surface-inverse-fg";
-    };
-    tone: {
-        readonly solid: "";
-        readonly alpha: "";
-    };
+    gap: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
+    gapX: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
+    gapY: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
+    padding: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
+    paddingX: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
+    paddingY: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
+    margin: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
+    marginX: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
+    marginY: Record<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5", string>;
     radius: {
         readonly none: "";
-        readonly xs: "rounded-1";
-        readonly sm: "rounded-2";
-        readonly md: "rounded-3";
-        readonly lg: "rounded-4";
-        readonly full: "rounded-6";
-    };
-    elevation: {
-        readonly none: "shadow-none";
-        readonly '1': "shadow-1";
-        readonly '2': "shadow-2";
-        readonly '3': "shadow-3";
-        readonly '4': "shadow-4";
-        readonly '5': "shadow-5";
-        readonly '6': "shadow-6";
+        readonly xs: "rounded-surface-xs";
+        readonly sm: "rounded-surface-sm";
+        readonly md: "rounded-surface-md";
+        readonly lg: "rounded-surface-lg";
+        readonly full: "rounded-full";
     };
     width: {
         readonly auto: "";
@@ -324,78 +197,24 @@ declare const layoutBaseDefaults: {
     margin: string;
     marginX: string;
     marginY: string;
-    surface: string;
-    tone: string;
     radius: string;
-    elevation: string;
     width: string;
     height: string;
     align: string;
     justify: string;
 };
 declare const layoutTokens: readonly [{
-    readonly name: "--color-app";
-    readonly description: "Application background surface.";
-}, {
-    readonly name: "--color-chrome";
-    readonly description: "Application chrome surface.";
-}, {
-    readonly name: "--color-chrome-alpha";
-    readonly description: "Translucent application chrome surface.";
-}, {
-    readonly name: "--color-surface-subtle";
-    readonly description: "Quiet grouping surface.";
-}, {
-    readonly name: "--color-surface-panel";
-    readonly description: "Contained foreground surface.";
-}, {
-    readonly name: "--color-surface-panel-alpha";
-    readonly description: "Translucent contained foreground surface.";
-}, {
-    readonly name: "--color-surface-raised";
-    readonly description: "Inline surface lifted one layer above the current pane.";
-}, {
-    readonly name: "--color-surface-overlay";
-    readonly description: "Floating overlay surface.";
-}, {
-    readonly name: "--color-surface-overlay-alpha";
-    readonly description: "Translucent floating overlay surface.";
-}, {
-    readonly name: "--color-foreground";
-    readonly description: "Default surface foreground.";
-}, {
-    readonly name: "--color-surface-accent";
-    readonly description: "Accent surface background.";
-}, {
-    readonly name: "--color-surface-accent-fg";
-    readonly description: "Accent surface foreground.";
-}, {
-    readonly name: "--color-surface-inverse";
-    readonly description: "Inverse surface background.";
-}, {
-    readonly name: "--color-surface-inverse-fg";
-    readonly description: "Inverse surface foreground.";
-}, {
-    readonly name: "--shadow-border";
-    readonly description: "Tokenized edge-ring shadow.";
-}, {
-    readonly name: "--shadow-1";
-    readonly description: "Elevation step 1, aliased to the adaptive edge ring.";
-}, {
-    readonly name: "--shadow-2";
-    readonly description: "Elevation step 2.";
-}, {
-    readonly name: "--shadow-3";
-    readonly description: "Elevation step 3.";
+    readonly name: "--ui-surface-color";
+    readonly description: "Resolved generated surface background.";
 }, {
-    readonly name: "--shadow-4";
-    readonly description: "Elevation step 4.";
+    readonly name: "--ui-surface-ink";
+    readonly description: "Primary ink paired with the resolved surface.";
 }, {
-    readonly name: "--shadow-5";
-    readonly description: "Elevation step 5.";
+    readonly name: "--ui-surface-ink-muted";
+    readonly description: "Muted ink paired with the resolved surface.";
 }, {
-    readonly name: "--shadow-6";
-    readonly description: "Elevation step 6.";
+    readonly name: "--ui-active-elevation-shadow-layers";
+    readonly description: "Resolved generated elevation composition.";
 }];
 type LayoutAs = typeof LAYOUT_AS_VALUES[number];
 type LayoutWidth = typeof LAYOUT_WIDTHS[number];
@@ -404,5 +223,5 @@ type LayoutAlign = typeof LAYOUT_ALIGNS[number];
 type LayoutJustify = typeof LAYOUT_JUSTIFIES[number];
 type LayoutColumns = typeof LAYOUT_COLUMNS[number];
 type LayoutRows = typeof LAYOUT_ROWS[number];
-export { LAYOUT_ALIGNS, LAYOUT_ALIGN_CLASSES, LAYOUT_AS_VALUES, LAYOUT_COLUMN_CLASSES, LAYOUT_COLUMNS, LAYOUT_HEIGHTS, LAYOUT_HEIGHT_CLASSES, LAYOUT_JUSTIFIES, LAYOUT_JUSTIFY_CLASSES, LAYOUT_ROWS, LAYOUT_ROW_CLASSES, LAYOUT_WIDTHS, LAYOUT_WIDTH_CLASSES, layoutAlignmentDetails, layoutAlignmentSchema, layoutBaseDefaults, layoutBaseVariants, layoutSpacingDetails, layoutSpacingSchema, layoutSurfaceDetails, layoutSurfaceSchema, layoutTokens, SURFACE_ALPHA_COMPOUNDS, };
-export type { ComponentRadius, Elevation, LayoutAlign, LayoutAs, LayoutColumns, LayoutHeight, LayoutJustify, LayoutRows, LayoutSpace, LayoutWidth, Surface, SurfaceTone, };
+export { LAYOUT_ALIGNS, LAYOUT_ALIGN_CLASSES, LAYOUT_AS_VALUES, LAYOUT_COLUMN_CLASSES, LAYOUT_COLUMNS, LAYOUT_HEIGHTS, LAYOUT_HEIGHT_CLASSES, LAYOUT_JUSTIFIES, LAYOUT_JUSTIFY_CLASSES, LAYOUT_ROWS, LAYOUT_ROW_CLASSES, LAYOUT_WIDTHS, LAYOUT_WIDTH_CLASSES, layoutAlignmentDetails, layoutAlignmentSchema, layoutBaseDefaults, layoutBaseVariants, layoutSpacingDetails, layoutSpacingSchema, layoutSurfaceDetails, layoutSurfaceSchema, layoutTokens, };
+export type { ComponentRadius, ElevationReference as Elevation, LayoutAlign, LayoutAs, LayoutColumns, LayoutHeight, LayoutJustify, LayoutRows, LayoutSpace, LayoutWidth, SurfaceReference as Surface, };

package/packages/client/types/components/menu/contract.d.ts

@@ -1,19 +1,23 @@
-import { type PropState } from '../../runtime';
-import { BUTTON_TYPES, type CommonButtonType, type IconVariant } from '../common';
+import { type SchemaToProps } from '../../runtime';
+import { BUTTON_TYPES, type CommonButtonType, type ElevationReference, type IconVariant, type SurfaceReference } from '../common';
 declare const MENU_ITEM_VARIANTS: readonly ["default", "subtle", "filled", "ghost"];
 declare const MENU_ITEM_COLORS: readonly ["neutral", "accent", "success", "warning", "danger"];
 declare const MENU_ITEM_AS_VALUES: readonly ["button", "a"];
 declare const MENU_ICON_VARIANTS: readonly ["outline", "solid", "mini", "micro"];
+declare const MENU_SURFACES: readonly ["inherit", "0", "1", "2", "3", "4", "5", "6", "7", "8", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8"];
+declare const MENU_ELEVATIONS: readonly ["none", "match", "1", "2", "3", "4", "5", "6", "7", "8"];
 declare const menuSchema: {
     keepOpen: import("../../runtime/codecs").BoolCodec;
     loop: import("../../runtime/codecs").BoolCodec;
+    surface: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "inherit" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
+    elevation: import("../../runtime/codecs").OneOfCodec<"1" | "match" | "2" | "none" | "3" | "4" | "5" | "6" | "7" | "8">;
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const menuItemSchema: {
-    as: import("../../runtime/codecs").OneOfCodec<"button" | "a">;
+    as: import("../../runtime/codecs").OneOfCodec<"a" | "button">;
     variant: import("../../runtime/codecs").OneOfCodec<"default" | "filled" | "subtle" | "ghost">;
     color: import("../../runtime/codecs").OneOfCodec<"accent" | "danger" | "neutral" | "success" | "warning">;
-    type: import("../../runtime/codecs").OneOfCodec<"reset" | "submit" | "button">;
+    type: import("../../runtime/codecs").OneOfCodec<"button" | "submit" | "reset">;
     disabled: import("../../runtime/codecs").BoolCodec;
     keepOpen: import("../../runtime/codecs").BoolCodec;
     icon: import("../../runtime/codecs").StringCodec;
@@ -23,12 +27,14 @@ declare const menuItemSchema: {
     suffix: import("../../runtime/codecs").StringCodec;
     class: import("../../runtime/codecs").StringCodec;
 };
-type MenuProps = PropState<typeof menuSchema>;
-type MenuItemProps = PropState<typeof menuItemSchema>;
+type MenuProps = SchemaToProps<typeof menuSchema>;
+type MenuSurface = SurfaceReference;
+type MenuElevation = ElevationReference;
+type MenuItemProps = SchemaToProps<typeof menuItemSchema>;
 type MenuItemAs = typeof MENU_ITEM_AS_VALUES[number];
 type MenuItemType = CommonButtonType;
 type MenuItemVariant = typeof MENU_ITEM_VARIANTS[number];
 type MenuItemColor = typeof MENU_ITEM_COLORS[number];
 type MenuIconVariant = IconVariant;
-export { MENU_ICON_VARIANTS, MENU_ITEM_AS_VALUES, MENU_ITEM_COLORS, MENU_ITEM_VARIANTS, BUTTON_TYPES, menuItemSchema, menuSchema, };
-export type { MenuIconVariant, MenuItemAs, MenuItemColor, MenuItemProps, MenuItemType, MenuItemVariant, MenuProps };
+export { MENU_ICON_VARIANTS, MENU_ITEM_AS_VALUES, MENU_ITEM_COLORS, MENU_ITEM_VARIANTS, MENU_ELEVATIONS, MENU_SURFACES, BUTTON_TYPES, menuItemSchema, menuSchema, };
+export type { MenuElevation, MenuIconVariant, MenuItemAs, MenuItemColor, MenuItemProps, MenuItemType, MenuItemVariant, MenuProps, MenuSurface, };

package/packages/client/types/components/modal/contract.d.ts

@@ -1,25 +1,25 @@
-import { type PropState } from '../../runtime';
-import { type EdgePosition, type HeadingLevel, type SurfaceTone } from '../common';
+import { type PropState, type SchemaToProps } from '../../runtime';
+import { type EdgePosition, type ElevationReference, type HeadingLevel, type SurfaceReference } from '../common';
 declare const MODAL_MODES: readonly ["modal", "sheet"];
 declare const MODAL_SIDES: readonly ["top", "right", "bottom", "left"];
 declare const MODAL_SIZES: readonly ["sm", "md", "lg", "xl", "full"];
-declare const MODAL_SURFACES: readonly ["overlay", "panel", "inverse"];
-declare const MODAL_TONES: readonly ["solid", "alpha"];
+declare const MODAL_SURFACES: readonly ["inherit", "0", "1", "2", "3", "4", "5", "6", "7", "8", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8"];
+declare const MODAL_ELEVATIONS: readonly ["none", "match", "1", "2", "3", "4", "5", "6", "7", "8"];
 declare const MODAL_TITLE_AS_VALUES: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 type ModalMode = typeof MODAL_MODES[number];
 type ModalSide = EdgePosition;
 type ModalSize = typeof MODAL_SIZES[number];
-type ModalSurface = typeof MODAL_SURFACES[number];
-type ModalTone = SurfaceTone;
+type ModalSurface = SurfaceReference;
+type ModalElevation = ElevationReference;
 type ModalTitleAs = HeadingLevel;
 declare const modalSchema: {
     name: import("../../runtime/codecs").StringCodec;
     open: import("../../runtime/codecs").BoolCodec;
     mode: import("../../runtime/codecs").OneOfCodec<"modal" | "sheet">;
-    side: import("../../runtime/codecs").OneOfCodec<"bottom" | "left" | "right" | "top">;
+    side: import("../../runtime/codecs").OneOfCodec<"top" | "bottom" | "left" | "right">;
     size: import("../../runtime/codecs").OneOfCodec<"sm" | "md" | "lg" | "full" | "xl">;
-    surface: import("../../runtime/codecs").OneOfCodec<"panel" | "overlay" | "inverse">;
-    tone: import("../../runtime/codecs").OneOfCodec<"solid" | "alpha">;
+    surface: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "inherit" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
+    elevation: import("../../runtime/codecs").OneOfCodec<"1" | "match" | "2" | "none" | "3" | "4" | "5" | "6" | "7" | "8">;
     dismissible: import("../../runtime/codecs").BoolCodec;
     closable: import("../../runtime/codecs").BoolCodec;
     disabled: import("../../runtime/codecs").BoolCodec;
@@ -56,7 +56,7 @@ declare const modalCloseSchema: {
     label: import("../../runtime/codecs").StringCodec;
     class: import("../../runtime/codecs").StringCodec;
 };
-type ModalProps = PropState<typeof modalSchema>;
+type ModalProps = SchemaToProps<typeof modalSchema>;
 type ModalTriggerProps = PropState<typeof modalTriggerSchema>;
-export { MODAL_SIDES, MODAL_SIZES, MODAL_SURFACES, MODAL_TONES, MODAL_TITLE_AS_VALUES, MODAL_MODES, modalBodySchema, modalCloseSchema, modalDescriptionSchema, modalFooterSchema, modalOutletSchema, modalSchema, modalTitleSchema, modalTriggerSchema, };
-export type { ModalSide, ModalProps, ModalSize, ModalSurface, ModalTone, ModalTitleAs, ModalTriggerProps, ModalMode, };
+export { MODAL_SIDES, MODAL_SIZES, MODAL_ELEVATIONS, MODAL_SURFACES, MODAL_TITLE_AS_VALUES, MODAL_MODES, modalBodySchema, modalCloseSchema, modalDescriptionSchema, modalFooterSchema, modalOutletSchema, modalSchema, modalTitleSchema, modalTriggerSchema, };
+export type { ModalSide, ModalProps, ModalSize, ModalSurface, ModalElevation, ModalTitleAs, ModalTriggerProps, ModalMode, };

package/packages/client/types/components/modal/index.d.ts

@@ -1,88 +1,54 @@
 import type Alpine from 'alpinejs';
-import { type BindingObject, type CleanupStack, type Machine, type TrellisAlpineComponent } from '../../runtime';
-import type { PresenceLifecycle } from '../../motion';
-import { type ModalProps, type ModalTriggerProps } from './contract';
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
+import { type BindingObject } from '../../runtime/merge-bindings';
+import { type ModalProps } from './contract';
+import { modalHooks, type ModalContext } from './machine';
 type CancelReason = 'escape' | 'outside';
 type ModalCancelDetail = {
     reason: CancelReason;
 };
-type ModalController = {
-    readonly name: string;
+/**
+ * Public Alpine API for `ui.modal`.
+ *
+ * @public
+ */
+interface UiModalApi {
+    /** Whether the modal has completed its opening transition. */
     readonly isOpen: boolean;
-    readonly dialogId: string;
-    openFrom(trigger: HTMLElement): void;
-    close(event?: Event): void;
-    syncExternalTrigger(trigger: HTMLElement, disabled: boolean): void;
-};
-type ModalTriggerController = {
-    readonly name: string;
-    readonly target: HTMLElement;
-    sync(): void;
-};
-type ModalData = ModalController & {
-    props: ModalProps;
-    readonly isOpen: boolean;
-    machine: Machine<Record<string, never>>;
-    dialogId: string;
-    activeTrigger: HTMLElement | null;
-    cleanup: CleanupStack;
-    localTriggerCleanup: CleanupStack;
-    isRegistered: boolean;
-    didShowModal: boolean;
-    hasScrollLock: boolean;
-    modalMotionRun: number;
-    overlayMotion: PresenceLifecycle | null;
-    panelMotion: PresenceLifecycle | null;
-    root: BindingObject;
-    dialogEl(): HTMLDialogElement;
-    viewportEl(): HTMLElement;
-    overlayEl(): HTMLElement;
-    panelEl(): HTMLElement;
-    titleEl(): HTMLElement | null;
-    descriptionEl(): HTMLElement | null;
-    closeEls(): HTMLElement[];
-    localTriggerEl(): HTMLElement | null;
-    triggerTarget(trigger: HTMLElement): HTMLElement;
-    focusableEls(): HTMLElement[];
-    firstAutofocusEl(): HTMLElement | null;
-    mountLocalTrigger(): void;
-    setupLocalTrigger(trigger: HTMLElement): void;
-    setupDialog(): void;
-    setupNamedClose(): void;
-    register(): void;
-    unregister(): void;
+    /** Whether the modal is opening, open, or closing. */
+    readonly isVisible: boolean;
+    /** Opens the modal unless it is disabled. */
     open(event?: Event): void;
-    openFrom(trigger: HTMLElement): void;
+    /** Closes the modal. */
     close(event?: Event): void;
-    cancel(reason: CancelReason, event?: Event): void;
-    applyProps(changedKeys?: string[]): void;
-    syncExternalTrigger(trigger: HTMLElement, disabled: boolean): void;
-    syncAll(): void;
-    syncDialog(): void;
-    syncLocalTrigger(): void;
-    syncNamedTriggers(): void;
-    applyOpenState(): void;
-    applyClosedState(): void;
-    finishClosedState(run: number): void;
-    focusInitial(): void;
-    restoreFocus(): void;
-    handleKeydown(event: KeyboardEvent): void;
-    trapFocus(event: KeyboardEvent): void;
-    teardownLocalTrigger(): void;
-    teardown(): void;
-};
-type ModalTriggerData = ModalTriggerController & {
-    props: ModalTriggerProps;
-    target: HTMLElement;
-    cleanup: CleanupStack;
-    root: BindingObject;
-    sync(): void;
-    modal(): ModalController | null;
+}
+/**
+ * Public Alpine API for `ui.modal.trigger`.
+ *
+ * @public
+ */
+interface UiModalTriggerApi {
+    /** Opens the named modal unless the trigger or modal is disabled. */
     open(event?: Event): void;
-    targetEl(): HTMLElement;
+}
+type ModalData = AlpineMachine<ModalContext, ModalProps, typeof modalHooks> & UiModalApi & {
+    readonly name: string;
+    readonly dialogId: string;
+    readonly root: BindingObject;
+    readonly dialog: BindingObject;
+    readonly viewport: BindingObject;
+    readonly overlay: BindingObject;
+    readonly panel: BindingObject;
+    init(): void;
+    destroy(): void;
+};
+type ModalTriggerData = UiModalTriggerApi & {
+    readonly root: BindingObject;
+    init(): void;
+    destroy(): void;
 };
 declare const UiModal: () => TrellisAlpineComponent<ModalData>;
 declare const UiModalTrigger: () => TrellisAlpineComponent<ModalTriggerData>;
 declare const registerModal: (AlpineInstance: Alpine.Alpine) => void;
-export { registerModal, UiModal, UiModalTrigger, };
-export type { ModalCancelDetail, ModalData, ModalTriggerData };
+export { registerModal, UiModal, UiModalTrigger };
+export type { ModalCancelDetail, UiModalApi, UiModalTriggerApi };