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

package/dist/avatar/avatar.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./avatar.state.js";
 import { setSrc } from "./avatar.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/avatar/avatar.machine.ts
 /**
 * Avatar machine: loading/error/loaded over three states.

package/dist/avatar/avatar.presentation.d.ts

@@ -1,11 +1,11 @@
-import { AvatarEvents, AvatarStatus } from "./avatar.events.js";
 import { AvatarArgs, AvatarContext, AvatarState } from "./avatar.state.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { AvatarEvents, AvatarStatus } from "./avatar.events.js";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
 /** Avatar definition: the DOM contract as data. */
 type ScopeLike = ViewFor<AvatarContext, AvatarEvents, AvatarState>;
 export declare const def: {
   name: string;
-  machine: (args: AvatarArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<AvatarContext, AvatarEvents, AvatarState>;
+  machine: (args: AvatarArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<AvatarContext, AvatarEvents, AvatarState>;
   start: "loading";
   parts: {
     root: {};
@@ -70,6 +70,5 @@ export declare const def: {
   };
 };
 export type AvatarApi = ApiOf<typeof def>;
-export declare const avatar: import("@spinjs/runtime").DefinedComponent<AvatarApi, AvatarArgs>;
-export type { AvatarArgs, AvatarState };
-//# sourceMappingURL=avatar.presentation.d.ts.map
+export declare const avatar: import("@spinjs/components/runtime").DefinedComponent<AvatarApi, AvatarArgs>;
+export type { AvatarArgs, AvatarState };

package/dist/avatar/avatar.presentation.js

@@ -1,5 +1,5 @@
 import { avatar as avatar$1 } from "./avatar.machine.js";
-import { defineComponent } from "@spinjs/runtime";
+import { defineComponent } from "@spinjs/components/runtime";
 // src/avatar/avatar.presentation.ts
 const def = {
 	name: "avatar",

package/dist/avatar/avatar.state.d.ts

@@ -24,5 +24,4 @@ export interface AvatarArgs {
  * The seed twin (`defaultSrc`) is the host's write of the src — the
  * framework resolved it into the args — so it counts as a write too.
  */
-export declare function initial(args: AvatarArgs | undefined, authored: (name: string) => boolean): AvatarContext;
-//# sourceMappingURL=avatar.state.d.ts.map
+export declare function initial(args: AvatarArgs | undefined, authored: (name: string) => boolean): AvatarContext;

package/dist/avatar/avatar.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/avatar/avatar.state.ts
 /**
 * The machine's context, built from its arguments: what the args did not

package/dist/avatar/avatar.transitions.d.ts

@@ -1,7 +1,6 @@
 import { AvatarEvents } from "./avatar.events.js";
 import { AvatarContext } from "./avatar.state.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { AssignFor } from "@spinjs/components/fsm";
 type AvatarAssign<K extends keyof AvatarEvents = keyof AvatarEvents> = AssignFor<AvatarContext, AvatarEvents, K>;
 export declare const setSrc: AvatarAssign<"SRC.CHANGE" | "SET_SRC">;
-export {};
-//# sourceMappingURL=avatar.transitions.d.ts.map
+export {};

package/dist/avatar/examples/badge.html

@@ -8,14 +8,14 @@
 
 <div class="flex items-center gap-4">
   <div class="relative">
-    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted" {...face1.getRootProps()}>
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted" {...face1.getRootProps()}>
       <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
       <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
     </span>
     <badge class="absolute -top-1 -right-1 grid h-6 w-6 place-items-center" variant="danger">6</badge>
   </div>
   <div class="relative">
-    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken text-lg font-semibold text-text-muted" {...face2.getRootProps()}>
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted" {...face2.getRootProps()}>
       <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
       <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>AB</span>
     </span>

package/dist/avatar/examples/badge.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/badge.html
+var badge_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const face1 = avatar({ label: \"Jordan Doe\", fallback: \"JD\", src: \"https://i.pravatar.cc/80?img=1\" });\n  const face2 = avatar({ label: \"Alex Blair\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=2\" });\n<\/script>\n\n\n<div class=\"flex items-center gap-4\">\n  <div class=\"relative\">\n    <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted\" {...face1.getRootProps()}>\n      <img show={face1.src !== \"\" && face1.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face1.getImageProps()} />\n      <span show={!face1.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face1.getFallbackProps()}>JD</span>\n    </span>\n    <badge class=\"absolute -top-1 -right-1 grid h-6 w-6 place-items-center\" variant=\"danger\">6</badge>\n  </div>\n  <div class=\"relative\">\n    <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted\" {...face2.getRootProps()}>\n      <img show={face2.src !== \"\" && face2.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face2.getImageProps()} />\n      <span show={!face2.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face2.getFallbackProps()}>AB</span>\n    </span>\n    <badge class=\"absolute -top-1 -right-1 grid h-6 w-6 place-items-center\" variant=\"danger\">6</badge>\n  </div>\n</div>";
+export { badge_default as default };
+
+//# sourceMappingURL=badge.html.js.map

package/dist/avatar/examples/badgeminimal.html

@@ -7,7 +7,7 @@
 
 <div class="mx-auto flex w-full max-w-[20rem] justify-center">
   <div class="relative">
-    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken text-lg font-semibold text-text-muted" {...machine.getRootProps()}>
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted" {...machine.getRootProps()}>
       <img show={machine.src !== "" && machine.status !== "error"} class="h-full w-full object-cover" draggable="false" {...machine.getImageProps()} />
       <span show={!machine.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...machine.getFallbackProps()}>AB</span>
     </span>

package/dist/avatar/examples/badgeminimal.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/badgeminimal.html
+var badgeminimal_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const machine = avatar({ label: \"Avatar\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=1\" });\n<\/script>\n\n\n<div class=\"mx-auto flex w-full max-w-[20rem] justify-center\">\n  <div class=\"relative\">\n    <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted\" {...machine.getRootProps()}>\n      <img show={machine.src !== \"\" && machine.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...machine.getImageProps()} />\n      <span show={!machine.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...machine.getFallbackProps()}>AB</span>\n    </span>\n    <badge class=\"absolute -top-1 -right-1 grid h-6 w-6 place-items-center\" variant=\"danger\">6</badge>\n  </div>\n</div>";
+export { badgeminimal_default as default };
+
+//# sourceMappingURL=badgeminimal.html.js.map

package/dist/avatar/examples/basic.html

@@ -7,7 +7,7 @@
 
 <div class="mx-auto flex w-full max-w-[20rem] justify-center">
 <span
-  class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted"
+  class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted"
   {...machine.getRootProps()}
 >
   <img show={machine.src !== "" && machine.status !== "error"}

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

@@ -0,0 +1,5 @@
+// src/avatar/examples/basic.html
+var basic_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const machine = avatar({ label: \"Paula Aster\", fallback: \"PA\", src: \"https://i.pravatar.cc/80?img=1\" });\n<\/script>\n\n\n<div class=\"mx-auto flex w-full max-w-[20rem] justify-center\">\n<span\n  class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted\"\n  {...machine.getRootProps()}\n>\n  <img show={machine.src !== \"\" && machine.status !== \"error\"}\n    class=\"h-full w-full object-cover\"\n    draggable=\"false\"\n    {...machine.getImageProps()}\n  />\n  <span show={!machine.loaded}\n    aria-hidden=\"true\"\n    class=\"grid h-full w-full place-items-center\"\n    {...machine.getFallbackProps()}\n  >PA</span>\n</span>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/avatar/examples/count.html

@@ -9,21 +9,21 @@
 
 
 <div class="flex">
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face1.getRootProps()}>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face1.getRootProps()}>
     <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
     <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
   </span>
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face2.getRootProps()}>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face2.getRootProps()}>
     <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
     <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>SM</span>
   </span>
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face3.getRootProps()}>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face3.getRootProps()}>
     <img show={face3.src !== "" && face3.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face3.getImageProps()} />
     <span show={!face3.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face3.getFallbackProps()}>AB</span>
   </span>
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face4.getRootProps()}>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face4.getRootProps()}>
     <img show={face4.src !== "" && face4.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face4.getImageProps()} />
     <span show={!face4.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face4.getFallbackProps()}>KL</span>
   </span>
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted border-2 border-solid border-surface">+3</span>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted border-2 border-solid border-surface">+3</span>
 </div>

package/dist/avatar/examples/count.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/count.html
+var count_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const face1 = avatar({ label: \"Jordan Doe\", fallback: \"JD\", src: \"https://i.pravatar.cc/80?img=1\" });\n  const face2 = avatar({ label: \"Sam Morgan\", fallback: \"SM\", src: \"https://i.pravatar.cc/80?img=2\" });\n  const face3 = avatar({ label: \"Alex Blair\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=3\" });\n  const face4 = avatar({ label: \"Kai Lee\", fallback: \"KL\", src: \"https://i.pravatar.cc/80?img=4\" });\n<\/script>\n\n\n<div class=\"flex\">\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face1.getRootProps()}>\n    <img show={face1.src !== \"\" && face1.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face1.getImageProps()} />\n    <span show={!face1.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face1.getFallbackProps()}>JD</span>\n  </span>\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face2.getRootProps()}>\n    <img show={face2.src !== \"\" && face2.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face2.getImageProps()} />\n    <span show={!face2.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face2.getFallbackProps()}>SM</span>\n  </span>\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face3.getRootProps()}>\n    <img show={face3.src !== \"\" && face3.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face3.getImageProps()} />\n    <span show={!face3.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face3.getFallbackProps()}>AB</span>\n  </span>\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face4.getRootProps()}>\n    <img show={face4.src !== \"\" && face4.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face4.getImageProps()} />\n    <span show={!face4.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face4.getFallbackProps()}>KL</span>\n  </span>\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted border-2 border-solid border-surface\">+3</span>\n</div>";
+export { count_default as default };
+
+//# sourceMappingURL=count.html.js.map

package/dist/avatar/examples/fallback.html

@@ -7,7 +7,7 @@
 
 <div class="mx-auto flex w-full max-w-[20rem] justify-center">
 <span
-  class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted"
+  class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted"
   {...machine.getRootProps()}
 >
   <img show={machine.src !== "" && machine.status !== "error"}

package/dist/avatar/examples/fallback.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/fallback.html
+var fallback_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const machine = avatar({ label: \"Quinn Reyes\", fallback: \"QR\" });\n<\/script>\n\n\n<div class=\"mx-auto flex w-full max-w-[20rem] justify-center\">\n<span\n  class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted\"\n  {...machine.getRootProps()}\n>\n  <img show={machine.src !== \"\" && machine.status !== \"error\"}\n    class=\"h-full w-full object-cover\"\n    draggable=\"false\"\n    {...machine.getImageProps()}\n  />\n  <span show={!machine.loaded}\n    aria-hidden=\"true\"\n    class=\"grid h-full w-full place-items-center\"\n    {...machine.getFallbackProps()}\n  >QR</span>\n</span>\n</div>\n";
+export { fallback_default as default };
+
+//# sourceMappingURL=fallback.html.js.map

package/dist/avatar/examples/group.html

@@ -9,19 +9,19 @@
 
 
 <div class="flex">
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face1.getRootProps()}>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face1.getRootProps()}>
     <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
     <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
   </span>
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face2.getRootProps()}>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face2.getRootProps()}>
     <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
     <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>SM</span>
   </span>
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face3.getRootProps()}>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face3.getRootProps()}>
     <img show={face3.src !== "" && face3.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face3.getImageProps()} />
     <span show={!face3.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face3.getFallbackProps()}>AB</span>
   </span>
-  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face4.getRootProps()}>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face4.getRootProps()}>
     <img show={face4.src !== "" && face4.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face4.getImageProps()} />
     <span show={!face4.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face4.getFallbackProps()}>KL</span>
   </span>

package/dist/avatar/examples/group.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/group.html
+var group_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const face1 = avatar({ label: \"Jordan Doe\", fallback: \"JD\", src: \"https://i.pravatar.cc/80?img=1\" });\n  const face2 = avatar({ label: \"Sam Morgan\", fallback: \"SM\", src: \"https://i.pravatar.cc/80?img=2\" });\n  const face3 = avatar({ label: \"Alex Blair\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=3\" });\n  const face4 = avatar({ label: \"Kai Lee\", fallback: \"KL\", src: \"https://i.pravatar.cc/80?img=4\" });\n<\/script>\n\n\n<div class=\"flex\">\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face1.getRootProps()}>\n    <img show={face1.src !== \"\" && face1.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face1.getImageProps()} />\n    <span show={!face1.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face1.getFallbackProps()}>JD</span>\n  </span>\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face2.getRootProps()}>\n    <img show={face2.src !== \"\" && face2.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face2.getImageProps()} />\n    <span show={!face2.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face2.getFallbackProps()}>SM</span>\n  </span>\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face3.getRootProps()}>\n    <img show={face3.src !== \"\" && face3.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face3.getImageProps()} />\n    <span show={!face3.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face3.getFallbackProps()}>AB</span>\n  </span>\n  <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face4.getRootProps()}>\n    <img show={face4.src !== \"\" && face4.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face4.getImageProps()} />\n    <span show={!face4.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face4.getFallbackProps()}>KL</span>\n  </span>\n</div>";
+export { group_default as default };
+
+//# sourceMappingURL=group.html.js.map

package/dist/avatar/examples/icon.html

@@ -6,10 +6,10 @@
 
 
 <div class="mx-auto flex w-full max-w-[20rem] justify-center">
-  <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-text-muted" {...machine.getRootProps()}>
+  <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-muted" {...machine.getRootProps()}>
     <img show={machine.src !== "" && machine.status !== "error"} class="h-full w-full object-cover" draggable="false" {...machine.getImageProps()} />
     <span show={!machine.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...machine.getFallbackProps()}>
-      <span class="i-lucide-user text-lg" aria-hidden="true"></span>
+      <span class="i-lucide-user type-lead" aria-hidden="true"></span>
     </span>
   </span>
 </div>

package/dist/avatar/examples/icon.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/icon.html
+var icon_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const machine = avatar({ label: \"Avatar\", fallback: \" \" });\n<\/script>\n\n\n<div class=\"mx-auto flex w-full max-w-[20rem] justify-center\">\n  <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-muted\" {...machine.getRootProps()}>\n    <img show={machine.src !== \"\" && machine.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...machine.getImageProps()} />\n    <span show={!machine.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...machine.getFallbackProps()}>\n      <span class=\"i-lucide-user type-lead\" aria-hidden=\"true\"></span>\n    </span>\n  </span>\n</div>";
+export { icon_default as default };
+
+//# sourceMappingURL=icon.html.js.map

package/dist/avatar/examples/multiples.html

@@ -11,7 +11,7 @@
 <div class="flex items-center gap-4">
   <div class="flex flex-col items-center gap-2">
     <div class="relative">
-      <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted" {...face1.getRootProps()}>
+      <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted" {...face1.getRootProps()}>
         <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
         <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>U1</span>
       </span>
@@ -20,7 +20,7 @@
   </div>
   <div class="flex flex-col items-center gap-2">
     <div class="relative">
-      <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted" {...face2.getRootProps()}>
+      <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted" {...face2.getRootProps()}>
         <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
         <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>U2</span>
       </span>
@@ -29,7 +29,7 @@
   </div>
   <div class="flex flex-col items-center gap-2">
     <div class="relative">
-      <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted" {...face3.getRootProps()}>
+      <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted" {...face3.getRootProps()}>
         <img show={face3.src !== "" && face3.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face3.getImageProps()} />
         <span show={!face3.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face3.getFallbackProps()}>U3</span>
       </span>
@@ -38,7 +38,7 @@
   </div>
   <div class="flex flex-col items-center gap-2">
     <div class="relative">
-      <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted" {...face4.getRootProps()}>
+      <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted" {...face4.getRootProps()}>
         <img show={face4.src !== "" && face4.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face4.getImageProps()} />
         <span show={!face4.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face4.getFallbackProps()}>U4</span>
       </span>

package/dist/avatar/examples/multiples.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/multiples.html
+var multiples_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const face1 = avatar({ label: \"User One\", fallback: \"U1\", src: \"https://i.pravatar.cc/80?img=1\" });\n  const face2 = avatar({ label: \"User Two\", fallback: \"U2\", src: \"https://i.pravatar.cc/80?img=2\" });\n  const face3 = avatar({ label: \"User Three\", fallback: \"U3\", src: \"https://i.pravatar.cc/80?img=3\" });\n  const face4 = avatar({ label: \"User Four\", fallback: \"U4\", src: \"https://i.pravatar.cc/80?img=4\" });\n<\/script>\n\n\n<div class=\"flex items-center gap-4\">\n  <div class=\"flex flex-col items-center gap-2\">\n    <div class=\"relative\">\n      <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted\" {...face1.getRootProps()}>\n        <img show={face1.src !== \"\" && face1.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face1.getImageProps()} />\n        <span show={!face1.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face1.getFallbackProps()}>U1</span>\n      </span>\n      <span class=\"absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-success\"></span>\n    </div>\n  </div>\n  <div class=\"flex flex-col items-center gap-2\">\n    <div class=\"relative\">\n      <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted\" {...face2.getRootProps()}>\n        <img show={face2.src !== \"\" && face2.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face2.getImageProps()} />\n        <span show={!face2.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face2.getFallbackProps()}>U2</span>\n      </span>\n      <span class=\"absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-warning\"></span>\n    </div>\n  </div>\n  <div class=\"flex flex-col items-center gap-2\">\n    <div class=\"relative\">\n      <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted\" {...face3.getRootProps()}>\n        <img show={face3.src !== \"\" && face3.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face3.getImageProps()} />\n        <span show={!face3.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face3.getFallbackProps()}>U3</span>\n      </span>\n      <span class=\"absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-error\"></span>\n    </div>\n  </div>\n  <div class=\"flex flex-col items-center gap-2\">\n    <div class=\"relative\">\n      <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted\" {...face4.getRootProps()}>\n        <img show={face4.src !== \"\" && face4.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face4.getImageProps()} />\n        <span show={!face4.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face4.getFallbackProps()}>U4</span>\n      </span>\n      <span class=\"absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-surface-sunken\"></span>\n    </div>\n  </div>\n</div>";
+export { multiples_default as default };
+
+//# sourceMappingURL=multiples.html.js.map

package/dist/avatar/examples/pills.html

@@ -13,46 +13,46 @@
 
 
 <div class="flex items-center gap-4">
-  <div class="flex items-center gap-2 rounded-full border-2 border-solid border-border bg-surface px-4 py-2">
+  <div class="flex items-center gap-2 rounded-full border-2 bg-surface px-4 py-2">
     <div class="flex">
-      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face1.getRootProps()}>
+      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face1.getRootProps()}>
         <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
         <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
       </span>
-      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face2.getRootProps()}>
+      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face2.getRootProps()}>
         <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
         <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>SM</span>
       </span>
-      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face3.getRootProps()}>
+      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face3.getRootProps()}>
         <img show={face3.src !== "" && face3.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face3.getImageProps()} />
         <span show={!face3.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face3.getFallbackProps()}>AB</span>
       </span>
-      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face4.getRootProps()}>
+      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face4.getRootProps()}>
         <img show={face4.src !== "" && face4.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face4.getImageProps()} />
         <span show={!face4.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face4.getFallbackProps()}>KL</span>
       </span>
     </div>
-    <span class="text-sm text-text-muted font-medium">+3</span>
+    <span class="type-label text-muted">+3</span>
   </div>
-  <div class="flex items-center gap-2 rounded-full border border-solid border-border bg-surface px-4 py-2">
+  <div class="flex items-center gap-2 rounded-full border bg-surface px-4 py-2">
     <div class="flex">
-      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face5.getRootProps()}>
+      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face5.getRootProps()}>
         <img show={face5.src !== "" && face5.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face5.getImageProps()} />
         <span show={!face5.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face5.getFallbackProps()}>JD</span>
       </span>
-      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face6.getRootProps()}>
+      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face6.getRootProps()}>
         <img show={face6.src !== "" && face6.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face6.getImageProps()} />
         <span show={!face6.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face6.getFallbackProps()}>SM</span>
       </span>
-      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face7.getRootProps()}>
+      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face7.getRootProps()}>
         <img show={face7.src !== "" && face7.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face7.getImageProps()} />
         <span show={!face7.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face7.getFallbackProps()}>AB</span>
       </span>
-      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face8.getRootProps()}>
+      <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face8.getRootProps()}>
         <img show={face8.src !== "" && face8.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face8.getImageProps()} />
         <span show={!face8.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face8.getFallbackProps()}>KL</span>
       </span>
     </div>
-    <span class="text-sm font-medium text-text-muted">+3</span>
+    <span class="type-label text-muted">+3</span>
   </div>
 </div>

package/dist/avatar/examples/pills.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/pills.html
+var pills_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const face1 = avatar({ label: \"Jordan Doe\", fallback: \"JD\", src: \"https://i.pravatar.cc/80?img=1\" });\n  const face2 = avatar({ label: \"Sam Morgan\", fallback: \"SM\", src: \"https://i.pravatar.cc/80?img=2\" });\n  const face3 = avatar({ label: \"Alex Blair\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=3\" });\n  const face4 = avatar({ label: \"Kai Lee\", fallback: \"KL\", src: \"https://i.pravatar.cc/80?img=4\" });\n  const face5 = avatar({ label: \"Jordan Doe\", fallback: \"JD\", src: \"https://i.pravatar.cc/80?img=5\" });\n  const face6 = avatar({ label: \"Sam Morgan\", fallback: \"SM\", src: \"https://i.pravatar.cc/80?img=6\" });\n  const face7 = avatar({ label: \"Alex Blair\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=7\" });\n  const face8 = avatar({ label: \"Kai Lee\", fallback: \"KL\", src: \"https://i.pravatar.cc/80?img=8\" });\n<\/script>\n\n\n<div class=\"flex items-center gap-4\">\n  <div class=\"flex items-center gap-2 rounded-full border-2 bg-surface px-4 py-2\">\n    <div class=\"flex\">\n      <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face1.getRootProps()}>\n        <img show={face1.src !== \"\" && face1.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face1.getImageProps()} />\n        <span show={!face1.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face1.getFallbackProps()}>JD</span>\n      </span>\n      <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face2.getRootProps()}>\n        <img show={face2.src !== \"\" && face2.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face2.getImageProps()} />\n        <span show={!face2.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face2.getFallbackProps()}>SM</span>\n      </span>\n      <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face3.getRootProps()}>\n        <img show={face3.src !== \"\" && face3.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face3.getImageProps()} />\n        <span show={!face3.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face3.getFallbackProps()}>AB</span>\n      </span>\n      <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face4.getRootProps()}>\n        <img show={face4.src !== \"\" && face4.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face4.getImageProps()} />\n        <span show={!face4.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face4.getFallbackProps()}>KL</span>\n      </span>\n    </div>\n    <span class=\"type-label text-muted\">+3</span>\n  </div>\n  <div class=\"flex items-center gap-2 rounded-full border bg-surface px-4 py-2\">\n    <div class=\"flex\">\n      <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face5.getRootProps()}>\n        <img show={face5.src !== \"\" && face5.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face5.getImageProps()} />\n        <span show={!face5.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face5.getFallbackProps()}>JD</span>\n      </span>\n      <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face6.getRootProps()}>\n        <img show={face6.src !== \"\" && face6.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face6.getImageProps()} />\n        <span show={!face6.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face6.getFallbackProps()}>SM</span>\n      </span>\n      <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face7.getRootProps()}>\n        <img show={face7.src !== \"\" && face7.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face7.getImageProps()} />\n        <span show={!face7.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face7.getFallbackProps()}>AB</span>\n      </span>\n      <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face8.getRootProps()}>\n        <img show={face8.src !== \"\" && face8.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face8.getImageProps()} />\n        <span show={!face8.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face8.getFallbackProps()}>KL</span>\n      </span>\n    </div>\n    <span class=\"type-label text-muted\">+3</span>\n  </div>\n</div>";
+export { pills_default as default };
+
+//# sourceMappingURL=pills.html.js.map

package/dist/avatar/examples/pillsolid.html

@@ -6,16 +6,16 @@
 </script>
 
 
-<div class="flex items-center gap-2 rounded-full border border-solid border-border bg-surface px-4 py-2">
+<div class="flex items-center gap-2 rounded-full border bg-surface px-4 py-2">
   <div class="flex">
-    <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face1.getRootProps()}>
+    <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face1.getRootProps()}>
       <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
       <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
     </span>
-    <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face2.getRootProps()}>
+    <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted" {...face2.getRootProps()}>
       <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
       <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>SM</span>
     </span>
   </div>
-  <span class="text-sm font-medium text-text-muted">+3</span>
+  <span class="type-label text-muted">+3</span>
 </div>

package/dist/avatar/examples/pillsolid.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/pillsolid.html
+var pillsolid_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const face1 = avatar({ label: \"Jordan Doe\", fallback: \"JD\", src: \"https://i.pravatar.cc/80?img=1\" });\n  const face2 = avatar({ label: \"Sam Morgan\", fallback: \"SM\", src: \"https://i.pravatar.cc/80?img=2\" });\n<\/script>\n\n\n<div class=\"flex items-center gap-2 rounded-full border bg-surface px-4 py-2\">\n  <div class=\"flex\">\n    <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face1.getRootProps()}>\n      <img show={face1.src !== \"\" && face1.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face1.getImageProps()} />\n      <span show={!face1.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face1.getFallbackProps()}>JD</span>\n    </span>\n    <span class=\"relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-label text-muted\" {...face2.getRootProps()}>\n      <img show={face2.src !== \"\" && face2.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face2.getImageProps()} />\n      <span show={!face2.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face2.getFallbackProps()}>SM</span>\n    </span>\n  </div>\n  <span class=\"type-label text-muted\">+3</span>\n</div>";
+export { pillsolid_default as default };
+
+//# sourceMappingURL=pillsolid.html.js.map

package/dist/avatar/examples/rounded.html

@@ -6,7 +6,7 @@
 
 
 <div class="mx-auto flex w-full max-w-[20rem] justify-center">
-  <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken text-lg font-semibold text-text-muted" {...machine.getRootProps()}>
+  <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted" {...machine.getRootProps()}>
     <img show={machine.src !== "" && machine.status !== "error"} class="h-full w-full object-cover" draggable="false" {...machine.getImageProps()} />
     <span show={!machine.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...machine.getFallbackProps()}>AB</span>
   </span>

package/dist/avatar/examples/rounded.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/rounded.html
+var rounded_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const machine = avatar({ label: \"Avatar\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=1\" });\n<\/script>\n\n\n<div class=\"mx-auto flex w-full max-w-[20rem] justify-center\">\n  <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted\" {...machine.getRootProps()}>\n    <img show={machine.src !== \"\" && machine.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...machine.getImageProps()} />\n    <span show={!machine.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...machine.getFallbackProps()}>AB</span>\n  </span>\n</div>";
+export { rounded_default as default };
+
+//# sourceMappingURL=rounded.html.js.map

package/dist/avatar/examples/status.html

@@ -8,14 +8,14 @@
 
 <div class="flex items-center gap-4">
   <div class="relative">
-    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted" {...face1.getRootProps()}>
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted" {...face1.getRootProps()}>
       <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
       <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>SM</span>
     </span>
     <span class="absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-success"></span>
   </div>
   <div class="relative">
-    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken text-lg font-semibold text-text-muted" {...face2.getRootProps()}>
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted" {...face2.getRootProps()}>
       <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
       <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>AB</span>
     </span>

package/dist/avatar/examples/status.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/status.html
+var status_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const face1 = avatar({ label: \"Sam Morgan\", fallback: \"SM\", src: \"https://i.pravatar.cc/80?img=1\" });\n  const face2 = avatar({ label: \"Alex Blair\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=2\" });\n<\/script>\n\n\n<div class=\"flex items-center gap-4\">\n  <div class=\"relative\">\n    <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted\" {...face1.getRootProps()}>\n      <img show={face1.src !== \"\" && face1.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face1.getImageProps()} />\n      <span show={!face1.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face1.getFallbackProps()}>SM</span>\n    </span>\n    <span class=\"absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-success\"></span>\n  </div>\n  <div class=\"relative\">\n    <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted\" {...face2.getRootProps()}>\n      <img show={face2.src !== \"\" && face2.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face2.getImageProps()} />\n      <span show={!face2.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face2.getFallbackProps()}>AB</span>\n    </span>\n    <span class=\"absolute -top-1 -right-1 h-4 w-4 rounded-full border-2 border-solid border-surface bg-semantic-success\"></span>\n  </div>\n</div>";
+export { status_default as default };
+
+//# sourceMappingURL=status.html.js.map

package/dist/avatar/examples/statusminimal.html

@@ -7,7 +7,7 @@
 
 <div class="mx-auto flex w-full max-w-[20rem] justify-center">
   <div class="relative">
-    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken text-lg font-semibold text-text-muted" {...machine.getRootProps()}>
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted" {...machine.getRootProps()}>
       <img show={machine.src !== "" && machine.status !== "error"} class="h-full w-full object-cover" draggable="false" {...machine.getImageProps()} />
       <span show={!machine.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...machine.getFallbackProps()}>AB</span>
     </span>

package/dist/avatar/examples/statusminimal.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/statusminimal.html
+var statusminimal_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const machine = avatar({ label: \"Avatar\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=1\" });\n<\/script>\n\n\n<div class=\"mx-auto flex w-full max-w-[20rem] justify-center\">\n  <div class=\"relative\">\n    <span class=\"relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken type-lead text-muted\" {...machine.getRootProps()}>\n      <img show={machine.src !== \"\" && machine.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...machine.getImageProps()} />\n      <span show={!machine.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...machine.getFallbackProps()}>AB</span>\n    </span>\n    <span class=\"absolute -top-1 -right-1 h-4 w-4 rounded-full border-2 border-solid border-surface bg-semantic-success\"></span>\n  </div>\n</div>";
+export { statusminimal_default as default };
+
+//# sourceMappingURL=statusminimal.html.js.map

package/dist/avatar/examples/trusted.html

@@ -9,25 +9,25 @@
 
 
 <div class="mx-auto flex w-full max-w-[20rem] justify-center">
-  <div class="flex items-center gap-2 rounded-full border border-solid border-border bg-surface px-4 py-2">
+  <div class="flex items-center gap-2 rounded-full border bg-surface px-4 py-2">
     <div class="flex">
-      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-xs font-semibold text-text-muted" {...face1.getRootProps()}>
+      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-caption-emphasized text-muted" {...face1.getRootProps()}>
         <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
         <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
       </span>
-      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-xs font-semibold text-text-muted" {...face2.getRootProps()}>
+      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-caption-emphasized text-muted" {...face2.getRootProps()}>
         <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
         <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>SM</span>
       </span>
-      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-xs font-semibold text-text-muted" {...face3.getRootProps()}>
+      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-caption-emphasized text-muted" {...face3.getRootProps()}>
         <img show={face3.src !== "" && face3.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face3.getImageProps()} />
         <span show={!face3.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face3.getFallbackProps()}>AB</span>
       </span>
-      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-xs font-semibold text-text-muted" {...face4.getRootProps()}>
+      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-caption-emphasized text-muted" {...face4.getRootProps()}>
         <img show={face4.src !== "" && face4.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face4.getImageProps()} />
         <span show={!face4.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face4.getFallbackProps()}>KL</span>
       </span>
     </div>
-    <span class="text-sm text-text-muted font-medium">Trusted by <span class="font-bold text-text">80K+</span> developers.</span>
+    <span class="type-label text-muted">Trusted by <span>80K+</span> developers.</span>
   </div>
 </div>

package/dist/avatar/examples/trusted.html.js

@@ -0,0 +1,5 @@
+// src/avatar/examples/trusted.html
+var trusted_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const face1 = avatar({ label: \"Jordan Doe\", fallback: \"JD\", src: \"https://i.pravatar.cc/80?img=1\" });\n  const face2 = avatar({ label: \"Sam Morgan\", fallback: \"SM\", src: \"https://i.pravatar.cc/80?img=2\" });\n  const face3 = avatar({ label: \"Alex Blair\", fallback: \"AB\", src: \"https://i.pravatar.cc/80?img=3\" });\n  const face4 = avatar({ label: \"Kai Lee\", fallback: \"KL\", src: \"https://i.pravatar.cc/80?img=4\" });\n<\/script>\n\n\n<div class=\"mx-auto flex w-full max-w-[20rem] justify-center\">\n  <div class=\"flex items-center gap-2 rounded-full border bg-surface px-4 py-2\">\n    <div class=\"flex\">\n      <span class=\"relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-caption-emphasized text-muted\" {...face1.getRootProps()}>\n        <img show={face1.src !== \"\" && face1.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face1.getImageProps()} />\n        <span show={!face1.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face1.getFallbackProps()}>JD</span>\n      </span>\n      <span class=\"relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-caption-emphasized text-muted\" {...face2.getRootProps()}>\n        <img show={face2.src !== \"\" && face2.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face2.getImageProps()} />\n        <span show={!face2.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face2.getFallbackProps()}>SM</span>\n      </span>\n      <span class=\"relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-caption-emphasized text-muted\" {...face3.getRootProps()}>\n        <img show={face3.src !== \"\" && face3.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face3.getImageProps()} />\n        <span show={!face3.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face3.getFallbackProps()}>AB</span>\n      </span>\n      <span class=\"relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-caption-emphasized text-muted\" {...face4.getRootProps()}>\n        <img show={face4.src !== \"\" && face4.status !== \"error\"} class=\"h-full w-full object-cover\" draggable=\"false\" {...face4.getImageProps()} />\n        <span show={!face4.loaded} aria-hidden=\"true\" class=\"grid h-full w-full place-items-center\" {...face4.getFallbackProps()}>KL</span>\n      </span>\n    </div>\n    <span class=\"type-label text-muted\">Trusted by <span>80K+</span> developers.</span>\n  </div>\n</div>";
+export { trusted_default as default };
+
+//# sourceMappingURL=trusted.html.js.map

package/dist/avatar/examples/verification.html

@@ -7,12 +7,12 @@
 
 <div class="mx-auto flex w-full max-w-[20rem] justify-center">
   <div class="relative">
-    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted" {...machine.getRootProps()}>
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken type-lead text-muted" {...machine.getRootProps()}>
       <img show={machine.src !== "" && machine.status !== "error"} class="h-full w-full object-cover" draggable="false" {...machine.getImageProps()} />
       <span show={!machine.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...machine.getFallbackProps()}>VU</span>
     </span>
-    <span class="absolute bottom-0 right-0 grid h-6 w-6 place-items-center rounded-full border-2 border-solid border-surface bg-primary text-xs text-on-primary">
-      <span class="i-lucide-check text-xs" aria-hidden="true"></span>
+    <span class="absolute bottom-0 right-0 grid h-6 w-6 place-items-center rounded-full border-2 border-solid border-surface bg-primary type-caption text-on-primary">
+      <span class="i-lucide-check type-caption" aria-hidden="true"></span>
     </span>
   </div>
 </div>