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

package/dist/toc/toc.machine.js

@@ -0,0 +1,59 @@
+import { clampActiveIds, initial, parseItems } from "./toc.state.js";
+import { selectItem, setActiveIds, setItems } from "./toc.transitions.js";
+import { createMachine } from "@spinjs/components/fsm";
+// src/toc/toc.machine.ts
+/** Table of contents machine: active heading tracking and navigation. */
+function toc(args = {}, authored) {
+	return createMachine({
+		id: "toc",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			items: {
+				parse: parseItems,
+				event: "ITEMS.SET"
+			},
+			activeIds: {
+				parse: (raw) => clampActiveIds(Array.isArray(raw) ? raw : [], true),
+				event: "ACTIVE.SET"
+			},
+			multiple: {},
+			autoScroll: {},
+			rootMargin: {},
+			scrollBehavior: {}
+		},
+		states: {
+			idle: { on: {
+				"ITEMS.SET": {
+					target: "idle",
+					assign: setItems
+				},
+				"ACTIVE.SET": {
+					target: "idle",
+					assign: setActiveIds
+				},
+				"ITEM.SELECT": {
+					target: "idle",
+					assign: selectItem
+				}
+			} },
+			focused: { on: {
+				"ITEMS.SET": {
+					target: "focused",
+					assign: setItems
+				},
+				"ACTIVE.SET": {
+					target: "focused",
+					assign: setActiveIds
+				},
+				"ITEM.SELECT": {
+					target: "focused",
+					assign: selectItem
+				}
+			} }
+		}
+	});
+}
+export { toc };
+
+//# sourceMappingURL=toc.machine.js.map

package/dist/toc/toc.presentation.d.ts

@@ -0,0 +1,127 @@
+import { TocArgs, TocContext, TocItem, TocItemState, TocRow, TocState } from "./toc.state.js";
+import { TocEvents } from "./toc.events.js";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
+export declare const def: {
+  name: string;
+  machine: (args: TocArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<TocContext, TocEvents, TocState>;
+  start: "idle";
+  parts: {
+    root: {};
+    nav: {
+      attrs: () => {
+        "aria-label": string;
+      };
+    };
+    title: {
+      attrs: (scope: ViewFor<TocContext, TocEvents, TocState>) => {
+        id: string;
+      };
+    };
+    list: {
+      attrs: (scope: ViewFor<TocContext, TocEvents, TocState>) => {
+        role: string;
+      };
+    };
+    indicator: {
+      attrs: (scope: ViewFor<TocContext, TocEvents, TocState>) => {
+        "aria-hidden": string;
+        "data-active": string | undefined;
+      };
+    };
+    item: {
+      attrs: (scope: ViewFor<TocContext, TocEvents, TocState> & {
+        readonly slot: TocItem;
+      }) => {
+        "data-value": string;
+        "data-depth": string;
+        "data-active": string | undefined;
+        "data-first": string | undefined;
+        "data-last": string | undefined;
+      };
+    };
+    link: {
+      attrs: (scope: ViewFor<TocContext, TocEvents, TocState> & {
+        readonly slot: TocItem;
+      }) => {
+        id: string;
+        href: string;
+        "aria-current": string | undefined;
+        "data-value": string;
+        "data-depth": string;
+        "data-deep": string | undefined;
+        "data-active": string | undefined;
+        onClick: (event: MouseEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+      };
+    };
+  };
+  commands: {
+    scrollTo: {
+      event: ([value]: [value: string]) => {
+        type: "ITEM.SELECT";
+        value: string;
+      };
+    };
+    setActiveIds: {
+      event: ([activeIds]: [activeIds: readonly string[]]) => {
+        type: "ACTIVE.SET";
+        activeIds: readonly string[];
+      };
+    };
+    setItems: {
+      event: ([items]: [items: readonly TocRow[]]) => {
+        type: "ITEMS.SET";
+        items: readonly TocRow[];
+      };
+    };
+  };
+  readers: {
+    items: {
+      read: (context: TocContext) => readonly TocItem[];
+    };
+    activeIds: {
+      read: (context: TocContext) => readonly string[];
+    };
+    activeItems: {
+      read: (context: TocContext) => TocItem[];
+    };
+    value: {
+      read: (context: TocContext) => string;
+    };
+  };
+  methods: {
+    getItemState: {
+      call: (context: TocContext, _state: TocState, [row]: [row: TocItem | string]) => TocItemState;
+    };
+  };
+  events: {
+    "active-change": {
+      prop: string;
+      watch: (context: TocContext) => string[];
+      detail: (watched: readonly unknown[]) => {
+        activeIds: string[];
+        value: string;
+      };
+    };
+  };
+  settled: ({ event, focus }: {
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
+    readonly before: {
+      readonly context: TocContext;
+      readonly state: TocState;
+    };
+    readonly after: {
+      readonly context: TocContext;
+      readonly state: TocState;
+    };
+    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/components/runtime").AnyEvent) => void;
+  }) => void;
+};
+export type TocApi = ApiOf<typeof def>;
+export declare const toc: import("@spinjs/components/runtime").DefinedComponent<TocApi, TocArgs>;
+export type { TocArgs, TocItem, TocItemState, TocRow, TocState };

package/dist/toc/toc.presentation.js

@@ -0,0 +1,117 @@
+import { ROVING_KEYS } from "../shared/keyboard.js";
+import { toc as toc$1 } from "./toc.machine.js";
+import { itemState } from "./toc.state.js";
+import { ariaLabelledBy, defineComponent } from "@spinjs/components/runtime";
+// src/toc/toc.presentation.ts
+const neighbor = (context, value, direction) => {
+	const items = context.items;
+	const idx = items.findIndex((item) => item.value === value);
+	if (idx === -1) return null;
+	const next = idx + direction;
+	if (next < 0 || next >= items.length) return null;
+	return items[next]?.value ?? null;
+};
+const def = {
+	name: "toc",
+	machine: (args, authored) => toc$1(args, authored),
+	start: "idle",
+	parts: {
+		root: {},
+		nav: { attrs: () => ({ "aria-label": "On this page" }) },
+		title: { attrs: (scope) => ({ id: scope.id("title") }) },
+		list: { attrs: (scope) => ({
+			role: "list",
+			...ariaLabelledBy(scope, { part: "title" })
+		}) },
+		indicator: { attrs: (scope) => ({
+			"aria-hidden": "true",
+			"data-active": scope.context.activeIds.length > 0 ? "" : void 0
+		}) },
+		item: { attrs: (scope) => {
+			const row = scope.slot;
+			const st = itemState(scope.context, row);
+			return {
+				"data-value": row.value,
+				"data-depth": String(row.depth),
+				"data-active": st.active ? "" : void 0,
+				"data-first": st.first ? "" : void 0,
+				"data-last": st.last ? "" : void 0
+			};
+		} },
+		link: { attrs: (scope) => {
+			const row = scope.slot;
+			const st = itemState(scope.context, row);
+			return {
+				id: scope.id("link", row.value),
+				href: `#${row.value}`,
+				"aria-current": st.active ? "location" : void 0,
+				"data-value": row.value,
+				"data-depth": String(row.depth),
+				"data-deep": st.depth > 2 ? "" : void 0,
+				"data-active": st.active ? "" : void 0,
+				onClick: (event) => {
+					if (event.defaultPrevented) return;
+					scope.send({
+						type: "ITEM.SELECT",
+						value: row.value
+					});
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					const intent = ROVING_KEYS[event.key];
+					if (intent === void 0) return;
+					const items = scope.context.items;
+					const target = intent.intent === "next" ? neighbor(scope.context, row.value, 1) : intent.intent === "prev" ? neighbor(scope.context, row.value, -1) : intent.intent === "first" ? items[0]?.value ?? null : items[items.length - 1]?.value ?? null;
+					if (target === null) return;
+					event.preventDefault();
+					scope.send({
+						type: "ITEM.SELECT",
+						value: target
+					});
+				}
+			};
+		} }
+	},
+	commands: {
+		scrollTo: { event: ([value]) => ({
+			type: "ITEM.SELECT",
+			value
+		}) },
+		setActiveIds: { event: ([activeIds]) => ({
+			type: "ACTIVE.SET",
+			activeIds
+		}) },
+		setItems: { event: ([items]) => ({
+			type: "ITEMS.SET",
+			items
+		}) }
+	},
+	readers: {
+		items: { read: (context) => context.items },
+		activeIds: { read: (context) => context.activeIds },
+		activeItems: { read: (context) => context.items.filter((item) => context.activeIds.includes(item.value)) },
+		value: { read: (context) => context.activeIds[0] ?? "" }
+	},
+	methods: { getItemState: { call: (context, _state, [row]) => itemState(context, row) } },
+	events: { "active-change": {
+		prop: "onActiveChange",
+		watch: (context) => [context.activeIds.join("\0")],
+		detail: (watched) => {
+			const joined = typeof watched[0] === "string" ? watched[0] : "";
+			const activeIds = joined.length > 0 ? joined.split("\0") : [];
+			return {
+				activeIds,
+				value: activeIds[0] ?? ""
+			};
+		}
+	} },
+	settled: ({ event, focus }) => {
+		if (event.type !== "ITEM.SELECT") return;
+		const value = event["value"];
+		if (typeof value === "string") focus("link", value);
+	}
+};
+const toc = defineComponent(def);
+export { def, toc };
+
+//# sourceMappingURL=toc.presentation.js.map

package/dist/toc/toc.state.d.ts

@@ -0,0 +1,41 @@
+export interface TocItem {
+  readonly value: string;
+  readonly label: string;
+  readonly depth: number;
+}
+export interface TocItemState {
+  readonly value: string;
+  readonly active: boolean;
+  readonly depth: number;
+  readonly first: boolean;
+  readonly last: boolean;
+}
+export type TocState = "idle" | "focused";
+export interface TocContext {
+  items: readonly TocItem[];
+  activeIds: readonly string[];
+  defaultActiveIds: readonly string[];
+  multiple: boolean;
+  autoScroll: boolean;
+  rootMargin: string;
+  scrollBehavior: "smooth" | "instant" | "auto";
+}
+export interface TocRow {
+  readonly value?: string;
+  readonly label?: string;
+  readonly depth?: number;
+}
+export interface TocArgs {
+  items?: readonly TocRow[];
+  activeIds?: readonly string[];
+  defaultActiveIds?: readonly string[];
+  multiple?: boolean;
+  autoScroll?: boolean;
+  rootMargin?: string;
+  scrollBehavior?: "smooth" | "instant" | "auto";
+}
+export declare function parseItems(raw: unknown): TocItem[];
+export declare function parseActiveIds(raw: unknown): string[];
+export declare function clampActiveIds(ids: readonly string[], multiple: boolean): readonly string[];
+export declare function itemState(context: TocContext, row: TocItem | string): TocItemState;
+export declare function initial(args: TocArgs | undefined, authored: (name: string) => boolean): TocContext;

package/dist/toc/toc.state.js

@@ -0,0 +1,64 @@
+import { defaultTwin } from "@spinjs/components/runtime";
+// src/toc/toc.state.ts
+function parseItems(raw) {
+	const items = [];
+	const list = Array.isArray(raw) ? raw : [];
+	for (const entry of list) {
+		if (typeof entry !== "object" || entry === null) continue;
+		const row = entry;
+		const value = row["value"];
+		if (typeof value !== "string" || value.length === 0) continue;
+		const label = row["label"];
+		const rawDepth = row["depth"];
+		const depth = typeof rawDepth === "number" && Number.isFinite(rawDepth) ? Math.max(1, Math.trunc(rawDepth)) : 2;
+		items.push({
+			value,
+			label: typeof label === "string" && label.length > 0 ? label : value,
+			depth
+		});
+	}
+	return items;
+}
+function parseActiveIds(raw) {
+	if (!Array.isArray(raw)) return [];
+	const out = [];
+	for (const item of raw) if (typeof item === "string" && item.length > 0 && !out.includes(item)) out.push(item);
+	return out;
+}
+function clampActiveIds(ids, multiple) {
+	const unique = parseActiveIds(ids);
+	if (!multiple && unique.length > 1) return [unique[0]];
+	return unique;
+}
+function itemState(context, row) {
+	const value = typeof row === "string" ? row : row.value;
+	const idx = context.items.findIndex((entry) => entry.value === value);
+	const depth = (idx >= 0 ? context.items[idx] : void 0)?.depth ?? (typeof row === "object" && row !== null ? row.depth : 2);
+	return {
+		value,
+		active: context.activeIds.includes(value),
+		depth,
+		first: idx === 0,
+		last: idx >= 0 && idx === context.items.length - 1
+	};
+}
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args.defaultActiveIds !== void 0;
+	const items = parseItems(args.items ?? []);
+	const multiple = args.multiple ?? false;
+	const hostIds = parseActiveIds(args.activeIds ?? []);
+	const defaultActiveIds = parseActiveIds(args.defaultActiveIds ?? []);
+	const fallback = items[0] !== void 0 ? [items[0].value] : [];
+	return {
+		items,
+		activeIds: clampActiveIds(written("activeIds") ? hostIds.length > 0 ? hostIds : defaultActiveIds.length > 0 ? defaultActiveIds : fallback : fallback, multiple),
+		defaultActiveIds,
+		multiple,
+		autoScroll: args.autoScroll ?? true,
+		rootMargin: args.rootMargin ?? "-20px 0px -40% 0px",
+		scrollBehavior: args.scrollBehavior ?? "smooth"
+	};
+}
+export { clampActiveIds, initial, itemState, parseActiveIds, parseItems };
+
+//# sourceMappingURL=toc.state.js.map

package/dist/toc/toc.transitions.d.ts

@@ -0,0 +1,8 @@
+import { TocEvents } from "./toc.events.js";
+import { TocContext } from "./toc.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
+type TocAssign<K extends keyof TocEvents = keyof TocEvents> = AssignFor<TocContext, TocEvents, K>;
+export declare const setItems: TocAssign<"ITEMS.SET">;
+export declare const setActiveIds: TocAssign<"ACTIVE.SET">;
+export declare const selectItem: TocAssign<"ITEM.SELECT">;
+export {};

package/dist/toc/toc.transitions.js

@@ -0,0 +1,27 @@
+import { clampActiveIds, parseItems } from "./toc.state.js";
+// src/toc/toc.transitions.ts
+function sameIds(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
+	return true;
+}
+const setItems = (ctx, event) => {
+	const items = parseItems(event.items);
+	const valid = ctx.activeIds.filter((id) => items.some((item) => item.value === id));
+	return {
+		items,
+		activeIds: valid.length > 0 ? clampActiveIds(valid, ctx.multiple) : items[0] !== void 0 ? [items[0].value] : []
+	};
+};
+const setActiveIds = (ctx, event) => {
+	const next = clampActiveIds(event.activeIds, ctx.multiple);
+	return sameIds(ctx.activeIds, next) ? {} : { activeIds: next };
+};
+const selectItem = (ctx, event) => {
+	if (event.value.length === 0) return {};
+	const next = [event.value];
+	return sameIds(ctx.activeIds, next) ? {} : { activeIds: next };
+};
+export { selectItem, setActiveIds, setItems };
+
+//# sourceMappingURL=toc.transitions.js.map

package/dist/toggle-group/examples/basic.html

@@ -12,12 +12,12 @@ const machine = toggleGroup({
 
 <div class="mx-auto flex w-full max-w-md justify-center">
   <div
-    class={["inline-flex items-center gap-1 rounded-lg border border-solid border-border bg-surface-raised p-1", { "flex-col": machine.orientation === "vertical" }]}
+    class={["inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-1", { "flex-col": machine.orientation === "vertical" }]}
     {...machine.getRootProps()}
   >
     <template for={machine.getItems()} as={row} key={row.value}>
       <button
-        class={["bare rounded-md px-3 py-1 text-sm font-medium transition-all hover:bg-surface hover:text-text", { "bg-surface text-text shadow-sm": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed, "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["bare rounded-md px-3 py-1 transition-all hover:bg-surface", { "bg-surface shadow-sm": machine.getItemState(row).pressed, "text-muted": !machine.getItemState(row).pressed, "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getItemProps(row)}
       >{row.label}</button>
     </template>

package/dist/toggle-group/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/toggle-group/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { toggleGroup } from \"../toggle-group.presentation.ts\";\n\nconst machine = toggleGroup({\n  items: [{ \"value\": \"left\", \"label\": \"Left\" }, {\n    \"value\": \"center\",\n    \"label\": \"Center\",\n  }, { \"value\": \"right\", \"label\": \"Right\" }],\n  defaultValue: [\"left\"],\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md justify-center\">\n  <div\n    class={[\"inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-1\", { \"flex-col\": machine.orientation === \"vertical\" }]}\n    {...machine.getRootProps()}\n  >\n    <template for={machine.getItems()} as={row} key={row.value}>\n      <button\n        class={[\"bare rounded-md px-3 py-1 transition-all hover:bg-surface\", { \"bg-surface shadow-sm\": machine.getItemState(row).pressed, \"text-muted\": !machine.getItemState(row).pressed, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getItemProps(row)}\n      >{row.label}</button>\n    </template>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/toggle-group/examples/ghost.html

@@ -14,7 +14,7 @@ const machine = toggleGroup({
   <div class="inline-flex items-center gap-1" {...machine.getRootProps()}>
     <template for={machine.getItems()} as={row} key={row.value}>
       <button
-        class={["bare rounded-md px-3 py-2 text-sm font-medium transition-all hover:bg-surface hover:text-text", { "bg-surface-raised text-text": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed }]}
+        class={["bare rounded-md px-3 py-2 transition-all hover:bg-surface", { "bg-surface-raised": machine.getItemState(row).pressed, "text-muted": !machine.getItemState(row).pressed }]}
         {...machine.getItemProps(row)}
       >{row.label}</button>
     </template>

package/dist/toggle-group/examples/ghost.html.js

@@ -0,0 +1,5 @@
+// src/toggle-group/examples/ghost.html
+var ghost_default = "<script lang=\"ts\">\nimport { toggleGroup } from \"../toggle-group.presentation.ts\";\n\nconst machine = toggleGroup({\n  items: [{ \"value\": \"sm\", \"label\": \"S\" }, { \"value\": \"md\", \"label\": \"M\" }, {\n    \"value\": \"lg\",\n    \"label\": \"L\",\n  }, { \"value\": \"xl\", \"label\": \"XL\" }],\n  defaultValue: [\"md\"],\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md justify-center\">\n  <div class=\"inline-flex items-center gap-1\" {...machine.getRootProps()}>\n    <template for={machine.getItems()} as={row} key={row.value}>\n      <button\n        class={[\"bare rounded-md px-3 py-2 transition-all hover:bg-surface\", { \"bg-surface-raised\": machine.getItemState(row).pressed, \"text-muted\": !machine.getItemState(row).pressed }]}\n        {...machine.getItemProps(row)}\n      >{row.label}</button>\n    </template>\n  </div>\n</div>\n";
+export { ghost_default as default };
+
+//# sourceMappingURL=ghost.html.js.map

package/dist/toggle-group/examples/icons.html

@@ -12,14 +12,14 @@ const machine = toggleGroup({
 
 <div class="mx-auto flex w-full max-w-md justify-center">
   <div
-    class={["inline-flex items-center gap-1 rounded-lg border border-solid border-border bg-surface-raised p-1", { "flex-col": machine.orientation === "vertical" }]}
+    class={["inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-1", { "flex-col": machine.orientation === "vertical" }]}
     {...machine.getRootProps()}
   >
     <template for={machine.getItems()} as={row} key={row.value}>
       <button
-        class={["bare flex items-center gap-2 rounded-md px-3 py-1 text-sm font-medium transition-all hover:bg-surface hover:text-text", { "bg-surface text-text shadow-sm": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed, "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["bare flex items-center gap-2 rounded-md px-3 py-1 transition-all hover:bg-surface", { "bg-surface shadow-sm": machine.getItemState(row).pressed, "text-muted": !machine.getItemState(row).pressed, "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getItemProps(row)}
-      ><span class="text-md" aria-hidden="true"><span show={row.value === "grid"} class="inline-block i-lucide-layout-grid"></span><span show={row.value === "list"} class="inline-block i-lucide-list"></span><span show={row.value === "calendar"} class="inline-block i-lucide-calendar"></span></span>{row.label}</button>
+      ><span aria-hidden="true"><span show={row.value === "grid"} class="inline-block i-lucide-layout-grid type-body"></span><span show={row.value === "list"} class="inline-block i-lucide-list type-body"></span><span show={row.value === "calendar"} class="inline-block i-lucide-calendar type-body"></span></span>{row.label}</button>
     </template>
   </div>
 </div>

package/dist/toggle-group/examples/icons.html.js

@@ -0,0 +1,5 @@
+// src/toggle-group/examples/icons.html
+var icons_default = "<script lang=\"ts\">\nimport { toggleGroup } from \"../toggle-group.presentation.ts\";\n\nconst machine = toggleGroup({\n  items: [{ \"value\": \"grid\", \"label\": \"Grid\" }, {\n    \"value\": \"list\",\n    \"label\": \"List\",\n  }, { \"value\": \"calendar\", \"label\": \"Calendar\" }],\n  defaultValue: [\"grid\"],\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md justify-center\">\n  <div\n    class={[\"inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-1\", { \"flex-col\": machine.orientation === \"vertical\" }]}\n    {...machine.getRootProps()}\n  >\n    <template for={machine.getItems()} as={row} key={row.value}>\n      <button\n        class={[\"bare flex items-center gap-2 rounded-md px-3 py-1 transition-all hover:bg-surface\", { \"bg-surface shadow-sm\": machine.getItemState(row).pressed, \"text-muted\": !machine.getItemState(row).pressed, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getItemProps(row)}\n      ><span aria-hidden=\"true\"><span show={row.value === \"grid\"} class=\"inline-block i-lucide-layout-grid type-body\"></span><span show={row.value === \"list\"} class=\"inline-block i-lucide-list type-body\"></span><span show={row.value === \"calendar\"} class=\"inline-block i-lucide-calendar type-body\"></span></span>{row.label}</button>\n    </template>\n  </div>\n</div>\n";
+export { icons_default as default };
+
+//# sourceMappingURL=icons.html.js.map

package/dist/toggle-group/examples/multiple.html.js

@@ -0,0 +1,5 @@
+// src/toggle-group/examples/multiple.html
+var multiple_default = "<script lang=\"ts\">\nimport { toggleGroup } from \"../toggle-group.presentation.ts\";\n\nconst machine = toggleGroup({\n  items: [{ \"value\": \"bold\", \"label\": \"Bold\" }, {\n    \"value\": \"italic\",\n    \"label\": \"Italic\",\n  }, { \"value\": \"underline\", \"label\": \"Underline\" }],\n  multiple: true,\n  defaultValue: [\"bold\"],\n});\n<\/script>\n\n<include file=\"./basic.html\" />\n";
+export { multiple_default as default };
+
+//# sourceMappingURL=multiple.html.js.map

package/dist/toggle-group/examples/outline.html

@@ -13,11 +13,11 @@ const machine = toggleGroup({
 </script>
 
 <div class="mx-auto flex w-full max-w-md justify-center">
-  <div class="inline-flex overflow-hidden border border-solid border-border rounded-lg"
+  <div class="inline-flex overflow-hidden border rounded-lg"
     {...machine.getRootProps()}>
     <template for={machine.getItems()} as={row} key={row.value}>
       <button
-        class={["bare border-r border-border px-4 py-2 text-sm font-medium transition-all last:border-r-0 hover:bg-surface hover:text-text", { "bg-surface-raised text-text": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed }]}
+        class={["bare border-r px-4 py-2 transition-all last:border-r-0 hover:bg-surface", { "bg-surface-raised": machine.getItemState(row).pressed, "text-muted": !machine.getItemState(row).pressed }]}
         {...machine.getItemProps(row)}
       >{row.label}</button>
     </template>

package/dist/toggle-group/examples/outline.html.js

@@ -0,0 +1,5 @@
+// src/toggle-group/examples/outline.html
+var outline_default = "<script lang=\"ts\">\nimport { toggleGroup } from \"../toggle-group.presentation.ts\";\n\nconst machine = toggleGroup({\n  items: [\n    { \"value\": \"day\", \"label\": \"Day\" },\n    { \"value\": \"week\", \"label\": \"Week\" },\n    { \"value\": \"month\", \"label\": \"Month\" },\n    { \"value\": \"year\", \"label\": \"Year\" },\n  ],\n  defaultValue: [\"month\"],\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md justify-center\">\n  <div class=\"inline-flex overflow-hidden border rounded-lg\"\n    {...machine.getRootProps()}>\n    <template for={machine.getItems()} as={row} key={row.value}>\n      <button\n        class={[\"bare border-r px-4 py-2 transition-all last:border-r-0 hover:bg-surface\", { \"bg-surface-raised\": machine.getItemState(row).pressed, \"text-muted\": !machine.getItemState(row).pressed }]}\n        {...machine.getItemProps(row)}\n      >{row.label}</button>\n    </template>\n  </div>\n</div>\n";
+export { outline_default as default };
+
+//# sourceMappingURL=outline.html.js.map

package/dist/toggle-group/examples/toolbar.html

@@ -13,13 +13,13 @@ const machine = toggleGroup({
 
 <div class="mx-auto flex w-full max-w-md justify-center">
   <div
-    class="inline-flex items-center gap-1 rounded-lg border border-solid border-border bg-surface-raised p-2"
+    class="inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-2"
     {...machine.getRootProps()}>
     <template for={machine.getItems()} as={row} key={row.value}>
       <button
-        class={["bare rounded-md p-2 transition-all hover:bg-surface hover:text-text", { "bg-surface text-text shadow-sm": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed }]}
+        class={["bare rounded-md p-2 transition-all hover:bg-surface", { "bg-surface shadow-sm": machine.getItemState(row).pressed, "text-muted": !machine.getItemState(row).pressed }]}
         {...machine.getItemProps(row)}
-      ><span class="text-md" aria-hidden="true"><span show={row.value === "bold"} class="inline-block i-lucide-bold"></span><span show={row.value === "italic"} class="inline-block i-lucide-italic"></span><span show={row.value === "underline"} class="inline-block i-lucide-underline"></span></span></button>
+      ><span aria-hidden="true"><span show={row.value === "bold"} class="inline-block i-lucide-bold type-body"></span><span show={row.value === "italic"} class="inline-block i-lucide-italic type-body"></span><span show={row.value === "underline"} class="inline-block i-lucide-underline type-body"></span></span></button>
     </template>
   </div>
 </div>

package/dist/toggle-group/examples/toolbar.html.js

@@ -0,0 +1,5 @@
+// src/toggle-group/examples/toolbar.html
+var toolbar_default = "<script lang=\"ts\">\nimport { toggleGroup } from \"../toggle-group.presentation.ts\";\n\nconst machine = toggleGroup({\n  items: [{ \"value\": \"bold\", \"label\": \"Bold\" }, {\n    \"value\": \"italic\",\n    \"label\": \"Italic\",\n  }, { \"value\": \"underline\", \"label\": \"Underline\" }],\n  multiple: true,\n  defaultValue: [\"bold\"],\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md justify-center\">\n  <div\n    class=\"inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-2\"\n    {...machine.getRootProps()}>\n    <template for={machine.getItems()} as={row} key={row.value}>\n      <button\n        class={[\"bare rounded-md p-2 transition-all hover:bg-surface\", { \"bg-surface shadow-sm\": machine.getItemState(row).pressed, \"text-muted\": !machine.getItemState(row).pressed }]}\n        {...machine.getItemProps(row)}\n      ><span aria-hidden=\"true\"><span show={row.value === \"bold\"} class=\"inline-block i-lucide-bold type-body\"></span><span show={row.value === \"italic\"} class=\"inline-block i-lucide-italic type-body\"></span><span show={row.value === \"underline\"} class=\"inline-block i-lucide-underline type-body\"></span></span></button>\n    </template>\n  </div>\n</div>\n";
+export { toolbar_default as default };
+
+//# sourceMappingURL=toolbar.html.js.map

package/dist/toggle-group/toggle-group.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 /**
  * The toggle-group's events, as a MAP: the contract with the outside. The
  * spec's `on` map is typed over it, so a transition's KEY narrows the event
@@ -41,5 +41,4 @@ export interface ToggleGroupEvents {
 export type ToggleGroupEvent = EventUnion<ToggleGroupEvents>;
 export type ToggleGroupValueChange = {
   readonly value: string[];
-};
-//# sourceMappingURL=toggle-group.events.d.ts.map
+};

package/dist/toggle-group/toggle-group.machine.d.ts

@@ -1,5 +1,5 @@
+/** Toggle-group machine: idle/focused over two states. */
 import { ToggleGroupArgs, ToggleGroupContext, ToggleGroupState } from "./toggle-group.state.js";
 import { ToggleGroupEvents } from "./toggle-group.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function toggleGroup(args?: ToggleGroupArgs, authored?: (name: string) => boolean): Machine<ToggleGroupContext, ToggleGroupEvents, ToggleGroupState>;
-//# sourceMappingURL=toggle-group.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function toggleGroup(args?: ToggleGroupArgs, authored?: (name: string) => boolean): Machine<ToggleGroupContext, ToggleGroupEvents, ToggleGroupState>;

package/dist/toggle-group/toggle-group.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./toggle-group.state.js";
 import { clearClickFocus, setFocusedId, setTabbingBackward, setValue } from "./toggle-group.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/toggle-group/toggle-group.machine.ts
 /** Toggle-group machine: idle/focused over two states. */
 function toggleGroup(args = {}, authored = () => false) {

package/dist/toggle-group/toggle-group.presentation.d.ts

@@ -1,12 +1,12 @@
 import { ToggleGroupArgs, ToggleGroupContext, ToggleGroupItem, ToggleGroupState } from "./toggle-group.state.js";
 import { ToggleGroupEvents, ToggleGroupValueChange } from "./toggle-group.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 type Ctx = ToggleGroupContext;
 type ScopeLike = ViewFor<ToggleGroupContext, ToggleGroupEvents, "idle" | "focused">;
 type SlotLike<R> = SlotViewFor<R, ToggleGroupContext, ToggleGroupEvents, "idle" | "focused">;
 export declare const def: {
   name: string;
-  machine: (args: ToggleGroupArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ToggleGroupContext, ToggleGroupEvents, ToggleGroupState>;
+  machine: (args: ToggleGroupArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<ToggleGroupContext, ToggleGroupEvents, ToggleGroupState>;
   start: "idle";
   parts: {
     root: {
@@ -89,7 +89,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: ToggleGroupContext;
       readonly state: "idle" | "focused";
@@ -103,10 +103,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 ToggleGroupApi = ApiOf<typeof def>;
-export declare const toggleGroup: import("@spinjs/runtime").DefinedComponent<ToggleGroupApi, ToggleGroupArgs>;
-export type { ToggleGroupArgs, ToggleGroupItem, ToggleGroupValueChange };
-//# sourceMappingURL=toggle-group.presentation.d.ts.map
+export declare const toggleGroup: import("@spinjs/components/runtime").DefinedComponent<ToggleGroupApi, ToggleGroupArgs>;
+export type { ToggleGroupArgs, ToggleGroupItem, ToggleGroupValueChange };