@digdir/designsystemet-react 1.21.1 → 1.23.0

package/dist/cjs/components/avatar/avatar.cjs

@@ -10,7 +10,7 @@ let _radix_ui_react_slot = require("@radix-ui/react-slot");
 * Avatars are used to represent people or entities.
 *
 * @example
-* <Avatar aria-label="John Doe" initials="JD" />
+* <Avatar aria-label="John Doe">JD</Avatar>
 *
 * @example
 * <Avatar aria-label="John Doe">
@@ -22,25 +22,21 @@ let _radix_ui_react_slot = require("@radix-ui/react-slot");
 *  <Icon />
 * </Avatar>
 */
-const Avatar = (0, react.forwardRef)(function Avatar({ "aria-label": ariaLabel, "data-tooltip": dataTooltip, variant, className, children, initials, asChild, ...rest }, ref) {
-	const OuterComponent = asChild ? _radix_ui_react_slot.Slot : "span";
-	const useSlot = children && typeof children !== "string";
-	const textChild = children && typeof children === "string";
-	const Component = useSlot ? _radix_ui_react_slot.Slot : react.Fragment;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OuterComponent, {
-		ref,
+const Avatar = (0, react.forwardRef)(function Avatar({ "aria-label": label, "data-tooltip": tooltip, "data-initials": dataInitials, children, variant, className, initials: propInitials, asChild, ...rest }, ref) {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "span";
+	const initials = propInitials ?? dataInitials;
+	const hasSlottedChildren = asChild && (0, react.isValidElement)(children) && children.props.children !== void 0 && children.props.children !== null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		"aria-label": label || tooltip,
 		className: (0, clsx_lite.default)("ds-avatar", className),
-		"data-variant": variant,
 		"data-initials": initials,
+		"data-tooltip": tooltip,
+		"data-variant": variant,
+		ref,
 		role: asChild ? void 0 : "img",
-		"aria-label": ariaLabel || dataTooltip,
-		"data-tooltip": dataTooltip,
-		tabIndex: dataTooltip ? 0 : void 0,
+		tabIndex: tooltip ? 0 : void 0,
 		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-			...useSlot && !asChild ? { "aria-hidden": true } : {},
-			children: textChild ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children }) : children
-		})
+		children: asChild ? [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slottable, { children }, "slottable"), hasSlottedChildren ? null : initials] : children ?? initials
 	});
 });
 //#endregion

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

@@ -33,8 +33,14 @@ type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, Ar
   variant?: 'circle' | 'square';
   /**
    * Initials to display inside the avatar.
+   * @deprecated Please use text content as children instead
    */
   initials?: string;
+  /**
+   * Initials to display inside the avatar.
+   * @deprecated Please use text content as children instead
+   */
+  'data-initials'?: string;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
@@ -42,8 +48,6 @@ type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, Ar
   asChild?: boolean;
   /**
    * Image, icon or initials to display inside the avatar.
-   *
-   * Gets `aria-hidden="true"`
    */
   children?: ReactNode;
 }>;
@@ -51,7 +55,7 @@ type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, Ar
  * Avatars are used to represent people or entities.
  *
  * @example
- * <Avatar aria-label="John Doe" initials="JD" />
+ * <Avatar aria-label="John Doe">JD</Avatar>
  *
  * @example
  * <Avatar aria-label="John Doe">

package/dist/cjs/components/avatar-stack/avatar-stack.cjs

@@ -16,7 +16,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *   <Avatar aria-label='name'>
 *     <BriefcaseIcon />
 *   </Avatar>
-*   <Avatar aria-label='name' initials='sm' />
+*   <Avatar aria-label='name'>sm</Avatar>
 * </EXPERIMENTAL_AvatarStack>
 */
 const EXPERIMENTAL_AvatarStack = (0, react.forwardRef)(function AvatarStack({ className, gap, suffix, children, avatarSize, overlap, style, expandable, ...rest }, ref) {

package/dist/cjs/components/avatar-stack/avatar-stack.d.cts

@@ -43,7 +43,7 @@ type AvatarStackProps = {
  *   <Avatar aria-label='name'>
  *     <BriefcaseIcon />
  *   </Avatar>
- *   <Avatar aria-label='name' initials='sm' />
+ *   <Avatar aria-label='name'>sm</Avatar>
  * </EXPERIMENTAL_AvatarStack>
  */
 declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponent<{

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

@@ -71,7 +71,7 @@ type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDialogElem
  *   Content
  * </Dialog>
  */
-declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "closedby" | "onClose" | "open" | "closeButton" | "placement" | "modal"> & {
+declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "placement" | "open" | "closedby" | "onClose" | "closeButton" | "modal"> & {
   /**
    * Screen reader label of close button. Set false to hide the close button.
    * @default 'Lukk dialogvindu'

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

@@ -5,6 +5,7 @@ import { LabelHTMLAttributes } from "react";
 type LabelProps = {
   /**
    * Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
+   * @deprecated as field now automatically changes font-weight based on input type
    */
   weight?: 'regular' | 'medium' | 'semibold';
   /**
@@ -22,6 +23,7 @@ type LabelProps = {
 declare const Label: import("react").ForwardRefExoticComponent<{
   /**
    * Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
+   * @deprecated as field now automatically changes font-weight based on input type
    */
   weight?: "regular" | "medium" | "semibold";
   /**

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

@@ -62,7 +62,7 @@ type PopoverProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *   Content
  * </Popover>
  */
-declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "onClose" | "open" | "placement" | "onOpen" | "autoPlacement"> & {
+declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "placement" | "open" | "onClose" | "onOpen" | "autoPlacement"> & {
   /**
    * id to connect the trigger with the popover - required when not using Popover.Context.
    */

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

@@ -1,5 +1,4 @@
 'use client';
-const require_button = require("../button/button.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/search/search-clear.tsx
@@ -12,12 +11,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *   <SearchClear />
 * </Search>
 */
-const SearchClear = (0, react.forwardRef)(function SearchClear({ "aria-label": label = "Tøm", ...rest }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-		"aria-label": label,
+const SearchClear = (0, react.forwardRef)(function SearchClear(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		hidden: true,
 		ref,
 		type: "reset",
-		variant: "tertiary",
+		suppressHydrationWarning: true,
 		...rest
 	});
 });

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

@@ -1,13 +1,16 @@
 
-import { ButtonProps } from "../button/button.cjs";
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { ButtonHTMLAttributes } from "react";
 //#region src/components/search/search-clear.d.ts
-type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
+type SearchClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
   /**
    * Aria label for the clear button
-   * @default 'Tøm'
+   * @deprecated Please use `--dsc-suggestion-sr-clear` or `data-sr-clear` on Suggestion to set label.
    */
   'aria-label'?: string;
-};
+}>;
 /**
  * SearchClear component, used to display a clear button when the search input is not empty.
  *
@@ -17,10 +20,10 @@ type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
  *   <SearchClear />
  * </Search>
  */
-declare const SearchClear: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "children" | "variant"> & {
+declare const SearchClear: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
   /**
    * Aria label for the clear button
-   * @default 'Tøm'
+   * @deprecated Please use `--dsc-suggestion-sr-clear` or `data-sr-clear` on Suggestion to set label.
    */
   'aria-label'?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/search/search.cjs

@@ -26,6 +26,7 @@ const Search = (0, react.forwardRef)(function Search({ className, ...rest }, ref
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ds-suggestion", {
 		ref,
 		class: (0, clsx_lite.default)("ds-search", className),
+		suppressHydrationWarning: true,
 		...rest
 	});
 });

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

@@ -15,9 +15,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *   <Suggestion.List />
 * </Suggestion>
 */
-const SuggestionClear = (0, react.forwardRef)(function SuggestionClear({ "aria-label": label = "Tøm", ...rest }, ref) {
+const SuggestionClear = (0, react.forwardRef)(function SuggestionClear(rest, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		"aria-label": label,
 		hidden: true,
 		ref,
 		suppressHydrationWarning: true,

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

@@ -7,7 +7,7 @@ import { ButtonHTMLAttributes } from "react";
 type SuggestionClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
   /**
    * Aria label for the clear button
-   * @default 'Tøm'
+   * @deprecated Please use `--dsc-suggestion-sr-clear` or `data-sr-clear` on Suggestion to set label.
    */
   'aria-label'?: string;
 }>;
@@ -27,7 +27,7 @@ type SuggestionClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLB
 declare const SuggestionClear: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
   /**
    * Aria label for the clear button
-   * @default 'Tøm'
+   * @deprecated Please use `--dsc-suggestion-sr-clear` or `data-sr-clear` on Suggestion to set label.
    */
   'aria-label'?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -6,7 +6,7 @@ import { OptionHTMLAttributes } from "react";
 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.
+   * If <Suggestion> has `data-creatable`, use `%s` to replace with the current input value.
    **/
   'data-empty'?: string;
 };
@@ -23,7 +23,7 @@ type SuggestionEmptyProps = DefaultProps & OptionHTMLAttributes<HTMLOptionElemen
 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.
+   * If <Suggestion> has `data-creatable`, use `%s` to replace with the current input value.
    **/
   'data-empty'?: string;
 } & import("react").RefAttributes<HTMLOptionElement>>;

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

@@ -15,7 +15,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *   <Suggestion.List />
 * </Suggestion>
 */
-const SuggestionList = (0, react.forwardRef)(function SuggestionList({ singular = "%d forslag", plural = "%d forslag", className, id, autoPlacement = true, ...rest }, ref) {
+const SuggestionList = (0, react.forwardRef)(function SuggestionList({ singular, plural, 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", {

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

@@ -8,12 +8,12 @@ import { HTMLAttributes } from "react";
 type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDataListElement>, {
   /**
    * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
-   * @default '%d forslag'
+   * @deprecated Please use `data-sr-singular` on `<Suggestion>` instead
    */
   singular?: string;
   /**
    * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
-   * @default '%d forslag'
+   * @deprecated Please use `data-sr-plural` on `<Suggestion>` instead
    */
   plural?: string;
   /**
@@ -36,12 +36,12 @@ type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDataList
 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'
+   * @deprecated Please use `data-sr-singular` on `<Suggestion>` instead
    */
   singular?: string;
   /**
    * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
-   * @default '%d forslag'
+   * @deprecated Please use `data-sr-plural` on `<Suggestion>` instead
    */
   plural?: string;
   /**

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

@@ -45,7 +45,7 @@ const Suggestion = (0, react.forwardRef)(function Suggestion({ children, classNa
 	*/
 	(0, react.useEffect)(() => {
 		const combobox = dsSuggestionRef.current;
-		const beforeChange = (event) => {
+		const beforeSelect = (event) => {
 			event.preventDefault();
 			const multiple = combobox?.multiple;
 			const data = event.detail;
@@ -53,8 +53,8 @@ const Suggestion = (0, react.forwardRef)(function Suggestion({ children, classNa
 			onSelectedChangeRef.current?.(nextItem || null);
 			if (!isControlled) setDefaultItems(sanitizeItems(nextItem));
 		};
-		combobox?.addEventListener("comboboxbeforeselect", beforeChange);
-		return () => combobox?.removeEventListener("comboboxbeforeselect", beforeChange);
+		combobox?.addEventListener("comboboxbeforeselect", beforeSelect);
+		return () => combobox?.removeEventListener("comboboxbeforeselect", beforeSelect);
 	}, [isControlled]);
 	(0, react.useEffect)(() => {
 		const combobox = dsSuggestionRef.current;

package/dist/cjs/components/tag/tag.cjs

@@ -4,6 +4,7 @@ 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");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
 //#region src/components/tag/tag.tsx
 /**
 * Use `Tag` to display categories or statuses.
@@ -11,8 +12,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @example
 * <Tag>Melk</Tag>
 */
-const Tag = (0, react.forwardRef)(function Tag({ className, variant, ...rest }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+const Tag = (0, react.forwardRef)(function Tag({ asChild, className, variant, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "span", {
 		className: (0, clsx_lite.default)("ds-tag", className),
 		ref,
 		"data-variant": variant,

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

@@ -5,6 +5,11 @@ import "../../utilities/index.cjs";
 import { HTMLAttributes } from "react";
 //#region src/components/tag/tag.d.ts
 type TagProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
   /**
    * The visual variant of the tag
    *
@@ -18,7 +23,12 @@ type TagProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
  * @example
  * <Tag>Melk</Tag>
  */
-declare const Tag: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "variant"> & {
+declare const Tag: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "asChild" | "variant"> & {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
   /**
    * The visual variant of the tag
    *

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

@@ -54,7 +54,7 @@ type TooltipProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *  Hover me
  * </Tooltip>
  */
-declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "content" | "children" | "type" | "open" | "placement" | "autoPlacement"> & {
+declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "content" | "children" | "type" | "placement" | "open" | "autoPlacement"> & {
   /**
    * The element or string that triggers the tooltip.
    *

package/dist/esm/components/Combobox/Combobox.js

@@ -17,7 +17,7 @@ import { useFloatingCombobox } from "./useFloatingCombobox.js";
 import { useFormField } from "./useFormField/useFormField.js";
 import cl from "clsx/lite";
 import { forwardRef, useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/Combobox/Combobox.tsx
@@ -241,7 +241,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
 							"aria-label": "Laster",
 							"data-size": "sm"
 						}), loadingLabel]
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [restChildren, !virtual && filteredOptionsChildren] })]
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] })]
 				})
 			})
 		})]

package/dist/esm/components/Combobox/internal/ComboboxChips.js

@@ -3,13 +3,13 @@ import { ComboboxContext } from "../ComboboxContext.js";
 import { ChipRemovable } from "../../chip/chips.js";
 import "../../chip/index.js";
 import { useContext } from "react";
-import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/components/Combobox/internal/ComboboxChips.tsx
 const ComboboxChips = () => {
 	const context = useContext(ComboboxContext);
 	if (!context) throw new Error("ComboboxContext is missing");
 	const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef } = context;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: Object.keys(selectedOptions).map((value) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: Object.keys(selectedOptions).map((value) => {
 		return /* @__PURE__ */ jsx(ChipRemovable, {
 			"data-size": size,
 			disabled,

package/dist/esm/components/avatar/avatar.d.ts

@@ -33,8 +33,14 @@ type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, Ar
   variant?: 'circle' | 'square';
   /**
    * Initials to display inside the avatar.
+   * @deprecated Please use text content as children instead
    */
   initials?: string;
+  /**
+   * Initials to display inside the avatar.
+   * @deprecated Please use text content as children instead
+   */
+  'data-initials'?: string;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
@@ -42,8 +48,6 @@ type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, Ar
   asChild?: boolean;
   /**
    * Image, icon or initials to display inside the avatar.
-   *
-   * Gets `aria-hidden="true"`
    */
   children?: ReactNode;
 }>;
@@ -51,7 +55,7 @@ type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, Ar
  * Avatars are used to represent people or entities.
  *
  * @example
- * <Avatar aria-label="John Doe" initials="JD" />
+ * <Avatar aria-label="John Doe">JD</Avatar>
  *
  * @example
  * <Avatar aria-label="John Doe">

package/dist/esm/components/avatar/avatar.js

@@ -1,14 +1,14 @@
 'use client';
 import cl from "clsx/lite";
-import { Fragment, forwardRef } from "react";
+import { forwardRef, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 //#region src/components/avatar/avatar.tsx
 /**
 * Avatars are used to represent people or entities.
 *
 * @example
-* <Avatar aria-label="John Doe" initials="JD" />
+* <Avatar aria-label="John Doe">JD</Avatar>
 *
 * @example
 * <Avatar aria-label="John Doe">
@@ -20,25 +20,21 @@ import { Slot } from "@radix-ui/react-slot";
 *  <Icon />
 * </Avatar>
 */
-const Avatar = forwardRef(function Avatar({ "aria-label": ariaLabel, "data-tooltip": dataTooltip, variant, className, children, initials, asChild, ...rest }, ref) {
-	const OuterComponent = asChild ? Slot : "span";
-	const useSlot = children && typeof children !== "string";
-	const textChild = children && typeof children === "string";
-	const Component = useSlot ? Slot : Fragment;
-	return /* @__PURE__ */ jsx(OuterComponent, {
-		ref,
+const Avatar = forwardRef(function Avatar({ "aria-label": label, "data-tooltip": tooltip, "data-initials": dataInitials, children, variant, className, initials: propInitials, asChild, ...rest }, ref) {
+	const Component = asChild ? Slot : "span";
+	const initials = propInitials ?? dataInitials;
+	const hasSlottedChildren = asChild && isValidElement(children) && children.props.children !== void 0 && children.props.children !== null;
+	return /* @__PURE__ */ jsx(Component, {
+		"aria-label": label || tooltip,
 		className: cl("ds-avatar", className),
-		"data-variant": variant,
 		"data-initials": initials,
+		"data-tooltip": tooltip,
+		"data-variant": variant,
+		ref,
 		role: asChild ? void 0 : "img",
-		"aria-label": ariaLabel || dataTooltip,
-		"data-tooltip": dataTooltip,
-		tabIndex: dataTooltip ? 0 : void 0,
+		tabIndex: tooltip ? 0 : void 0,
 		...rest,
-		children: /* @__PURE__ */ jsx(Component, {
-			...useSlot && !asChild ? { "aria-hidden": true } : {},
-			children: textChild ? /* @__PURE__ */ jsx("span", { children }) : children
-		})
+		children: asChild ? [/* @__PURE__ */ jsx(Slottable, { children }, "slottable"), hasSlottedChildren ? null : initials] : children ?? initials
 	});
 });
 //#endregion

package/dist/esm/components/avatar-stack/avatar-stack.d.ts

@@ -43,7 +43,7 @@ type AvatarStackProps = {
  *   <Avatar aria-label='name'>
  *     <BriefcaseIcon />
  *   </Avatar>
- *   <Avatar aria-label='name' initials='sm' />
+ *   <Avatar aria-label='name'>sm</Avatar>
  * </EXPERIMENTAL_AvatarStack>
  */
 declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/avatar-stack/avatar-stack.js

@@ -14,7 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *   <Avatar aria-label='name'>
 *     <BriefcaseIcon />
 *   </Avatar>
-*   <Avatar aria-label='name' initials='sm' />
+*   <Avatar aria-label='name'>sm</Avatar>
 * </EXPERIMENTAL_AvatarStack>
 */
 const EXPERIMENTAL_AvatarStack = forwardRef(function AvatarStack({ className, gap, suffix, children, avatarSize, overlap, style, expandable, ...rest }, ref) {

package/dist/esm/components/dialog/dialog.d.ts

@@ -71,7 +71,7 @@ type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDialogElem
  *   Content
  * </Dialog>
  */
-declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "closedby" | "onClose" | "open" | "closeButton" | "placement" | "modal"> & {
+declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "placement" | "open" | "closedby" | "onClose" | "closeButton" | "modal"> & {
   /**
    * Screen reader label of close button. Set false to hide the close button.
    * @default 'Lukk dialogvindu'

package/dist/esm/components/label/label.d.ts

@@ -5,6 +5,7 @@ import { LabelHTMLAttributes } from "react";
 type LabelProps = {
   /**
    * Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
+   * @deprecated as field now automatically changes font-weight based on input type
    */
   weight?: 'regular' | 'medium' | 'semibold';
   /**
@@ -22,6 +23,7 @@ type LabelProps = {
 declare const Label: import("react").ForwardRefExoticComponent<{
   /**
    * Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
+   * @deprecated as field now automatically changes font-weight based on input type
    */
   weight?: "regular" | "medium" | "semibold";
   /**

package/dist/esm/components/popover/popover.d.ts

@@ -62,7 +62,7 @@ type PopoverProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *   Content
  * </Popover>
  */
-declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "onClose" | "open" | "placement" | "onOpen" | "autoPlacement"> & {
+declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "placement" | "open" | "onClose" | "onOpen" | "autoPlacement"> & {
   /**
    * id to connect the trigger with the popover - required when not using Popover.Context.
    */

package/dist/esm/components/search/search-clear.d.ts

@@ -1,13 +1,16 @@
 
-import { ButtonProps } from "../button/button.js";
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { ButtonHTMLAttributes } from "react";
 //#region src/components/search/search-clear.d.ts
-type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
+type SearchClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
   /**
    * Aria label for the clear button
-   * @default 'Tøm'
+   * @deprecated Please use `--dsc-suggestion-sr-clear` or `data-sr-clear` on Suggestion to set label.
    */
   'aria-label'?: string;
-};
+}>;
 /**
  * SearchClear component, used to display a clear button when the search input is not empty.
  *
@@ -17,10 +20,10 @@ type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
  *   <SearchClear />
  * </Search>
  */
-declare const SearchClear: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "children" | "variant"> & {
+declare const SearchClear: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
   /**
    * Aria label for the clear button
-   * @default 'Tøm'
+   * @deprecated Please use `--dsc-suggestion-sr-clear` or `data-sr-clear` on Suggestion to set label.
    */
   'aria-label'?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/search/search-clear.js

@@ -1,5 +1,4 @@
 'use client';
-import { Button } from "../button/button.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/search/search-clear.tsx
@@ -12,12 +11,12 @@ import { jsx } from "react/jsx-runtime";
 *   <SearchClear />
 * </Search>
 */
-const SearchClear = forwardRef(function SearchClear({ "aria-label": label = "Tøm", ...rest }, ref) {
-	return /* @__PURE__ */ jsx(Button, {
-		"aria-label": label,
+const SearchClear = forwardRef(function SearchClear(rest, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		hidden: true,
 		ref,
 		type: "reset",
-		variant: "tertiary",
+		suppressHydrationWarning: true,
 		...rest
 	});
 });

package/dist/esm/components/search/search.js

@@ -24,6 +24,7 @@ const Search = forwardRef(function Search({ className, ...rest }, ref) {
 	return /* @__PURE__ */ jsx("ds-suggestion", {
 		ref,
 		class: cl("ds-search", className),
+		suppressHydrationWarning: true,
 		...rest
 	});
 });

package/dist/esm/components/suggestion/suggestion-clear.d.ts

@@ -7,7 +7,7 @@ import { ButtonHTMLAttributes } from "react";
 type SuggestionClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
   /**
    * Aria label for the clear button
-   * @default 'Tøm'
+   * @deprecated Please use `--dsc-suggestion-sr-clear` or `data-sr-clear` on Suggestion to set label.
    */
   'aria-label'?: string;
 }>;
@@ -27,7 +27,7 @@ type SuggestionClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLB
 declare const SuggestionClear: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
   /**
    * Aria label for the clear button
-   * @default 'Tøm'
+   * @deprecated Please use `--dsc-suggestion-sr-clear` or `data-sr-clear` on Suggestion to set label.
    */
   'aria-label'?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/suggestion/suggestion-clear.js

@@ -15,9 +15,8 @@ import { jsx } from "react/jsx-runtime";
 *   <Suggestion.List />
 * </Suggestion>
 */
-const SuggestionClear = forwardRef(function SuggestionClear({ "aria-label": label = "Tøm", ...rest }, ref) {
+const SuggestionClear = forwardRef(function SuggestionClear(rest, ref) {
 	return /* @__PURE__ */ jsx("button", {
-		"aria-label": label,
 		hidden: true,
 		ref,
 		suppressHydrationWarning: true,

package/dist/esm/components/suggestion/suggestion-empty.d.ts

@@ -6,7 +6,7 @@ import { OptionHTMLAttributes } from "react";
 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.
+   * If <Suggestion> has `data-creatable`, use `%s` to replace with the current input value.
    **/
   'data-empty'?: string;
 };
@@ -23,7 +23,7 @@ type SuggestionEmptyProps = DefaultProps & OptionHTMLAttributes<HTMLOptionElemen
 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.
+   * If <Suggestion> has `data-creatable`, use `%s` to replace with the current input value.
    **/
   'data-empty'?: string;
 } & import("react").RefAttributes<HTMLOptionElement>>;

package/dist/esm/components/suggestion/suggestion-list.d.ts

@@ -8,12 +8,12 @@ import { HTMLAttributes } from "react";
 type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDataListElement>, {
   /**
    * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
-   * @default '%d forslag'
+   * @deprecated Please use `data-sr-singular` on `<Suggestion>` instead
    */
   singular?: string;
   /**
    * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
-   * @default '%d forslag'
+   * @deprecated Please use `data-sr-plural` on `<Suggestion>` instead
    */
   plural?: string;
   /**
@@ -36,12 +36,12 @@ type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDataList
 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'
+   * @deprecated Please use `data-sr-singular` on `<Suggestion>` instead
    */
   singular?: string;
   /**
    * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
-   * @default '%d forslag'
+   * @deprecated Please use `data-sr-plural` on `<Suggestion>` instead
    */
   plural?: string;
   /**

package/dist/esm/components/suggestion/suggestion-list.js

@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 *   <Suggestion.List />
 * </Suggestion>
 */
-const SuggestionList = forwardRef(function SuggestionList({ singular = "%d forslag", plural = "%d forslag", className, id, autoPlacement = true, ...rest }, ref) {
+const SuggestionList = forwardRef(function SuggestionList({ singular, plural, className, id, autoPlacement = true, ...rest }, ref) {
 	const { handleFilter } = useContext(SuggestionContext);
 	useEffect(handleFilter);
 	return /* @__PURE__ */ jsx("u-datalist", {

package/dist/esm/components/suggestion/suggestion.js

@@ -43,7 +43,7 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
 	*/
 	useEffect(() => {
 		const combobox = dsSuggestionRef.current;
-		const beforeChange = (event) => {
+		const beforeSelect = (event) => {
 			event.preventDefault();
 			const multiple = combobox?.multiple;
 			const data = event.detail;
@@ -51,8 +51,8 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
 			onSelectedChangeRef.current?.(nextItem || null);
 			if (!isControlled) setDefaultItems(sanitizeItems(nextItem));
 		};
-		combobox?.addEventListener("comboboxbeforeselect", beforeChange);
-		return () => combobox?.removeEventListener("comboboxbeforeselect", beforeChange);
+		combobox?.addEventListener("comboboxbeforeselect", beforeSelect);
+		return () => combobox?.removeEventListener("comboboxbeforeselect", beforeSelect);
 	}, [isControlled]);
 	useEffect(() => {
 		const combobox = dsSuggestionRef.current;

package/dist/esm/components/tag/tag.d.ts

@@ -5,6 +5,11 @@ import "../../utilities/index.js";
 import { HTMLAttributes } from "react";
 //#region src/components/tag/tag.d.ts
 type TagProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
   /**
    * The visual variant of the tag
    *
@@ -18,7 +23,12 @@ type TagProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
  * @example
  * <Tag>Melk</Tag>
  */
-declare const Tag: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "variant"> & {
+declare const Tag: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "asChild" | "variant"> & {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
   /**
    * The visual variant of the tag
    *

package/dist/esm/components/tag/tag.js

@@ -2,6 +2,7 @@
 import cl from "clsx/lite";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
 //#region src/components/tag/tag.tsx
 /**
 * Use `Tag` to display categories or statuses.
@@ -9,8 +10,8 @@ import { jsx } from "react/jsx-runtime";
 * @example
 * <Tag>Melk</Tag>
 */
-const Tag = forwardRef(function Tag({ className, variant, ...rest }, ref) {
-	return /* @__PURE__ */ jsx("span", {
+const Tag = forwardRef(function Tag({ asChild, className, variant, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
 		className: cl("ds-tag", className),
 		ref,
 		"data-variant": variant,

package/dist/esm/components/tooltip/tooltip.d.ts

@@ -54,7 +54,7 @@ type TooltipProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *  Hover me
  * </Tooltip>
  */
-declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "content" | "children" | "type" | "open" | "placement" | "autoPlacement"> & {
+declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "content" | "children" | "type" | "placement" | "open" | "autoPlacement"> & {
   /**
    * The element or string that triggers the tooltip.
    *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.21.1",
+  "version": "1.23.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -40,34 +40,34 @@
     "access": "public"
   },
   "dependencies": {
+    "@digdir/designsystemet-types": "1.23.0",
+    "@digdir/designsystemet-web": "1.23.0",
     "@floating-ui/dom": "^1.8.0",
     "@floating-ui/react": "0.26.23",
     "@navikt/aksel-icons": "^8.16.2",
     "@radix-ui/react-slot": "^1.3.3",
-    "@tanstack/react-virtual": "^3.14.10",
-    "clsx": "^2.1.1",
-    "@digdir/designsystemet-types": "1.21.1",
-    "@digdir/designsystemet-web": "1.21.1"
+    "@tanstack/react-virtual": "^3.14.12",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
+    "@digdir/designsystemet-css": "^1.23.0",
     "@storybook/addon-docs": "10.6.0",
     "@storybook/addon-vitest": "10.6.0",
     "@storybook/react-vite": "10.6.0",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
     "@testing-library/user-event": "14.6.7",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.7",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
     "react-dropzone": "19.3.0",
     "storybook": "10.6.0",
     "tsdown": "0.22.14",
-    "typescript": "6.0.3",
-    "@digdir/designsystemet-css": "^1.21.1"
+    "typescript": "6.0.3"
   },
   "scripts": {
     "build": "tsdown",
-    "types": "tsc --noEmit"
+    "types": "tsc --build --noEmit"
   }
 }