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

package/dist/listbox/listbox.machine.d.ts

@@ -1,6 +1,5 @@
 import { ListboxArgs, ListboxContext, ListboxState, hasValue, stringifyValues } from "./listbox.state.js";
 import { ListboxEvents } from "./listbox.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function listbox(args: ListboxArgs | undefined, authored: (name: string) => boolean): Machine<ListboxContext, ListboxEvents, ListboxState>;
-export { hasValue, stringifyValues };
-//# sourceMappingURL=listbox.machine.d.ts.map
+export { hasValue, stringifyValues };

package/dist/listbox/listbox.machine.js

@@ -1,6 +1,6 @@
 import { hasValue, initial, parseItems, rowsOf, stringifyValues } from "./listbox.state.js";
 import { clearHighlightedValue, clearItem, clearValue, itemClickInner, navigateInner, pointerMove, selectItem, setFocused, setHighlightedItem, setHighlightedValue, setValue, syncSelectedItems, typeaheadInner } from "./listbox.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/listbox/listbox.machine.ts
 function listbox(args = {}, authored) {
 	return createMachine({

package/dist/listbox/listbox.presentation.d.ts

@@ -1,6 +1,6 @@
 import { ListboxArgs, ListboxContext } from "./listbox.state.js";
 import { ListboxEvents } from "./listbox.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 /** Listbox definition: the DOM contract as data. Navigation computes its
  * target against the rows the view holds and sends it in. */
 export interface ListboxItem {
@@ -15,6 +15,8 @@ export interface ListboxRow {
   readonly disabled: boolean;
   readonly group: string;
   readonly index: number;
+  readonly highlighted?: boolean | undefined;
+  readonly selected?: boolean | undefined;
 }
 export interface ListboxBlock {
   readonly id: string;
@@ -44,7 +46,7 @@ type ScopeLike = ViewFor<ListboxContext, ListboxEvents, "idle">;
 type SlotLike<R> = SlotViewFor<R, ListboxContext, ListboxEvents, "idle">;
 export declare const def: {
   name: string;
-  machine: (args: ListboxArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ListboxContext, ListboxEvents, "idle">;
+  machine: (args: ListboxArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<ListboxContext, ListboxEvents, "idle">;
   start: "idle";
   reconcile: ({ context, parsed, send }: {
     readonly context: ListboxContext;
@@ -289,6 +291,5 @@ export declare const def: {
   };
 };
 export type ListboxApi = ApiOf<typeof def>;
-export declare const listbox: import("@spinjs/runtime").DefinedComponent<ListboxApi, ListboxArgs>;
-export type { ListboxArgs };
-//# sourceMappingURL=listbox.presentation.d.ts.map
+export declare const listbox: import("@spinjs/components/runtime").DefinedComponent<ListboxApi, ListboxArgs>;
+export type { ListboxArgs };

package/dist/listbox/listbox.presentation.js

@@ -1,5 +1,5 @@
 import { listbox as listbox$1 } from "./listbox.machine.js";
-import { ariaHidden, ariaLabelledBy, defineComponent, isComposing, listSurface, optionRow } from "@spinjs/runtime";
+import { ariaHidden, ariaLabelledBy, defineComponent, isComposing, listSurface, optionRow } from "@spinjs/components/runtime";
 // src/listbox/listbox.presentation.ts
 const toRow = (item) => {
 	if (typeof item.value !== "string" || item.value.length === 0) return void 0;

package/dist/listbox/listbox.state.d.ts

@@ -51,5 +51,4 @@ export declare const parseKeys: (value: unknown) => string[];
 export declare function initial(args: ListboxArgs | undefined, authored: (name: string) => boolean): ListboxContext;
 export declare const hasValue: (ctx: ListboxContext) => boolean;
 export declare const stringifyValues: (ctx: ListboxContext) => string;
-export { rowsOf };
-//# sourceMappingURL=listbox.state.d.ts.map
+export { rowsOf };

package/dist/listbox/listbox.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/listbox/listbox.state.ts
 const rowsOf = (items) => {
 	const rows = [];

package/dist/listbox/listbox.transitions.d.ts

@@ -1,6 +1,6 @@
-import { ListboxContext } from "./listbox.state.js";
 import { ListboxEvents } from "./listbox.events.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { ListboxContext } from "./listbox.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
 type ListboxAssign<K extends keyof ListboxEvents = keyof ListboxEvents> = AssignFor<ListboxContext, ListboxEvents, K>;
 export declare const setFocused: () => Partial<ListboxContext>;
 export declare const clearHighlightedValue: () => Partial<ListboxContext>;
@@ -16,5 +16,4 @@ export declare const contentFocusAssigns: (ctx: ListboxContext) => Partial<Listb
 export declare const typeaheadInner: ListboxAssign<"CONTENT.TYPEAHEAD">;
 export declare const pointerMove: ListboxAssign<"ITEM.POINTER_MOVE">;
 export declare const navigateInner: ListboxAssign<"NAVIGATE">;
-export {};
-//# sourceMappingURL=listbox.transitions.d.ts.map
+export {};

package/dist/menu/examples/basic.html

@@ -16,47 +16,49 @@ const machine = menu({
       {...machine.getTriggerProps()}>
       <span class="truncate">Release</span>
       <span aria-hidden="true"
-        class={["text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]}
-        {...machine.getTriggerIndicatorProps()}><span class="inline-block i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+        class={["type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]}
+        {...machine.getTriggerIndicatorProps()}><span class="inline-block i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
   </div>
   <div {...machine.getPositionerProps()}>
     <panel {...machine.getContentProps()}>
       <template for={machine.getBlocks()} as={block} key={block.id}>
         <div class="py-1" {...machine.getItemGroupProps(block)}>
-          <span show={block.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+          <span show={block.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
             {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
           <template for={machine.getRows(block)} as={row} key={row.value}>
             <div
-              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
+              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
               {...machine.getItemProps(row)}>
               <span class="min-w-0 flex-1 truncate"
                 {...machine.getItemTextProps(row)}>{row.label}</span>
-              <span class="shrink-0 text-xs text-text-muted"
+              <span class="shrink-0 type-caption text-muted"
                 {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>
               <span aria-hidden="true"
                 class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": row.checked }]}
-                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
               <span aria-hidden="true"
-                class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
-                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
-              <panel show={machine.openSubmenu === row.value}
+                class={["shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
+                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right type-caption" aria-hidden="true"></span></span>
+              <panel
+                class="absolute start-full top-0 ms-2 min-w-40"
+                show={machine.openSubmenu === row.value}
                 {...machine.getSubmenuContentProps(row)}>
                 <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>
                   <div class="py-1" {...machine.getItemGroupProps(sub)}>
-                    <span show={sub.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+                    <span show={sub.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
                       {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>
                     <template for={machine.getRows(sub)} as={child} key={child.value}>
                       <div
-                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
+                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
                         {...machine.getSubmenuItemProps(child)}>
                         <span class="min-w-0 flex-1 truncate"
                           {...machine.getItemTextProps(child)}>{child.label}</span>
-                        <span class="shrink-0 text-xs text-text-muted"
+                        <span class="shrink-0 type-caption text-muted"
                           {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>
                         <span aria-hidden="true"
                           class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": child.checked }]}
-                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
                       </div>
                     </template>
                   </div>

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

@@ -0,0 +1,5 @@
+// src/menu/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { menu } from \"../menu.presentation.ts\";\n\nconst machine = menu({\n  items: [{ \"value\": \"new\", \"label\": \"New release\", \"shortcut\": \"Ctrl+N\" }, {\n    \"value\": \"open\",\n    \"label\": \"Open…\",\n    \"shortcut\": \"Ctrl+O\",\n  }, { \"value\": \"promote\", \"label\": \"Promote to production\", \"shortcut\": \"Ctrl+S\" }],\n});\n<\/script>\n<div class=\"relative inline-block\">\n  <div class=\"relative\" {...machine.getContextTriggerProps()}>\n    <button\n      class=\"secondary s-sm inline-flex items-center gap-2\"\n      {...machine.getTriggerProps()}>\n      <span class=\"truncate\">Release</span>\n      <span aria-hidden=\"true\"\n        class={[\"type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.isOpen }]}\n        {...machine.getTriggerIndicatorProps()}><span class=\"inline-block i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n  </div>\n  <div {...machine.getPositionerProps()}>\n    <panel {...machine.getContentProps()}>\n      <template for={machine.getBlocks()} as={block} key={block.id}>\n        <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n          <span show={block.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n            {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n          <template for={machine.getRows(block)} as={row} key={row.value}>\n            <div\n              class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": row.disabled }]}\n              {...machine.getItemProps(row)}>\n              <span class=\"min-w-0 flex-1 truncate\"\n                {...machine.getItemTextProps(row)}>{row.label}</span>\n              <span class=\"shrink-0 type-caption text-muted\"\n                {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": row.checked }]}\n                {...machine.getItemIndicatorProps(row)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-90\": machine.openSubmenu === row.value }]}\n                {...machine.getItemSubmenuIndicatorProps(row)}><span class=\"inline-block i-lucide-chevron-right type-caption\" aria-hidden=\"true\"></span></span>\n              <panel\n                class=\"absolute start-full top-0 ms-2 min-w-40\"\n                show={machine.openSubmenu === row.value}\n                {...machine.getSubmenuContentProps(row)}>\n                <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>\n                  <div class=\"py-1\" {...machine.getItemGroupProps(sub)}>\n                    <span show={sub.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n                      {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>\n                    <template for={machine.getRows(sub)} as={child} key={child.value}>\n                      <div\n                        class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": child.disabled }]}\n                        {...machine.getSubmenuItemProps(child)}>\n                        <span class=\"min-w-0 flex-1 truncate\"\n                          {...machine.getItemTextProps(child)}>{child.label}</span>\n                        <span class=\"shrink-0 type-caption text-muted\"\n                          {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>\n                        <span aria-hidden=\"true\"\n                          class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": child.checked }]}\n                          {...machine.getItemIndicatorProps(child)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n                      </div>\n                    </template>\n                  </div>\n                  <hr show={sub.separator}\n                    {...machine.getSeparatorProps(sub)} />\n                </template>\n              </panel>\n            </div>\n          </template>\n        </div>\n        <hr show={block.separator}\n          {...machine.getSeparatorProps(block)} />\n      </template>\n    </panel>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/menu/examples/context.html

@@ -15,7 +15,7 @@ const machine = menu({
 </script>
 <div class="relative inline-block">
   <div
-    class="flex items-center justify-center w-64 h-[8rem] rounded-lg border border-solid border-border bg-surface-raised p-4 text-center text-sm text-text-muted cursor-context-menu"
+    class="flex items-center justify-center w-64 h-[8rem] rounded-lg border bg-surface-raised p-4 text-center type-body text-muted cursor-context-menu"
     {...machine.getContextTriggerProps()}>
     Deploy #4821 · v4.12.0 — right-click for actions
   </div>
@@ -23,39 +23,41 @@ const machine = menu({
     <panel {...machine.getContentProps()}>
       <template for={machine.getBlocks()} as={block} key={block.id}>
         <div class="py-1" {...machine.getItemGroupProps(block)}>
-          <span show={block.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+          <span show={block.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
             {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
           <template for={machine.getRows(block)} as={row} key={row.value}>
             <div
-              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
+              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
               {...machine.getItemProps(row)}>
               <span class="min-w-0 flex-1 truncate"
                 {...machine.getItemTextProps(row)}>{row.label}</span>
-              <span class="shrink-0 text-xs text-text-muted"
+              <span class="shrink-0 type-caption text-muted"
                 {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>
               <span aria-hidden="true"
                 class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": row.checked }]}
-                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
               <span aria-hidden="true"
-                class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
-                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
-              <panel show={machine.openSubmenu === row.value}
+                class={["shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
+                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right type-caption" aria-hidden="true"></span></span>
+              <panel
+                class="absolute start-full top-0 ms-2 min-w-40"
+                show={machine.openSubmenu === row.value}
                 {...machine.getSubmenuContentProps(row)}>
                 <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>
                   <div class="py-1" {...machine.getItemGroupProps(sub)}>
-                    <span show={sub.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+                    <span show={sub.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
                       {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>
                     <template for={machine.getRows(sub)} as={child} key={child.value}>
                       <div
-                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
+                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
                         {...machine.getSubmenuItemProps(child)}>
                         <span class="min-w-0 flex-1 truncate"
                           {...machine.getItemTextProps(child)}>{child.label}</span>
-                        <span class="shrink-0 text-xs text-text-muted"
+                        <span class="shrink-0 type-caption text-muted"
                           {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>
                         <span aria-hidden="true"
                           class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": child.checked }]}
-                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
                       </div>
                     </template>
                   </div>

package/dist/menu/examples/context.html.js

@@ -0,0 +1,5 @@
+// src/menu/examples/context.html
+var context_default = "<script lang=\"ts\">\nimport { menu } from \"../menu.presentation.ts\";\n\nconst machine = menu({\n  items: [\n    { value: \"url\", label: \"Copy deploy URL\" },\n    { value: \"logs\", label: \"View logs\" },\n    { value: \"rollback\", label: \"Roll back\" },\n    { separator: true },\n    { value: \"delete\", label: \"Delete deploy\", disabled: true },\n    { separator: true },\n    { value: \"settings\", label: \"Deploy settings\" },\n  ],\n});\n<\/script>\n<div class=\"relative inline-block\">\n  <div\n    class=\"flex items-center justify-center w-64 h-[8rem] rounded-lg border bg-surface-raised p-4 text-center type-body text-muted cursor-context-menu\"\n    {...machine.getContextTriggerProps()}>\n    Deploy #4821 · v4.12.0 — right-click for actions\n  </div>\n  <div {...machine.getPositionerProps()}>\n    <panel {...machine.getContentProps()}>\n      <template for={machine.getBlocks()} as={block} key={block.id}>\n        <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n          <span show={block.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n            {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n          <template for={machine.getRows(block)} as={row} key={row.value}>\n            <div\n              class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": row.disabled }]}\n              {...machine.getItemProps(row)}>\n              <span class=\"min-w-0 flex-1 truncate\"\n                {...machine.getItemTextProps(row)}>{row.label}</span>\n              <span class=\"shrink-0 type-caption text-muted\"\n                {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": row.checked }]}\n                {...machine.getItemIndicatorProps(row)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-90\": machine.openSubmenu === row.value }]}\n                {...machine.getItemSubmenuIndicatorProps(row)}><span class=\"inline-block i-lucide-chevron-right type-caption\" aria-hidden=\"true\"></span></span>\n              <panel\n                class=\"absolute start-full top-0 ms-2 min-w-40\"\n                show={machine.openSubmenu === row.value}\n                {...machine.getSubmenuContentProps(row)}>\n                <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>\n                  <div class=\"py-1\" {...machine.getItemGroupProps(sub)}>\n                    <span show={sub.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n                      {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>\n                    <template for={machine.getRows(sub)} as={child} key={child.value}>\n                      <div\n                        class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": child.disabled }]}\n                        {...machine.getSubmenuItemProps(child)}>\n                        <span class=\"min-w-0 flex-1 truncate\"\n                          {...machine.getItemTextProps(child)}>{child.label}</span>\n                        <span class=\"shrink-0 type-caption text-muted\"\n                          {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>\n                        <span aria-hidden=\"true\"\n                          class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": child.checked }]}\n                          {...machine.getItemIndicatorProps(child)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n                      </div>\n                    </template>\n                  </div>\n                  <hr show={sub.separator}\n                    {...machine.getSeparatorProps(sub)} />\n                </template>\n              </panel>\n            </div>\n          </template>\n        </div>\n        <hr show={block.separator}\n          {...machine.getSeparatorProps(block)} />\n      </template>\n    </panel>\n  </div>\n</div>\n";
+export { context_default as default };
+
+//# sourceMappingURL=context.html.js.map

package/dist/menu/examples/groups.html

@@ -29,47 +29,49 @@ const machine = menu({
       {...machine.getTriggerProps()}>
       <span class="truncate">Deploy</span>
       <span aria-hidden="true"
-        class={["text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]}
-        {...machine.getTriggerIndicatorProps()}><span class="inline-block i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+        class={["type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]}
+        {...machine.getTriggerIndicatorProps()}><span class="inline-block i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
   </div>
   <div {...machine.getPositionerProps()}>
     <panel {...machine.getContentProps()}>
       <template for={machine.getBlocks()} as={block} key={block.id}>
         <div class="py-1" {...machine.getItemGroupProps(block)}>
-          <span show={block.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+          <span show={block.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
             {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
           <template for={machine.getRows(block)} as={row} key={row.value}>
             <div
-              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
+              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
               {...machine.getItemProps(row)}>
               <span class="min-w-0 flex-1 truncate"
                 {...machine.getItemTextProps(row)}>{row.label}</span>
-              <span class="shrink-0 text-xs text-text-muted"
+              <span class="shrink-0 type-caption text-muted"
                 {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>
               <span aria-hidden="true"
                 class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": row.checked }]}
-                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
               <span aria-hidden="true"
-                class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
-                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
-              <panel show={machine.openSubmenu === row.value}
+                class={["shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
+                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right type-caption" aria-hidden="true"></span></span>
+              <panel
+                class="absolute start-full top-0 ms-2 min-w-40"
+                show={machine.openSubmenu === row.value}
                 {...machine.getSubmenuContentProps(row)}>
                 <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>
                   <div class="py-1" {...machine.getItemGroupProps(sub)}>
-                    <span show={sub.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+                    <span show={sub.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
                       {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>
                     <template for={machine.getRows(sub)} as={child} key={child.value}>
                       <div
-                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
+                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
                         {...machine.getSubmenuItemProps(child)}>
                         <span class="min-w-0 flex-1 truncate"
                           {...machine.getItemTextProps(child)}>{child.label}</span>
-                        <span class="shrink-0 text-xs text-text-muted"
+                        <span class="shrink-0 type-caption text-muted"
                           {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>
                         <span aria-hidden="true"
                           class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": child.checked }]}
-                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
                       </div>
                     </template>
                   </div>

package/dist/menu/examples/groups.html.js

@@ -0,0 +1,5 @@
+// src/menu/examples/groups.html
+var groups_default = "<script lang=\"ts\">\nimport { menu } from \"../menu.presentation.ts\";\n\nconst machine = menu({\n  items: [\n    {\n      group: \"Release\",\n      items: [\n        { value: \"new\", label: \"New release\" },\n        { value: \"promote\", label: \"Promote\" },\n        { value: \"rollback\", label: \"Roll back\" },\n      ],\n    },\n    {\n      group: \"Instances\",\n      items: [\n        { value: \"restart\", label: \"Restart\" },\n        { value: \"drain\", label: \"Drain\" },\n        { value: \"logs\", label: \"View logs\" },\n      ],\n    },\n  ],\n});\n<\/script>\n<div class=\"relative inline-block\">\n  <div class=\"relative\" {...machine.getContextTriggerProps()}>\n    <button\n      class=\"secondary s-sm inline-flex items-center gap-2\"\n      {...machine.getTriggerProps()}>\n      <span class=\"truncate\">Deploy</span>\n      <span aria-hidden=\"true\"\n        class={[\"type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.isOpen }]}\n        {...machine.getTriggerIndicatorProps()}><span class=\"inline-block i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n  </div>\n  <div {...machine.getPositionerProps()}>\n    <panel {...machine.getContentProps()}>\n      <template for={machine.getBlocks()} as={block} key={block.id}>\n        <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n          <span show={block.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n            {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n          <template for={machine.getRows(block)} as={row} key={row.value}>\n            <div\n              class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": row.disabled }]}\n              {...machine.getItemProps(row)}>\n              <span class=\"min-w-0 flex-1 truncate\"\n                {...machine.getItemTextProps(row)}>{row.label}</span>\n              <span class=\"shrink-0 type-caption text-muted\"\n                {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": row.checked }]}\n                {...machine.getItemIndicatorProps(row)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-90\": machine.openSubmenu === row.value }]}\n                {...machine.getItemSubmenuIndicatorProps(row)}><span class=\"inline-block i-lucide-chevron-right type-caption\" aria-hidden=\"true\"></span></span>\n              <panel\n                class=\"absolute start-full top-0 ms-2 min-w-40\"\n                show={machine.openSubmenu === row.value}\n                {...machine.getSubmenuContentProps(row)}>\n                <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>\n                  <div class=\"py-1\" {...machine.getItemGroupProps(sub)}>\n                    <span show={sub.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n                      {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>\n                    <template for={machine.getRows(sub)} as={child} key={child.value}>\n                      <div\n                        class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": child.disabled }]}\n                        {...machine.getSubmenuItemProps(child)}>\n                        <span class=\"min-w-0 flex-1 truncate\"\n                          {...machine.getItemTextProps(child)}>{child.label}</span>\n                        <span class=\"shrink-0 type-caption text-muted\"\n                          {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>\n                        <span aria-hidden=\"true\"\n                          class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": child.checked }]}\n                          {...machine.getItemIndicatorProps(child)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n                      </div>\n                    </template>\n                  </div>\n                  <hr show={sub.separator}\n                    {...machine.getSeparatorProps(sub)} />\n                </template>\n              </panel>\n            </div>\n          </template>\n        </div>\n        <hr show={block.separator}\n          {...machine.getSeparatorProps(block)} />\n      </template>\n    </panel>\n  </div>\n</div>\n";
+export { groups_default as default };
+
+//# sourceMappingURL=groups.html.js.map

package/dist/menu/examples/icons.html

@@ -19,49 +19,51 @@ const machine = menu({
       {...machine.getTriggerProps()}>
       <span class="truncate">Deploy</span>
       <span aria-hidden="true"
-        class={["text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]}
-        {...machine.getTriggerIndicatorProps()}><span class="inline-block i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+        class={["type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]}
+        {...machine.getTriggerIndicatorProps()}><span class="inline-block i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
   </div>
   <div {...machine.getPositionerProps()}>
     <panel {...machine.getContentProps()}>
       <template for={machine.getBlocks()} as={block} key={block.id}>
         <div class="py-1" {...machine.getItemGroupProps(block)}>
-          <span show={block.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+          <span show={block.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
             {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
           <template for={machine.getRows(block)} as={row} key={row.value}>
             <div
-              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
+              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
               {...machine.getItemProps(row)}>
-              <span class="shrink-0 text-xs text-text-muted"
-                aria-hidden="true"><span class="inline-block i-lucide-rocket text-xs" aria-hidden="true" show={row.value === "deploy"}></span><span class="inline-block i-lucide-scroll-text text-xs" aria-hidden="true" show={row.value === "logs"}></span><span class="inline-block i-lucide-undo-2 text-xs" aria-hidden="true" show={row.value === "rollback"}></span><span class="inline-block i-lucide-copy text-xs" aria-hidden="true" show={row.value === "copy"}></span><span class="inline-block i-lucide-pause text-xs" aria-hidden="true" show={row.value === "pause"}></span><span class="inline-block i-lucide-trash-2 text-xs" aria-hidden="true" show={row.value === "delete"}></span></span>
+              <span class="shrink-0 type-caption text-muted"
+                aria-hidden="true"><span class="inline-block i-lucide-rocket type-caption" aria-hidden="true" show={row.value === "deploy"}></span><span class="inline-block i-lucide-scroll-text type-caption" aria-hidden="true" show={row.value === "logs"}></span><span class="inline-block i-lucide-undo-2 type-caption" aria-hidden="true" show={row.value === "rollback"}></span><span class="inline-block i-lucide-copy type-caption" aria-hidden="true" show={row.value === "copy"}></span><span class="inline-block i-lucide-pause type-caption" aria-hidden="true" show={row.value === "pause"}></span><span class="inline-block i-lucide-trash-2 type-caption" aria-hidden="true" show={row.value === "delete"}></span></span>
               <span class="min-w-0 flex-1 truncate"
                 {...machine.getItemTextProps(row)}>{row.label}</span>
-              <span class="shrink-0 text-xs text-text-muted"
+              <span class="shrink-0 type-caption text-muted"
                 {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>
               <span aria-hidden="true"
                 class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": row.checked }]}
-                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
               <span aria-hidden="true"
-                class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
-                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
-              <panel show={machine.openSubmenu === row.value}
+                class={["shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
+                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right type-caption" aria-hidden="true"></span></span>
+              <panel
+                class="absolute start-full top-0 ms-2 min-w-40"
+                show={machine.openSubmenu === row.value}
                 {...machine.getSubmenuContentProps(row)}>
                 <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>
                   <div class="py-1" {...machine.getItemGroupProps(sub)}>
-                    <span show={sub.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+                    <span show={sub.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
                       {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>
                     <template for={machine.getRows(sub)} as={child} key={child.value}>
                       <div
-                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
+                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
                         {...machine.getSubmenuItemProps(child)}>
                         <span class="min-w-0 flex-1 truncate"
                           {...machine.getItemTextProps(child)}>{child.label}</span>
-                        <span class="shrink-0 text-xs text-text-muted"
+                        <span class="shrink-0 type-caption text-muted"
                           {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>
                         <span aria-hidden="true"
                           class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": child.checked }]}
-                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
                       </div>
                     </template>
                   </div>

package/dist/menu/examples/icons.html.js

@@ -0,0 +1,5 @@
+// src/menu/examples/icons.html
+var icons_default = "<script lang=\"ts\">\nimport { menu } from \"../menu.presentation.ts\";\n\nconst machine = menu({\n  items: [\n    { \"value\": \"deploy\", \"label\": \"Deploy now\" },\n    { \"value\": \"logs\", \"label\": \"View logs\" },\n    { \"value\": \"rollback\", \"label\": \"Roll back\" },\n    { \"value\": \"copy\", \"label\": \"Copy deploy URL\" },\n    { \"value\": \"pause\", \"label\": \"Pause rollout\" },\n    { \"value\": \"delete\", \"label\": \"Delete deploy\" },\n  ],\n});\n<\/script>\n<div class=\"relative inline-block\">\n  <div class=\"relative\" {...machine.getContextTriggerProps()}>\n    <button\n      class=\"secondary s-sm inline-flex items-center gap-2\"\n      {...machine.getTriggerProps()}>\n      <span class=\"truncate\">Deploy</span>\n      <span aria-hidden=\"true\"\n        class={[\"type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.isOpen }]}\n        {...machine.getTriggerIndicatorProps()}><span class=\"inline-block i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n  </div>\n  <div {...machine.getPositionerProps()}>\n    <panel {...machine.getContentProps()}>\n      <template for={machine.getBlocks()} as={block} key={block.id}>\n        <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n          <span show={block.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n            {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n          <template for={machine.getRows(block)} as={row} key={row.value}>\n            <div\n              class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": row.disabled }]}\n              {...machine.getItemProps(row)}>\n              <span class=\"shrink-0 type-caption text-muted\"\n                aria-hidden=\"true\"><span class=\"inline-block i-lucide-rocket type-caption\" aria-hidden=\"true\" show={row.value === \"deploy\"}></span><span class=\"inline-block i-lucide-scroll-text type-caption\" aria-hidden=\"true\" show={row.value === \"logs\"}></span><span class=\"inline-block i-lucide-undo-2 type-caption\" aria-hidden=\"true\" show={row.value === \"rollback\"}></span><span class=\"inline-block i-lucide-copy type-caption\" aria-hidden=\"true\" show={row.value === \"copy\"}></span><span class=\"inline-block i-lucide-pause type-caption\" aria-hidden=\"true\" show={row.value === \"pause\"}></span><span class=\"inline-block i-lucide-trash-2 type-caption\" aria-hidden=\"true\" show={row.value === \"delete\"}></span></span>\n              <span class=\"min-w-0 flex-1 truncate\"\n                {...machine.getItemTextProps(row)}>{row.label}</span>\n              <span class=\"shrink-0 type-caption text-muted\"\n                {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": row.checked }]}\n                {...machine.getItemIndicatorProps(row)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-90\": machine.openSubmenu === row.value }]}\n                {...machine.getItemSubmenuIndicatorProps(row)}><span class=\"inline-block i-lucide-chevron-right type-caption\" aria-hidden=\"true\"></span></span>\n              <panel\n                class=\"absolute start-full top-0 ms-2 min-w-40\"\n                show={machine.openSubmenu === row.value}\n                {...machine.getSubmenuContentProps(row)}>\n                <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>\n                  <div class=\"py-1\" {...machine.getItemGroupProps(sub)}>\n                    <span show={sub.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n                      {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>\n                    <template for={machine.getRows(sub)} as={child} key={child.value}>\n                      <div\n                        class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": child.disabled }]}\n                        {...machine.getSubmenuItemProps(child)}>\n                        <span class=\"min-w-0 flex-1 truncate\"\n                          {...machine.getItemTextProps(child)}>{child.label}</span>\n                        <span class=\"shrink-0 type-caption text-muted\"\n                          {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>\n                        <span aria-hidden=\"true\"\n                          class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": child.checked }]}\n                          {...machine.getItemIndicatorProps(child)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n                      </div>\n                    </template>\n                  </div>\n                  <hr show={sub.separator}\n                    {...machine.getSeparatorProps(sub)} />\n                </template>\n              </panel>\n            </div>\n          </template>\n        </div>\n        <hr show={block.separator}\n          {...machine.getSeparatorProps(block)} />\n      </template>\n    </panel>\n  </div>\n</div>\n";
+export { icons_default as default };
+
+//# sourceMappingURL=icons.html.js.map

package/dist/menu/examples/nested.html

@@ -24,47 +24,49 @@ const machine = menu({
       {...machine.getTriggerProps()}>
       <span class="truncate">Release</span>
       <span aria-hidden="true"
-        class={["text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]}
-        {...machine.getTriggerIndicatorProps()}><span class="inline-block i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+        class={["type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]}
+        {...machine.getTriggerIndicatorProps()}><span class="inline-block i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
   </div>
   <div {...machine.getPositionerProps()}>
     <panel {...machine.getContentProps()}>
       <template for={machine.getBlocks()} as={block} key={block.id}>
         <div class="py-1" {...machine.getItemGroupProps(block)}>
-          <span show={block.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+          <span show={block.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
             {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
           <template for={machine.getRows(block)} as={row} key={row.value}>
             <div
-              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
+              class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": row.disabled }]}
               {...machine.getItemProps(row)}>
               <span class="min-w-0 flex-1 truncate"
                 {...machine.getItemTextProps(row)}>{row.label}</span>
-              <span class="shrink-0 text-xs text-text-muted"
+              <span class="shrink-0 type-caption text-muted"
                 {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>
               <span aria-hidden="true"
                 class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": row.checked }]}
-                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                {...machine.getItemIndicatorProps(row)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
               <span aria-hidden="true"
-                class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
-                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
-              <panel show={machine.openSubmenu === row.value}
+                class={["shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate", { "rotate-90": machine.openSubmenu === row.value }]}
+                {...machine.getItemSubmenuIndicatorProps(row)}><span class="inline-block i-lucide-chevron-right type-caption" aria-hidden="true"></span></span>
+              <panel
+                class="absolute start-full top-0 ms-2 min-w-40"
+                show={machine.openSubmenu === row.value}
                 {...machine.getSubmenuContentProps(row)}>
                 <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>
                   <div class="py-1" {...machine.getItemGroupProps(sub)}>
-                    <span show={sub.label !== null} class="block px-2 pb-1 text-xs font-medium text-text-muted"
+                    <span show={sub.label !== null} class="block px-2 pb-1 type-caption-emphasized text-muted"
                       {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>
                     <template for={machine.getRows(sub)} as={child} key={child.value}>
                       <div
-                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
+                        class={["bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default", { "opacity-50": child.disabled }]}
                         {...machine.getSubmenuItemProps(child)}>
                         <span class="min-w-0 flex-1 truncate"
                           {...machine.getItemTextProps(child)}>{child.label}</span>
-                        <span class="shrink-0 text-xs text-text-muted"
+                        <span class="shrink-0 type-caption text-muted"
                           {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>
                         <span aria-hidden="true"
                           class={["shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0", { "scale-100 opacity-100": child.checked }]}
-                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check text-xs" aria-hidden="true"></span></span>
+                          {...machine.getItemIndicatorProps(child)}><span class="inline-block i-lucide-check type-caption" aria-hidden="true"></span></span>
                       </div>
                     </template>
                   </div>

package/dist/menu/examples/nested.html.js

@@ -0,0 +1,5 @@
+// src/menu/examples/nested.html
+var nested_default = "<script lang=\"ts\">\nimport { menu } from \"../menu.presentation.ts\";\n\nconst machine = menu({\n  items: [\n    { value: \"new\", label: \"New release\" },\n    { value: \"promote\", label: \"Promote\" },\n    {\n      value: \"notify\",\n      label: \"Notify\",\n      children: [\n        { value: \"oncall\", label: \"Page on-call\" },\n        { value: \"team\", label: \"Team channel\" },\n        { value: \"status\", label: \"Status page\" },\n      ],\n    },\n  ],\n});\n<\/script>\n<div class=\"relative inline-block\">\n  <div class=\"relative\" {...machine.getContextTriggerProps()}>\n    <button\n      class=\"secondary s-sm inline-flex items-center gap-2\"\n      {...machine.getTriggerProps()}>\n      <span class=\"truncate\">Release</span>\n      <span aria-hidden=\"true\"\n        class={[\"type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.isOpen }]}\n        {...machine.getTriggerIndicatorProps()}><span class=\"inline-block i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n  </div>\n  <div {...machine.getPositionerProps()}>\n    <panel {...machine.getContentProps()}>\n      <template for={machine.getBlocks()} as={block} key={block.id}>\n        <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n          <span show={block.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n            {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n          <template for={machine.getRows(block)} as={row} key={row.value}>\n            <div\n              class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": row.disabled }]}\n              {...machine.getItemProps(row)}>\n              <span class=\"min-w-0 flex-1 truncate\"\n                {...machine.getItemTextProps(row)}>{row.label}</span>\n              <span class=\"shrink-0 type-caption text-muted\"\n                {...machine.getItemShortcutProps(row)}>{row.shortcut}</span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": row.checked }]}\n                {...machine.getItemIndicatorProps(row)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n              <span aria-hidden=\"true\"\n                class={[\"shrink-0 type-caption text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-90\": machine.openSubmenu === row.value }]}\n                {...machine.getItemSubmenuIndicatorProps(row)}><span class=\"inline-block i-lucide-chevron-right type-caption\" aria-hidden=\"true\"></span></span>\n              <panel\n                class=\"absolute start-full top-0 ms-2 min-w-40\"\n                show={machine.openSubmenu === row.value}\n                {...machine.getSubmenuContentProps(row)}>\n                <template for={machine.getSubmenuBlocks(row)} as={sub} key={sub.id}>\n                  <div class=\"py-1\" {...machine.getItemGroupProps(sub)}>\n                    <span show={sub.label !== null} class=\"block px-2 pb-1 type-caption-emphasized text-muted\"\n                      {...machine.getItemGroupLabelProps(sub)}>{sub.label}</span>\n                    <template for={machine.getRows(sub)} as={child} key={child.value}>\n                      <div\n                        class={[\"bare relative flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast cursor-default\", { \"opacity-50\": child.disabled }]}\n                        {...machine.getSubmenuItemProps(child)}>\n                        <span class=\"min-w-0 flex-1 truncate\"\n                          {...machine.getItemTextProps(child)}>{child.label}</span>\n                        <span class=\"shrink-0 type-caption text-muted\"\n                          {...machine.getItemShortcutProps(child)}>{child.shortcut}</span>\n                        <span aria-hidden=\"true\"\n                          class={[\"shrink-0 text-primary transition-transform duration-fast ease-decelerate scale-50 opacity-0\", { \"scale-100 opacity-100\": child.checked }]}\n                          {...machine.getItemIndicatorProps(child)}><span class=\"inline-block i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n                      </div>\n                    </template>\n                  </div>\n                  <hr show={sub.separator}\n                    {...machine.getSeparatorProps(sub)} />\n                </template>\n              </panel>\n            </div>\n          </template>\n        </div>\n        <hr show={block.separator}\n          {...machine.getSeparatorProps(block)} />\n      </template>\n    </panel>\n  </div>\n</div>\n";
+export { nested_default as default };
+
+//# sourceMappingURL=nested.html.js.map