@vireo-ai/trellis-ui 0.1.2 → 0.1.5

package/types/components/layout.d.ts

@@ -0,0 +1,408 @@
+import { SURFACE_ALPHA_COMPOUNDS, type ComponentRadius, type Elevation, type LayoutSpace, type Surface, type SurfaceTone } 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"];
+declare const LAYOUT_ALIGNS: readonly ["start", "center", "end", "stretch", "baseline"];
+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">;
+    radius: import("../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
+    elevation: import("../runtime/codecs").OneOfCodec<"1" | "none" | "2" | "3" | "4" | "5" | "6">;
+    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">;
+};
+declare const layoutAlignmentSchema: {
+    align: import("../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "stretch" | "baseline">;
+    justify: import("../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "between">;
+};
+declare const layoutSurfaceDetails: {
+    padding: {
+        description: string;
+    };
+    paddingX: {
+        description: string;
+    };
+    paddingY: {
+        description: string;
+    };
+    margin: {
+        description: string;
+    };
+    marginX: {
+        description: string;
+    };
+    marginY: {
+        description: string;
+    };
+    surface: {
+        description: string;
+    };
+    tone: {
+        description: string;
+    };
+    radius: {
+        description: string;
+    };
+    elevation: {
+        description: string;
+    };
+    width: {
+        description: string;
+    };
+    height: {
+        description: string;
+    };
+    class: {
+        description: string;
+    };
+};
+declare const layoutSpacingDetails: {
+    gap: {
+        description: string;
+    };
+    gapX: {
+        description: string;
+    };
+    gapY: {
+        description: string;
+    };
+};
+declare const layoutAlignmentDetails: {
+    align: {
+        description: string;
+    };
+    justify: {
+        description: string;
+    };
+};
+declare const LAYOUT_WIDTH_CLASSES: {
+    readonly auto: "";
+    readonly full: "w-full";
+    readonly xs: "mx-auto w-full max-w-xs";
+    readonly sm: "mx-auto w-full max-w-sm";
+    readonly md: "mx-auto w-full max-w-md";
+    readonly lg: "mx-auto w-full max-w-lg";
+    readonly xl: "mx-auto w-full max-w-xl";
+    readonly prose: "mx-auto w-full max-w-prose";
+};
+declare const LAYOUT_HEIGHT_CLASSES: {
+    readonly auto: "";
+    readonly full: "h-full";
+    readonly xs: "h-full max-h-xs";
+    readonly sm: "h-full max-h-sm";
+    readonly md: "h-full max-h-md";
+    readonly lg: "h-full max-h-lg";
+    readonly xl: "h-full max-h-xl";
+};
+declare const LAYOUT_ALIGN_CLASSES: {
+    readonly start: "items-start";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly stretch: "items-stretch";
+    readonly baseline: "items-baseline";
+};
+declare const LAYOUT_JUSTIFY_CLASSES: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+};
+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";
+};
+declare const LAYOUT_ROW_CLASSES: {
+    readonly none: "";
+    readonly '1': "grid-rows-1";
+    readonly '2': "grid-rows-2";
+    readonly '3': "grid-rows-3";
+    readonly '4': "grid-rows-4";
+    readonly '5': "grid-rows-5";
+    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: "";
+    };
+    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";
+    };
+    width: {
+        readonly auto: "";
+        readonly full: "w-full";
+        readonly xs: "mx-auto w-full max-w-xs";
+        readonly sm: "mx-auto w-full max-w-sm";
+        readonly md: "mx-auto w-full max-w-md";
+        readonly lg: "mx-auto w-full max-w-lg";
+        readonly xl: "mx-auto w-full max-w-xl";
+        readonly prose: "mx-auto w-full max-w-prose";
+    };
+    height: {
+        readonly auto: "";
+        readonly full: "h-full";
+        readonly xs: "h-full max-h-xs";
+        readonly sm: "h-full max-h-sm";
+        readonly md: "h-full max-h-md";
+        readonly lg: "h-full max-h-lg";
+        readonly xl: "h-full max-h-xl";
+    };
+    align: {
+        readonly start: "items-start";
+        readonly center: "items-center";
+        readonly end: "items-end";
+        readonly stretch: "items-stretch";
+        readonly baseline: "items-baseline";
+    };
+    justify: {
+        readonly start: "justify-start";
+        readonly center: "justify-center";
+        readonly end: "justify-end";
+        readonly between: "justify-between";
+    };
+};
+declare const layoutBaseDefaults: {
+    gap: string;
+    gapX: string;
+    gapY: string;
+    padding: string;
+    paddingX: string;
+    paddingY: string;
+    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: "--shadow-4";
+    readonly description: "Elevation step 4.";
+}, {
+    readonly name: "--shadow-5";
+    readonly description: "Elevation step 5.";
+}, {
+    readonly name: "--shadow-6";
+    readonly description: "Elevation step 6.";
+}];
+type LayoutAs = typeof LAYOUT_AS_VALUES[number];
+type LayoutWidth = typeof LAYOUT_WIDTHS[number];
+type LayoutHeight = typeof LAYOUT_HEIGHTS[number];
+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, };

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

@@ -1,5 +1,5 @@
 import type Alpine from 'alpinejs';
-import { type BindingObject, type CleanupStack, type TrellisAlpineComponent } from '../../runtime';
+import { type BindingObject, type CleanupStack, type Machine, type TrellisAlpineComponent } from '../../runtime';
 import type { PresenceLifecycle } from '../../motion';
 import { type ModalProps, type ModalTriggerProps } from './contract';
 type CancelReason = 'escape' | 'outside';
@@ -21,7 +21,8 @@ type ModalTriggerController = {
 };
 type ModalData = ModalController & {
     props: ModalProps;
-    isOpen: boolean;
+    readonly isOpen: boolean;
+    machine: Machine<Record<string, never>>;
     dialogId: string;
     activeTrigger: HTMLElement | null;
     cleanup: CleanupStack;
@@ -53,6 +54,7 @@ type ModalData = ModalController & {
     openFrom(trigger: HTMLElement): void;
     close(event?: Event): void;
     cancel(reason: CancelReason, event?: Event): void;
+    applyProps(changedKeys?: string[]): void;
     syncExternalTrigger(trigger: HTMLElement, disabled: boolean): void;
     syncAll(): void;
     syncDialog(): void;

package/types/components/runtime.d.ts

@@ -31,5 +31,7 @@ export { registerSwitch, UiSwitch } from './switch';
 export type { SwitchData, SwitchItem } from './switch';
 export { registerTabs, UiTabs } from './tabs';
 export type { TabsActivateDetail, TabsChangeDetail, TabsData, TabsItem } from './tabs';
+export { registerTextarea, UiTextarea } from './textarea';
+export type { TextareaData } from './textarea';
 export { registerToast, UiToast, UiToastOutlet, } from './toast';
 export type { ToastData, ToastDetail, ToastOutletData } from './toast';

package/types/components/section/contract.d.ts

@@ -0,0 +1,27 @@
+import { type PropState } from '../../runtime';
+import { type LayoutAs } from '../layout';
+declare const SECTION_DISPLAYS: readonly ["block", "none"];
+declare const SECTION_SIZES: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+declare const sectionSchema: {
+    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">;
+    radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
+    elevation: import("../../runtime/codecs").OneOfCodec<"1" | "none" | "2" | "3" | "4" | "5" | "6">;
+    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;
+    as: import("../../runtime/codecs").OneOfCodec<"article" | "aside" | "div" | "footer" | "form" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul">;
+    display: import("../../runtime/codecs").OneOfCodec<"none" | "block">;
+    size: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">;
+};
+type SectionDisplay = typeof SECTION_DISPLAYS[number];
+type SectionSize = typeof SECTION_SIZES[number];
+type SectionProps = PropState<typeof sectionSchema>;
+export { SECTION_DISPLAYS, SECTION_SIZES, sectionSchema, };
+export type { LayoutAs as SectionAs, SectionDisplay, SectionProps, SectionSize, };

package/types/components/section/index.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/select/index.d.ts

@@ -1,5 +1,5 @@
 import type Alpine from 'alpinejs';
-import { type AnchoredPopover, type BindingObject, type TrellisAlpineComponent } from '../../runtime';
+import { type AnchoredPopover, type BindingObject, type Machine, type TrellisAlpineComponent } from '../../runtime';
 import type { PresenceLifecycle } from '../../motion';
 import { type SelectProps } from './contract';
 type PopoverElement = HTMLElement & {
@@ -18,7 +18,7 @@ type SelectOption = {
     create: boolean;
 };
 type SelectData = {
-    isOpen: boolean;
+    readonly isOpen: boolean;
     search: string;
     selectedValues: string[];
     selectedLabels: string[];
@@ -28,6 +28,7 @@ type SelectData = {
     inputId: string;
     listboxId: string;
     props: SelectProps;
+    machine: Machine<Record<string, never>>;
     popover: AnchoredPopover | null;
     popoverMotion: PresenceLifecycle | null;
     listeners: Array<() => void>;
@@ -49,6 +50,8 @@ type SelectData = {
     hasClearValue(): boolean;
     isPillbox(): boolean;
     controlLayoutMode(): SelectProps['mode'];
+    valuesFromProps(): string[];
+    applyProps(changedKeys?: string[]): void;
     selectedSummary(): string;
     openSelect(event?: Event): void;
     closeSelect(event?: Event): void;
@@ -74,11 +77,14 @@ type SelectData = {
     syncTrigger(): void;
     syncInputs(): void;
     syncListbox(): void;
+    syncClosedState(): void;
     syncOptions(): void;
     syncChips(): void;
     syncHiddenInputs(): void;
     mount(): void;
     unmount(): void;
+    exitPopover(): void;
+    finishClose(): void;
     setup(): void;
     selectedOption(): SelectOption | null;
     selectedContent(option: SelectOption): DocumentFragment;

package/types/components/sidebar/index.d.ts

@@ -1,5 +1,5 @@
 import type Alpine from 'alpinejs';
-import { type BindingObject, type CleanupStack, type PropState, type TrellisAlpineComponent } from '../../runtime';
+import { type BindingObject, type CleanupStack, type Machine, type PropState, type TrellisAlpineComponent } from '../../runtime';
 import type { PresenceLifecycle, PresencePhase } from '../../motion';
 import { type SidebarProps, type SidebarToggleAction } from './contract';
 type SidebarController = {
@@ -20,16 +20,20 @@ declare const edgePropsSchema: {
     class: import("../../runtime/codecs").StringCodec;
 };
 type SidebarEdgeProps = PropState<typeof edgePropsSchema>;
+type SidebarMachineContext = {
+    desktopStashed: boolean;
+};
 type SidebarData = SidebarController & {
     props: SidebarProps;
-    mobileOpen: boolean;
-    desktopStashed: boolean;
-    desktopDrawerOpen: boolean;
-    drawerExiting: boolean;
-    sidebarExiting: boolean;
+    machine: Machine<SidebarMachineContext>;
+    readonly mobileOpen: boolean;
+    readonly desktopStashed: boolean;
+    readonly desktopDrawerOpen: boolean;
+    readonly drawerExiting: boolean;
+    readonly sidebarExiting: boolean;
     sidebarExitFreezeCleanup: (() => void) | null;
     drawerMotionRun: number;
-    drawerMotionPhase: PresencePhase | null;
+    readonly drawerMotionPhase: PresencePhase | null;
     desktopMode: boolean;
     renderedExpanded: boolean;
     renderedDrawerOpen: boolean;
@@ -44,7 +48,10 @@ type SidebarData = SidebarController & {
     backdropMotion: PresenceLifecycle | null;
     hasScrollLock: boolean;
     mediaQuery: MediaQueryList | null;
+    mediaQueryCleanup: (() => void) | null;
     root: BindingObject;
+    setupMediaQuery(): void;
+    applyProps(changedKeys?: string[]): void;
     isDesktop(): boolean;
     isMobileCollapsible(): boolean;
     isDesktopCollapsible(): boolean;

package/types/components/slider/index.d.ts

@@ -26,6 +26,7 @@ type SliderData = {
     hiddenInputsKey: string;
     draggingThumb: SliderThumbName | null;
     elements(): SliderElements;
+    applyProps(changedKeys?: string[]): void;
     sync(): void;
     syncFromInput(event: Event): void;
     commitFromInput(event: Event): void;

package/types/components/stack/contract.d.ts

@@ -0,0 +1,29 @@
+import { type PropState } from '../../runtime';
+import { type LayoutAlign, type LayoutAs, type LayoutJustify, type LayoutSpace } from '../layout';
+declare const STACK_DISPLAYS: readonly ["grid", "inline-grid", "none"];
+declare const stackSchema: {
+    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">;
+    radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
+    elevation: import("../../runtime/codecs").OneOfCodec<"1" | "none" | "2" | "3" | "4" | "5" | "6">;
+    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;
+    align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "stretch" | "baseline">;
+    justify: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start" | "between">;
+    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">;
+    as: import("../../runtime/codecs").OneOfCodec<"article" | "aside" | "div" | "footer" | "form" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul">;
+    display: import("../../runtime/codecs").OneOfCodec<"grid" | "none" | "inline-grid">;
+};
+type StackDisplay = typeof STACK_DISPLAYS[number];
+type StackProps = PropState<typeof stackSchema>;
+export { STACK_DISPLAYS, stackSchema, };
+export type { LayoutAlign as StackAlign, LayoutAs as StackAs, LayoutJustify as StackJustify, LayoutSpace as StackSpace, StackDisplay, StackProps, };

package/types/components/stack/index.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/table/contract.d.ts

@@ -15,6 +15,7 @@ declare const tableSchema: {
     density: import("../../runtime/codecs").OneOfCodec<"default" | "compact" | "comfortable">;
     variant: import("../../runtime/codecs").OneOfCodec<"ghost" | "surface">;
     border: import("../../runtime/codecs").OneOfCodec<"grid" | "none" | "row">;
+    flush: import("../../runtime/codecs").BoolCodec;
     zebra: import("../../runtime/codecs").BoolCodec;
     hover: import("../../runtime/codecs").BoolCodec;
     stickyHeader: import("../../runtime/codecs").BoolCodec;
@@ -39,7 +40,7 @@ declare const tableRowSchema: {
 };
 declare const tableColumnSchema: {
     align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
-    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "baseline" | "middle">;
     key: import("../../runtime/codecs").StringCodec;
     target: import("../../runtime/codecs").StringCodec;
     width: import("../../runtime/codecs").StringCodec;
@@ -61,13 +62,13 @@ declare const tableColumnFilterSchema: {
 };
 declare const tableRowHeaderSchema: {
     align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
-    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "baseline" | "middle">;
     scope: import("../../runtime/codecs").OneOfCodec<"row" | "rowgroup">;
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const tableCellSchema: {
     align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
-    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "baseline" | "middle">;
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const tableEmptySchema: {

package/types/components/tabs/index.d.ts

@@ -33,6 +33,7 @@ type TabsData = {
     panelForValue(value: string): HTMLElement | null;
     initialValue(): string;
     fallbackValue(): string;
+    applyProps(changedKeys?: string[]): void;
     setActiveValue(value: string, tab?: TabsTabElement): void;
     syncAll(): void;
     syncRoot(): void;