@mond-design-system/react 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/index.cjs

@@ -9,28 +9,8 @@ function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 
-// src/components/Text/Text.module.css
-var Text_default = {
-  text: "Text_text",
-  "variant-body": "Text_variant-body",
-  "variant-label": "Text_variant-label",
-  "variant-note": "Text_variant-note",
-  "variant-meta": "Text_variant-meta",
-  "variant-eyebrow": "Text_variant-eyebrow",
-  "tone-primary": "Text_tone-primary",
-  "tone-secondary": "Text_tone-secondary",
-  "tone-muted": "Text_tone-muted",
-  "tone-inverse": "Text_tone-inverse",
-  "tone-accent": "Text_tone-accent",
-  "tone-on-media": "Text_tone-on-media",
-  "tone-danger": "Text_tone-danger",
-  "tone-warning": "Text_tone-warning",
-  "tone-success": "Text_tone-success",
-  "align-left": "Text_align-left",
-  "align-center": "Text_align-center",
-  "align-right": "Text_align-right",
-  truncate: "Text_truncate"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Text/Text.module.css?mds-scoped
+var Text_module_default = { "text": "mds-Text__text", "variant-body": "mds-Text__variant-body", "variant-label": "mds-Text__variant-label", "variant-note": "mds-Text__variant-note", "variant-meta": "mds-Text__variant-meta", "variant-eyebrow": "mds-Text__variant-eyebrow", "tone-primary": "mds-Text__tone-primary", "tone-secondary": "mds-Text__tone-secondary", "tone-muted": "mds-Text__tone-muted", "tone-inverse": "mds-Text__tone-inverse", "tone-accent": "mds-Text__tone-accent", "tone-on-media": "mds-Text__tone-on-media", "tone-danger": "mds-Text__tone-danger", "tone-warning": "mds-Text__tone-warning", "tone-success": "mds-Text__tone-success", "align-left": "mds-Text__align-left", "align-center": "mds-Text__align-center", "align-right": "mds-Text__align-right", "truncate": "mds-Text__truncate" };
 
 // src/components/Text/Text.tsx
 var ELEMENT = {
@@ -58,29 +38,19 @@ function Text({
   const resolvedTone = tone ?? DEFAULT_TONE[variant] ?? "primary";
   return react.createElement(element, {
     className: cx(
-      Text_default.text,
-      Text_default[`variant-${variant}`],
-      Text_default[`tone-${resolvedTone}`],
-      align && Text_default[`align-${align}`],
-      truncate && Text_default.truncate,
+      Text_module_default.text,
+      Text_module_default[`variant-${variant}`],
+      Text_module_default[`tone-${resolvedTone}`],
+      align && Text_module_default[`align-${align}`],
+      truncate && Text_module_default.truncate,
       className
     ),
     ...rest
   });
 }
 
-// src/components/Heading/Heading.module.css
-var Heading_default = {
-  heading: "Heading_heading",
-  "variant-display": "Heading_variant-display",
-  "variant-title": "Heading_variant-title",
-  "variant-subtitle": "Heading_variant-subtitle",
-  "tone-primary": "Heading_tone-primary",
-  "tone-secondary": "Heading_tone-secondary",
-  "tone-inverse": "Heading_tone-inverse",
-  "tone-accent": "Heading_tone-accent",
-  "tone-on-media": "Heading_tone-on-media"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Heading/Heading.module.css?mds-scoped
+var Heading_module_default = { "heading": "mds-Heading__heading", "variant-display": "mds-Heading__variant-display", "variant-title": "mds-Heading__variant-title", "variant-subtitle": "mds-Heading__variant-subtitle", "tone-primary": "mds-Heading__tone-primary", "tone-secondary": "mds-Heading__tone-secondary", "tone-inverse": "mds-Heading__tone-inverse", "tone-accent": "mds-Heading__tone-accent", "tone-on-media": "mds-Heading__tone-on-media" };
 
 // src/components/Heading/Heading.tsx
 var LEVEL_VARIANT = {
@@ -98,19 +68,17 @@ function Heading({
 }) {
   return react.createElement(`h${level}`, {
     className: cx(
-      Heading_default.heading,
-      Heading_default[`variant-${variant ?? LEVEL_VARIANT[level]}`],
-      Heading_default[`tone-${tone}`],
+      Heading_module_default.heading,
+      Heading_module_default[`variant-${variant ?? LEVEL_VARIANT[level]}`],
+      Heading_module_default[`tone-${tone}`],
       className
     ),
     ...rest
   });
 }
 
-// src/components/Spinner/Spinner.module.css
-var Spinner_default = {
-  spinner: "Spinner_spinner"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Spinner/Spinner.module.css?mds-scoped
+var Spinner_module_default = { "spinner": "mds-Spinner__spinner"};
 function Spinner({
   size = 20,
   label = "Loading",
@@ -127,20 +95,15 @@ function Spinner({
     {
       role: "status",
       "aria-label": label,
-      className: cx(Spinner_default.spinner, className),
+      className: cx(Spinner_module_default.spinner, className),
       style: { ...vars, ...style },
       ...rest
     }
   );
 }
 
-// src/components/Icon/Icon.module.css
-var Icon_default = {
-  icon: "Icon_icon",
-  "size-sm": "Icon_size-sm",
-  "size-md": "Icon_size-md",
-  "size-lg": "Icon_size-lg"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Icon/Icon.module.css?mds-scoped
+var Icon_module_default = { "icon": "mds-Icon__icon", "size-sm": "mds-Icon__size-sm", "size-md": "mds-Icon__size-md", "size-lg": "mds-Icon__size-lg" };
 var IconContext = react.createContext(null);
 function IconProvider({ render, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(IconContext.Provider, { value: render, children });
@@ -158,7 +121,7 @@ function Icon({ name, size = "md", label, className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cx(Icon_default.icon, Icon_default[`size-${size}`], className),
+      className: cx(Icon_module_default.icon, Icon_module_default[`size-${size}`], className),
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
       ...rest,
       children: render?.(name, { size: SIZE_PX[size] })
@@ -166,19 +129,8 @@ function Icon({ name, size = "md", label, className, ...rest }) {
   );
 }
 
-// src/components/Button/Button.module.css
-var Button_default = {
-  button: "Button_button",
-  "size-sm": "Button_size-sm",
-  "size-md": "Button_size-md",
-  "size-lg": "Button_size-lg",
-  "variant-primary": "Button_variant-primary",
-  "variant-secondary": "Button_variant-secondary",
-  "variant-ghost": "Button_variant-ghost",
-  "variant-danger": "Button_variant-danger",
-  fullWidth: "Button_fullWidth",
-  "icon-only": "Button_icon-only"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Button/Button.module.css?mds-scoped
+var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only" };
 var SPINNER_PX = { sm: 16, md: 18, lg: 20 };
 function Button({
   variant = "primary",
@@ -203,11 +155,11 @@ function Button({
     Element,
     {
       className: cx(
-        Button_default.button,
-        Button_default[`variant-${variant}`],
-        Button_default[`size-${size}`],
-        fullWidth && Button_default.fullWidth,
-        iconOnly && Button_default["icon-only"],
+        Button_module_default.button,
+        Button_module_default[`variant-${variant}`],
+        Button_module_default[`size-${size}`],
+        fullWidth && Button_module_default.fullWidth,
+        iconOnly && Button_module_default["icon-only"],
         className
       ),
       "aria-busy": loading || void 0,
@@ -222,58 +174,78 @@ function Button({
   );
 }
 
-// src/components/Link/Link.module.css
-var Link_default = {
-  link: "Link_link",
-  "variant-inline": "Link_variant-inline",
-  "variant-standalone": "Link_variant-standalone"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Link/Link.module.css?mds-scoped
+var Link_module_default = { "link": "mds-Link__link", "variant-inline": "mds-Link__variant-inline", "variant-standalone": "mds-Link__variant-standalone", "variant-plain": "mds-Link__variant-plain", "size-xs": "mds-Link__size-xs", "size-sm": "mds-Link__size-sm", "size-base": "mds-Link__size-base", "size-lg": "mds-Link__size-lg", "size-xl": "mds-Link__size-xl" };
 function Link({
   variant = "inline",
+  size,
   external = false,
-  as: Element = "a",
-  className,
+  as,
   ...rest
 }) {
+  const Element = as ?? "a";
+  const { className, type, ...others } = rest;
   const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+  const typeProps = Element === "button" ? { type: type ?? "button" } : type !== void 0 ? { type } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
     Element,
     {
-      className: cx(Link_default.link, Link_default[`variant-${variant}`], className),
+      className: cx(
+        Link_module_default.link,
+        Link_module_default[`variant-${variant}`],
+        size && Link_module_default[`size-${size}`],
+        className
+      ),
       ...externalProps,
-      ...rest
+      ...others,
+      ...typeProps
     }
   );
 }
 
-// src/components/Avatar/Avatar.module.css
-var Avatar_default = {
-  avatar: "Avatar_avatar",
-  "size-sm": "Avatar_size-sm",
-  "size-md": "Avatar_size-md",
-  "size-lg": "Avatar_size-lg",
-  image: "Avatar_image",
-  initials: "Avatar_initials"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Avatar/Avatar.module.css?mds-scoped
+var Avatar_module_default = { "avatar": "mds-Avatar__avatar", "size-xs": "mds-Avatar__size-xs", "size-sm": "mds-Avatar__size-sm", "size-md": "mds-Avatar__size-md", "size-lg": "mds-Avatar__size-lg", "size-xl": "mds-Avatar__size-xl", "tone-1": "mds-Avatar__tone-1", "tone-2": "mds-Avatar__tone-2", "tone-3": "mds-Avatar__tone-3", "tone-4": "mds-Avatar__tone-4", "tone-5": "mds-Avatar__tone-5", "image": "mds-Avatar__image", "initials": "mds-Avatar__initials" };
 function initials(name) {
   const words = name.trim().split(/\s+/).filter(Boolean);
   const first = words[0]?.[0] ?? "";
   const last = words.length > 1 ? words.at(-1)?.[0] ?? "" : "";
   return (first + last).toUpperCase();
 }
-function Avatar({ name, src, size = "md", className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Avatar_default.avatar, Avatar_default[`size-${size}`], className), ...rest, children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: Avatar_default.image, src, alt: name }) : /* @__PURE__ */ jsxRuntime.jsx("span", { role: "img", "aria-label": name, className: Avatar_default.initials, children: initials(name) }) });
+function Avatar({
+  name,
+  src,
+  size = "md",
+  tone,
+  decorative = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cx(
+        Avatar_module_default.avatar,
+        Avatar_module_default[`size-${size}`],
+        tone !== void 0 && Avatar_module_default[`tone-${tone}`],
+        className
+      ),
+      "aria-hidden": decorative || void 0,
+      ...rest,
+      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: Avatar_module_default.image, src, alt: decorative ? "" : name }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          role: decorative ? void 0 : "img",
+          "aria-label": decorative ? void 0 : name,
+          className: Avatar_module_default.initials,
+          children: initials(name)
+        }
+      )
+    }
+  );
 }
 
-// src/components/AvatarGroup/AvatarGroup.module.css
-var AvatarGroup_default = {
-  group: "AvatarGroup_group",
-  item: "AvatarGroup_item",
-  overflow: "AvatarGroup_overflow",
-  "size-sm": "AvatarGroup_size-sm",
-  "size-md": "AvatarGroup_size-md",
-  "size-lg": "AvatarGroup_size-lg"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/AvatarGroup/AvatarGroup.module.css?mds-scoped
+var AvatarGroup_module_default = { "group": "mds-AvatarGroup__group", "item": "mds-AvatarGroup__item", "overflow": "mds-AvatarGroup__overflow", "size-xs": "mds-AvatarGroup__size-xs", "size-sm": "mds-AvatarGroup__size-sm", "size-md": "mds-AvatarGroup__size-md", "size-lg": "mds-AvatarGroup__size-lg", "size-xl": "mds-AvatarGroup__size-xl" };
 function AvatarGroup({
   children,
   max = 4,
@@ -284,12 +256,12 @@ function AvatarGroup({
   const all = react.Children.toArray(children);
   const visible = all.slice(0, max);
   const hidden = all.length - visible.length;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(AvatarGroup_default.group, className), ...rest, children: [
-    visible.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: AvatarGroup_default.item, children: child }, i)),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(AvatarGroup_module_default.group, className), ...rest, children: [
+    visible.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: AvatarGroup_module_default.item, children: child }, i)),
     hidden > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
-        className: cx(AvatarGroup_default.item, AvatarGroup_default.overflow, AvatarGroup_default[`size-${size}`]),
+        className: cx(AvatarGroup_module_default.item, AvatarGroup_module_default.overflow, AvatarGroup_module_default[`size-${size}`]),
         "aria-label": `${hidden} more`,
         children: [
           "+",
@@ -300,28 +272,14 @@ function AvatarGroup({
   ] });
 }
 
-// src/components/Badge/Badge.module.css
-var Badge_default = {
-  badge: "Badge_badge",
-  "tone-neutral": "Badge_tone-neutral",
-  "tone-accent": "Badge_tone-accent",
-  "tone-danger": "Badge_tone-danger",
-  "tone-warning": "Badge_tone-warning",
-  "tone-success": "Badge_tone-success"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Badge/Badge.module.css?mds-scoped
+var Badge_module_default = { "badge": "mds-Badge__badge", "tone-neutral": "mds-Badge__tone-neutral", "tone-accent": "mds-Badge__tone-accent", "tone-highlight": "mds-Badge__tone-highlight", "tone-danger": "mds-Badge__tone-danger", "tone-warning": "mds-Badge__tone-warning", "tone-success": "mds-Badge__tone-success" };
 function Badge({ tone = "neutral", className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Badge_default.badge, Badge_default[`tone-${tone}`], className), ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Badge_module_default.badge, Badge_module_default[`tone-${tone}`], className), ...rest });
 }
 
-// src/components/Chip/Chip.module.css
-var Chip_default = {
-  chip: "Chip_chip",
-  "variant-soft": "Chip_variant-soft",
-  "variant-outline": "Chip_variant-outline",
-  selected: "Chip_selected",
-  interactive: "Chip_interactive",
-  disabled: "Chip_disabled"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/Chip.module.css?mds-scoped
+var Chip_module_default = { "chip": "mds-Chip__chip", "variant-soft": "mds-Chip__variant-soft", "variant-outline": "mds-Chip__variant-outline", "variant-highlight": "mds-Chip__variant-highlight", "selected": "mds-Chip__selected", "interactive": "mds-Chip__interactive", "disabled": "mds-Chip__disabled" };
 function Chip({
   children,
   variant = "soft",
@@ -335,11 +293,11 @@ function Chip({
   const interactive = typeof onClick === "function";
   const shared = {
     className: cx(
-      Chip_default.chip,
-      Chip_default[`variant-${variant}`],
-      selected && Chip_default.selected,
-      interactive && !disabled && Chip_default.interactive,
-      disabled && Chip_default.disabled,
+      Chip_module_default.chip,
+      Chip_module_default[`variant-${variant}`],
+      selected && Chip_module_default.selected,
+      interactive && !disabled && Chip_module_default.interactive,
+      disabled && Chip_module_default.disabled,
       className
     ),
     ...rest
@@ -361,27 +319,14 @@ function Chip({
   ) : /* @__PURE__ */ jsxRuntime.jsx("span", { ...shared, children: content });
 }
 
-// src/components/Chip/ChipGroup.module.css
-var ChipGroup_default = {
-  group: "ChipGroup_group",
-  "gap-hairline": "ChipGroup_gap-hairline",
-  "gap-tight": "ChipGroup_gap-tight",
-  "gap-base": "ChipGroup_gap-base"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/ChipGroup.module.css?mds-scoped
+var ChipGroup_module_default = { "group": "mds-ChipGroup__group", "gap-hairline": "mds-ChipGroup__gap-hairline", "gap-tight": "mds-ChipGroup__gap-tight", "gap-base": "mds-ChipGroup__gap-base" };
 function ChipGroup({ children, gap = "tight", className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(ChipGroup_default.group, ChipGroup_default[`gap-${gap}`], className), ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(ChipGroup_module_default.group, ChipGroup_module_default[`gap-${gap}`], className), ...rest, children });
 }
 
-// src/components/Chip/ChipBar.module.css
-var ChipBar_default = {
-  bar: "ChipBar_bar",
-  "gap-hairline": "ChipBar_gap-hairline",
-  "gap-tight": "ChipBar_gap-tight",
-  "gap-base": "ChipBar_gap-base",
-  bordered: "ChipBar_bordered",
-  fade: "ChipBar_fade",
-  item: "ChipBar_item"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/ChipBar.module.css?mds-scoped
+var ChipBar_module_default = { "bar": "mds-ChipBar__bar", "gap-hairline": "mds-ChipBar__gap-hairline", "gap-tight": "mds-ChipBar__gap-tight", "gap-base": "mds-ChipBar__gap-base", "bordered": "mds-ChipBar__bordered", "fade": "mds-ChipBar__fade", "item": "mds-ChipBar__item" };
 function ChipBar({
   children,
   gap = "tight",
@@ -393,20 +338,15 @@ function ChipBar({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cx(ChipBar_default.bar, ChipBar_default[`gap-${gap}`], bordered && ChipBar_default.bordered, fade && ChipBar_default.fade, className),
+      className: cx(ChipBar_module_default.bar, ChipBar_module_default[`gap-${gap}`], bordered && ChipBar_module_default.bordered, fade && ChipBar_module_default.fade, className),
       ...rest,
-      children: react.Children.map(children, (child) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: ChipBar_default.item, children: child }))
+      children: react.Children.map(children, (child) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: ChipBar_module_default.item, children: child }))
     }
   );
 }
 
-// src/components/CountButton/CountButton.module.css
-var CountButton_default = {
-  button: "CountButton_button",
-  "tone-accent": "CountButton_tone-accent",
-  "tone-danger": "CountButton_tone-danger",
-  glyph: "CountButton_glyph"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/CountButton/CountButton.module.css?mds-scoped
+var CountButton_module_default = { "button": "mds-CountButton__button", "tone-accent": "mds-CountButton__tone-accent", "tone-danger": "mds-CountButton__tone-danger", "glyph": "mds-CountButton__glyph" };
 var SPINNER_PX2 = 20;
 function CountButton({
   icon,
@@ -428,24 +368,18 @@ function CountButton({
       "aria-label": label,
       "aria-pressed": isToggle ? active : void 0,
       "aria-busy": loading || void 0,
-      className: cx(CountButton_default.button, active && CountButton_default[`tone-${tone}`], className),
+      className: cx(CountButton_module_default.button, active && CountButton_module_default[`tone-${tone}`], className),
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX2, label: "", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: CountButton_default.glyph, children: icon }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX2, label: "", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: CountButton_module_default.glyph, children: icon }),
         children != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : null
       ]
     }
   );
 }
 
-// src/components/Field/Field.module.css
-var Field_default = {
-  field: "Field_field",
-  label: "Field_label",
-  required: "Field_required",
-  message: "Field_message",
-  error: "Field_error"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Field/Field.module.css?mds-scoped
+var Field_module_default = { "field": "mds-Field__field", "label": "mds-Field__label", "required": "mds-Field__required", "message": "mds-Field__message", "error": "mds-Field__error" };
 var FieldContext = react.createContext(null);
 function useFieldContext() {
   return react.useContext(FieldContext);
@@ -454,10 +388,10 @@ function Field({ label, children, hint, error, required = false, className }) {
   const id = react.useId();
   const messageId = `${id}-message`;
   const message = error ?? hint;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(Field_default.field, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: Field_default.label, htmlFor: id, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(Field_module_default.field, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: Field_module_default.label, htmlFor: id, children: [
       label,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Field_default.required, "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Field_module_default.required, "aria-hidden": "true", children: "*" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       FieldContext.Provider,
@@ -466,34 +400,27 @@ function Field({ label, children, hint, error, required = false, className }) {
         children
       }
     ),
-    message && /* @__PURE__ */ jsxRuntime.jsx("span", { id: messageId, className: cx(Field_default.message, error !== void 0 && Field_default.error), children: message })
+    message && /* @__PURE__ */ jsxRuntime.jsx("span", { id: messageId, className: cx(Field_module_default.message, error !== void 0 && Field_module_default.error), children: message })
   ] });
 }
 
-// src/components/Select/Select.module.css
-var Select_default = {
-  wrap: "Select_wrap",
-  select: "Select_select",
-  "size-sm": "Select_size-sm",
-  "size-md": "Select_size-md",
-  "size-lg": "Select_size-lg",
-  chevron: "Select_chevron"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Select/Select.module.css?mds-scoped
+var Select_module_default = { "wrap": "mds-Select__wrap", "select": "mds-Select__select", "size-sm": "mds-Select__size-sm", "size-md": "mds-Select__size-md", "size-lg": "mds-Select__size-lg", "chevron": "mds-Select__chevron" };
 function Select({ size = "md", className, children, ...rest }) {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Select_default.wrap, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Select_module_default.wrap, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "select",
       {
         id: rest.id ?? field?.id,
         "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
         "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
-        className: cx(Select_default.select, Select_default[`size-${size}`], className),
+        className: cx(Select_module_default.select, Select_module_default[`size-${size}`], className),
         ...rest,
         children
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Select_default.chevron, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Select_module_default.chevron, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })
   ] });
 }
 var OverlayHistoryContext = react.createContext(null);
@@ -563,14 +490,10 @@ function usePresence(open, durationMs) {
   return { mounted: open || mounted, visible: open };
 }
 
-// src/components/Overlay/Overlay.module.css
-var Overlay_default = {
-  scrim: "Overlay_scrim",
-  "variant-modal": "Overlay_variant-modal",
-  "variant-sheet": "Overlay_variant-sheet"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Overlay/Overlay.module.css?mds-scoped
+var Overlay_module_default = { "scrim": "mds-Overlay__scrim", "variant-modal": "mds-Overlay__variant-modal", "variant-sheet": "mds-Overlay__variant-sheet" };
 var OVERLAY_EXIT_MS = 200;
-function Overlay({ open, onClose, label, variant, closeOnScrimClick, panelClassName, children }) {
+function Overlay({ open, onClose, label, variant, role = "dialog", closeOnScrimClick, panelClassName, children }) {
   const { mounted, visible } = usePresence(open, OVERLAY_EXIT_MS);
   const ref = useOverlay({ open, onClose });
   if (!mounted) return null;
@@ -578,7 +501,7 @@ function Overlay({ open, onClose, label, variant, closeOnScrimClick, panelClassN
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cx(Overlay_default.scrim, Overlay_default[`variant-${variant}`]),
+        className: cx(Overlay_module_default.scrim, Overlay_module_default[`variant-${variant}`]),
         "data-open": visible || void 0,
         "data-testid": "mds-scrim",
         onClick: closeOnScrimClick ? onClose : void 0,
@@ -586,7 +509,7 @@ function Overlay({ open, onClose, label, variant, closeOnScrimClick, panelClassN
           "div",
           {
             ref,
-            role: "dialog",
+            role,
             "aria-modal": "true",
             "aria-label": label,
             tabIndex: -1,
@@ -602,13 +525,8 @@ function Overlay({ open, onClose, label, variant, closeOnScrimClick, panelClassN
   );
 }
 
-// src/components/Sheet/Sheet.module.css
-var Sheet_default = {
-  panel: "Sheet_panel",
-  header: "Sheet_header",
-  body: "Sheet_body",
-  footer: "Sheet_footer"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Sheet/Sheet.module.css?mds-scoped
+var Sheet_module_default = { "panel": "mds-Sheet__panel", "header": "mds-Sheet__header", "body": "mds-Sheet__body", "footer": "mds-Sheet__footer", "headerTitle": "mds-Sheet__headerTitle", "close": "mds-Sheet__close", "closeGlyph": "mds-Sheet__closeGlyph" };
 function Sheet({ open, onClose, label, closeOnScrimClick = true, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Overlay,
@@ -618,41 +536,26 @@ function Sheet({ open, onClose, label, closeOnScrimClick = true, children }) {
       label,
       variant: "sheet",
       closeOnScrimClick,
-      panelClassName: Sheet_default.panel,
+      panelClassName: Sheet_module_default.panel,
       children
     }
   );
 }
-function SheetHeader({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sheet_default.header, children });
+function SheetHeader({ children, onClose, closeLabel }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sheet_module_default.header, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Sheet_module_default.headerTitle, children }),
+    onClose !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": closeLabel, className: Sheet_module_default.close, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Sheet_module_default.closeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }) })
+  ] });
 }
 function SheetBody({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sheet_default.body, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sheet_module_default.body, children });
 }
 function SheetFooter({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sheet_default.footer, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sheet_module_default.footer, children });
 }
 
-// src/components/DateTimePicker/DateTimePicker.module.css
-var DateTimePicker_default = {
-  trigger: "DateTimePicker_trigger",
-  hasValue: "DateTimePicker_hasValue",
-  triggerLabel: "DateTimePicker_triggerLabel",
-  glyph: "DateTimePicker_glyph",
-  timeRow: "DateTimePicker_timeRow",
-  grow: "DateTimePicker_grow",
-  meridiem: "DateTimePicker_meridiem",
-  colon: "DateTimePicker_colon",
-  calendarHeader: "DateTimePicker_calendarHeader",
-  monthLabel: "DateTimePicker_monthLabel",
-  weekdays: "DateTimePicker_weekdays",
-  weekday: "DateTimePicker_weekday",
-  grid: "DateTimePicker_grid",
-  day: "DateTimePicker_day",
-  today: "DateTimePicker_today",
-  selected: "DateTimePicker_selected",
-  outside: "DateTimePicker_outside"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DateTimePicker/DateTimePicker.module.css?mds-scoped
+var DateTimePicker_module_default = { "trigger": "mds-DateTimePicker__trigger", "hasValue": "mds-DateTimePicker__hasValue", "triggerLabel": "mds-DateTimePicker__triggerLabel", "glyph": "mds-DateTimePicker__glyph", "timeRow": "mds-DateTimePicker__timeRow", "grow": "mds-DateTimePicker__grow", "meridiem": "mds-DateTimePicker__meridiem", "colon": "mds-DateTimePicker__colon", "calendarHeader": "mds-DateTimePicker__calendarHeader", "monthLabel": "mds-DateTimePicker__monthLabel", "weekdays": "mds-DateTimePicker__weekdays", "weekday": "mds-DateTimePicker__weekday", "grid": "mds-DateTimePicker__grid", "day": "mds-DateTimePicker__day", "today": "mds-DateTimePicker__today", "selected": "mds-DateTimePicker__selected", "outside": "mds-DateTimePicker__outside" };
 var DEFAULT_LABELS = {
   dialog: "Pick date and time",
   previousMonth: "Previous month",
@@ -718,13 +621,13 @@ function minuteOptions(step) {
 function pad2(n) {
   return String(n).padStart(2, "0");
 }
-var chevronLeft = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_default.glyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3l-5 5 5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_default.glyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3l5 5-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var calendarGlyph = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_default.glyph, children: [
+var chevronLeft = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_module_default.glyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3l-5 5 5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_module_default.glyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3l5 5-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var calendarGlyph = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_module_default.glyph, children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2.5", y: "3.5", width: "11", height: "10", rx: "1.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
 ] });
-var clockGlyph = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_default.glyph, children: [
+var clockGlyph = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_module_default.glyph, children: [
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "5.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v3.25l2 1.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
@@ -741,6 +644,7 @@ function DateTimePicker({
   labels
 }) {
   const text = { ...DEFAULT_LABELS, ...labels };
+  const field = useFieldContext();
   const intl = react.useMemo(() => localeData(locale), [locale]);
   const [open, setOpen] = react.useState(false);
   const [draft, setDraft] = react.useState(() => /* @__PURE__ */ new Date());
@@ -896,7 +800,7 @@ function DateTimePicker({
         "aria-pressed": isSelected,
         onClick: inMonth ? () => pickDay(cell.getDate()) : void 0,
         onKeyDown: inMonth && !isDisabled ? (e) => onDayKeyDown(e, cell) : void 0,
-        className: cx(DateTimePicker_default.day, isToday && DateTimePicker_default.today, isSelected && DateTimePicker_default.selected, !inMonth && DateTimePicker_default.outside),
+        className: cx(DateTimePicker_module_default.day, isToday && DateTimePicker_module_default.today, isSelected && DateTimePicker_module_default.selected, !inMonth && DateTimePicker_module_default.outside),
         children: cell.getDate()
       },
       `c-${i}`
@@ -906,41 +810,42 @@ function DateTimePicker({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
-        id,
+        id: id ?? field?.id,
         type: "button",
         disabled,
+        "aria-describedby": field?.describedBy,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         "aria-label": ariaLabel ? `${ariaLabel}: ${value ? intl.full.format(new Date(value)) : placeholder}` : void 0,
         onClick: openPicker,
-        className: cx(DateTimePicker_default.trigger, value && DateTimePicker_default.hasValue),
+        className: cx(DateTimePicker_module_default.trigger, value && DateTimePicker_module_default.hasValue),
         children: [
           calendarGlyph,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_default.triggerLabel, children: value ? intl.full.format(new Date(value)) : placeholder })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_module_default.triggerLabel, children: value ? intl.full.format(new Date(value)) : placeholder })
         ]
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onClose: () => setOpen(false), label: ariaLabel ?? text.dialog, children: [
       /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: intl.full.format(draft) }),
       /* @__PURE__ */ jsxRuntime.jsxs(SheetBody, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DateTimePicker_default.timeRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DateTimePicker_module_default.timeRow, children: [
           clockGlyph,
           intl.hour12 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Select, { "aria-label": text.hour, value: String(h12), onChange: (e) => setHour(e.target.value), className: DateTimePicker_default.grow, children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(i + 1), children: i + 1 }, i + 1)) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_default.colon, "aria-hidden": "true", children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Select, { "aria-label": text.minute, value: String(draft.getMinutes()), onChange: (e) => setMinute(e.target.value), className: DateTimePicker_default.grow, children: minuteOptions(minuteStep).map((m) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(m), children: pad2(m) }, m)) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Select, { "aria-label": text.dayPeriod, value: isPM ? "pm" : "am", onChange: (e) => setMeridiem(e.target.value), className: DateTimePicker_default.meridiem, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Select, { "aria-label": text.hour, value: String(h12), onChange: (e) => setHour(e.target.value), className: DateTimePicker_module_default.grow, children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(i + 1), children: i + 1 }, i + 1)) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_module_default.colon, "aria-hidden": "true", children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Select, { "aria-label": text.minute, value: String(draft.getMinutes()), onChange: (e) => setMinute(e.target.value), className: DateTimePicker_module_default.grow, children: minuteOptions(minuteStep).map((m) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(m), children: pad2(m) }, m)) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Select, { "aria-label": text.dayPeriod, value: isPM ? "pm" : "am", onChange: (e) => setMeridiem(e.target.value), className: DateTimePicker_module_default.meridiem, children: [
               /* @__PURE__ */ jsxRuntime.jsx("option", { value: "am", children: intl.dayPeriods[0] }),
               /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pm", children: intl.dayPeriods[1] })
             ] })
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Select, { "aria-label": text.hour, value: String(h24), onChange: (e) => setHour(e.target.value), className: DateTimePicker_default.grow, children: Array.from({ length: 24 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(i), children: pad2(i) }, i)) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_default.colon, "aria-hidden": "true", children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Select, { "aria-label": text.minute, value: String(draft.getMinutes()), onChange: (e) => setMinute(e.target.value), className: DateTimePicker_default.grow, children: minuteOptions(minuteStep).map((m) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(m), children: pad2(m) }, m)) })
+            /* @__PURE__ */ jsxRuntime.jsx(Select, { "aria-label": text.hour, value: String(h24), onChange: (e) => setHour(e.target.value), className: DateTimePicker_module_default.grow, children: Array.from({ length: 24 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(i), children: pad2(i) }, i)) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_module_default.colon, "aria-hidden": "true", children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Select, { "aria-label": text.minute, value: String(draft.getMinutes()), onChange: (e) => setMinute(e.target.value), className: DateTimePicker_module_default.grow, children: minuteOptions(minuteStep).map((m) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(m), children: pad2(m) }, m)) })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": intl.monthTitle.format(first), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DateTimePicker_default.calendarHeader, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DateTimePicker_module_default.calendarHeader, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
@@ -953,11 +858,11 @@ function DateTimePicker({
                 children: chevronLeft
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_default.monthLabel, children: intl.monthTitle.format(first) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_module_default.monthLabel, children: intl.monthTitle.format(first) }),
             /* @__PURE__ */ jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": text.nextMonth, variant: "ghost", size: "sm", onClick: () => shiftMonth(1), children: chevronRight })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: DateTimePicker_default.weekdays, children: intl.weekdays.map((w, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: DateTimePicker_default.weekday, children: w }, `wd-${i}`)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: DateTimePicker_default.grid, children: dayCells })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: DateTimePicker_module_default.weekdays, children: intl.weekdays.map((w, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: DateTimePicker_module_default.weekday, children: w }, `wd-${i}`)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: DateTimePicker_module_default.grid, children: dayCells })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { children: [
@@ -968,56 +873,41 @@ function DateTimePicker({
   ] });
 }
 
-// src/components/Tag/Tag.module.css
-var Tag_default = {
-  tag: "Tag_tag",
-  "tone-accent": "Tag_tone-accent",
-  remove: "Tag_remove",
-  removeGlyph: "Tag_removeGlyph"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tag/Tag.module.css?mds-scoped
+var Tag_module_default = { "tag": "mds-Tag__tag", "tone-accent": "mds-Tag__tone-accent", "remove": "mds-Tag__remove", "removeGlyph": "mds-Tag__removeGlyph" };
 function Tag({ children, tone = "neutral", onRemove, className, ...rest }) {
   const text = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(Tag_default.tag, Tag_default[`tone-${tone}`], className), ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(Tag_module_default.tag, Tag_module_default[`tone-${tone}`], className), ...rest, children: [
     children,
     onRemove && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
-        className: Tag_default.remove,
+        className: Tag_module_default.remove,
         "aria-label": text ? `Remove ${text}` : "Remove",
         onClick: onRemove,
-        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Tag_default.removeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Tag_module_default.removeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
       }
     )
   ] });
 }
 
-// src/components/Divider/Divider.module.css
-var Divider_default = {
-  divider: "Divider_divider",
-  horizontal: "Divider_horizontal",
-  vertical: "Divider_vertical"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Divider/Divider.module.css?mds-scoped
+var Divider_module_default = { "divider": "mds-Divider__divider", "horizontal": "mds-Divider__horizontal", "vertical": "mds-Divider__vertical" };
 function Divider({ orientation = "horizontal", className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       role: "separator",
       "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
-      className: cx(Divider_default.divider, Divider_default[orientation], className),
+      className: cx(Divider_module_default.divider, Divider_module_default[orientation], className),
       ...rest
     }
   );
 }
 
-// src/components/Skeleton/Skeleton.module.css
-var Skeleton_default = {
-  skeleton: "Skeleton_skeleton",
-  pulse: "Skeleton_pulse",
-  "variant-text": "Skeleton_variant-text",
-  "variant-rect": "Skeleton_variant-rect",
-  "variant-circle": "Skeleton_variant-circle"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Skeleton/Skeleton.module.css?mds-scoped
+var Skeleton_module_default = { "skeleton": "mds-Skeleton__skeleton", "pulse": "mds-Skeleton__pulse", "variant-text": "mds-Skeleton__variant-text", "variant-rect": "mds-Skeleton__variant-rect", "variant-circle": "mds-Skeleton__variant-circle" };
 function Skeleton({
   variant = "text",
   width,
@@ -1034,18 +924,15 @@ function Skeleton({
     "span",
     {
       "aria-hidden": "true",
-      className: cx(Skeleton_default.skeleton, Skeleton_default[`variant-${variant}`], className),
+      className: cx(Skeleton_module_default.skeleton, Skeleton_module_default[`variant-${variant}`], className),
       style: { ...vars, ...style },
       ...rest
     }
   );
 }
 
-// src/components/ProgressBar/ProgressBar.module.css
-var ProgressBar_default = {
-  track: "ProgressBar_track",
-  fill: "ProgressBar_fill",
-  indeterminate: "ProgressBar_indeterminate"};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ProgressBar/ProgressBar.module.css?mds-scoped
+var ProgressBar_module_default = { "track": "mds-ProgressBar__track", "fill": "mds-ProgressBar__fill", "indeterminate": "mds-ProgressBar__indeterminate"};
 function ProgressBar({
   value = 0,
   label,
@@ -1063,50 +950,60 @@ function ProgressBar({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": indeterminate ? void 0 : clamped,
-      className: cx(ProgressBar_default.track, indeterminate && ProgressBar_default.indeterminate, className),
+      className: cx(ProgressBar_module_default.track, indeterminate && ProgressBar_module_default.indeterminate, className),
       style: { ...{ "--progress": `${clamped}%` }, ...style },
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ProgressBar_default.fill })
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ProgressBar_module_default.fill })
     }
   );
 }
 
-// src/components/Input/Input.module.css
-var Input_default = {
-  input: "Input_input",
-  "size-sm": "Input_size-sm",
-  "size-md": "Input_size-md",
-  "size-lg": "Input_size-lg"
-};
-function Input({ size = "md", className, ...rest }) {
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Input/Input.module.css?mds-scoped
+var Input_module_default = { "input": "mds-Input__input", "size-sm": "mds-Input__size-sm", "size-md": "mds-Input__size-md", "size-lg": "mds-Input__size-lg", "iconWrap": "mds-Input__iconWrap", "icon": "mds-Input__icon", "iconLeft": "mds-Input__iconLeft", "iconRight": "mds-Input__iconRight", "with-icon-left": "mds-Input__with-icon-left", "with-icon-right": "mds-Input__with-icon-right" };
+function Input({
+  size = "md",
+  invalid,
+  iconLeft,
+  iconRight,
+  className,
+  ...rest
+}) {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const input = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       id: rest.id ?? field?.id,
       "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
-      "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
-      className: cx(Input_default.input, Input_default[`size-${size}`], className),
+      "aria-invalid": rest["aria-invalid"] ?? ((invalid ?? field?.invalid) || void 0),
+      className: cx(
+        Input_module_default.input,
+        Input_module_default[`size-${size}`],
+        iconLeft != null && Input_module_default["with-icon-left"],
+        iconRight != null && Input_module_default["with-icon-right"],
+        className
+      ),
       ...rest
     }
   );
+  if (iconLeft == null && iconRight == null) return input;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Input_module_default.iconWrap, children: [
+    input,
+    iconLeft != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconLeft), "aria-hidden": "true", children: iconLeft }),
+    iconRight != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight })
+  ] });
 }
 
-// src/components/PasswordInput/PasswordInput.module.css
-var PasswordInput_default = {
-  wrap: "PasswordInput_wrap",
-  input: "PasswordInput_input",
-  toggle: "PasswordInput_toggle"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/PasswordInput/PasswordInput.module.css?mds-scoped
+var PasswordInput_module_default = { "wrap": "mds-PasswordInput__wrap", "input": "mds-PasswordInput__input", "toggle": "mds-PasswordInput__toggle" };
 function PasswordInput({ className, ...rest }) {
   const [visible, setVisible] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: PasswordInput_default.wrap, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Input, { ...rest, type: visible ? "text" : "password", className: cx(PasswordInput_default.input, className) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: PasswordInput_module_default.wrap, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Input, { ...rest, type: visible ? "text" : "password", className: cx(PasswordInput_module_default.input, className) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
-        className: PasswordInput_default.toggle,
+        className: PasswordInput_module_default.toggle,
         "aria-label": visible ? "Hide password" : "Show password",
         "aria-pressed": visible,
         onClick: () => setVisible((v) => !v),
@@ -1130,12 +1027,8 @@ function PasswordInput({ className, ...rest }) {
   ] });
 }
 
-// src/components/Textarea/Textarea.module.css
-var Textarea_default = {
-  textarea: "Textarea_textarea",
-  wrap: "Textarea_wrap",
-  count: "Textarea_count"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Textarea/Textarea.module.css?mds-scoped
+var Textarea_module_default = { "textarea": "mds-Textarea__textarea", "wrap": "mds-Textarea__wrap", "count": "mds-Textarea__count" };
 function Textarea({ rows = 3, showCount = false, className, ...rest }) {
   const field = useFieldContext();
   const [tracked, setTracked] = react.useState(() => String(rest.defaultValue ?? ""));
@@ -1151,73 +1044,76 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
       "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
       "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
       rows,
-      className: cx(Textarea_default.textarea, className),
+      className: cx(Textarea_module_default.textarea, className),
       ...rest,
       ...showCount ? { onChange } : {}
     }
   );
   if (!showCount) return textarea;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Textarea_default.wrap, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Textarea_module_default.wrap, children: [
     textarea,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Textarea_default.count, "aria-hidden": "true", children: rest.maxLength !== void 0 ? `${current.length}/${rest.maxLength}` : current.length })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Textarea_module_default.count, "aria-hidden": "true", children: rest.maxLength !== void 0 ? `${current.length}/${rest.maxLength}` : current.length })
   ] });
 }
 
-// src/components/Checkbox/Checkbox.module.css
-var Checkbox_default = {
-  root: "Checkbox_root",
-  box: "Checkbox_box",
-  label: "Checkbox_label"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
+var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box", "label": "mds-Checkbox__label" };
 function Checkbox({ label, className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Checkbox_default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: Checkbox_default.box, ...rest }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_default.label, children: label })
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Checkbox_module_default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: Checkbox_module_default.box, ...rest }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_module_default.label, children: label })
   ] });
 }
 
-// src/components/Radio/Radio.module.css
-var Radio_default = {
-  root: "Radio_root",
-  dot: "Radio_dot",
-  label: "Radio_label"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Radio/Radio.module.css?mds-scoped
+var Radio_module_default = { "root": "mds-Radio__root", "dot": "mds-Radio__dot", "label": "mds-Radio__label" };
 function Radio({ label, className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Radio_default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: Radio_default.dot, ...rest }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Radio_default.label, children: label })
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Radio_module_default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: Radio_module_default.dot, ...rest }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Radio_module_default.label, children: label })
   ] });
 }
 
-// src/components/Switch/Switch.module.css
-var Switch_default = {
-  root: "Switch_root",
-  track: "Switch_track",
-  label: "Switch_label"
-};
-function Switch({ label, className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Switch_default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", role: "switch", className: Switch_default.track, ...rest }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Switch_default.label, children: label })
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Switch/Switch.module.css?mds-scoped
+var Switch_module_default = { "root": "mds-Switch__root", "track": "mds-Switch__track", "trackWrap": "mds-Switch__trackWrap", "spinner": "mds-Switch__spinner", "label": "mds-Switch__label" };
+function Switch({
+  label,
+  loading = false,
+  disabled = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Switch_module_default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Switch_module_default.trackWrap, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          role: "switch",
+          className: Switch_module_default.track,
+          disabled: disabled || loading,
+          "aria-busy": loading || void 0,
+          ...rest
+        }
+      ),
+      loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 12, label: "", "aria-hidden": "true", className: Switch_module_default.spinner })
+    ] }),
+    label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Switch_module_default.label, children: label })
   ] });
 }
 
-// src/components/SegmentedControl/SegmentedControl.module.css
-var SegmentedControl_default = {
-  group: "SegmentedControl_group",
-  segment: "SegmentedControl_segment",
-  input: "SegmentedControl_input",
-  face: "SegmentedControl_face"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SegmentedControl/SegmentedControl.module.css?mds-scoped
+var SegmentedControl_module_default = { "group": "mds-SegmentedControl__group", "segment": "mds-SegmentedControl__segment", "input": "mds-SegmentedControl__input", "face": "mds-SegmentedControl__face" };
 function SegmentedControl({
   label,
   options,
   value,
   onChange,
+  disabled = false,
   className
 }) {
   const name = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": label, className: cx(SegmentedControl_default.group, className), children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: SegmentedControl_default.segment, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": label, className: cx(SegmentedControl_module_default.group, className), children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: SegmentedControl_module_default.segment, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -1226,24 +1122,19 @@ function SegmentedControl({
         value: option.value,
         checked: option.value === value,
         onChange: () => onChange(option.value),
-        className: SegmentedControl_default.input
+        disabled,
+        className: SegmentedControl_module_default.input
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: SegmentedControl_default.face, children: option.label })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: SegmentedControl_module_default.face, children: option.label })
   ] }, option.value)) });
 }
 
-// src/components/SearchField/SearchField.module.css
-var SearchField_default = {
-  wrap: "SearchField_wrap",
-  glass: "SearchField_glass",
-  input: "SearchField_input",
-  clear: "SearchField_clear",
-  clearGlyph: "SearchField_clearGlyph"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped
+var SearchField_module_default = { "wrap": "mds-SearchField__wrap", "glass": "mds-SearchField__glass", "input": "mds-SearchField__input", "clear": "mds-SearchField__clear", "clearGlyph": "mds-SearchField__clearGlyph" };
 function SearchField({ label, value, onChange, className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(SearchField_default.wrap, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_default.glass, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(SearchField_module_default.wrap, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_module_default.glass, children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         d: "M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm7 2-3.5-3.5",
@@ -1260,7 +1151,7 @@ function SearchField({ label, value, onChange, className, ...rest }) {
         "aria-label": label,
         value,
         onChange: (event) => onChange(event.target.value),
-        className: SearchField_default.input,
+        className: SearchField_module_default.input,
         ...rest
       }
     ),
@@ -1269,28 +1160,32 @@ function SearchField({ label, value, onChange, className, ...rest }) {
       {
         type: "button",
         "aria-label": "Clear search",
-        className: SearchField_default.clear,
+        className: SearchField_module_default.clear,
         onClick: () => onChange(""),
-        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_default.clearGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_module_default.clearGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
       }
     )
   ] });
 }
 
-// src/components/List/List.module.css
-var List_default = {
-  group: "List_group",
-  item: "List_item",
-  row: "List_row",
-  interactive: "List_interactive",
-  leading: "List_leading",
-  trailing: "List_trailing",
-  text: "List_text",
-  title: "List_title",
-  description: "List_description"
-};
-function ListGroup({ className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx(List_default.group, className), ...rest });
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/List/List.module.css?mds-scoped
+var List_module_default = { "group": "mds-List__group", "labelledGroup": "mds-List__labelledGroup", "label": "mds-List__label", "item": "mds-List__item", "surface-card": "mds-List__surface-card", "surface-sunken": "mds-List__surface-sunken", "surface-accent": "mds-List__surface-accent", "surface-plain": "mds-List__surface-plain", "row": "mds-List__row", "interactive": "mds-List__interactive", "leading": "mds-List__leading", "trailing": "mds-List__trailing", "text": "mds-List__text", "title": "mds-List__title", "description": "mds-List__description" };
+var ListGroupContext = react.createContext(false);
+function ListGroup({ label, className, ...rest }) {
+  const headingId = react.useId();
+  const list = /* @__PURE__ */ jsxRuntime.jsx(ListGroupContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      className: cx(List_module_default.group, className),
+      "aria-labelledby": label != null ? headingId : void 0,
+      ...rest
+    }
+  ) });
+  if (label == null) return list;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: List_module_default.labelledGroup, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.label, id: headingId, children: label }),
+    list
+  ] });
 }
 function ListItem({
   title,
@@ -1298,43 +1193,55 @@ function ListItem({
   leading,
   trailing,
   onClick,
+  pressed,
   href,
+  surface,
   className,
   ...rest
 }) {
+  const inGroup = react.useContext(ListGroupContext);
+  const Root = inGroup ? "li" : "div";
+  const resolved = surface ?? (inGroup ? void 0 : "card");
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.leading, children: leading }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: List_default.text, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.title, children: title }),
-      description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.description, children: description })
+    leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.leading, children: leading }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: List_module_default.text, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.title, children: title }),
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.description, children: description })
     ] }),
-    trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.trailing, children: trailing })
+    trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.trailing, children: trailing })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx(List_default.item, className), ...rest, children: href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: cx(List_default.row, List_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx(List_default.row, List_default.interactive), onClick, children: content }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.row, children: content }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Root,
+    {
+      className: cx(List_module_default.item, resolved && List_module_default[`surface-${resolved}`], className),
+      ...rest,
+      children: href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: cx(List_module_default.row, List_module_default.interactive),
+          onClick,
+          "aria-pressed": pressed,
+          children: content
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.row, children: content })
+    }
+  );
 }
 
-// src/components/EmptyState/EmptyState.module.css
-var EmptyState_default = {
-  root: "EmptyState_root",
-  icon: "EmptyState_icon",
-  action: "EmptyState_action"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/EmptyState/EmptyState.module.css?mds-scoped
+var EmptyState_module_default = { "root": "mds-EmptyState__root", "icon": "mds-EmptyState__icon", "action": "mds-EmptyState__action" };
 function EmptyState({ title, description, icon, action, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(EmptyState_default.root, className), children: [
-    icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: EmptyState_default.icon, "aria-hidden": "true", children: icon }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(EmptyState_module_default.root, className), children: [
+    icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: EmptyState_module_default.icon, "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, children: title }),
     description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { tone: "secondary", children: description }),
-    action != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: EmptyState_default.action, children: action })
+    action != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: EmptyState_module_default.action, children: action })
   ] });
 }
 
-// src/components/Tabs/Tabs.module.css
-var Tabs_default = {
-  list: "Tabs_list",
-  tab: "Tabs_tab",
-  selected: "Tabs_selected",
-  panel: "Tabs_panel"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tabs/Tabs.module.css?mds-scoped
+var Tabs_module_default = { "list": "mds-Tabs__list", "tab": "mds-Tabs__tab", "selected": "mds-Tabs__selected", "panel": "mds-Tabs__panel" };
 var TabsContext = react.createContext(null);
 function useTabs(component) {
   const context = react.useContext(TabsContext);
@@ -1343,7 +1250,18 @@ function useTabs(component) {
 }
 function Tabs({ value, onChange, children }) {
   const baseId = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value, onChange, baseId }, children });
+  const [panels, setPanels] = react.useState(/* @__PURE__ */ new Set());
+  const registerPanel = react.useCallback((panel) => {
+    setPanels((prev) => new Set(prev).add(panel));
+    return () => {
+      setPanels((prev) => {
+        const next = new Set(prev);
+        next.delete(panel);
+        return next;
+      });
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value, onChange, baseId, panels, registerPanel }, children });
 }
 function onArrow(event, onChange) {
   const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
@@ -1366,7 +1284,7 @@ function TabList({ label, className, children, ...rest }) {
     {
       role: "tablist",
       "aria-label": label,
-      className: cx(Tabs_default.list, className),
+      className: cx(Tabs_module_default.list, className),
       onKeyDown: (event) => onArrow(event, onChange),
       ...rest,
       children
@@ -1383,10 +1301,10 @@ function Tab({ value, className, children, ...rest }) {
       role: "tab",
       id: `${tabs.baseId}-tab-${value}`,
       "aria-selected": selected,
-      "aria-controls": `${tabs.baseId}-panel-${value}`,
+      "aria-controls": tabs.panels.has(value) ? `${tabs.baseId}-panel-${value}` : void 0,
       tabIndex: selected ? 0 : -1,
       "data-value": value,
-      className: cx(Tabs_default.tab, selected && Tabs_default.selected, className),
+      className: cx(Tabs_module_default.tab, selected && Tabs_module_default.selected, className),
       onClick: () => tabs.onChange(value),
       ...rest,
       children
@@ -1396,6 +1314,8 @@ function Tab({ value, className, children, ...rest }) {
 function TabPanel({ value, className, children, ...rest }) {
   const tabs = useTabs("TabPanel");
   const selected = tabs.value === value;
+  const { registerPanel } = tabs;
+  react.useEffect(() => registerPanel(value), [registerPanel, value]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1403,32 +1323,26 @@ function TabPanel({ value, className, children, ...rest }) {
       id: `${tabs.baseId}-panel-${value}`,
       "aria-labelledby": `${tabs.baseId}-tab-${value}`,
       hidden: !selected,
-      className: cx(Tabs_default.panel, className),
+      className: cx(Tabs_module_default.panel, className),
       ...rest,
       children
     }
   );
 }
 
-// src/components/Toast/Toast.module.css
-var Toast_default = {
-  viewport: "Toast_viewport",
-  toast: "Toast_toast",
-  "tone-success": "Toast_tone-success",
-  "tone-danger": "Toast_tone-danger",
-  body: "Toast_body",
-  title: "Toast_title",
-  description: "Toast_description",
-  close: "Toast_close",
-  closeGlyph: "Toast_closeGlyph"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Toast/Toast.module.css?mds-scoped
+var Toast_module_default = { "viewport": "mds-Toast__viewport", "toast": "mds-Toast__toast", "tone-success": "mds-Toast__tone-success", "tone-danger": "mds-Toast__tone-danger", "body": "mds-Toast__body", "title": "mds-Toast__title", "description": "mds-Toast__description", "close": "mds-Toast__close", "closeGlyph": "mds-Toast__closeGlyph" };
 var ToastContext = react.createContext(null);
 function useToast() {
   const context = react.useContext(ToastContext);
   if (context === null) throw new Error("useToast needs a <ToastProvider> above it");
   return context;
 }
-function ToastProvider({ children }) {
+function ToastProvider({
+  children,
+  regionLabel = "Notifications",
+  dismissLabel = "Dismiss"
+}) {
   const [toasts, setToasts] = react.useState([]);
   const nextId = react.useRef(1);
   const dismiss = react.useCallback((id) => {
@@ -1446,38 +1360,27 @@ function ToastProvider({ children }) {
   const value = react.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "region", "aria-label": "Notifications", className: Toast_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: cx(Toast_default.toast, Toast_default[`tone-${entry.tone}`]), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Toast_default.body, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Toast_default.title, children: entry.title }),
-        entry.description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Toast_default.description, children: entry.description })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "region", "aria-label": regionLabel, className: Toast_module_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: cx(Toast_module_default.toast, Toast_module_default[`tone-${entry.tone}`]), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Toast_module_default.body, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Toast_module_default.title, children: entry.title }),
+        entry.description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Toast_module_default.description, children: entry.description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          "aria-label": "Dismiss",
-          className: Toast_default.close,
+          "aria-label": `${dismissLabel}: ${entry.title}`,
+          className: Toast_module_default.close,
           onClick: () => dismiss(entry.id),
-          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Toast_default.closeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Toast_module_default.closeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
         }
       )
     ] }, entry.id)) })
   ] });
 }
 
-// src/components/Stack/Stack.module.css
-var Stack_default = {
-  stack: "Stack_stack",
-  "gap-hairline": "Stack_gap-hairline",
-  "gap-tight": "Stack_gap-tight",
-  "gap-base": "Stack_gap-base",
-  "gap-loose": "Stack_gap-loose",
-  "gap-section": "Stack_gap-section",
-  "align-start": "Stack_align-start",
-  "align-center": "Stack_align-center",
-  "align-end": "Stack_align-end",
-  "align-stretch": "Stack_align-stretch"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Stack/Stack.module.css?mds-scoped
+var Stack_module_default = { "stack": "mds-Stack__stack", "gap-hairline": "mds-Stack__gap-hairline", "gap-tight": "mds-Stack__gap-tight", "gap-base": "mds-Stack__gap-base", "gap-loose": "mds-Stack__gap-loose", "gap-section": "mds-Stack__gap-section", "align-start": "mds-Stack__align-start", "align-center": "mds-Stack__align-center", "align-end": "mds-Stack__align-end", "align-stretch": "mds-Stack__align-stretch" };
 
 // src/components/Stack/Stack.tsx
 function Stack({
@@ -1488,28 +1391,13 @@ function Stack({
   ...rest
 }) {
   return react.createElement(as, {
-    className: cx(Stack_default.stack, Stack_default[`gap-${gap}`], Stack_default[`align-${align}`], className),
+    className: cx(Stack_module_default.stack, Stack_module_default[`gap-${gap}`], Stack_module_default[`align-${align}`], className),
     ...rest
   });
 }
 
-// src/components/Inline/Inline.module.css
-var Inline_default = {
-  inline: "Inline_inline",
-  "gap-hairline": "Inline_gap-hairline",
-  "gap-tight": "Inline_gap-tight",
-  "gap-base": "Inline_gap-base",
-  "gap-loose": "Inline_gap-loose",
-  "align-start": "Inline_align-start",
-  "align-center": "Inline_align-center",
-  "align-end": "Inline_align-end",
-  "align-baseline": "Inline_align-baseline",
-  "justify-start": "Inline_justify-start",
-  "justify-center": "Inline_justify-center",
-  "justify-end": "Inline_justify-end",
-  "justify-between": "Inline_justify-between",
-  wrap: "Inline_wrap"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Inline/Inline.module.css?mds-scoped
+var Inline_module_default = { "inline": "mds-Inline__inline", "gap-hairline": "mds-Inline__gap-hairline", "gap-tight": "mds-Inline__gap-tight", "gap-base": "mds-Inline__gap-base", "gap-loose": "mds-Inline__gap-loose", "align-start": "mds-Inline__align-start", "align-center": "mds-Inline__align-center", "align-end": "mds-Inline__align-end", "align-baseline": "mds-Inline__align-baseline", "justify-start": "mds-Inline__justify-start", "justify-center": "mds-Inline__justify-center", "justify-end": "mds-Inline__justify-end", "justify-between": "mds-Inline__justify-between", "wrap": "mds-Inline__wrap" };
 
 // src/components/Inline/Inline.tsx
 function Inline({
@@ -1523,23 +1411,19 @@ function Inline({
 }) {
   return react.createElement(as, {
     className: cx(
-      Inline_default.inline,
-      Inline_default[`gap-${gap}`],
-      Inline_default[`align-${align}`],
-      Inline_default[`justify-${justify}`],
-      wrap && Inline_default.wrap,
+      Inline_module_default.inline,
+      Inline_module_default[`gap-${gap}`],
+      Inline_module_default[`align-${align}`],
+      Inline_module_default[`justify-${justify}`],
+      wrap && Inline_module_default.wrap,
       className
     ),
     ...rest
   });
 }
 
-// src/components/Container/Container.module.css
-var Container_default = {
-  container: "Container_container",
-  "width-content": "Container_width-content",
-  "width-wide": "Container_width-wide"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Container/Container.module.css?mds-scoped
+var Container_module_default = { "container": "mds-Container__container", "width-content": "mds-Container__width-content", "width-wide": "mds-Container__width-wide" };
 
 // src/components/Container/Container.tsx
 function Container({
@@ -1549,48 +1433,36 @@ function Container({
   ...rest
 }) {
   return react.createElement(as, {
-    className: cx(Container_default.container, Container_default[`width-${width}`], className),
+    className: cx(Container_module_default.container, Container_module_default[`width-${width}`], className),
     ...rest
   });
 }
 
-// src/components/Card/Card.module.css
-var Card_default = {
-  card: "Card_card",
-  "variant-raised": "Card_variant-raised",
-  interactive: "Card_interactive",
-  header: "Card_header",
-  body: "Card_body",
-  footer: "Card_footer"
-};
-function Card({ children, variant = "card", onClick, href, className, ...rest }) {
-  const cardClass = cx(Card_default.card, Card_default[`variant-${variant}`], className);
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Card/Card.module.css?mds-scoped
+var Card_module_default = { "card": "mds-Card__card", "variant-raised": "mds-Card__variant-raised", "variant-sunken": "mds-Card__variant-sunken", "emphasis": "mds-Card__emphasis", "interactive": "mds-Card__interactive", "header": "mds-Card__header", "body": "mds-Card__body", "footer": "mds-Card__footer" };
+function Card({ children, variant = "card", emphasis = false, onClick, href, className, ...rest }) {
+  const cardClass = cx(Card_module_default.card, Card_module_default[`variant-${variant}`], emphasis && Card_module_default.emphasis, className);
   if (href !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { className: cx(cardClass, Card_default.interactive), href, ...rest, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { className: cx(cardClass, Card_module_default.interactive), href, ...rest, children });
   }
   if (onClick !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx(cardClass, Card_default.interactive), onClick, ...rest, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx(cardClass, Card_module_default.interactive), onClick, ...rest, children });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClass, ...rest, children });
 }
 function CardHeader({ className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_default.header, className), ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_module_default.header, className), ...rest });
 }
 function CardBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_default.body, className), ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_module_default.body, className), ...rest });
 }
 function CardFooter({ className, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_default.footer, className), ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_module_default.footer, className), ...rest });
 }
 
-// src/components/Modal/Modal.module.css
-var Modal_default = {
-  panel: "Modal_panel",
-  header: "Modal_header",
-  body: "Modal_body",
-  footer: "Modal_footer"
-};
-function Modal({ open, onClose, label, closeOnScrimClick = true, children }) {
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Modal/Modal.module.css?mds-scoped
+var Modal_module_default = { "panel": "mds-Modal__panel", "header": "mds-Modal__header", "body": "mds-Modal__body", "footer": "mds-Modal__footer" };
+function Modal({ open, onClose, label, closeOnScrimClick = true, role = "dialog", children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Overlay,
     {
@@ -1598,94 +1470,141 @@ function Modal({ open, onClose, label, closeOnScrimClick = true, children }) {
       onClose,
       label,
       variant: "modal",
+      role,
       closeOnScrimClick,
-      panelClassName: Modal_default.panel,
+      panelClassName: Modal_module_default.panel,
       children
     }
   );
 }
 function ModalHeader({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_default.header, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module_default.header, children });
 }
 function ModalBody({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_default.body, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module_default.body, children });
 }
 function ModalFooter({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_default.footer, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module_default.footer, children });
 }
 
-// src/components/ConfirmDialog/ConfirmDialog.module.css
-var ConfirmDialog_default = {
-  description: "ConfirmDialog_description"
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ConfirmDialog/ConfirmDialog.module.css?mds-scoped
+var ConfirmDialog_module_default = { "description": "mds-ConfirmDialog__description", "error": "mds-ConfirmDialog__error" };
+var CONFIRM_VARIANT = {
+  default: "primary",
+  danger: "danger",
+  warning: "warning"
 };
 function ConfirmDialog({
-  open,
+  target,
+  open = target != null,
   onClose,
   onConfirm,
   title,
   description,
   confirmLabel,
   cancelLabel = "Cancel",
-  danger = false
+  tone = "default",
+  errorMessage
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onClose, label: title, closeOnScrimClick: false, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(ModalBody, { children: description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: ConfirmDialog_default.description, children: description }) : null }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ModalFooter, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: danger ? "danger" : "primary", onClick: onConfirm, children: confirmLabel })
-    ] })
-  ] });
+  const [busy, setBusy] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [prevOpen, setPrevOpen] = react.useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      setBusy(false);
+      setError(null);
+    }
+  }
+  const live = { target, title, description, confirmLabel, cancelLabel, tone };
+  const [frozen, setFrozen] = react.useState(live);
+  const view = open ? live : frozen;
+  const close = () => {
+    setFrozen(live);
+    onClose?.();
+  };
+  const handleConfirm = async () => {
+    if (!onConfirm) return;
+    const asked = live.target;
+    setBusy(true);
+    setError(null);
+    try {
+      await onConfirm(asked);
+      close();
+    } catch (e) {
+      setBusy(false);
+      const message = e.message;
+      setError(errorMessage?.(message) ?? message);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Modal,
+    {
+      open,
+      onClose: close,
+      label: view.title,
+      role: "alertdialog",
+      closeOnScrimClick: false,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { children: view.title }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalBody, { children: [
+          view.description != null ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: ConfirmDialog_module_default.description, children: view.description }) : null,
+          error != null ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: ConfirmDialog_module_default.error, children: error }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalFooter, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: close, children: view.cancelLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: CONFIRM_VARIANT[view.tone], loading: busy, onClick: handleConfirm, children: view.confirmLabel })
+        ] })
+      ]
+    }
+  );
 }
 
-// src/components/Screen/Screen.module.css
-var Screen_default = {
-  screen: "Screen_screen",
-  content: "Screen_content"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Screen/Screen.module.css?mds-scoped
+var Screen_module_default = { "screen": "mds-Screen__screen", "content": "mds-Screen__content", "flush": "mds-Screen__flush" };
 function Screen({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Screen_default.screen, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Screen_module_default.screen, children });
 }
-function ScreenContent({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("main", { className: Screen_default.content, children });
+function ScreenContent({ children, flush = false, className, ref, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { ref, className: cx(Screen_module_default.content, flush && Screen_module_default.flush, className), ...rest, children });
 }
 
-// src/components/AppBar/AppBar.module.css
-var AppBar_default = {
-  bar: "AppBar_bar",
-  title: "AppBar_title",
-  slot: "AppBar_slot"
-};
-function AppBar({ title, leading, trailing }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: AppBar_default.bar, children: [
-    leading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AppBar_default.slot, children: leading }) : null,
-    title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: AppBar_default.title, children: title }) : null,
-    trailing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AppBar_default.slot, children: trailing }) : null
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/AppBar/AppBar.module.css?mds-scoped
+var AppBar_module_default = { "bar": "mds-AppBar__bar", "title": "mds-AppBar__title", "text": "mds-AppBar__text", "subtitle": "mds-AppBar__subtitle", "slot": "mds-AppBar__slot" };
+function AppBar({ title, subtitle, leading, trailing }) {
+  const heading = title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: AppBar_module_default.title, children: title }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: AppBar_module_default.bar, children: [
+    leading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AppBar_module_default.slot, children: leading }) : null,
+    subtitle != null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AppBar_module_default.text, children: [
+      heading,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: AppBar_module_default.subtitle, children: subtitle })
+    ] }) : heading,
+    trailing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AppBar_module_default.slot, children: trailing }) : null
   ] });
 }
 
-// src/components/TabBar/TabBar.module.css
-var TabBar_default = {
-  bar: "TabBar_bar",
-  item: "TabBar_item",
-  active: "TabBar_active",
-  icon: "TabBar_icon",
-  label: "TabBar_label"
-};
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/TabBar/TabBar.module.css?mds-scoped
+var TabBar_module_default = { "bar": "mds-TabBar__bar", "item": "mds-TabBar__item", "active": "mds-TabBar__active", "icon": "mds-TabBar__icon", "badge": "mds-TabBar__badge", "label": "mds-TabBar__label", "action": "mds-TabBar__action" };
 function TabBar({ label, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className: TabBar_default.bar, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className: TabBar_module_default.bar, children });
 }
-function TabBarItem({ label, icon, href, onClick, active = false }) {
-  const className = cx(TabBar_default.item, active && TabBar_default.active);
+function TabBarItem({ label, icon, href, onClick, active = false, badge = false }) {
+  const className = cx(TabBar_module_default.item, active && TabBar_module_default.active);
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_default.icon, "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_default.label, children: label })
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: [
+      icon,
+      badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.badge, "data-testid": "mds-tabbar-badge" }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.label, children: label })
   ] });
   if (href !== void 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, "aria-current": active ? "page" : void 0, onClick, children: content });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className, "aria-current": active ? "page" : void 0, onClick, children: content });
 }
+function TabBarAction({ label, icon, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": label, className: TabBar_module_default.action, onClick, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: icon }) });
+}
 function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
   return react.useCallback(
     (event) => {
@@ -1762,6 +1681,7 @@ exports.Stack = Stack;
 exports.Switch = Switch;
 exports.Tab = Tab;
 exports.TabBar = TabBar;
+exports.TabBarAction = TabBarAction;
 exports.TabBarItem = TabBarItem;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;