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

package/dist/hover-card/examples/basic.html

@@ -6,14 +6,14 @@ const ctl = hoverCard();
 
 <div {...ctl.getRootProps()} class="inline-block">
   <span {...ctl.getTriggerProps()}
-    class="inline-block cursor-pointer rounded-md border border-solid border-border bg-surface-raised px-3 py-1 text-sm text-text transition-colors hover:bg-surface">Hover me</span>
+    class="inline-block cursor-pointer rounded-md border bg-surface-raised px-3 py-1 type-body transition-colors hover:bg-surface">Hover me</span>
 
   <div {...ctl.getContentProps()}
-    class="fixed m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg max-w-[20rem]">
-    <div class="stack-sm">
-      <strong class="text-sm text-text">Hover Card</strong>
+    class="fixed m-0 rounded-lg border bg-surface-raised p-4 shadow-lg max-w-[20rem]">
+    <div class="flex flex-col gap-2">
+      <strong>Hover Card</strong>
       <p
-        class="text-sm text-text-muted">This is a basic hover card that appears when you hover over the trigger element.</p>
+        class="text-muted">This is a basic hover card that appears when you hover over the trigger element.</p>
     </div>
   </div>
 </div>

package/dist/hover-card/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/hover-card/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { hoverCard } from \"../hover-card.controller-def.ts\";\n\nconst ctl = hoverCard();\n<\/script>\n\n<div {...ctl.getRootProps()} class=\"inline-block\">\n  <span {...ctl.getTriggerProps()}\n    class=\"inline-block cursor-pointer rounded-md border bg-surface-raised px-3 py-1 type-body transition-colors hover:bg-surface\">Hover me</span>\n\n  <div {...ctl.getContentProps()}\n    class=\"fixed m-0 rounded-lg border bg-surface-raised p-4 shadow-lg max-w-[20rem]\">\n    <div class=\"flex flex-col gap-2\">\n      <strong>Hover Card</strong>\n      <p\n        class=\"text-muted\">This is a basic hover card that appears when you hover over the trigger element.</p>\n    </div>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/hover-card/examples/controlled.html

@@ -4,28 +4,27 @@ import { hoverCard } from "../hover-card.controller-def.js";
 const ctl = hoverCard();
 </script>
 
-<div class="w-full stack-lg p-6">
-  <div class="stack-sm">
-    <strong class="text-sm text-text">External Controls</strong>
+<div class="w-full flex flex-col gap-8 p-6">
+  <div class="flex flex-col gap-2">
+    <strong>External Controls</strong>
     <div class="flex gap-2">
       <button id="hc-show" class="s-sm">Show Hover Card</button>
       <button id="hc-hide" class="s-sm">Hide Hover Card</button>
     </div>
     <p
-      class="text-sm text-text-muted">Current state: <span class="font-medium" id="hc-state">Closed</span></p>
+      class="text-muted">Current state: <span class="type-label" id="hc-state">Closed</span></p>
   </div>
   <div class="flex items-center justify-center py-12"
     {...ctl.getRootProps()}>
     <span {...ctl.getTriggerProps()}
-      class="cursor-pointer rounded-lg border border-solid border-border bg-surface-raised px-4 py-2 text-sm text-text transition-colors hover:bg-surface">Controlled Hover Card</span>
+      class="cursor-pointer rounded-lg border bg-surface-raised px-4 py-2 type-body transition-colors hover:bg-surface">Controlled Hover Card</span>
 
     <div {...ctl.getContentProps()}
-      class="fixed m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg max-w-[20rem]">
-      <div class="stack-sm">
-        <strong
-          class="text-sm text-text">Controlled Hover Card</strong>
+      class="fixed m-0 rounded-lg border bg-surface-raised p-4 shadow-lg max-w-[20rem]">
+      <div class="flex flex-col gap-2">
+        <strong>Controlled Hover Card</strong>
         <p
-          class="text-sm text-text-muted">This hover card's open state is controlled externally via the buttons above.</p>
+          class="text-muted">This hover card's open state is controlled externally via the buttons above.</p>
       </div>
     </div>
   </div>

package/dist/hover-card/examples/controlled.html.js

@@ -0,0 +1,5 @@
+// src/hover-card/examples/controlled.html
+var controlled_default = "<script lang=\"ts\">\nimport { hoverCard } from \"../hover-card.controller-def.ts\";\n\nconst ctl = hoverCard();\n<\/script>\n\n<div class=\"w-full flex flex-col gap-8 p-6\">\n  <div class=\"flex flex-col gap-2\">\n    <strong>External Controls</strong>\n    <div class=\"flex gap-2\">\n      <button id=\"hc-show\" class=\"s-sm\">Show Hover Card</button>\n      <button id=\"hc-hide\" class=\"s-sm\">Hide Hover Card</button>\n    </div>\n    <p\n      class=\"text-muted\">Current state: <span class=\"type-label\" id=\"hc-state\">Closed</span></p>\n  </div>\n  <div class=\"flex items-center justify-center py-12\"\n    {...ctl.getRootProps()}>\n    <span {...ctl.getTriggerProps()}\n      class=\"cursor-pointer rounded-lg border bg-surface-raised px-4 py-2 type-body transition-colors hover:bg-surface\">Controlled Hover Card</span>\n\n    <div {...ctl.getContentProps()}\n      class=\"fixed m-0 rounded-lg border bg-surface-raised p-4 shadow-lg max-w-[20rem]\">\n      <div class=\"flex flex-col gap-2\">\n        <strong>Controlled Hover Card</strong>\n        <p\n          class=\"text-muted\">This hover card's open state is controlled externally via the buttons above.</p>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { controlled_default as default };
+
+//# sourceMappingURL=controlled.html.js.map

package/dist/hover-card/examples/custom-positioning.html

@@ -4,9 +4,9 @@ import { hoverCard } from "../hover-card.controller-def.js";
 const ctl = hoverCard();
 </script>
 
-<div class="w-full stack-lg p-6">
-  <div class="stack-sm">
-    <strong class="text-sm text-text">Select Position</strong>
+<div class="w-full flex flex-col gap-8 p-6">
+  <div class="flex flex-col gap-2">
+    <strong>Select Position</strong>
     <div class="flex flex-wrap gap-2" data-positions>
       <button class="secondary s-sm" data-placement-choice="top">Top</button>
       <button class="secondary s-sm" data-placement-choice="bottom">Bottom</button>
@@ -15,14 +15,14 @@ const ctl = hoverCard();
   <div class="flex items-center justify-center py-12"
     {...ctl.getRootProps()}>
     <span {...ctl.getTriggerProps()}
-      class="cursor-pointer rounded-lg bg-primary px-4 py-2 text-sm font-medium text-on-primary">Hover for bottom positioning</span>
+      class="cursor-pointer rounded-lg bg-primary px-4 py-2 type-body text-on-primary">Hover for bottom positioning</span>
 
     <div {...ctl.getContentProps()}
-      class="fixed m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg max-w-[20rem]">
-      <div class="stack-sm">
-        <strong class="text-sm text-text">Custom Positioning</strong>
+      class="fixed m-0 rounded-lg border bg-surface-raised p-4 shadow-lg max-w-[20rem]">
+      <div class="flex flex-col gap-2">
+        <strong>Custom Positioning</strong>
         <p
-          class="text-sm text-text-muted">The card prefers the bottom side and flips when the viewport vetoes it.</p>
+          class="text-muted">The card prefers the bottom side and flips when the viewport vetoes it.</p>
       </div>
     </div>
   </div>

package/dist/hover-card/examples/custom-positioning.html.js

@@ -0,0 +1,5 @@
+// src/hover-card/examples/custom-positioning.html
+var custom_positioning_default = "<script lang=\"ts\">\nimport { hoverCard } from \"../hover-card.controller-def.ts\";\n\nconst ctl = hoverCard();\n<\/script>\n\n<div class=\"w-full flex flex-col gap-8 p-6\">\n  <div class=\"flex flex-col gap-2\">\n    <strong>Select Position</strong>\n    <div class=\"flex flex-wrap gap-2\" data-positions>\n      <button class=\"secondary s-sm\" data-placement-choice=\"top\">Top</button>\n      <button class=\"secondary s-sm\" data-placement-choice=\"bottom\">Bottom</button>\n    </div>\n  </div>\n  <div class=\"flex items-center justify-center py-12\"\n    {...ctl.getRootProps()}>\n    <span {...ctl.getTriggerProps()}\n      class=\"cursor-pointer rounded-lg bg-primary px-4 py-2 type-body text-on-primary\">Hover for bottom positioning</span>\n\n    <div {...ctl.getContentProps()}\n      class=\"fixed m-0 rounded-lg border bg-surface-raised p-4 shadow-lg max-w-[20rem]\">\n      <div class=\"flex flex-col gap-2\">\n        <strong>Custom Positioning</strong>\n        <p\n          class=\"text-muted\">The card prefers the bottom side and flips when the viewport vetoes it.</p>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { custom_positioning_default as default };
+
+//# sourceMappingURL=custom-positioning.html.js.map

package/dist/hover-card/examples/link.html

@@ -4,7 +4,7 @@ import { hoverCard } from "../hover-card.controller-def.js";
 const ctl = hoverCard();
 </script>
 
-<div class="mx-auto max-w-md stack p-6">
+<div class="mx-auto max-w-md flex flex-col gap-4 p-6">
   <p
-    class="text-sm text-text-muted">Check out this amazing article about <span {...ctl.getRootProps()} class="inline"><span {...ctl.getTriggerProps()} class="cursor-pointer text-primary underline">building modern web applications</span><span {...ctl.getContentProps()} class="fixed m-0 max-w-[24rem] w-full overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg max-w-[24rem]"><span class="block h-[8rem] w-full bg-surface-sunken" aria-hidden="true"></span><span class="block stack-sm p-4"><span class="block stack-sm"><span class="block text-lg font-semibold text-text">Building Modern Web Applications with React and TypeScript</span><span class="block text-sm text-text-muted">Learn how to create scalable and maintainable web applications using the latest tools and best practices.</span></span><span class="flex items-center justify-between text-xs text-text-muted"><span>Dec 15, 2023</span><span>12.4k views</span></span></span></span></span>.</p>
+    class="text-muted">Check out this amazing article about <span {...ctl.getRootProps()} class="inline"><span {...ctl.getTriggerProps()} class="cursor-pointer text-primary underline">building modern web applications</span><span {...ctl.getContentProps()} class="fixed m-0 max-w-[24rem] w-full overflow-hidden rounded-lg border bg-surface-raised shadow-lg max-w-[24rem]"><span class="block h-[8rem] w-full bg-surface-sunken" aria-hidden="true"></span><span class="block flex flex-col gap-2 p-4"><span class="block flex flex-col gap-2"><span class="block type-lead">Building Modern Web Applications with React and TypeScript</span><span class="block type-body text-muted">Learn how to create scalable and maintainable web applications using the latest tools and best practices.</span></span><span class="flex items-center justify-between type-caption text-muted"><span>Dec 15, 2023</span><span>12.4k views</span></span></span></span></span>.</p>
 </div>

package/dist/hover-card/examples/link.html.js

@@ -0,0 +1,5 @@
+// src/hover-card/examples/link.html
+var link_default = "<script lang=\"ts\">\nimport { hoverCard } from \"../hover-card.controller-def.ts\";\n\nconst ctl = hoverCard();\n<\/script>\n\n<div class=\"mx-auto max-w-md flex flex-col gap-4 p-6\">\n  <p\n    class=\"text-muted\">Check out this amazing article about <span {...ctl.getRootProps()} class=\"inline\"><span {...ctl.getTriggerProps()} class=\"cursor-pointer text-primary underline\">building modern web applications</span><span {...ctl.getContentProps()} class=\"fixed m-0 max-w-[24rem] w-full overflow-hidden rounded-lg border bg-surface-raised shadow-lg max-w-[24rem]\"><span class=\"block h-[8rem] w-full bg-surface-sunken\" aria-hidden=\"true\"></span><span class=\"block flex flex-col gap-2 p-4\"><span class=\"block flex flex-col gap-2\"><span class=\"block type-lead\">Building Modern Web Applications with React and TypeScript</span><span class=\"block type-body text-muted\">Learn how to create scalable and maintainable web applications using the latest tools and best practices.</span></span><span class=\"flex items-center justify-between type-caption text-muted\"><span>Dec 15, 2023</span><span>12.4k views</span></span></span></span></span>.</p>\n</div>\n";
+export { link_default as default };
+
+//# sourceMappingURL=link.html.js.map

package/dist/hover-card/examples/product.html

@@ -6,26 +6,26 @@ const ctl = hoverCard();
 
 <div class="flex items-center gap-4 p-6" {...ctl.getRootProps()}>
   <span {...ctl.getTriggerProps()}
-    class="block h-[8rem] w-[8rem] cursor-pointer overflow-hidden rounded-lg border border-solid border-border bg-surface-sunken">
+    class="block h-[8rem] w-[8rem] cursor-pointer overflow-hidden rounded-lg border bg-surface-sunken">
     <span
       class="grid h-full w-full place-items-center transition-transform hover:scale-105"
-      aria-hidden="true"><span class="i-lucide-headphones icon-lg text-text"></span></span>
+      aria-hidden="true"><span class="i-lucide-headphones icon-lg"></span></span>
   </span>
 
   <div {...ctl.getContentProps()}
-    class="fixed m-0 max-w-[20rem] w-full overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg max-w-[20rem]">
+    class="fixed m-0 max-w-[20rem] w-full overflow-hidden rounded-lg border bg-surface-raised shadow-lg max-w-[20rem]">
     <div class="grid aspect-square w-full place-items-center bg-surface-sunken">
-      <span class="i-lucide-headphones text-3xl text-text"
+      <span class="i-lucide-headphones icon-lg"
         aria-hidden="true"></span>
     </div>
-    <div class="stack p-4">
-      <div class="stack-sm">
+    <div class="flex flex-col gap-4 p-4">
+      <div class="flex flex-col gap-2">
         <h3>Premium Wireless Headphones</h3>
-        <p class="text-sm text-text-muted">High-quality wireless headphones with active noise cancellation and 30-hour battery life.</p>
+        <p class="text-muted">High-quality wireless headphones with active noise cancellation and 30-hour battery life.</p>
       </div>
       <div class="flex items-center justify-between">
-        <p class="text-lg font-semibold text-text">$299</p>
-        <p class="text-sm text-text-muted">★★★★☆ (4.8)</p>
+        <p>$299</p>
+        <p class="text-muted">★★★★☆ (4.8)</p>
       </div>
       <button class="w-full s-sm">Add to Cart</button>
     </div>

package/dist/hover-card/examples/product.html.js

@@ -0,0 +1,5 @@
+// src/hover-card/examples/product.html
+var product_default = "<script lang=\"ts\">\nimport { hoverCard } from \"../hover-card.controller-def.ts\";\n\nconst ctl = hoverCard();\n<\/script>\n\n<div class=\"flex items-center gap-4 p-6\" {...ctl.getRootProps()}>\n  <span {...ctl.getTriggerProps()}\n    class=\"block h-[8rem] w-[8rem] cursor-pointer overflow-hidden rounded-lg border bg-surface-sunken\">\n    <span\n      class=\"grid h-full w-full place-items-center transition-transform hover:scale-105\"\n      aria-hidden=\"true\"><span class=\"i-lucide-headphones icon-lg\"></span></span>\n  </span>\n\n  <div {...ctl.getContentProps()}\n    class=\"fixed m-0 max-w-[20rem] w-full overflow-hidden rounded-lg border bg-surface-raised shadow-lg max-w-[20rem]\">\n    <div class=\"grid aspect-square w-full place-items-center bg-surface-sunken\">\n      <span class=\"i-lucide-headphones icon-lg\"\n        aria-hidden=\"true\"></span>\n    </div>\n    <div class=\"flex flex-col gap-4 p-4\">\n      <div class=\"flex flex-col gap-2\">\n        <h3>Premium Wireless Headphones</h3>\n        <p class=\"text-muted\">High-quality wireless headphones with active noise cancellation and 30-hour battery life.</p>\n      </div>\n      <div class=\"flex items-center justify-between\">\n        <p>$299</p>\n        <p class=\"text-muted\">★★★★☆ (4.8)</p>\n      </div>\n      <button class=\"w-full s-sm\">Add to Cart</button>\n    </div>\n  </div>\n</div>\n";
+export { product_default as default };
+
+//# sourceMappingURL=product.html.js.map

package/dist/hover-card/examples/user.html

@@ -6,32 +6,32 @@ const ctl = hoverCard();
 
 <div {...ctl.getRootProps()} class="inline-block">
   <span {...ctl.getTriggerProps()}
-    class="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-solid border-border bg-surface-raised px-3 py-2 text-sm text-text transition-colors hover:bg-surface">
+    class="inline-flex cursor-pointer items-center gap-2 rounded-lg border bg-surface-raised px-3 py-2 type-body transition-colors hover:bg-surface">
     <span
-      class="grid h-6 w-6 place-items-center rounded-full bg-primary text-xs font-semibold text-on-primary"
+      class="grid h-6 w-6 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary"
       aria-hidden="true">JD</span>
-    <span class="text-sm font-medium">@johndoe</span>
+    <span class="type-label">@johndoe</span>
   </span>
 
   <div {...ctl.getContentProps()}
-    class="fixed m-0 max-w-[20rem] w-full rounded-lg border border-solid border-border bg-surface-raised p-6 shadow-lg max-w-[20rem]">
-    <div class="stack">
+    class="fixed m-0 max-w-[20rem] w-full rounded-lg border bg-surface-raised p-6 shadow-lg max-w-[20rem]">
+    <div class="flex flex-col gap-4">
       <div class="flex items-start gap-3">
         <span
-          class="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-primary text-lg font-semibold text-on-primary"
+          class="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-primary type-lead text-on-primary"
           aria-hidden="true">JD</span>
         <div class="min-w-0 flex-1">
           <h3>John Doe</h3>
-          <p class="text-sm text-text-muted">@johndoe</p>
+          <p class="text-muted">@johndoe</p>
         </div>
         <button class="s-sm">Follow</button>
       </div>
-      <p class="text-sm text-text-muted">Frontend developer passionate about creating beautiful and accessible user interfaces.</p>
-      <div class="flex items-center gap-4 text-sm">
+      <p class="text-muted">Frontend developer passionate about creating beautiful and accessible user interfaces.</p>
+      <div class="flex items-center gap-4">
         <p
-          class="text-text-muted"><span class="font-medium text-text">2.1k</span> followers</p>
+          class="text-muted"><span class="type-caption-emphasized">2.1k</span> followers</p>
         <p
-          class="text-text-muted"><span class="font-medium text-text">180</span> following</p>
+          class="text-muted"><span class="type-caption-emphasized">180</span> following</p>
       </div>
     </div>
   </div>

package/dist/hover-card/examples/user.html.js

@@ -0,0 +1,5 @@
+// src/hover-card/examples/user.html
+var user_default = "<script lang=\"ts\">\nimport { hoverCard } from \"../hover-card.controller-def.ts\";\n\nconst ctl = hoverCard();\n<\/script>\n\n<div {...ctl.getRootProps()} class=\"inline-block\">\n  <span {...ctl.getTriggerProps()}\n    class=\"inline-flex cursor-pointer items-center gap-2 rounded-lg border bg-surface-raised px-3 py-2 type-body transition-colors hover:bg-surface\">\n    <span\n      class=\"grid h-6 w-6 place-items-center rounded-full bg-primary type-caption-emphasized text-on-primary\"\n      aria-hidden=\"true\">JD</span>\n    <span class=\"type-label\">@johndoe</span>\n  </span>\n\n  <div {...ctl.getContentProps()}\n    class=\"fixed m-0 max-w-[20rem] w-full rounded-lg border bg-surface-raised p-6 shadow-lg max-w-[20rem]\">\n    <div class=\"flex flex-col gap-4\">\n      <div class=\"flex items-start gap-3\">\n        <span\n          class=\"grid h-12 w-12 shrink-0 place-items-center rounded-full bg-primary type-lead text-on-primary\"\n          aria-hidden=\"true\">JD</span>\n        <div class=\"min-w-0 flex-1\">\n          <h3>John Doe</h3>\n          <p class=\"text-muted\">@johndoe</p>\n        </div>\n        <button class=\"s-sm\">Follow</button>\n      </div>\n      <p class=\"text-muted\">Frontend developer passionate about creating beautiful and accessible user interfaces.</p>\n      <div class=\"flex items-center gap-4\">\n        <p\n          class=\"text-muted\"><span class=\"type-caption-emphasized\">2.1k</span> followers</p>\n        <p\n          class=\"text-muted\"><span class=\"type-caption-emphasized\">180</span> following</p>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { user_default as default };
+
+//# sourceMappingURL=user.html.js.map

package/dist/hover-card/examples/with-arrow.html

@@ -7,23 +7,23 @@ const ctl = hoverCard();
 <div class="flex items-center justify-center gap-8 p-12"
   {...ctl.getRootProps()}>
   <span {...ctl.getTriggerProps()}
-    class="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-solid border-border bg-surface-raised px-3 py-2 text-sm text-text transition-colors hover:bg-surface">
-    <span class="i-lucide-info text-sm text-primary" aria-hidden="true"></span>
-    <span class="text-sm font-medium">Information</span>
+    class="inline-flex cursor-pointer items-center gap-2 rounded-lg border bg-surface-raised px-3 py-2 type-body transition-colors hover:bg-surface">
+    <span class="i-lucide-info icon-sm text-primary" aria-hidden="true"></span>
+    <span class="type-label">Information</span>
   </span>
 
   <div {...ctl.getContentProps()}
-    class="fixed m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg max-w-[20rem]">
+    class="fixed m-0 rounded-lg border bg-surface-raised p-4 shadow-lg max-w-[20rem]">
     <span aria-hidden="true"
-      class="absolute -top-1 left-6 h-2 w-2 rotate-45 border-b-0 border-r-0 border-l border-t border-solid border-border bg-surface-raised"></span>
-    <div class="stack-sm">
+      class="absolute -top-1 left-6 h-2 w-2 rotate-45 border-b-0 border-r-0 border-l border-t bg-surface-raised"></span>
+    <div class="flex flex-col gap-2">
       <div class="flex items-center gap-2">
-        <span class="i-lucide-info text-sm text-primary"
+        <span class="i-lucide-info icon-sm text-primary"
           aria-hidden="true"></span>
-        <strong class="text-sm text-text">Information</strong>
+        <strong>Information</strong>
       </div>
       <p
-        class="text-sm text-text-muted">This is an informational message with an arrow pointing to the trigger element.</p>
+        class="text-muted">This is an informational message with an arrow pointing to the trigger element.</p>
     </div>
   </div>
 </div>

package/dist/hover-card/examples/with-arrow.html.js

@@ -0,0 +1,5 @@
+// src/hover-card/examples/with-arrow.html
+var with_arrow_default = "<script lang=\"ts\">\nimport { hoverCard } from \"../hover-card.controller-def.ts\";\n\nconst ctl = hoverCard();\n<\/script>\n\n<div class=\"flex items-center justify-center gap-8 p-12\"\n  {...ctl.getRootProps()}>\n  <span {...ctl.getTriggerProps()}\n    class=\"inline-flex cursor-pointer items-center gap-2 rounded-lg border bg-surface-raised px-3 py-2 type-body transition-colors hover:bg-surface\">\n    <span class=\"i-lucide-info icon-sm text-primary\" aria-hidden=\"true\"></span>\n    <span class=\"type-label\">Information</span>\n  </span>\n\n  <div {...ctl.getContentProps()}\n    class=\"fixed m-0 rounded-lg border bg-surface-raised p-4 shadow-lg max-w-[20rem]\">\n    <span aria-hidden=\"true\"\n      class=\"absolute -top-1 left-6 h-2 w-2 rotate-45 border-b-0 border-r-0 border-l border-t bg-surface-raised\"></span>\n    <div class=\"flex flex-col gap-2\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"i-lucide-info icon-sm text-primary\"\n          aria-hidden=\"true\"></span>\n        <strong>Information</strong>\n      </div>\n      <p\n        class=\"text-muted\">This is an informational message with an arrow pointing to the trigger element.</p>\n    </div>\n  </div>\n</div>\n";
+export { with_arrow_default as default };
+
+//# sourceMappingURL=with-arrow.html.js.map

package/dist/hover-card/hover-card.controller-def.d.ts

@@ -1,4 +1,3 @@
-import { ControllerDef } from "@spinjs/runtime";
 /**
  * Hover-card on the platform: the browser owns open/closed, the top layer,
  * light-dismiss, and Escape. There is no machine here — `attach` wires the
@@ -44,7 +43,6 @@ export interface HoverCardApi {
   setPlacement(next: "top" | "bottom" | "left" | "right"): void;
 }
 export declare function attachHoverCard(el: Element): HoverCardApi;
-export declare const hoverCard: ControllerDef & {
+export declare const hoverCard: import("@spinjs/components/runtime").ControllerDef & {
   attach(el: Element): HoverCardApi;
-} & (() => HoverCardApi);
-//# sourceMappingURL=hover-card.controller-def.d.ts.map
+} & (() => HoverCardApi);

package/dist/hover-card/hover-card.controller-def.js

@@ -1,4 +1,4 @@
-import { defineController, signal } from "@spinjs/runtime";
+import { defineController, signal } from "@spinjs/components/runtime";
 // src/hover-card/hover-card.controller-def.ts
 /** Authorship surface for recipe-check's reader rule (controllers do
 * not run defineComponent, so there is no synthesized manifest). */

package/dist/image-cropper/crop-geometry.d.ts

@@ -129,5 +129,4 @@ export declare var clampPoint: (point: {
 }) => {
   x: number;
   y: number;
-};
-//# sourceMappingURL=crop-geometry.d.ts.map
+};

package/dist/image-cropper/crop-geometry.js

@@ -1,5 +1,5 @@
 // src/image-cropper/crop-geometry.ts
-var { min, max, abs, round } = Math;
+var { min, max, abs } = Math;
 /** A value held between two bounds, NaN folded to the low. */
 var clampValue = (v, vmin, vmax) => min(max(Number.isNaN(v) ? vmin : v, vmin), vmax);
 var isLeftHandle = (v) => v === "w" || v === "nw" || v === "sw";

package/dist/image-cropper/examples/basic.html

@@ -5,15 +5,15 @@ const machine = imageCropper({});
 </script>
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class="relative h-60 w-full touch-none overflow-hidden rounded-lg border border-solid border-border bg-surface-sunken select-none transition-colors duration-fast ease-decelerate"
+    class="relative h-60 w-full touch-none overflow-hidden rounded-lg border bg-surface-sunken select-none transition-colors duration-fast ease-decelerate"
     {...machine.getViewportProps()}
   >
     <div
-      class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-raised text-text-muted"
+      class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-raised text-muted"
       {...machine.getImageProps()}
     >
       <span class="i-lucide-image icon-lg text-primary" aria-hidden="true"></span>
-      <span class="text-xs">Drag to reposition the 16:9 selection</span>
+      <span class="type-caption">Drag to reposition the 16:9 selection</span>
     </div>
     <div
       class="absolute rounded-sm border-2 border-solid border-primary duration-fast ease-decelerate"

package/dist/image-cropper/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/image-cropper/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { imageCropper } from \"../image-cropper.presentation.ts\";\n\nconst machine = imageCropper({});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class=\"relative h-60 w-full touch-none overflow-hidden rounded-lg border bg-surface-sunken select-none transition-colors duration-fast ease-decelerate\"\n    {...machine.getViewportProps()}\n  >\n    <div\n      class=\"absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-raised text-muted\"\n      {...machine.getImageProps()}\n    >\n      <span class=\"i-lucide-image icon-lg text-primary\" aria-hidden=\"true\"></span>\n      <span class=\"type-caption\">Drag to reposition the 16:9 selection</span>\n    </div>\n    <div\n      class=\"absolute rounded-sm border-2 border-solid border-primary duration-fast ease-decelerate\"\n      {...machine.getSelectionProps()}\n    >\n      <div class=\"pointer-events-none absolute inset-0\"\n        {...machine.getGridProps({ axis: \"horizontal\" })}>\n        <div\n          class=\"absolute inset-x-0 top-1/3 border-t border-on-primary\"></div>\n        <div\n          class=\"absolute inset-x-0 top-2/3 border-t border-on-primary\"></div>\n      </div>\n      <div class=\"pointer-events-none absolute inset-0\"\n        {...machine.getGridProps({ axis: \"vertical\" })}>\n        <div\n          class=\"absolute inset-y-0 left-1/3 border-l border-on-primary\"></div>\n        <div\n          class=\"absolute inset-y-0 left-2/3 border-l border-on-primary\"></div>\n      </div>\n      <template for={machine.handles} as={row} key={row}>\n        <div\n          class=\"absolute h-3 w-3 rounded-sm border border-solid border-on-primary bg-primary\"\n          {...machine.getHandleProps({ position: row })}\n        ></div>\n      </template>\n    </div>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/image-cropper/examples/circle.html

@@ -5,15 +5,15 @@ const machine = imageCropper({ cropShape: "circle" });
 </script>
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class="relative h-60 w-full touch-none overflow-hidden rounded-lg border border-solid border-border bg-surface-sunken select-none transition-colors duration-fast ease-decelerate"
+    class="relative h-60 w-full touch-none overflow-hidden rounded-lg border bg-surface-sunken select-none transition-colors duration-fast ease-decelerate"
     {...machine.getViewportProps()}
   >
     <div
-      class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-raised text-text-muted"
+      class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-raised text-muted"
       {...machine.getImageProps()}
     >
       <span class="i-lucide-image icon-lg text-primary" aria-hidden="true"></span>
-      <span class="text-xs">Drag to reposition the circular selection</span>
+      <span class="type-caption">Drag to reposition the circular selection</span>
     </div>
     <div
       class="absolute rounded-full border-2 border-solid border-primary duration-fast ease-decelerate"

package/dist/image-cropper/examples/circle.html.js

@@ -0,0 +1,5 @@
+// src/image-cropper/examples/circle.html
+var circle_default = "<script lang=\"ts\">\nimport { imageCropper } from \"../image-cropper.presentation.ts\";\n\nconst machine = imageCropper({ cropShape: \"circle\" });\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class=\"relative h-60 w-full touch-none overflow-hidden rounded-lg border bg-surface-sunken select-none transition-colors duration-fast ease-decelerate\"\n    {...machine.getViewportProps()}\n  >\n    <div\n      class=\"absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-raised text-muted\"\n      {...machine.getImageProps()}\n    >\n      <span class=\"i-lucide-image icon-lg text-primary\" aria-hidden=\"true\"></span>\n      <span class=\"type-caption\">Drag to reposition the circular selection</span>\n    </div>\n    <div\n      class=\"absolute rounded-full border-2 border-solid border-primary duration-fast ease-decelerate\"\n      {...machine.getSelectionProps()}\n    >\n      <div class=\"pointer-events-none absolute inset-0\"\n        {...machine.getGridProps({ axis: \"horizontal\" })}>\n        <div\n          class=\"absolute inset-x-0 top-1/3 border-t border-on-primary\"></div>\n        <div\n          class=\"absolute inset-x-0 top-2/3 border-t border-on-primary\"></div>\n      </div>\n      <div class=\"pointer-events-none absolute inset-0\"\n        {...machine.getGridProps({ axis: \"vertical\" })}>\n        <div\n          class=\"absolute inset-y-0 left-1/3 border-l border-on-primary\"></div>\n        <div\n          class=\"absolute inset-y-0 left-2/3 border-l border-on-primary\"></div>\n      </div>\n      <template for={machine.handles} as={row} key={row}>\n        <div\n          class=\"absolute h-3 w-3 rounded-full border border-solid border-on-primary bg-primary\"\n          {...machine.getHandleProps({ position: row })}\n        ></div>\n      </template>\n    </div>\n  </div>\n</div>\n";
+export { circle_default as default };
+
+//# sourceMappingURL=circle.html.js.map

package/dist/image-cropper/image-cropper.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface ImageCropperEvents {
   "SET_NATURAL_SIZE": {
     size: {
@@ -104,5 +104,4 @@ export type ImageCropperRotationChange = {
 export type ImageCropperFlipChange = {
   readonly horizontal: boolean;
   readonly vertical: boolean;
-};
-//# sourceMappingURL=image-cropper.events.d.ts.map
+};

package/dist/image-cropper/image-cropper.machine.d.ts

@@ -1,5 +1,4 @@
-import { ImageCropperEvents } from "./image-cropper.events.js";
 import { ImageCropperArgs, ImageCropperContext, ImageCropperState } from "./image-cropper.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function imageCropper(args?: ImageCropperArgs, authored?: (name: string) => boolean): Machine<ImageCropperContext, ImageCropperEvents, ImageCropperState>;
-//# sourceMappingURL=image-cropper.machine.d.ts.map
+import { ImageCropperEvents } from "./image-cropper.events.js";
+import { Machine } from "@spinjs/components/fsm";
+export declare function imageCropper(args?: ImageCropperArgs, authored?: (name: string) => boolean): Machine<ImageCropperContext, ImageCropperEvents, ImageCropperState>;

package/dist/image-cropper/image-cropper.machine.js

@@ -1,7 +1,7 @@
-import { centerRect, computeDefaultCropDimensions, computeMoveCrop, computeResizeCrop, isVisibleRect } from "./crop-geometry.js";
 import { defaultCropPatch, flipOf, initial, limitsOf, ratioOf, rotationOf, zoomOf } from "./image-cropper.state.js";
 import { clearOffsetStart, clearPointerStart, hasViewport, setPointerStart } from "./image-cropper.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { centerRect, computeDefaultCropDimensions, computeMoveCrop, computeResizeCrop, isVisibleRect } from "./crop-geometry.js";
+import { createMachine } from "@spinjs/components/fsm";
 // src/image-cropper/image-cropper.machine.ts
 function imageCropper(args = {}, authored = () => false) {
 	return createMachine({

package/dist/image-cropper/image-cropper.presentation.d.ts

@@ -1,7 +1,7 @@
-import { ImageCropperEvents } from "./image-cropper.events.js";
 import { CropHandle, CropRect, ImageCropperArgs, ImageCropperContext, ImageCropperState } from "./image-cropper.state.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
-import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+import { ImageCropperEvents } from "./image-cropper.events.js";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
+import { DragDelta, DragPress } from "@spinjs/components/actions";
 /**
  * Image-cropper definition: the DOM contract as data. The machine owns the
  * three phases, the crop rect, the zoom/rotation/flip and the gesture
@@ -42,7 +42,7 @@ export interface ImageCropperFlipChange {
 type ScopeLike = ViewFor<ImageCropperContext, ImageCropperEvents, ImageCropperState>;
 export declare const def: {
   name: string;
-  machine: (args: ImageCropperArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ImageCropperContext, ImageCropperEvents, ImageCropperState>;
+  machine: (args: ImageCropperArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<ImageCropperContext, ImageCropperEvents, ImageCropperState>;
   start: "idle";
   parts: {
     root: {
@@ -56,7 +56,7 @@ export declare const def: {
       };
     };
     viewport: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ImageCropperContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ImageCropperEvents>, ImageCropperState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, ImageCropperContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<ImageCropperEvents>, ImageCropperState>) => {
         role: string;
         "data-measured": string | undefined;
         "use:resize-observer": {
@@ -290,6 +290,5 @@ export declare const def: {
   };
 };
 export type ImageCropperApi = ApiOf<typeof def>;
-export declare const imageCropper: import("@spinjs/runtime").DefinedComponent<ImageCropperApi, ImageCropperArgs>;
-export {};
-//# sourceMappingURL=image-cropper.presentation.d.ts.map
+export declare const imageCropper: import("@spinjs/components/runtime").DefinedComponent<ImageCropperApi, ImageCropperArgs>;
+export {};

package/dist/image-cropper/image-cropper.presentation.js

@@ -1,6 +1,6 @@
-import { isGesturing, roundedCrop } from "./image-cropper.state.js";
 import { imageCropper as imageCropper$1 } from "./image-cropper.machine.js";
-import { ariaBusy, ariaDescription, ariaHidden, ariaRoleDescription, dataAttr, defineComponent, isComposing, isRecord, sliderThumb } from "@spinjs/runtime";
+import { isGesturing, roundedCrop } from "./image-cropper.state.js";
+import { ariaBusy, ariaDescription, ariaHidden, ariaRoleDescription, dataAttr, defineComponent, isComposing, isRecord, sliderThumb } from "@spinjs/components/runtime";
 // src/image-cropper/image-cropper.presentation.ts
 /** A numeric prop: numbers pass, numeric strings parse, everything else
 * absent. Named once; transport owns the grammar. */

package/dist/image-cropper/image-cropper.state.d.ts

@@ -90,5 +90,4 @@ export declare function limitsOf(ctx: ImageCropperContext, viewportRect: {
 };
 export declare const ratioOf: (ctx: ImageCropperContext) => number | null;
 export declare const defaultCropPatch: (ctx: ImageCropperContext, viewportRect: CropRect) => Partial<ImageCropperContext>;
-export { asCount, clampPoint, getMaxBounds, rotationOf, zoomOf };
-//# sourceMappingURL=image-cropper.state.d.ts.map
+export { asCount, clampPoint, getMaxBounds, rotationOf, zoomOf };

package/dist/image-cropper/image-cropper.state.js

@@ -1,5 +1,5 @@
 import { centerRect, clampPoint, computeDefaultCropDimensions, computeResizeCrop, getMaxBounds, isVisibleRect, resolveCropAspectRatio } from "./crop-geometry.js";
-import { defaultTwin, isRecord } from "@spinjs/runtime";
+import { defaultTwin, isRecord } from "@spinjs/components/runtime";
 // src/image-cropper/image-cropper.state.ts
 const asCount = (raw) => {
 	if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;

package/dist/image-cropper/image-cropper.transitions.d.ts

@@ -1,6 +1,6 @@
-import { ImageCropperEvents } from "./image-cropper.events.js";
 import { ImageCropperContext } from "./image-cropper.state.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { ImageCropperEvents } from "./image-cropper.events.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type ICtx = ImageCropperContext;
 type IEv = ImageCropperEvents;
 export type ImageCropperAssign<K extends keyof IEv = keyof IEv> = AssignFor<ICtx, ImageCropperEvents, K>;
@@ -9,5 +9,4 @@ export declare const setPointerStart: ImageCropperAssign<"POINTER_DOWN" | "PAN_P
 export declare const clearPointerStart: () => Partial<ICtx>;
 export declare const clearOffsetStart: () => Partial<ICtx>;
 export declare const hasViewport: ImageCropperGuard;
-export type { ImageCropperContext, ImageCropperEvents };
-//# sourceMappingURL=image-cropper.transitions.d.ts.map
+export type { ImageCropperContext, ImageCropperEvents };

package/dist/index.d.ts

@@ -1,27 +1,42 @@
-import { angleSlider } from "./angle-slider/angle-slider.presentation.js";
+/**
+ * The component library's root export.
+ *
+ * Elements register through `elements.ts` (one import defines them all).
+ * Machine-defs are the per-element seam files, exported here as the catalog:
+ * each def is a component's public machine contract, and it is small — a
+ * bridge factory, the commands, and the event map.
+ *
+ * The catalog is deliberately short: a machine earns its place only when the
+ * component has distinct MODES with different legal events. Widgets whose
+ * entire behavior is one mode of derived values — scroll geometry, image
+ * load status, a continuous slider value, a page index — are signals and
+ * actions, not machines, and the preset's primitives already own the
+ * form-control widgets.
+ */
 import { asyncList } from "./async-list/async-list.presentation.js";
-import { avatar } from "./avatar/avatar.presentation.js";
-import { colorPicker } from "./color-picker/color-picker.presentation.js";
-import { combobox } from "./combobox/combobox.presentation.js";
-import { dateInput } from "./date-input/date-input.presentation.js";
-import { datePicker } from "./date-picker/date-picker.presentation.js";
-import { editable } from "./editable/editable.presentation.js";
-import { fileUpload } from "./file-upload/file-upload.presentation.js";
-import { floatingPanel } from "./floating-panel/floating-panel.presentation.js";
-import { hoverCard, hoverCardManifest } from "./hover-card/hover-card.controller-def.js";
-import { imageCropper } from "./image-cropper/image-cropper.presentation.js";
 import { modePicker } from "./mode-picker/mode-picker.presentation.js";
 import { themePicker } from "./theme-picker/theme-picker.presentation.js";
+import { combobox } from "./combobox/combobox.presentation.js";
 import { listbox } from "./listbox/listbox.presentation.js";
+import { colorPicker } from "./color-picker/color-picker.presentation.js";
+import { imageCropper } from "./image-cropper/image-cropper.presentation.js";
 import { signaturePad } from "./signature-pad/signature-pad.presentation.js";
 import { ratingGroup } from "./rating-group/rating-group.presentation.js";
 import { slider } from "./slider/slider.presentation.js";
 import { splitter } from "./splitter/splitter.presentation.js";
 import { steps } from "./steps/steps.presentation.js";
 import { pagination } from "./pagination/pagination.presentation.js";
+import { angleSlider } from "./angle-slider/angle-slider.presentation.js";
 import { toggleGroup } from "./toggle-group/toggle-group.presentation.js";
+import { avatar } from "./avatar/avatar.presentation.js";
+import { dateInput } from "./date-input/date-input.presentation.js";
+import { datePicker } from "./date-picker/date-picker.presentation.js";
+import { editable } from "./editable/editable.presentation.js";
 import { tour } from "./tour/tour.presentation.js";
 import { navigationMenu } from "./navigation-menu/navigation-menu.presentation.js";
+import { fileUpload } from "./file-upload/file-upload.presentation.js";
+import { floatingPanel } from "./floating-panel/floating-panel.presentation.js";
+import { hoverCard, hoverCardManifest } from "./hover-card/hover-card.controller-def.js";
 import { menu } from "./menu/menu.presentation.js";
 import { numberInput } from "./number-input/number-input.presentation.js";
 import { pinInput } from "./pin-input/pin-input.presentation.js";
@@ -31,6 +46,7 @@ import { tags } from "./tags-input/tags.presentation.js";
 import { timer } from "./timer/timer.presentation.js";
 import { tabs } from "./tabs/tabs.presentation.js";
 import { toast } from "./toast/toast.presentation.js";
+import { toc } from "./toc/toc.presentation.js";
 import { tooltip, tooltipManifest } from "./tooltip/tooltip.controller-def.js";
 import { treeView } from "./tree-view/tree-view.presentation.js";
 /** A purpose group for the machine rail: the shape every gallery reuses. */
@@ -62,5 +78,4 @@ export declare const COMPONENT_ICONS: Readonly<Record<string, string>>;
  * rail runs a statechart and needs the runtime.
  */
 export declare const CONTROLLERS: readonly string[];
-export { type PopoverApi, angleSlider, asyncList, attachPopover, avatar, colorPicker, combobox, dateInput, datePicker, editable, fileUpload, floatingPanel, hoverCard, hoverCardManifest, imageCropper, listbox, menu, modePicker, navigationMenu, numberInput, pagination, pinInput, popover, popoverManifest, ratingGroup, select, signaturePad, slider, splitter, steps, tabs, tags, themePicker, timer, toast, toggleGroup, tooltip, tooltipManifest, tour, treeView };
-//# sourceMappingURL=index.d.ts.map
+export { type PopoverApi, angleSlider, asyncList, attachPopover, avatar, colorPicker, combobox, dateInput, datePicker, editable, fileUpload, floatingPanel, hoverCard, hoverCardManifest, imageCropper, listbox, menu, modePicker, navigationMenu, numberInput, pagination, pinInput, popover, popoverManifest, ratingGroup, select, signaturePad, slider, splitter, steps, tabs, tags, themePicker, timer, toast, toc, toggleGroup, tooltip, tooltipManifest, tour, treeView };