@vireo-ai/trellis-ui 0.1.8 → 0.1.10

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

@@ -1,11 +1,10 @@
-import { type PropState } from '../../runtime';
-import { type Elevation, type LayoutSpace, type Surface, type SurfaceTone } from '../common';
+import { type SchemaToProps } from '../../runtime';
+import { type ElevationReference, type LayoutSpace, type SurfaceReference } from '../common';
 declare const CARD_AS_VALUES: readonly ["div", "section", "article", "aside", "label"];
-declare const CARD_SURFACES: readonly ["none", "app", "chrome", "subtle", "panel", "raised", "overlay", "accent", "inverse"];
-declare const CARD_TONES: readonly ["solid", "alpha"];
-declare const CARD_ELEVATIONS: readonly ["none", "1", "2", "3", "4", "5", "6"];
+declare const CARD_SURFACES: readonly ["inherit", "0", "1", "2", "3", "4", "5", "6", "7", "8", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8"];
+declare const CARD_ELEVATIONS: readonly ["none", "match", "1", "2", "3", "4", "5", "6", "7", "8"];
 declare const CARD_SIZES: readonly ["sm", "md"];
-declare const CARD_SPACES: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+declare const CARD_SPACES: readonly ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "8.5", "9", "9.5", "10", "10.5", "11", "11.5", "12"];
 declare const CARD_TITLE_AS_VALUES: readonly ["h2", "h3", "h4", "div"];
 declare const CARD_FOOTER_LAYOUTS: readonly ["row", "stack"];
 declare const CARD_FOOTER_ALIGNS: readonly ["start", "end", "between", "stretch"];
@@ -14,19 +13,18 @@ declare const cardSchema: {
     href: import("../../runtime/codecs").StringCodec;
     label: import("../../runtime/codecs").StringCodec;
     interactive: import("../../runtime/codecs").BoolCodec;
-    surface: import("../../runtime/codecs").OneOfCodec<"none" | "subtle" | "accent" | "app" | "chrome" | "panel" | "raised" | "overlay" | "inverse">;
-    tone: import("../../runtime/codecs").OneOfCodec<"solid" | "alpha">;
-    elevation: import("../../runtime/codecs").OneOfCodec<"1" | "none" | "2" | "3" | "4" | "5" | "6">;
+    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">;
     size: import("../../runtime/codecs").OneOfCodec<"sm" | "md">;
-    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">;
-    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">;
-    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">;
+    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">;
+    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">;
+    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">;
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const cardHeaderSchema: {
@@ -47,24 +45,23 @@ declare const cardContentSchema: {
 };
 declare const cardFooterSchema: {
     layout: import("../../runtime/codecs").OneOfCodec<"stack" | "row">;
-    align: import("../../runtime/codecs").OneOfCodec<"end" | "start" | "stretch" | "between">;
+    align: import("../../runtime/codecs").OneOfCodec<"start" | "end" | "stretch" | "between">;
     class: import("../../runtime/codecs").StringCodec;
 };
 type CardAs = typeof CARD_AS_VALUES[number];
-type CardSurface = Surface;
-type CardTone = SurfaceTone;
-type CardElevation = Elevation;
+type CardSurface = SurfaceReference;
+type CardElevation = ElevationReference;
 type CardSize = typeof CARD_SIZES[number];
 type CardSpace = LayoutSpace;
 type CardTitleAs = typeof CARD_TITLE_AS_VALUES[number];
 type CardFooterLayout = typeof CARD_FOOTER_LAYOUTS[number];
 type CardFooterAlign = typeof CARD_FOOTER_ALIGNS[number];
-type CardProps = PropState<typeof cardSchema>;
-type CardHeaderProps = PropState<typeof cardHeaderSchema>;
-type CardTitleProps = PropState<typeof cardTitleSchema>;
-type CardDescriptionProps = PropState<typeof cardDescriptionSchema>;
-type CardActionProps = PropState<typeof cardActionSchema>;
-type CardContentProps = PropState<typeof cardContentSchema>;
-type CardFooterProps = PropState<typeof cardFooterSchema>;
-export { CARD_AS_VALUES, CARD_ELEVATIONS, CARD_FOOTER_ALIGNS, CARD_FOOTER_LAYOUTS, CARD_SIZES, CARD_SPACES, CARD_SURFACES, CARD_TONES, CARD_TITLE_AS_VALUES, cardActionSchema, cardContentSchema, cardDescriptionSchema, cardFooterSchema, cardHeaderSchema, cardSchema, cardTitleSchema, };
-export type { CardActionProps, CardAs, CardContentProps, CardDescriptionProps, CardElevation, CardFooterAlign, CardFooterLayout, CardFooterProps, CardHeaderProps, CardProps, CardSize, CardSpace, CardSurface, CardTitleAs, CardTitleProps, CardTone, };
+type CardProps = SchemaToProps<typeof cardSchema>;
+type CardHeaderProps = SchemaToProps<typeof cardHeaderSchema>;
+type CardTitleProps = SchemaToProps<typeof cardTitleSchema>;
+type CardDescriptionProps = SchemaToProps<typeof cardDescriptionSchema>;
+type CardActionProps = SchemaToProps<typeof cardActionSchema>;
+type CardContentProps = SchemaToProps<typeof cardContentSchema>;
+type CardFooterProps = SchemaToProps<typeof cardFooterSchema>;
+export { CARD_AS_VALUES, CARD_ELEVATIONS, CARD_FOOTER_ALIGNS, CARD_FOOTER_LAYOUTS, CARD_SIZES, CARD_SPACES, CARD_SURFACES, CARD_TITLE_AS_VALUES, cardActionSchema, cardContentSchema, cardDescriptionSchema, cardFooterSchema, cardHeaderSchema, cardSchema, cardTitleSchema, };
+export type { CardActionProps, CardAs, CardContentProps, CardDescriptionProps, CardElevation, CardFooterAlign, CardFooterLayout, CardFooterProps, CardHeaderProps, CardProps, CardSize, CardSpace, CardSurface, CardTitleAs, CardTitleProps, };

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

@@ -1,4 +1,4 @@
-import { type PropState } from '../../runtime';
+import { type SchemaToProps } from '../../runtime';
 import { type ControlSize, type DefaultVariant, type IndicatorPlacement, type Orientation } from '../common';
 declare const CHECKBOX_GROUP_ORIENTATIONS: readonly ["vertical", "horizontal"];
 declare const CHECKBOX_GROUP_VARIANTS: readonly ["default"];
@@ -15,11 +15,11 @@ declare const checkboxControlSchema: {
     name: import("../../runtime/codecs").StringCodec;
     label: import("../../runtime/codecs").StringCodec;
     description: import("../../runtime/codecs").StringCodec;
-    checked: import("../../runtime/codecs").BoolCodec;
-    indeterminate: import("../../runtime/codecs").BoolCodec;
-    disabled: import("../../runtime/codecs").BoolCodec;
-    required: import("../../runtime/codecs").BoolCodec;
-    invalid: import("../../runtime/codecs").BoolCodec;
+    checked: import("../..").CodecFn<boolean>;
+    indeterminate: import("../..").CodecFn<boolean>;
+    disabled: import("../..").CodecFn<boolean>;
+    required: import("../..").CodecFn<boolean>;
+    invalid: import("../..").CodecFn<boolean>;
     indicator: import("../../runtime/codecs").BoolCodec;
     placement: import("../../runtime/codecs").OneOfCodec<"center" | "leading" | "trailing" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing">;
     icon: import("../../runtime/codecs").StringCodec;
@@ -44,11 +44,11 @@ declare const checkboxSchema: {
     fieldClass: import("../../runtime/codecs").StringCodec;
     value: import("../../runtime/codecs").StringCodec;
     name: import("../../runtime/codecs").StringCodec;
-    checked: import("../../runtime/codecs").BoolCodec;
-    indeterminate: import("../../runtime/codecs").BoolCodec;
-    disabled: import("../../runtime/codecs").BoolCodec;
-    required: import("../../runtime/codecs").BoolCodec;
-    invalid: import("../../runtime/codecs").BoolCodec;
+    checked: import("../..").CodecFn<boolean>;
+    indeterminate: import("../..").CodecFn<boolean>;
+    disabled: import("../..").CodecFn<boolean>;
+    required: import("../..").CodecFn<boolean>;
+    invalid: import("../..").CodecFn<boolean>;
     indicator: import("../../runtime/codecs").BoolCodec;
     placement: import("../../runtime/codecs").OneOfCodec<"center" | "leading" | "trailing" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing">;
     icon: import("../../runtime/codecs").StringCodec;
@@ -69,17 +69,17 @@ declare const checkboxGroupSchema: {
     variant: import("../../runtime/codecs").OneOfCodec<"default">;
     indicator: import("../../runtime/codecs").BoolCodec;
     placement: import("../../runtime/codecs").OneOfCodec<"center" | "leading" | "trailing" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing">;
-    disabled: import("../../runtime/codecs").BoolCodec;
-    required: import("../../runtime/codecs").BoolCodec;
-    invalid: import("../../runtime/codecs").BoolCodec;
+    disabled: import("../..").CodecFn<boolean>;
+    required: import("../..").CodecFn<boolean>;
+    invalid: import("../..").CodecFn<boolean>;
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const checkboxIndicatorSchema: {
     size: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "xlg">;
     class: import("../../runtime/codecs").StringCodec;
 };
-type CheckboxControlProps = PropState<typeof checkboxControlSchema>;
-type CheckboxGroupProps = PropState<typeof checkboxGroupSchema>;
-type CheckboxProps = PropState<typeof checkboxSchema>;
+type CheckboxControlProps = SchemaToProps<typeof checkboxControlSchema>;
+type CheckboxGroupProps = SchemaToProps<typeof checkboxGroupSchema>;
+type CheckboxProps = SchemaToProps<typeof checkboxSchema>;
 export { CHECKBOX_GROUP_ORIENTATIONS, CHECKBOX_GROUP_VARIANTS, CHECKBOX_PLACEMENTS, CHECKBOX_SIZES, CHECKBOX_VARIANTS, checkboxControlSchema, checkboxGroupSchema, checkboxIndicatorSchema, checkboxSchema, };
 export type { CheckboxControlProps, CheckboxGroupOrientation, CheckboxGroupProps, CheckboxGroupVariant, CheckboxPlacement, CheckboxProps, CheckboxSize, CheckboxVariant, };

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

@@ -1,34 +1,28 @@
 import type Alpine from 'alpinejs';
-import { type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
+import { type AlpineMachine, type TrellisAlpineComponent } from '../../runtime';
 import { type CheckboxControlProps, type CheckboxGroupProps } from './contract';
-type CheckboxItem = {
-    root: HTMLElement;
-    input: HTMLInputElement;
-    indicator: HTMLElement | null;
-    checkedIcon: HTMLElement | null;
-    indeterminateIcon: HTMLElement | null;
-    name: string;
-    disabled: boolean;
-    required: boolean;
-    invalid: boolean;
+import { checkboxGroupHooks, checkboxHooks, type CheckboxContext, type CheckboxGroupContext, type CheckboxState } from './machine';
+/**
+ * Public Alpine API for `ui.checkbox` and `ui.checkbox.control`.
+ *
+ * @public
+ */
+interface UiCheckboxApi {
+    /** Current semantic checkbox state. */
+    readonly state: CheckboxState;
+    /** Set and commit the semantic checkbox state. */
+    setState(state: CheckboxState): void;
+}
+type CheckboxData = AlpineMachine<CheckboxContext, CheckboxControlProps, typeof checkboxHooks> & UiCheckboxApi & {
+    init(): void;
+    destroy(): void;
 };
-type CheckboxData = {
-    props: CheckboxControlProps;
-    listeners: CleanupStack;
-    input(): HTMLInputElement;
-    item(): CheckboxItem;
-    sync(): void;
-};
-type CheckboxGroupData = {
-    props: CheckboxGroupProps;
-    listeners: CleanupStack;
-    observer: MutationObserver | null;
-    items(): CheckboxItem[];
-    sync(): void;
-    syncItem(item: CheckboxItem): void;
+type CheckboxGroupData = AlpineMachine<CheckboxGroupContext, CheckboxGroupProps, typeof checkboxGroupHooks> & {
+    init(): void;
+    destroy(): void;
 };
 declare const UiCheckbox: () => TrellisAlpineComponent<CheckboxData>;
 declare const UiCheckboxGroup: () => TrellisAlpineComponent<CheckboxGroupData>;
 declare const registerCheckbox: (AlpineInstance: Alpine.Alpine) => void;
 export { registerCheckbox, UiCheckbox, UiCheckboxGroup };
-export type { CheckboxData, CheckboxGroupData, CheckboxItem };
+export type { CheckboxData, CheckboxGroupData, CheckboxState, UiCheckboxApi };

package/packages/client/types/components/checkbox/machine.d.ts

@@ -0,0 +1,41 @@
+import { type Machine, type MachineScope } from '../../runtime/state-machine';
+import type { CheckboxControlProps, CheckboxGroupProps } from './contract';
+type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';
+type CheckboxInheritance = {
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+};
+type CheckboxContext = {
+    selection: {
+        state: CheckboxState;
+    };
+    inherited: CheckboxInheritance;
+};
+type CheckboxGroupContext = {
+    inherited: CheckboxInheritance;
+};
+type CheckboxMachineEffects = {
+    sync(scope: MachineScope<CheckboxContext, CheckboxControlProps>): void;
+    emitInput(scope: MachineScope<CheckboxContext, CheckboxControlProps>): void;
+    emitChange(scope: MachineScope<CheckboxContext, CheckboxControlProps>): void;
+};
+type CheckboxGroupMachineEffects = {
+    sync(scope: MachineScope<CheckboxGroupContext, CheckboxGroupProps>): void;
+};
+declare const checkboxHooks: readonly [];
+declare const checkboxGroupHooks: readonly [];
+declare const EMPTY_INHERITANCE: CheckboxInheritance;
+declare const checkboxStateFromProps: (props: CheckboxControlProps) => CheckboxState;
+declare const createCheckboxMachine: ({ props, inherited, effects, }: {
+    props: CheckboxControlProps;
+    inherited?: CheckboxInheritance;
+    effects: CheckboxMachineEffects;
+}) => Machine<CheckboxContext, CheckboxControlProps>;
+declare const createCheckboxGroupMachine: ({ props, effects, }: {
+    props: CheckboxGroupProps;
+    effects: CheckboxGroupMachineEffects;
+}) => Machine<CheckboxGroupContext, CheckboxGroupProps>;
+export { checkboxGroupHooks, checkboxHooks, checkboxStateFromProps, createCheckboxGroupMachine, createCheckboxMachine, EMPTY_INHERITANCE, };
+export type { CheckboxContext, CheckboxGroupContext, CheckboxGroupMachineEffects, CheckboxInheritance, CheckboxMachineEffects, CheckboxState, };

package/packages/client/types/components/checkbox/runtime-docs.d.ts

@@ -0,0 +1,2 @@
+declare const checkboxRuntimeDocs: import("../../docs/transition-docs").ComponentTransitionDocs;
+export { checkboxRuntimeDocs };

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

@@ -15,239 +15,60 @@ type TypographyColor = typeof TYPOGRAPHY_COLORS[number];
 type IconColor = typeof ICON_COLORS[number];
 declare const TYPOGRAPHY_COLOR_CLASSES: {
     readonly inherit: "text-inherit";
-    readonly muted: "text-foreground-muted";
-    readonly subtle: "text-foreground-subtle";
-    readonly accent: "text-accent-text";
-    readonly danger: "text-danger-text";
+    readonly muted: "text-surface-ink-muted";
+    readonly subtle: "text-surface-ink-muted";
+    readonly accent: "text-intent-accent-text";
+    readonly danger: "text-intent-danger-text";
 };
 declare const ICON_COLOR_CLASSES: {
     readonly inherit: "text-current";
-    readonly muted: "text-foreground-muted";
-    readonly subtle: "text-foreground-subtle";
-    readonly accent: "text-accent-text";
-    readonly danger: "text-danger-text";
+    readonly muted: "text-surface-ink-muted";
+    readonly subtle: "text-surface-ink-muted";
+    readonly accent: "text-intent-accent-text";
+    readonly danger: "text-intent-danger-text";
 };
-declare const LAYOUT_SPACES: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+declare const LAYOUT_SPACES: readonly ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "8.5", "9", "9.5", "10", "10.5", "11", "11.5", "12"];
 type LayoutSpace = typeof LAYOUT_SPACES[number];
-declare const LAYOUT_GAP_CLASSES: {
-    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";
-};
-declare const LAYOUT_GAP_X_CLASSES: {
-    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";
-};
-declare const LAYOUT_GAP_Y_CLASSES: {
-    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";
-};
-declare const LAYOUT_PADDING_CLASSES: {
-    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";
-};
-declare const LAYOUT_PADDING_X_CLASSES: {
-    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";
-};
-declare const LAYOUT_PADDING_Y_CLASSES: {
-    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";
-};
-declare const LAYOUT_MARGIN_CLASSES: {
-    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";
-};
-declare const LAYOUT_MARGIN_X_CLASSES: {
-    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";
-};
-declare const LAYOUT_MARGIN_Y_CLASSES: {
-    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";
-};
+declare const LAYOUT_GAP_CLASSES: 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>;
+declare const LAYOUT_GAP_X_CLASSES: 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>;
+declare const LAYOUT_GAP_Y_CLASSES: 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>;
+declare const LAYOUT_PADDING_CLASSES: 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>;
+declare const LAYOUT_PADDING_X_CLASSES: 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>;
+declare const LAYOUT_PADDING_Y_CLASSES: 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>;
+declare const LAYOUT_MARGIN_CLASSES: 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>;
+declare const LAYOUT_MARGIN_X_CLASSES: 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>;
+declare const LAYOUT_MARGIN_Y_CLASSES: 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>;
 declare const COMPONENT_RADII: readonly ["none", "xs", "sm", "md", "lg", "full"];
-declare const SURFACES: readonly ["none", "app", "chrome", "subtle", "panel", "raised", "overlay", "accent", "inverse"];
-declare const SURFACE_TONES: readonly ["solid", "alpha"];
-declare const ELEVATIONS: readonly ["none", "1", "2", "3", "4", "5", "6"];
-type Surface = typeof SURFACES[number];
-type SurfaceTone = typeof SURFACE_TONES[number];
-type Elevation = typeof ELEVATIONS[number];
-declare const SURFACE_CLASSES: {
-    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";
-};
-declare const SURFACE_TONE_CLASSES: {
-    readonly solid: "";
-    readonly alpha: "";
-};
-declare const SURFACE_ALPHA_COMPOUNDS: readonly [{
-    readonly when: {
-        readonly surface: "chrome";
-        readonly tone: "alpha";
-    };
-    readonly class: "bg-chrome-alpha";
-}, {
-    readonly when: {
-        readonly surface: "panel";
-        readonly tone: "alpha";
-    };
-    readonly class: "bg-surface-panel-alpha";
-}, {
-    readonly when: {
-        readonly surface: "overlay";
-        readonly tone: "alpha";
-    };
-    readonly class: "bg-surface-overlay-alpha";
-}];
+declare const ABSOLUTE_SURFACE_REFERENCES: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
+declare const SURFACE_REFERENCES: readonly ["inherit", "0", "1", "2", "3", "4", "5", "6", "7", "8", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8"];
+declare const ELEVATION_REFERENCES: readonly ["none", "match", "1", "2", "3", "4", "5", "6", "7", "8"];
+type SurfaceReference = typeof SURFACE_REFERENCES[number];
+type AbsoluteSurfaceReference = typeof ABSOLUTE_SURFACE_REFERENCES[number];
+type ElevationReference = typeof ELEVATION_REFERENCES[number];
+declare const elevationReferenceClasses: (property: `--${string}`) => Record<ElevationReference, string>;
 declare const SURFACE_RADIUS_CLASSES: {
     readonly none: "";
-    readonly xs: "rounded-1";
-    readonly sm: "rounded-2";
-    readonly md: "rounded-3";
-    readonly lg: "rounded-4";
-    readonly full: "rounded-6";
-};
-declare const ELEVATION_CLASSES: {
-    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";
 };
-declare const CONTROL_RADIUS_BY_SIZE: {
-    readonly xs: {
-        readonly none: "";
-        readonly xs: "rounded-1";
-        readonly sm: "rounded-1";
-        readonly md: "rounded-2";
-        readonly lg: "rounded-3";
-        readonly full: "rounded-full";
-    };
-    readonly sm: {
-        readonly none: "";
-        readonly xs: "rounded-1";
-        readonly sm: "rounded-2";
-        readonly md: "rounded-2";
-        readonly lg: "rounded-3";
-        readonly full: "rounded-full";
-    };
-    readonly md: {
-        readonly none: "";
-        readonly xs: "rounded-1";
-        readonly sm: "rounded-2";
-        readonly md: "rounded-3";
-        readonly lg: "rounded-4";
-        readonly full: "rounded-full";
-    };
-    readonly lg: {
-        readonly none: "";
-        readonly xs: "rounded-2";
-        readonly sm: "rounded-3";
-        readonly md: "rounded-4";
-        readonly lg: "rounded-5";
-        readonly full: "rounded-full";
-    };
-    readonly xlg: {
-        readonly none: "";
-        readonly xs: "rounded-2";
-        readonly sm: "rounded-3";
-        readonly md: "rounded-4";
-        readonly lg: "rounded-5";
-        readonly full: "rounded-full";
-    };
-};
-type ControlRadiusCompound = {
-    when: {
-        size: typeof CONTROL_SIZES[number];
-        radius: typeof COMPONENT_RADII[number];
-    };
-    class: string;
+declare const CONTROL_RADIUS_CLASSES: {
+    readonly none: "";
+    readonly xs: "rounded-control-xs";
+    readonly sm: "rounded-control-sm";
+    readonly md: "rounded-control-md";
+    readonly lg: "rounded-control-lg";
+    readonly full: "rounded-full";
+};
+declare const CONTROL_TYPOGRAPHY_CLASSES: {
+    readonly xs: "font-control text-control-xs [font-weight:var(--font-weight-control-xs)]";
+    readonly sm: "font-control text-control-sm [font-weight:var(--font-weight-control-sm)]";
+    readonly md: "font-control text-control-md [font-weight:var(--font-weight-control-md)]";
+    readonly lg: "font-control text-control-lg [font-weight:var(--font-weight-control-lg)]";
+    readonly xlg: "font-control text-control-xlg [font-weight:var(--font-weight-control-xlg)]";
 };
-declare const CONTROL_RADIUS_COMPOUNDS: ControlRadiusCompound[];
-declare const CONTROL_ROOT_CLASSES: string[];
-declare const CONTROL_MULTILINE_ROOT_CLASSES: string[];
-declare const CONTROL_OPEN_CLASSES: string[];
 declare const CONTROL_SIZE_CLASSES: {
     xs: string;
     sm: string;
@@ -269,17 +90,14 @@ declare const CONTROL_MULTILINE_SIZE_CLASSES: {
     lg: string;
     xlg: string;
 };
-declare const CONTROL_VARIANT_CLASSES: {
-    outline: string;
-    filled: string;
-};
-declare const CONTROL_INPUT_CLASSES: string[];
-declare const CONTROL_ACTION_CLASSES: string[];
-declare const CONTROL_NATIVE_CLASSES: string[];
-declare const POPOVER_SURFACE_CLASSES: string[];
+declare const FIELD_CONTROL_ROOT_CLASSES: string[];
+declare const FIELD_CONTROL_MULTILINE_ROOT_CLASSES: string[];
+declare const FIELD_CONTROL_INPUT_CLASSES: string[];
+declare const FIELD_CONTROL_ACTION_CLASSES: string[];
+declare const FIELD_CONTROL_NATIVE_CLASSES: string[];
+declare const POPOVER_GEOMETRY_CLASSES: string[];
 declare const INTERACTIVE_ITEM_CLASSES: string[];
-declare const INTERACTIVE_SURFACE_CLASSES: string[];
-declare const OPTION_ITEM_CLASSES: (string | string[])[];
+declare const OPTION_ITEM_CLASSES: string[];
 declare const OPTION_ICON_CLASSES = "size-icon shrink-0 fill-current text-current opacity-70";
 declare const OPTION_INDICATOR_CLASSES = "ml-auto size-icon shrink-0 fill-current text-current opacity-0 data-selected:opacity-100";
 type ControlSize = typeof CONTROL_SIZES[number];
@@ -294,5 +112,5 @@ type IndicatorPlacement = typeof INDICATOR_PLACEMENTS[number];
 type DefaultVariant = typeof DEFAULT_VARIANTS[number];
 type HeadingLevel = typeof HEADING_LEVELS[number];
 type ComponentRadius = typeof COMPONENT_RADII[number];
-export { ALIGNMENTS, BUTTON_TYPES, COMPONENT_RADII, CONTROL_RADIUS_BY_SIZE, CONTROL_RADIUS_COMPOUNDS, CONTROL_ACTION_CLASSES, CONTROL_INPUT_CLASSES, CONTROL_MIN_SIZE_CLASSES, CONTROL_MULTILINE_ROOT_CLASSES, CONTROL_MULTILINE_SIZE_CLASSES, CONTROL_NATIVE_CLASSES, CONTROL_OPEN_CLASSES, CONTROL_ROOT_CLASSES, CONTROL_SIZES, CONTROL_SIZE_CLASSES, CONTROL_VARIANT_CLASSES, CONTROL_VARIANTS, DEFAULT_VARIANTS, EDGE_POSITIONS, ELEVATION_CLASSES, ELEVATIONS, HEADING_LEVELS, ICON_COLORS, ICON_COLOR_CLASSES, ICON_VARIANTS, INDICATOR_PLACEMENTS, INTERACTIVE_ITEM_CLASSES, INTERACTIVE_SURFACE_CLASSES, LAYOUT_GAP_CLASSES, LAYOUT_GAP_X_CLASSES, LAYOUT_GAP_Y_CLASSES, LAYOUT_MARGIN_CLASSES, LAYOUT_MARGIN_X_CLASSES, LAYOUT_MARGIN_Y_CLASSES, LAYOUT_PADDING_CLASSES, LAYOUT_PADDING_X_CLASSES, LAYOUT_PADDING_Y_CLASSES, LAYOUT_SPACES, OPTION_ICON_CLASSES, OPTION_INDICATOR_CLASSES, OPTION_ITEM_CLASSES, ORIENTATIONS, POPOVER_SURFACE_CLASSES, POSITIONS, SURFACE_ALPHA_COMPOUNDS, SURFACE_CLASSES, SURFACE_RADIUS_CLASSES, SURFACE_TONE_CLASSES, SURFACE_TONES, SURFACES, TYPOGRAPHY_COLOR_CLASSES, TYPOGRAPHY_COLORS, };
-export type { Alignment, CommonButtonType, ComponentRadius, ControlSize, ControlVariant, DefaultVariant, EdgePosition, HeadingLevel, IconColor, IconVariant, IndicatorPlacement, LayoutSpace, Orientation, Position, Surface, SurfaceTone, Elevation, TypographyColor, };
+export { ABSOLUTE_SURFACE_REFERENCES, ALIGNMENTS, BUTTON_TYPES, COMPONENT_RADII, CONTROL_RADIUS_CLASSES, CONTROL_MIN_SIZE_CLASSES, CONTROL_MULTILINE_SIZE_CLASSES, CONTROL_SIZES, CONTROL_SIZE_CLASSES, CONTROL_TYPOGRAPHY_CLASSES, CONTROL_VARIANTS, DEFAULT_VARIANTS, EDGE_POSITIONS, ELEVATION_REFERENCES, FIELD_CONTROL_ACTION_CLASSES, FIELD_CONTROL_INPUT_CLASSES, FIELD_CONTROL_MULTILINE_ROOT_CLASSES, FIELD_CONTROL_NATIVE_CLASSES, FIELD_CONTROL_ROOT_CLASSES, elevationReferenceClasses, HEADING_LEVELS, ICON_COLORS, ICON_COLOR_CLASSES, ICON_VARIANTS, INDICATOR_PLACEMENTS, INTERACTIVE_ITEM_CLASSES, LAYOUT_GAP_CLASSES, LAYOUT_GAP_X_CLASSES, LAYOUT_GAP_Y_CLASSES, LAYOUT_MARGIN_CLASSES, LAYOUT_MARGIN_X_CLASSES, LAYOUT_MARGIN_Y_CLASSES, LAYOUT_PADDING_CLASSES, LAYOUT_PADDING_X_CLASSES, LAYOUT_PADDING_Y_CLASSES, LAYOUT_SPACES, OPTION_ICON_CLASSES, OPTION_INDICATOR_CLASSES, OPTION_ITEM_CLASSES, ORIENTATIONS, POPOVER_GEOMETRY_CLASSES, POSITIONS, SURFACE_RADIUS_CLASSES, SURFACE_REFERENCES, TYPOGRAPHY_COLOR_CLASSES, TYPOGRAPHY_COLORS, };
+export type { AbsoluteSurfaceReference, Alignment, CommonButtonType, ComponentRadius, ControlSize, ControlVariant, DefaultVariant, EdgePosition, ElevationReference, HeadingLevel, IconColor, IconVariant, IndicatorPlacement, LayoutSpace, Orientation, Position, SurfaceReference, TypographyColor, };