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

package/dist/select/examples/basic.html

@@ -12,12 +12,12 @@ const machine = select({
 </script>
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Fruit</label>
 
   <div class="flex items-center gap-1" {...machine.getControlProps()}>
     <button
-      class={["flex h-7 min-w-0 flex-1 items-center gap-2 secondary s-sm transition-colors duration-fast ease-decelerate hover:bg-surface", { "bg-surface": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
+      class={["bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised", { "bg-surface-raised border-strong": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
       {...machine.getTriggerProps()}
     >
       <span class="min-w-0 flex-1 truncate text-left"
@@ -28,16 +28,16 @@ const machine = select({
       </span>
       <span
         aria-hidden="true"
-        class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
+        class={["shrink-0 text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
         {...machine.getTriggerIndicatorProps()}
-      ><span class="i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+      ><span class="i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
     <button
       aria-hidden="true"
       tabindex="-1"
-      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-text-muted transition-colors duration-fast ease-decelerate hover:bg-surface hover:text-text"
+      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-muted transition-colors duration-fast ease-decelerate hover:bg-surface"
       {...machine.getClearTriggerProps()}
-    ><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+    ><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
   </div>
 
   <div
@@ -51,16 +51,16 @@ const machine = select({
       <panel-list role="group" {...machine.getListProps()}>
         <template for={machine.getRows()} as={row} key={row.value}>
           <div
-            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "font-medium": machine.getItemState(row).selected }]}
+            class="flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate"
             {...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 opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
+              class={["shrink-0 text-primary opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
               {...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>
       </panel-list>

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

@@ -0,0 +1,5 @@
+// src/select/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { select } from \"../select.presentation.ts\";\n\nconst machine = select({\n  items: [\n    { \"value\": \"apple\", \"label\": \"Apple\" },\n    { \"value\": \"banana\", \"label\": \"Banana\" },\n    { \"value\": \"cherry\", \"label\": \"Cherry\" },\n    { \"value\": \"date\", \"label\": \"Date\" },\n  ],\n});\n<\/script>\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Fruit</label>\n\n  <div class=\"flex items-center gap-1\" {...machine.getControlProps()}>\n    <button\n      class={[\"bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised\", { \"bg-surface-raised border-strong\": machine.open, \"ring-2 ring-border-strong\": machine.focused, \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n      {...machine.getTriggerProps()}\n    >\n      <span class=\"min-w-0 flex-1 truncate text-left\"\n        {...machine.getValueTextProps()}>\n        <template for={machine.getSelectedRows()} as={row} key={row.value}>\n          <span>{row.label}</span>\n        </template>\n      </span>\n      <span\n        aria-hidden=\"true\"\n        class={[\"shrink-0 text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]}\n        {...machine.getTriggerIndicatorProps()}\n      ><span class=\"i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n    <button\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      class=\"flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-muted transition-colors duration-fast ease-decelerate hover:bg-surface\"\n      {...machine.getClearTriggerProps()}\n    ><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n  </div>\n\n  <div\n    class={[\"absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n    {...machine.getPositionerProps()}\n  >\n    <panel\n      class=\"max-h-56 overflow-y-auto overscroll-contain\"\n      {...machine.getContentProps()}\n    >\n      <panel-list role=\"group\" {...machine.getListProps()}>\n        <template for={machine.getRows()} as={row} key={row.value}>\n          <div\n            class=\"flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\"\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 text-primary opacity-0 transition-opacity duration-fast ease-decelerate\", { \"opacity-100\": machine.getItemState(row).selected }]}\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </panel-list>\n    </panel>\n  </div>\n\n  <select class=\"sr-only\" {...machine.getHiddenSelectProps()}\n    aria-hidden=\"true\"></select>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/select/examples/category.html

@@ -18,12 +18,12 @@ const machine = select({
 </script>
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Category</label>
 
   <div class="flex items-center gap-1" {...machine.getControlProps()}>
     <button
-      class={["flex h-7 min-w-0 flex-1 items-center gap-2 secondary s-sm transition-colors duration-fast ease-decelerate hover:bg-surface", { "bg-surface": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
+      class={["bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised", { "bg-surface-raised border-strong": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
       {...machine.getTriggerProps()}>
       <span class="min-w-0 flex-1 truncate text-left"
         {...machine.getValueTextProps()}>
@@ -32,30 +32,30 @@ const machine = select({
         </template>
       </span>
       <span aria-hidden="true"
-        class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
-        {...machine.getTriggerIndicatorProps()}><span class="i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+        class={["shrink-0 text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
+        {...machine.getTriggerIndicatorProps()}><span class="i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
     <button aria-hidden="true" tabindex="-1"
-      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-text-muted transition-colors duration-fast ease-decelerate hover:bg-surface hover:text-text"
-      {...machine.getClearTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-muted transition-colors duration-fast ease-decelerate hover:bg-surface"
+      {...machine.getClearTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
   </div>
 
   <div
     class={["absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]}
     {...machine.getPositionerProps()}>
     <div
-      class="max-h-56 overflow-y-auto overscroll-contain rounded-lg border border-solid border-border bg-surface-raised p-1 shadow-lg"
+      class="max-h-56 overflow-y-auto overscroll-contain rounded-lg border bg-surface-raised p-1 shadow-lg"
       {...machine.getContentProps()}>
       <div role="group" class="flex flex-col p-1" {...machine.getListProps()}>
         <template for={machine.getRows()} as={row} key={row.value}>
           <div
-            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "bg-surface": machine.getItemState(row).highlighted, "font-medium": machine.getItemState(row).selected, "opacity-50 pointer-events-none": machine.getItemState(row).disabled }]}
+            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate", { "bg-surface": machine.getItemState(row).highlighted, "opacity-50 pointer-events-none": machine.getItemState(row).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 opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
-              {...machine.getItemIndicatorProps(row)}><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+              class={["shrink-0 text-primary opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
+              {...machine.getItemIndicatorProps(row)}><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>

package/dist/select/examples/category.html.js

@@ -0,0 +1,5 @@
+// src/select/examples/category.html
+var category_default = "<script lang=\"ts\">\nimport { select } from \"../select.presentation.ts\";\n\nconst machine = select({\n  items: [\n    { \"value\": \"react\", \"label\": \"React\" },\n    { \"value\": \"vue\", \"label\": \"Vue\" },\n    { \"value\": \"angular\", \"label\": \"Angular\" },\n    { \"value\": \"svelte\", \"label\": \"Svelte\" },\n    { \"value\": \"ui-design\", \"label\": \"UI Design\" },\n    { \"value\": \"ux-design\", \"label\": \"UX Design\" },\n    { \"value\": \"graphic-design\", \"label\": \"Graphic Design\" },\n    { \"value\": \"product-management\", \"label\": \"Product Management\" },\n    { \"value\": \"marketing\", \"label\": \"Marketing\" },\n    { \"value\": \"sales\", \"label\": \"Sales\" },\n  ],\n});\n<\/script>\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Category</label>\n\n  <div class=\"flex items-center gap-1\" {...machine.getControlProps()}>\n    <button\n      class={[\"bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised\", { \"bg-surface-raised border-strong\": machine.open, \"ring-2 ring-border-strong\": machine.focused, \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n      {...machine.getTriggerProps()}>\n      <span class=\"min-w-0 flex-1 truncate text-left\"\n        {...machine.getValueTextProps()}>\n        <template for={machine.getSelectedRows()} as={row} key={row.value}>\n          <span>{row.label}</span>\n        </template>\n      </span>\n      <span aria-hidden=\"true\"\n        class={[\"shrink-0 text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]}\n        {...machine.getTriggerIndicatorProps()}><span class=\"i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n    <button aria-hidden=\"true\" tabindex=\"-1\"\n      class=\"flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-muted transition-colors duration-fast ease-decelerate hover:bg-surface\"\n      {...machine.getClearTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n  </div>\n\n  <div\n    class={[\"absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n    {...machine.getPositionerProps()}>\n    <div\n      class=\"max-h-56 overflow-y-auto overscroll-contain rounded-lg border bg-surface-raised p-1 shadow-lg\"\n      {...machine.getContentProps()}>\n      <div role=\"group\" class=\"flex flex-col p-1\" {...machine.getListProps()}>\n        <template for={machine.getRows()} as={row} key={row.value}>\n          <div\n            class={[\"flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\", { \"bg-surface\": machine.getItemState(row).highlighted, \"opacity-50 pointer-events-none\": machine.getItemState(row).disabled }]}\n            {...machine.getItemProps(row)}>\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span aria-hidden=\"true\"\n              class={[\"shrink-0 text-primary opacity-0 transition-opacity duration-fast ease-decelerate\", { \"opacity-100\": machine.getItemState(row).selected }]}\n              {...machine.getItemIndicatorProps(row)}><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n\n  <select class=\"sr-only\" {...machine.getHiddenSelectProps()}\n    aria-hidden=\"true\"></select>\n</div>\n";
+export { category_default as default };
+
+//# sourceMappingURL=category.html.js.map

package/dist/select/examples/country.html

@@ -16,12 +16,12 @@ const machine = select({
 </script>
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Country</label>
 
   <div class="flex items-center gap-1" {...machine.getControlProps()}>
     <button
-      class={["flex h-7 min-w-0 flex-1 items-center gap-2 secondary s-sm transition-colors duration-fast ease-decelerate hover:bg-surface", { "bg-surface": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
+      class={["bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised", { "bg-surface-raised border-strong": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
       {...machine.getTriggerProps()}>
       <span class="min-w-0 flex-1 truncate text-left"
         {...machine.getValueTextProps()}>
@@ -30,30 +30,30 @@ const machine = select({
         </template>
       </span>
       <span aria-hidden="true"
-        class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
-        {...machine.getTriggerIndicatorProps()}><span class="i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+        class={["shrink-0 text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
+        {...machine.getTriggerIndicatorProps()}><span class="i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
     <button aria-hidden="true" tabindex="-1"
-      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-text-muted transition-colors duration-fast ease-decelerate hover:bg-surface hover:text-text"
-      {...machine.getClearTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-muted transition-colors duration-fast ease-decelerate hover:bg-surface"
+      {...machine.getClearTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
   </div>
 
   <div
     class={["absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]}
     {...machine.getPositionerProps()}>
     <div
-      class="max-h-56 overflow-y-auto overscroll-contain rounded-lg border border-solid border-border bg-surface-raised p-1 shadow-lg"
+      class="max-h-56 overflow-y-auto overscroll-contain rounded-lg border bg-surface-raised p-1 shadow-lg"
       {...machine.getContentProps()}>
       <div role="group" class="flex flex-col p-1" {...machine.getListProps()}>
         <template for={machine.getRows()} as={row} key={row.value}>
           <div
-            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "bg-surface": machine.getItemState(row).highlighted, "font-medium": machine.getItemState(row).selected, "opacity-50 pointer-events-none": machine.getItemState(row).disabled }]}
+            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate", { "bg-surface": machine.getItemState(row).highlighted, "opacity-50 pointer-events-none": machine.getItemState(row).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 opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
-              {...machine.getItemIndicatorProps(row)}><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+              class={["shrink-0 text-primary opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
+              {...machine.getItemIndicatorProps(row)}><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>

package/dist/select/examples/country.html.js

@@ -0,0 +1,5 @@
+// src/select/examples/country.html
+var country_default = "<script lang=\"ts\">\nimport { select } from \"../select.presentation.ts\";\n\nconst machine = select({\n  items: [\n    { \"value\": \"us\", \"label\": \"United States\" },\n    { \"value\": \"uk\", \"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  ],\n});\n<\/script>\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Country</label>\n\n  <div class=\"flex items-center gap-1\" {...machine.getControlProps()}>\n    <button\n      class={[\"bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised\", { \"bg-surface-raised border-strong\": machine.open, \"ring-2 ring-border-strong\": machine.focused, \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n      {...machine.getTriggerProps()}>\n      <span class=\"min-w-0 flex-1 truncate text-left\"\n        {...machine.getValueTextProps()}>\n        <template for={machine.getSelectedRows()} as={row} key={row.value}>\n          <span>{row.label}</span>\n        </template>\n      </span>\n      <span aria-hidden=\"true\"\n        class={[\"shrink-0 text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]}\n        {...machine.getTriggerIndicatorProps()}><span class=\"i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n    <button aria-hidden=\"true\" tabindex=\"-1\"\n      class=\"flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-muted transition-colors duration-fast ease-decelerate hover:bg-surface\"\n      {...machine.getClearTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n  </div>\n\n  <div\n    class={[\"absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n    {...machine.getPositionerProps()}>\n    <div\n      class=\"max-h-56 overflow-y-auto overscroll-contain rounded-lg border bg-surface-raised p-1 shadow-lg\"\n      {...machine.getContentProps()}>\n      <div role=\"group\" class=\"flex flex-col p-1\" {...machine.getListProps()}>\n        <template for={machine.getRows()} as={row} key={row.value}>\n          <div\n            class={[\"flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\", { \"bg-surface\": machine.getItemState(row).highlighted, \"opacity-50 pointer-events-none\": machine.getItemState(row).disabled }]}\n            {...machine.getItemProps(row)}>\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span aria-hidden=\"true\"\n              class={[\"shrink-0 text-primary opacity-0 transition-opacity duration-fast ease-decelerate\", { \"opacity-100\": machine.getItemState(row).selected }]}\n              {...machine.getItemIndicatorProps(row)}><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n\n  <select class=\"sr-only\" {...machine.getHiddenSelectProps()}\n    aria-hidden=\"true\"></select>\n</div>\n";
+export { country_default as default };
+
+//# sourceMappingURL=country.html.js.map

package/dist/select/examples/language.html.js

@@ -0,0 +1,5 @@
+// src/select/examples/language.html
+var language_default = "<script lang=\"ts\">\nimport { select } from \"../select.presentation.ts\";\n\nconst machine = select({\n  items: [\n    { \"value\": \"en\", \"label\": \"English\" },\n    { \"value\": \"es\", \"label\": \"Spanish\" },\n    { \"value\": \"fr\", \"label\": \"French\" },\n    { \"value\": \"de\", \"label\": \"German\" },\n    { \"value\": \"it\", \"label\": \"Italian\" },\n    { \"value\": \"pt\", \"label\": \"Portuguese\" },\n    { \"value\": \"ru\", \"label\": \"Russian\" },\n    { \"value\": \"ja\", \"label\": \"Japanese\" },\n    { \"value\": \"ko\", \"label\": \"Korean\" },\n    { \"value\": \"zh\", \"label\": \"Chinese\" },\n  ],\n});\n<\/script>\n<include file=\"./basic.html\" />\n";
+export { language_default as default };
+
+//# sourceMappingURL=language.html.js.map

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

@@ -0,0 +1,5 @@
+// src/select/examples/multiple.html
+var multiple_default = "<script lang=\"ts\">\nimport { select } from \"../select.presentation.ts\";\n\nconst machine = select({\n  items: [\n    { \"value\": \"javascript\", \"label\": \"JavaScript\" },\n    { \"value\": \"typescript\", \"label\": \"TypeScript\" },\n    { \"value\": \"react\", \"label\": \"React\" },\n    { \"value\": \"vue\", \"label\": \"Vue\" },\n    { \"value\": \"nodejs\", \"label\": \"Node.js\" },\n    { \"value\": \"python\", \"label\": \"Python\" },\n    { \"value\": \"java\", \"label\": \"Java\" },\n    { \"value\": \"postgresql\", \"label\": \"PostgreSQL\" },\n    { \"value\": \"mongodb\", \"label\": \"MongoDB\" },\n    { \"value\": \"redis\", \"label\": \"Redis\" },\n  ],\n  multiple: true,\n});\n<\/script>\n<include file=\"./basic.html\" />\n";
+export { multiple_default as default };
+
+//# sourceMappingURL=multiple.html.js.map

package/dist/select/examples/profile.html

@@ -13,12 +13,12 @@ const machine = select({
 </script>
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getLabelProps()}>Assign to</label>
 
   <div class="flex items-center gap-1" {...machine.getControlProps()}>
     <button
-      class={["flex h-7 min-w-0 flex-1 items-center gap-2 secondary s-sm transition-colors duration-fast ease-decelerate hover:bg-surface", { "bg-surface": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
+      class={["bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised", { "bg-surface-raised border-strong": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
       {...machine.getTriggerProps()}
     >
       <span class="min-w-0 flex-1 truncate text-left"
@@ -29,16 +29,16 @@ const machine = select({
       </span>
       <span
         aria-hidden="true"
-        class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
+        class={["shrink-0 text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
         {...machine.getTriggerIndicatorProps()}
-      ><span class="i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+      ><span class="i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
     <button
       aria-hidden="true"
       tabindex="-1"
-      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-text-muted transition-colors duration-fast ease-decelerate hover:bg-surface hover:text-text"
+      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-muted transition-colors duration-fast ease-decelerate hover:bg-surface"
       {...machine.getClearTriggerProps()}
-    ><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+    ><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
   </div>
 
   <div
@@ -46,22 +46,22 @@ const machine = select({
     {...machine.getPositionerProps()}
   >
     <div
-      class="max-h-56 overflow-y-auto overscroll-contain rounded-lg border border-solid border-border bg-surface-raised p-1 shadow-lg"
+      class="max-h-56 overflow-y-auto overscroll-contain rounded-lg border bg-surface-raised p-1 shadow-lg"
       {...machine.getContentProps()}
     >
       <div role="group" class="flex flex-col p-1" {...machine.getListProps()}>
         <template for={machine.getRows()} as={row} key={row.value}>
           <div
-            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "bg-surface": machine.getItemState(row).highlighted, "font-medium": machine.getItemState(row).selected, "opacity-50 pointer-events-none": machine.getItemState(row).disabled }]}
+            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate", { "bg-surface": machine.getItemState(row).highlighted, "opacity-50 pointer-events-none": machine.getItemState(row).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 opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
+              class={["shrink-0 text-primary opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
               {...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>

package/dist/select/examples/profile.html.js

@@ -0,0 +1,5 @@
+// src/select/examples/profile.html
+var profile_default = "<script lang=\"ts\">\nimport { select } from \"../select.presentation.ts\";\n\nconst machine = select({\n  items: [\n    { \"value\": \"sarah\", \"label\": \"Sarah Johnson\" },\n    { \"value\": \"michael\", \"label\": \"Michael Chen\" },\n    { \"value\": \"emily\", \"label\": \"Emily Rodriguez\" },\n    { \"value\": \"david\", \"label\": \"David Kim\" },\n    { \"value\": \"lisa\", \"label\": \"Lisa Thompson\" },\n  ],\n});\n<\/script>\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getLabelProps()}>Assign to</label>\n\n  <div class=\"flex items-center gap-1\" {...machine.getControlProps()}>\n    <button\n      class={[\"bare flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised\", { \"bg-surface-raised border-strong\": machine.open, \"ring-2 ring-border-strong\": machine.focused, \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n      {...machine.getTriggerProps()}\n    >\n      <span class=\"min-w-0 flex-1 truncate text-left\"\n        {...machine.getValueTextProps()}>\n        <template for={machine.getSelectedRows()} as={row} key={row.value}>\n          <span>{row.label}</span>\n        </template>\n      </span>\n      <span\n        aria-hidden=\"true\"\n        class={[\"shrink-0 text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]}\n        {...machine.getTriggerIndicatorProps()}\n      ><span class=\"i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n    <button\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      class=\"flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-muted transition-colors duration-fast ease-decelerate hover:bg-surface\"\n      {...machine.getClearTriggerProps()}\n    ><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n  </div>\n\n  <div\n    class={[\"absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n    {...machine.getPositionerProps()}\n  >\n    <div\n      class=\"max-h-56 overflow-y-auto overscroll-contain rounded-lg border bg-surface-raised p-1 shadow-lg\"\n      {...machine.getContentProps()}\n    >\n      <div role=\"group\" class=\"flex flex-col p-1\" {...machine.getListProps()}>\n        <template for={machine.getRows()} as={row} key={row.value}>\n          <div\n            class={[\"flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\", { \"bg-surface\": machine.getItemState(row).highlighted, \"opacity-50 pointer-events-none\": machine.getItemState(row).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 text-primary opacity-0 transition-opacity duration-fast ease-decelerate\", { \"opacity-100\": machine.getItemState(row).selected }]}\n              {...machine.getItemIndicatorProps(row)}\n            ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n\n  <select class=\"sr-only\" {...machine.getHiddenSelectProps()}\n    aria-hidden=\"true\"></select>\n</div>\n";
+export { profile_default as default };
+
+//# sourceMappingURL=profile.html.js.map

package/dist/select/examples/theme.html.js

@@ -0,0 +1,5 @@
+// src/select/examples/theme.html
+var theme_default = "<script lang=\"ts\">\nimport { select } from \"../select.presentation.ts\";\n\nconst machine = select({\n  items: [{ \"value\": \"light\", \"label\": \"Light\" }, {\n    \"value\": \"dark\",\n    \"label\": \"Dark\",\n  }, { \"value\": \"system\", \"label\": \"System\" }],\n});\n<\/script>\n<include file=\"./basic.html\" />\n";
+export { theme_default as default };
+
+//# sourceMappingURL=theme.html.js.map

package/dist/select/examples/with-overlapping-label.html

@@ -13,7 +13,7 @@ const machine = select({
 <div class="relative w-64 max-w-full" {...machine.getRootProps()}>
   <div class="flex items-center gap-1" {...machine.getControlProps()}>
     <button
-      class={["flex h-10 min-w-0 flex-1 items-center gap-2 secondary s-sm transition-colors duration-fast ease-decelerate hover:bg-surface", { "bg-surface": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
+      class={["bare flex h-10 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised", { "bg-surface-raised border-strong": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
       {...machine.getTriggerProps()}>
       <span class="min-w-0 flex-1 truncate text-left"
         {...machine.getValueTextProps()}>
@@ -22,30 +22,30 @@ const machine = select({
         </template>
       </span>
       <span aria-hidden="true"
-        class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
-        {...machine.getTriggerIndicatorProps()}><span class="i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+        class={["shrink-0 text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
+        {...machine.getTriggerIndicatorProps()}><span class="i-lucide-chevron-down type-caption" aria-hidden="true"></span></span>
     </button>
   </div>
 
   <div
-    class="absolute left-2 top-0 text-sm text-text-muted pointer-events-none px-1 bg-surface-raised">Select with overlapping label</div>
+    class="absolute left-2 top-0 type-body text-muted pointer-events-none px-1 bg-surface-raised">Select with overlapping label</div>
 
   <div
     class={["absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]}
     {...machine.getPositionerProps()}>
     <div
-      class="max-h-56 overflow-y-auto overscroll-contain rounded-lg border border-solid border-border bg-surface-raised p-1 shadow-lg"
+      class="max-h-56 overflow-y-auto overscroll-contain rounded-lg border bg-surface-raised p-1 shadow-lg"
       {...machine.getContentProps()}>
       <div role="group" class="flex flex-col p-1" {...machine.getListProps()}>
         <template for={machine.getRows()} as={row} key={row.value}>
           <div
-            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "bg-surface": machine.getItemState(row).highlighted, "font-medium": machine.getItemState(row).selected, "opacity-50 pointer-events-none": machine.getItemState(row).disabled }]}
+            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate", { "bg-surface": machine.getItemState(row).highlighted, "opacity-50 pointer-events-none": machine.getItemState(row).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 opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
-              {...machine.getItemIndicatorProps(row)}><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+              class={["shrink-0 text-primary opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
+              {...machine.getItemIndicatorProps(row)}><span class="i-lucide-check type-caption" aria-hidden="true"></span></span>
           </div>
         </template>
       </div>

package/dist/select/examples/with-overlapping-label.html.js

@@ -0,0 +1,5 @@
+// src/select/examples/with-overlapping-label.html
+var with_overlapping_label_default = "<script lang=\"ts\">\nimport { select } from \"../select.presentation.ts\";\n\nconst machine = select({\n  items: [\n    { \"value\": \"React\", \"label\": \"React\" },\n    { \"value\": \"Solid\", \"label\": \"Solid\" },\n    { \"value\": \"Vue\", \"label\": \"Vue\" },\n    { \"value\": \"Svelte\", \"label\": \"Svelte\" },\n  ],\n});\n<\/script>\n<div class=\"relative w-64 max-w-full\" {...machine.getRootProps()}>\n  <div class=\"flex items-center gap-1\" {...machine.getControlProps()}>\n    <button\n      class={[\"bare flex h-10 min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface px-3 type-label transition-colors duration-fast ease-decelerate hover:bg-surface-raised\", { \"bg-surface-raised border-strong\": machine.open, \"ring-2 ring-border-strong\": machine.focused, \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n      {...machine.getTriggerProps()}>\n      <span class=\"min-w-0 flex-1 truncate text-left\"\n        {...machine.getValueTextProps()}>\n        <template for={machine.getSelectedRows()} as={row} key={row.value}>\n          <span>{row.label}</span>\n        </template>\n      </span>\n      <span aria-hidden=\"true\"\n        class={[\"shrink-0 text-muted transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.open }]}\n        {...machine.getTriggerIndicatorProps()}><span class=\"i-lucide-chevron-down type-caption\" aria-hidden=\"true\"></span></span>\n    </button>\n  </div>\n\n  <div\n    class=\"absolute left-2 top-0 type-body text-muted pointer-events-none px-1 bg-surface-raised\">Select with overlapping label</div>\n\n  <div\n    class={[\"absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n    {...machine.getPositionerProps()}>\n    <div\n      class=\"max-h-56 overflow-y-auto overscroll-contain rounded-lg border bg-surface-raised p-1 shadow-lg\"\n      {...machine.getContentProps()}>\n      <div role=\"group\" class=\"flex flex-col p-1\" {...machine.getListProps()}>\n        <template for={machine.getRows()} as={row} key={row.value}>\n          <div\n            class={[\"flex cursor-default items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\", { \"bg-surface\": machine.getItemState(row).highlighted, \"opacity-50 pointer-events-none\": machine.getItemState(row).disabled }]}\n            {...machine.getItemProps(row)}>\n            <span class=\"min-w-0 flex-1 truncate\"\n              {...machine.getItemTextProps(row)}>{row.label}</span>\n            <span aria-hidden=\"true\"\n              class={[\"shrink-0 text-primary opacity-0 transition-opacity duration-fast ease-decelerate\", { \"opacity-100\": machine.getItemState(row).selected }]}\n              {...machine.getItemIndicatorProps(row)}><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n\n  <select class=\"sr-only\" {...machine.getHiddenSelectProps()}\n    aria-hidden=\"true\"></select>\n</div>\n";
+export { with_overlapping_label_default as default };
+
+//# sourceMappingURL=with-overlapping-label.html.js.map

package/dist/select/select.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface SelectEvents {
   "SELECTED_ITEMS.SYNC": {};
   "HIGHLIGHTED_VALUE.SET": {
@@ -55,5 +55,4 @@ export interface SelectEvents {
     restoreFocus?: boolean;
   };
 }
-export type SelectEvent = EventUnion<SelectEvents>;
-//# sourceMappingURL=select.events.d.ts.map
+export type SelectEvent = EventUnion<SelectEvents>;

package/dist/select/select.machine.d.ts

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

package/dist/select/select.machine.js

@@ -1,6 +1,6 @@
 import { initial, rowsOf } from "./select.state.js";
 import { clearHighlighted, clearValue, highlightFirst, highlightFirstOrSelected, highlightLast, restoreFocus, selectClicked, setHighlighted, single } from "./select.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/select/select.machine.ts
 function select(args = {}, authored = () => false) {
 	return createMachine({

package/dist/select/select.presentation.d.ts

@@ -1,6 +1,6 @@
 import { SelectArgs, SelectContext, SelectRow, SelectState } from "./select.state.js";
 import { SelectEvents } from "./select.events.js";
-import { ApiOf, SlotViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor } from "@spinjs/components/runtime";
 /** Select definition: the DOM contract as data. */
 export interface SelectItemState {
   readonly selected: boolean;
@@ -26,12 +26,9 @@ export interface SelectSelect {
 type SlotLike<R> = SlotViewFor<R, SelectContext, SelectEvents, SelectState>;
 export declare const def: {
   name: string;
-  machine: (args: SelectArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<SelectContext, SelectEvents, SelectState>;
+  machine: (args: SelectArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<SelectContext, SelectEvents, SelectState>;
   start: (props: Record<string, unknown>, authored: (name: string) => boolean) => "idle" | "open";
-  settled: ({ event, before, after, focus }: {
-    readonly event: {
-      readonly type: string;
-    } & Record<string, unknown>;
+  settled: ({ before, after, focus }: {
     readonly before: {
       readonly state: string;
     };
@@ -49,7 +46,7 @@ export declare const def: {
   }) => boolean;
   parts: {
     root: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         dir: string;
         "data-state": string;
         "data-focus": string | undefined;
@@ -61,7 +58,7 @@ export declare const def: {
       };
     };
     label: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         dir: string;
         for: string;
         "data-state": string;
@@ -69,14 +66,14 @@ export declare const def: {
       };
     };
     control: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         dir: string;
         "data-state": string;
         "data-disabled": string | undefined;
       };
     };
     trigger: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         disabled: boolean;
         "data-state": string;
         "data-focus": string | undefined;
@@ -94,13 +91,13 @@ export declare const def: {
       };
     };
     triggerIndicator: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         "data-state": string;
         "data-disabled": string | undefined;
       };
     };
     clearTrigger: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         type: string;
         tabIndex: number;
         "aria-label": string | undefined;
@@ -111,12 +108,12 @@ export declare const def: {
     };
     valueText: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         "data-placeholder": string | undefined;
       };
     };
     positioner: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         dir: string;
         "data-state": string;
         hidden: boolean;
@@ -124,7 +121,7 @@ export declare const def: {
       };
     };
     content: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         "data-activedescendant": string | undefined;
         hidden: boolean;
         tabIndex: number;
@@ -145,7 +142,7 @@ export declare const def: {
       };
     };
     list: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         dir: string;
         role: string;
         "data-state": string;
@@ -153,7 +150,7 @@ export declare const def: {
     };
     hiddenSelect: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SelectEvents>, SelectState>) => {
         tabIndex: number;
         name: string | undefined;
         form: string | undefined;
@@ -353,6 +350,5 @@ export declare const def: {
   };
 };
 export type SelectApi = ApiOf<typeof def>;
-export declare const select: import("@spinjs/runtime").DefinedComponent<SelectApi, SelectArgs>;
-export type { SelectRow };
-//# sourceMappingURL=select.presentation.d.ts.map
+export declare const select: import("@spinjs/components/runtime").DefinedComponent<SelectApi, SelectArgs>;
+export type { SelectRow };

package/dist/select/select.presentation.js

@@ -1,7 +1,7 @@
 import { dataAttr as dataAttr$1 } from "./select.shared.js";
-import { selectLabel } from "./select.state.js";
 import { select as select$1 } from "./select.machine.js";
-import { ariaFlag, ariaHidden, ariaInvalid, ariaLabelledBy, ariaRequired, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/runtime";
+import { selectLabel } from "./select.state.js";
+import { ariaFlag, ariaHidden, ariaInvalid, ariaLabelledBy, ariaRequired, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/components/runtime";
 // src/select/select.presentation.ts
 const sameKeys = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
 /** Why the panel opened or closed: the prop channel carries no `src`, so
@@ -43,7 +43,7 @@ const resolveKey = (event, dir) => {
 	if (event.key === "ArrowRight") return "ArrowLeft";
 	return event.key;
 };
-const isComposing$1 = (event) => event.isComposing === true || event.keyCode === 229;
+const isComposing = (event) => event.isComposing === true || event.keyCode === 229;
 const rowHandlersByBridge = /* @__PURE__ */ new WeakMap();
 const rowHandlers = (scope, row) => {
 	let byRow = rowHandlersByBridge.get(scope.send);
@@ -81,7 +81,7 @@ const itemStateOf = (scope, row) => ({
 	disabled: row.disabled === true
 });
 const onTriggerKeydown = (scope, event) => {
-	if (isComposing$1(event) || event.defaultPrevented) return;
+	if (isComposing(event) || event.defaultPrevented) return;
 	if (scope.context.disabled === true || scope.context.readOnly === true) return;
 	const dir = scope.context.dir;
 	const key = resolveKey(event, typeof dir === "string" ? dir : "ltr");
@@ -126,7 +126,7 @@ const onTriggerKeydown = (scope, event) => {
 	}
 };
 const onContentKeydown = (scope, event) => {
-	if (isComposing$1(event) || event.defaultPrevented) return;
+	if (isComposing(event) || event.defaultPrevented) return;
 	if (scope.context.disabled === true || scope.context.readOnly === true) return;
 	const dir = scope.context.dir;
 	const key = resolveKey(event, typeof dir === "string" ? dir : "ltr");
@@ -169,7 +169,7 @@ const def = {
 		if (authored("open")) return props["open"] === true ? "open" : "idle";
 		return props["defaultOpen"] === true ? "open" : "idle";
 	},
-	settled: ({ event, before, after, focus }) => {
+	settled: ({ before, after, focus }) => {
 		if (before.state === "open" && after.state === "focused") focus("trigger");
 	},
 	reconcile: ({ context, parsed, send }) => {

package/dist/select/select.shared.d.ts

@@ -4,5 +4,4 @@
  */
 /** The `dataAttr` helper: the attribute is present when the condition holds
  * and absent otherwise, which is what `hidden`-style utilities key on. */
-export declare function dataAttr(value: boolean): string | undefined;
-//# sourceMappingURL=select.shared.d.ts.map
+export declare function dataAttr(value: boolean): string | undefined;