@spinjs/components 0.0.0-stage → 0.1.0-preview.2

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { navigationMenu } from "../navigation-menu.presentation.js";
+
+const machine = navigationMenu({
+  items: [
+    {
+      value: "deployments",
+      label: "Deployments",
+      href: "#deployments",
+      badge: "#4821",
+      description: "Deploy #4821 is running: 10% of traffic on v4.12.0 in eu-west-1.",
+      cta: "Watch the rollout",
+      ctaHref: "#deploy-4821",
+    },
+    {
+      value: "services",
+      label: "Services",
+      href: "#services",
+      badge: "12 healthy",
+      description: "checkout-api runs 12 instances across 3 regions, all checks green.",
+      cta: "Open checkout-api",
+      ctaHref: "#checkout-api",
+    },
+    {
+      value: "team",
+      label: "Team",
+      href: "#team",
+      badge: "Priya",
+      description: "Priya Raman ships platform. Tomas Berg wrote release v4.12.0.",
+      cta: "See who is on call",
+      ctaHref: "#on-call",
+    },
+  ],
+});
+</script>
+
+<nav class="relative flex w-full items-center justify-center" {...machine.getRootProps()}>
+  <ul class="row-list gap-1" {...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 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 }]}
+          ></span>
+        </a>
+
+        <panel
+          class="absolute left-0 top-full z-dropdown mt-1 w-64 origin-top-left transition duration-fast ease-decelerate"
+          {...machine.getItemContentProps(row)}
+        >
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-sm font-semibold text-text">{row.label}</span>
+            <badge variant="neutral">{row.badge}</badge>
+          </div>
+          <p class="mt-1 text-xs text-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"
+            href={row.ctaHref}
+          >
+            <span>{row.cta}</span>
+            <span aria-hidden="true" class="i-lucide-arrow-right text-xs"></span>
+          </a>
+        </panel>
+      </li>
+    </template>
+  </ul>
+</nav>

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { navigationMenu } from "../navigation-menu.presentation.js";
+
+const machine = navigationMenu({
+  items: [
+    {
+      value: "releases",
+      label: "Releases",
+      href: "#releases",
+      category: "Ship it",
+      badge: "Running",
+      description: "Deploy #4821 promotes v4.12.0 by traffic: 10% first, then the rest while checks stay green.",
+      primaryLabel: "Rolling back a release",
+      primaryHref: "#rollback",
+      secondaryLabel: "Release history",
+      secondaryHref: "#history",
+    },
+    {
+      value: "health",
+      label: "Health",
+      href: "#health",
+      category: "Stay green",
+      badge: "12/12",
+      description: "Every checkout-api instance passes checks in all 3 regions. Latency p99 holds at 180ms.",
+      primaryLabel: "Latency dashboards",
+      primaryHref: "#latency",
+      secondaryLabel: "Incident log",
+      secondaryHref: "#incidents",
+    },
+    {
+      value: "people",
+      label: "People",
+      href: "#people",
+      category: "Who ships",
+      badge: "Priya",
+      description: "Priya Raman owns platform deploys. Tomas Berg authored the release now rolling out.",
+      primaryLabel: "On-call rotation",
+      primaryHref: "#on-call",
+      secondaryLabel: "Deploy permissions",
+      secondaryHref: "#permissions",
+    },
+  ],
+});
+</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()}>
+    <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 }]}
+          {...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 }]}
+          ></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"
+          {...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>
+            <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">
+            <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"
+              href={row.primaryHref}
+            >
+              <span>{row.primaryLabel}</span>
+              <span aria-hidden="true" class="i-lucide-arrow-up-right text-xs text-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"
+              href={row.secondaryHref}
+            >
+              <span>{row.secondaryLabel}</span>
+              <span aria-hidden="true" class="i-lucide-arrow-up-right text-xs text-text-muted"></span>
+            </a>
+          </div>
+        </div>
+      </li>
+    </template>
+  </ul>
+</nav>

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { navigationMenu } from "../navigation-menu.presentation.js";
+
+const machine = navigationMenu({
+  items: [
+    {
+      value: "overview",
+      label: "Overview",
+      href: "#overview",
+      summary: "Deploy #4821 running, 12 instances healthy, p99 at 180ms.",
+    },
+    {
+      value: "activity",
+      label: "Activity",
+      href: "#activity",
+      summary: "Tomas shipped v4.12.0. Priya widened traffic to 10%.",
+    },
+    {
+      value: "settings",
+      label: "Settings",
+      href: "#settings",
+      summary: "Regions, deploy permissions, and Roll back policy.",
+    },
+  ],
+});
+</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()}>
+    <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 }]}
+          {...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"
+          {...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>
+      </li>
+    </template>
+  </ul>
+</nav>

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

@@ -0,0 +1,20 @@
+import { NavValue } from "./navigation-menu.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface NavigationMenuEvents {
+  "ITEM.ENTER": {
+    value: NavValue;
+  };
+  "ITEM.TOGGLE": {
+    value: NavValue;
+  };
+  "CLOSE": {};
+  "VALUE.SET": {
+    value: NavValue;
+  };
+}
+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.events.js

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

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

@@ -0,0 +1,6 @@
+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";
+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

package/dist/navigation-menu/navigation-menu.machine.js

@@ -0,0 +1,51 @@
+import { initial, parseItems } from "./navigation-menu.state.js";
+import { closeAll, openItem, setValue, swapItem, toggleOpen } from "./navigation-menu.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/navigation-menu/navigation-menu.machine.ts
+/** Navigation-menu machine: the closed and open modes. */
+function navigationMenu(args = {}, authored) {
+	return createMachine({
+		id: "navigation-menu",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			value: { event: "VALUE.SET" },
+			previousValue: {},
+			openDelay: {},
+			closeDelay: {},
+			orientation: {},
+			disabled: {},
+			items: { parse: parseItems }
+		},
+		on: {
+			"VALUE.SET": [{ assign: setValue }],
+			"CLOSE": [{ assign: closeAll }]
+		},
+		states: {
+			idle: { on: {
+				"ITEM.ENTER": [{
+					target: "open",
+					assign: openItem
+				}],
+				"ITEM.TOGGLE": [{
+					target: "open",
+					assign: toggleOpen
+				}]
+			} },
+			open: { on: {
+				"ITEM.ENTER": [{ assign: swapItem }],
+				"ITEM.TOGGLE": [{
+					target: "idle",
+					assign: toggleOpen
+				}],
+				"CLOSE": [{
+					target: "idle",
+					assign: closeAll
+				}]
+			} }
+		}
+	});
+}
+export { navigationMenu };
+
+//# sourceMappingURL=navigation-menu.machine.js.map

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

@@ -0,0 +1,132 @@
+import { NavItemRecord, NavigationMenuArgs, NavigationMenuContext, NavigationMenuState } from "./navigation-menu.state.js";
+import { NavigationMenuEvents, NavigationMenuValueChange } from "./navigation-menu.events.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+type ScopeLike = ViewFor<NavigationMenuContext, NavigationMenuEvents, NavigationMenuState>;
+type ItemScope = ScopeLike & {
+  readonly slot: NavItemRecord;
+};
+export declare const def: {
+  name: string;
+  machine: (args: NavigationMenuArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<NavigationMenuContext, NavigationMenuEvents, NavigationMenuState>;
+  args: (props: Record<string, unknown>) => NavigationMenuArgs;
+  start: (props: Record<string, unknown>, authored: (name: string) => boolean) => NavigationMenuState;
+  parts: {
+    root: {
+      attrs: () => {};
+    };
+    list: {
+      attrs: () => {
+        role: string;
+      };
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: NavigationMenuContext) => readonly NavItemRecord[];
+      attrs: (scope: ItemScope) => {
+        "use:hover-delay": {
+          openDelay: number;
+          closeDelay: number;
+          onOpen: () => void;
+          onClose: () => void;
+        };
+        onClick: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        role: string;
+      };
+    };
+    link: {
+      indexes: (context: NavigationMenuContext) => readonly NavItemRecord[];
+      attrs: (scope: ScopeLike & {
+        readonly slot: NavItemRecord;
+      }) => {
+        id: string;
+        href: string;
+        "aria-current": string | undefined;
+        "data-selected": string | undefined;
+      };
+    };
+    itemContent: {
+      id: string;
+      indexes: (context: NavigationMenuContext) => readonly NavItemRecord[];
+      attrs: (scope: ScopeLike & {
+        readonly slot: NavItemRecord;
+      }) => {
+        id: string;
+        role: string;
+        "aria-label": string;
+        hidden: boolean;
+        "use:anchor": {
+          placement: string;
+        };
+      };
+    };
+  };
+  commands: {
+    show: {
+      event: ([value]: [value: string]) => {
+        type: "ITEM.ENTER";
+        value: string;
+      };
+    };
+    hide: {
+      event: () => {
+        type: "CLOSE";
+      };
+    };
+    toggle: {
+      event: ([value]: [value: string]) => {
+        type: "ITEM.TOGGLE";
+        value: string;
+      };
+    };
+  };
+  readers: {
+    value: {
+      read: (context: NavigationMenuContext) => string;
+    };
+    items: {
+      read: (context: NavigationMenuContext) => readonly NavItemRecord[];
+    };
+    open: {
+      read: (_context: NavigationMenuContext, state: NavigationMenuState) => state is "open";
+    };
+  };
+  methods: {
+    getItems: {
+      call: (context: NavigationMenuContext) => readonly NavItemRecord[];
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: NavigationMenuContext) => string[];
+      detail: (watched: readonly unknown[]) => {
+        value: string;
+        previousValue: string;
+      };
+    };
+  };
+  settled: ({ after, event, focus, root }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: NavigationMenuContext;
+      readonly state: NavigationMenuState;
+    };
+    readonly after: {
+      readonly context: NavigationMenuContext;
+      readonly state: NavigationMenuState;
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    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;
+  }) => void;
+};
+export type NavigationMenuApi = ApiOf<typeof def>;
+export declare const navigationMenu: import("@spinjs/runtime").DefinedComponent<NavigationMenuApi, NavigationMenuArgs>;
+export type { NavItemRecord, NavigationMenuArgs, NavigationMenuState, NavigationMenuValueChange };
+//# sourceMappingURL=navigation-menu.presentation.d.ts.map

package/dist/navigation-menu/navigation-menu.presentation.js

@@ -0,0 +1,151 @@
+import { startState } from "./navigation-menu.state.js";
+import { navigationMenu as navigationMenu$1 } from "./navigation-menu.machine.js";
+import { defineComponent, disclosureTrigger, resolveTwins } from "@spinjs/runtime";
+// src/navigation-menu/navigation-menu.presentation.ts
+function neighbor(items, value, step) {
+	const at = items.findIndex((item) => item.value === value);
+	if (at < 0 || items.length === 0) return null;
+	const next = items[(at + step + items.length) % items.length];
+	return next === void 0 ? null : next;
+}
+function onItemKeydown(scope, event) {
+	const ctx = scope.context;
+	if (ctx.disabled) return;
+	const vertical = ctx.orientation === "vertical";
+	const forward = vertical ? "ArrowDown" : "ArrowRight";
+	const back = vertical ? "ArrowUp" : "ArrowLeft";
+	if (event.key === "Escape") {
+		if (ctx.value !== "") scope.send({ type: "CLOSE" });
+		return;
+	}
+	if (event.key !== forward && event.key !== back) return;
+	event.preventDefault();
+	const next = neighbor(ctx.items, scope.slot.value, event.key === forward ? 1 : -1);
+	if (next !== null) scope.send({
+		type: "ITEM.ENTER",
+		value: next.value
+	});
+}
+const def = {
+	name: "navigation-menu",
+	machine: (args, authored) => navigationMenu$1(args, authored),
+	args: (props) => props,
+	start: (props, authored) => startState(resolveTwins(props, authored)),
+	parts: {
+		root: { attrs: () => ({}) },
+		list: { attrs: () => ({ role: "menubar" }) }
+	},
+	slots: {
+		item: {
+			indexes: (context) => context.items,
+			attrs: (scope) => {
+				const item = scope.slot;
+				const ctx = scope.context;
+				const open = ctx.value === item.value;
+				return {
+					id: scope.id("item", item.value),
+					role: "menuitem",
+					...disclosureTrigger(scope, {
+						expanded: open,
+						hasPopup: "menu",
+						controls: {
+							part: "content",
+							slot: item.value
+						}
+					}),
+					"use:hover-delay": {
+						openDelay: ctx.openDelay,
+						closeDelay: ctx.closeDelay,
+						onOpen: () => scope.send({
+							type: "ITEM.ENTER",
+							value: item.value
+						}),
+						onClose: () => {
+							if (scope.context.value === item.value) scope.send({ type: "CLOSE" });
+						}
+					},
+					onClick: () => {
+						if (ctx.disabled) return;
+						scope.send({
+							type: "ITEM.TOGGLE",
+							value: item.value
+						});
+					},
+					onKeydown: (event) => onItemKeydown(scope, event)
+				};
+			}
+		},
+		link: {
+			indexes: (context) => context.items,
+			attrs: (scope) => {
+				const item = scope.slot;
+				const selected = scope.context.value === item.value;
+				return {
+					id: scope.id("link", item.value),
+					href: typeof item["href"] === "string" ? item["href"] : `#${item.value}`,
+					"aria-current": selected ? "page" : void 0,
+					"data-selected": selected ? "" : void 0
+				};
+			}
+		},
+		itemContent: {
+			id: "content",
+			indexes: (context) => context.items,
+			attrs: (scope) => {
+				const item = scope.slot;
+				const open = scope.context.value === item.value;
+				return {
+					id: scope.id("content", item.value),
+					role: "menu",
+					"aria-label": `${item.label} sub menu`,
+					hidden: !open,
+					"use:anchor": { placement: "bottom" }
+				};
+			}
+		}
+	},
+	commands: {
+		show: { event: ([value]) => ({
+			type: "ITEM.ENTER",
+			value
+		}) },
+		hide: { event: () => ({ type: "CLOSE" }) },
+		toggle: { event: ([value]) => ({
+			type: "ITEM.TOGGLE",
+			value
+		}) }
+	},
+	readers: {
+		value: { read: (context) => context.value },
+		items: { read: (context) => context.items },
+		open: { read: (_context, state) => state === "open" }
+	},
+	methods: { getItems: { call: (context) => context.items } },
+	events: { "value-change": {
+		prop: "onValueChange",
+		watch: (context) => [context.value, context.previousValue],
+		detail: (watched) => {
+			const value = watched[0];
+			const previousValue = watched[1];
+			return {
+				value: typeof value === "string" ? value : "",
+				previousValue: typeof previousValue === "string" ? previousValue : ""
+			};
+		}
+	} },
+	settled: ({ after, event, focus, root }) => {
+		if (typeof document === "undefined") return;
+		if (!root().contains(document.activeElement)) return;
+		if (event.type === "ITEM.ENTER" || event.type === "ITEM.TOGGLE") {
+			const value = event["value"];
+			if (typeof value === "string" && value !== "") focus("link", value);
+		} else if (event.type === "CLOSE") {
+			const previous = after.context.previousValue;
+			if (previous !== "") focus("link", previous);
+		}
+	}
+};
+const navigationMenu = defineComponent(def);
+export { def, navigationMenu };
+
+//# sourceMappingURL=navigation-menu.presentation.js.map

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

@@ -0,0 +1,33 @@
+export type NavValue = string;
+export interface NavItemRecord {
+  readonly value: NavValue;
+  readonly label: string;
+  readonly [key: string]: unknown;
+}
+export type NavigationMenuState = "idle" | "open";
+export interface NavigationMenuContext {
+  value: NavValue;
+  previousValue: NavValue;
+  openDelay: number;
+  closeDelay: number;
+  orientation: "horizontal" | "vertical";
+  disabled: boolean;
+  items: readonly NavItemRecord[];
+}
+export interface NavigationMenuArgs {
+  items?: unknown;
+  value?: string;
+  openDelay?: number;
+  closeDelay?: number;
+  orientation?: string;
+  disabled?: boolean;
+  defaultDisabled?: boolean;
+}
+export declare const asText: (raw: unknown) => string | null;
+/** Shape raw items into rows, dropping entries without a usable value or
+ * label. Shared by `initial` and the field contract, so a host write
+ * parses exactly like the seed. */
+export declare function parseItems(raw: unknown): NavItemRecord[];
+export declare function initial(args: NavigationMenuArgs | undefined, authored: (name: string) => boolean): NavigationMenuContext;
+export declare function startState(args?: NavigationMenuArgs): NavigationMenuState;
+//# sourceMappingURL=navigation-menu.state.d.ts.map

package/dist/navigation-menu/navigation-menu.state.js

@@ -0,0 +1,49 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/navigation-menu/navigation-menu.state.ts
+const asText = (raw) => typeof raw === "string" ? raw : null;
+/** Shape raw items into rows, dropping entries without a usable value or
+* label. Shared by `initial` and the field contract, so a host write
+* parses exactly like the seed. */
+function parseItems(raw) {
+	const list = Array.isArray(raw) ? raw : typeof raw === "string" && raw.length > 0 ? (() => {
+		try {
+			const v = JSON.parse(raw);
+			return Array.isArray(v) ? v : [];
+		} catch {
+			return [];
+		}
+	})() : [];
+	const items = [];
+	for (const entry of list) {
+		if (typeof entry !== "object" || entry === null || Array.isArray(entry)) continue;
+		const bag = { ...entry };
+		const value = bag["value"];
+		const label = bag["label"];
+		if (typeof value !== "string" || typeof label !== "string") continue;
+		items.push({
+			...bag,
+			value,
+			label
+		});
+	}
+	return items;
+}
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const count = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? value : fallback;
+	return {
+		value: written("value") ? asText(args.value) ?? "" : "",
+		previousValue: "",
+		openDelay: written("openDelay") ? count(args.openDelay, 200) : 200,
+		closeDelay: written("closeDelay") ? count(args.closeDelay, 300) : 300,
+		orientation: written("orientation") && args.orientation === "vertical" ? "vertical" : "horizontal",
+		disabled: written("disabled") ? args.disabled === true : false,
+		items: parseItems(args.items)
+	};
+}
+function startState(args = {}) {
+	return (asText(args.value) ?? "").length > 0 ? "open" : "idle";
+}
+export { asText, initial, parseItems, startState };
+
+//# sourceMappingURL=navigation-menu.state.js.map

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

@@ -0,0 +1,11 @@
+import { NavigationMenuContext } from "./navigation-menu.state.js";
+import { NavigationMenuEvents } from "./navigation-menu.events.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type NavigationMenuAssign<K extends keyof NavigationMenuEvents = keyof NavigationMenuEvents> = AssignFor<NavigationMenuContext, NavigationMenuEvents, K>;
+export declare const toggleOpen: NavigationMenuAssign<"ITEM.TOGGLE">;
+export declare const closeAll: NavigationMenuAssign<"CLOSE">;
+export declare const setValue: NavigationMenuAssign<"VALUE.SET">;
+export declare const openItem: NavigationMenuAssign<"ITEM.ENTER">;
+export declare const swapItem: NavigationMenuAssign<"ITEM.ENTER">;
+export {};
+//# sourceMappingURL=navigation-menu.transitions.d.ts.map