@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/cjs/components/spinner/spinner.cjs

@@ -0,0 +1,48 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_merge_refs = require("../../utilities/hooks/use-merge-refs/use-merge-refs.cjs");
+const require_use_synchronized_animation = require("../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.cjs");
+require("../../utilities/hooks/index.cjs");
+require("../../utilities/index.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/spinner/spinner.tsx
+/**
+* Spinner component used for indicating busy or indeterminate loading.
+*
+* @example
+* <Spinner aria-label='Loading users...' />
+*/
+const Spinner = (0, react.forwardRef)(function Spinner({ "aria-label": ariaLabel, className, ...rest }, ref) {
+	const svgRef = require_use_synchronized_animation.useSynchronizedAnimation("ds-spinner-rotate-animation");
+	const strokeRef = require_use_synchronized_animation.useSynchronizedAnimation("ds-spinner-stroke-animation");
+	const mergedRefs = require_use_merge_refs.useMergeRefs([svgRef, ref]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		"aria-label": ariaLabel,
+		className: (0, clsx_lite.default)("ds-spinner", className),
+		ref: mergedRefs,
+		role: "img",
+		viewBox: "0 0 50 50",
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			className: (0, clsx_lite.default)("ds-spinner__background"),
+			cx: "25",
+			cy: "25",
+			r: "20",
+			fill: "none",
+			strokeWidth: "5"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			className: (0, clsx_lite.default)(`ds-spinner__circle`),
+			cx: "25",
+			cy: "25",
+			r: "20",
+			fill: "none",
+			strokeWidth: "5",
+			ref: strokeRef
+		})]
+	});
+});
+//#endregion
+exports.Spinner = Spinner;

package/dist/cjs/components/spinner/spinner.d.cts

@@ -0,0 +1,27 @@
+
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/spinner/spinner.d.ts
+type SpinnerProps = {
+  /**
+   * Accessibile label
+   */
+  'aria-label'?: string;
+  /**
+   * Spinner size
+   */
+  'data-size'?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+} & ComponentPropsWithoutRef<'svg'> & ({
+  'aria-label': string;
+} | {
+  'aria-label'?: string;
+  'aria-hidden': true | 'true';
+});
+/**
+ * Spinner component used for indicating busy or indeterminate loading.
+ *
+ * @example
+ * <Spinner aria-label='Loading users...' />
+ */
+declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<SVGSVGElement>>;
+//#endregion
+export { Spinner, SpinnerProps };

package/dist/cjs/components/suggestion/index.cjs

@@ -0,0 +1,47 @@
+'use client';
+const require_suggestion = require("./suggestion.cjs");
+const require_suggestion_clear = require("./suggestion-clear.cjs");
+const require_suggestion_empty = require("./suggestion-empty.cjs");
+const require_suggestion_input = require("./suggestion-input.cjs");
+const require_suggestion_list = require("./suggestion-list.cjs");
+const require_suggestion_option = require("./suggestion-option.cjs");
+const require_suggestion_toggle = require("./suggestion-toggle.cjs");
+//#region src/components/suggestion/index.ts
+/**
+* A component that provides a suggestion list for an input field.
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.Toggle />
+*   <Suggestion.Clear />
+*   <Suggestion.List>
+*     <Suggestion.Empty>Tomt</Suggestion.Empty>
+*     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+*     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+*   </Suggestion.List>
+* </Suggestion>
+*/
+const EXPERIMENTAL_Suggestion = Object.assign(require_suggestion.Suggestion, {
+	List: require_suggestion_list.SuggestionList,
+	Input: require_suggestion_input.SuggestionInput,
+	Empty: require_suggestion_empty.SuggestionEmpty,
+	Option: require_suggestion_option.SuggestionOption,
+	Toggle: require_suggestion_toggle.SuggestionToggle,
+	Clear: require_suggestion_clear.SuggestionClear
+});
+EXPERIMENTAL_Suggestion.displayName = "EXPERIMENTAL_Suggestion";
+EXPERIMENTAL_Suggestion.List.displayName = "EXPERIMENTAL_Suggestion.List";
+EXPERIMENTAL_Suggestion.Input.displayName = "EXPERIMENTAL_Suggestion.Input";
+EXPERIMENTAL_Suggestion.Empty.displayName = "EXPERIMENTAL_Suggestion.Empty";
+EXPERIMENTAL_Suggestion.Option.displayName = "EXPERIMENTAL_Suggestion.Option";
+EXPERIMENTAL_Suggestion.Toggle.displayName = "EXPERIMENTAL_Suggestion.Toggle";
+EXPERIMENTAL_Suggestion.Clear.displayName = "EXPERIMENTAL_Suggestion.Clear";
+//#endregion
+exports.EXPERIMENTAL_Suggestion = EXPERIMENTAL_Suggestion;
+exports.EXPERIMENTAL_SuggestionClear = require_suggestion_clear.SuggestionClear;
+exports.EXPERIMENTAL_SuggestionEmpty = require_suggestion_empty.SuggestionEmpty;
+exports.EXPERIMENTAL_SuggestionInput = require_suggestion_input.SuggestionInput;
+exports.EXPERIMENTAL_SuggestionList = require_suggestion_list.SuggestionList;
+exports.EXPERIMENTAL_SuggestionOption = require_suggestion_option.SuggestionOption;
+exports.EXPERIMENTAL_SuggestionToggle = require_suggestion_toggle.SuggestionToggle;

package/dist/cjs/components/suggestion/index.d.cts

@@ -0,0 +1,111 @@
+
+import { Suggestion as Suggestion$1, SuggestionItem, SuggestionMultipleProps, SuggestionProps, SuggestionSingleProps } from "./suggestion.cjs";
+import { SuggestionClear, SuggestionClearProps } from "./suggestion-clear.cjs";
+import { SuggestionEmpty, SuggestionEmptyProps } from "./suggestion-empty.cjs";
+import { SuggestionInput, SuggestionInputProps } from "./suggestion-input.cjs";
+import { SuggestionList, SuggestionListProps } from "./suggestion-list.cjs";
+import { SuggestionOption, SuggestionOptionProps } from "./suggestion-option.cjs";
+import { SuggestionToggle, SuggestionToggleProps } from "./suggestion-toggle.cjs";
+//#region src/components/suggestion/index.d.ts
+type Suggestion = typeof Suggestion$1 & {
+  /**
+   * Component that provides a Suggestion list.
+   *
+   * Place as a descendant of `Suggestion`
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List />
+   * </Suggestion>
+   */
+  List: typeof SuggestionList;
+  /**
+   * Component that provides an input field for the Suggestion list.
+   *
+   * Place as a descendant of `Suggestion`
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List />
+   * </Suggestion>
+   */
+  Input: typeof SuggestionInput;
+  /**
+   * Component that provides an empty Suggestion list.
+   *
+   * Place as a descendant of `Suggestion.List`
+   *
+   * @example
+   * <Suggestion.List>
+   *   <Suggestion.Empty>Tomt</Suggestion.Empty>
+   * </Suggestion.List>
+   */
+  Empty: typeof SuggestionEmpty;
+  /**
+   * A component for rendering individual options in the Suggestion list.
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List>
+   *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+   *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+   *   </Suggestion.List>
+   * </Suggestion>
+   */
+  Option: typeof SuggestionOption;
+  /**
+   * Component that provides a clear button for the Suggestion input.
+   *
+   * Place as a descendant of `Suggestion`
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List />
+   * </Suggestion>
+   */
+  Clear: typeof SuggestionClear;
+  /**
+   * Component that provides a toggle button for the Suggestion list.
+   *
+   * Place as a descendant of `Suggestion`
+   *
+   * @example
+   * <Suggestion>
+   *   <Suggestion.Input />
+   *   <Suggestion.Toggle />
+   *   <Suggestion.Clear />
+   *   <Suggestion.List />
+   * </Suggestion>
+   */
+  Toggle: typeof SuggestionToggle;
+};
+/**
+ * A component that provides a suggestion list for an input field.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List>
+ *     <Suggestion.Empty>Tomt</Suggestion.Empty>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
+declare const EXPERIMENTAL_Suggestion: Suggestion;
+//#endregion
+export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption, SuggestionToggle as EXPERIMENTAL_SuggestionToggle, type SuggestionClearProps, type SuggestionEmptyProps, type SuggestionInputProps, type SuggestionItem, type SuggestionListProps, type SuggestionMultipleProps, type SuggestionOptionProps, type SuggestionProps, type SuggestionSingleProps, type SuggestionToggleProps };

package/dist/cjs/components/suggestion/suggestion-clear.cjs

@@ -0,0 +1,29 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/suggestion/suggestion-clear.tsx
+/**
+* Component that provides a clear button for the Suggestion input.
+*
+* Place as a descendant of `Suggestion`
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.Toggle />
+*   <Suggestion.Clear />
+*   <Suggestion.List />
+* </Suggestion>
+*/
+const SuggestionClear = (0, react.forwardRef)(function SuggestionClear({ "aria-label": label = "Tøm", ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": label,
+		hidden: true,
+		ref,
+		suppressHydrationWarning: true,
+		type: "reset",
+		...rest
+	});
+});
+//#endregion
+exports.SuggestionClear = SuggestionClear;

package/dist/cjs/components/suggestion/suggestion-clear.d.cts

@@ -0,0 +1,35 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { ButtonHTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-clear.d.ts
+type SuggestionClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+}>;
+/**
+ * Component that provides a clear button for the Suggestion input.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+declare const SuggestionClear: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SuggestionClear, SuggestionClearProps };

package/dist/cjs/components/suggestion/suggestion-empty.cjs

@@ -0,0 +1,25 @@
+'use client';
+require("@digdir/designsystemet-web");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/suggestion/suggestion-empty.tsx
+/**
+* Component that provides an empty Suggestion list.
+*
+* Place as a descendant of `Suggestion.List`
+*
+* @example
+* <Suggestion.List>
+*   <Suggestion.Empty>Tomt</Suggestion.Empty>
+* </Suggestion.List>
+*/
+const SuggestionEmpty = (0, react.forwardRef)(function SuggestionEmpty(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("u-option", {
+		"data-empty": true,
+		ref,
+		suppressHydrationWarning: true,
+		...rest
+	});
+});
+//#endregion
+exports.SuggestionEmpty = SuggestionEmpty;

package/dist/cjs/components/suggestion/suggestion-empty.d.cts

@@ -0,0 +1,31 @@
+
+import { DefaultProps } from "../../types.cjs";
+import "@digdir/designsystemet-web";
+import { OptionHTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-empty.d.ts
+type SuggestionEmptyProps = DefaultProps & OptionHTMLAttributes<HTMLOptionElement> & {
+  /**
+   * Optionally the text to display when the suggestion list is empty.
+   * If <Suggestion> has `data-creatable`, use `{value}` to replace with the current input value.
+   **/
+  'data-empty'?: string;
+};
+/**
+ * Component that provides an empty Suggestion list.
+ *
+ * Place as a descendant of `Suggestion.List`
+ *
+ * @example
+ * <Suggestion.List>
+ *   <Suggestion.Empty>Tomt</Suggestion.Empty>
+ * </Suggestion.List>
+ */
+declare const SuggestionEmpty: import("react").ForwardRefExoticComponent<DefaultProps & OptionHTMLAttributes<HTMLOptionElement> & {
+  /**
+   * Optionally the text to display when the suggestion list is empty.
+   * If <Suggestion> has `data-creatable`, use `{value}` to replace with the current input value.
+   **/
+  'data-empty'?: string;
+} & import("react").RefAttributes<HTMLOptionElement>>;
+//#endregion
+export { SuggestionEmpty, SuggestionEmptyProps };

package/dist/cjs/components/suggestion/suggestion-input.cjs

@@ -0,0 +1,35 @@
+'use client';
+const require_input = require("../input/input.cjs");
+const require_suggestion = require("./suggestion.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/suggestion/suggestion-input.tsx
+/**
+* Component that provides an input field for the Suggestion list.
+*
+* Place as a descendant of `Suggestion`
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.List />
+* </Suggestion>
+*/
+const SuggestionInput = (0, react.forwardRef)(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
+	const { handleFilter } = (0, react.useContext)(require_suggestion.SuggestionContext);
+	(0, react.useEffect)(handleFilter, [value]);
+	if (onChange) console.warn("SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onSelectedChange on Suggestion instead, or onInput if fetching API results");
+	if (value) console.warn("SuggestionInput: Avoid using value, as Suggestion controls the Input. Use selected on Suggestion instead.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+		placeholder: "",
+		ref,
+		onInput: (event) => {
+			onInput?.(event);
+			handleFilter?.();
+		},
+		suppressHydrationWarning: true,
+		...rest
+	});
+});
+//#endregion
+exports.SuggestionInput = SuggestionInput;

package/dist/cjs/components/suggestion/suggestion-input.d.cts

@@ -0,0 +1,30 @@
+
+import { InputProps } from "../input/input.cjs";
+//#region src/components/suggestion/suggestion-input.d.ts
+type SuggestionInputProps = Omit<InputProps, 'role' | 'data-indeterminate'>;
+declare global {
+  namespace React.JSX {
+    interface IntrinsicAttributes {
+      popovertarget?: string;
+    }
+  }
+  namespace React {
+    interface HTMLAttributes<T> {
+      popovertarget?: string;
+    }
+  }
+}
+/**
+ * Component that provides an input field for the Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+declare const SuggestionInput: import("react").ForwardRefExoticComponent<SuggestionInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { SuggestionInput, SuggestionInputProps };

package/dist/cjs/components/suggestion/suggestion-list.cjs

@@ -0,0 +1,34 @@
+'use client';
+const require_suggestion = require("./suggestion.cjs");
+require("@digdir/designsystemet-web");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/suggestion/suggestion-list.tsx
+/**
+* Component that provides a Suggestion list.
+*
+* Place as a descendant of `Suggestion`
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.List />
+* </Suggestion>
+*/
+const SuggestionList = (0, react.forwardRef)(function SuggestionList({ singular = "%d forslag", plural = "%d forslag", className, id, autoPlacement = true, ...rest }, ref) {
+	const { handleFilter } = (0, react.useContext)(require_suggestion.SuggestionContext);
+	(0, react.useEffect)(handleFilter);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("u-datalist", {
+		class: className,
+		"data-nofilter": true,
+		"data-sr-plural": plural,
+		"data-sr-singular": singular,
+		popover: "manual",
+		ref,
+		role: "listbox",
+		suppressHydrationWarning: true,
+		...rest
+	});
+});
+//#endregion
+exports.SuggestionList = SuggestionList;

package/dist/cjs/components/suggestion/suggestion-list.d.cts

@@ -0,0 +1,54 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-list.d.ts
+type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDataListElement>, {
+  /**
+   * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
+   * @default '%d forslag'
+   */
+  singular?: string;
+  /**
+   * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
+   * @default '%d forslag'
+   */
+  plural?: string;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+}>;
+/**
+ * Component that provides a Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+declare const SuggestionList: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDataListElement>, "autoPlacement" | "singular" | "plural"> & {
+  /**
+   * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
+   * @default '%d forslag'
+   */
+  singular?: string;
+  /**
+   * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
+   * @default '%d forslag'
+   */
+  plural?: string;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+} & import("react").RefAttributes<HTMLDataListElement>>;
+//#endregion
+export { SuggestionList, SuggestionListProps };

package/dist/cjs/components/suggestion/suggestion-option.cjs

@@ -0,0 +1,27 @@
+'use client';
+require("@digdir/designsystemet-web");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/suggestion/suggestion-option.tsx
+/**
+* A component for rendering individual options in the Suggestion list.
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.List>
+*     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+*     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+*   </Suggestion.List>
+* </Suggestion>
+*/
+const SuggestionOption = (0, react.forwardRef)(function SuggestionOption({ className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("u-option", {
+		class: className,
+		ref,
+		suppressHydrationWarning: true,
+		...rest
+	});
+});
+//#endregion
+exports.SuggestionOption = SuggestionOption;

package/dist/cjs/components/suggestion/suggestion-option.d.cts

@@ -0,0 +1,21 @@
+
+import { DefaultProps } from "../../types.cjs";
+import "@digdir/designsystemet-web";
+import { OptionHTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-option.d.ts
+type SuggestionOptionProps = OptionHTMLAttributes<HTMLOptionElement> & DefaultProps;
+/**
+ * A component for rendering individual options in the Suggestion list.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
+declare const SuggestionOption: import("react").ForwardRefExoticComponent<OptionHTMLAttributes<HTMLOptionElement> & DefaultProps & import("react").RefAttributes<HTMLOptionElement>>;
+//#endregion
+export { SuggestionOption, SuggestionOptionProps };

package/dist/cjs/components/suggestion/suggestion-toggle.cjs

@@ -0,0 +1,29 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/suggestion/suggestion-toggle.tsx
+/**
+* Component that provides a toggle button for the Suggestion list.
+*
+* Place as a descendant of `Suggestion`
+*
+* @example
+* <Suggestion>
+*   <Suggestion.Input />
+*   <Suggestion.Toggle />
+*   <Suggestion.Clear />
+*   <Suggestion.List />
+* </Suggestion>
+*/
+const SuggestionToggle = (0, react.forwardRef)(function SuggestionToggle({ "aria-label": label = "Valg", ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-expanded": "false",
+		"aria-label": label,
+		ref,
+		suppressHydrationWarning: true,
+		type: "button",
+		...rest
+	});
+});
+//#endregion
+exports.SuggestionToggle = SuggestionToggle;

package/dist/cjs/components/suggestion/suggestion-toggle.d.cts

@@ -0,0 +1,35 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { ButtonHTMLAttributes } from "react";
+//#region src/components/suggestion/suggestion-toggle.d.ts
+type SuggestionToggleProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
+  /**
+   * Aria label for the toggle button
+   * @default 'Valg'
+   */
+  'aria-label'?: string;
+}>;
+/**
+ * Component that provides a toggle button for the Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Toggle />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+declare const SuggestionToggle: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
+  /**
+   * Aria label for the toggle button
+   * @default 'Valg'
+   */
+  'aria-label'?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SuggestionToggle, SuggestionToggleProps };