@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/tabs/tabs.js

@@ -1,6 +1,7 @@
 import { Badge } from "../badge/badge.js";
 import tabs_module_default from "./tabs.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
@@ -63,7 +64,65 @@ var Root = (t0) => {
 	} else t3 = $[15];
 	return t3;
 };
-/** The row of tabs, scrolling sideways when it outgrows its room. */
+/**
+* Lets the `List` scroll sideways once it outgrows its room.
+*
+* @example
+* <Tabs.Scroller>
+* 	<Tabs.List label="Invoice">…</Tabs.List>
+* </Tabs.Scroller>
+*/
+var Scroller = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(tabs_module_default.scroller, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/** The row of tabs; put it in a `Scroller` where it may outgrow its room. */
 var List = (t0) => {
 	const $ = c(14);
 	let children;
@@ -100,14 +159,11 @@ var List = (t0) => {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== label || $[10] !== props || $[11] !== t1 || $[12] !== t2) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			className: tabs_module_default.scroller,
-			children: /* @__PURE__ */ jsx(Tabs.List, {
-				...props,
-				"aria-label": label,
-				className: t1,
-				children: t2
-			})
+		t3 = /* @__PURE__ */ jsx(Tabs.List, {
+			...props,
+			"aria-label": label,
+			className: t1,
+			children: t2
 		});
 		$[9] = label;
 		$[10] = props;
@@ -249,17 +305,20 @@ var Panel = (t0) => {
 *
 * @example
 * <Tabs.Root defaultValue="details">
-* 	<Tabs.List label="Invoice">
-* 		<Tabs.Tab value="details">Details</Tabs.Tab>
-* 		<Tabs.Tab value="history">History<Tabs.Count>3</Tabs.Count></Tabs.Tab>
-* 		<Tabs.Indicator />
-* 	</Tabs.List>
+* 	<Tabs.Scroller>
+* 		<Tabs.List label="Invoice">
+* 			<Tabs.Tab value="details">Details</Tabs.Tab>
+* 			<Tabs.Tab value="history">History<Tabs.Count>3</Tabs.Count></Tabs.Tab>
+* 			<Tabs.Indicator />
+* 		</Tabs.List>
+* 	</Tabs.Scroller>
 * 	<Tabs.Panel value="details">…</Tabs.Panel>
 * 	<Tabs.Panel value="history">…</Tabs.Panel>
 * </Tabs.Root>
 */
 var Tabs$1 = {
 	Root,
+	Scroller,
 	List,
 	Tab,
 	Count,

package/dist/components/tabs/tabs.module.js

@@ -1,11 +1,11 @@
 import './tabs.css';// src/components/tabs/tabs.module.scss
-var root = "_root_1jg47_3";
-var scroller = "_scroller_1jg47_8";
-var list = "_list_1jg47_12";
-var tab = "_tab_1jg47_18";
-var indicator = "_indicator_1jg47_56";
-var indicatorLabels = "_indicatorLabels_1jg47_94";
-var panel = "_panel_1jg47_112";
+var root = "_root_pzyl1_3";
+var scroller = "_scroller_pzyl1_8";
+var list = "_list_pzyl1_12";
+var tab = "_tab_pzyl1_18";
+var indicator = "_indicator_pzyl1_56";
+var indicatorLabels = "_indicatorLabels_pzyl1_94";
+var panel = "_panel_pzyl1_112";
 var tabs_module_default = {
 	root,
 	scroller,

package/dist/components/tag/tag.css

@@ -1,119 +1,119 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_10znj_3[data-variant=subtle] {
-    --tag-bg: var(--sys-color-neutral-bg);
-    --tag-fg: var(--sys-color-neutral-fg);
-    --tag-border: transparent;
-  }
-  ._root_10znj_3[data-variant=solid] {
-    --tag-bg: var(--sys-color-neutral-fg);
-    --tag-fg: var(--sys-color-neutral-bg);
-    --tag-border: transparent;
-  }
-  ._root_10znj_3[data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-neutral-fg);
-    --tag-border: var(--sys-color-neutral-border);
-  }
-  ._root_10znj_3[data-tone=info][data-variant=subtle] {
-    --tag-bg: var(--sys-color-info-bg);
-    --tag-fg: var(--sys-color-info-fg);
-    --tag-border: transparent;
-  }
-  ._root_10znj_3[data-tone=info][data-variant=solid] {
-    --tag-bg: var(--sys-color-info-fg);
-    --tag-fg: var(--sys-color-info-bg);
-    --tag-border: transparent;
-  }
-  ._root_10znj_3[data-tone=info][data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-info-fg);
-    --tag-border: var(
+  ._root_3eqm4_3[data-variant=subtle] {
+    --_tag-bg: var(--sys-color-neutral-bg);
+    --_tag-fg: var(--sys-color-neutral-fg);
+    --_tag-border: transparent;
+  }
+  ._root_3eqm4_3[data-variant=solid] {
+    --_tag-bg: var(--sys-color-neutral-fg);
+    --_tag-fg: var(--sys-color-neutral-bg);
+    --_tag-border: transparent;
+  }
+  ._root_3eqm4_3[data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-neutral-fg);
+    --_tag-border: var(--sys-color-neutral-border);
+  }
+  ._root_3eqm4_3[data-tone=info][data-variant=subtle] {
+    --_tag-bg: var(--sys-color-info-bg);
+    --_tag-fg: var(--sys-color-info-fg);
+    --_tag-border: transparent;
+  }
+  ._root_3eqm4_3[data-tone=info][data-variant=solid] {
+    --_tag-bg: var(--sys-color-info-fg);
+    --_tag-fg: var(--sys-color-info-bg);
+    --_tag-border: transparent;
+  }
+  ._root_3eqm4_3[data-tone=info][data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-info-fg);
+    --_tag-border: var(
     	--sys-color-info-border
     );
   }
-  ._root_10znj_3[data-tone=success][data-variant=subtle] {
-    --tag-bg: var(--sys-color-success-bg);
-    --tag-fg: var(--sys-color-success-fg);
-    --tag-border: transparent;
+  ._root_3eqm4_3[data-tone=success][data-variant=subtle] {
+    --_tag-bg: var(--sys-color-success-bg);
+    --_tag-fg: var(--sys-color-success-fg);
+    --_tag-border: transparent;
   }
-  ._root_10znj_3[data-tone=success][data-variant=solid] {
-    --tag-bg: var(--sys-color-success-fg);
-    --tag-fg: var(--sys-color-success-bg);
-    --tag-border: transparent;
+  ._root_3eqm4_3[data-tone=success][data-variant=solid] {
+    --_tag-bg: var(--sys-color-success-fg);
+    --_tag-fg: var(--sys-color-success-bg);
+    --_tag-border: transparent;
   }
-  ._root_10znj_3[data-tone=success][data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-success-fg);
-    --tag-border: var(
+  ._root_3eqm4_3[data-tone=success][data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-success-fg);
+    --_tag-border: var(
     	--sys-color-success-border
     );
   }
-  ._root_10znj_3[data-tone=warning][data-variant=subtle] {
-    --tag-bg: var(--sys-color-warning-bg);
-    --tag-fg: var(--sys-color-warning-fg);
-    --tag-border: transparent;
+  ._root_3eqm4_3[data-tone=warning][data-variant=subtle] {
+    --_tag-bg: var(--sys-color-warning-bg);
+    --_tag-fg: var(--sys-color-warning-fg);
+    --_tag-border: transparent;
   }
-  ._root_10znj_3[data-tone=warning][data-variant=solid] {
-    --tag-bg: var(--sys-color-warning-fg);
-    --tag-fg: var(--sys-color-warning-bg);
-    --tag-border: transparent;
+  ._root_3eqm4_3[data-tone=warning][data-variant=solid] {
+    --_tag-bg: var(--sys-color-warning-fg);
+    --_tag-fg: var(--sys-color-warning-bg);
+    --_tag-border: transparent;
   }
-  ._root_10znj_3[data-tone=warning][data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-warning-fg);
-    --tag-border: var(
+  ._root_3eqm4_3[data-tone=warning][data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-warning-fg);
+    --_tag-border: var(
     	--sys-color-warning-border
     );
   }
-  ._root_10znj_3[data-tone=error][data-variant=subtle] {
-    --tag-bg: var(--sys-color-error-bg);
-    --tag-fg: var(--sys-color-error-fg);
-    --tag-border: transparent;
+  ._root_3eqm4_3[data-tone=error][data-variant=subtle] {
+    --_tag-bg: var(--sys-color-error-bg);
+    --_tag-fg: var(--sys-color-error-fg);
+    --_tag-border: transparent;
   }
-  ._root_10znj_3[data-tone=error][data-variant=solid] {
-    --tag-bg: var(--sys-color-error-fg);
-    --tag-fg: var(--sys-color-error-bg);
-    --tag-border: transparent;
+  ._root_3eqm4_3[data-tone=error][data-variant=solid] {
+    --_tag-bg: var(--sys-color-error-fg);
+    --_tag-fg: var(--sys-color-error-bg);
+    --_tag-border: transparent;
   }
-  ._root_10znj_3[data-tone=error][data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-error-fg);
-    --tag-border: var(
+  ._root_3eqm4_3[data-tone=error][data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-error-fg);
+    --_tag-border: var(
     	--sys-color-error-border
     );
   }
-  ._root_10znj_3 {
+  ._root_3eqm4_3 {
     display: inline-flex;
     align-items: center;
-    gap: var(--sys-unit-3);
+    gap: var(--tag-gap, var(--sys-unit-3));
     box-sizing: border-box;
-    min-block-size: var(--sys-unit-14);
-    border: 1px solid var(--tag-border);
-    border-radius: var(--sys-radius-full);
-    background: var(--tag-bg);
-    padding: var(--sys-unit-2) var(--sys-unit-6);
-    color: var(--tag-fg);
-    font: var(--sys-font-label-small);
-  }
-  ._root_10znj_3 {
+    min-block-size: var(--tag-min-block-size, var(--sys-unit-14));
+    border: var(--tag-border-width, 1px) solid var(--tag-border, var(--_tag-border));
+    border-radius: var(--tag-radius, var(--sys-radius-full));
+    background: var(--tag-bg, var(--_tag-bg));
+    padding: var(--tag-pad-y, var(--sys-unit-2)) var(--tag-pad-x, var(--sys-unit-6));
+    color: var(--tag-fg, var(--_tag-fg));
+    font: var(--tag-font, var(--sys-font-label-small));
+  }
+  ._root_3eqm4_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._root_10znj_3:focus-visible {
+  ._root_3eqm4_3:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._root_10znj_3[data-focus-visible] {
+  ._root_3eqm4_3[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._dot_10znj_109 {
+  ._dot_3eqm4_109 {
     flex-shrink: 0;
-    inline-size: var(--sys-unit-3);
-    block-size: var(--sys-unit-3);
-    border-radius: var(--sys-radius-circle);
-    background: currentcolor;
+    inline-size: var(--tag-dot-size, var(--sys-unit-3));
+    block-size: var(--tag-dot-size, var(--sys-unit-3));
+    border-radius: var(--tag-dot-radius, var(--sys-radius-circle));
+    background: var(--tag-dot-bg, currentcolor);
   }
-  ._icon_10znj_116 {
+  ._icon_3eqm4_116 {
     display: inline-flex;
     flex-shrink: 0;
     font-size: var(--tag-icon-size, 1em);

package/dist/components/tag/tag.module.js

@@ -1,7 +1,7 @@
 import './tag.css';// src/components/tag/tag.module.scss
-var root = "_root_10znj_3";
-var dot = "_dot_10znj_109";
-var icon = "_icon_10znj_116";
+var root = "_root_3eqm4_3";
+var dot = "_dot_3eqm4_109";
+var icon = "_icon_3eqm4_116";
 var tag_module_default = {
 	root,
 	dot,

package/dist/components/tag-group/tag-group.css

@@ -1,158 +1,158 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1xxnx_3 {
+  ._root_6fd72_3 {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--tag-group-gap, var(--sys-unit-4));
   }
-  ._list_1xxnx_9 {
+  ._list_6fd72_9 {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--tag-group-gap, var(--sys-unit-4));
   }
-  ._tag_1xxnx_15[data-variant=subtle] {
-    --tag-bg: var(--sys-color-neutral-bg);
-    --tag-fg: var(--sys-color-neutral-fg);
-    --tag-border: transparent;
-  }
-  ._tag_1xxnx_15[data-variant=solid] {
-    --tag-bg: var(--sys-color-neutral-fg);
-    --tag-fg: var(--sys-color-neutral-bg);
-    --tag-border: transparent;
-  }
-  ._tag_1xxnx_15[data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-neutral-fg);
-    --tag-border: var(--sys-color-neutral-border);
-  }
-  ._tag_1xxnx_15[data-tone=info][data-variant=subtle] {
-    --tag-bg: var(--sys-color-info-bg);
-    --tag-fg: var(--sys-color-info-fg);
-    --tag-border: transparent;
-  }
-  ._tag_1xxnx_15[data-tone=info][data-variant=solid] {
-    --tag-bg: var(--sys-color-info-fg);
-    --tag-fg: var(--sys-color-info-bg);
-    --tag-border: transparent;
-  }
-  ._tag_1xxnx_15[data-tone=info][data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-info-fg);
-    --tag-border: var(
+  ._tag_6fd72_15[data-variant=subtle] {
+    --_tag-bg: var(--sys-color-neutral-bg);
+    --_tag-fg: var(--sys-color-neutral-fg);
+    --_tag-border: transparent;
+  }
+  ._tag_6fd72_15[data-variant=solid] {
+    --_tag-bg: var(--sys-color-neutral-fg);
+    --_tag-fg: var(--sys-color-neutral-bg);
+    --_tag-border: transparent;
+  }
+  ._tag_6fd72_15[data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-neutral-fg);
+    --_tag-border: var(--sys-color-neutral-border);
+  }
+  ._tag_6fd72_15[data-tone=info][data-variant=subtle] {
+    --_tag-bg: var(--sys-color-info-bg);
+    --_tag-fg: var(--sys-color-info-fg);
+    --_tag-border: transparent;
+  }
+  ._tag_6fd72_15[data-tone=info][data-variant=solid] {
+    --_tag-bg: var(--sys-color-info-fg);
+    --_tag-fg: var(--sys-color-info-bg);
+    --_tag-border: transparent;
+  }
+  ._tag_6fd72_15[data-tone=info][data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-info-fg);
+    --_tag-border: var(
     	--sys-color-info-border
     );
   }
-  ._tag_1xxnx_15[data-tone=success][data-variant=subtle] {
-    --tag-bg: var(--sys-color-success-bg);
-    --tag-fg: var(--sys-color-success-fg);
-    --tag-border: transparent;
+  ._tag_6fd72_15[data-tone=success][data-variant=subtle] {
+    --_tag-bg: var(--sys-color-success-bg);
+    --_tag-fg: var(--sys-color-success-fg);
+    --_tag-border: transparent;
   }
-  ._tag_1xxnx_15[data-tone=success][data-variant=solid] {
-    --tag-bg: var(--sys-color-success-fg);
-    --tag-fg: var(--sys-color-success-bg);
-    --tag-border: transparent;
+  ._tag_6fd72_15[data-tone=success][data-variant=solid] {
+    --_tag-bg: var(--sys-color-success-fg);
+    --_tag-fg: var(--sys-color-success-bg);
+    --_tag-border: transparent;
   }
-  ._tag_1xxnx_15[data-tone=success][data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-success-fg);
-    --tag-border: var(
+  ._tag_6fd72_15[data-tone=success][data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-success-fg);
+    --_tag-border: var(
     	--sys-color-success-border
     );
   }
-  ._tag_1xxnx_15[data-tone=warning][data-variant=subtle] {
-    --tag-bg: var(--sys-color-warning-bg);
-    --tag-fg: var(--sys-color-warning-fg);
-    --tag-border: transparent;
+  ._tag_6fd72_15[data-tone=warning][data-variant=subtle] {
+    --_tag-bg: var(--sys-color-warning-bg);
+    --_tag-fg: var(--sys-color-warning-fg);
+    --_tag-border: transparent;
   }
-  ._tag_1xxnx_15[data-tone=warning][data-variant=solid] {
-    --tag-bg: var(--sys-color-warning-fg);
-    --tag-fg: var(--sys-color-warning-bg);
-    --tag-border: transparent;
+  ._tag_6fd72_15[data-tone=warning][data-variant=solid] {
+    --_tag-bg: var(--sys-color-warning-fg);
+    --_tag-fg: var(--sys-color-warning-bg);
+    --_tag-border: transparent;
   }
-  ._tag_1xxnx_15[data-tone=warning][data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-warning-fg);
-    --tag-border: var(
+  ._tag_6fd72_15[data-tone=warning][data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-warning-fg);
+    --_tag-border: var(
     	--sys-color-warning-border
     );
   }
-  ._tag_1xxnx_15[data-tone=error][data-variant=subtle] {
-    --tag-bg: var(--sys-color-error-bg);
-    --tag-fg: var(--sys-color-error-fg);
-    --tag-border: transparent;
+  ._tag_6fd72_15[data-tone=error][data-variant=subtle] {
+    --_tag-bg: var(--sys-color-error-bg);
+    --_tag-fg: var(--sys-color-error-fg);
+    --_tag-border: transparent;
   }
-  ._tag_1xxnx_15[data-tone=error][data-variant=solid] {
-    --tag-bg: var(--sys-color-error-fg);
-    --tag-fg: var(--sys-color-error-bg);
-    --tag-border: transparent;
+  ._tag_6fd72_15[data-tone=error][data-variant=solid] {
+    --_tag-bg: var(--sys-color-error-fg);
+    --_tag-fg: var(--sys-color-error-bg);
+    --_tag-border: transparent;
   }
-  ._tag_1xxnx_15[data-tone=error][data-variant=outline] {
-    --tag-bg: transparent;
-    --tag-fg: var(--sys-color-error-fg);
-    --tag-border: var(
+  ._tag_6fd72_15[data-tone=error][data-variant=outline] {
+    --_tag-bg: transparent;
+    --_tag-fg: var(--sys-color-error-fg);
+    --_tag-border: var(
     	--sys-color-error-border
     );
   }
-  ._tag_1xxnx_15 {
+  ._tag_6fd72_15 {
     display: inline-flex;
     align-items: center;
-    gap: var(--sys-unit-3);
+    gap: var(--tag-gap, var(--sys-unit-3));
     box-sizing: border-box;
-    min-block-size: var(--sys-unit-14);
-    border: 1px solid var(--tag-border);
-    border-radius: var(--sys-radius-full);
-    background: var(--tag-bg);
-    padding: var(--sys-unit-2) var(--sys-unit-6);
-    color: var(--tag-fg);
-    font: var(--sys-font-label-small);
-  }
-  ._tag_1xxnx_15 {
+    min-block-size: var(--tag-min-block-size, var(--sys-unit-14));
+    border: var(--tag-border-width, 1px) solid var(--tag-border, var(--_tag-border));
+    border-radius: var(--tag-radius, var(--sys-radius-full));
+    background: var(--tag-bg, var(--_tag-bg));
+    padding: var(--tag-pad-y, var(--sys-unit-2)) var(--tag-pad-x, var(--sys-unit-6));
+    color: var(--tag-fg, var(--_tag-fg));
+    font: var(--tag-font, var(--sys-font-label-small));
+  }
+  ._tag_6fd72_15 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tag_1xxnx_15:focus-visible {
+  ._tag_6fd72_15:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tag_1xxnx_15[data-focus-visible] {
+  ._tag_6fd72_15[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._remove_1xxnx_121 {
+  ._remove_6fd72_121 {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    inline-size: var(--sys-unit-10);
-    block-size: var(--sys-unit-10);
+    inline-size: var(--tag-remove-size, var(--sys-unit-10));
+    block-size: var(--tag-remove-size, var(--sys-unit-10));
     margin-block: calc(-1 * var(--sys-unit-1));
-    margin-inline-start: var(--sys-unit-1);
+    margin-inline-start: var(--tag-remove-gap, var(--sys-unit-1));
     margin-inline-end: calc(-1 * var(--sys-unit-2));
     border: 0;
-    border-radius: var(--sys-radius-circle);
-    background: none;
+    border-radius: var(--tag-remove-radius, var(--sys-radius-circle));
+    background: var(--tag-remove-bg, none);
     padding: 0;
     color: inherit;
   }
-  ._remove_1xxnx_121 {
+  ._remove_6fd72_121 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._remove_1xxnx_121:focus-visible {
+  ._remove_6fd72_121:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._remove_1xxnx_121 {
+    ._remove_6fd72_121 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._remove_1xxnx_121:hover {
-    background: color-mix(in oklch, currentcolor calc(var(--sys-state-hover) * 100%), transparent);
+  ._remove_6fd72_121:hover {
+    background: var(--tag-remove-hover-bg, color-mix(in oklch, currentcolor calc(var(--sys-state-hover) * 100%), transparent));
   }
-  ._remove_1xxnx_121:active {
-    background: color-mix(in oklch, currentcolor calc(var(--sys-state-pressed) * 100%), transparent);
+  ._remove_6fd72_121:active {
+    background: var(--tag-remove-pressed-bg, color-mix(in oklch, currentcolor calc(var(--sys-state-pressed) * 100%), transparent));
   }
-  ._remove_1xxnx_121 {
+  ._remove_6fd72_121 {
     font-size: var(--tag-group-remove-icon-size, 0.875em);
   }
 }

package/dist/components/tag-group/tag-group.module.js

@@ -1,8 +1,8 @@
 import './tag-group.css';// src/components/tag-group/tag-group.module.scss
-var root = "_root_1xxnx_3";
-var list = "_list_1xxnx_9";
-var tag = "_tag_1xxnx_15";
-var remove = "_remove_1xxnx_121";
+var root = "_root_6fd72_3";
+var list = "_list_6fd72_9";
+var tag = "_tag_6fd72_15";
+var remove = "_remove_6fd72_121";
 var tag_group_module_default = {
 	root,
 	list,