@spinjs/components 0.1.0-preview.2 → 0.2.0-alpha.1

package/dist/color-picker/examples/hue-wheel.html.js

@@ -0,0 +1,5 @@
+// src/color-picker/examples/hue-wheel.html
+var hue_wheel_default = "<script lang=\"ts\">\nimport { colorPicker } from \"../color-picker.presentation.ts\";\n\nconst machine = colorPicker({\n  value: \"#8b5cf6\",\n  inline: true,\n});\n<\/script>\n<div\n  class=\"mx-auto w-full max-w-[16rem] rounded-lg border bg-surface-raised p-4 shadow-sm\"\n  {...machine.getRootProps()}>\n  <div class=\"mb-3 flex items-center justify-between\">\n    <label\n      {...machine.getLabelProps()}>Spectrum</label>\n    <span class=\"type-code text-muted\"\n      {...machine.getValueTextProps()}>{machine.valueAsString}</span>\n  </div>\n  <div class=\"flex flex-col gap-3\" {...machine.getContentProps()}>\n    <div\n      class=\"relative h-36 w-full rounded-lg border\"\n      {...machine.getAreaProps()}>\n      <div class=\"absolute inset-0 rounded-lg\"\n        {...machine.getAreaBackgroundProps()}>\n        <div class=\"absolute inset-0 rounded-lg\"\n          style=\"background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))\"></div>\n        <div class=\"absolute inset-0 rounded-lg\"\n          style=\"background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))\"></div>\n      </div>\n      <div\n        class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg\"\n        {...machine.getAreaThumbProps()}></div>\n    </div>\n    <div class=\"flex items-center gap-2\"\n      {...machine.getChannelSliderProps({ channel: \"hue\" })}>\n      <span class=\"w-10 type-caption text-muted\"\n        {...machine.getChannelSliderLabelProps({ channel: \"hue\" })}>Hue</span>\n      <div\n        class=\"relative h-3 flex-1 rounded-full border\"\n        {...machine.getChannelSliderTrackProps({ channel: \"hue\" })}>\n        <div\n          class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg\"\n          {...machine.getChannelSliderThumbProps({ channel: \"hue\" })}></div>\n      </div>\n      <span class=\"w-8 text-right type-code text-muted\"\n        {...machine.getChannelSliderValueTextProps({ channel: \"hue\" })}>{machine.getChannelValue(\"hue\")}</span>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <span aria-hidden=\"true\"\n        class=\"h-7 w-7 shrink-0 rounded-md border\"\n        {...machine.getSwatchProps({ value: machine.valueAsString })}></span>\n      <input\n        class=\"w-full\"\n        {...machine.getChannelInputProps({ channel: \"hex\" })} />\n    </div>\n    <input type=\"hidden\" {...machine.getHiddenInputProps()} />\n  </div>\n</div>\n";
+export { hue_wheel_default as default };
+
+//# sourceMappingURL=hue-wheel.html.js.map

package/dist/color-picker/examples/inline.html

@@ -8,18 +8,18 @@ const machine = colorPicker({
 });
 </script>
 <div
-  class="mx-auto w-full max-w-[16rem] rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-sm"
+  class="mx-auto w-full max-w-[16rem] rounded-lg border bg-surface-raised p-4 shadow-sm"
   {...machine.getRootProps()}>
   <div class="mb-3 flex items-center justify-between">
-    <label class="text-sm font-medium text-text"
+    <label
       {...machine.getLabelProps()}>Inline Picker</label>
     <span
-      class="rounded-md border border-solid border-border bg-surface px-2 py-1 font-mono text-xs text-text"
+      class="rounded-md border bg-surface px-2 py-1 type-code"
       {...machine.getValueTextProps()}>{machine.valueAsString}</span>
   </div>
   <div class="flex flex-col gap-3" {...machine.getContentProps()}>
     <div
-      class="relative h-40 w-full rounded-md border border-solid border-border"
+      class="relative h-40 w-full rounded-md border"
       {...machine.getAreaProps()}>
       <div class="absolute inset-0 rounded-md"
         {...machine.getAreaBackgroundProps()}>
@@ -34,10 +34,10 @@ const machine = colorPicker({
     </div>
     <div class="flex items-center gap-2"
       {...machine.getChannelSliderProps({ channel: "hue" })}>
-      <span class="w-12 text-xs text-text-muted"
+      <span class="w-12 type-caption text-muted"
         {...machine.getChannelSliderLabelProps({ channel: "hue" })}>Hue</span>
       <div
-        class="relative h-3 flex-1 rounded-full border border-solid border-border"
+        class="relative h-3 flex-1 rounded-full border"
         {...machine.getChannelSliderTrackProps({ channel: "hue" })}>
         <div
           class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg"
@@ -46,10 +46,10 @@ const machine = colorPicker({
     </div>
     <div class="flex items-center gap-2"
       {...machine.getChannelSliderProps({ channel: "alpha" })}>
-      <span class="w-12 text-xs text-text-muted"
+      <span class="w-12 type-caption text-muted"
         {...machine.getChannelSliderLabelProps({ channel: "alpha" })}>Alpha</span>
       <div
-        class="relative h-3 flex-1 rounded-full border border-solid border-border"
+        class="relative h-3 flex-1 rounded-full border"
         {...machine.getChannelSliderTrackProps({ channel: "alpha" })}>
         <div
           class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg"

package/dist/color-picker/examples/inline.html.js

@@ -0,0 +1,5 @@
+// src/color-picker/examples/inline.html
+var inline_default = "<script lang=\"ts\">\nimport { colorPicker } from \"../color-picker.presentation.ts\";\n\nconst machine = colorPicker({\n  value: \"#10b981ff\",\n  format: \"hexa\",\n  inline: true,\n});\n<\/script>\n<div\n  class=\"mx-auto w-full max-w-[16rem] rounded-lg border bg-surface-raised p-4 shadow-sm\"\n  {...machine.getRootProps()}>\n  <div class=\"mb-3 flex items-center justify-between\">\n    <label\n      {...machine.getLabelProps()}>Inline Picker</label>\n    <span\n      class=\"rounded-md border bg-surface px-2 py-1 type-code\"\n      {...machine.getValueTextProps()}>{machine.valueAsString}</span>\n  </div>\n  <div class=\"flex flex-col gap-3\" {...machine.getContentProps()}>\n    <div\n      class=\"relative h-40 w-full rounded-md border\"\n      {...machine.getAreaProps()}>\n      <div class=\"absolute inset-0 rounded-md\"\n        {...machine.getAreaBackgroundProps()}>\n        <div class=\"absolute inset-0 rounded-md\"\n          style=\"background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))\"></div>\n        <div class=\"absolute inset-0 rounded-md\"\n          style=\"background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))\"></div>\n      </div>\n      <div\n        class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg\"\n        {...machine.getAreaThumbProps()}></div>\n    </div>\n    <div class=\"flex items-center gap-2\"\n      {...machine.getChannelSliderProps({ channel: \"hue\" })}>\n      <span class=\"w-12 type-caption text-muted\"\n        {...machine.getChannelSliderLabelProps({ channel: \"hue\" })}>Hue</span>\n      <div\n        class=\"relative h-3 flex-1 rounded-full border\"\n        {...machine.getChannelSliderTrackProps({ channel: \"hue\" })}>\n        <div\n          class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg\"\n          {...machine.getChannelSliderThumbProps({ channel: \"hue\" })}></div>\n      </div>\n    </div>\n    <div class=\"flex items-center gap-2\"\n      {...machine.getChannelSliderProps({ channel: \"alpha\" })}>\n      <span class=\"w-12 type-caption text-muted\"\n        {...machine.getChannelSliderLabelProps({ channel: \"alpha\" })}>Alpha</span>\n      <div\n        class=\"relative h-3 flex-1 rounded-full border\"\n        {...machine.getChannelSliderTrackProps({ channel: \"alpha\" })}>\n        <div\n          class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg\"\n          {...machine.getChannelSliderThumbProps({ channel: \"alpha\" })}></div>\n      </div>\n    </div>\n    <input type=\"hidden\" {...machine.getHiddenInputProps()} />\n  </div>\n</div>\n";
+export { inline_default as default };
+
+//# sourceMappingURL=inline.html.js.map

package/dist/color-picker/examples/with-presets.html

@@ -7,17 +7,17 @@ const machine = colorPicker({
 });
 </script>
 <div
-  class="mx-auto w-full max-w-[16rem] rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-sm"
+  class="mx-auto w-full max-w-[16rem] rounded-lg border bg-surface-raised p-4 shadow-sm"
   {...machine.getRootProps()}>
   <div class="mb-3 flex items-center justify-between">
-    <label class="text-sm font-medium text-text"
+    <label
       {...machine.getLabelProps()}>Brand Swatches</label>
-    <span class="font-mono text-xs text-text-muted"
+    <span class="type-code text-muted"
       {...machine.getValueTextProps()}>{machine.valueAsString}</span>
   </div>
   <div class="flex flex-col gap-3" {...machine.getContentProps()}>
     <div
-      class="relative h-36 w-full rounded-md border border-solid border-border"
+      class="relative h-36 w-full rounded-md border"
       {...machine.getAreaProps()}>
       <div class="absolute inset-0 rounded-md"
         {...machine.getAreaBackgroundProps()}>
@@ -31,17 +31,17 @@ const machine = colorPicker({
         {...machine.getAreaThumbProps()}></div>
     </div>
     <div class="grid grid-cols-6 gap-2" {...machine.getSwatchGroupProps()}>
-      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+      <button class="bare h-6 w-6 rounded-md border"
         {...machine.getSwatchTriggerProps({ value: "#ef4444" })}></button>
-      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+      <button class="bare h-6 w-6 rounded-md border"
         {...machine.getSwatchTriggerProps({ value: "#f59e0b" })}></button>
-      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+      <button class="bare h-6 w-6 rounded-md border"
         {...machine.getSwatchTriggerProps({ value: "#10b981" })}></button>
-      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+      <button class="bare h-6 w-6 rounded-md border"
         {...machine.getSwatchTriggerProps({ value: "#3b82f6" })}></button>
-      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+      <button class="bare h-6 w-6 rounded-md border"
         {...machine.getSwatchTriggerProps({ value: "#8b5cf6" })}></button>
-      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+      <button class="bare h-6 w-6 rounded-md border"
         {...machine.getSwatchTriggerProps({ value: "#ec4899" })}></button>
     </div>
     <input type="hidden" {...machine.getHiddenInputProps()} />

package/dist/color-picker/examples/with-presets.html.js

@@ -0,0 +1,5 @@
+// src/color-picker/examples/with-presets.html
+var with_presets_default = "<script lang=\"ts\">\nimport { colorPicker } from \"../color-picker.presentation.ts\";\n\nconst machine = colorPicker({\n  value: \"#3b82f6\",\n  inline: true,\n});\n<\/script>\n<div\n  class=\"mx-auto w-full max-w-[16rem] rounded-lg border bg-surface-raised p-4 shadow-sm\"\n  {...machine.getRootProps()}>\n  <div class=\"mb-3 flex items-center justify-between\">\n    <label\n      {...machine.getLabelProps()}>Brand Swatches</label>\n    <span class=\"type-code text-muted\"\n      {...machine.getValueTextProps()}>{machine.valueAsString}</span>\n  </div>\n  <div class=\"flex flex-col gap-3\" {...machine.getContentProps()}>\n    <div\n      class=\"relative h-36 w-full rounded-md border\"\n      {...machine.getAreaProps()}>\n      <div class=\"absolute inset-0 rounded-md\"\n        {...machine.getAreaBackgroundProps()}>\n        <div class=\"absolute inset-0 rounded-md\"\n          style=\"background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))\"></div>\n        <div class=\"absolute inset-0 rounded-md\"\n          style=\"background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))\"></div>\n      </div>\n      <div\n        class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg\"\n        {...machine.getAreaThumbProps()}></div>\n    </div>\n    <div class=\"grid grid-cols-6 gap-2\" {...machine.getSwatchGroupProps()}>\n      <button class=\"bare h-6 w-6 rounded-md border\"\n        {...machine.getSwatchTriggerProps({ value: \"#ef4444\" })}></button>\n      <button class=\"bare h-6 w-6 rounded-md border\"\n        {...machine.getSwatchTriggerProps({ value: \"#f59e0b\" })}></button>\n      <button class=\"bare h-6 w-6 rounded-md border\"\n        {...machine.getSwatchTriggerProps({ value: \"#10b981\" })}></button>\n      <button class=\"bare h-6 w-6 rounded-md border\"\n        {...machine.getSwatchTriggerProps({ value: \"#3b82f6\" })}></button>\n      <button class=\"bare h-6 w-6 rounded-md border\"\n        {...machine.getSwatchTriggerProps({ value: \"#8b5cf6\" })}></button>\n      <button class=\"bare h-6 w-6 rounded-md border\"\n        {...machine.getSwatchTriggerProps({ value: \"#ec4899\" })}></button>\n    </div>\n    <input type=\"hidden\" {...machine.getHiddenInputProps()} />\n  </div>\n</div>\n";
+export { with_presets_default as default };
+
+//# sourceMappingURL=with-presets.html.js.map

package/dist/combobox/combobox.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface ComboboxEvents {
   "SELECTED_ITEMS.SYNC": {};
   "HIGHLIGHTED_VALUE.SET": {
@@ -57,5 +57,4 @@ export interface ComboboxEvents {
   "LAYER.INTERACT_OUTSIDE": {};
   "CHILDREN_CHANGE": {};
 }
-export type ComboboxEvent = EventUnion<ComboboxEvents>;
-//# sourceMappingURL=combobox.events.d.ts.map
+export type ComboboxEvent = EventUnion<ComboboxEvents>;

package/dist/combobox/combobox.machine.d.ts

@@ -1,7 +1,6 @@
-import { ComboboxEvents } from "./combobox.events.js";
 import { ComboboxArgs, ComboboxContext, ComboboxState, isCustomValue, pickOutcome, stringifyValues } from "./combobox.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { ComboboxEvents } from "./combobox.events.js";
+import { Machine } from "@spinjs/components/fsm";
 export declare const isOpenPhase: (phase: string) => boolean;
 export declare function combobox(args: ComboboxArgs | undefined, authored: (name: string) => boolean): Machine<ComboboxContext, ComboboxEvents, ComboboxState>;
-export { isCustomValue, pickOutcome, stringifyValues };
-//# sourceMappingURL=combobox.machine.d.ts.map
+export { isCustomValue, pickOutcome, stringifyValues };

package/dist/combobox/combobox.machine.js

@@ -1,6 +1,6 @@
 import { initial, isCustomValue, parseItems, parseKeys, pickOutcome, stringifyValues } from "./combobox.state.js";
 import { clearHighlightedValue, clearInputValue, clearValue, closeOnSelect, highlightFirstItem, highlightFirstOrSelectedItem, inlineAutocomplete, isCustomValueGuard, moveHighlight, revertInputValue, revertsToValue, selectHighlightedItem, selectItem, setHighlightedValue, setInputValue } from "./combobox.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/combobox/combobox.machine.ts
 const at = (list, index) => list.at(index) ?? null;
 const isOpenPhase = (phase) => phase === "interacting" || phase === "suggesting";

package/dist/combobox/combobox.presentation.d.ts

@@ -1,6 +1,6 @@
-import { ComboboxEvents } from "./combobox.events.js";
 import { ComboboxArgs, ComboboxContext, ComboboxRow, ComboboxState } from "./combobox.state.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ComboboxEvents } from "./combobox.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 /**
  * Combobox definition: the DOM contract as data. The collection parses
  * once per prop identity: row objects are stable, so the `for` bindings
@@ -51,7 +51,7 @@ type SlotLike<R> = SlotViewFor<R, ComboboxContext, ComboboxEvents, ComboboxState
 /** The component's public state: the names the markup may key on. */
 export declare const def: {
   name: string;
-  machine: (props: ComboboxArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ComboboxContext, ComboboxEvents, ComboboxState>;
+  machine: (props: ComboboxArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<ComboboxContext, ComboboxEvents, ComboboxState>;
   start: (props: Record<string, unknown>) => "idle" | "suggesting";
   establish: (raw: Record<string, unknown>, authored: (name: string) => boolean) => {
     type: string;
@@ -67,7 +67,7 @@ export declare const def: {
     } & Record<string, unknown>) => void;
   }) => boolean;
   settled: ({ event, before, after, focus }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: ComboboxContext;
       readonly state: ComboboxState;
@@ -81,7 +81,7 @@ export declare const def: {
     readonly id: (part: string, slot?: unknown) => string;
     readonly focus: (part: string, slot?: unknown) => void;
     readonly measure: (part: string, slot?: unknown) => DOMRect | null;
-    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+    readonly send: (event: import("@spinjs/components/runtime").AnyEvent) => void;
   }) => void;
   parts: {
     root: {
@@ -151,7 +151,7 @@ export declare const def: {
       };
     };
     trigger: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ComboboxContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ComboboxEvents>, ComboboxState>, arg: unknown) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ComboboxContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ComboboxEvents>, ComboboxState>, arg: unknown) => {
         "aria-label": string;
         disabled: boolean;
         tabIndex: number | undefined;
@@ -428,6 +428,5 @@ export declare const def: {
   };
 };
 export type ComboboxApi = ApiOf<typeof def>;
-export declare const combobox: import("@spinjs/runtime").DefinedComponent<ComboboxApi, ComboboxArgs>;
-export type { ComboboxArgs, ComboboxRow };
-//# sourceMappingURL=combobox.presentation.d.ts.map
+export declare const combobox: import("@spinjs/components/runtime").DefinedComponent<ComboboxApi, ComboboxArgs>;
+export type { ComboboxArgs, ComboboxRow };

package/dist/combobox/combobox.presentation.js

@@ -1,6 +1,6 @@
-import { pickOutcome } from "./combobox.state.js";
 import { combobox as combobox$1, isOpenPhase } from "./combobox.machine.js";
-import { ariaControls, ariaHidden, ariaInvalid, ariaLabelledBy, ariaState, comboboxInput, defineComponent, disclosureTrigger, isComposing, listSurface, optionRow } from "@spinjs/runtime";
+import { pickOutcome } from "./combobox.state.js";
+import { ariaControls, ariaHidden, ariaInvalid, ariaLabelledBy, comboboxInput, defineComponent, disclosureTrigger, isComposing, listSurface, optionRow } from "@spinjs/components/runtime";
 // src/combobox/combobox.presentation.ts
 const toRow = (item) => {
 	if (typeof item.value !== "string" || item.value.length === 0) return;
@@ -359,7 +359,7 @@ const def = {
 				autoCapitalize: "none",
 				spellCheck: false,
 				value: display,
-				...ariaInvalid(ariaState(scope.context.invalid)),
+				...ariaInvalid(scope.context.invalid === true ? true : void 0),
 				...comboboxInput(scope, {
 					autocomplete: ctx.inputBehavior === "autocomplete" ? "both" : "list",
 					controls: { part: "content" },

package/dist/combobox/combobox.state.d.ts

@@ -76,5 +76,4 @@ export declare function initial(args: ComboboxArgs, authored: (name: string) =>
 export declare const stringifyValues: (ctx: ComboboxContext, values: readonly string[]) => string;
 export declare const pickOutcome: (ctx: ComboboxContext, value: string) => string[];
 export declare const isCustomValue: (ctx: ComboboxContext) => boolean;
-export { parseKeys };
-//# sourceMappingURL=combobox.state.d.ts.map
+export { parseKeys };

package/dist/combobox/combobox.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/combobox/combobox.state.ts
 /** Shape raw items the way `initial` does: arrays pass through, anything
 * else becomes empty. Shared by `initial` and the field contract, so a

package/dist/combobox/combobox.transitions.d.ts

@@ -1,6 +1,6 @@
-import { ComboboxEvents } from "./combobox.events.js";
 import { ComboboxContext } from "./combobox.state.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { ComboboxEvents } from "./combobox.events.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type Ctx = ComboboxContext;
 type Ev = ComboboxEvents;
 type ComboboxAssign<K extends keyof Ev = keyof Ev> = AssignFor<Ctx, Ev, K>;
@@ -24,5 +24,4 @@ export declare const closeOnSelect: (ctx: Ctx) => boolean;
 export declare const revertsToValue: (ctx: Ctx) => boolean;
 export declare const isCustomValueGuard: GuardFor<Ctx, Ev>;
 export declare const inlineSingleGuard: GuardFor<Ctx, Ev>;
-export { applySelection, at, completion, inlineSingle };
-//# sourceMappingURL=combobox.transitions.d.ts.map
+export { applySelection, at, completion, inlineSingle };

package/dist/combobox/examples/basic.html

@@ -6,13 +6,13 @@
 
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
     {...machine.getLabelProps()}
   >Fruit</label>
 
   <div class="relative" {...machine.getControlProps()}>
     <input
-      class={["w-full pr-16 transition-colors duration-fast ease-decelerate placeholder:text-text-muted", { "opacity-60 cursor-not-allowed": machine.disabled, "border-border-strong": machine.invalid, "border-primary": machine.open }]}
+      class={["w-full transition-colors duration-fast ease-decelerate placeholder:text-muted", { "opacity-60 cursor-not-allowed": machine.disabled, "border-strong": machine.invalid, "border-primary": machine.open }]}
       {...machine.getInputProps()}
     />
 
@@ -24,7 +24,7 @@
       <button
         class={["ghost icon s-sm", { "cursor-not-allowed": machine.disabled }]}
         {...machine.getTriggerProps()}
-      ><span aria-hidden="true" class={["text-xs transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class="inline-block icon-sm i-lucide-chevron-down" aria-hidden="true"></span></span></button>
+      ><span aria-hidden="true" class={["transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class="inline-block icon-sm i-lucide-chevron-down" aria-hidden="true"></span></span></button>
     </div>
 
     <div
@@ -32,22 +32,22 @@
       {...machine.getPositionerProps()}
     >
       <div
-        class={["overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg", { "opacity-60": machine.disabled }]}
+        class={["overflow-hidden rounded-lg border bg-surface-raised shadow-lg", { "opacity-60": machine.disabled }]}
         {...machine.getContentProps()}
       >
         <div class={["max-h-[15rem] overflow-y-auto p-1 transition-opacity duration-fast ease-decelerate", { "hidden": machine.empty }]} {...machine.getListProps()}>
           <template for={machine.getBlocks()} as={block} key={block.id}>
             <div class="py-1" {...machine.getItemGroupProps(block)}>
-              <span class="block px-2 py-1 text-xs font-medium text-text-muted" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+              <span class="block px-2 py-1 type-caption-emphasized text-muted" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
               <template for={machine.getRows(block)} as={row} key={row.value}>
                 <div
-                  class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "bg-surface": machine.highlightedValue === row.value, "text-primary": machine.value.includes(row.value), "cursor-not-allowed opacity-50": machine.disabled }]}
+                  class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate", { "bg-surface": machine.highlightedValue === row.value, "text-primary": machine.value.includes(row.value), "cursor-not-allowed opacity-50": machine.disabled }]}
                   {...machine.getItemProps(row)}
                 >
                   <span class="min-w-0 flex-1 truncate" {...machine.getItemTextProps(row)}>{row.label}</span>
                   <span
                     aria-hidden="true"
-                    class={["shrink-0 text-xs text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate", { "scale-100 opacity-100": machine.value.includes(row.value) }]}
+                    class={["shrink-0 text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate", { "scale-100 opacity-100": machine.value.includes(row.value) }]}
                     {...machine.getItemIndicatorProps(row)}
                   ><span class="inline-block icon-sm i-lucide-check" aria-hidden="true"></span></span>
                 </div>

package/dist/combobox/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/combobox/examples/basic.html
+var basic_default = "<script lang=\"ts\">\n  import { combobox } from \"../combobox.presentation.ts\";\n\n  const machine = combobox({items: [{\"value\":\"apple\",\"label\":\"Apple\"},{\"value\":\"apricot\",\"label\":\"Apricot\"},{\"value\":\"banana\",\"label\":\"Banana\"},{\"value\":\"blueberry\",\"label\":\"Blueberry\"}]});\n<\/script>\n\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled, \"text-primary\": machine.focused }]}\n    {...machine.getLabelProps()}\n  >Fruit</label>\n\n  <div class=\"relative\" {...machine.getControlProps()}>\n    <input\n      class={[\"w-full transition-colors duration-fast ease-decelerate placeholder:text-muted\", { \"opacity-60 cursor-not-allowed\": machine.disabled, \"border-strong\": machine.invalid, \"border-primary\": machine.open }]}\n      {...machine.getInputProps()}\n    />\n\n    <div class=\"absolute inset-y-0 right-0 flex items-center gap-1 pr-1\">\n      <button\n        class={[\"ghost icon s-sm\"]}\n        {...machine.getClearTriggerProps()}\n      ><span aria-hidden=\"true\"><span class=\"inline-block icon-sm i-lucide-x\" aria-hidden=\"true\"></span></span></button>\n      <button\n        class={[\"ghost icon s-sm\", { \"cursor-not-allowed\": machine.disabled }]}\n        {...machine.getTriggerProps()}\n      ><span aria-hidden=\"true\" class={[\"transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class=\"inline-block icon-sm i-lucide-chevron-down\" aria-hidden=\"true\"></span></span></button>\n    </div>\n\n    <div\n      class={[\"absolute left-0 top-full z-dropdown mt-1 w-full origin-top transition duration-fast ease-decelerate\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n      {...machine.getPositionerProps()}\n    >\n      <div\n        class={[\"overflow-hidden rounded-lg border bg-surface-raised shadow-lg\", { \"opacity-60\": machine.disabled }]}\n        {...machine.getContentProps()}\n      >\n        <div class={[\"max-h-[15rem] overflow-y-auto p-1 transition-opacity duration-fast ease-decelerate\", { \"hidden\": machine.empty }]} {...machine.getListProps()}>\n          <template for={machine.getBlocks()} as={block} key={block.id}>\n            <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n              <span class=\"block px-2 py-1 type-caption-emphasized text-muted\" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n              <template for={machine.getRows(block)} as={row} key={row.value}>\n                <div\n                  class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\", { \"bg-surface\": machine.highlightedValue === row.value, \"text-primary\": machine.value.includes(row.value), \"cursor-not-allowed opacity-50\": machine.disabled }]}\n                  {...machine.getItemProps(row)}\n                >\n                  <span class=\"min-w-0 flex-1 truncate\" {...machine.getItemTextProps(row)}>{row.label}</span>\n                  <span\n                    aria-hidden=\"true\"\n                    class={[\"shrink-0 text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate\", { \"scale-100 opacity-100\": machine.value.includes(row.value) }]}\n                    {...machine.getItemIndicatorProps(row)}\n                  ><span class=\"inline-block icon-sm i-lucide-check\" aria-hidden=\"true\"></span></span>\n                </div>\n              </template>\n            </div>\n          </template>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/combobox/examples/directory.html

@@ -15,13 +15,13 @@
 
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
     {...machine.getLabelProps()}
   >Assignee</label>
 
   <div class="relative" {...machine.getControlProps()}>
     <input
-      class={["w-full pr-16 transition-colors duration-fast ease-decelerate placeholder:text-text-muted", { "opacity-60 cursor-not-allowed": machine.disabled, "border-border-strong": machine.invalid, "border-primary": machine.open }]}
+      class={["w-full transition-colors duration-fast ease-decelerate placeholder:text-muted", { "opacity-60 cursor-not-allowed": machine.disabled, "border-strong": machine.invalid, "border-primary": machine.open }]}
       placeholder="Search directory..."
       {...machine.getInputProps()}
     />
@@ -34,7 +34,7 @@
       <button
         class={["ghost icon s-sm", { "cursor-not-allowed": machine.disabled }]}
         {...machine.getTriggerProps()}
-      ><span aria-hidden="true" class={["text-xs transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class="inline-block icon-sm i-lucide-chevron-down" aria-hidden="true"></span></span></button>
+      ><span aria-hidden="true" class={["transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class="inline-block icon-sm i-lucide-chevron-down" aria-hidden="true"></span></span></button>
     </div>
 
     <div
@@ -42,22 +42,22 @@
       {...machine.getPositionerProps()}
     >
       <div
-        class={["overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg", { "opacity-60": machine.disabled }]}
+        class={["overflow-hidden rounded-lg border bg-surface-raised shadow-lg", { "opacity-60": machine.disabled }]}
         {...machine.getContentProps()}
       >
         <div class={["max-h-[15rem] overflow-y-auto p-1 transition-opacity duration-fast ease-decelerate", { "hidden": machine.empty }]} {...machine.getListProps()}>
           <template for={machine.getBlocks()} as={block} key={block.id}>
             <div class="py-1" {...machine.getItemGroupProps(block)}>
-              <span class="block px-2 py-1 text-xs font-medium text-text-muted" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+              <span class="block px-2 py-1 type-caption-emphasized text-muted" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
               <template for={machine.getRows(block)} as={row} key={row.value}>
                 <div
-                  class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "bg-surface": machine.highlightedValue === row.value, "text-primary": machine.value.includes(row.value), "cursor-not-allowed opacity-50": machine.disabled }]}
+                  class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate", { "bg-surface": machine.highlightedValue === row.value, "text-primary": machine.value.includes(row.value), "cursor-not-allowed opacity-50": machine.disabled }]}
                   {...machine.getItemProps(row)}
                 >
                   <span class="min-w-0 flex-1 truncate" {...machine.getItemTextProps(row)}>{row.label}</span>
                   <span
                     aria-hidden="true"
-                    class={["shrink-0 text-xs text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate", { "scale-100 opacity-100": machine.value.includes(row.value) }]}
+                    class={["shrink-0 text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate", { "scale-100 opacity-100": machine.value.includes(row.value) }]}
                     {...machine.getItemIndicatorProps(row)}
                   ><span class="inline-block icon-sm i-lucide-check" aria-hidden="true"></span></span>
                 </div>

package/dist/combobox/examples/directory.html.js

@@ -0,0 +1,5 @@
+// src/combobox/examples/directory.html
+var directory_default = "<script lang=\"ts\">\n  import { combobox } from \"../combobox.presentation.ts\";\n\n  const machine = combobox({\n    placeholder: \"Search directory...\",\n    items: [\n      { value: \"ada\", label: \"Ada Lovelace — Analytical Engine\" },\n      { value: \"grace\", label: \"Grace Hopper — Compiler Systems\" },\n      { value: \"margaret\", label: \"Margaret Hamilton — Flight Software\" },\n      { value: \"barbara\", label: \"Barbara Liskov — Distributed Systems\" },\n      { value: \"radia\", label: \"Radia Perlman — Network Routing\" },\n    ],\n  });\n<\/script>\n\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled, \"text-primary\": machine.focused }]}\n    {...machine.getLabelProps()}\n  >Assignee</label>\n\n  <div class=\"relative\" {...machine.getControlProps()}>\n    <input\n      class={[\"w-full transition-colors duration-fast ease-decelerate placeholder:text-muted\", { \"opacity-60 cursor-not-allowed\": machine.disabled, \"border-strong\": machine.invalid, \"border-primary\": machine.open }]}\n      placeholder=\"Search directory...\"\n      {...machine.getInputProps()}\n    />\n\n    <div class=\"absolute inset-y-0 right-0 flex items-center gap-1 pr-1\">\n      <button\n        class={[\"ghost icon s-sm\"]}\n        {...machine.getClearTriggerProps()}\n      ><span aria-hidden=\"true\"><span class=\"inline-block icon-sm i-lucide-x\" aria-hidden=\"true\"></span></span></button>\n      <button\n        class={[\"ghost icon s-sm\", { \"cursor-not-allowed\": machine.disabled }]}\n        {...machine.getTriggerProps()}\n      ><span aria-hidden=\"true\" class={[\"transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class=\"inline-block icon-sm i-lucide-chevron-down\" aria-hidden=\"true\"></span></span></button>\n    </div>\n\n    <div\n      class={[\"absolute left-0 top-full z-dropdown mt-1 w-full origin-top transition duration-fast ease-decelerate\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n      {...machine.getPositionerProps()}\n    >\n      <div\n        class={[\"overflow-hidden rounded-lg border bg-surface-raised shadow-lg\", { \"opacity-60\": machine.disabled }]}\n        {...machine.getContentProps()}\n      >\n        <div class={[\"max-h-[15rem] overflow-y-auto p-1 transition-opacity duration-fast ease-decelerate\", { \"hidden\": machine.empty }]} {...machine.getListProps()}>\n          <template for={machine.getBlocks()} as={block} key={block.id}>\n            <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n              <span class=\"block px-2 py-1 type-caption-emphasized text-muted\" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n              <template for={machine.getRows(block)} as={row} key={row.value}>\n                <div\n                  class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\", { \"bg-surface\": machine.highlightedValue === row.value, \"text-primary\": machine.value.includes(row.value), \"cursor-not-allowed opacity-50\": machine.disabled }]}\n                  {...machine.getItemProps(row)}\n                >\n                  <span class=\"min-w-0 flex-1 truncate\" {...machine.getItemTextProps(row)}>{row.label}</span>\n                  <span\n                    aria-hidden=\"true\"\n                    class={[\"shrink-0 text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate\", { \"scale-100 opacity-100\": machine.value.includes(row.value) }]}\n                    {...machine.getItemIndicatorProps(row)}\n                  ><span class=\"inline-block icon-sm i-lucide-check\" aria-hidden=\"true\"></span></span>\n                </div>\n              </template>\n            </div>\n          </template>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { directory_default as default };
+
+//# sourceMappingURL=directory.html.js.map

package/dist/combobox/examples/grouping.html

@@ -5,26 +5,26 @@
 </script>
 
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
-  <label class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]} {...machine.getLabelProps()}>Technology</label>
+  <label class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]} {...machine.getLabelProps()}>Technology</label>
 
   <div class="relative" {...machine.getControlProps()}>
-    <input class={["w-full pr-16 transition-colors duration-fast ease-decelerate placeholder:text-text-muted", { "opacity-60 cursor-not-allowed": machine.disabled, "border-border-strong": machine.invalid, "border-primary": machine.open }]} {...machine.getInputProps()} placeholder="Select a technology..." />
+    <input class={["w-full transition-colors duration-fast ease-decelerate placeholder:text-muted", { "opacity-60 cursor-not-allowed": machine.disabled, "border-strong": machine.invalid, "border-primary": machine.open }]} {...machine.getInputProps()} placeholder="Select a technology..." />
 
     <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-1">
       <button class={["ghost icon s-sm"]} {...machine.getClearTriggerProps()}><span aria-hidden="true"><span class="inline-block icon-sm i-lucide-x" aria-hidden="true"></span></span></button>
-      <button class={["ghost icon s-sm", { "cursor-not-allowed": machine.disabled }]} {...machine.getTriggerProps()}><span aria-hidden="true" class={["text-xs transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class="inline-block icon-sm i-lucide-chevron-down" aria-hidden="true"></span></span></button>
+      <button class={["ghost icon s-sm", { "cursor-not-allowed": machine.disabled }]} {...machine.getTriggerProps()}><span aria-hidden="true" class={["transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class="inline-block icon-sm i-lucide-chevron-down" aria-hidden="true"></span></span></button>
     </div>
 
     <div class={["absolute left-0 top-full z-dropdown mt-1 w-full origin-top transition duration-fast ease-decelerate", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]} {...machine.getPositionerProps()}>
-      <div class={["overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg", { "opacity-60": machine.disabled }]} {...machine.getContentProps()}>
+      <div class={["overflow-hidden rounded-lg border bg-surface-raised shadow-lg", { "opacity-60": machine.disabled }]} {...machine.getContentProps()}>
         <div class={["max-h-[15rem] overflow-y-auto p-1 transition-opacity duration-fast ease-decelerate", { "hidden": machine.empty }]} {...machine.getListProps()}>
           <template for={machine.getBlocks()} as={block} key={block.id}>
             <div class="py-1" {...machine.getItemGroupProps(block)}>
-              <span class="block px-2 py-1 text-xs font-medium text-text-muted" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+              <span class="block px-2 py-1 type-caption-emphasized text-muted" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
               <template for={machine.getRows(block)} as={row} key={row.value}>
-                <div class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "bg-surface": machine.highlightedValue === row.value, "text-primary": machine.value.includes(row.value), "cursor-not-allowed opacity-50": machine.disabled }]} {...machine.getItemProps(row)}>
+                <div class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate", { "bg-surface": machine.highlightedValue === row.value, "text-primary": machine.value.includes(row.value), "cursor-not-allowed opacity-50": machine.disabled }]} {...machine.getItemProps(row)}>
                   <span class="min-w-0 flex-1 truncate" {...machine.getItemTextProps(row)}>{row.label}</span>
-                  <span aria-hidden="true" class={["shrink-0 text-xs text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate", { "scale-100 opacity-100": machine.value.includes(row.value) }]} {...machine.getItemIndicatorProps(row)}><span class="inline-block icon-sm i-lucide-check" aria-hidden="true"></span></span>
+                  <span aria-hidden="true" class={["shrink-0 text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate", { "scale-100 opacity-100": machine.value.includes(row.value) }]} {...machine.getItemIndicatorProps(row)}><span class="inline-block icon-sm i-lucide-check" aria-hidden="true"></span></span>
                 </div>
               </template>
             </div>

package/dist/combobox/examples/grouping.html.js

@@ -0,0 +1,5 @@
+// src/combobox/examples/grouping.html
+var grouping_default = "<script lang=\"ts\">\n  import { combobox } from \"../combobox.presentation.ts\";\n\n  const machine = combobox({items: [{\"value\":\"react\",\"label\":\"React\",\"group\":\"JS\"},{\"value\":\"solid\",\"label\":\"Solid\",\"group\":\"JS\"},{\"value\":\"vue\",\"label\":\"Vue\",\"group\":\"JS\"},{\"value\":\"svelte\",\"label\":\"Svelte\",\"group\":\"JS\"},{\"value\":\"panda\",\"label\":\"Panda\",\"group\":\"CSS\"},{\"value\":\"tailwind\",\"label\":\"Tailwind\",\"group\":\"CSS\"}]});\n<\/script>\n\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled, \"text-primary\": machine.focused }]} {...machine.getLabelProps()}>Technology</label>\n\n  <div class=\"relative\" {...machine.getControlProps()}>\n    <input class={[\"w-full transition-colors duration-fast ease-decelerate placeholder:text-muted\", { \"opacity-60 cursor-not-allowed\": machine.disabled, \"border-strong\": machine.invalid, \"border-primary\": machine.open }]} {...machine.getInputProps()} placeholder=\"Select a technology...\" />\n\n    <div class=\"absolute inset-y-0 right-0 flex items-center gap-1 pr-1\">\n      <button class={[\"ghost icon s-sm\"]} {...machine.getClearTriggerProps()}><span aria-hidden=\"true\"><span class=\"inline-block icon-sm i-lucide-x\" aria-hidden=\"true\"></span></span></button>\n      <button class={[\"ghost icon s-sm\", { \"cursor-not-allowed\": machine.disabled }]} {...machine.getTriggerProps()}><span aria-hidden=\"true\" class={[\"transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class=\"inline-block icon-sm i-lucide-chevron-down\" aria-hidden=\"true\"></span></span></button>\n    </div>\n\n    <div class={[\"absolute left-0 top-full z-dropdown mt-1 w-full origin-top transition duration-fast ease-decelerate\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]} {...machine.getPositionerProps()}>\n      <div class={[\"overflow-hidden rounded-lg border bg-surface-raised shadow-lg\", { \"opacity-60\": machine.disabled }]} {...machine.getContentProps()}>\n        <div class={[\"max-h-[15rem] overflow-y-auto p-1 transition-opacity duration-fast ease-decelerate\", { \"hidden\": machine.empty }]} {...machine.getListProps()}>\n          <template for={machine.getBlocks()} as={block} key={block.id}>\n            <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n              <span class=\"block px-2 py-1 type-caption-emphasized text-muted\" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n              <template for={machine.getRows(block)} as={row} key={row.value}>\n                <div class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\", { \"bg-surface\": machine.highlightedValue === row.value, \"text-primary\": machine.value.includes(row.value), \"cursor-not-allowed opacity-50\": machine.disabled }]} {...machine.getItemProps(row)}>\n                  <span class=\"min-w-0 flex-1 truncate\" {...machine.getItemTextProps(row)}>{row.label}</span>\n                  <span aria-hidden=\"true\" class={[\"shrink-0 text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate\", { \"scale-100 opacity-100\": machine.value.includes(row.value) }]} {...machine.getItemIndicatorProps(row)}><span class=\"inline-block icon-sm i-lucide-check\" aria-hidden=\"true\"></span></span>\n                </div>\n              </template>\n            </div>\n          </template>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { grouping_default as default };
+
+//# sourceMappingURL=grouping.html.js.map

package/dist/combobox/examples/multiple.html

@@ -5,26 +5,26 @@
 </script>
 
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
-  <label class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]} {...machine.getLabelProps()}>Skills</label>
+  <label class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]} {...machine.getLabelProps()}>Skills</label>
 
   <div class="relative" {...machine.getControlProps()}>
-    <input class={["w-full pr-16 transition-colors duration-fast ease-decelerate placeholder:text-text-muted", { "opacity-60 cursor-not-allowed": machine.disabled, "border-border-strong": machine.invalid, "border-primary": machine.open }]} {...machine.getInputProps()} placeholder="Add skills..." />
+    <input class={["w-full transition-colors duration-fast ease-decelerate placeholder:text-muted", { "opacity-60 cursor-not-allowed": machine.disabled, "border-strong": machine.invalid, "border-primary": machine.open }]} {...machine.getInputProps()} placeholder="Add skills..." />
 
     <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-1">
       <button class={["ghost icon s-sm"]} {...machine.getClearTriggerProps()}><span aria-hidden="true"><span class="inline-block icon-sm i-lucide-x" aria-hidden="true"></span></span></button>
-      <button class={["ghost icon s-sm", { "cursor-not-allowed": machine.disabled }]} {...machine.getTriggerProps()}><span aria-hidden="true" class={["text-xs transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class="inline-block icon-sm i-lucide-chevron-down" aria-hidden="true"></span></span></button>
+      <button class={["ghost icon s-sm", { "cursor-not-allowed": machine.disabled }]} {...machine.getTriggerProps()}><span aria-hidden="true" class={["transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class="inline-block icon-sm i-lucide-chevron-down" aria-hidden="true"></span></span></button>
     </div>
 
     <div class={["absolute left-0 top-full z-dropdown mt-1 w-full origin-top transition duration-fast ease-decelerate", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]} {...machine.getPositionerProps()}>
-      <div class={["overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg", { "opacity-60": machine.disabled }]} {...machine.getContentProps()}>
+      <div class={["overflow-hidden rounded-lg border bg-surface-raised shadow-lg", { "opacity-60": machine.disabled }]} {...machine.getContentProps()}>
         <div class={["max-h-[15rem] overflow-y-auto p-1 transition-opacity duration-fast ease-decelerate", { "hidden": machine.empty }]} {...machine.getListProps()}>
           <template for={machine.getBlocks()} as={block} key={block.id}>
             <div class="py-1" {...machine.getItemGroupProps(block)}>
-              <span class="block px-2 py-1 text-xs font-medium text-text-muted" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+              <span class="block px-2 py-1 type-caption-emphasized text-muted" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
               <template for={machine.getRows(block)} as={row} key={row.value}>
-                <div class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "bg-surface": machine.highlightedValue === row.value, "text-primary": machine.value.includes(row.value), "cursor-not-allowed opacity-50": machine.disabled }]} {...machine.getItemProps(row)}>
+                <div class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate", { "bg-surface": machine.highlightedValue === row.value, "text-primary": machine.value.includes(row.value), "cursor-not-allowed opacity-50": machine.disabled }]} {...machine.getItemProps(row)}>
                   <span class="min-w-0 flex-1 truncate" {...machine.getItemTextProps(row)}>{row.label}</span>
-                  <span aria-hidden="true" class={["shrink-0 text-xs text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate", { "scale-100 opacity-100": machine.value.includes(row.value) }]} {...machine.getItemIndicatorProps(row)}><span class="inline-block icon-sm i-lucide-check" aria-hidden="true"></span></span>
+                  <span aria-hidden="true" class={["shrink-0 text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate", { "scale-100 opacity-100": machine.value.includes(row.value) }]} {...machine.getItemIndicatorProps(row)}><span class="inline-block icon-sm i-lucide-check" aria-hidden="true"></span></span>
                 </div>
               </template>
             </div>
@@ -33,5 +33,5 @@
       </div>
     </div>
   </div>
-  <p class="mt-2 text-xs text-text-muted" show={machine.hasSelectedItems}>Selected: {machine.valueAsString}</p>
+  <div class="grid gap-2 text-muted" show={machine.hasSelectedItems}>Selected: {machine.valueAsString}</div>
 </div>

package/dist/combobox/examples/multiple.html.js

@@ -0,0 +1,5 @@
+// src/combobox/examples/multiple.html
+var multiple_default = "<script lang=\"ts\">\n  import { combobox } from \"../combobox.presentation.ts\";\n\n  const machine = combobox({multiple: true, items: [{\"value\":\"javascript\",\"label\":\"JavaScript\"},{\"value\":\"typescript\",\"label\":\"TypeScript\"},{\"value\":\"react\",\"label\":\"React\"},{\"value\":\"vue\",\"label\":\"Vue\"},{\"value\":\"angular\",\"label\":\"Angular\"},{\"value\":\"svelte\",\"label\":\"Svelte\"}]});\n<\/script>\n\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled, \"text-primary\": machine.focused }]} {...machine.getLabelProps()}>Skills</label>\n\n  <div class=\"relative\" {...machine.getControlProps()}>\n    <input class={[\"w-full transition-colors duration-fast ease-decelerate placeholder:text-muted\", { \"opacity-60 cursor-not-allowed\": machine.disabled, \"border-strong\": machine.invalid, \"border-primary\": machine.open }]} {...machine.getInputProps()} placeholder=\"Add skills...\" />\n\n    <div class=\"absolute inset-y-0 right-0 flex items-center gap-1 pr-1\">\n      <button class={[\"ghost icon s-sm\"]} {...machine.getClearTriggerProps()}><span aria-hidden=\"true\"><span class=\"inline-block icon-sm i-lucide-x\" aria-hidden=\"true\"></span></span></button>\n      <button class={[\"ghost icon s-sm\", { \"cursor-not-allowed\": machine.disabled }]} {...machine.getTriggerProps()}><span aria-hidden=\"true\" class={[\"transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]} {...machine.getTriggerIndicatorProps()}><span class=\"inline-block icon-sm i-lucide-chevron-down\" aria-hidden=\"true\"></span></span></button>\n    </div>\n\n    <div class={[\"absolute left-0 top-full z-dropdown mt-1 w-full origin-top transition duration-fast ease-decelerate\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]} {...machine.getPositionerProps()}>\n      <div class={[\"overflow-hidden rounded-lg border bg-surface-raised shadow-lg\", { \"opacity-60\": machine.disabled }]} {...machine.getContentProps()}>\n        <div class={[\"max-h-[15rem] overflow-y-auto p-1 transition-opacity duration-fast ease-decelerate\", { \"hidden\": machine.empty }]} {...machine.getListProps()}>\n          <template for={machine.getBlocks()} as={block} key={block.id}>\n            <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n              <span class=\"block px-2 py-1 type-caption-emphasized text-muted\" {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n              <template for={machine.getRows(block)} as={row} key={row.value}>\n                <div class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\", { \"bg-surface\": machine.highlightedValue === row.value, \"text-primary\": machine.value.includes(row.value), \"cursor-not-allowed opacity-50\": machine.disabled }]} {...machine.getItemProps(row)}>\n                  <span class=\"min-w-0 flex-1 truncate\" {...machine.getItemTextProps(row)}>{row.label}</span>\n                  <span aria-hidden=\"true\" class={[\"shrink-0 text-primary scale-50 opacity-0 transition-all duration-fast ease-decelerate\", { \"scale-100 opacity-100\": machine.value.includes(row.value) }]} {...machine.getItemIndicatorProps(row)}><span class=\"inline-block icon-sm i-lucide-check\" aria-hidden=\"true\"></span></span>\n                </div>\n              </template>\n            </div>\n          </template>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"grid gap-2 text-muted\" show={machine.hasSelectedItems}>Selected: {machine.valueAsString}</div>\n</div>\n";
+export { multiple_default as default };
+
+//# sourceMappingURL=multiple.html.js.map

package/dist/compiler/emit.d.ts

@@ -0,0 +1,6 @@
+import { ComponentIr } from "@spinjs/components/runtime";
+export interface EmitOutput {
+  readonly js: string;
+  readonly bindings: number;
+}
+export declare function emit(ir: ComponentIr): EmitOutput;