@vireo-ai/trellis-ui 0.1.49 → 0.1.51

package/packages/client/types/components/import-mapper/index.d.ts

@@ -0,0 +1,25 @@
+import type Alpine from 'alpinejs';
+import { type TrellisAlpineComponent } from '../../runtime';
+type MappingProjectionRow = {
+    source: string;
+    target: string;
+    deleted: boolean;
+};
+type MappingProjection = {
+    usedSources: ReadonlySet<string>;
+    usedTargets: ReadonlySet<string>;
+    sourceAvailable(current: string, candidate: string): boolean;
+    targetAvailable(current: string, candidate: string): boolean;
+};
+declare const mappingProjection: (rows: readonly MappingProjectionRow[]) => MappingProjection;
+type ImportMapperData = {
+    activeSource: string;
+    init(): void;
+    destroy(): void;
+    refresh(): void;
+    selectSource(source: string): void;
+};
+declare const UiImportMapper: () => TrellisAlpineComponent<ImportMapperData>;
+declare const registerImportMapper: (AlpineInstance: Alpine.Alpine) => void;
+export { mappingProjection, registerImportMapper, UiImportMapper };
+export type { ImportMapperData, MappingProjection, MappingProjectionRow };

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

@@ -2,7 +2,7 @@ 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_ITEM_AS_VALUES: readonly ["button", "a", "div"];
 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"];
@@ -14,7 +14,7 @@ declare const menuSchema: {
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const menuItemSchema: {
-    as: import("../../runtime/codecs").OneOfCodec<"a" | "button">;
+    as: import("../../runtime/codecs").OneOfCodec<"a" | "button" | "div">;
     variant: import("../../runtime/codecs").OneOfCodec<"default" | "filled" | "subtle" | "ghost">;
     color: import("../../runtime/codecs").OneOfCodec<"neutral" | "accent" | "danger" | "success" | "warning">;
     type: import("../../runtime/codecs").OneOfCodec<"button" | "reset" | "submit">;

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

@@ -13,6 +13,8 @@ export type { DropdownData, DropdownTransition, UiDropdownApi } from './dropdown
 export { registerField, UiField } from './field';
 export { registerFileUpload, UiFileUpload } from './file-upload';
 export type { FileTransferStatus, FileUploadData, FileUploadMetadata, FileUploadRecord, FileUploadTransition, UiFileUploadApi, } from './file-upload';
+export { registerFormset, UiFormset } from './formset';
+export type { FormsetChangeDetail, FormsetData, FormsetItemArgument, FormsetItemDetail, UiFormsetApi, } from './formset';
 export { registerInput, UiInput } from './input';
 export type { InputData, UiInputApi } from './input';
 export { createKeybindingController, registerKeybinding } from './keybinding';

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

@@ -34,6 +34,7 @@ declare const selectSchema: {
     mode: import("../../runtime/codecs").OneOfCodec<"native" | "listbox" | "combobox" | "pillbox">;
     multiple: import("../../runtime/codecs").BoolCodec;
     searchable: import("../../runtime/codecs").BoolCodec;
+    searchMinItems: import("../../runtime/codecs").NumberCodec;
     virtualized: import("../../runtime/codecs").BoolCodec;
     optionsFetchUrl: import("../../runtime/codecs").StringCodec;
     optionsTotalItems: import("../../runtime/codecs").NumberCodec;

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

@@ -27,6 +27,7 @@ type SelectMachineEffects = {
     syncProps(scope: MachineScope<SelectContext, SelectProps>): void;
     syncOptions(scope: MachineScope<SelectContext, SelectProps>): void;
     syncActive(scope: MachineScope<SelectContext, SelectProps>): void;
+    syncDom(scope: MachineScope<SelectContext, SelectProps>): void;
 };
 type CreateSelectMachineOptions = {
     props: SelectProps;
@@ -71,6 +72,7 @@ declare const selectHooks: readonly [{
             mode: import("../../runtime/codecs").OneOfCodec<"native" | "listbox" | "combobox" | "pillbox">;
             multiple: import("../../runtime/codecs").BoolCodec;
             searchable: import("../../runtime/codecs").BoolCodec;
+            searchMinItems: import("../../runtime/codecs").NumberCodec;
             virtualized: import("../../runtime/codecs").BoolCodec;
             optionsFetchUrl: import("../../runtime/codecs").StringCodec;
             optionsTotalItems: import("../../runtime/codecs").NumberCodec;
@@ -148,6 +150,7 @@ declare const selectHooks: readonly [{
             mode: import("../../runtime/codecs").OneOfCodec<"native" | "listbox" | "combobox" | "pillbox">;
             multiple: import("../../runtime/codecs").BoolCodec;
             searchable: import("../../runtime/codecs").BoolCodec;
+            searchMinItems: import("../../runtime/codecs").NumberCodec;
             virtualized: import("../../runtime/codecs").BoolCodec;
             optionsFetchUrl: import("../../runtime/codecs").StringCodec;
             optionsTotalItems: import("../../runtime/codecs").NumberCodec;

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

@@ -2,6 +2,8 @@ import { type SchemaToProps } from '../../runtime';
 import { type ElevationReference, type SurfaceReference } from '../common';
 declare const SIDEBAR_SIDES: readonly ["left", "right"];
 declare const SIDEBAR_PLACEMENTS: readonly ["side", "top"];
+declare const SIDEBAR_MOBILE_PRESENTATIONS: readonly ["drawer", "fullscreen"];
+declare const SIDEBAR_AS: readonly ["div", "aside", "header"];
 declare const SIDEBAR_COLLAPSES: readonly ["none", "mobile", "desktop", "both"];
 declare const SIDEBAR_TOGGLE_ACTIONS: readonly ["toggle", "open", "close", "stash", "expand"];
 declare const SIDEBAR_ITEM_AS: readonly ["a", "button"];
@@ -10,8 +12,10 @@ declare const SIDEBAR_ITEM_COLORS: readonly ["neutral", "accent"];
 declare const SIDEBAR_SURFACES: readonly ["inherit", "0", "1", "2", "3", "4", "5", "6", "7", "8", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8"];
 declare const SIDEBAR_ELEVATIONS: readonly ["none", "match", "1", "2", "3", "4", "5", "6", "7", "8"];
 declare const sidebarSchema: {
+    as: import("../../runtime/codecs").OneOfCodec<"aside" | "div" | "header">;
     id: import("../../runtime/codecs").StringCodec;
     placement: import("../../runtime/codecs").OneOfCodec<"top" | "side">;
+    mobilePresentation: import("../../runtime/codecs").OneOfCodec<"fullscreen" | "drawer">;
     side: import("../../runtime/codecs").OneOfCodec<"left" | "right">;
     surface: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "inherit" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
     elevation: import("../../runtime/codecs").OneOfCodec<"1" | "match" | "2" | "3" | "4" | "5" | "6" | "7" | "none" | "8">;
@@ -61,13 +65,15 @@ declare const sidebarNavSchema: {
     class: import("../../runtime/codecs").StringCodec;
 };
 type SidebarProps = SchemaToProps<typeof sidebarSchema>;
+type SidebarAs = typeof SIDEBAR_AS[number];
 type SidebarToggleAction = typeof SIDEBAR_TOGGLE_ACTIONS[number];
 type SidebarCollapse = typeof SIDEBAR_COLLAPSES[number];
 type SidebarItemColor = typeof SIDEBAR_ITEM_COLORS[number];
 type SidebarItemVariant = typeof SIDEBAR_ITEM_VARIANTS[number];
 type SidebarSide = typeof SIDEBAR_SIDES[number];
 type SidebarPlacement = typeof SIDEBAR_PLACEMENTS[number];
+type SidebarMobilePresentation = typeof SIDEBAR_MOBILE_PRESENTATIONS[number];
 type SidebarSurface = SurfaceReference;
 type SidebarElevation = ElevationReference;
-export { SIDEBAR_COLLAPSES, SIDEBAR_ITEM_AS, SIDEBAR_ITEM_COLORS, SIDEBAR_ITEM_VARIANTS, SIDEBAR_ELEVATIONS, SIDEBAR_SIDES, SIDEBAR_PLACEMENTS, SIDEBAR_TOGGLE_ACTIONS, SIDEBAR_SURFACES, sidebarGroupSchema, sidebarItemSchema, sidebarNavSchema, sidebarPanelSchema, sidebarSchema, sidebarToggleSchema, };
-export type { SidebarCollapse, SidebarElevation, SidebarItemColor, SidebarItemVariant, SidebarPlacement, SidebarProps, SidebarSide, SidebarSurface, SidebarToggleAction, };
+export { SIDEBAR_AS, SIDEBAR_COLLAPSES, SIDEBAR_ITEM_AS, SIDEBAR_ITEM_COLORS, SIDEBAR_ITEM_VARIANTS, SIDEBAR_ELEVATIONS, SIDEBAR_SIDES, SIDEBAR_PLACEMENTS, SIDEBAR_MOBILE_PRESENTATIONS, SIDEBAR_TOGGLE_ACTIONS, SIDEBAR_SURFACES, sidebarGroupSchema, sidebarItemSchema, sidebarNavSchema, sidebarPanelSchema, sidebarSchema, sidebarToggleSchema, };
+export type { SidebarAs, SidebarCollapse, SidebarElevation, SidebarItemColor, SidebarItemVariant, SidebarMobilePresentation, SidebarPlacement, SidebarProps, SidebarSide, SidebarSurface, SidebarToggleAction, };

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

@@ -2,10 +2,12 @@ import { type TypographyColor } from '../common';
 declare const TEXT_AS_VALUES: readonly ["span", "p", "div", "label", "kbd", "code", "strong"];
 declare const TEXT_SIZE_VALUES: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
 declare const TEXT_WEIGHT_VALUES: readonly ["normal", "medium", "semibold", "bold"];
+declare const TEXT_FONT_VALUES: readonly ["body", "mono"];
 declare const TEXT_COLOR_VALUES: readonly ["inherit", "muted", "subtle", "accent", "danger"];
 type TextAs = typeof TEXT_AS_VALUES[number];
 type TextSize = typeof TEXT_SIZE_VALUES[number];
 type TextWeight = typeof TEXT_WEIGHT_VALUES[number];
+type TextFont = typeof TEXT_FONT_VALUES[number];
 type TextColor = TypographyColor;
-export { TEXT_AS_VALUES, TEXT_COLOR_VALUES, TEXT_SIZE_VALUES, TEXT_WEIGHT_VALUES, };
-export type { TextAs, TextColor, TextSize, TextWeight };
+export { TEXT_AS_VALUES, TEXT_COLOR_VALUES, TEXT_FONT_VALUES, TEXT_SIZE_VALUES, TEXT_WEIGHT_VALUES, };
+export type { TextAs, TextColor, TextFont, TextSize, TextWeight };

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

@@ -1,5 +1,8 @@
 import type Alpine from 'alpinejs';
+import { type TrellisAlpineComponent } from '../../runtime';
 import { UiVirtualizer } from '../../runtime/virtualizer';
+import type { UiVirtualizerApi, VirtualizerData } from '../../runtime/virtualizer';
+declare const UiCursorVirtualizer: (AlpineInstance: Alpine.Alpine) => TrellisAlpineComponent<VirtualizerData<null>> & UiVirtualizerApi<null>;
 declare const registerVirtualizer: (AlpineInstance: Alpine.Alpine) => void;
-export { registerVirtualizer, UiVirtualizer };
+export { registerVirtualizer, UiCursorVirtualizer, UiVirtualizer };
 export type { CursorDataSource, CursorFirstArgs, CursorMoveArgs, CursorPage, CursorResponseAdapter, CursorRenderPayload, CursorSeekArgs, SoughtCursorPage, CursorVirtualizerOptions, ResetOptions, SetUrlOptions, UiVirtualizerApi, VirtualizerOptions, VirtualizerData, VirtualScrollAlign, } from '../../runtime/virtualizer';

package/packages/client/types/motion/index.d.ts

@@ -89,6 +89,7 @@ declare const motion: ((subject: import("./subject").MotionSubject) => import(".
         readonly inOut: readonly [0.77, 0, 0.175, 1];
     };
     readonly createController: <T extends import("./controller").ControllerDefinitions>(options: import("./controller").ControllerOptions<T>) => import("./controller").Controller<import("./controller").ControllerState<T>>;
+    readonly stop: (element: Element) => void;
     readonly withReducedMotion: <T extends import("motion").AnimationOptions>(options: T, reducedOptions?: Partial<T>, preference?: import("./reduced-motion").MotionPreference) => T;
     readonly view: (update: () => void | Promise<void>, options?: import("./view").ViewOptions) => import("./animate").MotionHandle;
 };

package/packages/client/types/motion/registry.d.ts

@@ -6,7 +6,8 @@ type ActiveMotion = Readonly<{
 }>;
 declare const activeMotion: (element: Element) => ActiveMotion | undefined;
 declare const replaceMotion: (element: Element) => ActiveMotion | undefined;
+declare const stopMotion: (element: Element) => void;
 declare const registerMotion: (element: Element, motion: ActiveMotion) => void;
 declare const releaseMotion: (element: Element, handle: MotionHandle) => void;
-export { activeMotion, registerMotion, releaseMotion, replaceMotion };
+export { activeMotion, registerMotion, releaseMotion, replaceMotion, stopMotion };
 export type { ActiveMotion, MotionProperty };

package/packages/client/types/runtime/cursor-data-source.d.ts

@@ -14,6 +14,7 @@ type CursorRenderPayload = {
         preloads?: string[];
     }>;
     totalItems: number | null;
+    itemCount?: number;
 };
 type SoughtCursorPage<Content> = CursorPage<Content> & {
     startIndex: number;
@@ -42,4 +43,21 @@ type CursorVirtualizerOptions<Query, Content> = {
     responseAdapter: CursorResponseAdapter<Content>;
     seekDebounce?: number;
 };
-export type { CursorDataSource, CursorFirstArgs, CursorMoveArgs, CursorPage, CursorResponseAdapter, CursorRenderPayload, CursorSeekArgs, SoughtCursorPage, CursorVirtualizerOptions, };
+type ServerCursorResponse = {
+    content: string;
+    assets?: Array<{
+        id: string;
+        src: string;
+        preloads?: string[];
+    }>;
+    startCursor: string | null;
+    endCursor: string | null;
+    hasNext: boolean;
+    hasPrevious: boolean;
+    startIndex?: number;
+    total?: number;
+    count?: number;
+};
+declare const serverCursorOptions: (element: () => HTMLElement) => CursorVirtualizerOptions<null, ServerCursorResponse>;
+export { serverCursorOptions };
+export type { CursorDataSource, CursorFirstArgs, CursorMoveArgs, CursorPage, CursorResponseAdapter, CursorRenderPayload, CursorSeekArgs, ServerCursorResponse, SoughtCursorPage, CursorVirtualizerOptions, };

package/packages/client/types/runtime/engine/stream.d.ts

@@ -9,6 +9,7 @@ type StreamPatchPayload = {
     requestId?: string | null;
     viewTransition?: boolean;
     assets?: AssetDescriptor[];
+    focus?: string | null;
 };
 type StreamEventPayload = {
     event: string;

package/packages/client/types/runtime/focus-handoff.d.ts

@@ -1,6 +1,7 @@
 type FocusHandoffState = {
     pointerDown: boolean;
     pointerFocused: HTMLElement | null;
+    indicatorSuppressed: HTMLElement | null;
     shortcut: boolean;
     shortcutReset: number | undefined;
 };

package/packages/client/types/runtime/virtualizer-schema.d.ts

@@ -3,6 +3,7 @@ declare const VIRTUALIZER_AXES: readonly ["vertical"];
 type VirtualizerAxis = typeof VIRTUALIZER_AXES[number];
 declare const virtualizerSchema: {
     fetchUrl: import("./codecs").StringCodec;
+    cursor: import("./codecs").BoolCodec;
     totalItems: import("./codecs").NumberCodec;
     itemSize: import("./codecs").NumberCodec;
     bufferSize: import("./codecs").NumberCodec;

package/packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css

@@ -85,6 +85,11 @@
     --color-neutral-a11: transparent;
     --color-neutral-12: transparent;
     --color-neutral-a12: transparent;
+    --interaction-disclosure-expanded-emphasis-mix: 0%;
+    --interaction-disclosure-expanded-emphasis-edge-width: 0px;
+    --interaction-disclosure-expanded-focus-edge-width: 0px;
+    --interaction-disclosure-expanded-accent-focus-width: 0px;
+    --interaction-disclosure-expanded-danger-focus-width: 0px;
     --border-width-0: 0px;
     --border-width-1: 1px;
     --border-width-2: 2px;
@@ -828,6 +833,9 @@
   .inset-y-2 {
     inset-block: var(--spacing-2);
   }
+  .-top-px {
+    top: -1px;
+  }
   .top-0 {
     top: var(--spacing-0);
   }
@@ -3700,6 +3708,9 @@
   .font-metadata {
     font-family: var(--font-metadata);
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .font-sans {
     font-family: var(--font-sans);
   }
@@ -5492,9 +5503,35 @@
       padding-block: var(--spacing-2);
     }
   }
-  .\[\&\>\*\]\:bg-interaction-selected {
-    &>* {
-      background-color: var(--color-interaction-selected);
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:inset-0 {
+    &:not([data-responsive-mode=desktop]) {
+      inset: var(--spacing-0);
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:h-dvh {
+    &:not([data-responsive-mode=desktop]) {
+      height: 100dvh;
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:w-full {
+    &:not([data-responsive-mode=desktop]) {
+      width: 100%;
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:max-w-none {
+    &:not([data-responsive-mode=desktop]) {
+      max-width: none;
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:rounded-none {
+    &:not([data-responsive-mode=desktop]) {
+      border-radius: var(--radius-none);
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:border-0 {
+    &:not([data-responsive-mode=desktop]) {
+      border-style: var(--tw-border-style);
+      border-width: var(--border-width-0);
     }
   }
   .\[\&\>\[data-ui-modal-body\]\]\:-mx-1 {
@@ -5542,6 +5579,16 @@
       width: auto;
     }
   }
+  .\[\&\[data-current\]\>\*\]\:bg-interaction-hover {
+    &[data-current]>* {
+      background-color: var(--color-interaction-hover);
+    }
+  }
+  .\[\&\[data-selected\]\>\*\]\:bg-interaction-selected {
+    &[data-selected]>* {
+      background-color: var(--color-interaction-selected);
+    }
+  }
   .\[\[data-ui-text\]\+\&\]\:mt-2 {
     [data-ui-text]+& {
       margin-top: var(--spacing-2);
@@ -9248,14 +9295,32 @@
   [data-ui-data-grid-resize-handle]:hover::after, [data-ui-data-grid-resize-handle]:focus-visible::after, [data-ui-data-grid-resize-handle][data-resizing]::after {
     opacity: 1;
   }
-  [data-ui-data-grid-column-header][data-pinned], [data-ui-data-grid-cell][data-pinned] {
-    background: var(--ui-surface-color);
+  [data-ui-data-grid-cell][data-align="start"] {
+    justify-content: flex-start;
+    text-align: left;
   }
-  [data-ui-data-grid][data-border="row"] [data-ui-data-grid-column-header], [data-ui-data-grid][data-border="row"] [data-ui-data-grid-cell], [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-column-header], [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-cell] {
-    border-bottom: 1px solid var(--color-separator);
+  [data-ui-data-grid-cell][data-align="center"] {
+    justify-content: center;
+    text-align: center;
+  }
+  [data-ui-data-grid-cell][data-align="end"] {
+    justify-content: flex-end;
+    text-align: right;
+  }
+  [data-ui-data-grid][data-border="row"] {
+    --ui-data-grid-separator: var(--color-separator);
+  }
+  [data-ui-data-grid][data-border="grid"] {
+    --ui-data-grid-separator: var(--ui-surface-edge-strong);
+  }
+  [data-ui-data-grid][data-border="row"] [data-ui-data-grid-header], [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-header] {
+    border-block-end: var(--border-width-edge-separator) solid var(--ui-data-grid-separator);
+  }
+  [data-ui-data-grid][data-border="row"] [data-ui-data-grid-row], [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-row] {
+    border-block-end: var(--border-width-edge-separator) solid var(--ui-data-grid-separator);
   }
   [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-column-header]:not(:first-child), [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-cell]:not(:first-child) {
-    border-inline-start: 1px solid var(--color-separator);
+    border-inline-start: var(--border-width-edge-separator) solid var(--ui-data-grid-separator);
   }
   [data-ui-data-grid][data-empty] [data-ui-data-grid-scroll-area] {
     display: none;
@@ -9974,6 +10039,25 @@
     }
   }
 }
+@layer components {
+  [data-ui-import-review-columns], [data-ui-import-review-row] {
+    grid-template-columns: minmax(0, 1fr) 2.5rem minmax(14rem, 1fr);
+  }
+  [data-ui-import-review-row] {
+    min-height: 4rem;
+  }
+  [data-ui-import-mapping-preview-frame] {
+    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-surface-edge-strong);
+  }
+}
+@layer components {
+  [data-ui-import-mapper] {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+}
 @layer components {
   [data-ui-tooltip-content][data-ui-semantic-surface] {
     color: var(--ui-semantic-surface-ink);
@@ -10473,7 +10557,7 @@
     width: var(--ui-tabs-line-indicator-width);
     height: var(--ui-tabs-line-indicator-height);
     border-radius: 0;
-    background-color: var(--color-intent-accent-solid);
+    background-color: var(--ui-selection-solid);
   }
   [data-ui-tabs-list][data-variant="segmented"]:not([data-ui-tabs-ready]) > [data-ui-tabs-tab][data-selected]::before {
     inset: var(--border-width-edge-control);
@@ -10604,6 +10688,9 @@
     color: var(--ui-option-text);
     background-color: var(--ui-option-active);
   }
+  [data-ui-sortable][data-ui-menu] [data-ui-menu-item]:not([data-active="true"]):not([data-disabled]) {
+    background-color: transparent;
+  }
   [data-ui-option-recipe]:is([data-selected], [data-current], [aria-current]:not([aria-current="false"])):not([data-ui-option-selection="mark"]):not([data-disabled]), [data-ui-select][data-mark="none"] [data-ui-option-recipe][data-ui-option-selection="mark"][data-selected]:not([data-disabled]) {
     color: var(--ui-option-selected-ink);
     background: var(--ui-option-selected-background);
@@ -10675,24 +10762,36 @@
     background-color: var(--color-interaction-hover);
     box-shadow: none;
   }
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within):not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]), [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"][data-ui-control-interaction="disclosure"]:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     background-color: var(--color-interaction-pressed);
   }
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"][data-ui-control-interaction="disclosure"][data-state="open"]:not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    background-color: color-mix( in oklch, transparent, transparent 0% );
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in oklch, var(--color-interaction-hover), var(--color-interaction-pressed) var(--interaction-disclosure-expanded-emphasis-mix) );
+    }
+  }
   [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
   }
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:focus-within:not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]), [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"][data-ui-control-interaction="disclosure"]:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong), 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"][data-ui-control-interaction="disclosure"][data-state="open"]:not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    box-shadow: 0 0 0 var(--interaction-disclosure-expanded-focus-edge-width) var(--color-intent-accent-edge-strong), 0 0 0 var(--interaction-disclosure-expanded-emphasis-edge-width) var(--ui-surface-edge-strong), 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge), 0 0 0 var(--interaction-disclosure-expanded-accent-focus-width) var(--color-intent-accent-focus);
+  }
   [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge, var(--ui-surface-edge-strong));
   }
   [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover, var(--ui-surface-edge-strong));
   }
-  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled) {
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):focus-within:not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled), [data-ui-control][data-ui-control-recipe="field"][data-ui-control-interaction="disclosure"]:is([data-invalid], [aria-invalid="true"]):is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-strong, var(--ui-surface-edge-strong)), 0 0 0 var(--color-intent-danger-focus-width, var(--color-intent-accent-focus-width)) var(--color-intent-danger-focus, var(--color-intent-accent-focus));
   }
+  [data-ui-control][data-ui-control-recipe="field"][data-ui-control-interaction="disclosure"][data-state="open"]:is([data-invalid], [aria-invalid="true"]):not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled) {
+    box-shadow: 0 0 0 var(--interaction-disclosure-expanded-emphasis-edge-width) var(--color-intent-danger-edge-strong, var(--ui-surface-edge-strong)), 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge, var(--ui-surface-edge-strong)), 0 0 0 var(--interaction-disclosure-expanded-danger-focus-width, var(--interaction-disclosure-expanded-accent-focus-width)) var(--color-intent-danger-focus, var(--color-intent-accent-focus));
+  }
   [data-ui-control][data-ui-control-recipe="field"] :is(input, textarea)::placeholder {
     color: var(--ui-surface-ink-muted);
     opacity: 1;