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

package/dist/carousel/examples/testimonials.html.js

@@ -0,0 +1,5 @@
+// src/carousel/examples/testimonials.html
+var testimonials_default = "<script lang=\"ts\">\nimport { carousel } from \"../carousel.presentation.ts\";\n\nconst machine = carousel({\n  allowMouseDrag: true,\n  items: [\n    { value: \"sarah\", initials: \"SJ\", role: \"Marketing Director\", label: \"Sarah Johnson\", content: \"Ships on time with zero visual drift across themes.\" },\n    { value: \"michael\", initials: \"MC\", role: \"Engineering Lead\", label: \"Michael Chen\", content: \"Deterministic state machines and zero flaky selectors.\" },\n    { value: \"emily\", initials: \"ER\", role: \"Design Systems\", label: \"Emily Rodriguez\", content: \"Every token lands cleanly without one-off overrides.\" },\n  ],\n});\n<\/script>\n\n<div\n  class=\"relative mx-auto w-full max-w-[32rem] rounded-lg border bg-surface-raised p-4\"\n  {...machine.getRootProps()}>\n  <div\n    class={[\"flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none\", { \"cursor-grabbing snap-none scroll-auto\": machine.isDragging }]}\n    {...machine.getItemGroupProps()}\n  >\n    <template for={machine.getItemIndexes()} as={row} key={row.value}>\n      <div\n        class={[\"w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50\", { \"opacity-100\": machine.isInView(row.index) }]}\n        {...machine.getItemProps(row)}\n      >\n        <div\n          class=\"flex min-h-[8rem] flex-col items-center justify-center rounded-md border bg-surface p-6 text-center\">\n          <span class=\"i-lucide-quote icon-lg text-primary\"\n            aria-hidden=\"true\"></span>\n          <p class=\"italic\">\"{row.content}\"</p>\n          <div class=\"mt-3 flex items-center justify-center gap-1\"\n            aria-hidden=\"true\">\n            <span class=\"i-lucide-star type-code text-semantic-warning\"></span><span class=\"i-lucide-star type-code text-semantic-warning\"></span><span class=\"i-lucide-star type-code text-semantic-warning\"></span><span class=\"i-lucide-star type-code text-semantic-warning\"></span><span class=\"i-lucide-star type-code text-semantic-warning\"></span>\n          </div>\n          <div class=\"mt-3 flex items-center gap-2\">\n            <span class=\"grid h-10 w-10 shrink-0 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary\">{row.initials}</span>\n            <div class=\"text-left\">\n              <div class=\"type-label\">{row.label}</div>\n              <div class=\"type-caption text-muted\">{row.role}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <div\n    class={[\"mt-2 h-1 overflow-hidden rounded-full bg-surface-raised opacity-0 transition-opacity duration-fast ease-standard pointer-events-none\", { \"opacity-100\": machine.isPlaying }]}\n    {...machine.getAutoplayProgressProps()}>\n    <div\n      class={[\"h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard\", { \"scale-x-100\": machine.isPlaying }]}\n      {...machine.getAutoplayProgressFillProps()}></div>\n  </div>\n\n  <div class=\"flex items-center gap-2 pt-4\" {...machine.getControlProps()}>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getPrevTriggerProps()}>‹</button>\n    <div class=\"flex flex-1 items-center justify-center gap-1\"\n      {...machine.getIndicatorGroupProps()}>\n      <template for={machine.getItemIndexes()} as={row} key={row.value}>\n        <button\n          class={[\"bare h-2 w-2 rounded-full border bg-surface-raised transition-all duration-base ease-standard\", { \"w-4 border-transparent\": machine.isInView(row.index), \"ring-2 ring-border-strong\": machine.focused }]}\n          {...machine.getIndicatorProps(row)}></button>\n      </template>\n    </div>\n    <button\n      class={[\"ghost icon s-sm\", { \"text-primary\": machine.isPlaying, \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getAutoplayTriggerProps()}>▶</button>\n    <template for={machine.getProgressRows()} as={row} key={row.value}>\n      <span class=\"type-caption text-muted\"\n        {...machine.getProgressTextProps()}>{row.value}</span>\n    </template>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getNextTriggerProps()}>›</button>\n  </div>\n</div>\n";
+export { testimonials_default as default };
+
+//# sourceMappingURL=testimonials.html.js.map

package/dist/carousel/examples/thumbnails.html

@@ -12,7 +12,7 @@ const machine = carousel({
 </script>
 
 <div
-  class="relative mx-auto w-full max-w-[32rem] rounded-lg border border-solid border-border bg-surface-raised p-4"
+  class="relative mx-auto w-full max-w-[32rem] rounded-lg border bg-surface-raised p-4"
   {...machine.getRootProps()}>
   <div
     class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
@@ -24,17 +24,17 @@ const machine = carousel({
         {...machine.getItemProps(row)}
       >
         <div
-          class="flex min-h-[8rem] flex-col items-center justify-center rounded-md border border-solid border-border bg-surface p-6 text-center">
-          <span class="font-mono text-xs text-primary">{row.tag}</span>
-          <div class="mt-1 text-md font-semibold text-text">{row.label}</div>
-          <div class="mt-1 text-xs text-text-muted">{row.content}</div>
+          class="flex min-h-[8rem] flex-col items-center justify-center rounded-md border bg-surface p-6 text-center">
+          <span class="type-code text-primary">{row.tag}</span>
+          <div class="mt-1 type-body-emphasized">{row.label}</div>
+          <div class="mt-1 type-caption text-muted">{row.content}</div>
         </div>
       </div>
     </template>
   </div>
 
   <div
-    class={["mt-2 h-1 overflow-hidden rounded-full bg-border opacity-0 transition-opacity duration-fast ease-standard pointer-events-none", { "opacity-100": machine.isPlaying }]}
+    class={["mt-2 h-1 overflow-hidden rounded-full bg-surface-raised opacity-0 transition-opacity duration-fast ease-standard pointer-events-none", { "opacity-100": machine.isPlaying }]}
     {...machine.getAutoplayProgressProps()}>
     <div
       class={["h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard", { "scale-x-100": machine.isPlaying }]}
@@ -49,7 +49,7 @@ const machine = carousel({
       {...machine.getIndicatorGroupProps()}>
       <template for={machine.getItemIndexes()} as={row} key={row.value}>
         <button
-          class={["bare shrink-0 border-2 border-transparent px-2 py-1 text-xs text-text-muted transition-all hover:border-border", { "border-primary": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          class={["bare shrink-0 border-2 border-transparent px-2 py-1 text-muted transition-all hover:border", { "border-primary": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
           {...machine.getIndicatorProps(row)}>{row.label}</button>
       </template>
     </div>
@@ -57,7 +57,7 @@ const machine = carousel({
       class={["ghost icon s-sm", { "text-primary": machine.isPlaying, "ring-2 ring-border-strong": machine.focused }]}
       {...machine.getAutoplayTriggerProps()}>▶</button>
     <template for={machine.getProgressRows()} as={row} key={row.value}>
-      <span class="text-xs text-text-muted"
+      <span class="type-caption text-muted"
         {...machine.getProgressTextProps()}>{row.value}</span>
     </template>
     <button

package/dist/carousel/examples/thumbnails.html.js

@@ -0,0 +1,5 @@
+// src/carousel/examples/thumbnails.html
+var thumbnails_default = "<script lang=\"ts\">\nimport { carousel } from \"../carousel.presentation.ts\";\n\nconst machine = carousel({\n  allowMouseDrag: true,\n  items: [\n    { value: \"a\", tag: \"01 · Peak\", label: \"Alpine\", content: \"Thin air, steep lines.\" },\n    { value: \"b\", tag: \"02 · Coast\", label: \"Bay\", content: \"Salt, fog, gulls.\" },\n    { value: \"c\", tag: \"03 · Mesa\", label: \"Canyon\", content: \"Red rock, deep time.\" },\n  ],\n});\n<\/script>\n\n<div\n  class=\"relative mx-auto w-full max-w-[32rem] rounded-lg border bg-surface-raised p-4\"\n  {...machine.getRootProps()}>\n  <div\n    class={[\"flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none\", { \"cursor-grabbing snap-none scroll-auto\": machine.isDragging }]}\n    {...machine.getItemGroupProps()}\n  >\n    <template for={machine.getItemIndexes()} as={row} key={row.value}>\n      <div\n        class={[\"w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50\", { \"opacity-100\": machine.isInView(row.index) }]}\n        {...machine.getItemProps(row)}\n      >\n        <div\n          class=\"flex min-h-[8rem] flex-col items-center justify-center rounded-md border bg-surface p-6 text-center\">\n          <span class=\"type-code text-primary\">{row.tag}</span>\n          <div class=\"mt-1 type-body-emphasized\">{row.label}</div>\n          <div class=\"mt-1 type-caption text-muted\">{row.content}</div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <div\n    class={[\"mt-2 h-1 overflow-hidden rounded-full bg-surface-raised opacity-0 transition-opacity duration-fast ease-standard pointer-events-none\", { \"opacity-100\": machine.isPlaying }]}\n    {...machine.getAutoplayProgressProps()}>\n    <div\n      class={[\"h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard\", { \"scale-x-100\": machine.isPlaying }]}\n      {...machine.getAutoplayProgressFillProps()}></div>\n  </div>\n\n  <div class=\"flex items-center gap-2 pt-4\" {...machine.getControlProps()}>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getPrevTriggerProps()}>‹</button>\n    <div class=\"flex flex-1 items-center justify-center gap-1\"\n      {...machine.getIndicatorGroupProps()}>\n      <template for={machine.getItemIndexes()} as={row} key={row.value}>\n        <button\n          class={[\"bare shrink-0 border-2 border-transparent px-2 py-1 text-muted transition-all hover:border\", { \"border-primary\": machine.isInView(row.index), \"ring-2 ring-border-strong\": machine.focused }]}\n          {...machine.getIndicatorProps(row)}>{row.label}</button>\n      </template>\n    </div>\n    <button\n      class={[\"ghost icon s-sm\", { \"text-primary\": machine.isPlaying, \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getAutoplayTriggerProps()}>▶</button>\n    <template for={machine.getProgressRows()} as={row} key={row.value}>\n      <span class=\"type-caption text-muted\"\n        {...machine.getProgressTextProps()}>{row.value}</span>\n    </template>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getNextTriggerProps()}>›</button>\n  </div>\n</div>\n";
+export { thumbnails_default as default };
+
+//# sourceMappingURL=thumbnails.html.js.map

package/dist/carousel/examples/vertical.html

@@ -12,7 +12,7 @@ const machine = carousel({
 </script>
 
 <div
-  class="relative mx-auto w-full max-w-[32rem] rounded-lg border border-solid border-border bg-surface-raised p-4"
+  class="relative mx-auto w-full max-w-[32rem] rounded-lg border bg-surface-raised p-4"
   {...machine.getRootProps()}>
   <div
     class={["flex flex-col h-40 snap-y snap-mandatory overflow-y-auto scroll-smooth select-none", { "snap-none scroll-auto": machine.isDragging }]}
@@ -24,17 +24,17 @@ const machine = carousel({
         {...machine.getItemProps(row)}
       >
         <div
-          class="flex h-full flex-col items-center justify-center rounded-md border border-solid border-border bg-surface p-4 text-center">
-          <span class="font-mono text-xs text-primary">{row.tag}</span>
-          <div class="mt-1 text-md font-semibold text-text">{row.label}</div>
-          <div class="mt-1 text-xs text-text-muted">{row.content}</div>
+          class="flex h-full flex-col items-center justify-center rounded-md border bg-surface p-4 text-center">
+          <span class="type-code text-primary">{row.tag}</span>
+          <div class="mt-1 type-body-emphasized">{row.label}</div>
+          <div class="mt-1 type-caption text-muted">{row.content}</div>
         </div>
       </div>
     </template>
   </div>
 
   <div
-    class={["mt-2 h-1 overflow-hidden rounded-full bg-border opacity-0 transition-opacity duration-fast ease-standard pointer-events-none", { "opacity-100": machine.isPlaying }]}
+    class={["mt-2 h-1 overflow-hidden rounded-full bg-surface-raised opacity-0 transition-opacity duration-fast ease-standard pointer-events-none", { "opacity-100": machine.isPlaying }]}
     {...machine.getAutoplayProgressProps()}>
     <div
       class={["h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard", { "scale-x-100": machine.isPlaying }]}
@@ -49,7 +49,7 @@ const machine = carousel({
       {...machine.getIndicatorGroupProps()}>
       <template for={machine.getItemIndexes()} as={row} key={row.value}>
         <button
-          class={["bare h-2 w-2 rounded-full p-0 border-border bg-surface transition-all duration-base ease-standard", { "h-4 w-2 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          class={["bare h-2 w-2 rounded-full border bg-surface-raised transition-all duration-base ease-standard", { "h-4 w-2 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
           {...machine.getIndicatorProps(row)}></button>
       </template>
     </div>
@@ -57,7 +57,7 @@ const machine = carousel({
       class={["ghost icon s-sm", { "text-primary": machine.isPlaying, "ring-2 ring-border-strong": machine.focused }]}
       {...machine.getAutoplayTriggerProps()}>▶</button>
     <template for={machine.getProgressRows()} as={row} key={row.value}>
-      <span class="text-xs text-text-muted"
+      <span class="type-caption text-muted"
         {...machine.getProgressTextProps()}>{row.value}</span>
     </template>
     <button

package/dist/carousel/examples/vertical.html.js

@@ -0,0 +1,5 @@
+// src/carousel/examples/vertical.html
+var vertical_default = "<script lang=\"ts\">\nimport { carousel } from \"../carousel.presentation.ts\";\n\nconst machine = carousel({\n  items: [\n    { value: \"a\", tag: \"01 · Peak\", label: \"Alpine\", content: \"Thin air, steep lines.\" },\n    { value: \"b\", tag: \"02 · Coast\", label: \"Bay\", content: \"Salt, fog, gulls.\" },\n    { value: \"c\", tag: \"03 · Mesa\", label: \"Canyon\", content: \"Red rock, deep time.\" },\n  ],\n  orientation: \"vertical\",\n});\n<\/script>\n\n<div\n  class=\"relative mx-auto w-full max-w-[32rem] rounded-lg border bg-surface-raised p-4\"\n  {...machine.getRootProps()}>\n  <div\n    class={[\"flex flex-col h-40 snap-y snap-mandatory overflow-y-auto scroll-smooth select-none\", { \"snap-none scroll-auto\": machine.isDragging }]}\n    {...machine.getItemGroupProps()}\n  >\n    <template for={machine.getItemIndexes()} as={row} key={row.value}>\n      <div\n        class={[\"h-full w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50\", { \"opacity-100\": machine.isInView(row.index) }]}\n        {...machine.getItemProps(row)}\n      >\n        <div\n          class=\"flex h-full flex-col items-center justify-center rounded-md border bg-surface p-4 text-center\">\n          <span class=\"type-code text-primary\">{row.tag}</span>\n          <div class=\"mt-1 type-body-emphasized\">{row.label}</div>\n          <div class=\"mt-1 type-caption text-muted\">{row.content}</div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <div\n    class={[\"mt-2 h-1 overflow-hidden rounded-full bg-surface-raised opacity-0 transition-opacity duration-fast ease-standard pointer-events-none\", { \"opacity-100\": machine.isPlaying }]}\n    {...machine.getAutoplayProgressProps()}>\n    <div\n      class={[\"h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard\", { \"scale-x-100\": machine.isPlaying }]}\n      {...machine.getAutoplayProgressFillProps()}></div>\n  </div>\n\n  <div class=\"flex items-center gap-2 pt-4\" {...machine.getControlProps()}>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getPrevTriggerProps()}>˄</button>\n    <div class=\"flex flex-1 items-center justify-center gap-1\"\n      {...machine.getIndicatorGroupProps()}>\n      <template for={machine.getItemIndexes()} as={row} key={row.value}>\n        <button\n          class={[\"bare h-2 w-2 rounded-full border bg-surface-raised transition-all duration-base ease-standard\", { \"h-4 w-2 border-transparent\": machine.isInView(row.index), \"ring-2 ring-border-strong\": machine.focused }]}\n          {...machine.getIndicatorProps(row)}></button>\n      </template>\n    </div>\n    <button\n      class={[\"ghost icon s-sm\", { \"text-primary\": machine.isPlaying, \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getAutoplayTriggerProps()}>▶</button>\n    <template for={machine.getProgressRows()} as={row} key={row.value}>\n      <span class=\"type-caption text-muted\"\n        {...machine.getProgressTextProps()}>{row.value}</span>\n    </template>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getNextTriggerProps()}>˅</button>\n  </div>\n</div>\n";
+export { vertical_default as default };
+
+//# sourceMappingURL=vertical.html.js.map

package/dist/cascade-select/cascade.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface CascadeEvents {
   "OPEN": {};
   "CLOSE": {
@@ -38,5 +38,4 @@ export interface CascadeEvents {
   };
   "CLEAR_TRIGGER_CLICK": {};
 }
-export type CascadeEvent = EventUnion<CascadeEvents>;
-//# sourceMappingURL=cascade.events.d.ts.map
+export type CascadeEvent = EventUnion<CascadeEvents>;

package/dist/cascade-select/cascade.machine.d.ts

@@ -1,7 +1,6 @@
-import { CascadeEvents } from "./cascade.events.js";
 import { CascadeArgs, CascadeContext, CascadeState, initial, parsePath, parsePaths, startOpen } from "./cascade.state.js";
-import { EventUnion, Machine } from "@spinjs/runtime/fsm";
+import { CascadeEvents } from "./cascade.events.js";
+import { EventUnion, Machine } from "@spinjs/components/fsm";
 export type CascadeEvent = EventUnion<CascadeEvents>;
 export declare function cascade(args: CascadeArgs | undefined, authored: (name: string) => boolean): Machine<CascadeContext, CascadeEvents, CascadeState>;
-export { type CascadeArgs, type CascadeContext, type CascadeEvents, initial, parsePath, parsePaths, startOpen };
-//# sourceMappingURL=cascade.machine.d.ts.map
+export { type CascadeArgs, type CascadeContext, type CascadeEvents, initial, parsePath, parsePaths, startOpen };

package/dist/cascade-select/cascade.machine.js

@@ -1,6 +1,6 @@
 import { initial, parseCollection, parsePath, parsePaths, startOpen } from "./cascade.state.js";
 import { clearHighlightedValue, clearTriggerAssign, clearValue, highlightSelected, hoverHighlightAssign, hoverHighlightGuard, itemClearAssign, itemClickCloseGuard, itemClickSelectableGuard, openWithHighlight, restoresFocus, selectItem, setHighlightedValue, setValue } from "./cascade.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/cascade-select/cascade.machine.ts
 function cascade(args = {}, authored) {
 	return createMachine({

package/dist/cascade-select/cascade.presentation.d.ts

@@ -1,6 +1,6 @@
-import { CascadeEvents } from "./cascade.events.js";
 import { CascadeArgs, CascadeContext, CascadeState } from "./cascade.state.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { CascadeEvents } from "./cascade.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 /**
  * Cascade-select definition: the DOM contract as data.
  *
@@ -86,7 +86,7 @@ type ScopeLike = ViewFor<CascadeContext, CascadeEvents, CascadeState>;
 type SlotLike<R> = SlotViewFor<R, CascadeContext, CascadeEvents, CascadeState>;
 export declare const def: {
   name: string;
-  machine: (args: CascadeArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<CascadeContext, CascadeEvents, CascadeState>;
+  machine: (args: CascadeArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<CascadeContext, CascadeEvents, CascadeState>;
   settled: ({ event, before, after, focus }: {
     readonly event: {
       readonly type: string;
@@ -197,7 +197,7 @@ export declare const def: {
       };
     };
     content: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CascadeContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CascadeEvents>, CascadeState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CascadeContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CascadeEvents>, CascadeState>) => {
         "data-disabled"?: string | undefined;
         "data-activedescendant": string | undefined;
         hidden: boolean;
@@ -354,12 +354,12 @@ export declare const def: {
       read: (context: CascadeContext) => boolean;
     };
     levels: {
-      read: (context: CascadeContext, _state: CascadeState, props: Record<string, unknown>) => readonly CascadeLevel[];
+      read: (context: CascadeContext) => readonly CascadeLevel[];
     };
   };
   methods: {
     getLevels: {
-      call: (context: CascadeContext, _state: CascadeState, _args: readonly unknown[], props: Record<string, unknown>) => readonly CascadeLevel[];
+      call: (context: CascadeContext) => readonly CascadeLevel[];
     };
     getItems: {
       call: (_context: CascadeContext, _state: CascadeState, [level]: [level: CascadeLevel]) => readonly CascadeItem[];
@@ -410,6 +410,5 @@ export declare const def: {
   };
 };
 export type CascadeApi = ApiOf<typeof def>;
-export declare const cascade: import("@spinjs/runtime").DefinedComponent<CascadeApi, CascadeArgs>;
-export {};
-//# sourceMappingURL=cascade.presentation.d.ts.map
+export declare const cascade: import("@spinjs/components/runtime").DefinedComponent<CascadeApi, CascadeArgs>;
+export {};

package/dist/cascade-select/cascade.presentation.js

@@ -1,6 +1,6 @@
-import { parseCollection as parseCollection$1, parsePath, startOpen } from "./cascade.state.js";
 import { cascade as cascade$1 } from "./cascade.machine.js";
-import { ariaDisabled, ariaHidden, ariaLabelledBy, ariaOwns, defineComponent, disclosureTrigger, isRecord, listSurface, optionRow } from "@spinjs/runtime";
+import { parseCollection as parseCollection$1, parsePath, startOpen } from "./cascade.state.js";
+import { ariaDisabled, ariaHidden, ariaLabelledBy, ariaOwns, defineComponent, disclosureTrigger, isRecord, listSurface, optionRow } from "@spinjs/components/runtime";
 // src/cascade-select/cascade.presentation.ts
 /** Path segments join with a comma in ids. */
 const SEP = ",";
@@ -122,7 +122,7 @@ const itemHandlers = (scope, item) => {
 	if (hit !== void 0) return hit;
 	const made = {
 		onClick: () => {
-			if (item.disabled || !isInteractive$1(scope)) return;
+			if (item.disabled || !isInteractive(scope)) return;
 			scope.send({
 				type: "ITEM_CLICK",
 				value: [...item.path],
@@ -130,7 +130,7 @@ const itemHandlers = (scope, item) => {
 			});
 		},
 		onPointerMove: (event) => {
-			if (!isInteractive$1(scope) || item.disabled || event.pointerType !== "mouse") return;
+			if (!isInteractive(scope) || item.disabled || event.pointerType !== "mouse") return;
 			scope.send({
 				type: "ITEM_POINTER_ENTER",
 				value: [...item.path],
@@ -138,7 +138,7 @@ const itemHandlers = (scope, item) => {
 			});
 		},
 		onDoubleClick: () => {
-			if (item.disabled || !isInteractive$1(scope)) return;
+			if (item.disabled || !isInteractive(scope)) return;
 			scope.send({ type: "CLOSE" });
 		}
 	};
@@ -150,7 +150,7 @@ const fieldsetDisabled = (root) => {
 	return fieldset !== null && fieldset.hasAttribute("disabled");
 };
 const disabledOf = (scope) => scope.context.disabled || fieldsetDisabled(scope.root);
-const isInteractive$1 = (scope) => !(disabledOf(scope) || scope.context.readOnly);
+const isInteractive = (scope) => !(disabledOf(scope) || scope.context.readOnly);
 const highlightPath = (scope, path) => {
 	scope.send({
 		type: "HIGHLIGHTED_VALUE_SET",
@@ -263,7 +263,7 @@ const dismissSelf = (scope, restoreFocus) => {
 	});
 };
 const onTriggerKeydown = (scope, event) => {
-	if (event.defaultPrevented || !isInteractive$1(scope)) return;
+	if (event.defaultPrevented || !isInteractive(scope)) return;
 	const forward = scope.context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
 	const back = scope.context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
 	const openWithEdge = (end) => {
@@ -302,7 +302,7 @@ const onTriggerKeydown = (scope, event) => {
 	event.preventDefault();
 };
 const onContentKeydown = (scope, event) => {
-	if (event.defaultPrevented || !isInteractive$1(scope)) return;
+	if (event.defaultPrevented || !isInteractive(scope)) return;
 	const forward = scope.context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
 	const back = scope.context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
 	switch (event.key) {
@@ -465,7 +465,7 @@ const def = {
 			dir: scope.context.dir,
 			htmlFor: scope.id("hiddenInput"),
 			onClick: (event) => {
-				if (event.defaultPrevented || !isInteractive$1(scope)) return;
+				if (event.defaultPrevented || !isInteractive(scope)) return;
 				scope.send({ type: "TRIGGER_FOCUS" });
 			},
 			"data-state": scope.state === "open" ? "open" : "closed",
@@ -490,7 +490,7 @@ const def = {
 			...ariaLabelledBy(scope, { part: "label" }),
 			disabled: disabledOf(scope),
 			onClick: (event) => {
-				if (event.defaultPrevented || !isInteractive$1(scope)) return;
+				if (event.defaultPrevented || !isInteractive(scope)) return;
 				scope.send({ type: "TRIGGER_CLICK" });
 			},
 			onFocus: () => scope.send({ type: "TRIGGER_FOCUS" }),
@@ -703,10 +703,10 @@ const def = {
 		highlightedValue: { read: (context) => [...context.highlightedValue] },
 		hasSelectedItems: { read: (context) => context.value.length > 0 },
 		empty: { read: (context) => context.value.length === 0 },
-		levels: { read: (context, _state, props) => levelsOf(context.collection, context.highlightedValue) }
+		levels: { read: (context) => levelsOf(context.collection, context.highlightedValue) }
 	},
 	methods: {
-		getLevels: { call: (context, _state, _args, props) => levelsOf(context.collection, context.highlightedValue) },
+		getLevels: { call: (context) => levelsOf(context.collection, context.highlightedValue) },
 		getItems: { call: (_context, _state, [level]) => levelOf(level).items },
 		getItemState: { call: (context, _state, [item]) => {
 			const highlight = context.highlightedValue;

package/dist/cascade-select/cascade.state.d.ts

@@ -54,5 +54,4 @@ export declare function parsePaths(raw: unknown): readonly string[][];
 export declare const parseCollection: (raw: unknown) => readonly CascadeNode[];
 export declare function initial(args: CascadeArgs | undefined, authored: (name: string) => boolean): CascadeContext;
 export declare function startOpen(raw: Record<string, unknown>): boolean;
-export type { CascadeNode };
-//# sourceMappingURL=cascade.state.d.ts.map
+export type { CascadeNode };

package/dist/cascade-select/cascade.state.js

@@ -1,4 +1,4 @@
-import { coerceJsonArray, defaultTwin, isRecord } from "@spinjs/runtime";
+import { coerceJsonArray, defaultTwin, isRecord } from "@spinjs/components/runtime";
 // src/cascade-select/cascade.state.ts
 const coerceList = (raw) => {
 	if (Array.isArray(raw)) return raw;

package/dist/cascade-select/cascade.transitions.d.ts

@@ -1,6 +1,6 @@
 import { CascadeEvents } from "./cascade.events.js";
 import { CascadeContext } from "./cascade.state.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type CascadeAssign<K extends keyof CascadeEvents = keyof CascadeEvents> = AssignFor<CascadeContext, CascadeEvents, K>;
 type CascadeGuard<K extends keyof CascadeEvents = keyof CascadeEvents> = GuardFor<CascadeContext, CascadeEvents, K>;
 export declare const restoresFocus: CascadeGuard;
@@ -17,5 +17,4 @@ export declare const hoverHighlightGuard: CascadeGuard;
 export declare const hoverHighlightAssign: CascadeAssign<"ITEM_POINTER_ENTER">;
 export declare const itemClearAssign: CascadeAssign<"ITEM_CLEAR">;
 export declare const clearTriggerAssign: CascadeAssign<"CLEAR_TRIGGER_CLICK">;
-export {};
-//# sourceMappingURL=cascade.transitions.d.ts.map
+export {};

package/dist/cascade-select/examples/basic.html

@@ -8,32 +8,34 @@ const machine = cascade({
 </script>
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Region</label>
 
   <div class="flex items-center gap-1" {...machine.getControlProps()}>
     <button
-      class={["secondary s-sm flex min-w-0 flex-1 items-center gap-2", { "bg-surface": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
+      class={["bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-field px-3 type-label transition-colors duration-fast ease-decelerate hover:border-strong", { "border-strong bg-surface-raised": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
       {...machine.getTriggerProps()}
     >
       <span class="min-w-0 flex-1 truncate text-left"
         {...machine.getValueTextProps()}>
+        <span class="text-muted" hidden={machine.value.length > 0}>Select region…</span>
         <template for={machine.getValueTextRows()} as={row} key={row.value}>
           <span>{row.value}</span>
         </template>
       </span>
       <span
         aria-hidden="true"
-        class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
+        class={["shrink-0 text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
         {...machine.getIndicatorProps()}
-      ><span class="i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+      ><span class="i-lucide-chevron-down icon-sm" aria-hidden="true"></span></span>
     </button>
     <button
       aria-hidden="true"
       tabindex="-1"
-      class="ghost icon s-sm flex h-6 w-6 shrink-0 items-center justify-center"
+      hidden={machine.value.length === 0}
+      class="ghost icon s-sm flex h-6 w-6 shrink-0 items-center justify-center text-muted hover:bg-surface"
       {...machine.getClearTriggerProps()}
-    ><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+    ><span class="i-lucide-x icon-sm" aria-hidden="true"></span></button>
   </div>
 
   <div
@@ -51,21 +53,21 @@ const machine = cascade({
         >
           <template for={machine.getItems(level)} as={row} key={row.key}>
             <div
-              class="bare flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate"
+              class="bare flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate"
               {...machine.getItemProps(row)}
             >
               <span class="min-w-0 flex-1 truncate"
                 {...machine.getItemTextProps(row)}>{row.label}</span>
               <span
                 aria-hidden="true"
-                class="shrink-0 text-xs text-text-muted"
+                class="shrink-0 text-muted"
                 hidden={!row.hasChildren}
-              ><span class="i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
+              ><span class="i-lucide-chevron-right type-caption" aria-hidden="true"></span></span>
               <span
                 aria-hidden="true"
-                class="shrink-0 text-xs text-primary"
+                class="shrink-0 text-primary"
                 {...machine.getItemIndicatorProps(row)}
-              ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+              ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
             </div>
           </template>
         </panel-list>

package/dist/cascade-select/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/cascade-select/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { cascade } from \"../cascade.presentation.ts\";\n\nconst machine = cascade({\n  collection:\n    '[{\"value\":\"asia\",\"label\":\"Asia\",\"children\":[{\"value\":\"india\",\"label\":\"India\"},{\"value\":\"japan\",\"label\":\"Japan\"}]},{\"value\":\"europe\",\"label\":\"Europe\",\"children\":[{\"value\":\"france\",\"label\":\"France\"},{\"value\":\"germany\",\"label\":\"Germany\"}]}]',\n});\n<\/script>\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Region</label>\n\n  <div class=\"flex items-center gap-1\" {...machine.getControlProps()}>\n    <button\n      class={[\"bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-field px-3 type-label transition-colors duration-fast ease-decelerate hover:border-strong\", { \"border-strong bg-surface-raised\": machine.open, \"ring-2 ring-border-strong\": machine.focused, \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n      {...machine.getTriggerProps()}\n    >\n      <span class=\"min-w-0 flex-1 truncate text-left\"\n        {...machine.getValueTextProps()}>\n        <span class=\"text-muted\" hidden={machine.value.length > 0}>Select region…</span>\n        <template for={machine.getValueTextRows()} as={row} key={row.value}>\n          <span>{row.value}</span>\n        </template>\n      </span>\n      <span\n        aria-hidden=\"true\"\n        class={[\"shrink-0 text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]}\n        {...machine.getIndicatorProps()}\n      ><span class=\"i-lucide-chevron-down icon-sm\" aria-hidden=\"true\"></span></span>\n    </button>\n    <button\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      hidden={machine.value.length === 0}\n      class=\"ghost icon s-sm flex h-6 w-6 shrink-0 items-center justify-center text-muted hover:bg-surface\"\n      {...machine.getClearTriggerProps()}\n    ><span class=\"i-lucide-x icon-sm\" aria-hidden=\"true\"></span></button>\n  </div>\n\n  <div\n    class={[\"absolute z-dropdown inset-x-0 top-full mt-1 origin-top-left transition duration-fast ease-decelerate\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n    {...machine.getPositionerProps()}\n  >\n    <panel\n      class=\"flex w-max max-w-[calc(100vw-2rem)] gap-1 overflow-x-auto\"\n      {...machine.getContentProps()}\n    >\n      <template for={machine.getLevels()} as={level} key={level.key}>\n        <panel-list\n          class=\"max-h-56 w-40 overflow-y-auto overscroll-contain\"\n          {...machine.getListProps(level)}\n        >\n          <template for={machine.getItems(level)} as={row} key={row.key}>\n            <div\n              class=\"bare flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\"\n              {...machine.getItemProps(row)}\n            >\n              <span class=\"min-w-0 flex-1 truncate\"\n                {...machine.getItemTextProps(row)}>{row.label}</span>\n              <span\n                aria-hidden=\"true\"\n                class=\"shrink-0 text-muted\"\n                hidden={!row.hasChildren}\n              ><span class=\"i-lucide-chevron-right type-caption\" aria-hidden=\"true\"></span></span>\n              <span\n                aria-hidden=\"true\"\n                class=\"shrink-0 text-primary\"\n                {...machine.getItemIndicatorProps(row)}\n              ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n            </div>\n          </template>\n        </panel-list>\n      </template>\n    </panel>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

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

@@ -1,6 +1,6 @@
+import { ColorChannel } from "./color.js";
 import { ColorFormat } from "./color-picker.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
-import { ColorChannel } from "@zag-js/color-utils";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface ColorPickerEvents {
   "VALUE.SET": {
     value: string;
@@ -79,5 +79,4 @@ export interface ColorPickerOpenChange {
 }
 export interface ColorPickerFormatChange {
   readonly format: ColorFormat;
-}
-//# sourceMappingURL=color-picker.events.d.ts.map
+}

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

@@ -1,5 +1,5 @@
+/** Color-picker machine: chart only. */
 import { ColorPickerArgs, ColorPickerContext, ColorPickerState } from "./color-picker.state.js";
 import { ColorPickerEvents } from "./color-picker.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function colorPicker(args: ColorPickerArgs | undefined, authored: (name: string) => boolean): Machine<ColorPickerContext, ColorPickerEvents, ColorPickerState>;
-//# sourceMappingURL=color-picker.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function colorPicker(args: ColorPickerArgs | undefined, authored: (name: string) => boolean): Machine<ColorPickerContext, ColorPickerEvents, ColorPickerState>;

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

@@ -1,6 +1,6 @@
 import { initial } from "./color-picker.state.js";
 import { boundAreaValue, boundChannelValue, clearActiveChannel, isOpenControlled, setActiveChannel, setAreaFromPoint, setChannelFromInput, setChannelFromPoint, setFormat, setSliderChannel, setValue, setValueFromSwatch, stepAreaValue, stepChannelValue } from "./color-picker.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/color-picker/color-picker.machine.ts
 /** Color-picker machine: chart only. */
 const config = {

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

@@ -1,8 +1,8 @@
+import { ColorChannel } from "./color.js";
 import { ColorFormat, ColorPickerArgs, ColorPickerContext, ColorPickerState } from "./color-picker.state.js";
 import { ColorPickerEvents } from "./color-picker.events.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
-import { ColorChannel } from "@zag-js/color-utils";
-import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
+import { DragDelta, DragPress } from "@spinjs/components/actions";
 /**
  * Color-picker definition: the DOM contract as data.
  *
@@ -49,7 +49,7 @@ export interface ColorPickerFormatChange {
 type ScopeLike = ViewFor<ColorPickerContext, ColorPickerEvents, ColorPickerState>;
 export declare const def: {
   name: string;
-  machine: (args: ColorPickerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ColorPickerContext, ColorPickerEvents, ColorPickerState>;
+  machine: (args: ColorPickerArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<ColorPickerContext, ColorPickerEvents, ColorPickerState>;
   start: (raw: Record<string, unknown>) => "idle" | "active";
   reconcile: ({ context, parsed, authored, send, state }: {
     readonly context: ColorPickerContext;
@@ -62,24 +62,24 @@ export declare const def: {
   }) => boolean;
   parts: {
     root: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         dir: "ltr" | "rtl";
         "data-disabled": string | undefined;
       };
     };
     label: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         dir: "ltr" | "rtl";
         "data-disabled": string | undefined;
       };
     };
     control: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         "data-disabled": string | undefined;
       };
     };
     trigger: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         "data-state": string;
         "data-disabled": string | undefined;
         onClick: () => void;
@@ -90,12 +90,12 @@ export declare const def: {
       };
     };
     positioner: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         "data-state": string;
       };
     };
     content: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         role: string | undefined;
         tabindex: string;
         dir: "ltr" | "rtl";
@@ -109,13 +109,13 @@ export declare const def: {
     };
     valueText: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         dir: "ltr" | "rtl";
         "data-disabled": string | undefined;
       };
     };
     area: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>, arg: unknown) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>, arg: unknown) => {
         role: string;
         "data-disabled": string | undefined;
         "data-channel-x": ColorChannel;
@@ -131,7 +131,7 @@ export declare const def: {
     };
     areaBackground: {
       id: string;
-      attrs: (scope: ScopeLike, arg?: unknown) => {
+      attrs: (scope: ScopeLike) => {
         "data-disabled": string | undefined;
         style: {
           backgroundColor: string;
@@ -227,8 +227,8 @@ export declare const def: {
       attrs: (scope: ScopeLike, arg?: unknown) => {
         type: string;
         dir: "ltr" | "rtl";
-        "data-channel": ColorChannel | "hex";
-        "aria-label": ColorChannel | "hex";
+        "data-channel": "hex" | ColorChannel;
+        "aria-label": "hex" | ColorChannel;
         "data-disabled": string | undefined;
         value: string;
         onFocus: (event: FocusEvent) => void;
@@ -248,7 +248,7 @@ export declare const def: {
     };
     eyeDropperTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         type: string;
         dir: "ltr" | "rtl";
         "aria-label": string;
@@ -259,7 +259,7 @@ export declare const def: {
     };
     formatSelect: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         dir: "ltr" | "rtl";
         "data-disabled": string | undefined;
         value: ColorFormat;
@@ -268,7 +268,7 @@ export declare const def: {
     };
     swatchGroup: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
         id: string;
         role: string;
       };
@@ -397,6 +397,5 @@ export declare const def: {
   };
 };
 export type ColorPickerApi = ApiOf<typeof def>;
-export declare const colorPicker: import("@spinjs/runtime").DefinedComponent<ColorPickerApi, ColorPickerArgs>;
-export {};
-//# sourceMappingURL=color-picker.presentation.d.ts.map
+export declare const colorPicker: import("@spinjs/components/runtime").DefinedComponent<ColorPickerApi, ColorPickerArgs>;
+export {};