@krelborn/stylesui 0.8.1 → 0.9.0

package/dist/components/Accordion/useFragmentTargetReveal.d.ts

@@ -0,0 +1,27 @@
+import type { RefObject } from "react";
+interface FragmentTargetRevealOptions {
+    /**
+     * Whether the panel is closed and can be found, so the fragment's target may open it
+     */
+    findable: boolean;
+    /**
+     * Called when the page's URL fragment points inside the panel as it mounts
+     */
+    onMatch: () => void;
+    /**
+     * Whether the item is open
+     */
+    open: boolean;
+    /**
+     * The panel element
+     */
+    panelRef: RefObject<HTMLElement | null>;
+}
+/**
+ * Opens a closed panel when, as it mounts, the page's URL fragment points at an element inside it, and scrolls that
+ * element into view once the panel has opened
+ *
+ * @param options the panel, its state and what to do on a match
+ */
+export declare function useFragmentTargetReveal({ findable, onMatch, open, panelRef }: FragmentTargetRevealOptions): void;
+export {};

package/dist/components/Accordion/useFragmentTargetReveal.js

@@ -0,0 +1,36 @@
+import { useEffect as e, useLayoutEffect as t, useRef as n } from "react";
+import { c as r } from "react/compiler-runtime";
+// src/components/Accordion/useFragmentTargetReveal.ts
+function i(i) {
+	let o = r(8), { findable: s, onMatch: c, open: l, panelRef: u } = i, d = n(!1), f = n(null), p, m;
+	o[0] !== s || o[1] !== c || o[2] !== u ? (p = () => {
+		if (d.current) return;
+		d.current = !0;
+		let e = a();
+		s && e !== null && u.current?.contains(e) === !0 && (f.current = e, c());
+	}, m = [
+		s,
+		c,
+		u
+	], o[0] = s, o[1] = c, o[2] = u, o[3] = p, o[4] = m) : (p = o[3], m = o[4]), t(p, m);
+	let h, g;
+	o[5] === l ? (h = o[6], g = o[7]) : (h = () => {
+		l && f.current !== null && (f.current.scrollIntoView(), f.current = null);
+	}, g = [l], o[5] = l, o[6] = h, o[7] = g), e(h, g);
+}
+function a() {
+	let e = window.location.hash.slice(1);
+	return e === "" ? null : o(e) ?? o(s(e));
+}
+function o(e) {
+	return document.getElementById(e) ?? Array.from(document.getElementsByName(e)).find((e) => e instanceof HTMLAnchorElement) ?? null;
+}
+function s(e) {
+	let t = new TextEncoder().encode(e), n = [];
+	for (let e = 0; e < t.length; e++) {
+		let r = String.fromCharCode(t[e + 1] ?? 0, t[e + 2] ?? 0);
+		t[e] === 37 && /^[\da-f]{2}$/i.test(r) ? (n.push(Number.parseInt(r, 16)), e += 2) : n.push(t[e]);
+	}
+	return new TextDecoder("utf-8", { ignoreBOM: !0 }).decode(new Uint8Array(n));
+}
+export { i as useFragmentTargetReveal };

package/dist/components/Accordion/useHasOpened.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tells whether an item has been open at any time since it mounted
+ *
+ * @param open whether the item is open now
+ * @returns true once the item has opened, including while it is open
+ */
+export declare function useHasOpened(open: boolean): boolean;

package/dist/components/Accordion/useHasOpened.js

@@ -0,0 +1,7 @@
+import { useState as e } from "react";
+// src/components/Accordion/useHasOpened.ts
+function t(t) {
+	let [n, r] = e(t);
+	return t && !n && r(!0), n || t;
+}
+export { t as useHasOpened };

package/dist/components/Alert/Alert.js

@@ -4,7 +4,7 @@ import n from "./Alert.module.js";
 import { AlertIcon as r } from "./AlertIcon.js";
 import { clsx as i } from "clsx";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/Alert/Alert.tsx
+// src/components/Alert/Alert.tsx
 function s({ children: s, className: c, icon: l, title: u, tone: d = "info", ...f }) {
 	let p = l !== null && l !== !1;
 	return /* @__PURE__ */ o(t, {
@@ -24,5 +24,4 @@ function s({ children: s, className: c, icon: l, title: u, tone: d = "info", ...
 		})]
 	});
 }
-//#endregion
 export { s as Alert };

package/dist/components/Alert/Alert.module.js

@@ -1,9 +1,8 @@
-import './Alert.css';//#region src/components/Alert/Alert.module.css
+import './Alert.css';// src/components/Alert/Alert.module.css
 var e = "sui-alert-7cYyI", t = "sui-icon-Zg6SB", n = "sui-content-UXnmZ", r = "sui-title-abGgF", i = {
 	alert: e,
 	icon: t,
 	content: n,
 	title: r
 };
-//#endregion
 export { e as alert, n as content, i as default, t as icon, r as title };

package/dist/components/Alert/AlertIcon.js

@@ -1,7 +1,7 @@
 import { Box as e } from "../Box/Box.js";
 import { c as t } from "react/compiler-runtime";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/components/Alert/AlertIcon.tsx
+// src/components/Alert/AlertIcon.tsx
 var i = {
 	danger: "M15 9l-6 6M9 9l6 6",
 	info: "M12 16v-4M12 8h.01",
@@ -39,5 +39,4 @@ function a(a) {
 		children: [c, u]
 	}), o[4] = c, o[5] = u, o[6] = d) : d = o[6], d;
 }
-//#endregion
 export { a as AlertIcon };

package/dist/components/Avatar/Avatar.js

@@ -4,7 +4,7 @@ import { initialsOf as n } from "./initialsOf.js";
 import { clsx as r } from "clsx";
 import { useState as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
-//#region src/components/Avatar/Avatar.tsx
+// src/components/Avatar/Avatar.tsx
 function o({ "aria-label": o, className: s, name: c, size: l = "md", src: u, ...d }) {
 	let [f, p] = i(() => /* @__PURE__ */ new Set()), m = n(c), h = l === "xs" ? Array.from(m)[0] ?? "" : m, g = u !== void 0 && u !== "" && !f.has(u), _ = o === void 0 || o.trim() === "" ? c : o;
 	return /* @__PURE__ */ a(e, {
@@ -23,5 +23,4 @@ function o({ "aria-label": o, className: s, name: c, size: l = "md", src: u, ...
 		}) : h
 	});
 }
-//#endregion
 export { o as Avatar };

package/dist/components/Avatar/Avatar.module.js

@@ -1,7 +1,6 @@
-import './Avatar.css';//#region src/components/Avatar/Avatar.module.css
+import './Avatar.css';// src/components/Avatar/Avatar.module.css
 var e = "sui-avatar-3xMuZ", t = "sui-image-ieqGp", n = {
 	avatar: e,
 	image: t
 };
-//#endregion
 export { e as avatar, n as default, t as image };

package/dist/components/Avatar/initialsOf.js

@@ -1,4 +1,4 @@
-//#region src/components/Avatar/initialsOf.ts
+// src/components/Avatar/initialsOf.ts
 function e(e) {
 	let n = e.split(/[^\p{L}\p{M}\p{N}]+/u).filter((e) => e !== "");
 	return n.length === 0 ? "" : (n.length === 1 ? Array.from(n[0]).slice(0, 2) : n.slice(0, 2).map(t)).join("").toUpperCase();
@@ -6,5 +6,4 @@ function e(e) {
 function t(e) {
 	return String.fromCodePoint(e.codePointAt(0) ?? 0);
 }
-//#endregion
 export { e as initialsOf };

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -5,7 +5,7 @@ import { clsx as r } from "clsx";
 import { Children as i } from "react";
 import { c as a } from "react/compiler-runtime";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/AvatarGroup/AvatarGroup.tsx
+// src/components/AvatarGroup/AvatarGroup.tsx
 function l(l) {
 	let u = a(28), d, f, p, m;
 	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4]) : ({children: d, className: f, max: p, ...m} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m);
@@ -30,5 +30,4 @@ function l(l) {
 		children: [x, S]
 	}), u[20] = h, u[21] = _, u[22] = v, u[23] = y, u[24] = b, u[25] = x, u[26] = S, u[27] = C) : C = u[27], C;
 }
-//#endregion
 export { l as AvatarGroup };

package/dist/components/AvatarGroup/AvatarGroup.module.js

@@ -1,7 +1,6 @@
-import './AvatarGroup.css';//#region src/components/AvatarGroup/AvatarGroup.module.css
+import './AvatarGroup.css';// src/components/AvatarGroup/AvatarGroup.module.css
 var e = "sui-avatarGroup-P9iv8", t = "sui-overflow-JZIo-", n = {
 	avatarGroup: e,
 	overflow: t
 };
-//#endregion
 export { e as avatarGroup, n as default, t as overflow };

package/dist/components/Badge/Badge.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import t from "./Badge.module.js";
 import { clsx as n } from "clsx";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Badge/Badge.tsx
+// src/components/Badge/Badge.tsx
 function i({ as: i, className: a, tone: o = "neutral", variant: s = "subtle", ...c }) {
 	return /* @__PURE__ */ r(e, {
 		...c,
@@ -12,5 +12,4 @@ function i({ as: i, className: a, tone: o = "neutral", variant: s = "subtle", ..
 		"data-variant": s
 	});
 }
-//#endregion
 export { i as Badge };

package/dist/components/Badge/Badge.module.js

@@ -1,4 +1,3 @@
-import './Badge.css';//#region src/components/Badge/Badge.module.css
+import './Badge.css';// src/components/Badge/Badge.module.css
 var e = "sui-badge-RsuMz", t = { badge: e };
-//#endregion
 export { e as badge, t as default };

package/dist/components/Box/Box.js

@@ -2,7 +2,7 @@ import e from "./Box.module.js";
 import { clsx as t } from "clsx";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Box/Box.tsx
+// src/components/Box/Box.tsx
 function i(i) {
 	let a = n(10), o, s, c;
 	a[0] === i ? (o = a[1], s = a[2], c = a[3]) : ({as: o, className: s, ...c} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = c);
@@ -14,5 +14,4 @@ function i(i) {
 		...c
 	}), a[6] = l, a[7] = c, a[8] = u, a[9] = d) : d = a[9], d;
 }
-//#endregion
 export { i as Box };

package/dist/components/Box/Box.module.js

@@ -1,4 +1,3 @@
-import './Box.css';//#region src/components/Box/Box.module.css
+import './Box.css';// src/components/Box/Box.module.css
 var e = "sui-box-Wgbf3", t = { box: e };
-//#endregion
 export { e as box, t as default };

package/dist/components/Button/Button.js

@@ -3,14 +3,10 @@ import { Spinner as t } from "../Spinner/Spinner.js";
 import n from "./Button.module.js";
 import { clsx as r } from "clsx";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/components/Button/Button.tsx
+// src/components/Button/Button.tsx
 function o({ "aria-disabled": o, busy: s = !1, children: c, className: l, onClick: u, size: d = "md", type: f = "button", variant: p = "primary", ...m }) {
 	function h(e) {
-		if (s) {
-			e.preventDefault();
-			return;
-		}
-		u?.(e);
+		s ? e.preventDefault() : u?.(e);
 	}
 	return /* @__PURE__ */ a(e, {
 		...m,
@@ -25,5 +21,4 @@ function o({ "aria-disabled": o, busy: s = !1, children: c, className: l, onClic
 		children: [c, s && /* @__PURE__ */ i(t, { className: n.spinner })]
 	});
 }
-//#endregion
 export { o as Button };

package/dist/components/Button/Button.module.js

@@ -1,7 +1,6 @@
-import './Button.css';//#region src/components/Button/Button.module.css
+import './Button.css';// src/components/Button/Button.module.css
 var e = "sui-button-2ZuB7", t = "sui-spinner-ZExvW", n = {
 	button: e,
 	spinner: t
 };
-//#endregion
 export { e as button, n as default, t as spinner };

package/dist/components/Card/Card.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import t from "./Card.module.js";
 import { clsx as n } from "clsx";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Card/Card.tsx
+// src/components/Card/Card.tsx
 function i({ as: i, className: a, padding: o = "md", ...s }) {
 	return /* @__PURE__ */ r(e, {
 		...s,
@@ -11,5 +11,4 @@ function i({ as: i, className: a, padding: o = "md", ...s }) {
 		"data-padding": o
 	});
 }
-//#endregion
 export { i as Card };

package/dist/components/Card/Card.module.js

@@ -1,4 +1,3 @@
-import './Card.css';//#region src/components/Card/Card.module.css
+import './Card.css';// src/components/Card/Card.module.css
 var e = "sui-card-Cb1o4", t = { card: e };
-//#endregion
 export { e as card, t as default };

package/dist/components/Center/Center.js

@@ -1,20 +1,19 @@
-import { Box as e } from "../Box/Box.js";
-import { spaceValue as t } from "../../layout/spaceValue.js";
-import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import { spaceValue as e } from "../../layout/spaceValue.js";
+import { withCustomProperties as t } from "../../layout/withCustomProperties.js";
+import { Box as n } from "../Box/Box.js";
 import r from "./Center.module.js";
 import { clsx as i } from "clsx";
 import { jsx as a } from "react/jsx-runtime";
-//#region src/components/Center/Center.tsx
+// src/components/Center/Center.tsx
 function o({ as: o, className: s, gutter: c = 4, intrinsic: l = !1, width: u = "content", ...d }) {
 	let { style: f, ...p } = d;
-	return /* @__PURE__ */ a(e, {
+	return /* @__PURE__ */ a(n, {
 		...p,
 		as: o,
 		className: i(r.center, s),
-		style: n({ "--sui-center-gutter": t(c) }, f),
+		style: t({ "--sui-center-gutter": e(c) }, f),
 		"data-intrinsic": l ? "" : void 0,
 		"data-width": u
 	});
 }
-//#endregion
 export { o as Center };

package/dist/components/Center/Center.module.js

@@ -1,4 +1,3 @@
-import './Center.css';//#region src/components/Center/Center.module.css
+import './Center.css';// src/components/Center/Center.module.css
 var e = "sui-center-Pu1Pf", t = { center: e };
-//#endregion
 export { e as center, t as default };

package/dist/components/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { ChoiceControl as e } from "../ChoiceControl/ChoiceControl.js";
 import { c as t } from "react/compiler-runtime";
 import { jsx as n } from "react/jsx-runtime";
-//#region src/components/Checkbox/Checkbox.tsx
+// src/components/Checkbox/Checkbox.tsx
 function r(r) {
 	let i = t(2), a;
 	return i[0] === r ? a = i[1] : (a = /* @__PURE__ */ n(e, {
@@ -9,5 +9,4 @@ function r(r) {
 		kind: "checkbox"
 	}), i[0] = r, i[1] = a), a;
 }
-//#endregion
 export { r as Checkbox };

package/dist/components/ChoiceControl/ChoiceControl.js

@@ -6,7 +6,7 @@ import i from "./ChoiceControl.module.js";
 import { clsx as a } from "clsx";
 import { c as o } from "react/compiler-runtime";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/ChoiceControl/ChoiceControl.tsx
+// src/components/ChoiceControl/ChoiceControl.tsx
 function l(l) {
 	let u = o(31), d, f, p, m, h, g;
 	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4], h = u[5], g = u[6]) : ({children: d, className: f, kind: m, role: h, style: g, ...p} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m, u[5] = h, u[6] = g);
@@ -36,5 +36,4 @@ function l(l) {
 		children: [w, T]
 	}), u[23] = v, u[24] = m, u[25] = g, u[26] = b, u[27] = x, u[28] = w, u[29] = T, u[30] = E) : E = u[30], E;
 }
-//#endregion
 export { l as ChoiceControl };

package/dist/components/ChoiceControl/ChoiceControl.module.js

@@ -1,9 +1,8 @@
-import './ChoiceControl.css';//#region src/components/ChoiceControl/ChoiceControl.module.css
+import './ChoiceControl.css';// src/components/ChoiceControl/ChoiceControl.module.css
 var e = "sui-choiceControl-aSGqz", t = "sui-withText-bNY-W", n = "sui-input-DF-cI", r = "sui-text-4-Caz", i = {
 	choiceControl: e,
 	withText: t,
 	input: n,
 	text: r
 };
-//#endregion
 export { e as choiceControl, i as default, n as input, r as text, t as withText };

package/dist/components/Cluster/Cluster.js

@@ -1,6 +1,6 @@
 import { HorizontalFlow as e } from "../HorizontalFlow/HorizontalFlow.js";
 import { jsx as t } from "react/jsx-runtime";
-//#region src/components/Cluster/Cluster.tsx
+// src/components/Cluster/Cluster.tsx
 function n({ align: n = "center", gap: r = 2, justify: i = "start", ...a }) {
 	return /* @__PURE__ */ t(e, {
 		...a,
@@ -10,5 +10,4 @@ function n({ align: n = "center", gap: r = 2, justify: i = "start", ...a }) {
 		wrap: !0
 	});
 }
-//#endregion
 export { n as Cluster };

package/dist/components/Code/Code.js

@@ -3,7 +3,7 @@ import t from "./Code.module.js";
 import { clsx as n } from "clsx";
 import { c as r } from "react/compiler-runtime";
 import { jsx as i } from "react/jsx-runtime";
-//#region src/components/Code/Code.tsx
+// src/components/Code/Code.tsx
 function a(a) {
 	let o = r(8), s, c;
 	o[0] === a ? (s = o[1], c = o[2]) : ({className: s, ...c} = a, o[0] = a, o[1] = s, o[2] = c);
@@ -16,5 +16,4 @@ function a(a) {
 		className: l
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 }
-//#endregion
 export { a as Code };

package/dist/components/Code/Code.module.js

@@ -1,4 +1,3 @@
-import './Code.css';//#region src/components/Code/Code.module.css
+import './Code.css';// src/components/Code/Code.module.css
 var e = "sui-code-arLxg", t = { code: e };
-//#endregion
 export { e as code, t as default };

package/dist/components/Combobox/Autocomplete.d.ts

@@ -0,0 +1,83 @@
+import type { JSX, ReactNode } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+import type { ComboboxFilter } from "./ComboboxContext";
+import type { ComboboxPlacement } from "./ComboboxPopup";
+interface AutocompleteOwnProps {
+    /**
+     * The `ComboboxOption`s
+     */
+    children?: ReactNode;
+    /**
+     * The text the input starts with when `inputValue` is not given. Defaults to the selected option's text.
+     */
+    defaultInputValue?: string;
+    /**
+     * The option selected at first, which leaves the selection uncontrolled. Defaults to none.
+     */
+    defaultValue?: string | null;
+    /**
+     * Whether an option shows for the typed text. Defaults to the option's text containing it, ignoring case and
+     * accents. Null shows every option rendered, for a list filtered elsewhere, such as on a server; typing then makes no
+     * option active, since the options for the text are still to come.
+     */
+    filter?: ComboboxFilter | null;
+    /**
+     * The text in the input, which makes it controlled: update it from `onInputValueChange`
+     */
+    inputValue?: string;
+    /**
+     * Adds a hidden input that submits the selected value with a form under this name
+     */
+    name?: string;
+    /**
+     * Called with the text as the user types, with an option's text when they commit it, and with the selected
+     * option's text, or none, when focus leaves
+     */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Called with the value of the option the user commits, or null when they clear the input with Escape
+     */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * Where the list opens. It flips to the other side when there is no room. Defaults to `bottom-start`.
+     */
+    placement?: ComboboxPlacement;
+    /**
+     * What the live region says, and the empty list shows, for a number of matching options. Defaults to English:
+     * "No results", "1 result", "12 results".
+     */
+    resultsLabel?: (count: number) => string;
+    /**
+     * Height of the input, matching the `Button` sizes. Takes the place of the native `size` attribute. Defaults to
+     * `md`.
+     */
+    size?: ControlSize;
+    /**
+     * The selected option, or null for none, which makes the selection controlled: update it from `onValueChange`
+     */
+    value?: string | null;
+}
+/**
+ * Props for `Autocomplete`: its own props plus every `input` prop except those the combobox pattern sets
+ */
+export interface AutocompleteProps extends AutocompleteOwnProps, Omit<BoxProps<"input">, "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-expanded" | "as" | "children" | "dangerouslySetInnerHTML" | "defaultValue" | "role" | "size" | "type" | "value" | keyof AutocompleteOwnProps> {
+}
+/**
+ * A text input that filters a list of options as the user types, following the WAI-ARIA combobox pattern with list
+ * autocomplete, to choose one of many options by typing part of its name. Typing opens the list and makes the first
+ * match active; the arrow keys move through it; Enter or a click chooses an option, putting its text in the input;
+ * Escape closes the list, and then clears the input. Only an option can be the value: when focus leaves, the input shows
+ * the selected option's text again. The number of matches is announced once typing pauses. Inside a `Field` it takes
+ * its label, description, error, and required and disabled state from the field; outside one, give it an `aria-label`.
+ *
+ * @example
+ * <Field label="Country">
+ *   <Autocomplete name="country" onValueChange={setCountry} value={country}>
+ *     <ComboboxOption value="fr">France</ComboboxOption>
+ *     <ComboboxOption value="jp">Japan</ComboboxOption>
+ *   </Autocomplete>
+ * </Field>
+ */
+export declare function Autocomplete({ children, className, defaultInputValue, defaultValue, filter, inputValue, name, onInputValueChange, onValueChange, placement, resultsLabel, size, value, ...rest }: AutocompleteProps): JSX.Element;
+export {};

package/dist/components/Combobox/Autocomplete.js

@@ -0,0 +1,102 @@
+import { useFieldControl as e } from "../../forms/useFieldControl.js";
+import { anchorNameFor as t } from "../../overlays/anchorNameFor.js";
+import { mergeProps as n } from "../../overlays/mergeProps.js";
+import { Box as r } from "../Box/Box.js";
+import { ChevronDownIcon as i } from "../Icon/ChevronDownIcon.js";
+import { TextControl as a } from "../TextControl/TextControl.js";
+import { VisuallyHidden as o } from "../VisuallyHidden/VisuallyHidden.js";
+import s from "./Combobox.module.js";
+import { ComboboxPopup as c } from "./ComboboxPopup.js";
+import { handleAutocompleteKey as l } from "./autocompleteKeys.js";
+import { containsText as u } from "./containsText.js";
+import { useAutocompleteText as d } from "./useAutocompleteText.js";
+import { useComboboxList as f } from "./useComboboxList.js";
+import { useComboboxSelection as p } from "./useComboboxSelection.js";
+import { useResultsAnnouncement as m } from "./useResultsAnnouncement.js";
+import { clsx as h } from "clsx";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+// src/components/Combobox/Autocomplete.tsx
+function y({ children: y, className: x, defaultInputValue: S, defaultValue: C = null, filter: w = u, inputValue: T, name: E, onInputValueChange: D, onValueChange: O, placement: k = "bottom-start", resultsLabel: A = b, size: j = "md", value: M, ...N }) {
+	let P = e(N), F = p({
+		defaultValue: C,
+		onValueChange: O,
+		value: M
+	}), I = d({
+		defaultInputValue: S,
+		inputValue: T,
+		onInputValueChange: D,
+		selectedText: F.selectedContent?.text
+	}), L = f({
+		controlId: P.id,
+		filter: w,
+		onCommit: I.commit,
+		query: I.query,
+		selection: F
+	}), { announceCount: R, announcement: z } = m(A, L.countShown, L.open), B = I.shown, V = { anchorName: t(L.listId) }, H = N.readOnly === !0;
+	function U(e) {
+		let t = e.currentTarget.value;
+		I.edit(t), L.openList("none", "keyboard"), L.matchFirst(), R();
+	}
+	function W(e) {
+		let t = {
+			commit: I.commit,
+			editing: I.editing,
+			shown: B
+		};
+		!e.defaultPrevented && !H && l(e, L, t) && e.preventDefault();
+	}
+	function G(e) {
+		e.defaultPrevented || H || L.open || L.openList("none", "pointer");
+	}
+	function K(e) {
+		L.close(), e.currentTarget.ownerDocument.hasFocus() && I.restore();
+	}
+	return /* @__PURE__ */ v(g, { children: [
+		/* @__PURE__ */ v(r, {
+			as: "span",
+			className: s.inputFrame,
+			"data-disabled": P.disabled === !0 ? "" : void 0,
+			"data-size": j,
+			children: [/* @__PURE__ */ _(a, {
+				autoComplete: "off",
+				...n(N, {
+					onBlur: K,
+					onChange: U,
+					onClick: G,
+					onKeyDown: W,
+					style: V
+				}),
+				as: "input",
+				className: h(s.input, x),
+				id: L.controlId,
+				role: "combobox",
+				size: j,
+				type: "text",
+				value: B,
+				"aria-activedescendant": L.activeDescendant,
+				"aria-autocomplete": "list",
+				"aria-controls": L.listId,
+				"aria-expanded": L.open
+			}), /* @__PURE__ */ _(i, { className: s.chevron })]
+		}),
+		/* @__PURE__ */ _(c, {
+			"aria-label": N["aria-label"],
+			"aria-labelledby": N["aria-labelledby"],
+			disabled: P.disabled,
+			emptyMessage: A(0),
+			form: N.form,
+			list: L,
+			name: E,
+			placement: k,
+			children: y
+		}),
+		/* @__PURE__ */ _(o, {
+			"aria-live": "polite",
+			children: z
+		})
+	] });
+}
+function b(e) {
+	return e === 0 ? "No results" : e === 1 ? "1 result" : `${e} results`;
+}
+export { y as Autocomplete };

package/dist/components/Combobox/Combobox.css

@@ -0,0 +1 @@
+.sui-field-BenH0{align-items:center;gap:var(--sui-space-2,.5rem);text-align:start;cursor:default;min-inline-size:0;display:inline-flex}.sui-placeholder-NQX-b,.sui-fieldLabel-zBN6l{text-overflow:ellipsis;white-space:nowrap;flex:1;min-inline-size:0;overflow:hidden}.sui-placeholder-NQX-b{color:var(--sui-color-text-muted,#4b5563)}.sui-fieldLeading-4y-j7{flex:none;align-items:center;block-size:1lh;display:flex}.sui-chevron-NVqyn{flex:none;transition:rotate .12s}[aria-expanded=true]+.sui-chevron-NVqyn,[aria-expanded=true]>.sui-chevron-NVqyn{rotate:180deg}.sui-inputFrame-mYx2Q{--_sui-combobox-chevron-inset:var(--sui-space-4,1rem);align-items:center;display:inline-grid}.sui-inputFrame-mYx2Q[data-size=sm]{--_sui-combobox-chevron-inset:var(--sui-space-3,.75rem)}.sui-inputFrame-mYx2Q[data-size=lg]{--_sui-combobox-chevron-inset:var(--sui-space-6,1.5rem)}.sui-inputFrame-mYx2Q>*{grid-area:1/1}.sui-inputFrame-mYx2Q .sui-input--HTv1{padding-inline-end:calc(var(--_sui-combobox-chevron-inset) + 1em + var(--sui-space-2,.5rem))}.sui-inputFrame-mYx2Q .sui-chevron-NVqyn{color:var(--sui-color-text,#111827);pointer-events:none;justify-self:end;margin-inline-end:var(--_sui-combobox-chevron-inset)}.sui-inputFrame-mYx2Q[data-disabled] .sui-chevron-NVqyn{opacity:.5}.sui-popup-rsvuH:popover-open{min-inline-size:max(12rem, anchor-size(width));max-inline-size:min(max(20rem, anchor-size(width)), 100vw - var(--sui-space-2,.5rem) * 2);overflow:hidden}.sui-listbox-2wSrg{--_sui-menu-leading-column:calc(1rem + var(--sui-space-2,.5rem));overscroll-behavior:contain;flex-direction:column;flex:auto;gap:1px;min-block-size:0;display:flex;overflow-y:auto}.sui-option-vhhn5[hidden]{display:none}.sui-option-vhhn5 .sui-check-9yQbP{color:var(--_sui-menu-ink)}.sui-optionLeading-kXakJ{opacity:var(--_sui-menu-part-opacity,1);flex:none;align-items:center;display:flex}.sui-empty-Ahw5K{min-block-size:2rem;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);color:var(--sui-color-text-muted,#4b5563);align-items:center;display:none}.sui-listbox-2wSrg[data-empty]+.sui-empty-Ahw5K{display:flex}