@norges-domstoler/dds-components 0.0.0-dev-20260928125918 → 0.0.0-dev-20260929103619

package/dist/index.cjs

@@ -1189,7 +1189,7 @@ const BORDER_RADII = [
 	"button",
 	"input",
 	"surface",
-	"chip",
+	"tag",
 	"rounded",
 	"0"
 ];
@@ -1621,7 +1621,7 @@ var Paper_module_default = {
 var surface_module_default = {
 	"border-radius--button": "dds-surface-module__border-radius--button",
 	"border-radius--surface": "dds-surface-module__border-radius--surface",
-	"border-radius--chip": "dds-surface-module__border-radius--chip",
+	"border-radius--tag": "dds-surface-module__border-radius--tag",
 	"border-radius--input": "dds-surface-module__border-radius--input",
 	"border-radius--rounded": "dds-surface-module__border-radius--rounded",
 	"border-radius--0": "dds-surface-module__border-radius--0"
@@ -5891,7 +5891,7 @@ const Chip = ({ children, onClose, id, className, style, htmlProps = {}, ...rest
 		maxWidth: "100%",
 		gap: "x0.125",
 		padding: "x0.25 0 x0.25 x0.5",
-		borderRadius: "chip",
+		borderRadius: "rounded",
 		border: "border-subtle",
 		background: "surface-subtle",
 		...getBaseHTMLProps(id, cn(className, typographyStyles_module_default["body-short-medium"]), style, restHTMLprops, rest),
@@ -6544,6 +6544,10 @@ var Input_module_default = {
 	"input--medium": "dds-Input-module__input--medium",
 	"input--small": "dds-Input-module__input--small",
 	"input--xsmall": "dds-Input-module__input--xsmall",
+	"compact--medium": "dds-Input-module__compact--medium",
+	"compact--small": "dds-Input-module__compact--small",
+	"compact-with-icon--medium": "dds-Input-module__compact-with-icon--medium",
+	"compact-with-icon--small": "dds-Input-module__compact-with-icon--small",
 	"input-with-icon--large": "dds-Input-module__input-with-icon--large",
 	"input-with-icon--medium": "dds-Input-module__input-with-icon--medium",
 	"input-with-icon--small": "dds-Input-module__input-with-icon--small",
@@ -13083,17 +13087,12 @@ TabPanels.displayName = "TabPanels";
 //#region src/components/Tag/Tag.module.css
 var Tag_module_default = {
 	"container": "dds-Tag-module__container",
-	"container--with-icon": "dds-Tag-module__container--with-icon",
-	"container--default--default": "dds-Tag-module__container--default--default",
-	"container--default--strong": "dds-Tag-module__container--default--strong",
-	"container--success--default": "dds-Tag-module__container--success--default",
-	"container--success--strong": "dds-Tag-module__container--success--strong",
-	"container--danger--default": "dds-Tag-module__container--danger--default",
-	"container--danger--strong": "dds-Tag-module__container--danger--strong",
-	"container--warning--default": "dds-Tag-module__container--warning--default",
-	"container--warning--strong": "dds-Tag-module__container--warning--strong",
-	"container--info--default": "dds-Tag-module__container--info--default",
-	"container--info--strong": "dds-Tag-module__container--info--strong"
+	"container--small": "dds-Tag-module__container--small",
+	"container--medium": "dds-Tag-module__container--medium",
+	"container--outline": "dds-Tag-module__container--outline",
+	"container--subtle": "dds-Tag-module__container--subtle",
+	"container--strong": "dds-Tag-module__container--strong",
+	"container--accent-left": "dds-Tag-module__container--accent-left"
 };
 //#endregion
 //#region src/components/Tag/Tag.tsx
@@ -13102,12 +13101,42 @@ const icons = {
 	danger: ErrorIcon,
 	warning: WarningIcon,
 	success: CheckCircledIcon,
-	default: void 0
-};
-const Tag = ({ purpose = "default", appearance = "default", id, className, style, children, htmlProps, withIcon, ...rest }) => {
-	const icon = icons[purpose];
+	neutral: void 0
+};
+const Tag = ({ purpose, appearance = "outline", id, className, style, children, htmlProps, withIcon, size = "medium", color, ...rest }) => {
+	const hasColor = color !== void 0;
+	const resolvedPurpose = !hasColor ? purpose ?? "neutral" : void 0;
+	const hasResolvedPurpose = resolvedPurpose !== void 0;
+	const isDefaultPurpose = resolvedPurpose === "neutral";
+	const icon = hasResolvedPurpose ? icons[resolvedPurpose] : void 0;
+	const purposeStyleVariables = {
+		["--dds-color-tag-background-default"]: `var(--dds-color-surface-${purpose}-default)`,
+		["--dds-color-tag-background-strong"]: `var(--dds-color-surface-${purpose}-strong)`,
+		["--dds-color-tag-border-outline"]: `var(--dds-color-border-${purpose})`,
+		["--dds-color-tag-text"]: "var(--dds-color-text-on-status-default)",
+		["--dds-color-tag-icon"]: `var(--dds-color-icon-on-${purpose}-default)`
+	};
+	const defaultPurposeStyleVariables = {
+		["--dds-color-tag-background-default"]: "var(--dds-color-surface-subtle)",
+		["--dds-color-tag-background-strong"]: "var(--dds-color-surface-inverse-default)",
+		["--dds-color-tag-border-outline"]: "var(--dds-color-border-subtle)",
+		["--dds-color-tag-text"]: "var(--dds-color-text-on-inverse)"
+	};
+	const colorStyleVariables = {
+		["--dds-color-tag-background-default"]: `var(--dds-color-data-${color}-100)`,
+		["--dds-color-tag-background-strong"]: `var(--dds-color-data-${color}-300)`,
+		["--dds-color-tag-border-outline"]: `var(--dds-color-data-${color}-300)`,
+		["--dds-color-tag-text"]: `var(--dds-color-text-on-status-default)`
+	};
+	let styleVariables = {};
+	if (isDefaultPurpose) styleVariables = defaultPurposeStyleVariables;
+	else if (hasResolvedPurpose) styleVariables = purposeStyleVariables;
+	else if (hasColor) styleVariables = colorStyleVariables;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextOverflowEllipsisWrapper, {
-		...getBaseHTMLProps(id, cn(className, typographyStyles_module_default["body-short-medium"], Tag_module_default.container, withIcon && icon && Tag_module_default["container--with-icon"], Tag_module_default[`container--${purpose}--${appearance}`]), style, htmlProps, rest),
+		...getBaseHTMLProps(id, cn(className, typographyStyles_module_default[`body-short-${size}`], Tag_module_default.container, Input_module_default[`compact--${size}`], withIcon && Input_module_default[`compact-with-icon--${size}`], Tag_module_default[`container--${appearance}`], Tag_module_default[`container--${size}`]), {
+			...style,
+			...styleVariables
+		}, htmlProps, rest),
 		children: [withIcon && icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			icon,
 			iconSize: "component"