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

package/dist/listbox/listbox.transitions.js

@@ -0,0 +1,73 @@
+import { parseKeys, rowsOf } from "./listbox.state.js";
+// src/listbox/listbox.transitions.ts
+const orderOf = (ctx) => rowsOf(ctx.items).map((row) => row.value);
+const select = (ctx, value, metaKey) => {
+	if (!orderOf(ctx).includes(value)) return ctx.value;
+	if (!ctx.multiple) return [value];
+	if (metaKey) return ctx.value.includes(value) ? ctx.value.filter((v) => v !== value) : [...ctx.value, value];
+	if (ctx.selectionBehavior === "clear") return [value];
+	if (ctx.selectionBehavior === "preserve") return ctx.value.includes(value) ? ctx.value : [...ctx.value, value];
+	return [value];
+};
+const extendSelection = (ctx, anchorValue, value) => {
+	const indexOf = (v) => orderOf(ctx).indexOf(v);
+	const anchor = indexOf(anchorValue);
+	const end = indexOf(value);
+	if (anchor < 0 || end < 0) return ctx.value;
+	const [from, to] = anchor < end ? [anchor, end] : [end, anchor];
+	return orderOf(ctx).slice(from, to + 1);
+};
+const search = (ctx, key) => {
+	const order = orderOf(ctx);
+	const labels = Object.fromEntries(rowsOf(ctx.items).map((row) => [row.value, row.label]));
+	const needle = key.toLowerCase();
+	const start = ctx.highlightedValue === null ? 0 : order.indexOf(ctx.highlightedValue) + 1;
+	const rotated = [...order.slice(start), ...order.slice(0, start)];
+	for (const value of rotated) if ((labels[value] ?? value).toLowerCase().startsWith(needle)) return value;
+	return null;
+};
+const setFocused = () => ({ focused: true });
+const clearHighlightedValue = () => ({ highlightedValue: null });
+const setHighlightedItem = (ctx, event) => {
+	const value = event.value;
+	if (typeof value !== "string") return {};
+	return orderOf(ctx).includes(value) ? { highlightedValue: value } : {};
+};
+const syncSelectedItems = (ctx) => ({
+	value: ctx.value.filter((v) => orderOf(ctx).includes(v)),
+	highlightedValue: ctx.highlightedValue !== null && orderOf(ctx).includes(ctx.highlightedValue) ? ctx.highlightedValue : null
+});
+const setHighlightedValue = (ctx, event) => {
+	const raw = event.highlightedValue !== void 0 ? event.highlightedValue : event.value;
+	const value = typeof raw === "string" ? raw : null;
+	if (value === null || !orderOf(ctx).includes(value)) return {};
+	return { highlightedValue: value };
+};
+const selectItem = (ctx, event) => ({ value: select(ctx, event.value, false) });
+const clearItem = (ctx, event) => ({ value: ctx.value.filter((v) => v !== event.value) });
+const setValue = (ctx, event) => ({ value: parseKeys(event.value).filter((v) => orderOf(ctx).includes(v)) });
+const clearValue = () => ({ value: [] });
+const itemClickInner = (ctx, event) => {
+	const value = event.value ?? ctx.highlightedValue;
+	if (value === null || value === void 0 || !orderOf(ctx).includes(value)) return {};
+	if (event.shiftKey === true && ctx.multiple && event.anchorValue !== void 0) return { value: extendSelection(ctx, event.anchorValue, value) };
+	return { value: select(ctx, value, event.metaKey === true) };
+};
+const contentFocusAssigns = (ctx) => {
+	if (ctx.value.length > 0 || ctx.highlightedValue !== null) return [setFocused()];
+	return [setFocused(), { highlightedValue: orderOf(ctx)[0] ?? null }];
+};
+const typeaheadInner = (ctx, event) => {
+	const found = search(ctx, event.key);
+	return found === null ? {} : { highlightedValue: found };
+};
+const pointerMove = (ctx, event) => orderOf(ctx).includes(event.value) ? { highlightedValue: event.value } : {};
+const navigateInner = (ctx, event) => {
+	if (!orderOf(ctx).includes(event.value)) return {};
+	if (event.shiftKey === true && ctx.multiple && event.anchorValue !== void 0) return { value: extendSelection(ctx, event.anchorValue, event.value) };
+	if (ctx.selectOnHighlight) return { value: [event.value] };
+	return {};
+};
+export { clearHighlightedValue, clearItem, clearValue, contentFocusAssigns, itemClickInner, navigateInner, pointerMove, selectItem, setFocused, setHighlightedItem, setHighlightedValue, setValue, syncSelectedItems, typeaheadInner };
+
+//# sourceMappingURL=listbox.transitions.js.map

package/dist/menu/examples/basic.html

@@ -0,0 +1,75 @@
+<script lang="ts">
+import { menu } from "../menu.presentation.js";
+
+const machine = menu({
+  items: [{ "value": "new", "label": "New release", "shortcut": "Ctrl+N" }, {
+    "value": "open",
+    "label": "Open…",
+    "shortcut": "Ctrl+O",
+  }, { "value": "promote", "label": "Promote to production", "shortcut": "Ctrl+S" }],
+});
+</script>
+<div class="relative inline-block">
+  <div class="relative" {...machine.getContextTriggerProps()}>
+    <button
+      class="secondary s-sm inline-flex items-center gap-2"
+      {...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>
+    </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"
+            {...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 }]}
+              {...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"
+                {...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>
+              <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}
+                {...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"
+                      {...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 }]}
+                        {...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"
+                          {...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>
+                      </div>
+                    </template>
+                  </div>
+                  <hr show={sub.separator}
+                    {...machine.getSeparatorProps(sub)} />
+                </template>
+              </panel>
+            </div>
+          </template>
+        </div>
+        <hr show={block.separator}
+          {...machine.getSeparatorProps(block)} />
+      </template>
+    </panel>
+  </div>
+</div>

package/dist/menu/examples/context.html

@@ -0,0 +1,74 @@
+<script lang="ts">
+import { menu } from "../menu.presentation.js";
+
+const machine = menu({
+  items: [
+    { value: "url", label: "Copy deploy URL" },
+    { value: "logs", label: "View logs" },
+    { value: "rollback", label: "Roll back" },
+    { separator: true },
+    { value: "delete", label: "Delete deploy", disabled: true },
+    { separator: true },
+    { value: "settings", label: "Deploy settings" },
+  ],
+});
+</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"
+    {...machine.getContextTriggerProps()}>
+    Deploy #4821 · v4.12.0 — right-click for actions
+  </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"
+            {...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 }]}
+              {...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"
+                {...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>
+              <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}
+                {...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"
+                      {...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 }]}
+                        {...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"
+                          {...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>
+                      </div>
+                    </template>
+                  </div>
+                  <hr show={sub.separator}
+                    {...machine.getSeparatorProps(sub)} />
+                </template>
+              </panel>
+            </div>
+          </template>
+        </div>
+        <hr show={block.separator}
+          {...machine.getSeparatorProps(block)} />
+      </template>
+    </panel>
+  </div>
+</div>

package/dist/menu/examples/groups.html

@@ -0,0 +1,88 @@
+<script lang="ts">
+import { menu } from "../menu.presentation.js";
+
+const machine = menu({
+  items: [
+    {
+      group: "Release",
+      items: [
+        { value: "new", label: "New release" },
+        { value: "promote", label: "Promote" },
+        { value: "rollback", label: "Roll back" },
+      ],
+    },
+    {
+      group: "Instances",
+      items: [
+        { value: "restart", label: "Restart" },
+        { value: "drain", label: "Drain" },
+        { value: "logs", label: "View logs" },
+      ],
+    },
+  ],
+});
+</script>
+<div class="relative inline-block">
+  <div class="relative" {...machine.getContextTriggerProps()}>
+    <button
+      class="secondary s-sm inline-flex items-center gap-2"
+      {...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>
+    </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"
+            {...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 }]}
+              {...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"
+                {...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>
+              <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}
+                {...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"
+                      {...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 }]}
+                        {...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"
+                          {...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>
+                      </div>
+                    </template>
+                  </div>
+                  <hr show={sub.separator}
+                    {...machine.getSeparatorProps(sub)} />
+                </template>
+              </panel>
+            </div>
+          </template>
+        </div>
+        <hr show={block.separator}
+          {...machine.getSeparatorProps(block)} />
+      </template>
+    </panel>
+  </div>
+</div>

package/dist/menu/examples/icons.html

@@ -0,0 +1,80 @@
+<script lang="ts">
+import { menu } from "../menu.presentation.js";
+
+const machine = menu({
+  items: [
+    { "value": "deploy", "label": "Deploy now" },
+    { "value": "logs", "label": "View logs" },
+    { "value": "rollback", "label": "Roll back" },
+    { "value": "copy", "label": "Copy deploy URL" },
+    { "value": "pause", "label": "Pause rollout" },
+    { "value": "delete", "label": "Delete deploy" },
+  ],
+});
+</script>
+<div class="relative inline-block">
+  <div class="relative" {...machine.getContextTriggerProps()}>
+    <button
+      class="secondary s-sm inline-flex items-center gap-2"
+      {...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>
+    </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"
+            {...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 }]}
+              {...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="min-w-0 flex-1 truncate"
+                {...machine.getItemTextProps(row)}>{row.label}</span>
+              <span class="shrink-0 text-xs text-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>
+              <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}
+                {...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"
+                      {...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 }]}
+                        {...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"
+                          {...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>
+                      </div>
+                    </template>
+                  </div>
+                  <hr show={sub.separator}
+                    {...machine.getSeparatorProps(sub)} />
+                </template>
+              </panel>
+            </div>
+          </template>
+        </div>
+        <hr show={block.separator}
+          {...machine.getSeparatorProps(block)} />
+      </template>
+    </panel>
+  </div>
+</div>

package/dist/menu/examples/nested.html

@@ -0,0 +1,83 @@
+<script lang="ts">
+import { menu } from "../menu.presentation.js";
+
+const machine = menu({
+  items: [
+    { value: "new", label: "New release" },
+    { value: "promote", label: "Promote" },
+    {
+      value: "notify",
+      label: "Notify",
+      children: [
+        { value: "oncall", label: "Page on-call" },
+        { value: "team", label: "Team channel" },
+        { value: "status", label: "Status page" },
+      ],
+    },
+  ],
+});
+</script>
+<div class="relative inline-block">
+  <div class="relative" {...machine.getContextTriggerProps()}>
+    <button
+      class="secondary s-sm inline-flex items-center gap-2"
+      {...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>
+    </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"
+            {...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 }]}
+              {...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"
+                {...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>
+              <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}
+                {...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"
+                      {...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 }]}
+                        {...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"
+                          {...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>
+                      </div>
+                    </template>
+                  </div>
+                  <hr show={sub.separator}
+                    {...machine.getSeparatorProps(sub)} />
+                </template>
+              </panel>
+            </div>
+          </template>
+        </div>
+        <hr show={block.separator}
+          {...machine.getSeparatorProps(block)} />
+      </template>
+    </panel>
+  </div>
+</div>

package/dist/menu/examples/user.html

@@ -0,0 +1,87 @@
+<script lang="ts">
+import { menu } from "../menu.presentation.js";
+
+const machine = menu({
+  items: [
+    { value: "profile", label: "Profile" },
+    { value: "tokens", label: "API tokens" },
+    { value: "billing", label: "Billing" },
+    { separator: true },
+    { value: "help", label: "Help & Support" },
+    { separator: true },
+    { value: "logout", label: "Log out" },
+  ],
+});
+</script>
+<div class="relative inline-block">
+  <div class="relative" {...machine.getContextTriggerProps()}>
+    <button
+      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>
+      <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>
+    </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>
+      <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"
+            {...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" }]}
+              {...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="min-w-0 flex-1 truncate"
+                {...machine.getItemTextProps(row)}>{row.label}</span>
+              <span class="shrink-0 text-xs text-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>
+              <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}
+                {...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"
+                      {...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 }]}
+                        {...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"
+                          {...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>
+                      </div>
+                    </template>
+                  </div>
+                  <hr show={sub.separator}
+                    {...machine.getSeparatorProps(sub)} />
+                </template>
+              </panel>
+            </div>
+          </template>
+        </div>
+        <hr show={block.separator}
+          {...machine.getSeparatorProps(block)} />
+      </template>
+    </panel>
+  </div>
+</div>

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

@@ -0,0 +1,42 @@
+import { MenuEntry } from "./menu.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface MenuEvents {
+  "OPEN": {};
+  "CLOSE": {};
+  "CONTROLLED_OPEN": {};
+  "CONTROLLED_CLOSE": {};
+  "TRIGGER_CLICK": {};
+  "CONTEXT_MENU": {
+    point: {
+      x: number;
+      y: number;
+    };
+  };
+  "HIGHLIGHT": {
+    value: string | null;
+  };
+  "SUBMENU_HIGHLIGHT": {
+    value: string | null;
+  };
+  "ENTRIES.SET": {
+    entries: readonly MenuEntry[];
+  };
+  "SUBMENU_OPEN": {
+    value: string;
+  };
+  "SUBMENU_CLOSE": {};
+  "ITEM_CLICK": {
+    value: string;
+  };
+}
+export type MenuEvent = EventUnion<MenuEvents>;
+export interface MenuOpenChange {
+  readonly open: boolean;
+}
+export interface MenuSelect {
+  readonly value: string;
+}
+export interface MenuHighlightChange {
+  readonly highlightedValue: string | null;
+}
+//# sourceMappingURL=menu.events.d.ts.map

package/dist/menu/menu.events.js

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

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

@@ -0,0 +1,6 @@
+import { MenuArgs, MenuContext, MenuState } from "./menu.state.js";
+import { MenuEvent, MenuEvents } from "./menu.events.js";
+import { Machine, Service } from "@spinjs/runtime/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