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

package/dist/menu/examples/user.html

@@ -19,56 +19,58 @@ const machine = menu({
       class="secondary s-sm inline-flex items-center gap-3"
       {...machine.getTriggerProps()}>
       <span aria-hidden="true"
-        class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-primary text-xs font-semibold text-on-primary">PR</span>
+        class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary">PR</span>
       <span class="truncate">Priya Raman</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()}>
-      <div class="px-3 py-2 border-b border-solid border-border">
-        <div class="text-sm font-medium text-text">Priya Raman</div>
-        <div class="text-xs text-text-muted">priya@lodestar.dev</div>
+      <div class="px-3 py-2 border-b">
+        <div class="type-label">Priya Raman</div>
+        <div class="type-caption text-muted">priya@lodestar.dev</div>
       </div>
       <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 transition-colors duration-fast cursor-default", { "opacity-50": row.disabled, "text-text": row.value !== "logout", "text-semantic-error": row.value === "logout" }]}
+              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, "": row.value !== "logout", "text-semantic-error": row.value === "logout" }]}
               {...machine.getItemProps(row)}>
-              <span class="shrink-0 text-xs text-text-muted"
-                aria-hidden="true"><span class="inline-block i-lucide-circle-user-round text-xs" aria-hidden="true" show={row.value === "profile"}></span><span class="inline-block i-lucide-key-round text-xs" aria-hidden="true" show={row.value === "tokens"}></span><span class="inline-block i-lucide-credit-card text-xs" aria-hidden="true" show={row.value === "billing"}></span><span class="inline-block i-lucide-circle-question-mark text-xs" aria-hidden="true" show={row.value === "help"}></span><span class="inline-block i-lucide-log-out text-xs text-semantic-error" aria-hidden="true" show={row.value === "logout"}></span></span>
+              <span class="shrink-0 type-caption text-muted"
+                aria-hidden="true"><span class="inline-block i-lucide-circle-user-round type-caption" aria-hidden="true" show={row.value === "profile"}></span><span class="inline-block i-lucide-key-round type-caption" aria-hidden="true" show={row.value === "tokens"}></span><span class="inline-block i-lucide-credit-card type-caption" aria-hidden="true" show={row.value === "billing"}></span><span class="inline-block i-lucide-circle-question-mark type-caption" aria-hidden="true" show={row.value === "help"}></span><span class="inline-block i-lucide-log-out type-caption text-semantic-error" aria-hidden="true" show={row.value === "logout"}></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/user.html.js

@@ -0,0 +1,5 @@
+// src/menu/examples/user.html
+var user_default = "<script lang=\"ts\">\nimport { menu } from \"../menu.presentation.ts\";\n\nconst machine = menu({\n  items: [\n    { value: \"profile\", label: \"Profile\" },\n    { value: \"tokens\", label: \"API tokens\" },\n    { value: \"billing\", label: \"Billing\" },\n    { separator: true },\n    { value: \"help\", label: \"Help & Support\" },\n    { separator: true },\n    { value: \"logout\", label: \"Log out\" },\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-3\"\n      {...machine.getTriggerProps()}>\n      <span aria-hidden=\"true\"\n        class=\"grid h-6 w-6 shrink-0 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary\">PR</span>\n      <span class=\"truncate\">Priya Raman</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      <div class=\"px-3 py-2 border-b\">\n        <div class=\"type-label\">Priya Raman</div>\n        <div class=\"type-caption text-muted\">priya@lodestar.dev</div>\n      </div>\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, \"\": row.value !== \"logout\", \"text-semantic-error\": row.value === \"logout\" }]}\n              {...machine.getItemProps(row)}>\n              <span class=\"shrink-0 type-caption text-muted\"\n                aria-hidden=\"true\"><span class=\"inline-block i-lucide-circle-user-round type-caption\" aria-hidden=\"true\" show={row.value === \"profile\"}></span><span class=\"inline-block i-lucide-key-round type-caption\" aria-hidden=\"true\" show={row.value === \"tokens\"}></span><span class=\"inline-block i-lucide-credit-card type-caption\" aria-hidden=\"true\" show={row.value === \"billing\"}></span><span class=\"inline-block i-lucide-circle-question-mark type-caption\" aria-hidden=\"true\" show={row.value === \"help\"}></span><span class=\"inline-block i-lucide-log-out type-caption text-semantic-error\" aria-hidden=\"true\" show={row.value === \"logout\"}></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 { user_default as default };
+
+//# sourceMappingURL=user.html.js.map

package/dist/menu/menu.events.d.ts

@@ -1,5 +1,5 @@
 import { MenuEntry } from "./menu.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface MenuEvents {
   "OPEN": {};
   "CLOSE": {};
@@ -38,5 +38,4 @@ export interface MenuSelect {
 }
 export interface MenuHighlightChange {
   readonly highlightedValue: string | null;
-}
-//# sourceMappingURL=menu.events.d.ts.map
+}

package/dist/menu/menu.machine.d.ts

@@ -1,6 +1,5 @@
 import { MenuArgs, MenuContext, MenuState } from "./menu.state.js";
 import { MenuEvent, MenuEvents } from "./menu.events.js";
-import { Machine, Service } from "@spinjs/runtime/fsm";
+import { Machine, Service } from "@spinjs/components/fsm";
 export type MenuService = Service<MenuContext, MenuEvent>;
-export declare function menu(args: MenuArgs | undefined, authored: (name: string) => boolean): Machine<MenuContext, MenuEvents, MenuState>;
-//# sourceMappingURL=menu.machine.d.ts.map
+export declare function menu(args: MenuArgs | undefined, authored: (name: string) => boolean): Machine<MenuContext, MenuEvents, MenuState>;

package/dist/menu/menu.machine.js

@@ -1,5 +1,5 @@
 import { initial } from "./menu.state.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/menu/menu.machine.ts
 const clearAnchor = () => {
 	return { anchorPoint: null };

package/dist/menu/menu.presentation.d.ts

@@ -1,6 +1,6 @@
 import { MenuArgs, MenuBlock, MenuContext, MenuRow, MenuState } from "./menu.state.js";
 import { MenuEvents } from "./menu.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 /**
  * Menu bindings: the DOM contract as data. The machine owns open/closed,
  * the highlight, the anchor point and the open submenu on this level; this
@@ -16,7 +16,7 @@ type ScopeLike = ViewFor<MenuContext, MenuEvents, MenuState>;
 type SlotLike<R> = SlotViewFor<R, MenuContext, MenuEvents, MenuState>;
 export declare const def: {
   name: string;
-  machine: (args: MenuArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<MenuContext, MenuEvents, MenuState>;
+  machine: (args: MenuArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<MenuContext, MenuEvents, MenuState>;
   start: (props: Record<string, unknown>, authored: (name: string) => boolean) => "open" | "closed";
   reconcile: ({ state, parsed, authored, send }: {
     readonly context: MenuContext;
@@ -136,7 +136,6 @@ export declare const def: {
       indexes: (context: MenuContext) => MenuRow[];
       attrs: (scope: SlotLike<MenuRow>) => {
         "data-state": string;
-        class: string;
         "use:hover-delay": {
           closeDelay: number;
           onClose: () => void;
@@ -229,7 +228,7 @@ export declare const def: {
     };
   };
   settled: ({ event, focus }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: MenuContext;
       readonly state: MenuState;
@@ -243,10 +242,9 @@ 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;
 };
 export type MenuApi = ApiOf<typeof def>;
-export declare const menu: import("@spinjs/runtime").DefinedComponent<MenuApi, MenuArgs>;
-export {};
-//# sourceMappingURL=menu.presentation.d.ts.map
+export declare const menu: import("@spinjs/components/runtime").DefinedComponent<MenuApi, MenuArgs>;
+export {};

package/dist/menu/menu.presentation.js

@@ -1,7 +1,7 @@
 import { ROVING_KEYS } from "../shared/keyboard.js";
-import { entriesOf } from "./menu.state.js";
 import { menu as menu$1 } from "./menu.machine.js";
-import { ariaHidden, ariaLabelledBy, ariaOrientation, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/runtime";
+import { entriesOf } from "./menu.state.js";
+import { ariaHidden, ariaLabelledBy, ariaOrientation, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/components/runtime";
 // src/menu/menu.presentation.ts
 /** The trigger exclusion travels in the dismissable action's params
 * (excludeId/excludeParent) — no def-side DOM query. */
@@ -149,7 +149,7 @@ const rowHandlers = (scope, row) => {
 				value: row.value
 			});
 		},
-		onClick: (event) => {
+		onClick: () => {
 			activate(scope, row);
 		}
 	};
@@ -175,7 +175,7 @@ const submenuRowHandlers = (scope, row) => {
 				value: row.value
 			});
 		},
-		onClick: (event) => {
+		onClick: () => {
 			if (row.disabled) return;
 			scope.send({
 				type: "ITEM_CLICK",
@@ -612,7 +612,6 @@ const def = {
 						slot: row.value
 					}),
 					"data-state": scope.context.openSubmenu === row.value ? "open" : "closed",
-					class: "absolute start-full top-0 ms-2 min-w-40 rounded-lg border border-solid border-border bg-surface-raised p-1 shadow-lg",
 					"use:hover-delay": {
 						closeDelay: 250,
 						onClose: () => {

package/dist/menu/menu.state.d.ts

@@ -50,5 +50,4 @@ export interface MenuContext {
   readonly entries: readonly MenuEntry[];
 }
 export declare function entriesOf(raw: unknown): readonly MenuEntry[];
-export declare function initial(args?: MenuArgs, _authored?: (name: string) => boolean): MenuContext;
-//# sourceMappingURL=menu.state.d.ts.map
+export declare function initial(args?: MenuArgs, _authored?: (name: string) => boolean): MenuContext;

package/dist/menu/menu.state.js

@@ -1,4 +1,4 @@
-import { coerceJsonArray, isRecord } from "@spinjs/runtime";
+import { coerceJsonArray, isRecord } from "@spinjs/components/runtime";
 // src/menu/menu.state.ts
 function parseEntry(raw) {
 	if (!isRecord(raw)) return void 0;

package/dist/mode-picker/examples/basic.html

@@ -5,7 +5,7 @@ const machine = modePicker({ defaultValue: "system" });
 </script>
 
 <button
-  class={["bare inline-flex items-center justify-center rounded-lg border border-solid border-border bg-surface p-1 text-sm text-text transition-colors hover:bg-surface-raised", { "opacity-50 cursor-not-allowed": machine.disabled }]}
+  class={["bare inline-flex h-8 w-8 items-center justify-center rounded-md border bg-surface p-0 transition-colors hover:bg-surface-raised", { "opacity-50 cursor-not-allowed": machine.disabled }]}
   {...machine.getTriggerProps()}
 >
   <span class="inline-flex h-4 w-4 items-center justify-center" {...machine.getIconProps()}>

package/dist/mode-picker/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/mode-picker/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { modePicker } from \"../mode-picker.presentation.ts\";\n\nconst machine = modePicker({ defaultValue: \"system\" });\n<\/script>\n\n<button\n  class={[\"bare inline-flex h-8 w-8 items-center justify-center rounded-md border bg-surface p-0 transition-colors hover:bg-surface-raised\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n  {...machine.getTriggerProps()}\n>\n  <span class=\"inline-flex h-4 w-4 items-center justify-center\" {...machine.getIconProps()}>\n    <span class=\"inline-block i-lucide-sun icon-sm\" show={machine.singleMode ? machine.resolvedMode === \"light\" : machine.next === \"light\"}></span>\n    <span class=\"inline-block i-lucide-moon icon-sm\" show={machine.singleMode ? machine.resolvedMode === \"dark\" : machine.next === \"dark\"}></span>\n    <span class=\"inline-block i-lucide-monitor icon-sm\" show={!machine.singleMode && machine.next === \"system\"}></span>\n  </span>\n  <span class=\"sr-only\">{machine.label}</span>\n</button>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/mode-picker/examples/minimal.html

@@ -5,7 +5,7 @@ const machine = modePicker({ hideWhenSingle: true, defaultValue: "system" });
 </script>
 
 <button
-  class={["bare inline-flex h-8 w-8 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-surface hover:text-text", { "opacity-50 cursor-not-allowed": machine.disabled }]}
+  class={["bare inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface", { "opacity-50 cursor-not-allowed": machine.disabled }]}
   {...machine.getTriggerProps()}
 >
   <span class="inline-flex h-4 w-4 items-center justify-center" {...machine.getIconProps()}>

package/dist/mode-picker/examples/minimal.html.js

@@ -0,0 +1,5 @@
+// src/mode-picker/examples/minimal.html
+var minimal_default = "<script lang=\"ts\">\nimport { modePicker } from \"../mode-picker.presentation.ts\";\n\nconst machine = modePicker({ hideWhenSingle: true, defaultValue: \"system\" });\n<\/script>\n\n<button\n  class={[\"bare inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n  {...machine.getTriggerProps()}\n>\n  <span class=\"inline-flex h-4 w-4 items-center justify-center\" {...machine.getIconProps()}>\n    <span class=\"inline-block i-lucide-sun h-4 w-4\" show={machine.singleMode ? machine.resolvedMode === \"light\" : machine.next === \"light\"}></span>\n    <span class=\"inline-block i-lucide-moon h-4 w-4\" show={machine.singleMode ? machine.resolvedMode === \"dark\" : machine.next === \"dark\"}></span>\n    <span class=\"inline-block i-lucide-monitor h-4 w-4\" show={!machine.singleMode && machine.next === \"system\"}></span>\n  </span>\n  <span class=\"sr-only\">{machine.label}</span>\n</button>\n";
+export { minimal_default as default };
+
+//# sourceMappingURL=minimal.html.js.map

package/dist/mode-picker/examples/pill.html

@@ -5,7 +5,7 @@ const machine = modePicker({ defaultValue: "system" });
 </script>
 
 <button
-  class={["bare inline-flex items-center gap-2 rounded-full border border-solid border-border bg-surface px-3 py-1 text-sm text-text transition-colors hover:bg-surface-raised", { "opacity-50 cursor-not-allowed": machine.disabled }]}
+  class={["bare inline-flex items-center gap-2 rounded-full border bg-surface px-3 py-1 transition-colors hover:bg-surface-raised", { "opacity-50 cursor-not-allowed": machine.disabled }]}
   {...machine.getTriggerProps()}
 >
   <span class="inline-flex h-4 w-4 items-center justify-center" {...machine.getIconProps()}>

package/dist/mode-picker/examples/pill.html.js

@@ -0,0 +1,5 @@
+// src/mode-picker/examples/pill.html
+var pill_default = "<script lang=\"ts\">\nimport { modePicker } from \"../mode-picker.presentation.ts\";\n\nconst machine = modePicker({ defaultValue: \"system\" });\n<\/script>\n\n<button\n  class={[\"bare inline-flex items-center gap-2 rounded-full border bg-surface px-3 py-1 transition-colors hover:bg-surface-raised\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n  {...machine.getTriggerProps()}\n>\n  <span class=\"inline-flex h-4 w-4 items-center justify-center\" {...machine.getIconProps()}>\n    <span class=\"inline-block i-lucide-sun h-4 w-4\" show={machine.singleMode ? machine.resolvedMode === \"light\" : machine.value === \"light\"}></span>\n    <span class=\"inline-block i-lucide-moon h-4 w-4\" show={machine.singleMode ? machine.resolvedMode === \"dark\" : machine.value === \"dark\"}></span>\n    <span class=\"inline-block i-lucide-monitor h-4 w-4\" show={!machine.singleMode && machine.value === \"system\"}></span>\n  </span>\n  <span {...machine.getLabelProps()}>{machine.singleMode ? machine.resolvedMode : machine.value}</span>\n</button>\n";
+export { pill_default as default };
+
+//# sourceMappingURL=pill.html.js.map

package/dist/mode-picker/mode-picker.events.d.ts

@@ -1,5 +1,5 @@
 import { ModeChoice, ResolvedMode } from "./mode-picker.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface ModePickerEvents {
   "CYCLE": {};
   "VALUE.SET": {
@@ -16,5 +16,4 @@ export type ModePickerEvent = EventUnion<ModePickerEvents>;
 export type ModePickerValueChange = {
   readonly value: ModeChoice;
   readonly resolvedMode: ResolvedMode;
-};
-//# sourceMappingURL=mode-picker.events.d.ts.map
+};

package/dist/mode-picker/mode-picker.machine.d.ts

@@ -1,5 +1,5 @@
+/** Mode-picker machine: a single idle state cycling light → dark → system. */
 import { ModePickerArgs, ModePickerContext, ModePickerState } from "./mode-picker.state.js";
 import { ModePickerEvents } from "./mode-picker.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function modePicker(args?: ModePickerArgs, authored?: (name: string) => boolean): Machine<ModePickerContext, ModePickerEvents, ModePickerState>;
-//# sourceMappingURL=mode-picker.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function modePicker(args?: ModePickerArgs, authored?: (name: string) => boolean): Machine<ModePickerContext, ModePickerEvents, ModePickerState>;

package/dist/mode-picker/mode-picker.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./mode-picker.state.js";
 import { canCycle, cycle, setModes, setSystem, setValue } from "./mode-picker.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/mode-picker/mode-picker.machine.ts
 /** Mode-picker machine: a single idle state cycling light → dark → system. */
 function modePicker(args = {}, authored = () => false) {

package/dist/mode-picker/mode-picker.presentation.d.ts

@@ -1,11 +1,11 @@
-import { ModeChoice, ModePickerArgs, ModePickerContext, ResolvedMode } from "./mode-picker.state.js";
 import { ModePickerEvents, ModePickerValueChange } from "./mode-picker.events.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { ModeChoice, ModePickerArgs, ModePickerContext, ResolvedMode } from "./mode-picker.state.js";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
 type Ctx = ModePickerContext;
 type ScopeLike = ViewFor<ModePickerContext, ModePickerEvents, "idle">;
 export declare const def: {
   name: string;
-  machine: (args: ModePickerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ModePickerContext, ModePickerEvents, "idle">;
+  machine: (args: ModePickerArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<ModePickerContext, ModePickerEvents, "idle">;
   start: "idle";
   scalars: string[];
   parts: {
@@ -106,7 +106,7 @@ export declare const def: {
     type: string;
   } & Record<string, unknown>)[];
   settled: ({ after, props, root, send }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: ModePickerContext;
       readonly state: "idle";
@@ -120,10 +120,9 @@ 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;
 };
 export type ModePickerApi = ApiOf<typeof def>;
-export declare const modePicker: import("@spinjs/runtime").DefinedComponent<ModePickerApi, ModePickerArgs>;
-export type { ModeChoice, ModePickerArgs, ModePickerValueChange, ResolvedMode };
-//# sourceMappingURL=mode-picker.presentation.d.ts.map
+export declare const modePicker: import("@spinjs/components/runtime").DefinedComponent<ModePickerApi, ModePickerArgs>;
+export type { ModeChoice, ModePickerArgs, ModePickerValueChange, ResolvedMode };

package/dist/mode-picker/mode-picker.presentation.js

@@ -1,6 +1,6 @@
-import { isSingleMode, nextModeChoice, readRuntimeModes, resolveEffectiveMode } from "./mode-picker.state.js";
 import { modePicker as modePicker$1 } from "./mode-picker.machine.js";
-import { ariaHidden, defineComponent } from "@spinjs/runtime";
+import { isSingleMode, nextModeChoice, readRuntimeModes, resolveEffectiveMode } from "./mode-picker.state.js";
+import { ariaHidden, defineComponent } from "@spinjs/components/runtime";
 // src/mode-picker/mode-picker.presentation.ts
 function readStored(storageKey) {
 	try {

package/dist/mode-picker/mode-picker.state.d.ts

@@ -23,5 +23,4 @@ export declare function nextModeChoice(current: ModeChoice): ModeChoice;
 export declare function isSingleMode(modes: readonly string[]): boolean;
 export declare function resolveEffectiveMode(value: ModeChoice, modes: readonly string[], systemMode: ResolvedMode): ResolvedMode;
 export declare function readRuntimeModes(root?: Element): readonly string[];
-export declare function initial(args: ModePickerArgs, authored: (name: string) => boolean): ModePickerContext;
-//# sourceMappingURL=mode-picker.state.d.ts.map
+export declare function initial(args: ModePickerArgs, authored: (name: string) => boolean): ModePickerContext;

package/dist/mode-picker/mode-picker.transitions.d.ts

@@ -1,11 +1,10 @@
-import { ModePickerContext } from "./mode-picker.state.js";
 import { ModePickerEvents } from "./mode-picker.events.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { ModePickerContext } from "./mode-picker.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
 type ModePickerAssign<K extends keyof ModePickerEvents = keyof ModePickerEvents> = AssignFor<ModePickerContext, ModePickerEvents, K>;
 export declare const cycle: ModePickerAssign<"CYCLE">;
 export declare const setValue: ModePickerAssign<"VALUE.SET">;
 export declare const setModes: ModePickerAssign<"MODES.SET">;
 export declare const setSystem: ModePickerAssign<"SYSTEM.SET">;
 export declare const canCycle: (ctx: ModePickerContext) => boolean;
-export {};
-//# sourceMappingURL=mode-picker.transitions.d.ts.map
+export {};

package/dist/navigation-menu/examples/basic.html

@@ -39,13 +39,13 @@ const machine = navigationMenu({
     <template for={machine.items} as={row} key={row.value}>
       <li class="relative" {...machine.getItemProps(row)}>
         <a
-          class="bare inline-flex items-center gap-1 rounded-md px-3 py-1 text-sm font-medium text-text no-underline transition-colors duration-fast ease-decelerate hover:bg-surface aria-[current=page]:bg-surface"
+          class="bare inline-flex items-center gap-1 rounded-md px-3 py-1 no-underline transition-colors duration-fast ease-decelerate hover:bg-surface aria-[current=page]:bg-surface"
           {...machine.getLinkProps(row)}
         >
           <span>{row.label}</span>
           <span
             aria-hidden="true"
-            class={["i-lucide-chevron-down text-xs text-text-muted transition-transform duration-fast", { "rotate-180 text-primary": machine.value === row.value }]}
+            class={["i-lucide-chevron-down type-caption text-muted transition-transform duration-fast", { "rotate-180 text-primary": machine.value === row.value }]}
           ></span>
         </a>
 
@@ -54,16 +54,16 @@ const machine = navigationMenu({
           {...machine.getItemContentProps(row)}
         >
           <div class="flex items-center justify-between gap-2">
-            <span class="text-sm font-semibold text-text">{row.label}</span>
+            <span class="type-label">{row.label}</span>
             <badge variant="neutral">{row.badge}</badge>
           </div>
-          <p class="mt-1 text-xs text-text-muted">{row.description}</p>
+          <p class="text-muted">{row.description}</p>
           <a
-            class="bare mt-3 inline-flex items-center gap-1 text-xs font-medium text-primary no-underline hover:underline"
+            class="bare mt-3 inline-flex items-center gap-1 text-primary no-underline hover:underline"
             href={row.ctaHref}
           >
             <span>{row.cta}</span>
-            <span aria-hidden="true" class="i-lucide-arrow-right text-xs"></span>
+            <span aria-hidden="true" class="i-lucide-arrow-right type-caption"></span>
           </a>
         </panel>
       </li>

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

@@ -0,0 +1,5 @@
+// src/navigation-menu/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { navigationMenu } from \"../navigation-menu.presentation.ts\";\n\nconst machine = navigationMenu({\n  items: [\n    {\n      value: \"deployments\",\n      label: \"Deployments\",\n      href: \"#deployments\",\n      badge: \"#4821\",\n      description: \"Deploy #4821 is running: 10% of traffic on v4.12.0 in eu-west-1.\",\n      cta: \"Watch the rollout\",\n      ctaHref: \"#deploy-4821\",\n    },\n    {\n      value: \"services\",\n      label: \"Services\",\n      href: \"#services\",\n      badge: \"12 healthy\",\n      description: \"checkout-api runs 12 instances across 3 regions, all checks green.\",\n      cta: \"Open checkout-api\",\n      ctaHref: \"#checkout-api\",\n    },\n    {\n      value: \"team\",\n      label: \"Team\",\n      href: \"#team\",\n      badge: \"Priya\",\n      description: \"Priya Raman ships platform. Tomas Berg wrote release v4.12.0.\",\n      cta: \"See who is on call\",\n      ctaHref: \"#on-call\",\n    },\n  ],\n});\n<\/script>\n\n<nav class=\"relative flex w-full items-center justify-center\" {...machine.getRootProps()}>\n  <ul class=\"row-list gap-1\" {...machine.getListProps()}>\n    <template for={machine.items} as={row} key={row.value}>\n      <li class=\"relative\" {...machine.getItemProps(row)}>\n        <a\n          class=\"bare inline-flex items-center gap-1 rounded-md px-3 py-1 no-underline transition-colors duration-fast ease-decelerate hover:bg-surface aria-[current=page]:bg-surface\"\n          {...machine.getLinkProps(row)}\n        >\n          <span>{row.label}</span>\n          <span\n            aria-hidden=\"true\"\n            class={[\"i-lucide-chevron-down type-caption text-muted transition-transform duration-fast\", { \"rotate-180 text-primary\": machine.value === row.value }]}\n          ></span>\n        </a>\n\n        <panel\n          class=\"absolute left-0 top-full z-dropdown mt-1 w-64 origin-top-left transition duration-fast ease-decelerate\"\n          {...machine.getItemContentProps(row)}\n        >\n          <div class=\"flex items-center justify-between gap-2\">\n            <span class=\"type-label\">{row.label}</span>\n            <badge variant=\"neutral\">{row.badge}</badge>\n          </div>\n          <p class=\"text-muted\">{row.description}</p>\n          <a\n            class=\"bare mt-3 inline-flex items-center gap-1 text-primary no-underline hover:underline\"\n            href={row.ctaHref}\n          >\n            <span>{row.cta}</span>\n            <span aria-hidden=\"true\" class=\"i-lucide-arrow-right type-caption\"></span>\n          </a>\n        </panel>\n      </li>\n    </template>\n  </ul>\n</nav>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/navigation-menu/examples/grouped.html

@@ -44,44 +44,46 @@ const machine = navigationMenu({
 </script>
 
 <nav class="relative inline-flex" {...machine.getRootProps()}>
-  <ul class="row-list gap-1 rounded-lg border border-solid border-border bg-surface p-1" {...machine.getListProps()}>
+  <ul class="row-list gap-1 rounded-lg border bg-surface" {...machine.getListProps()}>
     <template for={machine.items} as={row} key={row.value}>
       <li class="relative" {...machine.getItemProps(row)}>
         <a
-          class={["bare inline-flex items-center gap-1 rounded-md px-3 py-1 text-sm font-medium text-text no-underline transition-colors duration-fast ease-decelerate hover:bg-surface-raised", { "bg-surface-raised text-primary shadow-sm": machine.value === row.value }]}
+          class={["bare inline-flex items-center gap-1 rounded-md px-3 py-1 no-underline transition-colors duration-fast ease-decelerate hover:bg-surface-raised", { "bg-surface-raised text-primary shadow-sm": machine.value === row.value }]}
           {...machine.getLinkProps(row)}
         >
           <span>{row.label}</span>
           <span
             aria-hidden="true"
-            class={["i-lucide-chevron-down text-xs text-text-muted transition-transform duration-fast", { "rotate-180 text-primary": machine.value === row.value }]}
+            class={["i-lucide-chevron-down type-caption text-muted transition-transform duration-fast", { "rotate-180 text-primary": machine.value === row.value }]}
           ></span>
         </a>
 
         <div
-          class="absolute left-0 top-full z-dropdown mt-2 w-64 origin-top-left rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg transition duration-fast ease-decelerate"
+          class="absolute left-0 top-full z-dropdown mt-2 w-64 origin-top-left rounded-lg border bg-surface-raised p-4 shadow-lg transition duration-fast ease-decelerate"
           {...machine.getItemContentProps(row)}
         >
           <div class="flex items-center justify-between gap-2">
-            <span class="text-xs font-semibold uppercase tracking-wider text-text-muted">{row.category}</span>
+            <span class="uppercase text-muted">{row.category}</span>
             <badge variant="info">{row.badge}</badge>
           </div>
-          <p class="mt-1 text-sm font-semibold text-text">{row.label}</p>
-          <p class="mt-1 text-xs text-text-muted">{row.description}</p>
-          <div class="mt-3 flex flex-col gap-1 border-t border-solid border-border pt-2">
+          <div class="grid gap-2 border-t pt-2">
+           <div class="grid gap-1">
+            <p>{row.label}</p>
+            <p class="text-muted">{row.description}</p>
+           </div>
             <a
-              class="bare flex items-center justify-between rounded-md px-2 py-1 text-xs font-medium text-text no-underline transition-colors hover:bg-surface"
+              class="bare flex items-center justify-between rounded-md px-2 py-1 type-body no-underline transition-colors hover:bg-surface"
               href={row.primaryHref}
             >
               <span>{row.primaryLabel}</span>
-              <span aria-hidden="true" class="i-lucide-arrow-up-right text-xs text-text-muted"></span>
+              <span aria-hidden="true" class="i-lucide-arrow-up-right type-caption text-muted"></span>
             </a>
             <a
-              class="bare flex items-center justify-between rounded-md px-2 py-1 text-xs font-medium text-text no-underline transition-colors hover:bg-surface"
+              class="bare flex items-center justify-between rounded-md px-2 py-1 type-body no-underline transition-colors hover:bg-surface"
               href={row.secondaryHref}
             >
               <span>{row.secondaryLabel}</span>
-              <span aria-hidden="true" class="i-lucide-arrow-up-right text-xs text-text-muted"></span>
+              <span aria-hidden="true" class="i-lucide-arrow-up-right type-caption text-muted"></span>
             </a>
           </div>
         </div>

package/dist/navigation-menu/examples/grouped.html.js

@@ -0,0 +1,5 @@
+// src/navigation-menu/examples/grouped.html
+var grouped_default = "<script lang=\"ts\">\nimport { navigationMenu } from \"../navigation-menu.presentation.ts\";\n\nconst machine = navigationMenu({\n  items: [\n    {\n      value: \"releases\",\n      label: \"Releases\",\n      href: \"#releases\",\n      category: \"Ship it\",\n      badge: \"Running\",\n      description: \"Deploy #4821 promotes v4.12.0 by traffic: 10% first, then the rest while checks stay green.\",\n      primaryLabel: \"Rolling back a release\",\n      primaryHref: \"#rollback\",\n      secondaryLabel: \"Release history\",\n      secondaryHref: \"#history\",\n    },\n    {\n      value: \"health\",\n      label: \"Health\",\n      href: \"#health\",\n      category: \"Stay green\",\n      badge: \"12/12\",\n      description: \"Every checkout-api instance passes checks in all 3 regions. Latency p99 holds at 180ms.\",\n      primaryLabel: \"Latency dashboards\",\n      primaryHref: \"#latency\",\n      secondaryLabel: \"Incident log\",\n      secondaryHref: \"#incidents\",\n    },\n    {\n      value: \"people\",\n      label: \"People\",\n      href: \"#people\",\n      category: \"Who ships\",\n      badge: \"Priya\",\n      description: \"Priya Raman owns platform deploys. Tomas Berg authored the release now rolling out.\",\n      primaryLabel: \"On-call rotation\",\n      primaryHref: \"#on-call\",\n      secondaryLabel: \"Deploy permissions\",\n      secondaryHref: \"#permissions\",\n    },\n  ],\n});\n<\/script>\n\n<nav class=\"relative inline-flex\" {...machine.getRootProps()}>\n  <ul class=\"row-list gap-1 rounded-lg border bg-surface\" {...machine.getListProps()}>\n    <template for={machine.items} as={row} key={row.value}>\n      <li class=\"relative\" {...machine.getItemProps(row)}>\n        <a\n          class={[\"bare inline-flex items-center gap-1 rounded-md px-3 py-1 no-underline transition-colors duration-fast ease-decelerate hover:bg-surface-raised\", { \"bg-surface-raised text-primary shadow-sm\": machine.value === row.value }]}\n          {...machine.getLinkProps(row)}\n        >\n          <span>{row.label}</span>\n          <span\n            aria-hidden=\"true\"\n            class={[\"i-lucide-chevron-down type-caption text-muted transition-transform duration-fast\", { \"rotate-180 text-primary\": machine.value === row.value }]}\n          ></span>\n        </a>\n\n        <div\n          class=\"absolute left-0 top-full z-dropdown mt-2 w-64 origin-top-left rounded-lg border bg-surface-raised p-4 shadow-lg transition duration-fast ease-decelerate\"\n          {...machine.getItemContentProps(row)}\n        >\n          <div class=\"flex items-center justify-between gap-2\">\n            <span class=\"uppercase text-muted\">{row.category}</span>\n            <badge variant=\"info\">{row.badge}</badge>\n          </div>\n          <div class=\"grid gap-2 border-t pt-2\">\n           <div class=\"grid gap-1\">\n            <p>{row.label}</p>\n            <p class=\"text-muted\">{row.description}</p>\n           </div>\n            <a\n              class=\"bare flex items-center justify-between rounded-md px-2 py-1 type-body no-underline transition-colors hover:bg-surface\"\n              href={row.primaryHref}\n            >\n              <span>{row.primaryLabel}</span>\n              <span aria-hidden=\"true\" class=\"i-lucide-arrow-up-right type-caption text-muted\"></span>\n            </a>\n            <a\n              class=\"bare flex items-center justify-between rounded-md px-2 py-1 type-body no-underline transition-colors hover:bg-surface\"\n              href={row.secondaryHref}\n            >\n              <span>{row.secondaryLabel}</span>\n              <span aria-hidden=\"true\" class=\"i-lucide-arrow-up-right type-caption text-muted\"></span>\n            </a>\n          </div>\n        </div>\n      </li>\n    </template>\n  </ul>\n</nav>\n";
+export { grouped_default as default };
+
+//# sourceMappingURL=grouped.html.js.map

package/dist/navigation-menu/examples/minimal.html

@@ -26,22 +26,24 @@ const machine = navigationMenu({
 </script>
 
 <nav class="relative inline-flex" {...machine.getRootProps()}>
-  <ul class="row-list gap-1 rounded-full border border-solid border-border bg-surface p-1" {...machine.getListProps()}>
+  <ul class="row-list gap-1 rounded-full border bg-surface" {...machine.getListProps()}>
     <template for={machine.items} as={row} key={row.value}>
       <li class="relative" {...machine.getItemProps(row)}>
         <a
-          class={["bare inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium text-text-muted no-underline transition-colors duration-fast ease-decelerate hover:text-text", { "bg-surface-raised text-text shadow-sm": machine.value === row.value }]}
+          class={["bare inline-flex items-center gap-1 rounded-full px-3 py-1 text-muted no-underline transition-colors duration-fast ease-decelerate", { "bg-surface-raised shadow-sm": machine.value === row.value }]}
           {...machine.getLinkProps(row)}
         >
           <span>{row.label}</span>
         </a>
 
         <div
-          class="absolute left-0 top-full z-dropdown mt-2 w-64 origin-top-left rounded-lg border border-solid border-border bg-surface-raised p-3 shadow-md transition duration-fast ease-decelerate"
+          class="absolute left-0 top-full z-dropdown mt-2 w-64 origin-top-left rounded-lg border bg-surface-raised p-3 shadow-md transition duration-fast ease-decelerate"
           {...machine.getItemContentProps(row)}
         >
-          <p class="text-xs font-semibold text-text">{row.label}</p>
-          <p class="mt-1 text-xs text-text-muted">{row.summary}</p>
+          <div class="grid gap-1">
+           <p>{row.label}</p>
+           <p class="text-muted">{row.summary}</p>
+          </div>
         </div>
       </li>
     </template>

package/dist/navigation-menu/examples/minimal.html.js

@@ -0,0 +1,5 @@
+// src/navigation-menu/examples/minimal.html
+var minimal_default = "<script lang=\"ts\">\nimport { navigationMenu } from \"../navigation-menu.presentation.ts\";\n\nconst machine = navigationMenu({\n  items: [\n    {\n      value: \"overview\",\n      label: \"Overview\",\n      href: \"#overview\",\n      summary: \"Deploy #4821 running, 12 instances healthy, p99 at 180ms.\",\n    },\n    {\n      value: \"activity\",\n      label: \"Activity\",\n      href: \"#activity\",\n      summary: \"Tomas shipped v4.12.0. Priya widened traffic to 10%.\",\n    },\n    {\n      value: \"settings\",\n      label: \"Settings\",\n      href: \"#settings\",\n      summary: \"Regions, deploy permissions, and Roll back policy.\",\n    },\n  ],\n});\n<\/script>\n\n<nav class=\"relative inline-flex\" {...machine.getRootProps()}>\n  <ul class=\"row-list gap-1 rounded-full border bg-surface\" {...machine.getListProps()}>\n    <template for={machine.items} as={row} key={row.value}>\n      <li class=\"relative\" {...machine.getItemProps(row)}>\n        <a\n          class={[\"bare inline-flex items-center gap-1 rounded-full px-3 py-1 text-muted no-underline transition-colors duration-fast ease-decelerate\", { \"bg-surface-raised shadow-sm\": machine.value === row.value }]}\n          {...machine.getLinkProps(row)}\n        >\n          <span>{row.label}</span>\n        </a>\n\n        <div\n          class=\"absolute left-0 top-full z-dropdown mt-2 w-64 origin-top-left rounded-lg border bg-surface-raised p-3 shadow-md transition duration-fast ease-decelerate\"\n          {...machine.getItemContentProps(row)}\n        >\n          <div class=\"grid gap-1\">\n           <p>{row.label}</p>\n           <p class=\"text-muted\">{row.summary}</p>\n          </div>\n        </div>\n      </li>\n    </template>\n  </ul>\n</nav>\n";
+export { minimal_default as default };
+
+//# sourceMappingURL=minimal.html.js.map

package/dist/navigation-menu/navigation-menu.events.d.ts

@@ -1,5 +1,5 @@
 import { NavValue } from "./navigation-menu.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface NavigationMenuEvents {
   "ITEM.ENTER": {
     value: NavValue;
@@ -16,5 +16,4 @@ export type NavigationMenuEvent = EventUnion<NavigationMenuEvents>;
 export interface NavigationMenuValueChange {
   readonly value: NavValue;
   readonly previousValue: NavValue;
-}
-//# sourceMappingURL=navigation-menu.events.d.ts.map
+}

package/dist/navigation-menu/navigation-menu.machine.d.ts

@@ -1,6 +1,6 @@
+/** Navigation-menu machine: the closed and open modes. */
 import { NavItemRecord, NavValue, NavigationMenuArgs, NavigationMenuContext, NavigationMenuState } from "./navigation-menu.state.js";
 import { NavigationMenuEvent, NavigationMenuEvents, NavigationMenuValueChange } from "./navigation-menu.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function navigationMenu(args: NavigationMenuArgs | undefined, authored: (name: string) => boolean): Machine<NavigationMenuContext, NavigationMenuEvents, NavigationMenuState>;
-export type { NavItemRecord, NavValue, NavigationMenuArgs, NavigationMenuContext, NavigationMenuEvent, NavigationMenuEvents, NavigationMenuState, NavigationMenuValueChange };
-//# sourceMappingURL=navigation-menu.machine.d.ts.map
+export type { NavItemRecord, NavValue, NavigationMenuArgs, NavigationMenuContext, NavigationMenuEvent, NavigationMenuEvents, NavigationMenuState, NavigationMenuValueChange };