@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/select/examples/category.html

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { select } from "../select.presentation.js";
+
+const machine = select({
+  items: [
+    { "value": "react", "label": "React" },
+    { "value": "vue", "label": "Vue" },
+    { "value": "angular", "label": "Angular" },
+    { "value": "svelte", "label": "Svelte" },
+    { "value": "ui-design", "label": "UI Design" },
+    { "value": "ux-design", "label": "UX Design" },
+    { "value": "graphic-design", "label": "Graphic Design" },
+    { "value": "product-management", "label": "Product Management" },
+    { "value": "marketing", "label": "Marketing" },
+    { "value": "sales", "label": "Sales" },
+  ],
+});
+</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 }]}
+    {...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 }]}
+      {...machine.getTriggerProps()}>
+      <span class="min-w-0 flex-1 truncate text-left"
+        {...machine.getValueTextProps()}>
+        <template for={machine.getSelectedRows()} as={row} key={row.value}>
+          <span>{row.label}</span>
+        </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>
+    </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>
+  </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"
+      {...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 }]}
+            {...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>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <select class="sr-only" {...machine.getHiddenSelectProps()}
+    aria-hidden="true"></select>
+</div>

package/dist/select/examples/country.html

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { select } from "../select.presentation.js";
+
+const machine = select({
+  items: [
+    { "value": "us", "label": "United States" },
+    { "value": "uk", "label": "United Kingdom" },
+    { "value": "ca", "label": "Canada" },
+    { "value": "de", "label": "Germany" },
+    { "value": "fr", "label": "France" },
+    { "value": "jp", "label": "Japan" },
+    { "value": "au", "label": "Australia" },
+    { "value": "br", "label": "Brazil" },
+  ],
+});
+</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 }]}
+    {...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 }]}
+      {...machine.getTriggerProps()}>
+      <span class="min-w-0 flex-1 truncate text-left"
+        {...machine.getValueTextProps()}>
+        <template for={machine.getSelectedRows()} as={row} key={row.value}>
+          <span>{row.label}</span>
+        </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>
+    </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>
+  </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"
+      {...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 }]}
+            {...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>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <select class="sr-only" {...machine.getHiddenSelectProps()}
+    aria-hidden="true"></select>
+</div>

package/dist/select/examples/language.html

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { select } from "../select.presentation.js";
+
+const machine = select({
+  items: [
+    { "value": "en", "label": "English" },
+    { "value": "es", "label": "Spanish" },
+    { "value": "fr", "label": "French" },
+    { "value": "de", "label": "German" },
+    { "value": "it", "label": "Italian" },
+    { "value": "pt", "label": "Portuguese" },
+    { "value": "ru", "label": "Russian" },
+    { "value": "ja", "label": "Japanese" },
+    { "value": "ko", "label": "Korean" },
+    { "value": "zh", "label": "Chinese" },
+  ],
+});
+</script>
+<include file="./basic.html" />

package/dist/select/examples/multiple.html

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { select } from "../select.presentation.js";
+
+const machine = select({
+  items: [
+    { "value": "javascript", "label": "JavaScript" },
+    { "value": "typescript", "label": "TypeScript" },
+    { "value": "react", "label": "React" },
+    { "value": "vue", "label": "Vue" },
+    { "value": "nodejs", "label": "Node.js" },
+    { "value": "python", "label": "Python" },
+    { "value": "java", "label": "Java" },
+    { "value": "postgresql", "label": "PostgreSQL" },
+    { "value": "mongodb", "label": "MongoDB" },
+    { "value": "redis", "label": "Redis" },
+  ],
+  multiple: true,
+});
+</script>
+<include file="./basic.html" />

package/dist/select/examples/profile.html

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { select } from "../select.presentation.js";
+
+const machine = select({
+  items: [
+    { "value": "sarah", "label": "Sarah Johnson" },
+    { "value": "michael", "label": "Michael Chen" },
+    { "value": "emily", "label": "Emily Rodriguez" },
+    { "value": "david", "label": "David Kim" },
+    { "value": "lisa", "label": "Lisa Thompson" },
+  ],
+});
+</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 }]}
+    {...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 }]}
+      {...machine.getTriggerProps()}
+    >
+      <span class="min-w-0 flex-1 truncate text-left"
+        {...machine.getValueTextProps()}>
+        <template for={machine.getSelectedRows()} as={row} key={row.value}>
+          <span>{row.label}</span>
+        </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>
+    </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>
+  </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"
+      {...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 }]}
+            {...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>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <select class="sr-only" {...machine.getHiddenSelectProps()}
+    aria-hidden="true"></select>
+</div>

package/dist/select/examples/theme.html

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { select } from "../select.presentation.js";
+
+const machine = select({
+  items: [{ "value": "light", "label": "Light" }, {
+    "value": "dark",
+    "label": "Dark",
+  }, { "value": "system", "label": "System" }],
+});
+</script>
+<include file="./basic.html" />

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { select } from "../select.presentation.js";
+
+const machine = select({
+  items: [
+    { "value": "React", "label": "React" },
+    { "value": "Solid", "label": "Solid" },
+    { "value": "Vue", "label": "Vue" },
+    { "value": "Svelte", "label": "Svelte" },
+  ],
+});
+</script>
+<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 }]}
+      {...machine.getTriggerProps()}>
+      <span class="min-w-0 flex-1 truncate text-left"
+        {...machine.getValueTextProps()}>
+        <template for={machine.getSelectedRows()} as={row} key={row.value}>
+          <span>{row.label}</span>
+        </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>
+    </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>
+
+  <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"
+      {...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 }]}
+            {...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>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <select class="sr-only" {...machine.getHiddenSelectProps()}
+    aria-hidden="true"></select>
+</div>

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

@@ -0,0 +1,59 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface SelectEvents {
+  "SELECTED_ITEMS.SYNC": {};
+  "HIGHLIGHTED_VALUE.SET": {
+    highlightedValue: string | null;
+  };
+  "HIGHLIGHTED_VALUE.CLEAR": {};
+  "ITEM.SELECT": {
+    value: string;
+  };
+  "ITEM.CLEAR": {
+    value: string;
+  };
+  "VALUE.SET": {
+    value: readonly string[];
+  };
+  "VALUE.CLEAR": {};
+  "CLEAR.CLICK": {};
+  "OPEN": {};
+  "CLOSE": {};
+  "TOGGLE": {};
+  "CONTROLLED.OPEN": {};
+  "CONTROLLED.CLOSE": {
+    restoreFocus?: boolean;
+  };
+  "TRIGGER.CLICK": {};
+  "TRIGGER.FOCUS": {};
+  "TRIGGER.BLUR": {};
+  "TRIGGER.ENTER": {};
+  "TRIGGER.ARROW_UP": {};
+  "TRIGGER.ARROW_DOWN": {};
+  "TRIGGER.ARROW_LEFT": {};
+  "TRIGGER.ARROW_RIGHT": {};
+  "TRIGGER.HOME": {};
+  "TRIGGER.END": {};
+  "TRIGGER.TYPEAHEAD": {
+    value: string;
+  };
+  "ITEM.CLICK": {
+    value: string;
+  };
+  "ITEM.POINTER_MOVE": {
+    value: string;
+  };
+  "ITEM.POINTER_LEAVE": {};
+  "CONTENT.HOME": {};
+  "CONTENT.END": {};
+  "CONTENT.ARROW_UP": {};
+  "CONTENT.ARROW_DOWN": {};
+  "CONTENT.TYPEAHEAD": {
+    value: string;
+  };
+  "LAYER.ESCAPE": {};
+  "LAYER.INTERACT_OUTSIDE": {
+    restoreFocus?: boolean;
+  };
+}
+export type SelectEvent = EventUnion<SelectEvents>;
+//# sourceMappingURL=select.events.d.ts.map

package/dist/select/select.events.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import { SelectArgs, SelectContext, SelectRow, SelectState } from "./select.state.js";
+import { SelectEvents } from "./select.events.js";
+import { Machine } from "@spinjs/runtime/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

package/dist/select/select.machine.js

@@ -0,0 +1,203 @@
+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";
+// src/select/select.machine.ts
+function select(args = {}, authored = () => false) {
+	return createMachine({
+		id: "select",
+		initial: "idle",
+		fields: {
+			items: { parse: rowsOf },
+			highlightedValue: { event: "HIGHLIGHTED_VALUE.SET" },
+			closeOnSelect: {},
+			disabled: {},
+			readOnly: {},
+			required: {},
+			invalid: {},
+			dir: {},
+			placement: {},
+			name: {},
+			form: {},
+			clearTriggerLabel: {},
+			multiple: {},
+			loopFocus: {}
+		},
+		context: initial(args, authored),
+		on: {
+			"SELECTED_ITEMS.SYNC": { assign: (ctx) => {
+				const value = ctx.value.filter((candidate) => ctx.order.includes(candidate));
+				const highlighted = (() => {
+					if (ctx.highlightedValue !== null && ctx.order.includes(ctx.highlightedValue)) return ctx.highlightedValue;
+					return value[0] ?? null;
+				})();
+				const sameSelection = value.length === ctx.value.length;
+				const sameHighlight = highlighted === ctx.highlightedValue;
+				if (sameSelection && sameHighlight) return {};
+				return {
+					value,
+					highlightedValue: highlighted
+				};
+			} },
+			"HIGHLIGHTED_VALUE.SET": { assign: setHighlighted },
+			"HIGHLIGHTED_VALUE.CLEAR": { assign: clearHighlighted },
+			"ITEM.SELECT": { assign: (ctx, event) => {
+				if (ctx.multiple) return { value: ctx.value.includes(event.value) ? ctx.value.filter((value) => value !== event.value) : [...ctx.value, event.value] };
+				return { value: [event.value] };
+			} },
+			"ITEM.CLEAR": { assign: clearValue },
+			"VALUE.SET": { assign: (_ctx, event) => ({ value: [...event.value] }) },
+			"VALUE.CLEAR": { assign: clearValue },
+			"CLEAR.CLICK": { assign: () => ({
+				value: [],
+				highlightedValue: null
+			}) }
+		},
+		states: {
+			idle: { on: {
+				"TRIGGER.FOCUS": { target: "focused" },
+				TOGGLE: {
+					target: "open",
+					assign: highlightFirstOrSelected
+				},
+				"TRIGGER.CLICK": {
+					target: "open",
+					assign: highlightFirstOrSelected
+				},
+				OPEN: {
+					target: "open",
+					assign: highlightFirstOrSelected
+				},
+				"CONTROLLED.OPEN": {
+					target: "open",
+					assign: highlightFirstOrSelected
+				}
+			} },
+			focused: { on: {
+				"TRIGGER.BLUR": { target: "idle" },
+				"TRIGGER.CLICK": {
+					target: "open",
+					assign: highlightFirstOrSelected
+				},
+				TOGGLE: {
+					target: "open",
+					assign: highlightFirstOrSelected
+				},
+				OPEN: {
+					target: "open",
+					assign: highlightFirstOrSelected
+				},
+				"CONTROLLED.OPEN": {
+					target: "open",
+					assign: highlightFirstOrSelected
+				},
+				"TRIGGER.ARROW_DOWN": [{
+					target: "open",
+					assign: highlightFirst
+				}],
+				"TRIGGER.ARROW_UP": [{
+					target: "open",
+					assign: highlightLast
+				}],
+				"TRIGGER.ENTER": [{
+					target: "open",
+					assign: highlightFirst
+				}],
+				"TRIGGER.ARROW_RIGHT": [{
+					cond: single,
+					assign: (ctx) => {
+						const at = ctx.value.length === 0 ? -1 : ctx.order.indexOf(ctx.value[0]);
+						const next = ctx.order[at + 1];
+						return next === void 0 ? {} : { value: [next] };
+					}
+				}],
+				"TRIGGER.ARROW_LEFT": [{
+					cond: single,
+					assign: (ctx) => {
+						const at = ctx.value.length === 0 ? ctx.order.length : ctx.order.indexOf(ctx.value[0]);
+						const previous = ctx.order[at - 1];
+						return previous === void 0 ? {} : { value: [previous] };
+					}
+				}],
+				"TRIGGER.HOME": [{
+					cond: single,
+					assign: (ctx) => ({ value: ctx.order.length === 0 ? ctx.value : [ctx.order[0]] })
+				}],
+				"TRIGGER.END": [{
+					cond: single,
+					assign: (ctx) => ({ value: ctx.order.length === 0 ? ctx.value : [ctx.order[ctx.order.length - 1]] })
+				}],
+				"TRIGGER.TYPEAHEAD": [{
+					cond: single,
+					assign: (ctx, event) => {
+						const value = ctx.order.find((candidate) => (ctx.labels[candidate] ?? candidate).toLowerCase().startsWith(event.value.toLowerCase()));
+						return value === void 0 ? {} : { value: [value] };
+					}
+				}]
+			} },
+			open: { on: {
+				"TRIGGER.CLICK": {
+					target: "focused",
+					assign: clearHighlighted
+				},
+				"ITEM.CLICK": [{
+					cond: (ctx) => ctx.closeOnSelect,
+					target: "focused",
+					assign: [selectClicked, clearHighlighted]
+				}, { assign: selectClicked }],
+				CLOSE: [{
+					target: "idle",
+					assign: clearHighlighted
+				}],
+				TOGGLE: [{
+					target: "idle",
+					assign: clearHighlighted
+				}],
+				"CONTROLLED.CLOSE": [{
+					cond: restoreFocus,
+					target: "focused",
+					assign: clearHighlighted
+				}, {
+					target: "idle",
+					assign: clearHighlighted
+				}],
+				"LAYER.ESCAPE": [{
+					target: "focused",
+					assign: clearHighlighted
+				}],
+				"LAYER.INTERACT_OUTSIDE": [{
+					cond: restoreFocus,
+					target: "focused",
+					assign: clearHighlighted
+				}, {
+					target: "idle",
+					assign: clearHighlighted
+				}],
+				"CONTENT.HOME": { assign: highlightFirst },
+				"CONTENT.END": { assign: highlightLast },
+				"CONTENT.ARROW_DOWN": { assign: (ctx) => {
+					const at = ctx.highlightedValue !== null && ctx.order.includes(ctx.highlightedValue) ? ctx.order.indexOf(ctx.highlightedValue) : -1;
+					if (at === -1) return { highlightedValue: ctx.order[0] ?? null };
+					const next = ctx.order[at + 1];
+					if (next === void 0) return ctx.loopFocus ? { highlightedValue: ctx.order[0] ?? null } : {};
+					return { highlightedValue: next };
+				} },
+				"CONTENT.ARROW_UP": { assign: (ctx) => {
+					const at = ctx.highlightedValue !== null && ctx.order.includes(ctx.highlightedValue) ? ctx.order.indexOf(ctx.highlightedValue) : -1;
+					if (at === -1) return { highlightedValue: ctx.order[ctx.order.length - 1] ?? null };
+					const previous = ctx.order[at - 1];
+					if (previous === void 0) return ctx.loopFocus ? { highlightedValue: ctx.order[ctx.order.length - 1] ?? null } : {};
+					return { highlightedValue: previous };
+				} },
+				"CONTENT.TYPEAHEAD": { assign: (ctx, event) => {
+					const value = ctx.order.find((candidate) => (ctx.labels[candidate] ?? candidate).toLowerCase().startsWith(event.value.toLowerCase()));
+					return value === void 0 ? {} : { highlightedValue: value };
+				} },
+				"ITEM.POINTER_MOVE": { assign: setHighlighted },
+				"ITEM.POINTER_LEAVE": { assign: clearHighlighted }
+			} }
+		}
+	});
+}
+export { select };
+
+//# sourceMappingURL=select.machine.js.map