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

package/dist/index.js

@@ -1,27 +1,27 @@
-import { angleSlider } from "./angle-slider/angle-slider.presentation.js";
 import { asyncList } from "./async-list/async-list.presentation.js";
-import { avatar } from "./avatar/avatar.presentation.js";
-import { colorPicker } from "./color-picker/color-picker.presentation.js";
-import { combobox } from "./combobox/combobox.presentation.js";
-import { dateInput } from "./date-input/date-input.presentation.js";
-import { datePicker } from "./date-picker/date-picker.presentation.js";
-import { editable } from "./editable/editable.presentation.js";
-import { fileUpload } from "./file-upload/file-upload.presentation.js";
-import { floatingPanel } from "./floating-panel/floating-panel.presentation.js";
-import { hoverCard, hoverCardManifest } from "./hover-card/hover-card.controller-def.js";
-import { imageCropper } from "./image-cropper/image-cropper.presentation.js";
 import { modePicker } from "./mode-picker/mode-picker.presentation.js";
 import { themePicker } from "./theme-picker/theme-picker.presentation.js";
+import { combobox } from "./combobox/combobox.presentation.js";
 import { listbox } from "./listbox/listbox.presentation.js";
+import { colorPicker } from "./color-picker/color-picker.presentation.js";
+import { imageCropper } from "./image-cropper/image-cropper.presentation.js";
 import { signaturePad } from "./signature-pad/signature-pad.presentation.js";
 import { ratingGroup } from "./rating-group/rating-group.presentation.js";
 import { slider } from "./slider/slider.presentation.js";
 import { splitter } from "./splitter/splitter.presentation.js";
 import { steps } from "./steps/steps.presentation.js";
 import { pagination } from "./pagination/pagination.presentation.js";
+import { angleSlider } from "./angle-slider/angle-slider.presentation.js";
 import { toggleGroup } from "./toggle-group/toggle-group.presentation.js";
+import { avatar } from "./avatar/avatar.presentation.js";
+import { dateInput } from "./date-input/date-input.presentation.js";
+import { datePicker } from "./date-picker/date-picker.presentation.js";
+import { editable } from "./editable/editable.presentation.js";
 import { tour } from "./tour/tour.presentation.js";
 import { navigationMenu } from "./navigation-menu/navigation-menu.presentation.js";
+import { fileUpload } from "./file-upload/file-upload.presentation.js";
+import { floatingPanel } from "./floating-panel/floating-panel.presentation.js";
+import { hoverCard, hoverCardManifest } from "./hover-card/hover-card.controller-def.js";
 import { menu } from "./menu/menu.presentation.js";
 import { numberInput } from "./number-input/number-input.presentation.js";
 import { pinInput } from "./pin-input/pin-input.presentation.js";
@@ -31,6 +31,7 @@ import { tags } from "./tags-input/tags.presentation.js";
 import { timer } from "./timer/timer.presentation.js";
 import { tabs } from "./tabs/tabs.presentation.js";
 import { toast } from "./toast/toast.presentation.js";
+import { toc } from "./toc/toc.presentation.js";
 import { tooltip, tooltipManifest } from "./tooltip/tooltip.controller-def.js";
 import { treeView } from "./tree-view/tree-view.presentation.js";
 // src/index.ts
@@ -73,7 +74,11 @@ const COMPONENT_GROUPS = [
 	{
 		id: "navigation",
 		label: "Navigation",
-		members: ["mode-picker", "theme-picker"]
+		members: [
+			"mode-picker",
+			"theme-picker",
+			"toc"
+		]
 	},
 	{
 		id: "display",
@@ -131,7 +136,8 @@ const UNIFIED_COMPONENT_GROUPS = [
 			"component-menu",
 			"component-pagination",
 			"component-steps",
-			"component-tabs"
+			"component-tabs",
+			"component-toc"
 		]
 	},
 	{
@@ -260,6 +266,7 @@ const COMPONENT_ICONS = {
 	"tags-input": "i-lucide-tags",
 	timer: "i-lucide-timer",
 	toast: "i-lucide-bell",
+	toc: "i-lucide-list-tree",
 	"toggle-group": "i-lucide-toggle-left",
 	tooltip: "i-lucide-message-circle-off",
 	tour: "i-lucide-route",
@@ -274,6 +281,6 @@ const CONTROLLERS = [
 	"popover",
 	"hover-card"
 ];
-export { COMPONENT_GROUPS, COMPONENT_ICONS, CONTROLLERS, UNIFIED_COMPONENT_GROUPS, angleSlider, asyncList, attachPopover, avatar, colorPicker, combobox, dateInput, datePicker, editable, fileUpload, floatingPanel, hoverCard, hoverCardManifest, imageCropper, listbox, menu, modePicker, navigationMenu, numberInput, pagination, pinInput, popover, popoverManifest, ratingGroup, select, signaturePad, slider, splitter, steps, tabs, tags, themePicker, timer, toast, toggleGroup, tooltip, tooltipManifest, tour, treeView };
+export { COMPONENT_GROUPS, COMPONENT_ICONS, CONTROLLERS, UNIFIED_COMPONENT_GROUPS, angleSlider, asyncList, attachPopover, avatar, colorPicker, combobox, dateInput, datePicker, editable, fileUpload, floatingPanel, hoverCard, hoverCardManifest, imageCropper, listbox, menu, modePicker, navigationMenu, numberInput, pagination, pinInput, popover, popoverManifest, ratingGroup, select, signaturePad, slider, splitter, steps, tabs, tags, themePicker, timer, toast, toc, toggleGroup, tooltip, tooltipManifest, tour, treeView };
 
 //# sourceMappingURL=index.js.map

package/dist/listbox/examples/basic.html

@@ -13,38 +13,38 @@ const machine = listbox({
 
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Launcher</label>
 
   <span
-    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    class={["block type-body text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
     {...machine.getValueTextProps()}
   >{machine.valueAsString}</span>
 
-  <div
-    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+  <panel
+    class="max-h-60 overflow-y-auto"
     {...machine.getContentProps()}
   >
     <template for={machine.getBlocks()} as={block} key={block.id}>
       <div class="py-1" {...machine.getItemGroupProps(block)}>
-        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+        <span class="block px-2 py-1 type-caption-emphasized text-muted"
           {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
         <template for={machine.getRows(block)} as={row} key={row.value}>
           <div
-            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="min-w-0 flex-1 truncate"
               {...machine.getItemTextProps(row)}>{row.label}</span>
             <span
               aria-hidden="true"
-              class="shrink-0 text-xs text-primary"
+              class="shrink-0 type-caption text-primary"
               {...machine.getItemIndicatorProps(row)}
-            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>
     </template>
-  </div>
+  </panel>
 </div>

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

@@ -0,0 +1,5 @@
+// src/listbox/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { listbox } from \"../listbox.presentation.ts\";\n\nconst machine = listbox({\n  items: [\n    { \"value\": \"cal\", \"label\": \"Calendar\", \"group\": \"Apps\" },\n    { \"value\": \"mail\", \"label\": \"Mail\", \"group\": \"Apps\" },\n    { \"value\": \"photos\", \"label\": \"Photos\", \"group\": \"Media\" },\n    { \"value\": \"music\", \"label\": \"Music\", \"group\": \"Media\" },\n  ],\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Launcher</label>\n\n  <span\n    class={[\"block type-body text-muted transition-colors duration-fast ease-decelerate\", { \"hidden\": machine.empty }]}\n    {...machine.getValueTextProps()}\n  >{machine.valueAsString}</span>\n\n  <panel\n    class=\"max-h-60 overflow-y-auto\"\n    {...machine.getContentProps()}\n  >\n    <template for={machine.getBlocks()} as={block} key={block.id}>\n      <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n        <span class=\"block px-2 py-1 type-caption-emphasized text-muted\"\n          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n        <template for={machine.getRows(block)} as={row} key={row.value}>\n          <div\n            class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span\n              aria-hidden=\"true\"\n              class=\"shrink-0 type-caption text-primary\"\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </template>\n  </panel>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/listbox/examples/controlled.html

@@ -17,38 +17,38 @@ const machine = listbox({
 
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Frameworks</label>
 
   <span
-    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    class={["block type-body text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
     {...machine.getValueTextProps()}
   >{machine.valueAsString}</span>
 
-  <div
-    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+  <panel
+    class="max-h-60 overflow-y-auto"
     {...machine.getContentProps()}
   >
     <template for={machine.getBlocks()} as={block} key={block.id}>
       <div class="py-1" {...machine.getItemGroupProps(block)}>
-        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+        <span class="block px-2 py-1 type-caption-emphasized text-muted"
           {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
         <template for={machine.getRows(block)} as={row} key={row.value}>
           <div
-            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="min-w-0 flex-1 truncate"
               {...machine.getItemTextProps(row)}>{row.label}</span>
             <span
               aria-hidden="true"
-              class="shrink-0 text-xs text-primary"
+              class="shrink-0 type-caption text-primary"
               {...machine.getItemIndicatorProps(row)}
-            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>
     </template>
-  </div>
+  </panel>
 </div>

package/dist/listbox/examples/controlled.html.js

@@ -0,0 +1,5 @@
+// src/listbox/examples/controlled.html
+var controlled_default = "<script lang=\"ts\">\nimport { listbox } from \"../listbox.presentation.ts\";\n\nconst machine = listbox({\n  items: [\n    { \"value\": \"react\", \"label\": \"React\" },\n    { \"value\": \"vue\", \"label\": \"Vue\" },\n    { \"value\": \"angular\", \"label\": \"Angular\" },\n    { \"value\": \"svelte\", \"label\": \"Svelte\" },\n    { \"value\": \"solid\", \"label\": \"Solid\" },\n    { \"value\": \"qwik\", \"label\": \"Qwik\" },\n  ],\n  multiple: true,\n  value: [\"vue\",\"svelte\"],\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Frameworks</label>\n\n  <span\n    class={[\"block type-body text-muted transition-colors duration-fast ease-decelerate\", { \"hidden\": machine.empty }]}\n    {...machine.getValueTextProps()}\n  >{machine.valueAsString}</span>\n\n  <panel\n    class=\"max-h-60 overflow-y-auto\"\n    {...machine.getContentProps()}\n  >\n    <template for={machine.getBlocks()} as={block} key={block.id}>\n      <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n        <span class=\"block px-2 py-1 type-caption-emphasized text-muted\"\n          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n        <template for={machine.getRows(block)} as={row} key={row.value}>\n          <div\n            class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span\n              aria-hidden=\"true\"\n              class=\"shrink-0 type-caption text-primary\"\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </template>\n  </panel>\n</div>\n";
+export { controlled_default as default };
+
+//# sourceMappingURL=controlled.html.js.map

package/dist/listbox/examples/countries.html

@@ -24,38 +24,38 @@ const machine = listbox({
 
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Country</label>
 
   <span
-    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    class={["block type-body text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
     {...machine.getValueTextProps()}
   >{machine.valueAsString}</span>
 
-  <div
-    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+  <panel
+    class="max-h-60 overflow-y-auto"
     {...machine.getContentProps()}
   >
     <template for={machine.getBlocks()} as={block} key={block.id}>
       <div class="py-1" {...machine.getItemGroupProps(block)}>
-        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+        <span class="block px-2 py-1 type-caption-emphasized text-muted"
           {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
         <template for={machine.getRows(block)} as={row} key={row.value}>
           <div
-            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="min-w-0 flex-1 truncate"
               {...machine.getItemTextProps(row)}>{row.label}</span>
             <span
               aria-hidden="true"
-              class="shrink-0 text-xs text-primary"
+              class="shrink-0 type-caption text-primary"
               {...machine.getItemIndicatorProps(row)}
-            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>
     </template>
-  </div>
+  </panel>
 </div>

package/dist/listbox/examples/countries.html.js

@@ -0,0 +1,5 @@
+// src/listbox/examples/countries.html
+var countries_default = "<script lang=\"ts\">\nimport { listbox } from \"../listbox.presentation.ts\";\n\nconst machine = listbox({\n  items: [\n    { \"value\": \"US\", \"label\": \"United States\" },\n    { \"value\": \"GB\", \"label\": \"United Kingdom\" },\n    { \"value\": \"CA\", \"label\": \"Canada\" },\n    { \"value\": \"DE\", \"label\": \"Germany\" },\n    { \"value\": \"FR\", \"label\": \"France\" },\n    { \"value\": \"JP\", \"label\": \"Japan\" },\n    { \"value\": \"AU\", \"label\": \"Australia\" },\n    { \"value\": \"BR\", \"label\": \"Brazil\" },\n    { \"value\": \"IN\", \"label\": \"India\" },\n    { \"value\": \"CN\", \"label\": \"China\" },\n    { \"value\": \"KR\", \"label\": \"South Korea\" },\n    { \"value\": \"NL\", \"label\": \"Netherlands\" },\n    { \"value\": \"ES\", \"label\": \"Spain\" },\n    { \"value\": \"IT\", \"label\": \"Italy\" },\n    { \"value\": \"MX\", \"label\": \"Mexico\" },\n  ],\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Country</label>\n\n  <span\n    class={[\"block type-body text-muted transition-colors duration-fast ease-decelerate\", { \"hidden\": machine.empty }]}\n    {...machine.getValueTextProps()}\n  >{machine.valueAsString}</span>\n\n  <panel\n    class=\"max-h-60 overflow-y-auto\"\n    {...machine.getContentProps()}\n  >\n    <template for={machine.getBlocks()} as={block} key={block.id}>\n      <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n        <span class=\"block px-2 py-1 type-caption-emphasized text-muted\"\n          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n        <template for={machine.getRows(block)} as={row} key={row.value}>\n          <div\n            class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span\n              aria-hidden=\"true\"\n              class=\"shrink-0 type-caption text-primary\"\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </template>\n  </panel>\n</div>\n";
+export { countries_default as default };
+
+//# sourceMappingURL=countries.html.js.map

package/dist/listbox/examples/grouped.html

@@ -21,38 +21,38 @@ const machine = listbox({
 
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Technologies</label>
 
   <span
-    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    class={["block type-body text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
     {...machine.getValueTextProps()}
   >{machine.valueAsString}</span>
 
-  <div
-    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+  <panel
+    class="max-h-60 overflow-y-auto"
     {...machine.getContentProps()}
   >
     <template for={machine.getBlocks()} as={block} key={block.id}>
       <div class="py-1" {...machine.getItemGroupProps(block)}>
-        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+        <span class="block px-2 py-1 type-caption-emphasized text-muted"
           {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
         <template for={machine.getRows(block)} as={row} key={row.value}>
           <div
-            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="min-w-0 flex-1 truncate"
               {...machine.getItemTextProps(row)}>{row.label}</span>
             <span
               aria-hidden="true"
-              class="shrink-0 text-xs text-primary"
+              class="shrink-0 type-caption text-primary"
               {...machine.getItemIndicatorProps(row)}
-            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>
     </template>
-  </div>
+  </panel>
 </div>

package/dist/listbox/examples/grouped.html.js

@@ -0,0 +1,5 @@
+// src/listbox/examples/grouped.html
+var grouped_default = "<script lang=\"ts\">\nimport { listbox } from \"../listbox.presentation.ts\";\n\nconst machine = listbox({\n  items: [\n    { \"value\": \"react\", \"label\": \"React\", \"group\": \"Frontend Frameworks\" },\n    { \"value\": \"vue\", \"label\": \"Vue\", \"group\": \"Frontend Frameworks\" },\n    { \"value\": \"angular\", \"label\": \"Angular\", \"group\": \"Frontend Frameworks\" },\n    { \"value\": \"svelte\", \"label\": \"Svelte\", \"group\": \"Frontend Frameworks\" },\n    { \"value\": \"nodejs\", \"label\": \"Node.js\", \"group\": \"Backend\" },\n    { \"value\": \"express\", \"label\": \"Express\", \"group\": \"Backend\" },\n    { \"value\": \"fastapi\", \"label\": \"FastAPI\", \"group\": \"Backend\" },\n    { \"value\": \"django\", \"label\": \"Django\", \"group\": \"Backend\" },\n    { \"value\": \"postgresql\", \"label\": \"PostgreSQL\", \"group\": \"Databases\" },\n    { \"value\": \"mongodb\", \"label\": \"MongoDB\", \"group\": \"Databases\" },\n    { \"value\": \"redis\", \"label\": \"Redis\", \"group\": \"Databases\" },\n    { \"value\": \"mysql\", \"label\": \"MySQL\", \"group\": \"Databases\" },\n  ],\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Technologies</label>\n\n  <span\n    class={[\"block type-body text-muted transition-colors duration-fast ease-decelerate\", { \"hidden\": machine.empty }]}\n    {...machine.getValueTextProps()}\n  >{machine.valueAsString}</span>\n\n  <panel\n    class=\"max-h-60 overflow-y-auto\"\n    {...machine.getContentProps()}\n  >\n    <template for={machine.getBlocks()} as={block} key={block.id}>\n      <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n        <span class=\"block px-2 py-1 type-caption-emphasized text-muted\"\n          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n        <template for={machine.getRows(block)} as={row} key={row.value}>\n          <div\n            class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span\n              aria-hidden=\"true\"\n              class=\"shrink-0 type-caption text-primary\"\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </template>\n  </panel>\n</div>\n";
+export { grouped_default as default };
+
+//# sourceMappingURL=grouped.html.js.map

package/dist/listbox/examples/icons.html

@@ -18,39 +18,39 @@ const machine = listbox({
 
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Design & Development Tools</label>
 
   <span
-    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    class={["block type-body text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
     {...machine.getValueTextProps()}
   >{machine.valueAsString}</span>
 
-  <div
-    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+  <panel
+    class="max-h-60 overflow-y-auto"
     {...machine.getContentProps()}
   >
     <template for={machine.getBlocks()} as={block} key={block.id}>
       <div class="py-1" {...machine.getItemGroupProps(block)}>
-        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+        <span class="block px-2 py-1 type-caption-emphasized text-muted"
           {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
         <template for={machine.getRows(block)} as={row} key={row.value}>
           <div
-            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
-            <span class="shrink-0 text-sm text-text-muted" aria-hidden="true"><span show={row.value === "figma"} class="inline-block i-lucide-frame"></span><span show={row.value === "photoshop"} class="inline-block i-lucide-image"></span><span show={row.value === "illustrator"} class="inline-block i-lucide-pen-tool"></span><span show={row.value === "sketch"} class="inline-block i-lucide-square-dashed"></span><span show={row.value === "framer"} class="inline-block i-lucide-layers"></span><span show={row.value === "vscode"} class="inline-block i-lucide-code"></span><span show={row.value === "xd"} class="inline-block i-lucide-droplet"></span></span>
+            <span class="shrink-0 type-body text-muted" aria-hidden="true"><span show={row.value === "figma"} class="inline-block i-lucide-frame"></span><span show={row.value === "photoshop"} class="inline-block i-lucide-image"></span><span show={row.value === "illustrator"} class="inline-block i-lucide-pen-tool"></span><span show={row.value === "sketch"} class="inline-block i-lucide-square-dashed"></span><span show={row.value === "framer"} class="inline-block i-lucide-layers"></span><span show={row.value === "vscode"} class="inline-block i-lucide-code"></span><span show={row.value === "xd"} class="inline-block i-lucide-droplet"></span></span>
             <span class="min-w-0 flex-1 truncate"
               {...machine.getItemTextProps(row)}>{row.label}</span>
             <span
               aria-hidden="true"
-              class="shrink-0 text-xs text-primary"
+              class="shrink-0 type-caption text-primary"
               {...machine.getItemIndicatorProps(row)}
-            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>
     </template>
-  </div>
+  </panel>
 </div>

package/dist/listbox/examples/icons.html.js

@@ -0,0 +1,5 @@
+// src/listbox/examples/icons.html
+var icons_default = "<script lang=\"ts\">\nimport { listbox } from \"../listbox.presentation.ts\";\n\nconst machine = listbox({\n  items: [\n    { \"value\": \"figma\", \"label\": \"Figma\" },\n    { \"value\": \"photoshop\", \"label\": \"Photoshop\" },\n    { \"value\": \"illustrator\", \"label\": \"Illustrator\" },\n    { \"value\": \"sketch\", \"label\": \"Sketch\" },\n    { \"value\": \"framer\", \"label\": \"Framer\" },\n    { \"value\": \"vscode\", \"label\": \"VS Code\" },\n    { \"value\": \"xd\", \"label\": \"Adobe XD\" },\n  ],\n  multiple: true,\n  value: [\"figma\",\"vscode\"],\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Design & Development Tools</label>\n\n  <span\n    class={[\"block type-body text-muted transition-colors duration-fast ease-decelerate\", { \"hidden\": machine.empty }]}\n    {...machine.getValueTextProps()}\n  >{machine.valueAsString}</span>\n\n  <panel\n    class=\"max-h-60 overflow-y-auto\"\n    {...machine.getContentProps()}\n  >\n    <template for={machine.getBlocks()} as={block} key={block.id}>\n      <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n        <span class=\"block px-2 py-1 type-caption-emphasized text-muted\"\n          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n        <template for={machine.getRows(block)} as={row} key={row.value}>\n          <div\n            class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"shrink-0 type-body text-muted\" aria-hidden=\"true\"><span show={row.value === \"figma\"} class=\"inline-block i-lucide-frame\"></span><span show={row.value === \"photoshop\"} class=\"inline-block i-lucide-image\"></span><span show={row.value === \"illustrator\"} class=\"inline-block i-lucide-pen-tool\"></span><span show={row.value === \"sketch\"} class=\"inline-block i-lucide-square-dashed\"></span><span show={row.value === \"framer\"} class=\"inline-block i-lucide-layers\"></span><span show={row.value === \"vscode\"} class=\"inline-block i-lucide-code\"></span><span show={row.value === \"xd\"} class=\"inline-block i-lucide-droplet\"></span></span>\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span\n              aria-hidden=\"true\"\n              class=\"shrink-0 type-caption text-primary\"\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </template>\n  </panel>\n</div>\n";
+export { icons_default as default };
+
+//# sourceMappingURL=icons.html.js.map

package/dist/listbox/examples/multiple.html

@@ -19,38 +19,38 @@ const machine = listbox({
 
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Languages</label>
 
   <span
-    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    class={["block type-body text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
     {...machine.getValueTextProps()}
   >{machine.valueAsString}</span>
 
-  <div
-    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+  <panel
+    class="max-h-60 overflow-y-auto"
     {...machine.getContentProps()}
   >
     <template for={machine.getBlocks()} as={block} key={block.id}>
       <div class="py-1" {...machine.getItemGroupProps(block)}>
-        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+        <span class="block px-2 py-1 type-caption-emphasized text-muted"
           {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
         <template for={machine.getRows(block)} as={row} key={row.value}>
           <div
-            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="min-w-0 flex-1 truncate"
               {...machine.getItemTextProps(row)}>{row.label}</span>
             <span
               aria-hidden="true"
-              class="shrink-0 text-xs text-primary"
+              class="shrink-0 type-caption text-primary"
               {...machine.getItemIndicatorProps(row)}
-            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>
     </template>
-  </div>
+  </panel>
 </div>

package/dist/listbox/examples/multiple.html.js

@@ -0,0 +1,5 @@
+// src/listbox/examples/multiple.html
+var multiple_default = "<script lang=\"ts\">\nimport { listbox } from \"../listbox.presentation.ts\";\n\nconst machine = listbox({\n  items: [\n    { \"value\": \"typescript\", \"label\": \"TypeScript\" },\n    { \"value\": \"javascript\", \"label\": \"JavaScript\" },\n    { \"value\": \"python\", \"label\": \"Python\" },\n    { \"value\": \"go\", \"label\": \"Go\" },\n    { \"value\": \"rust\", \"label\": \"Rust\" },\n    { \"value\": \"java\", \"label\": \"Java\" },\n    { \"value\": \"cpp\", \"label\": \"C++\" },\n    { \"value\": \"swift\", \"label\": \"Swift\" },\n  ],\n  multiple: true,\n  value: [\"typescript\",\"javascript\"],\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Languages</label>\n\n  <span\n    class={[\"block type-body text-muted transition-colors duration-fast ease-decelerate\", { \"hidden\": machine.empty }]}\n    {...machine.getValueTextProps()}\n  >{machine.valueAsString}</span>\n\n  <panel\n    class=\"max-h-60 overflow-y-auto\"\n    {...machine.getContentProps()}\n  >\n    <template for={machine.getBlocks()} as={block} key={block.id}>\n      <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n        <span class=\"block px-2 py-1 type-caption-emphasized text-muted\"\n          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n        <template for={machine.getRows(block)} as={row} key={row.value}>\n          <div\n            class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span\n              aria-hidden=\"true\"\n              class=\"shrink-0 type-caption text-primary\"\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </template>\n  </panel>\n</div>\n";
+export { multiple_default as default };
+
+//# sourceMappingURL=multiple.html.js.map

package/dist/listbox/examples/priority.html

@@ -13,38 +13,38 @@ const machine = listbox({
 
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Task Priority</label>
 
   <span
-    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    class={["block type-body text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
     {...machine.getValueTextProps()}
   >{machine.valueAsString}</span>
 
-  <div
-    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+  <panel
+    class="max-h-60 overflow-y-auto"
     {...machine.getContentProps()}
   >
     <template for={machine.getBlocks()} as={block} key={block.id}>
       <div class="py-1" {...machine.getItemGroupProps(block)}>
-        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+        <span class="block px-2 py-1 type-caption-emphasized text-muted"
           {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
         <template for={machine.getRows(block)} as={row} key={row.value}>
           <div
-            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="min-w-0 flex-1 truncate"
               {...machine.getItemTextProps(row)}>{row.label}</span>
             <span
               aria-hidden="true"
-              class="shrink-0 text-xs text-primary"
+              class="shrink-0 type-caption text-primary"
               {...machine.getItemIndicatorProps(row)}
-            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>
     </template>
-  </div>
+  </panel>
 </div>

package/dist/listbox/examples/priority.html.js

@@ -0,0 +1,5 @@
+// src/listbox/examples/priority.html
+var priority_default = "<script lang=\"ts\">\nimport { listbox } from \"../listbox.presentation.ts\";\n\nconst machine = listbox({\n  items: [\n    { \"value\": \"critical\", \"label\": \"Critical\" },\n    { \"value\": \"high\", \"label\": \"High\" },\n    { \"value\": \"medium\", \"label\": \"Medium\" },\n    { \"value\": \"low\", \"label\": \"Low\" },\n  ],\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Task Priority</label>\n\n  <span\n    class={[\"block type-body text-muted transition-colors duration-fast ease-decelerate\", { \"hidden\": machine.empty }]}\n    {...machine.getValueTextProps()}\n  >{machine.valueAsString}</span>\n\n  <panel\n    class=\"max-h-60 overflow-y-auto\"\n    {...machine.getContentProps()}\n  >\n    <template for={machine.getBlocks()} as={block} key={block.id}>\n      <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n        <span class=\"block px-2 py-1 type-caption-emphasized text-muted\"\n          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n        <template for={machine.getRows(block)} as={row} key={row.value}>\n          <div\n            class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span\n              aria-hidden=\"true\"\n              class=\"shrink-0 type-caption text-primary\"\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </template>\n  </panel>\n</div>\n";
+export { priority_default as default };
+
+//# sourceMappingURL=priority.html.js.map

package/dist/listbox/examples/settings.html

@@ -27,38 +27,38 @@ const machine = listbox({
 
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Settings Preferences</label>
 
   <span
-    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    class={["block type-body text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
     {...machine.getValueTextProps()}
   >{machine.valueAsString}</span>
 
-  <div
-    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+  <panel
+    class="max-h-60 overflow-y-auto"
     {...machine.getContentProps()}
   >
     <template for={machine.getBlocks()} as={block} key={block.id}>
       <div class="py-1" {...machine.getItemGroupProps(block)}>
-        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+        <span class="block px-2 py-1 type-caption-emphasized text-muted"
           {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
         <template for={machine.getRows(block)} as={row} key={row.value}>
           <div
-            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
             {...machine.getItemProps(row)}
           >
             <span class="min-w-0 flex-1 truncate"
               {...machine.getItemTextProps(row)}>{row.label}</span>
             <span
               aria-hidden="true"
-              class="shrink-0 text-xs text-primary"
+              class="shrink-0 type-caption text-primary"
               {...machine.getItemIndicatorProps(row)}
-            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            ><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>
     </template>
-  </div>
+  </panel>
 </div>

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

@@ -0,0 +1,5 @@
+// src/listbox/examples/settings.html
+var settings_default = "<script lang=\"ts\">\nimport { listbox } from \"../listbox.presentation.ts\";\n\nconst machine = listbox({\n  items: [\n    { \"value\": \"dark-theme\", \"label\": \"Dark Theme\", \"group\": \"Appearance\" },\n    { \"value\": \"system-theme\", \"label\": \"System Theme\", \"group\": \"Appearance\" },\n    { \"value\": \"light-theme\", \"label\": \"Light Theme\", \"group\": \"Appearance\" },\n    {\n      \"value\": \"notifications\",\n      \"label\": \"Push Notifications\",\n      \"group\": \"Privacy\",\n    },\n    { \"value\": \"privacy-mode\", \"label\": \"Privacy Mode\", \"group\": \"Privacy\" },\n    {\n      \"value\": \"public-profile\",\n      \"label\": \"Public Profile\",\n      \"group\": \"Account\",\n    },\n    { \"value\": \"two-factor\", \"label\": \"Two-Factor Auth\", \"group\": \"Security\" },\n    { \"value\": \"mobile-sync\", \"label\": \"Mobile Sync\", \"group\": \"Sync\" },\n  ],\n  multiple: true,\n  value: [\"dark-theme\",\"notifications\",\"two-factor\"],\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Settings Preferences</label>\n\n  <span\n    class={[\"block type-body text-muted transition-colors duration-fast ease-decelerate\", { \"hidden\": machine.empty }]}\n    {...machine.getValueTextProps()}\n  >{machine.valueAsString}</span>\n\n  <panel\n    class=\"max-h-60 overflow-y-auto\"\n    {...machine.getContentProps()}\n  >\n    <template for={machine.getBlocks()} as={block} key={block.id}>\n      <div class=\"py-1\" {...machine.getItemGroupProps(block)}>\n        <span class=\"block px-2 py-1 type-caption-emphasized text-muted\"\n          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>\n        <template for={machine.getRows(block)} as={row} key={row.value}>\n          <div\n            class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n            {...machine.getItemProps(row)}\n          >\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span\n              aria-hidden=\"true\"\n              class=\"shrink-0 type-caption text-primary\"\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </template>\n  </panel>\n</div>\n";
+export { settings_default as default };
+
+//# sourceMappingURL=settings.html.js.map

package/dist/listbox/listbox.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface ListboxEvents {
   "SELECTED_ITEMS.SYNC": {};
   "HIGHLIGHTED_VALUE.SET": {
@@ -38,5 +38,4 @@ export interface ListboxEvents {
     metaKey?: boolean;
   };
 }
-export type ListboxEvent = EventUnion<ListboxEvents>;
-//# sourceMappingURL=listbox.events.d.ts.map
+export type ListboxEvent = EventUnion<ListboxEvents>;