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

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

@@ -0,0 +1,5 @@
+// src/avatar/examples/verification.html
+var verification_default = "<script lang=\"ts\">\n  import { avatar } from \"../avatar.presentation.ts\";\n\n  const machine = avatar({ label: \"Avatar\", fallback: \"VU\", 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-full 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()}>VU</span>\n    </span>\n    <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\">\n      <span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span>\n    </span>\n  </div>\n</div>";
+export { verification_default as default };
+
+//# sourceMappingURL=verification.html.js.map

package/dist/carousel/carousel.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface CarouselEvents {
   "NEXT": {};
   "PREV": {};
@@ -46,5 +46,4 @@ export interface CarouselDragStatusChange {
 export interface CarouselAutoplayStatusChange {
   readonly status: "playing" | "stopped";
   readonly index: number;
-}
-//# sourceMappingURL=carousel.events.d.ts.map
+}

package/dist/carousel/carousel.machine.d.ts

@@ -1,6 +1,5 @@
-import { CarouselEvents } from "./carousel.events.js";
 import { CarouselArgs, CarouselContext, CarouselState } from "./carousel.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { CarouselEvents } from "./carousel.events.js";
+import { Machine } from "@spinjs/components/fsm";
 export declare function carousel(args?: CarouselArgs, authored?: (name: string) => boolean): Machine<CarouselContext, CarouselEvents, CarouselState>;
-export type { CarouselArgs, CarouselContext, CarouselEvents };
-//# sourceMappingURL=carousel.machine.d.ts.map
+export type { CarouselArgs, CarouselContext, CarouselEvents };

package/dist/carousel/carousel.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./carousel.state.js";
 import { advance, autoplayStart, autoplayStop, dragEnd, dragStart, goTo, pagesSet, partBlur, partFocus, previous, scrollSettle, slideView, viewportBlur, viewportFocus } from "./carousel.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/carousel/carousel.machine.ts
 function carousel(args = {}, authored = () => false) {
 	return createMachine({

package/dist/carousel/carousel.presentation.d.ts

@@ -1,6 +1,6 @@
-import { CarouselEvents } from "./carousel.events.js";
 import { CarouselArgs, CarouselContext, CarouselDragStatus, CarouselSlide, CarouselState } from "./carousel.state.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { CarouselEvents } from "./carousel.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 /**
  * Carousel definition: the DOM contract as data. Everything that MOVES is
  * the browser: the item group is a native scroll container with scroll-snap,
@@ -39,7 +39,7 @@ type ScopeLike = ViewFor<CarouselContext, CarouselEvents, CarouselState>;
 type SlotLike<R> = SlotViewFor<R, CarouselContext, CarouselEvents, CarouselState>;
 export declare const def: {
   name: string;
-  machine: (args: CarouselArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<CarouselContext, CarouselEvents, CarouselState>;
+  machine: (args: CarouselArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<CarouselContext, CarouselEvents, CarouselState>;
   start: (raw: Record<string, unknown>) => "idle" | "autoplay";
   mounted: ({ props, id, root }: {
     readonly props: Record<string, unknown>;
@@ -67,7 +67,7 @@ export declare const def: {
   }) => boolean;
   parts: {
     root: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         "data-state": string;
         onPointerdown: () => void;
         "use:autoplay": {
@@ -87,7 +87,7 @@ export declare const def: {
     };
     itemGroup: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         "use:resize-observer": {
           onResize: () => void;
         };
@@ -109,7 +109,7 @@ export declare const def: {
     };
     prevTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         "data-disabled": string | undefined;
         "data-focus": string | undefined;
         disabled: boolean;
@@ -123,7 +123,7 @@ export declare const def: {
     };
     nextTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         "data-disabled": string | undefined;
         "data-focus": string | undefined;
         disabled: boolean;
@@ -137,7 +137,7 @@ export declare const def: {
     };
     autoplayTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         "data-playing": string | undefined;
         "data-focus": string | undefined;
         onFocus: () => void;
@@ -150,7 +150,7 @@ export declare const def: {
     };
     indicatorGroup: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         id: string;
         role: string;
         "aria-label": string;
@@ -159,21 +159,21 @@ export declare const def: {
     };
     progressText: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         id: string;
         "data-state": string;
       };
     };
     autoplayProgress: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         id: string;
         "data-state": string;
       };
     };
     autoplayProgressFill: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, CarouselContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<CarouselEvents>, CarouselState>) => {
         "data-state": string;
       };
     };
@@ -374,6 +374,5 @@ export declare const def: {
   };
 };
 export type CarouselApi = ApiOf<typeof def>;
-export declare const carousel: import("@spinjs/runtime").DefinedComponent<CarouselApi, CarouselArgs>;
-export type { CarouselDragStatus, CarouselSlide };
-//# sourceMappingURL=carousel.presentation.d.ts.map
+export declare const carousel: import("@spinjs/components/runtime").DefinedComponent<CarouselApi, CarouselArgs>;
+export type { CarouselDragStatus, CarouselSlide };

package/dist/carousel/carousel.presentation.js

@@ -1,6 +1,6 @@
-import { initial, pageCountFor, pageOf, slidesOf, slidesPerMoveOf, slidesPerPageOf } from "./carousel.state.js";
 import { carousel as carousel$1 } from "./carousel.machine.js";
-import { ariaControls, ariaCurrent, ariaHidden, ariaPressed, ariaRoleDescription, authoredProps, defineComponent, isRecord, liveRegion, resolveTwins } from "@spinjs/runtime";
+import { initial, pageCountFor, pageOf, slidesOf, slidesPerMoveOf, slidesPerPageOf } from "./carousel.state.js";
+import { ariaControls, ariaCurrent, ariaHidden, ariaPressed, ariaRoleDescription, authoredProps, defineComponent, isRecord, liveRegion, resolveTwins } from "@spinjs/components/runtime";
 // src/carousel/carousel.presentation.ts
 /** The in-view threshold is a percentage; the observer wants a 0..1
 * fraction. Normalizing here keeps the prop's authored unit. */

package/dist/carousel/carousel.state.d.ts

@@ -57,5 +57,4 @@ export declare const lastPageOf: (pageCount: number) => number;
 export declare const movesPer: (ctx: CarouselContext) => number;
 export declare const pageOf: (ctx: CarouselContext, slide: number) => number;
 export declare const restStatus: (ctx: CarouselContext) => CarouselDragStatus;
-export declare const midGesture: (status: CarouselDragStatus) => boolean;
-//# sourceMappingURL=carousel.state.d.ts.map
+export declare const midGesture: (status: CarouselDragStatus) => boolean;

package/dist/carousel/carousel.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin, isRecord } from "@spinjs/runtime";
+import { defaultTwin, isRecord } from "@spinjs/components/runtime";
 // src/carousel/carousel.state.ts
 const slidesOf = (raw) => {
 	if (!Array.isArray(raw)) return [];

package/dist/carousel/carousel.transitions.d.ts

@@ -1,6 +1,6 @@
 import { CarouselEvents } from "./carousel.events.js";
 import { CarouselContext } from "./carousel.state.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { AssignFor } from "@spinjs/components/fsm";
 type CarouselAssign<K extends keyof CarouselEvents = keyof CarouselEvents> = AssignFor<CarouselContext, CarouselEvents, K>;
 export declare const advance: CarouselAssign<"NEXT" | "AUTOPLAY.TICK">;
 export declare const previous: CarouselAssign<"PREV">;
@@ -16,5 +16,4 @@ export declare const partFocus: CarouselAssign<"PART.FOCUS">;
 export declare const partBlur: CarouselAssign<"PART.BLUR">;
 export declare const autoplayStart: CarouselAssign<"AUTOPLAY.START">;
 export declare const autoplayStop: CarouselAssign<"AUTOPLAY.STOP">;
-export {};
-//# sourceMappingURL=carousel.transitions.d.ts.map
+export {};

package/dist/carousel/examples/autoplay.html

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

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

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

package/dist/carousel/examples/basic.html

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

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

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

package/dist/carousel/examples/cards.html

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

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

@@ -0,0 +1,5 @@
+// src/carousel/examples/cards.html
+var cards_default = "<script lang=\"ts\">\nimport { carousel } from \"../carousel.presentation.ts\";\n\nconst machine = carousel({\n  allowMouseDrag: true,\n  slidesPerPage: 2,\n  items: [\n    { value: \"mtn\", tag: \"Elevation\", label: \"Mountain Adventure\", content: \"Thin air, steep lines.\" },\n    { value: \"ocean\", tag: \"Pacific\", label: \"Ocean Views\", content: \"Salt, fog, gulls.\" },\n    { value: \"forest\", tag: \"Redwoods\", label: \"Forest Escape\", content: \"Tall trees, soft light.\" },\n    { value: \"urban\", tag: \"Downtown\", label: \"Urban Explorer\", content: \"Vibrant city culture.\" },\n  ],\n});\n<\/script>\n\n<div\n  class=\"relative mx-auto w-full max-w-sm rounded-lg border bg-surface-raised p-4\"\n  {...machine.getRootProps()}>\n  <div\n    class={[\"flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none\", { \"cursor-grabbing snap-none scroll-auto\": machine.isDragging }]}\n    {...machine.getItemGroupProps()}\n  >\n    <template for={machine.getItemIndexes()} as={row} key={row.value}>\n      <div\n        class={[\"w-[calc((100%_-_0.5rem)/2)] shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50\", { \"opacity-100\": machine.isInView(row.index) }]}\n        {...machine.getItemProps(row)}\n      >\n        <div\n          class=\"flex min-h-[8rem] flex-col justify-between rounded-md border bg-surface p-4\">\n          <span class=\"type-code text-primary\">{row.tag}</span>\n          <div class=\"mt-3\">\n            <div class=\"type-label\">{row.label}</div>\n            <div class=\"mt-1 type-caption text-muted\">{row.content}</div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <div\n    class={[\"mt-2 h-1 overflow-hidden rounded-full bg-surface-raised opacity-0 transition-opacity duration-fast ease-standard pointer-events-none\", { \"opacity-100\": machine.isPlaying }]}\n    {...machine.getAutoplayProgressProps()}>\n    <div\n      class={[\"h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard\", { \"scale-x-100\": machine.isPlaying }]}\n      {...machine.getAutoplayProgressFillProps()}></div>\n  </div>\n\n  <div class=\"flex items-center gap-2 pt-4\" {...machine.getControlProps()}>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getPrevTriggerProps()}>‹</button>\n    <div class=\"flex flex-1 items-center justify-center gap-1\"\n      {...machine.getIndicatorGroupProps()}>\n      <template for={machine.getItemIndexes()} as={row} key={row.value}>\n        <button\n          class={[\"bare h-2 w-2 rounded-full border bg-surface-raised transition-all duration-base ease-standard\", { \"w-4 border-transparent\": machine.isInView(row.index), \"ring-2 ring-border-strong\": machine.focused }]}\n          {...machine.getIndicatorProps(row)}></button>\n      </template>\n    </div>\n    <button\n      class={[\"ghost icon s-sm\", { \"text-primary\": machine.isPlaying, \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getAutoplayTriggerProps()}>▶</button>\n    <template for={machine.getProgressRows()} as={row} key={row.value}>\n      <span class=\"type-caption text-muted\"\n        {...machine.getProgressTextProps()}>{row.value}</span>\n    </template>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getNextTriggerProps()}>›</button>\n  </div>\n</div>\n";
+export { cards_default as default };
+
+//# sourceMappingURL=cards.html.js.map

package/dist/carousel/examples/hero.html

@@ -12,7 +12,7 @@ const machine = carousel({
 </script>
 
 <div
-  class="relative mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface-raised p-4"
+  class="relative mx-auto w-full max-w-sm rounded-lg border bg-surface-raised p-4"
   {...machine.getRootProps()}>
   <div
     class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
@@ -24,11 +24,11 @@ const machine = carousel({
         {...machine.getItemProps(row)}
       >
         <div
-          class="relative flex min-h-[10rem] flex-col justify-between rounded-md border border-solid border-border bg-surface p-6">
-          <span class="w-fit rounded-full bg-surface-sunken px-2 py-1 font-mono text-xs text-primary">{row.tag}</span>
+          class="relative flex min-h-[10rem] flex-col justify-between rounded-md border bg-surface p-6">
+          <span class="w-fit rounded-full bg-surface-sunken px-2 py-1 type-code text-primary">{row.tag}</span>
           <div class="mt-4">
-            <div class="text-lg font-semibold text-text">{row.label}</div>
-            <div class="mt-1 text-sm text-text-muted">{row.content}</div>
+            <div class="type-lead">{row.label}</div>
+            <div class="mt-1 type-body text-muted">{row.content}</div>
           </div>
         </div>
       </div>
@@ -43,7 +43,7 @@ const machine = carousel({
       {...machine.getIndicatorGroupProps()}>
       <template for={machine.getItemIndexes()} as={row} key={row.value}>
         <button
-          class={["bare h-2 w-2 rounded-full p-0 border-border bg-surface transition-all duration-base ease-standard", { "w-4 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          class={["bare h-2 w-2 rounded-full p-0 border bg-surface transition-all duration-base ease-standard", { "w-4 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
           {...machine.getIndicatorProps(row)}></button>
       </template>
     </div>

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

@@ -0,0 +1,5 @@
+// src/carousel/examples/hero.html
+var hero_default = "<script lang=\"ts\">\nimport { carousel } from \"../carousel.presentation.ts\";\n\nconst machine = carousel({\n  allowMouseDrag: true,\n  items: [\n    { value: \"h1\", tag: \"Featured Release\", label: \"Discover Amazing Places\", content: \"Explore the world's most beautiful destinations.\" },\n    { value: \"h2\", tag: \"Expedition\", label: \"Adventure Awaits\", content: \"Peaks, trails, and thin air.\" },\n    { value: \"h3\", tag: \"Deep Time\", label: \"Journey Beyond\", content: \"Red rock canyons and quiet horizons.\" },\n  ],\n});\n<\/script>\n\n<div\n  class=\"relative mx-auto w-full max-w-sm rounded-lg border bg-surface-raised p-4\"\n  {...machine.getRootProps()}>\n  <div\n    class={[\"flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none\", { \"cursor-grabbing snap-none scroll-auto\": machine.isDragging }]}\n    {...machine.getItemGroupProps()}\n  >\n    <template for={machine.getItemIndexes()} as={row} key={row.value}>\n      <div\n        class={[\"w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50\", { \"opacity-100\": machine.isInView(row.index) }]}\n        {...machine.getItemProps(row)}\n      >\n        <div\n          class=\"relative flex min-h-[10rem] flex-col justify-between rounded-md border bg-surface p-6\">\n          <span class=\"w-fit rounded-full bg-surface-sunken px-2 py-1 type-code text-primary\">{row.tag}</span>\n          <div class=\"mt-4\">\n            <div class=\"type-lead\">{row.label}</div>\n            <div class=\"mt-1 type-body text-muted\">{row.content}</div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <div class=\"flex items-center gap-2 pt-4\" {...machine.getControlProps()}>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getPrevTriggerProps()}>‹</button>\n    <div class=\"flex flex-1 items-center justify-center gap-1\"\n      {...machine.getIndicatorGroupProps()}>\n      <template for={machine.getItemIndexes()} as={row} key={row.value}>\n        <button\n          class={[\"bare h-2 w-2 rounded-full p-0 border bg-surface transition-all duration-base ease-standard\", { \"w-4 border-transparent\": machine.isInView(row.index), \"ring-2 ring-border-strong\": machine.focused }]}\n          {...machine.getIndicatorProps(row)}></button>\n      </template>\n    </div>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getNextTriggerProps()}>›</button>\n  </div>\n</div>\n";
+export { hero_default as default };
+
+//# sourceMappingURL=hero.html.js.map

package/dist/carousel/examples/infinite.html

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

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

@@ -0,0 +1,5 @@
+// src/carousel/examples/infinite.html
+var infinite_default = "<script lang=\"ts\">\nimport { carousel } from \"../carousel.presentation.ts\";\n\nconst machine = carousel({\n  allowMouseDrag: true,\n  items: [\n    { \"value\": \"apple\", \"label\": \"Apple\", \"content\": \"Fresh picks.\" },\n    { \"value\": \"figma\", \"label\": \"Figma\", \"content\": \"Design together.\" },\n    { \"value\": \"linear\", \"label\": \"Linear\", \"content\": \"Ship faster.\" },\n    { \"value\": \"slack\", \"label\": \"Slack\", \"content\": \"Talk it over.\" },\n  ],\n  loop: true,\n});\n<\/script>\n\n<div\n  class=\"relative mx-auto w-full max-w-[32rem] rounded-lg border bg-surface-raised p-4\"\n  {...machine.getRootProps()}>\n  <div\n    class={[\"flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none\", { \"cursor-grabbing snap-none scroll-auto\": machine.isDragging }]}\n    {...machine.getItemGroupProps()}\n  >\n    <template for={machine.getItemIndexes()} as={row} key={row.value}>\n      <div\n        class={[\"w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50\", { \"opacity-100\": machine.isInView(row.index) }]}\n        {...machine.getItemProps(row)}\n      >\n        <div\n          class=\"flex min-h-[8rem] flex-col items-center justify-center rounded-md border bg-surface p-4 text-center\">\n          <div class=\"type-label\">{row.label}</div>\n          <div class=\"type-caption text-muted\">{row.content}</div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <div\n    class={[\"mt-2 h-1 overflow-hidden rounded-full bg-surface-raised opacity-0 transition-opacity duration-fast ease-standard pointer-events-none\", { \"opacity-100\": machine.isPlaying }]}\n    {...machine.getAutoplayProgressProps()}>\n    <div\n      class={[\"h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard\", { \"scale-x-100\": machine.isPlaying }]}\n      {...machine.getAutoplayProgressFillProps()}></div>\n  </div>\n\n  <div class=\"flex items-center gap-2 pt-4\" {...machine.getControlProps()}>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getPrevTriggerProps()}>‹</button>\n    <div class=\"flex flex-1 items-center justify-center gap-1\"\n      {...machine.getIndicatorGroupProps()}>\n      <template for={machine.getItemIndexes()} as={row} key={row.value}>\n        <button\n          class={[\"bare h-2 w-2 rounded-full border bg-surface-raised transition-all duration-base ease-standard\", { \"w-4 border-transparent\": machine.isInView(row.index), \"ring-2 ring-border-strong\": machine.focused }]}\n          {...machine.getIndicatorProps(row)}></button>\n      </template>\n    </div>\n    <button\n      class={[\"ghost icon s-sm\", { \"text-primary\": machine.isPlaying, \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getAutoplayTriggerProps()}>▶</button>\n    <template for={machine.getProgressRows()} as={row} key={row.value}>\n      <span class=\"type-caption text-muted\"\n        {...machine.getProgressTextProps()}>{row.value}</span>\n    </template>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getNextTriggerProps()}>›</button>\n  </div>\n</div>\n";
+export { infinite_default as default };
+
+//# sourceMappingURL=infinite.html.js.map

package/dist/carousel/examples/minimal.html

@@ -12,7 +12,7 @@ const machine = carousel({
 </script>
 
 <div
-  class="relative mx-auto w-full max-w-[32rem] rounded-lg border border-solid border-border bg-surface-raised p-4"
+  class="relative mx-auto w-full max-w-[32rem] rounded-lg border bg-surface-raised p-4"
   {...machine.getRootProps()}>
   <div
     class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
@@ -24,9 +24,9 @@ const machine = carousel({
         {...machine.getItemProps(row)}
       >
         <div
-          class="flex min-h-[6rem] flex-col items-center justify-center rounded-md border border-solid border-border bg-surface p-4 text-center">
-          <div class="text-sm font-medium text-text">{row.label}</div>
-          <div class="text-xs text-text-muted mt-1">{row.content}</div>
+          class="flex min-h-[6rem] flex-col items-center justify-center rounded-md border bg-surface p-4 text-center">
+          <div class="type-label">{row.label}</div>
+          <div class="type-caption text-muted mt-1">{row.content}</div>
         </div>
       </div>
     </template>
@@ -37,7 +37,7 @@ const machine = carousel({
       class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
       {...machine.getPrevTriggerProps()}>‹</button>
     <template for={machine.getProgressRows()} as={row} key={row.value}>
-      <span class="text-xs text-text-muted"
+      <span class="type-caption text-muted"
         {...machine.getProgressTextProps()}>{row.value}</span>
     </template>
     <button

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

@@ -0,0 +1,5 @@
+// src/carousel/examples/minimal.html
+var minimal_default = "<script lang=\"ts\">\nimport { carousel } from \"../carousel.presentation.ts\";\n\nconst machine = carousel({\n  allowMouseDrag: true,\n  items: [{ \"value\": \"one\", \"label\": \"One\", \"content\": \"First.\" }, {\n    \"value\": \"two\",\n    \"label\": \"Two\",\n    \"content\": \"Second.\",\n  }],\n});\n<\/script>\n\n<div\n  class=\"relative mx-auto w-full max-w-[32rem] rounded-lg border bg-surface-raised p-4\"\n  {...machine.getRootProps()}>\n  <div\n    class={[\"flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none\", { \"cursor-grabbing snap-none scroll-auto\": machine.isDragging }]}\n    {...machine.getItemGroupProps()}\n  >\n    <template for={machine.getItemIndexes()} as={row} key={row.value}>\n      <div\n        class={[\"w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50\", { \"opacity-100\": machine.isInView(row.index) }]}\n        {...machine.getItemProps(row)}\n      >\n        <div\n          class=\"flex min-h-[6rem] flex-col items-center justify-center rounded-md border bg-surface p-4 text-center\">\n          <div class=\"type-label\">{row.label}</div>\n          <div class=\"type-caption text-muted mt-1\">{row.content}</div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <div class=\"flex items-center justify-between gap-2 pt-3\" {...machine.getControlProps()}>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getPrevTriggerProps()}>‹</button>\n    <template for={machine.getProgressRows()} as={row} key={row.value}>\n      <span class=\"type-caption text-muted\"\n        {...machine.getProgressTextProps()}>{row.value}</span>\n    </template>\n    <button\n      class={[\"ghost icon s-sm\", { \"ring-2 ring-border-strong\": machine.focused }]}\n      {...machine.getNextTriggerProps()}>›</button>\n  </div>\n</div>\n";
+export { minimal_default as default };
+
+//# sourceMappingURL=minimal.html.js.map

package/dist/carousel/examples/testimonials.html

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