@moodlehq/design-system 4.0.0 → 5.0.0

package/dist/components/activity-icon/ActivityIcon.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { ActivityIconName } from './activityIconRegistry';
-export type ActivityIconVariant = 'none' | 'default' | 'large';
+export type ActivityIconContainer = 'none' | 'default' | 'large';
 export type ActivityIconSize = 'sm' | 'md' | 'lg' | 'xl';
 export interface ActivityIconProps extends HTMLAttributes<HTMLSpanElement> {
     /**
@@ -14,10 +14,10 @@ export interface ActivityIconProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * Visual container style around the icon.
      */
-    variant?: ActivityIconVariant;
+    container?: ActivityIconContainer;
     /**
      * Icon size token.
      */
     size?: ActivityIconSize;
 }
-export declare const ActivityIcon: ({ icon, alt, variant, size, className, ...props }: ActivityIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActivityIcon: ({ icon, alt, container, size, className, ...props }: ActivityIconProps) => import("react").JSX.Element;

package/dist/components/activity-icon/ActivityIcon.js

@@ -2,7 +2,7 @@ import { activityIconNames, activityIconRegistry } from "./activityIconRegistry.
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region components/activity-icon/ActivityIcon.tsx
-var iconGlob = /* @__PURE__ */ Object.assign({
+var iconGlob = /* #__PURE__ */ Object.assign({
 	"./assets/assignment.svg": () => import("./assets/assignment.js"),
 	"./assets/bigbluebutton.svg": () => import("./assets/bigbluebutton.js"),
 	"./assets/book.svg": () => import("./assets/book.js"),
@@ -65,7 +65,7 @@ function loadIconSrc(fileName) {
 	if (!loader) return Promise.reject(/* @__PURE__ */ new Error(`[MDS ActivityIcon] Icon file "${fileName}.svg" not found in assets.`));
 	return loader().then((mod) => mod.default);
 }
-var allowedVariants = [
+var allowedContainers = [
 	"none",
 	"default",
 	"large"
@@ -77,7 +77,7 @@ var allowedSizes = [
 	"xl"
 ];
 var iconLookupFallback = "file-unknown";
-var ActivityIcon = ({ icon, alt = "", variant, size, className, ...props }) => {
+var ActivityIcon = ({ icon, alt = "", container, size, className, ...props }) => {
 	const normalizedIcon = icon?.toLowerCase();
 	const hasValidIcon = normalizedIcon !== void 0 && normalizedIcon in activityIconRegistry;
 	if (!hasValidIcon) {
@@ -85,7 +85,7 @@ var ActivityIcon = ({ icon, alt = "", variant, size, className, ...props }) => {
 		console.error(`${invalidIconMessage}. Falling back to "${iconLookupFallback}" placeholder.`);
 	}
 	const resolvedIcon = hasValidIcon ? normalizedIcon : iconLookupFallback;
-	const resolvedVariant = variant && allowedVariants.includes(variant) ? variant : "default";
+	const resolvedContainer = container && allowedContainers.includes(container) ? container : "default";
 	const resolvedSize = size && allowedSizes.includes(size) ? size : "md";
 	const resolvedCategory = activityIconRegistry[resolvedIcon].category;
 	const [iconSrc, setIconSrc] = useState(void 0);
@@ -103,7 +103,7 @@ var ActivityIcon = ({ icon, alt = "", variant, size, className, ...props }) => {
 	}, [resolvedIcon]);
 	const classes = [
 		"mds-activity-icon",
-		`mds-activity-icon--${resolvedVariant}`,
+		`mds-activity-icon--${resolvedContainer}`,
 		`mds-activity-icon--size-${resolvedSize}`,
 		`mds-activity-icon--category-${resolvedCategory}`
 	];

package/dist/components/activity-icon/ActivityIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityIcon.js","names":[],"sources":["../../../components/activity-icon/ActivityIcon.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { useEffect, useState } from 'react';\nimport type { ActivityIconName } from './activityIconRegistry';\nimport {\n  activityIconNames,\n  activityIconRegistry,\n} from './activityIconRegistry';\n\nconst iconGlob = import.meta.glob<{ default: string }>('./assets/*.svg', {\n  eager: false,\n});\n\nfunction loadIconSrc(fileName: string): Promise<string> {\n  const globPath = `./assets/${fileName}.svg`;\n  const loader = iconGlob[globPath];\n\n  if (!loader) {\n    return Promise.reject(\n      new Error(\n        `[MDS ActivityIcon] Icon file \"${fileName}.svg\" not found in assets.`,\n      ),\n    );\n  }\n\n  return loader().then((mod) => mod.default);\n}\n\nexport type ActivityIconVariant = 'none' | 'default' | 'large';\nconst allowedVariants: ActivityIconVariant[] = ['none', 'default', 'large'];\n\nexport type ActivityIconSize = 'sm' | 'md' | 'lg' | 'xl';\nconst allowedSizes: ActivityIconSize[] = ['sm', 'md', 'lg', 'xl'];\nconst iconLookupFallback: ActivityIconName = 'file-unknown';\n\nexport interface ActivityIconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Activity/resource icon key used to resolve the SVG asset from the registry.\n   */\n  icon: ActivityIconName;\n  /**\n   * Accessible text for the rendered image. Use an empty string for decorative icons.\n   */\n  alt?: string;\n  /**\n   * Visual container style around the icon.\n   */\n  variant?: ActivityIconVariant;\n  /**\n   * Icon size token.\n   */\n  size?: ActivityIconSize;\n}\n\nexport const ActivityIcon = ({\n  icon,\n  alt = '',\n  variant,\n  size,\n  className,\n  ...props\n}: ActivityIconProps) => {\n  // TS callers must pass icon, but JS consumers can still provide undefined at runtime.\n  const normalizedIcon = icon?.toLowerCase();\n  const hasValidIcon =\n    normalizedIcon !== undefined && normalizedIcon in activityIconRegistry;\n\n  if (!hasValidIcon) {\n    const invalidIconMessage = `[MDS ActivityIcon] Invalid icon \"${icon}\". Allowed: ${activityIconNames.join(', ')}`;\n    console.error(\n      `${invalidIconMessage}. Falling back to \"${iconLookupFallback}\" placeholder.`,\n    );\n  }\n\n  if (import.meta.env.DEV && variant && !allowedVariants.includes(variant)) {\n    console.warn(\n      `[MDS ActivityIcon] Invalid variant \"${variant}\". Falling back to \"default\". Allowed: ${allowedVariants.join(', ')}`,\n    );\n  }\n\n  if (import.meta.env.DEV && size && !allowedSizes.includes(size)) {\n    console.warn(\n      `[MDS ActivityIcon] Invalid size \"${size}\". Falling back to \"md\". Allowed: ${allowedSizes.join(', ')}`,\n    );\n  }\n\n  const resolvedIcon: ActivityIconName = hasValidIcon\n    ? (normalizedIcon as ActivityIconName)\n    : iconLookupFallback;\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant) ? variant : 'default';\n  const resolvedSize = size && allowedSizes.includes(size) ? size : 'md';\n  const resolvedCategory = activityIconRegistry[resolvedIcon].category;\n  const [iconSrc, setIconSrc] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    let isMounted = true;\n    const { fileName } = activityIconRegistry[resolvedIcon];\n\n    void loadIconSrc(fileName)\n      .then((src) => {\n        if (isMounted) {\n          setIconSrc(src);\n        }\n      })\n      .catch(() => {\n        if (isMounted) {\n          setIconSrc(undefined);\n        }\n      });\n\n    return () => {\n      isMounted = false;\n    };\n  }, [resolvedIcon]);\n\n  const classes = [\n    'mds-activity-icon',\n    `mds-activity-icon--${resolvedVariant}`,\n    `mds-activity-icon--size-${resolvedSize}`,\n    `mds-activity-icon--category-${resolvedCategory}`,\n  ];\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <span className={classes.join(' ')} {...props}>\n      <img alt={alt} className=\"mds-activity-icon__asset\" src={iconSrc} />\n    </span>\n  );\n};\n"],"mappings":";;;;AAQA,IAAM,WAAW,uBAAA,OAAA;CAAA,iCAAA,OAAA;CAAA,oCAAA,OAAA;CAAA,2BAAA,OAAA;CAAA,2BAAA,OAAA;CAAA,6BAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,oCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,8BAAA,OAAA;CAAA,mCAAA,OAAA;CAAA,iCAAA,OAAA;CAAA,gCAAA,OAAA;CAAA,oCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,gCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,gCAAA,OAAA;CAAA,iCAAA,OAAA;CAAA,kCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,mCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,iCAAA,OAAA;CAAA,yCAAA,OAAA;CAAA,gCAAA,OAAA;CAAA,gCAAA,OAAA;CAAA,kCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,sCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,wCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,uCAAA,OAAA;CAAA,uCAAA,OAAA;CAAA,uCAAA,OAAA;CAAA,mCAAA,OAAA;CAAA,iCAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,2BAAA,OAAA;CAAA,6BAAA,OAAA;CAAA,4BAAA,OAAA;CAAA,+BAAA,OAAA;CAAA,0BAAA,OAAA;CAAA,kCAAA,OAAA;CAAA,6BAAA,OAAA;CAAA,2BAAA,OAAA;CAAA,2BAAA,OAAA;CAAA,oCAAA,OAAA;CAAA,iCAAA,OAAA;CAAA,6BAAA,OAAA;CAAA,qCAAA,OAAA;CAAA,0BAAA,OAAA;CAAA,2BAAA,OAAA;CAAA,+BAAA,OAAA;AAAA,CAAA;AAIjB,SAAS,YAAY,UAAmC;CAEtD,MAAM,SAAS,SAAS,YADK,SAAS;CAGtC,IAAI,CAAC,QACH,OAAO,QAAQ,uBACb,IAAI,MACF,iCAAiC,SAAS,2BAC5C,CACF;CAGF,OAAO,OAAO,EAAE,MAAM,QAAQ,IAAI,OAAO;AAC3C;AAGA,IAAM,kBAAyC;CAAC;CAAQ;CAAW;AAAO;AAG1E,IAAM,eAAmC;CAAC;CAAM;CAAM;CAAM;AAAI;AAChE,IAAM,qBAAuC;AAqB7C,IAAa,gBAAgB,EAC3B,MACA,MAAM,IACN,SACA,MACA,WACA,GAAG,YACoB;CAEvB,MAAM,iBAAiB,MAAM,YAAY;CACzC,MAAM,eACJ,mBAAmB,KAAA,KAAa,kBAAkB;CAEpD,IAAI,CAAC,cAAc;EACjB,MAAM,qBAAqB,oCAAoC,KAAK,cAAc,kBAAkB,KAAK,IAAI;EAC7G,QAAQ,MACN,GAAG,mBAAmB,qBAAqB,mBAAmB,eAChE;CACF;CAcA,MAAM,eAAiC,eAClC,iBACD;CACJ,MAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAO,IAAI,UAAU;CAC3D,MAAM,eAAe,QAAQ,aAAa,SAAS,IAAI,IAAI,OAAO;CAClE,MAAM,mBAAmB,qBAAqB,cAAc;CAC5D,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,CAAS;CAEpE,gBAAgB;EACd,IAAI,YAAY;EAChB,MAAM,EAAE,aAAa,qBAAqB;EAE1C,YAAiB,QAAQ,EACtB,MAAM,QAAQ;GACb,IAAI,WACF,WAAW,GAAG;EAElB,CAAC,EACA,YAAY;GACX,IAAI,WACF,WAAW,KAAA,CAAS;EAExB,CAAC;EAEH,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU;EACd;EACA,sBAAsB;EACtB,2BAA2B;EAC3B,+BAA+B;CACjC;CACA,IAAI,WACF,QAAQ,KAAK,SAAS;CAGxB,OACE,oBAAC,QAAD;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;YACtC,oBAAC,OAAD;GAAU;GAAK,WAAU;GAA2B,KAAK;EAAU,CAAA;CAC/D,CAAA;AAEV"}
+{"version":3,"file":"ActivityIcon.js","names":[],"sources":["../../../components/activity-icon/ActivityIcon.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { useEffect, useState } from 'react';\nimport type { ActivityIconName } from './activityIconRegistry';\nimport {\n  activityIconNames,\n  activityIconRegistry,\n} from './activityIconRegistry';\n\nconst iconGlob = import.meta.glob<{ default: string }>('./assets/*.svg', {\n  eager: false,\n});\n\nfunction loadIconSrc(fileName: string): Promise<string> {\n  const globPath = `./assets/${fileName}.svg`;\n  const loader = iconGlob[globPath];\n\n  if (!loader) {\n    return Promise.reject(\n      new Error(\n        `[MDS ActivityIcon] Icon file \"${fileName}.svg\" not found in assets.`,\n      ),\n    );\n  }\n\n  return loader().then((mod) => mod.default);\n}\n\nexport type ActivityIconContainer = 'none' | 'default' | 'large';\nconst allowedContainers: ActivityIconContainer[] = ['none', 'default', 'large'];\n\nexport type ActivityIconSize = 'sm' | 'md' | 'lg' | 'xl';\nconst allowedSizes: ActivityIconSize[] = ['sm', 'md', 'lg', 'xl'];\nconst iconLookupFallback: ActivityIconName = 'file-unknown';\n\nexport interface ActivityIconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Activity/resource icon key used to resolve the SVG asset from the registry.\n   */\n  icon: ActivityIconName;\n  /**\n   * Accessible text for the rendered image. Use an empty string for decorative icons.\n   */\n  alt?: string;\n  /**\n   * Visual container style around the icon.\n   */\n  container?: ActivityIconContainer;\n  /**\n   * Icon size token.\n   */\n  size?: ActivityIconSize;\n}\n\nexport const ActivityIcon = ({\n  icon,\n  alt = '',\n  container,\n  size,\n  className,\n  ...props\n}: ActivityIconProps) => {\n  // TS callers must pass icon, but JS consumers can still provide undefined at runtime.\n  const normalizedIcon = icon?.toLowerCase();\n  const hasValidIcon =\n    normalizedIcon !== undefined && normalizedIcon in activityIconRegistry;\n\n  if (!hasValidIcon) {\n    const invalidIconMessage = `[MDS ActivityIcon] Invalid icon \"${icon}\". Allowed: ${activityIconNames.join(', ')}`;\n    console.error(\n      `${invalidIconMessage}. Falling back to \"${iconLookupFallback}\" placeholder.`,\n    );\n  }\n\n  if (\n    import.meta.env.DEV &&\n    container &&\n    !allowedContainers.includes(container)\n  ) {\n    console.warn(\n      `[MDS ActivityIcon] Invalid container \"${container}\". Falling back to \"default\". Allowed: ${allowedContainers.join(', ')}`,\n    );\n  }\n\n  if (import.meta.env.DEV && size && !allowedSizes.includes(size)) {\n    console.warn(\n      `[MDS ActivityIcon] Invalid size \"${size}\". Falling back to \"md\". Allowed: ${allowedSizes.join(', ')}`,\n    );\n  }\n\n  const resolvedIcon: ActivityIconName = hasValidIcon\n    ? (normalizedIcon as ActivityIconName)\n    : iconLookupFallback;\n  const resolvedContainer =\n    container && allowedContainers.includes(container) ? container : 'default';\n  const resolvedSize = size && allowedSizes.includes(size) ? size : 'md';\n  const resolvedCategory = activityIconRegistry[resolvedIcon].category;\n  const [iconSrc, setIconSrc] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    let isMounted = true;\n    const { fileName } = activityIconRegistry[resolvedIcon];\n\n    void loadIconSrc(fileName)\n      .then((src) => {\n        if (isMounted) {\n          setIconSrc(src);\n        }\n      })\n      .catch(() => {\n        if (isMounted) {\n          setIconSrc(undefined);\n        }\n      });\n\n    return () => {\n      isMounted = false;\n    };\n  }, [resolvedIcon]);\n\n  const classes = [\n    'mds-activity-icon',\n    `mds-activity-icon--${resolvedContainer}`,\n    `mds-activity-icon--size-${resolvedSize}`,\n    `mds-activity-icon--category-${resolvedCategory}`,\n  ];\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <span className={classes.join(' ')} {...props}>\n      <img alt={alt} className=\"mds-activity-icon__asset\" src={iconSrc} />\n    </span>\n  );\n};\n"],"mappings":"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"}

package/dist/components/activity-icon/index.css

@@ -0,0 +1,99 @@
+.mds-activity-icon {
+  align-items: center;
+  /*
+   * content-box so block-size/inline-size declare the ICON content area.
+   * Padding then expands the tile beyond that — matching Figma's structure
+   * where "size" is the icon and padding is added by the container variant.
+   */
+  box-sizing: content-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* none: no background tile, no padding — tile equals the icon size */
+.mds-activity-icon--none {
+  border-radius: var(--mds-border-radius-none);
+}
+
+/*
+ * default: 8px padding each side — tile = icon + 16px (e.g. lg: 24+16 = 40px total).
+ * large:  12px padding each side — tile = icon + 24px (e.g. lg: 24+24 = 48px total).
+ */
+.mds-activity-icon--default {
+  border-radius: var(--mds-border-radius-xl);
+  padding: var(--mds-spacing-xs);
+}
+
+.mds-activity-icon--large {
+  border-radius: var(--mds-border-radius-xl);
+  padding: var(--mds-spacing-sm);
+}
+
+/* Figma uses a smaller outer radius for default+sm only. */
+.mds-activity-icon--default.mds-activity-icon--size-sm {
+  border-radius: var(--mds-border-radius-lg);
+}
+
+/* Category background colors apply only when a background container is active. */
+.mds-activity-icon--default.mds-activity-icon--category-assessment,
+.mds-activity-icon--large.mds-activity-icon--category-assessment {
+  background-color: var(--mds-activity-icon-assessment-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-collaboration,
+.mds-activity-icon--large.mds-activity-icon--category-collaboration {
+  background-color: var(--mds-activity-icon-collaboration-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-communication,
+.mds-activity-icon--large.mds-activity-icon--category-communication {
+  background-color: var(--mds-activity-icon-communication-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-interactive,
+.mds-activity-icon--large.mds-activity-icon--category-interactive {
+  background-color: var(--mds-activity-icon-interactive-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-other,
+.mds-activity-icon--large.mds-activity-icon--category-other {
+  background-color: var(--mds-activity-icon-other-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-resource,
+.mds-activity-icon--large.mds-activity-icon--category-resource {
+  background-color: var(--mds-activity-icon-resource-bg);
+}
+
+/* Size variants */
+.mds-activity-icon--size-sm {
+  block-size: var(--mds-icons-sm);
+  inline-size: var(--mds-icons-sm);
+}
+
+.mds-activity-icon--size-md {
+  /* Intentionally follows the Figma token mapping, where md uses the lg icon token. */
+  block-size: var(--mds-icons-lg);
+  inline-size: var(--mds-icons-lg);
+}
+
+.mds-activity-icon--size-lg {
+  /* Intentionally follows the Figma token mapping, where lg uses the xl icon token. */
+  block-size: var(--mds-icons-xl);
+  inline-size: var(--mds-icons-xl);
+}
+
+.mds-activity-icon--size-xl {
+  /* Intentionally follows the Figma token mapping, where xl uses the xxl icon token. */
+  block-size: var(--mds-icons-xxl);
+  inline-size: var(--mds-icons-xxl);
+}
+
+.mds-activity-icon__asset {
+  block-size: 100%;
+  border-radius: var(--mds-border-radius-xs);
+  display: block;
+  inline-size: 100%;
+}

package/dist/components/badge/Badge.d.ts

@@ -15,5 +15,5 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** Optional icon rendered after the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `startIcon`. */
     endIcon?: IconElement;
 }
-export declare const Badge: ({ label, variant, subtle, pill, startIcon, endIcon, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ label, variant, subtle, pill, startIcon, endIcon, className, ...props }: BadgeProps) => import("react").JSX.Element;
 export {};

package/dist/components/badge/{Badge2.js → Badge.js}

@@ -1,4 +1,3 @@
-/* empty css      */
 import { isValidElement } from "react";
 import { jsxs } from "react/jsx-runtime";
 //#region components/badge/Badge.tsx
@@ -40,4 +39,4 @@ var Badge = ({ label, variant, subtle = false, pill = false, startIcon, endIcon,
 //#endregion
 export { Badge };
 
-//# sourceMappingURL=Badge2.js.map
+//# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../components/badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\nimport { isValidElement } from 'react';\n\ntype BadgeVariant =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\n// Runtime guard — icon props must be <i> or <svg> elements\nconst isIconElement = (el: unknown, propName: string): el is IconElement => {\n  const valid = isValidElement(el) && (el.type === 'i' || el.type === 'svg');\n  if (!valid && el != null && import.meta.env.DEV) {\n    console.error(`Badge: \\`${propName}\\` must be an <i> or <svg> element.`);\n  }\n  return valid;\n};\n\nconst allowedVariants: BadgeVariant[] = [\n  'primary',\n  'secondary',\n  'success',\n  'danger',\n  'warning',\n  'info',\n];\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Visible badge text. Must be a caller-supplied translated string. */\n  label: string;\n  /** Colour/semantic variant. Defaults to `primary`. */\n  variant?: BadgeVariant;\n  /** When true, renders the low-contrast (subtle) style with a light background and border. */\n  subtle?: boolean;\n  /** When true, renders fully rounded pill shape instead of the default slight rounding. */\n  pill?: boolean;\n  /** Optional icon rendered before the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `endIcon`. */\n  startIcon?: IconElement;\n  /** Optional icon rendered after the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `startIcon`. */\n  endIcon?: IconElement;\n}\n\nexport const Badge = ({\n  label,\n  variant,\n  subtle = false,\n  pill = false,\n  startIcon,\n  endIcon,\n  className,\n  ...props\n}: BadgeProps) => {\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant as BadgeVariant)\n      ? variant\n      : 'primary';\n\n  const resolvedStartIcon = isIconElement(startIcon, 'startIcon')\n    ? startIcon\n    : null;\n  let resolvedEndIcon = isIconElement(endIcon, 'endIcon') ? endIcon : null;\n\n  if (import.meta.env.DEV) {\n    if (variant && !allowedVariants.includes(variant as BadgeVariant)) {\n      console.warn(\n        `[MDS Badge] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n      );\n    }\n    if (resolvedStartIcon && resolvedEndIcon) {\n      console.warn(\n        '[MDS Badge] `startIcon` and `endIcon` are mutually exclusive. Rendering `startIcon` only.',\n      );\n    }\n  }\n\n  // Only one icon can be rendered at a time; startIcon takes precedence when both are provided.\n  if (resolvedStartIcon && resolvedEndIcon) {\n    resolvedEndIcon = null;\n  }\n\n  const classes = ['mds-badge', 'badge', `mds-badge--${resolvedVariant}`];\n  if (resolvedStartIcon || resolvedEndIcon) classes.push('mds-badge--has-icon');\n  if (subtle) classes.push('mds-badge--subtle');\n  if (pill) classes.push('mds-badge--pill');\n  if (className) classes.push(className);\n\n  return (\n    <span className={classes.join(' ')} {...props}>\n      {resolvedStartIcon}\n      {label}\n      {resolvedEndIcon}\n    </span>\n  );\n};\n"],"mappings":";;;AAcA,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAM,kBAAkC;CACtC;CACA;CACA;CACA;CACA;CACA;AACF;AAiBA,IAAa,SAAS,EACpB,OACA,SACA,SAAS,OACT,OAAO,OACP,WACA,SACA,WACA,GAAG,YACa;CAChB,MAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAuB,IACvD,UACA;CAEN,MAAM,oBAAoB,cAAc,WAAW,WAAW,IAC1D,YACA;CACJ,IAAI,kBAAkB,cAAc,SAAS,SAAS,IAAI,UAAU;CAgBpE,IAAI,qBAAqB,iBACvB,kBAAkB;CAGpB,MAAM,UAAU;EAAC;EAAa;EAAS,cAAc;CAAiB;CACtE,IAAI,qBAAqB,iBAAiB,QAAQ,KAAK,qBAAqB;CAC5E,IAAI,QAAQ,QAAQ,KAAK,mBAAmB;CAC5C,IAAI,MAAM,QAAQ,KAAK,iBAAiB;CACxC,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,QAAD;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;YAAxC;GACG;GACA;GACA;EACG;;AAEV"}

package/dist/components/badge/index.css

@@ -0,0 +1,115 @@
+.mds-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: var(--mds-spacing-xxs) var(--mds-spacing-xs);
+  border-radius: var(--mds-border-radius-sm);
+
+  font-family: var(--mds-font-family-base);
+  font-weight: var(--mds-font-weight-medium);
+  font-size: var(--mds-font-size-paragraph-small);
+  line-height: var(--mds-line-height-paragraph-xs);
+  letter-spacing: var(--mds-letter-spacing-default);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+.mds-badge--has-icon {
+  gap: var(--mds-spacing-xxs);
+}
+
+/* Normalize icon dimensions to match the badge icon token across <i> and <svg> usage. */
+.mds-badge > i,
+.mds-badge > svg {
+  width: var(--mds-icons-xxs);
+  height: var(--mds-icons-xxs);
+  font-size: var(--mds-icons-xxs);
+  flex-shrink: 0;
+}
+
+/* Pill shape overrides the default rounded corners */
+.mds-badge--pill {
+  border-radius: var(--mds-border-radius-pill);
+}
+
+/*
+ * Per-variant colour rules.
+ * Default contrast: solid coloured background with inverse text.
+ * Subtle contrast (.mds-badge--subtle): light tinted background, dark feedback text, visible border.
+ */
+
+.mds-badge--subtle {
+  border: var(--mds-stroke-weight-sm) solid transparent;
+}
+
+/* --- Primary --- */
+.mds-badge--primary {
+  background-color: var(--mds-bg-feedback-primary-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-badge--primary.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-primary-subtle);
+  color: var(--mds-text-feedback-primary);
+  border-color: var(--mds-border-feedback-primary);
+}
+
+/* --- Secondary --- */
+.mds-badge--secondary {
+  background-color: var(--mds-bg-feedback-secondary-default);
+  color: var(--mds-text-feedback-secondary);
+}
+
+.mds-badge--secondary.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-secondary-subtle);
+  color: var(--mds-text-feedback-secondary);
+  border-color: var(--mds-border-feedback-secondary);
+}
+
+/* --- Success --- */
+.mds-badge--success {
+  background-color: var(--mds-bg-feedback-success-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-badge--success.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-success-subtle);
+  color: var(--mds-text-feedback-success);
+  border-color: var(--mds-border-feedback-success);
+}
+
+/* --- Danger --- */
+.mds-badge--danger {
+  background-color: var(--mds-bg-feedback-danger-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-badge--danger.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-danger-subtle);
+  color: var(--mds-text-feedback-danger);
+  border-color: var(--mds-border-feedback-danger);
+}
+
+/* --- Warning --- */
+.mds-badge--warning {
+  background-color: var(--mds-bg-feedback-warning-default);
+  color: var(--mds-text-feedback-warning);
+}
+
+.mds-badge--warning.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-warning-subtle);
+  color: var(--mds-text-feedback-warning);
+  border-color: var(--mds-border-feedback-warning);
+}
+
+/* --- Info --- */
+.mds-badge--info {
+  background-color: var(--mds-bg-feedback-info-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-badge--info.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-info-subtle);
+  color: var(--mds-text-feedback-info);
+  border-color: var(--mds-border-feedback-info);
+}

package/dist/components/badge/index.js

@@ -1,2 +1,2 @@
-import { Badge } from "./Badge2.js";
+import { Badge } from "./Badge.js";
 export { Badge };

package/dist/components/button/index.css

@@ -0,0 +1,295 @@
+.mds-btn.btn {
+  background-color: var(--mds-bg-interactive-primary-default);
+  border: none;
+  border-radius: var(--mds-border-radius-sm);
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
+
+  color: var(--mds-text-inverse);
+  font-family: var(--mds-font-family-base);
+  font-weight: var(--mds-font-weight-regular);
+  font-size: var(--mds-font-size-paragraph-default);
+  line-height: var(--mds-line-height-paragraph-xs);
+  letter-spacing: var(--mds-letter-spacing-default);
+
+  /* Keep icon/text spacing consistent with icon variants from the design matrix. */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mds-spacing-xs);
+}
+
+/* Icon-only sizing in Figma is not derived from text button size classes. */
+.mds-btn.btn.mds-btn--icon-only {
+  padding: var(--mds-spacing-xs);
+  border-radius: var(--mds-border-radius-xl);
+}
+
+.mds-btn.btn.mds-btn--icon-only i,
+.mds-btn.btn.mds-btn--icon-only svg {
+  inline-size: var(--mds-icons-xs);
+  block-size: var(--mds-icons-xs);
+  font-size: var(--mds-icons-xs);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.mds-btn.btn.mds-btn--icon-only.mds-btn--size-sm {
+  padding: var(--mds-spacing-xxs);
+}
+
+.mds-btn.btn.mds-btn--icon-only.mds-btn--size-sm i,
+.mds-btn.btn.mds-btn--icon-only.mds-btn--size-sm svg {
+  inline-size: var(--mds-icons-xxs);
+  block-size: var(--mds-icons-xxs);
+  font-size: var(--mds-icons-xxs);
+}
+
+.mds-btn.btn.mds-btn--icon-only.mds-btn--size-lg {
+  padding: var(--mds-spacing-xs);
+  border-radius: var(--mds-border-radius-sm);
+}
+
+.mds-btn.btn.mds-btn--size-sm i,
+.mds-btn.btn.mds-btn--size-sm svg {
+  inline-size: var(--mds-icons-xxs);
+  block-size: var(--mds-icons-xxs);
+  font-size: var(--mds-icons-xxs);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.mds-btn.btn.mds-btn--size-md i,
+.mds-btn.btn.mds-btn--size-md svg,
+.mds-btn.btn.mds-btn--size-lg i,
+.mds-btn.btn.mds-btn--size-lg svg {
+  inline-size: var(--mds-icons-xs);
+  block-size: var(--mds-icons-xs);
+  font-size: var(--mds-icons-xs);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.mds-btn.btn:focus {
+  box-shadow: none;
+  outline: none;
+}
+.mds-btn.btn:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+.mds-btn.btn:active:focus-visible {
+  box-shadow: none;
+}
+.mds-btn.btn.btn-danger:focus-visible,
+.mds-btn.btn.btn-outline-danger:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-danger);
+}
+.mds-btn.btn:hover {
+  background-color: var(--mds-bg-interactive-primary-hover);
+}
+.mds-btn.btn:active {
+  background-color: var(--mds-bg-interactive-primary-active);
+  box-shadow: none;
+}
+.mds-btn.btn:disabled {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+}
+
+/**
+  * Secondary variants
+  */
+.mds-btn.btn.btn-secondary {
+  background-color: var(--mds-bg-interactive-secondary-default);
+  color: var(--mds-text-subtle);
+}
+.mds-btn.btn.btn-secondary:hover {
+  background-color: var(--mds-bg-interactive-secondary-hover);
+}
+.mds-btn.btn.btn-secondary:active {
+  background-color: var(--mds-bg-interactive-secondary-active);
+}
+.mds-btn.btn.btn-secondary:disabled {
+  background-color: var(--mds-bg-interactive-secondary-disabled);
+  color: var(--mds-text-muted);
+}
+
+/**
+  * Danger variants
+  */
+.mds-btn.btn-danger {
+  background-color: var(--mds-bg-interactive-danger-default);
+}
+.mds-btn.btn-danger:hover {
+  background-color: var(--mds-bg-interactive-danger-hover);
+}
+.mds-btn.btn-danger:active {
+  background-color: var(--mds-bg-interactive-danger-active);
+}
+.mds-btn.btn.btn-danger:disabled {
+  background-color: var(--mds-bg-interactive-danger-disabled);
+}
+
+/**
+  * Ghost variants
+  */
+.mds-btn.btn.btn-ghost {
+  background-color: transparent;
+  color: var(--mds-text-subtle);
+}
+.mds-btn.btn.btn-ghost:hover {
+  background-color: var(--mds-bg-interactive-secondary-hover);
+  color: var(--mds-text-subtle);
+}
+.mds-btn.btn.btn-ghost:active {
+  background-color: var(--mds-bg-interactive-secondary-active);
+  color: var(--mds-text-subtle);
+}
+.mds-btn.btn.btn-ghost:disabled {
+  background-color: transparent;
+  color: var(--mds-text-muted);
+}
+
+/**
+  * Outline Primary variants
+  */
+.mds-btn.btn:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  background-color: transparent;
+  border: var(--mds-stroke-weight-sm) solid transparent;
+}
+
+.mds-btn.btn.btn-outline-primary {
+  border-color: var(--mds-border-interactive-primary-default);
+  color: var(--mds-text-link-primary-default);
+}
+.mds-btn.btn-outline-primary:hover {
+  border-color: var(--mds-bg-interactive-primary-hover);
+  background-color: var(--mds-bg-interactive-primary-hover);
+  color: var(--mds-text-inverse);
+}
+.mds-btn.btn-outline-primary:active {
+  border-color: var(--mds-bg-interactive-primary-active);
+  background-color: var(--mds-bg-interactive-primary-active);
+  color: var(--mds-text-inverse);
+}
+.mds-btn.btn.btn-outline-primary:disabled {
+  border-color: var(--mds-border-interactive-primary-disabled);
+  color: var(--mds-text-link-primary-disabled);
+}
+
+/**
+  * Outline Secondary variants
+  */
+.mds-btn.btn.btn-outline-secondary {
+  border-color: var(--mds-border-interactive-secondary-default);
+  color: var(--mds-text-subtle);
+}
+.mds-btn.btn-outline-secondary:hover {
+  border-color: var(--mds-border-interactive-secondary-hover);
+  background-color: var(--mds-border-interactive-secondary-hover);
+  color: var(--mds-text-inverse);
+}
+.mds-btn.btn-outline-secondary:active {
+  border-color: var(--mds-border-interactive-secondary-active);
+  background-color: var(--mds-border-interactive-secondary-active);
+  color: var(--mds-text-inverse);
+}
+.mds-btn.btn.btn-outline-secondary:disabled {
+  border-color: var(--mds-border-interactive-secondary-disabled);
+  color: var(--mds-text-muted);
+}
+
+/**
+  * Outline Danger variants
+  */
+.mds-btn.btn.btn-outline-danger {
+  border-color: var(--mds-border-interactive-danger-default);
+  color: var(--mds-text-danger);
+}
+.mds-btn.btn-outline-danger:hover {
+  border-color: var(--mds-bg-interactive-danger-hover);
+  background-color: var(--mds-bg-interactive-danger-hover);
+  color: var(--mds-text-inverse);
+}
+.mds-btn.btn-outline-danger:active {
+  border-color: var(--mds-bg-interactive-danger-active);
+  background-color: var(--mds-bg-interactive-danger-active);
+  color: var(--mds-text-inverse);
+}
+.mds-btn.btn.btn-outline-danger:disabled {
+  border-color: var(--mds-border-interactive-danger-disabled);
+  color: var(--mds-text-danger-disabled);
+}
+
+/**
+  * Size variants
+  */
+.mds-btn.mds-btn--size-sm {
+  padding: var(--mds-spacing-xxs) var(--mds-spacing-xs);
+  border-radius: var(--mds-border-radius-xs);
+  font-weight: var(--mds-font-weight-medium);
+  font-size: var(--mds-font-size-paragraph-small);
+}
+.mds-btn.mds-btn--size-md {
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
+  font-size: var(--mds-font-size-paragraph-default);
+}
+.mds-btn.mds-btn--size-lg {
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  font-size: var(--mds-font-size-paragraph-default);
+}
+
+/* Keep outer geometry aligned with filled variants when outline border is present. */
+.mds-btn.mds-btn--size-sm:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xxs) - var(--mds-stroke-weight-sm))
+    calc(var(--mds-spacing-xs) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--size-md:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xs) - var(--mds-stroke-weight-sm))
+    calc(var(--mds-spacing-sm) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--size-lg:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-sm) - var(--mds-stroke-weight-sm))
+    calc(var(--mds-spacing-md) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--icon-only:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xs) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--icon-only.mds-btn--size-sm:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xxs) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--icon-only.mds-btn--size-lg:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xs) - var(--mds-stroke-weight-sm));
+}