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

package/dist/pin-input/pin-input.presentation.js

@@ -1,6 +1,6 @@
-import { pinView } from "./pin-input.state.js";
 import { pinInput as pinInput$1 } from "./pin-input.machine.js";
-import { ariaHidden, ariaInvalid, defineComponent } from "@spinjs/runtime";
+import { pinView } from "./pin-input.state.js";
+import { ariaHidden, ariaInvalid, defineComponent } from "@spinjs/components/runtime";
 // src/pin-input/pin-input.presentation.ts
 const defaultTranslations = { inputLabel: (index, length) => `pin code ${index + 1} of ${length}` };
 const isInputLabel = (value) => typeof value === "function";

package/dist/pin-input/pin-input.state.d.ts

@@ -63,5 +63,4 @@ export interface PinValueView {
   readonly asString: string;
 }
 export declare function pinView(value: readonly string[], count: number): PinValueView;
-export declare function getNextValue(current: string, next: string): string;
-//# sourceMappingURL=pin-input.state.d.ts.map
+export declare function getNextValue(current: string, next: string): string;

package/dist/pin-input/pin-input.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/pin-input/pin-input.state.ts
 const DEFAULT_COUNT = 4;
 const parseChars = (raw) => {

package/dist/pin-input/pin-input.transitions.d.ts

@@ -6,5 +6,4 @@ export declare const setFocusedIndex: (ctx: PinInputContext, event: {
 export declare const setFocusIndexToFirst: () => Partial<PinInputContext>;
 export declare const advanceFocusedIndex: (ctx: PinInputContext) => Partial<PinInputContext>;
 export declare const setPrevFocusedIndex: (ctx: PinInputContext) => Partial<PinInputContext>;
-export declare const hasValue: (ctx: PinInputContext) => boolean;
-//# sourceMappingURL=pin-input.transitions.d.ts.map
+export declare const hasValue: (ctx: PinInputContext) => boolean;

package/dist/popover/examples/basic.html

@@ -5,11 +5,11 @@ const ctl = popover();
 </script>
 
 <button {...ctl.getTriggerProps()}
-  class="secondary s-sm transition-colors hover:bg-surface">Open popover</button>
+  class="secondary s-sm">Open popover</button>
 
 <popover {...ctl.getContentProps()}
-  class="m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right">
-  <p class="text-sm font-medium text-text">Share this page</p>
+  class="m-0 rounded-lg border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right">
+  <p>Share this page</p>
   <p
-    class="text-sm text-text-muted">Copy the link below to send it to a friend.</p>
+    class="text-muted">Copy the link below to send it to a friend.</p>
 </popover>

package/dist/popover/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/popover/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { popover } from \"../popover.controller-def.ts\";\n\nconst ctl = popover();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"secondary s-sm\">Open popover</button>\n\n<popover {...ctl.getContentProps()}\n  class=\"m-0 rounded-lg border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right\">\n  <p>Share this page</p>\n  <p\n    class=\"text-muted\">Copy the link below to send it to a friend.</p>\n</popover>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/popover/examples/feedback.html

@@ -5,13 +5,13 @@ const ctl = popover();
 </script>
 
 <button {...ctl.getTriggerProps()}
-  class="inline-flex items-center gap-2 secondary s-sm transition-colors hover:bg-surface">
-  <span class="i-lucide-message-square text-sm" aria-hidden="true"></span>
+  class="inline-flex items-center gap-2 secondary s-sm">
+  <span class="i-lucide-message-square icon-sm" aria-hidden="true"></span>
   Feedback
 </button>
 
 <popover {...ctl.getContentProps()}
-  class="m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
-  <p class="text-sm font-medium text-text">Send us feedback</p>
-  <p class="text-sm text-text-muted">Tell us what you think.</p>
+  class="m-0 rounded-lg border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
+  <p>Send us feedback</p>
+  <p class="text-muted">Tell us what you think.</p>
 </popover>

package/dist/popover/examples/feedback.html.js

@@ -0,0 +1,5 @@
+// src/popover/examples/feedback.html
+var feedback_default = "<script lang=\"ts\">\nimport { popover } from \"../popover.controller-def.ts\";\n\nconst ctl = popover();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"inline-flex items-center gap-2 secondary s-sm\">\n  <span class=\"i-lucide-message-square icon-sm\" aria-hidden=\"true\"></span>\n  Feedback\n</button>\n\n<popover {...ctl.getContentProps()}\n  class=\"m-0 rounded-lg border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]\">\n  <p>Send us feedback</p>\n  <p class=\"text-muted\">Tell us what you think.</p>\n</popover>\n";
+export { feedback_default as default };
+
+//# sourceMappingURL=feedback.html.js.map

package/dist/popover/examples/notifications.html

@@ -5,15 +5,15 @@ const ctl = popover();
 </script>
 
 <button {...ctl.getTriggerProps()}
-  class="inline-flex items-center gap-2 secondary s-sm transition-colors hover:bg-surface">
-  <span class="i-lucide-bell text-sm" aria-hidden="true"></span>
+  class="inline-flex items-center gap-2 secondary s-sm">
+  <span class="i-lucide-bell icon-sm" aria-hidden="true"></span>
   Notifications
 </button>
 
 <popover {...ctl.getContentProps()}
-  class="m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
-  <p class="text-sm font-medium text-text">Notifications</p>
-  <ul class="flow-list stack-xs text-sm text-text-muted">
+  class="m-0 rounded-lg border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
+  <p>Notifications</p>
+  <ul class="flow-list flex flex-col gap-1 text-muted">
     <li>Maya liked your post</li>
     <li>David started following you</li>
     <li>Lisa invited you to a workspace</li>

package/dist/popover/examples/notifications.html.js

@@ -0,0 +1,5 @@
+// src/popover/examples/notifications.html
+var notifications_default = "<script lang=\"ts\">\nimport { popover } from \"../popover.controller-def.ts\";\n\nconst ctl = popover();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"inline-flex items-center gap-2 secondary s-sm\">\n  <span class=\"i-lucide-bell icon-sm\" aria-hidden=\"true\"></span>\n  Notifications\n</button>\n\n<popover {...ctl.getContentProps()}\n  class=\"m-0 rounded-lg border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]\">\n  <p>Notifications</p>\n  <ul class=\"flow-list flex flex-col gap-1 text-muted\">\n    <li>Maya liked your post</li>\n    <li>David started following you</li>\n    <li>Lisa invited you to a workspace</li>\n  </ul>\n</popover>\n";
+export { notifications_default as default };
+
+//# sourceMappingURL=notifications.html.js.map

package/dist/popover/examples/settings.html

@@ -6,33 +6,33 @@ const ctl = popover();
 
 <button {...ctl.getTriggerProps()}
   class="inline-flex items-center justify-center ghost icon s-sm transition-colors hover:bg-surface">
-  <span class="i-lucide-settings text-sm" aria-hidden="true"></span>
+  <span class="i-lucide-settings icon-sm" aria-hidden="true"></span>
   <span class="sr-only">Settings</span>
 </button>
 
 <popover {...ctl.getContentProps()}
-  class="m-0 rounded-lg border border-solid border-border bg-surface-raised shadow-lg position-area-bottom-span-right w-64 max-w-[16rem]">
-  <div class="border-b border-solid border-border p-3">
-    <p class="font-medium text-sm text-text">Settings</p>
+  class="m-0 rounded-lg border bg-surface-raised shadow-lg position-area-bottom-span-right w-64 max-w-[16rem]">
+  <div class="border-b p-3">
+    <p>Settings</p>
   </div>
-  <div class="stack-xs p-2">
+  <div class="flex flex-col gap-1 p-2">
     <label
       class="flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface">
       <span
-        class="flex items-center gap-2 text-sm text-text"><span class="i-lucide-moon text-sm text-text-muted" aria-hidden="true"></span>Dark Mode</span>
+        class="flex items-center gap-2 type-body"><span class="i-lucide-moon icon-sm text-muted" aria-hidden="true"></span>Dark Mode</span>
       <input type="checkbox" role="switch" data-setting="dark" />
     </label>
     <label
       class="flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface">
       <span
-        class="flex items-center gap-2 text-sm text-text"><span class="i-lucide-bell text-sm text-text-muted" aria-hidden="true"></span>Notifications</span>
+        class="flex items-center gap-2 type-body"><span class="i-lucide-bell icon-sm text-muted" aria-hidden="true"></span>Notifications</span>
       <input type="checkbox" role="switch" checked
         data-setting="notifications" />
     </label>
     <label
       class="flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface">
       <span
-        class="flex items-center gap-2 text-sm text-text"><span class="i-lucide-shield text-sm text-text-muted" aria-hidden="true"></span>Two-Factor Auth</span>
+        class="flex items-center gap-2 type-body"><span class="i-lucide-shield icon-sm text-muted" aria-hidden="true"></span>Two-Factor Auth</span>
       <input type="checkbox" role="switch" checked data-setting="twofactor" />
     </label>
   </div>

package/dist/popover/examples/settings.html.js

@@ -0,0 +1,5 @@
+// src/popover/examples/settings.html
+var settings_default = "<script lang=\"ts\">\nimport { popover } from \"../popover.controller-def.ts\";\n\nconst ctl = popover();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"inline-flex items-center justify-center ghost icon s-sm transition-colors hover:bg-surface\">\n  <span class=\"i-lucide-settings icon-sm\" aria-hidden=\"true\"></span>\n  <span class=\"sr-only\">Settings</span>\n</button>\n\n<popover {...ctl.getContentProps()}\n  class=\"m-0 rounded-lg border bg-surface-raised shadow-lg position-area-bottom-span-right w-64 max-w-[16rem]\">\n  <div class=\"border-b p-3\">\n    <p>Settings</p>\n  </div>\n  <div class=\"flex flex-col gap-1 p-2\">\n    <label\n      class=\"flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface\">\n      <span\n        class=\"flex items-center gap-2 type-body\"><span class=\"i-lucide-moon icon-sm text-muted\" aria-hidden=\"true\"></span>Dark Mode</span>\n      <input type=\"checkbox\" role=\"switch\" data-setting=\"dark\" />\n    </label>\n    <label\n      class=\"flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface\">\n      <span\n        class=\"flex items-center gap-2 type-body\"><span class=\"i-lucide-bell icon-sm text-muted\" aria-hidden=\"true\"></span>Notifications</span>\n      <input type=\"checkbox\" role=\"switch\" checked\n        data-setting=\"notifications\" />\n    </label>\n    <label\n      class=\"flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface\">\n      <span\n        class=\"flex items-center gap-2 type-body\"><span class=\"i-lucide-shield icon-sm text-muted\" aria-hidden=\"true\"></span>Two-Factor Auth</span>\n      <input type=\"checkbox\" role=\"switch\" checked data-setting=\"twofactor\" />\n    </label>\n  </div>\n</popover>\n";
+export { settings_default as default };
+
+//# sourceMappingURL=settings.html.js.map

package/dist/popover/examples/share.html

@@ -5,14 +5,14 @@ const ctl = popover();
 </script>
 
 <button {...ctl.getTriggerProps()}
-  class="inline-flex items-center gap-2 secondary s-sm transition-colors hover:bg-surface">
-  <span class="i-lucide-share text-sm" aria-hidden="true"></span>
+  class="inline-flex items-center gap-2 secondary s-sm">
+  <span class="i-lucide-share icon-sm" aria-hidden="true"></span>
   Share
 </button>
 
 <popover {...ctl.getContentProps()}
-  class="m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
-  <p class="text-sm font-medium text-text">Share this page</p>
+  class="m-0 rounded-lg border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
+  <p>Share this page</p>
   <p
-    class="text-sm text-text-muted">Copy the link below to send it to a friend.</p>
+    class="text-muted">Copy the link below to send it to a friend.</p>
 </popover>

package/dist/popover/examples/share.html.js

@@ -0,0 +1,5 @@
+// src/popover/examples/share.html
+var share_default = "<script lang=\"ts\">\nimport { popover } from \"../popover.controller-def.ts\";\n\nconst ctl = popover();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"inline-flex items-center gap-2 secondary s-sm\">\n  <span class=\"i-lucide-share icon-sm\" aria-hidden=\"true\"></span>\n  Share\n</button>\n\n<popover {...ctl.getContentProps()}\n  class=\"m-0 rounded-lg border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]\">\n  <p>Share this page</p>\n  <p\n    class=\"text-muted\">Copy the link below to send it to a friend.</p>\n</popover>\n";
+export { share_default as default };
+
+//# sourceMappingURL=share.html.js.map

package/dist/popover/examples/user.html

@@ -8,7 +8,7 @@ const ctl = popover();
   aria-label="Sarah Chen's profile"
   class="bare relative inline-flex items-center justify-center rounded-full transition-colors hover:bg-surface">
   <span
-    class="grid h-8 w-8 place-items-center rounded-full bg-primary text-xs font-semibold text-on-primary"
+    class="grid h-8 w-8 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary"
     aria-hidden="true">SC</span>
   <span
     class="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-solid border-surface-raised bg-semantic-success"
@@ -16,25 +16,25 @@ const ctl = popover();
 </button>
 
 <popover {...ctl.getContentProps()}
-  class="m-0 rounded-lg border border-solid border-border bg-surface-raised shadow-lg position-area-bottom-span-right w-full max-w-[18rem]">
-  <div class="border-b border-solid border-border p-3">
+  class="m-0 rounded-lg border bg-surface-raised shadow-lg position-area-bottom-span-right w-full max-w-[18rem]">
+  <div class="border-b p-3">
     <div class="flex items-center gap-3">
       <span
-        class="relative grid h-10 w-10 shrink-0 place-items-center rounded-full bg-primary text-sm font-semibold text-on-primary"
+        class="relative grid h-10 w-10 shrink-0 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary"
         aria-hidden="true">SC<span class="absolute -bottom-1 -right-1 h-3 w-3 rounded-full border-2 border-solid border-surface-raised bg-semantic-success"></span></span>
       <div class="min-w-0 flex-1">
-        <strong class="text-sm text-text">Sarah Chen</strong>
-        <p class="text-xs text-text-muted">Product Designer</p>
+        <strong>Sarah Chen</strong>
+        <p class="text-muted">Product Designer</p>
       </div>
     </div>
   </div>
-  <div class="stack-sm p-3 text-sm text-text-muted">
+  <div class="flex flex-col gap-2 p-3 type-body text-muted">
     <p
-      class="flex items-center gap-2"><span class="i-lucide-mail text-sm" aria-hidden="true"></span>sarah.chen@example.com</p>
+      class="flex items-center gap-2"><span class="i-lucide-mail icon-sm" aria-hidden="true"></span>sarah.chen@example.com</p>
     <p
-      class="flex items-center gap-2"><span class="i-lucide-map-pin text-sm" aria-hidden="true"></span>San Francisco, CA</p>
+      class="flex items-center gap-2"><span class="i-lucide-map-pin icon-sm" aria-hidden="true"></span>San Francisco, CA</p>
   </div>
-  <div class="flex gap-2 border-t border-solid border-border p-3">
+  <div class="flex gap-2 border-t p-3">
     <button
       class="flex-1 s-sm">Message</button>
     <button

package/dist/popover/examples/user.html.js

@@ -0,0 +1,5 @@
+// src/popover/examples/user.html
+var user_default = "<script lang=\"ts\">\nimport { popover } from \"../popover.controller-def.ts\";\n\nconst ctl = popover();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  aria-label=\"Sarah Chen's profile\"\n  class=\"bare relative inline-flex items-center justify-center rounded-full transition-colors hover:bg-surface\">\n  <span\n    class=\"grid h-8 w-8 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary\"\n    aria-hidden=\"true\">SC</span>\n  <span\n    class=\"absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-solid border-surface-raised bg-semantic-success\"\n    aria-hidden=\"true\"></span>\n</button>\n\n<popover {...ctl.getContentProps()}\n  class=\"m-0 rounded-lg border bg-surface-raised shadow-lg position-area-bottom-span-right w-full max-w-[18rem]\">\n  <div class=\"border-b p-3\">\n    <div class=\"flex items-center gap-3\">\n      <span\n        class=\"relative grid h-10 w-10 shrink-0 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary\"\n        aria-hidden=\"true\">SC<span class=\"absolute -bottom-1 -right-1 h-3 w-3 rounded-full border-2 border-solid border-surface-raised bg-semantic-success\"></span></span>\n      <div class=\"min-w-0 flex-1\">\n        <strong>Sarah Chen</strong>\n        <p class=\"text-muted\">Product Designer</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-2 p-3 type-body text-muted\">\n    <p\n      class=\"flex items-center gap-2\"><span class=\"i-lucide-mail icon-sm\" aria-hidden=\"true\"></span>sarah.chen@example.com</p>\n    <p\n      class=\"flex items-center gap-2\"><span class=\"i-lucide-map-pin icon-sm\" aria-hidden=\"true\"></span>San Francisco, CA</p>\n  </div>\n  <div class=\"flex gap-2 border-t p-3\">\n    <button\n      class=\"flex-1 s-sm\">Message</button>\n    <button\n      class=\"flex-1 secondary s-sm\">View Profile</button>\n  </div>\n</popover>\n";
+export { user_default as default };
+
+//# sourceMappingURL=user.html.js.map

package/dist/popover/popover.controller-def.d.ts

@@ -1,4 +1,3 @@
-import { ControllerDef } from "@spinjs/runtime";
 /**
  * Popover on the platform: the browser owns open/closed, the top layer,
  * light-dismiss, and Escape. There is no machine here — the `attach`
@@ -33,7 +32,6 @@ export interface PopoverApi {
   getContentProps(): Record<string, unknown>;
 }
 export declare function attachPopover(el: Element): PopoverApi;
-export declare const popover: ControllerDef & {
+export declare const popover: import("@spinjs/components/runtime").ControllerDef & {
   attach(el: Element): PopoverApi;
-} & (() => PopoverApi);
-//# sourceMappingURL=popover.controller-def.d.ts.map
+} & (() => PopoverApi);

package/dist/popover/popover.controller-def.js

@@ -1,4 +1,4 @@
-import { defineController } from "@spinjs/runtime";
+import { defineController } from "@spinjs/components/runtime";
 // src/popover/popover.controller-def.ts
 const popoverManifest = {
 	parts: [],

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

@@ -5,15 +5,15 @@ const machine = ratingGroup({ value: "3.5", allowHalf: true });
 </script>
 
 <div class="mx-auto w-full max-w-[20rem] text-center" {...machine.getRootProps()}>
-  <div class="mb-1 text-lg font-semibold text-text" {...machine.getLabelProps()}>Product Rating</div>
-  <div class="mb-4 text-sm text-text-muted">How would you rate this product?</div>
+  <div class="mb-1 type-lead" {...machine.getLabelProps()}>Product Rating</div>
+  <div class="mb-4 type-body text-muted">How would you rate this product?</div>
   <div
     class="inline-flex items-center gap-1"
     {...machine.getControlProps()}
   >
     <template for={machine.getItems()} as={row} key={row}>
       <span
-        class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-2xl text-border-strong transition-all", { "scale-110 text-semantic-warning": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled, "cursor-default": machine.readOnly }]}
+        class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-border-strong transition-all", { "scale-110 text-semantic-warning": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled, "cursor-default": machine.readOnly }]}
         {...machine.getItemProps(row)}
       >
         <span class="relative"
@@ -24,16 +24,16 @@ const machine = ratingGroup({ value: "3.5", allowHalf: true });
   <input {...machine.getHiddenInputProps()} />
   <div class="pt-2" show={machine.value > 0}>
     <div
-      class="text-sm font-medium text-text">You rated this {machine.value} star<span show={machine.value !== 1}>s</span></div>
-    <div class="text-xs text-text-muted"
+      class="type-label">You rated this {machine.value} star<span show={machine.value !== 1}>s</span></div>
+    <div class="type-caption text-muted"
       show={machine.value - machine.value % 1 === 1}>Poor</div>
-    <div class="text-xs text-text-muted"
+    <div class="type-caption text-muted"
       show={machine.value - machine.value % 1 === 2}>Fair</div>
-    <div class="text-xs text-text-muted"
+    <div class="type-caption text-muted"
       show={machine.value - machine.value % 1 === 3}>Good</div>
-    <div class="text-xs text-text-muted"
+    <div class="type-caption text-muted"
       show={machine.value - machine.value % 1 === 4}>Very Good</div>
-    <div class="text-xs text-text-muted"
+    <div class="type-caption text-muted"
       show={machine.value - machine.value % 1 === 5}>Excellent</div>
   </div>
 </div>

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

@@ -0,0 +1,5 @@
+// src/rating-group/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { ratingGroup } from \"../rating-group.presentation.ts\";\n\nconst machine = ratingGroup({ value: \"3.5\", allowHalf: true });\n<\/script>\n\n<div class=\"mx-auto w-full max-w-[20rem] text-center\" {...machine.getRootProps()}>\n  <div class=\"mb-1 type-lead\" {...machine.getLabelProps()}>Product Rating</div>\n  <div class=\"mb-4 type-body text-muted\">How would you rate this product?</div>\n  <div\n    class=\"inline-flex items-center gap-1\"\n    {...machine.getControlProps()}\n  >\n    <template for={machine.getItems()} as={row} key={row}>\n      <span\n        class={[\"bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-border-strong transition-all\", { \"scale-110 text-semantic-warning\": machine.getItemState(row).highlighted, \"cursor-not-allowed opacity-50\": machine.disabled, \"cursor-default\": machine.readOnly }]}\n        {...machine.getItemProps(row)}\n      >\n        <span class=\"relative\"\n          aria-hidden=\"true\">★︎<span class=\"absolute inset-y-0 right-0 w-1/2 overflow-hidden\" show={machine.getItemState(row).half}><span class=\"absolute top-0 right-0 text-border-strong\">★︎</span></span></span>\n      </span>\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n  <div class=\"pt-2\" show={machine.value > 0}>\n    <div\n      class=\"type-label\">You rated this {machine.value} star<span show={machine.value !== 1}>s</span></div>\n    <div class=\"type-caption text-muted\"\n      show={machine.value - machine.value % 1 === 1}>Poor</div>\n    <div class=\"type-caption text-muted\"\n      show={machine.value - machine.value % 1 === 2}>Fair</div>\n    <div class=\"type-caption text-muted\"\n      show={machine.value - machine.value % 1 === 3}>Good</div>\n    <div class=\"type-caption text-muted\"\n      show={machine.value - machine.value % 1 === 4}>Very Good</div>\n    <div class=\"type-caption text-muted\"\n      show={machine.value - machine.value % 1 === 5}>Excellent</div>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/rating-group/examples/movie.html

@@ -5,25 +5,25 @@ const machine = ratingGroup({ value: "0", allowHalf: true });
 </script>
 
 <div
-  class="mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface text-text"
+  class="mx-auto w-full max-w-sm rounded-lg border bg-surface"
   {...machine.getRootProps()}>
-  <div class="flex items-center gap-3 border-b border-solid border-border p-4">
+  <div class="flex items-center gap-3 border-b p-4">
     <div
-      class="grid h-14 w-10 place-items-center rounded-md bg-primary text-on-primary text-lg text-on-primary"
+      class="grid h-14 w-10 place-items-center rounded-md bg-primary text-on-primary text-on-primary"
       aria-hidden="true">▶</div>
     <div>
-      <strong class="text-sm text-text">The Great Adventure</strong>
-      <p class="text-xs text-text-muted">Action • Adventure • 2024</p>
+      <strong>The Great Adventure</strong>
+      <p class="text-muted">Action • Adventure • 2024</p>
     </div>
   </div>
-  <div class="stack p-4">
+  <div class="flex flex-col gap-4 p-4">
     <div>
-      <div class="mb-2 block text-xs font-medium"
+      <div class="mb-2 block type-caption-emphasized"
         {...machine.getLabelProps()}>Rate this movie</div>
       <div class="inline-flex" {...machine.getControlProps()}>
         <template for={machine.getItems()} as={row} key={row}>
           <span
-            class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-2xl text-border-strong transition-all", { "scale-110 text-primary": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-border-strong transition-all", { "scale-110 text-primary": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="relative"
@@ -32,14 +32,14 @@ const machine = ratingGroup({ value: "0", allowHalf: true });
         </template>
       </div>
       <input {...machine.getHiddenInputProps()} />
-      <p class="text-xs text-text-muted"
+      <p class="text-muted"
         show={machine.value > 0}>You rated this {machine.value} out of 5 stars</p>
     </div>
     <div class="flex gap-2">
-      <button type="button" variant="filled"
+      <button type="button" variant="primary"
         id="rt-trailer">Watch Trailer</button>
       <button type="button" id="rt-list">Add to List</button>
     </div>
-    <p class="text-xs text-text-muted" id="rt-note"></p>
+    <p class="text-muted" id="rt-note"></p>
   </div>
 </div>

package/dist/rating-group/examples/movie.html.js

@@ -0,0 +1,5 @@
+// src/rating-group/examples/movie.html
+var movie_default = "<script lang=\"ts\">\nimport { ratingGroup } from \"../rating-group.presentation.ts\";\n\nconst machine = ratingGroup({ value: \"0\", allowHalf: true });\n<\/script>\n\n<div\n  class=\"mx-auto w-full max-w-sm rounded-lg border bg-surface\"\n  {...machine.getRootProps()}>\n  <div class=\"flex items-center gap-3 border-b p-4\">\n    <div\n      class=\"grid h-14 w-10 place-items-center rounded-md bg-primary text-on-primary text-on-primary\"\n      aria-hidden=\"true\">▶</div>\n    <div>\n      <strong>The Great Adventure</strong>\n      <p class=\"text-muted\">Action • Adventure • 2024</p>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-4 p-4\">\n    <div>\n      <div class=\"mb-2 block type-caption-emphasized\"\n        {...machine.getLabelProps()}>Rate this movie</div>\n      <div class=\"inline-flex\" {...machine.getControlProps()}>\n        <template for={machine.getItems()} as={row} key={row}>\n          <span\n            class={[\"bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-border-strong transition-all\", { \"scale-110 text-primary\": machine.getItemState(row).highlighted, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"relative\"\n              aria-hidden=\"true\">★︎<span class=\"absolute inset-y-0 right-0 w-1/2 overflow-hidden\" show={machine.getItemState(row).half}><span class=\"absolute top-0 right-0 text-border-strong\">★︎</span></span></span>\n          </span>\n        </template>\n      </div>\n      <input {...machine.getHiddenInputProps()} />\n      <p class=\"text-muted\"\n        show={machine.value > 0}>You rated this {machine.value} out of 5 stars</p>\n    </div>\n    <div class=\"flex gap-2\">\n      <button type=\"button\" variant=\"primary\"\n        id=\"rt-trailer\">Watch Trailer</button>\n      <button type=\"button\" id=\"rt-list\">Add to List</button>\n    </div>\n    <p class=\"text-muted\" id=\"rt-note\"></p>\n  </div>\n</div>\n";
+export { movie_default as default };
+
+//# sourceMappingURL=movie.html.js.map

package/dist/rating-group/examples/product-review.html

@@ -5,21 +5,21 @@ const machine = ratingGroup({ value: "0", allowHalf: true });
 </script>
 
 <div
-  class="mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface text-text"
+  class="mx-auto w-full max-w-sm rounded-lg border bg-surface"
   {...machine.getRootProps()}>
-  <div class="border-b border-solid border-border p-4">
-    <strong class="text-sm text-text">Product Review</strong>
+  <div class="border-b p-4">
+    <strong>Product Review</strong>
     <p
-      class="text-xs text-text-muted">Share your experience with this product</p>
+      class="text-muted">Share your experience with this product</p>
   </div>
-  <div class="stack p-4">
+  <div class="flex flex-col gap-4 p-4">
     <div>
-      <div class="mb-2 block text-xs font-medium"
+      <div class="mb-2 block type-caption-emphasized"
         {...machine.getLabelProps()}>Overall Rating</div>
       <div class="inline-flex" {...machine.getControlProps()}>
         <template for={machine.getItems()} as={row} key={row}>
           <span
-            class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-2xl text-border-strong transition-all", { "scale-110 text-semantic-info": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-border-strong transition-all", { "scale-110 text-semantic-info": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="relative"
@@ -28,7 +28,7 @@ const machine = ratingGroup({ value: "0", allowHalf: true });
         </template>
       </div>
       <input {...machine.getHiddenInputProps()} />
-      <div class="text-xs text-text-muted" show={machine.value > 0}>
+      <div class="type-caption text-muted" show={machine.value > 0}>
         <span show={machine.value - machine.value % 1 === 1}>Poor</span>
         <span show={machine.value - machine.value % 1 === 2}>Fair</span>
         <span show={machine.value - machine.value % 1 === 3}>Good</span>
@@ -37,16 +37,16 @@ const machine = ratingGroup({ value: "0", allowHalf: true });
       </div>
     </div>
     <div>
-      <label class="mb-2 block text-xs font-medium"
+      <label class="mb-2 block"
         for="rv-text">Your Review</label>
       <textarea
-        class="w-full text-xs"
+        class="w-full"
         id="rv-text" rows="3"
         placeholder="Share your thoughts about this product..."></textarea>
     </div>
   </div>
-  <div class="border-t border-solid border-border p-4">
-    <button type="button" variant="filled" id="rv-submit">Submit Review</button>
-    <p class="text-xs text-text-muted" id="rv-note"></p>
+  <div class="border-t p-4">
+    <button type="button" variant="primary" id="rv-submit">Submit Review</button>
+    <p class="text-muted" id="rv-note"></p>
   </div>
 </div>

package/dist/rating-group/examples/product-review.html.js

@@ -0,0 +1,5 @@
+// src/rating-group/examples/product-review.html
+var product_review_default = "<script lang=\"ts\">\nimport { ratingGroup } from \"../rating-group.presentation.ts\";\n\nconst machine = ratingGroup({ value: \"0\", allowHalf: true });\n<\/script>\n\n<div\n  class=\"mx-auto w-full max-w-sm rounded-lg border bg-surface\"\n  {...machine.getRootProps()}>\n  <div class=\"border-b p-4\">\n    <strong>Product Review</strong>\n    <p\n      class=\"text-muted\">Share your experience with this product</p>\n  </div>\n  <div class=\"flex flex-col gap-4 p-4\">\n    <div>\n      <div class=\"mb-2 block type-caption-emphasized\"\n        {...machine.getLabelProps()}>Overall Rating</div>\n      <div class=\"inline-flex\" {...machine.getControlProps()}>\n        <template for={machine.getItems()} as={row} key={row}>\n          <span\n            class={[\"bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-border-strong transition-all\", { \"scale-110 text-semantic-info\": machine.getItemState(row).highlighted, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"relative\"\n              aria-hidden=\"true\">★︎<span class=\"absolute inset-y-0 right-0 w-1/2 overflow-hidden\" show={machine.getItemState(row).half}><span class=\"absolute top-0 right-0 text-border-strong\">★︎</span></span></span>\n          </span>\n        </template>\n      </div>\n      <input {...machine.getHiddenInputProps()} />\n      <div class=\"type-caption text-muted\" show={machine.value > 0}>\n        <span show={machine.value - machine.value % 1 === 1}>Poor</span>\n        <span show={machine.value - machine.value % 1 === 2}>Fair</span>\n        <span show={machine.value - machine.value % 1 === 3}>Good</span>\n        <span show={machine.value - machine.value % 1 === 4}>Very Good</span>\n        <span show={machine.value - machine.value % 1 === 5}>Excellent</span>\n      </div>\n    </div>\n    <div>\n      <label class=\"mb-2 block\"\n        for=\"rv-text\">Your Review</label>\n      <textarea\n        class=\"w-full\"\n        id=\"rv-text\" rows=\"3\"\n        placeholder=\"Share your thoughts about this product...\"></textarea>\n    </div>\n  </div>\n  <div class=\"border-t p-4\">\n    <button type=\"button\" variant=\"primary\" id=\"rv-submit\">Submit Review</button>\n    <p class=\"text-muted\" id=\"rv-note\"></p>\n  </div>\n</div>\n";
+export { product_review_default as default };
+
+//# sourceMappingURL=product-review.html.js.map

package/dist/rating-group/examples/service-evaluation.html

@@ -5,22 +5,22 @@ const machine = ratingGroup({ value: "4", count: 5 });
 </script>
 
 <div
-  class="mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface-raised p-4 text-text shadow-sm"
+  class="mx-auto w-full max-w-sm rounded-lg border bg-surface-raised p-4 shadow-sm"
   {...machine.getRootProps()}>
   <div class="mb-3 flex items-center justify-between">
     <div>
-      <strong class="text-sm text-text"
+      <strong
         {...machine.getLabelProps()}>Support Quality</strong>
       <p
-        class="text-xs text-text-muted">How was your recent support interaction?</p>
+        class="text-muted">How was your recent support interaction?</p>
     </div>
     <span
-      class="rounded-full bg-surface px-3 py-1 font-mono text-xs font-medium text-text">{machine.value} / {machine.count}</span>
+      class="rounded-full bg-surface px-3 py-1 type-code">{machine.value} / {machine.count}</span>
   </div>
   <div class="inline-flex gap-1" {...machine.getControlProps()}>
     <template for={machine.getItems()} as={row} key={row}>
       <span
-        class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-xl text-border-strong transition-all", { "scale-110 text-semantic-info": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
+        class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-border-strong transition-all", { "scale-110 text-semantic-info": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
         {...machine.getItemProps(row)}
       >
         <span class="relative" aria-hidden="true">★︎</span>

package/dist/rating-group/examples/service-evaluation.html.js

@@ -0,0 +1,5 @@
+// src/rating-group/examples/service-evaluation.html
+var service_evaluation_default = "<script lang=\"ts\">\nimport { ratingGroup } from \"../rating-group.presentation.ts\";\n\nconst machine = ratingGroup({ value: \"4\", count: 5 });\n<\/script>\n\n<div\n  class=\"mx-auto w-full max-w-sm rounded-lg border bg-surface-raised p-4 shadow-sm\"\n  {...machine.getRootProps()}>\n  <div class=\"mb-3 flex items-center justify-between\">\n    <div>\n      <strong\n        {...machine.getLabelProps()}>Support Quality</strong>\n      <p\n        class=\"text-muted\">How was your recent support interaction?</p>\n    </div>\n    <span\n      class=\"rounded-full bg-surface px-3 py-1 type-code\">{machine.value} / {machine.count}</span>\n  </div>\n  <div class=\"inline-flex gap-1\" {...machine.getControlProps()}>\n    <template for={machine.getItems()} as={row} key={row}>\n      <span\n        class={[\"bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-border-strong transition-all\", { \"scale-110 text-semantic-info\": machine.getItemState(row).highlighted, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n        {...machine.getItemProps(row)}\n      >\n        <span class=\"relative\" aria-hidden=\"true\">★︎</span>\n      </span>\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { service_evaluation_default as default };
+
+//# sourceMappingURL=service-evaluation.html.js.map

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

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface RatingGroupEvents {
   "SET_VALUE": {
     value: number;
@@ -34,5 +34,4 @@ export type RatingGroupValueChange = {
 };
 export type RatingGroupHoverChange = {
   readonly hoveredValue: number;
-};
-//# sourceMappingURL=rating-group.events.d.ts.map
+};

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

@@ -1,6 +1,5 @@
 import { RatingGroupArgs, RatingGroupContext, RatingGroupState, isHovering, isInteractive, itemState, ratingValue, step } from "./rating-group.state.js";
 import { RatingGroupEvents, RatingGroupHoverChange, RatingGroupValueChange } from "./rating-group.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function ratingGroup(args?: RatingGroupArgs, authored?: (name: string) => boolean): Machine<RatingGroupContext, RatingGroupEvents, RatingGroupState>;
-export { type RatingGroupArgs, type RatingGroupContext, type RatingGroupEvents, type RatingGroupHoverChange, type RatingGroupState, type RatingGroupValueChange, isHovering, isInteractive, itemState, ratingValue, step };
-//# sourceMappingURL=rating-group.machine.d.ts.map
+export { type RatingGroupArgs, type RatingGroupContext, type RatingGroupEvents, type RatingGroupHoverChange, type RatingGroupState, type RatingGroupValueChange, isHovering, isInteractive, itemState, ratingValue, step };

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

@@ -1,6 +1,6 @@
 import { initial, isHovering, isInteractive, itemState, ratingValue, step } from "./rating-group.state.js";
 import { applyCount, applyValue, arrowLeft, arrowRight, clearHoveredValue, clearValue, endValue, homeValue, setHoveredValue, setValue } from "./rating-group.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/rating-group/rating-group.machine.ts
 function ratingGroup(args = {}, authored = () => false) {
 	return createMachine({

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

@@ -1,11 +1,11 @@
 import { RatingGroupArgs, RatingGroupContext, RatingGroupState, RatingItemState } from "./rating-group.state.js";
 import { RatingGroupEvents, RatingGroupHoverChange, RatingGroupValueChange } from "./rating-group.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 type ScopeLike = ViewFor<RatingGroupContext, RatingGroupEvents, RatingGroupState>;
 type SlotLike = SlotViewFor<number, RatingGroupContext, RatingGroupEvents, RatingGroupState>;
 export declare const def: {
   name: string;
-  machine: (args: RatingGroupArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<RatingGroupContext, RatingGroupEvents, RatingGroupState>;
+  machine: (args: RatingGroupArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<RatingGroupContext, RatingGroupEvents, RatingGroupState>;
   start: "idle";
   parts: {
     root: {};
@@ -121,7 +121,7 @@ export declare const def: {
     };
   };
   settled: ({ event, after, focus }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: RatingGroupContext;
       readonly state: RatingGroupState;
@@ -135,10 +135,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 RatingGroupApi = ApiOf<typeof def>;
-export declare const ratingGroup: import("@spinjs/runtime").DefinedComponent<RatingGroupApi, RatingGroupArgs>;
-export type { RatingGroupArgs, RatingGroupHoverChange, RatingGroupState, RatingGroupValueChange };
-//# sourceMappingURL=rating-group.presentation.d.ts.map
+export declare const ratingGroup: import("@spinjs/components/runtime").DefinedComponent<RatingGroupApi, RatingGroupArgs>;
+export type { RatingGroupArgs, RatingGroupHoverChange, RatingGroupState, RatingGroupValueChange };

package/dist/rating-group/rating-group.presentation.js

@@ -1,6 +1,6 @@
-import { isHovering, isInteractive as isInteractive$1, itemState } from "./rating-group.state.js";
 import { ratingGroup as ratingGroup$1 } from "./rating-group.machine.js";
-import { ariaDisabled, ariaLabelledBy, ariaOrientation, ariaReadOnly, ariaRoleDescription, defineComponent, isComposing, optionRow } from "@spinjs/runtime";
+import { isHovering, isInteractive as isInteractive$1, itemState } from "./rating-group.state.js";
+import { ariaDisabled, ariaLabelledBy, ariaOrientation, ariaReadOnly, ariaRoleDescription, defineComponent, isComposing, optionRow } from "@spinjs/components/runtime";
 // src/rating-group/rating-group.presentation.ts
 const itemIndexCache = /* @__PURE__ */ new Map();
 const itemIndexes = (length) => {

package/dist/rating-group/rating-group.state.d.ts

@@ -32,5 +32,4 @@ export declare function isInteractive(ctx: RatingGroupContext): boolean;
 export declare function isHovering(ctx: RatingGroupContext): boolean;
 export declare function itemState(ctx: RatingGroupContext, index: number): RatingItemState;
 export declare function step(ctx: RatingGroupContext): number;
-export declare function initial(args?: RatingGroupArgs, authored?: (name: string) => boolean): RatingGroupContext;
-//# sourceMappingURL=rating-group.state.d.ts.map
+export declare function initial(args?: RatingGroupArgs, authored?: (name: string) => boolean): RatingGroupContext;