@moodlehq/design-system 3.0.0 → 3.2.0

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../components/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactElement } from 'react';\nimport { isValidElement } from 'react';\n\ntype ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'outline-primary'\n  | 'outline-secondary'\n  | 'outline-danger';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  label?: string;\n  variant?: ButtonVariant;\n  size?: 'sm' | 'lg';\n  startIcon?: IconElement;\n  endIcon?: IconElement;\n}\n\n// Runtime guard — prop for icons 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(`Button: \\`${propName}\\` must be an <i> or <svg> element.`);\n  }\n  return valid;\n};\n\nconst allowedVariants: ButtonVariant[] = [\n  'primary',\n  'secondary',\n  'danger',\n  'outline-primary',\n  'outline-secondary',\n  'outline-danger',\n];\n\nexport const Button = ({\n  label,\n  variant,\n  size,\n  startIcon,\n  endIcon,\n  className,\n  type = 'button',\n  ...props\n}: ButtonProps) => {\n  // Warn in development if button has no accessible name\n  if (import.meta.env.DEV) {\n    const hasLabel = Boolean(label);\n    const hasAriaLabel = 'aria-label' in props;\n    if (!hasLabel && !hasAriaLabel) {\n      console.warn(\n        'Button: label prop or aria-label attribute is required for accessibility.',\n      );\n    }\n    if (variant && !allowedVariants.includes(variant as ButtonVariant)) {\n      console.warn(\n        `[MDS Button] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n      );\n    }\n  }\n\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant as ButtonVariant)\n      ? variant\n      : 'primary';\n\n  const classes = ['mds-btn', 'btn', `btn-${resolvedVariant}`];\n  if (size) {\n    classes.push(`btn-${size}`);\n  }\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <button className={classes.join(' ')} type={type} {...props}>\n      {isIconElement(startIcon, 'startIcon') ? startIcon : null}\n      {label}\n      {isIconElement(endIcon, 'endIcon') ? endIcon : null}\n    </button>\n  );\n};\n"],"mappings":";;;AAsBA,IAAM,iBAAiB,IAAa,aAAwC;AAK1E,QAJc,eAAe,GAAG,KAAK,GAAG,SAAS,OAAO,GAAG,SAAS;;AAOtE,IAAM,kBAAmC;CACvC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,UAAU,EACrB,OACA,SACA,MACA,WACA,SACA,WACA,OAAO,UACP,GAAG,YACc;CAsBjB,MAAM,UAAU;EAAC;EAAW;EAAO,OAJjC,WAAW,gBAAgB,SAAS,QAAyB,GACzD,UACA;EAEsD;AAC5D,KAAI,KACF,SAAQ,KAAK,OAAO,OAAO;AAE7B,KAAI,UACF,SAAQ,KAAK,UAAU;AAGzB,QACE,qBAAC,UAAD;EAAQ,WAAW,QAAQ,KAAK,IAAI;EAAQ;EAAM,GAAI;YAAtD;GACG,cAAc,WAAW,YAAY,GAAG,YAAY;GACpD;GACA,cAAc,SAAS,UAAU,GAAG,UAAU;GACxC"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../components/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactElement } from 'react';\nimport { isValidElement } from 'react';\n\ntype ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'outline-primary'\n  | 'outline-secondary'\n  | 'outline-danger';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  label?: string;\n  variant?: ButtonVariant;\n  size?: 'sm' | 'lg';\n  startIcon?: IconElement;\n  endIcon?: IconElement;\n}\n\n// Runtime guard — prop for icons 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(`Button: \\`${propName}\\` must be an <i> or <svg> element.`);\n  }\n  return valid;\n};\n\nconst allowedVariants: ButtonVariant[] = [\n  'primary',\n  'secondary',\n  'danger',\n  'outline-primary',\n  'outline-secondary',\n  'outline-danger',\n];\n\nexport const Button = ({\n  label,\n  variant,\n  size,\n  startIcon,\n  endIcon,\n  className,\n  type = 'button',\n  ...props\n}: ButtonProps) => {\n  // Warn in development if button has no accessible name\n  if (import.meta.env.DEV) {\n    const hasLabel = Boolean(label);\n    const hasAriaLabel = 'aria-label' in props;\n    if (!hasLabel && !hasAriaLabel) {\n      console.warn(\n        'Button: label prop or aria-label attribute is required for accessibility.',\n      );\n    }\n    if (variant && !allowedVariants.includes(variant as ButtonVariant)) {\n      console.warn(\n        `[MDS Button] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n      );\n    }\n  }\n\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant as ButtonVariant)\n      ? variant\n      : 'primary';\n\n  const classes = ['mds-btn', 'btn', `btn-${resolvedVariant}`];\n  if (size) {\n    classes.push(`btn-${size}`);\n  }\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <button className={classes.join(' ')} type={type} {...props}>\n      {isIconElement(startIcon, 'startIcon') ? startIcon : null}\n      {label}\n      {isIconElement(endIcon, 'endIcon') ? endIcon : null}\n    </button>\n  );\n};\n"],"mappings":";;;AAsBA,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAM,kBAAmC;CACvC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,UAAU,EACrB,OACA,SACA,MACA,WACA,SACA,WACA,OAAO,UACP,GAAG,YACc;CAsBjB,MAAM,UAAU;EAAC;EAAW;EAAO,OAJjC,WAAW,gBAAgB,SAAS,OAAwB,IACxD,UACA;CAEqD;CAC3D,IAAI,MACF,QAAQ,KAAK,OAAO,MAAM;CAE5B,IAAI,WACF,QAAQ,KAAK,SAAS;CAGxB,OACE,qBAAC,UAAD;EAAQ,WAAW,QAAQ,KAAK,GAAG;EAAS;EAAM,GAAI;YAAtD;GACG,cAAc,WAAW,WAAW,IAAI,YAAY;GACpD;GACA,cAAc,SAAS,SAAS,IAAI,UAAU;EACzC;;AAEZ"}

package/dist/components/close-button/CloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.js","names":[],"sources":["../../../components/close-button/CloseButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\n\ntype CloseButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface CloseButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> {\n  /**\n   * Accessible name announced by screen readers for the close button control.\n   * Must be a translated string provided by the caller.\n   */\n  'aria-label': string;\n\n  /**\n   * Visual size variant for the close icon button.\n   * Invalid values fall back to the default `md` size at runtime.\n   */\n  size?: string;\n}\n\nconst allowedSizes: CloseButtonSize[] = ['sm', 'md', 'lg'];\n\nexport const CloseButton = ({\n  'aria-label': ariaLabel,\n  size,\n  className,\n  ...props\n}: CloseButtonProps) => {\n  if (\n    import.meta.env.DEV &&\n    size &&\n    !allowedSizes.includes(size as CloseButtonSize)\n  ) {\n    console.warn(\n      `[MDS CloseButton] Invalid size \"${size}\". Falling back to \"md\". Allowed: ${allowedSizes.join(', ')}`,\n    );\n  }\n\n  const resolvedSize =\n    size && allowedSizes.includes(size as CloseButtonSize) ? size : 'md';\n\n  const classes = [\n    'mds-close-button',\n    'btn-close',\n    `mds-close-button--${resolvedSize}`,\n  ];\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <button\n      className={classes.join(' ')}\n      aria-label={ariaLabel}\n      {...props}\n      type=\"button\"\n    ></button>\n  );\n};\n"],"mappings":";;AAqBA,IAAM,eAAkC;CAAC;CAAM;CAAM;CAAK;AAE1D,IAAa,eAAe,EAC1B,cAAc,WACd,MACA,WACA,GAAG,YACmB;CActB,MAAM,UAAU;EACd;EACA;EACA,qBALA,QAAQ,aAAa,SAAS,KAAwB,GAAG,OAAO;EAMjE;AACD,KAAI,UACF,SAAQ,KAAK,UAAU;AAGzB,QACE,oBAAC,UAAD;EACE,WAAW,QAAQ,KAAK,IAAI;EAC5B,cAAY;EACZ,GAAI;EACJ,MAAK;EACG,CAAA"}
+{"version":3,"file":"CloseButton.js","names":[],"sources":["../../../components/close-button/CloseButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\n\ntype CloseButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface CloseButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> {\n  /**\n   * Accessible name announced by screen readers for the close button control.\n   * Must be a translated string provided by the caller.\n   */\n  'aria-label': string;\n\n  /**\n   * Visual size variant for the close icon button.\n   * Invalid values fall back to the default `md` size at runtime.\n   */\n  size?: string;\n}\n\nconst allowedSizes: CloseButtonSize[] = ['sm', 'md', 'lg'];\n\nexport const CloseButton = ({\n  'aria-label': ariaLabel,\n  size,\n  className,\n  ...props\n}: CloseButtonProps) => {\n  if (\n    import.meta.env.DEV &&\n    size &&\n    !allowedSizes.includes(size as CloseButtonSize)\n  ) {\n    console.warn(\n      `[MDS CloseButton] Invalid size \"${size}\". Falling back to \"md\". Allowed: ${allowedSizes.join(', ')}`,\n    );\n  }\n\n  const resolvedSize =\n    size && allowedSizes.includes(size as CloseButtonSize) ? size : 'md';\n\n  const classes = [\n    'mds-close-button',\n    'btn-close',\n    `mds-close-button--${resolvedSize}`,\n  ];\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <button\n      className={classes.join(' ')}\n      aria-label={ariaLabel}\n      {...props}\n      type=\"button\"\n    ></button>\n  );\n};\n"],"mappings":";;AAqBA,IAAM,eAAkC;CAAC;CAAM;CAAM;AAAI;AAEzD,IAAa,eAAe,EAC1B,cAAc,WACd,MACA,WACA,GAAG,YACmB;CActB,MAAM,UAAU;EACd;EACA;EACA,qBALA,QAAQ,aAAa,SAAS,IAAuB,IAAI,OAAO;CAMlE;CACA,IAAI,WACF,QAAQ,KAAK,SAAS;CAGxB,OACE,oBAAC,UAAD;EACE,WAAW,QAAQ,KAAK,GAAG;EAC3B,cAAY;EACZ,GAAI;EACJ,MAAK;CACE,CAAA;AAEb"}

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
+export { ActivityIcon } from './activity-icon';
+export type { ActivityIconProps } from './activity-icon';
 export { Button } from './button';
 export type { ButtonProps } from './button';
 export { CloseButton } from './close-button';

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../../../components/radio/Radio.tsx"],"sourcesContent":["import { type InputHTMLAttributes, forwardRef, useId } from 'react';\n\n// Extend InputHTMLAttributes to allow passing any valid input attributes, but also add our custom props like feedback and label.\nexport interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** Visible label text. When hideLabel is true this also serves as the aria-label fallback\n   *  if no explicit aria-label prop is provided. */\n  label?: string;\n  /** When true, the visible label element is hidden. The input is still labelled accessibly\n   *  via aria-label (prop) → label (prop) in that order of precedence. Suppresses\n   *  invalidFeedback — feedback text requires a visible label to provide context.\n   *\n   *  Use cases: hideLabel is appropriate when the visual label would be redundant or visually cluttered,\n   *  such as in dense tables where the column header acts as the label, or in icon-only UIs. Always ensure\n   *  an accessible name is provided via aria-label or label prop. */\n  hideLabel?: boolean;\n  /** Marks the input as invalid: applies danger border/label colour and sets aria-invalid.\n   *  Independent of invalidFeedback — invalid styling can be shown without a message. */\n  invalid?: boolean;\n  /** Pre-translated error message rendered below the label. Requires invalid={true} and\n   *  hideLabel={false} to be displayed. Only invalid feedback is supported; is-valid\n   *  and neutral feedback states are intentionally not implemented. */\n  invalidFeedback?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      invalidFeedback,\n      invalid,\n      className,\n      label,\n      hideLabel = false,\n      ...props\n    }: RadioProps,\n    ref,\n  ) => {\n    const generatedId = useId();\n    const id = props.id ?? generatedId;\n\n    // The invalid state on the input (border, aria-invalid) is independent of\n    // hideLabel — a label-less input can still be invalid. Only the feedback text\n    // requires a visible label for context and is suppressed when hideLabel is true.\n    const isInvalid = !!invalid;\n\n    if (import.meta.env.DEV) {\n      if (hideLabel && !props['aria-label'] && !label) {\n        console.warn(\n          'Radio: label prop or aria-label attribute is required for accessibility when hideLabel is true.',\n        );\n      }\n      if (!hideLabel && !label) {\n        console.warn(\n          'Radio: label prop is required when hideLabel is false. An empty label creates an inaccessible form control.',\n        );\n      }\n      if (hideLabel && invalidFeedback) {\n        console.warn(\n          'Radio: invalidFeedback is ignored when hideLabel is true. Feedback text requires a visible label to provide context.',\n        );\n      }\n      if (!hideLabel && invalidFeedback && !invalid) {\n        console.warn(\n          'Radio: invalidFeedback is provided without invalid={true}. Pass invalid={true} to apply invalid styling alongside the feedback text.',\n        );\n      }\n    }\n    // Build the class list for the radio wrapper div. mds-form-check is always applied\n    // as a stable hook for consumers; form-check and layout classes are added only when\n    // the label is visible (Bootstrap label/feedback styling and grid layout).\n    const classes = ['mds-form-check'];\n    if (!hideLabel) {\n      classes.push('form-check');\n    }\n    if (className) {\n      classes.push(className);\n    }\n\n    // When the label is hidden, derive aria-label from: caller's aria-label → label prop → undefined (warned above).\n    const ariaLabel = hideLabel ? (props['aria-label'] ?? label) : undefined;\n\n    // Link the input to its feedback text so screen readers announce the error message.\n    // The ID is only generated when feedback will actually be rendered.\n    const feedbackId =\n      invalidFeedback && !hideLabel && invalid ? `${id}-feedback` : undefined;\n\n    return (\n      <div className={classes.join(' ')}>\n        <input\n          className={[\n            'mds-form-check-input',\n            'form-check-input',\n            isInvalid ? 'is-invalid' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          type=\"radio\"\n          ref={ref}\n          {...props}\n          aria-invalid={isInvalid ? true : undefined}\n          aria-label={ariaLabel}\n          aria-describedby={feedbackId}\n          id={id} // Ensure we use the generated ID if no ID is provided, so the label can be properly associated with the input for accessibility.\n        />\n        {!hideLabel && (\n          <label className=\"mds-form-check-label form-check-label\" htmlFor={id}>\n            {label}\n          </label>\n        )}\n        {feedbackId && (\n          <div\n            id={feedbackId}\n            className=\"mds-form-check-feedback invalid-feedback\"\n          >\n            {invalidFeedback}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nRadio.displayName = 'Radio';\n"],"mappings":";;;AAwBA,IAAa,QAAQ,YAEjB,EACE,iBACA,SACA,WACA,OACA,YAAY,OACZ,GAAG,SAEL,QACG;CACH,MAAM,cAAc,OAAO;CAC3B,MAAM,KAAK,MAAM,MAAM;CAKvB,MAAM,YAAY,CAAC,CAAC;CA2BpB,MAAM,UAAU,CAAC,iBAAiB;AAClC,KAAI,CAAC,UACH,SAAQ,KAAK,aAAa;AAE5B,KAAI,UACF,SAAQ,KAAK,UAAU;CAIzB,MAAM,YAAY,YAAa,MAAM,iBAAiB,QAAS,KAAA;CAI/D,MAAM,aACJ,mBAAmB,CAAC,aAAa,UAAU,GAAG,GAAG,aAAa,KAAA;AAEhE,QACE,qBAAC,OAAD;EAAK,WAAW,QAAQ,KAAK,IAAI;YAAjC;GACE,oBAAC,SAAD;IACE,WAAW;KACT;KACA;KACA,YAAY,eAAe;KAC5B,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,MAAK;IACA;IACL,GAAI;IACJ,gBAAc,YAAY,OAAO,KAAA;IACjC,cAAY;IACZ,oBAAkB;IACd;IACJ,CAAA;GACD,CAAC,aACA,oBAAC,SAAD;IAAO,WAAU;IAAwC,SAAS;cAC/D;IACK,CAAA;GAET,cACC,oBAAC,OAAD;IACE,IAAI;IACJ,WAAU;cAET;IACG,CAAA;GAEJ;;EAGX;AACD,MAAM,cAAc"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../components/radio/Radio.tsx"],"sourcesContent":["import { type InputHTMLAttributes, forwardRef, useId } from 'react';\n\n// Extend InputHTMLAttributes to allow passing any valid input attributes, but also add our custom props like feedback and label.\nexport interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** Visible label text. When hideLabel is true this also serves as the aria-label fallback\n   *  if no explicit aria-label prop is provided. */\n  label?: string;\n  /** When true, the visible label element is hidden. The input is still labelled accessibly\n   *  via aria-label (prop) → label (prop) in that order of precedence. Suppresses\n   *  invalidFeedback — feedback text requires a visible label to provide context.\n   *\n   *  Use cases: hideLabel is appropriate when the visual label would be redundant or visually cluttered,\n   *  such as in dense tables where the column header acts as the label, or in icon-only UIs. Always ensure\n   *  an accessible name is provided via aria-label or label prop. */\n  hideLabel?: boolean;\n  /** Marks the input as invalid: applies danger border/label colour and sets aria-invalid.\n   *  Independent of invalidFeedback — invalid styling can be shown without a message. */\n  invalid?: boolean;\n  /** Pre-translated error message rendered below the label. Requires invalid={true} and\n   *  hideLabel={false} to be displayed. Only invalid feedback is supported; is-valid\n   *  and neutral feedback states are intentionally not implemented. */\n  invalidFeedback?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      invalidFeedback,\n      invalid,\n      className,\n      label,\n      hideLabel = false,\n      ...props\n    }: RadioProps,\n    ref,\n  ) => {\n    const generatedId = useId();\n    const id = props.id ?? generatedId;\n\n    // The invalid state on the input (border, aria-invalid) is independent of\n    // hideLabel — a label-less input can still be invalid. Only the feedback text\n    // requires a visible label for context and is suppressed when hideLabel is true.\n    const isInvalid = !!invalid;\n\n    if (import.meta.env.DEV) {\n      if (hideLabel && !props['aria-label'] && !label) {\n        console.warn(\n          'Radio: label prop or aria-label attribute is required for accessibility when hideLabel is true.',\n        );\n      }\n      if (!hideLabel && !label) {\n        console.warn(\n          'Radio: label prop is required when hideLabel is false. An empty label creates an inaccessible form control.',\n        );\n      }\n      if (hideLabel && invalidFeedback) {\n        console.warn(\n          'Radio: invalidFeedback is ignored when hideLabel is true. Feedback text requires a visible label to provide context.',\n        );\n      }\n      if (!hideLabel && invalidFeedback && !invalid) {\n        console.warn(\n          'Radio: invalidFeedback is provided without invalid={true}. Pass invalid={true} to apply invalid styling alongside the feedback text.',\n        );\n      }\n    }\n    // Build the class list for the radio wrapper div. mds-form-check is always applied\n    // as a stable hook for consumers; form-check and layout classes are added only when\n    // the label is visible (Bootstrap label/feedback styling and grid layout).\n    const classes = ['mds-form-check'];\n    if (!hideLabel) {\n      classes.push('form-check');\n    }\n    if (className) {\n      classes.push(className);\n    }\n\n    // When the label is hidden, derive aria-label from: caller's aria-label → label prop → undefined (warned above).\n    const ariaLabel = hideLabel ? (props['aria-label'] ?? label) : undefined;\n\n    // Link the input to its feedback text so screen readers announce the error message.\n    // The ID is only generated when feedback will actually be rendered.\n    const feedbackId =\n      invalidFeedback && !hideLabel && invalid ? `${id}-feedback` : undefined;\n\n    return (\n      <div className={classes.join(' ')}>\n        <input\n          className={[\n            'mds-form-check-input',\n            'form-check-input',\n            isInvalid ? 'is-invalid' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          type=\"radio\"\n          ref={ref}\n          {...props}\n          aria-invalid={isInvalid ? true : undefined}\n          aria-label={ariaLabel}\n          aria-describedby={feedbackId}\n          id={id} // Ensure we use the generated ID if no ID is provided, so the label can be properly associated with the input for accessibility.\n        />\n        {!hideLabel && (\n          <label className=\"mds-form-check-label form-check-label\" htmlFor={id}>\n            {label}\n          </label>\n        )}\n        {feedbackId && (\n          <div\n            id={feedbackId}\n            className=\"mds-form-check-feedback invalid-feedback\"\n          >\n            {invalidFeedback}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nRadio.displayName = 'Radio';\n"],"mappings":";;;AAwBA,IAAa,QAAQ,YAEjB,EACE,iBACA,SACA,WACA,OACA,YAAY,OACZ,GAAG,SAEL,QACG;CACH,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,MAAM,MAAM;CAKvB,MAAM,YAAY,CAAC,CAAC;CA2BpB,MAAM,UAAU,CAAC,gBAAgB;CACjC,IAAI,CAAC,WACH,QAAQ,KAAK,YAAY;CAE3B,IAAI,WACF,QAAQ,KAAK,SAAS;CAIxB,MAAM,YAAY,YAAa,MAAM,iBAAiB,QAAS,KAAA;CAI/D,MAAM,aACJ,mBAAmB,CAAC,aAAa,UAAU,GAAG,GAAG,aAAa,KAAA;CAEhE,OACE,qBAAC,OAAD;EAAK,WAAW,QAAQ,KAAK,GAAG;YAAhC;GACE,oBAAC,SAAD;IACE,WAAW;KACT;KACA;KACA,YAAY,eAAe;IAC7B,EACG,OAAO,OAAO,EACd,KAAK,GAAG;IACX,MAAK;IACA;IACL,GAAI;IACJ,gBAAc,YAAY,OAAO,KAAA;IACjC,cAAY;IACZ,oBAAkB;IACd;GACL,CAAA;GACA,CAAC,aACA,oBAAC,SAAD;IAAO,WAAU;IAAwC,SAAS;cAC/D;GACI,CAAA;GAER,cACC,oBAAC,OAAD;IACE,IAAI;IACJ,WAAU;cAET;GACE,CAAA;EAEJ;;AAET,CACF;AACA,MAAM,cAAc"}

package/dist/index.css

@@ -1,4 +1,109 @@
-@charset "UTF-8";.mds-btn.btn {
+@charset "UTF-8";.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%;
+}
+
+.mds-btn.btn {
   background-color: var(--mds-bg-interactive-primary-default);
   border: var(--mds-stroke-weight-sm) solid var(--mds-border-translucent);
   border-radius: var(--mds-border-radius-md);
@@ -17,129 +122,161 @@
   align-items: center;
   gap: var(--mds-spacing-xxs);
 }
+
 .mds-btn.btn:hover {
   background-color: var(--mds-bg-interactive-primary-hover);
 }
+
 .mds-btn.btn:active {
   background-color: var(--mds-bg-interactive-primary-active);
   border: var(--mds-stroke-weight-sm) solid var(--mds-border-translucent);
 }
+
 .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-default);
 }
+
 .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);
 }
+
 /**
   * 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);
 }
+
 /**
   * Outline Primary variants
   */
+
 .mds-btn.btn-outline-primary {
   background-color: transparent;
   border: var(--mds-stroke-weight-sm) solid
     var(--mds-border-interactive-primary-default);
   color: var(--mds-text-link-primary-default);
 }
+
 .mds-btn.btn-outline-primary:hover {
   background-color: var(--mds-bg-interactive-primary-hover);
   color: var(--mds-text-inverse);
 }
+
 .mds-btn.btn-outline-primary:active {
   background-color: var(--mds-bg-interactive-primary-active);
   color: var(--mds-text-inverse);
 }
+
 .mds-btn.btn.btn-outline-primary:disabled {
   background-color: transparent;
   border: var(--mds-stroke-weight-sm) solid
     var(--mds-border-interactive-primary-disabled);
   color: var(--mds-color-blue-300);
 }
+
 /**
   * Outline Secondary variants
   */
+
 .mds-btn.btn-outline-secondary {
   background-color: transparent;
   border: var(--mds-stroke-weight-sm) solid
     var(--mds-border-interactive-secondary-default);
   color: var(--mds-text-muted);
 }
+
 .mds-btn.btn-outline-secondary:hover {
   background-color: var(--mds-border-interactive-secondary-hover);
   color: var(--mds-text-inverse);
 }
+
 .mds-btn.btn-outline-secondary:active {
   background-color: var(--mds-border-interactive-secondary-active);
   color: var(--mds-text-inverse);
 }
+
 .mds-btn.btn.btn-outline-secondary:disabled {
   background-color: transparent;
   border: var(--mds-stroke-weight-sm) solid
     var(--mds-border-interactive-secondary-disabled);
   color: var(--mds-color-gray-500);
 }
+
 /**
   * Outline Danger variants
   */
+
 .mds-btn.btn-outline-danger {
   background-color: transparent;
   border: var(--mds-stroke-weight-sm) solid
     var(--mds-border-interactive-danger-default);
   color: var(--mds-text-danger);
 }
+
 .mds-btn.btn-outline-danger:hover {
   background-color: var(--mds-bg-interactive-danger-default);
   color: var(--mds-text-inverse);
 }
+
 .mds-btn.btn-outline-danger:active {
   background-color: var(--mds-bg-interactive-danger-hover);
   color: var(--mds-text-inverse);
 }
+
 .mds-btn.btn.btn-outline-danger:disabled {
   background-color: transparent;
   border: var(--mds-stroke-weight-sm) solid
     var(--mds-border-interactive-danger-disabled);
   color: var(--mds-color-red-300);
 }
+
 /**
   * Size variants
   */
+
 .mds-btn.btn-sm {
   padding: var(--mds-spacing-xxs) var(--mds-spacing-xs);
   font-size: var(--mds-font-size-paragraph-small);
   line-height: var(--mds-line-height-paragraph-small);
 }
+
 .mds-btn.btn-lg {
   padding: var(--mds-spacing-xs) var(--mds-spacing-md);
   font-size: var(--mds-font-size-paragraph-lead);
   line-height: var(--mds-line-height-paragraph-default);
 }
+
 .mds-close-button.btn-close {
   inline-size: var(--mds-icons-md);
   block-size: var(--mds-icons-md);
@@ -149,38 +286,47 @@
   background-size: var(--mds-icons-md) var(--mds-icons-md);
   opacity: 0.6;
 }
+
 .mds-close-button.btn-close:hover {
   opacity: 0.75;
 }
+
 .mds-close-button.btn-close:focus {
   box-shadow: none;
 }
+
 .mds-close-button.btn-close:focus-visible {
   outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
   outline-offset: 0;
   box-shadow: none;
   opacity: 1;
 }
+
 .mds-close-button.btn-close:disabled,
 .mds-close-button.btn-close.disabled {
   opacity: 0.25;
 }
+
 .mds-close-button.btn-close.mds-close-button--sm {
   inline-size: var(--mds-icons-sm);
   block-size: var(--mds-icons-sm);
   background-size: var(--mds-icons-sm) var(--mds-icons-sm);
 }
+
 .mds-close-button.btn-close.mds-close-button--md {
   inline-size: var(--mds-icons-md);
   block-size: var(--mds-icons-md);
   background-size: var(--mds-icons-md) var(--mds-icons-md);
 }
+
 .mds-close-button.btn-close.mds-close-button--lg {
   inline-size: var(--mds-icons-lg);
   block-size: var(--mds-icons-lg);
   background-size: var(--mds-icons-lg) var(--mds-icons-lg);
 }
+
 /* Parent element */
+
 .mds-form-check {
   /* Grid layout: column 1 = input, column 2 = label. The feedback is then placed
      explicitly into column 2 via grid-column so it aligns with the label without
@@ -210,7 +356,9 @@
   line-height: var(--mds-line-height-paragraph-small, 1.0875rem); /* 108.75% */
   letter-spacing: var(--mds-letter-spacing, 0);
 }
+
 /* Input element styles */
+
 .mds-form-check-input {
   border-radius: var(--mds-border-radius-pill, 50rem);
   border: var(--mds-stroke-weight-sm, 1px) solid
@@ -219,83 +367,106 @@
      background-image to none, which wipes out Bootstrap's --bs-form-check-bg-image
      (the inner dot SVG) on the checked state. */
 }
+
 /* Bootstrap's .form-check .form-check-input rule (specificity 0,2,0) sets float: left
    and a negative margin-inline-start that causes overlap. Match its specificity to
    ensure our flex-friendly reset wins regardless of load order. */
+
 .mds-form-check .mds-form-check-input {
   margin: 0;
   float: none;
   background-color: var(--mds-bg-surface-default, #fff);
 }
+
 .mds-form-check-input:checked {
   background-color: var(--mds-bg-interactive-primary-default);
   border-color: transparent;
 }
+
 .mds-form-check-input:disabled {
   border-color: var(--mds-border-interactive-secondary-disabled);
 }
+
 .mds-form-check-input:disabled:checked {
   background-color: var(--mds-bg-interactive-primary-disabled);
   border-color: transparent;
 }
+
 .mds-form-check-input.is-invalid {
   border-color: var(--mds-border-interactive-danger-default);
 }
+
 .mds-form-check-input.is-invalid:checked {
   background-color: var(--mds-bg-interactive-danger-default);
   border-color: transparent;
 }
+
 /* Explicit rule for invalid + disabled to avoid relying on specificity cascade order.
    Disabled takes visual precedence: use the disabled background/border, not the danger ones. */
+
 .mds-form-check-input.is-invalid:disabled {
   background-color: var(--mds-bg-interactive-secondary-disabled);
   border-color: var(--mds-border-interactive-secondary-disabled);
 }
+
 .mds-form-check-input.is-invalid:disabled:checked {
   background-color: var(--mds-bg-interactive-primary-disabled);
   border-color: transparent;
 }
+
 /* is-valid (Bootstrap) and neutral feedback states are intentionally not supported.
    Radio buttons surface a binary valid/invalid result; positive confirmation
    is conveyed by form-level success messaging rather than per-input valid styling. */
+
 /* Hover styles are intentionally omitted. The radio input relies on the OS/browser
    default appearance for hover; no design token exists for a radio hover state. */
+
 /* Focus ring: Only outline + outline-offset allowed (no box-shadow or border).
   See .github/instructions/components.instructions.md for full rules and rationale. */
+
 .mds-form-check-input:focus,
 .mds-form-check-input.is-invalid:focus {
   /* Reset Bootstrap's :focus box-shadow; our ring is applied on :focus-visible only */
   box-shadow: none;
   outline: none;
 }
+
 .mds-form-check-input:focus-visible {
   outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
   outline-offset: var(--mds-spacing-offset);
   box-shadow: none;
 }
+
 .mds-form-check-input.is-invalid:focus-visible {
   outline: var(--mds-stroke-weight-md) solid var(--mds-border-feedback-danger);
   outline-offset: var(--mds-spacing-offset);
   box-shadow: none;
 }
+
 /* Label element styles */
+
 .mds-form-check .form-check-label,
 .mds-form-check .mds-form-check-label {
   color: var(--mds-text-default, #1d2125);
   cursor: pointer;
 }
+
 /* Use sibling selector so the label reflects the input's disabled/invalid state */
+
 .mds-form-check .mds-form-check-input:disabled ~ .form-check-label,
 .mds-form-check .mds-form-check-input:disabled ~ .mds-form-check-label {
   color: var(--mds-text-muted);
   /* Disabled inputs are not interactive — suppress the pointer cursor on the label */
   cursor: default;
 }
+
 .mds-form-check .mds-form-check-input.is-invalid ~ .form-check-label,
 .mds-form-check .mds-form-check-input.is-invalid ~ .mds-form-check-label {
   color: var(--mds-text-danger);
 }
+
 /* Feedback element styles — UI text/UI small */
+
 .mds-form-check .invalid-feedback,
 .mds-form-check .mds-form-check-feedback {
   /* Place feedback in column 2 (the label column) so it aligns with the label
@@ -305,8 +476,10 @@
   font-weight: var(--mds-font-weight-medium, 500);
   color: var(--mds-text-danger);
 }
+
 /* Dim the feedback when the input is disabled to match the reduced visual weight of
    the label and input; keeps the feedback legible without implying it is actionable. */
+
 .mds-form-check:has(.mds-form-check-input:disabled) .invalid-feedback,
 .mds-form-check:has(.mds-form-check-input:disabled) .mds-form-check-feedback {
   opacity: 0.5;
@@ -372,23 +545,30 @@
   --mds-activity-icon-other-icon: var(--mds-color-gray-900);
   --mds-activity-icon-resource-bg: var(--mds-color-cyan-100);
   --mds-activity-icon-resource-icon: var(--mds-color-cyan-500);
+  --mds-bg-feedback-danger-light: var(--mds-color-red-50);
   --mds-bg-feedback-danger-subtle: var(--mds-color-red-100);
   --mds-bg-feedback-info-default: var(--mds-color-cyan-500);
+  --mds-bg-feedback-info-light: var(--mds-color-cyan-50);
   --mds-bg-feedback-info-subtle: var(--mds-color-cyan-100);
   --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
+  --mds-bg-feedback-primary-light: var(--mds-color-blue-50);
   --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
   --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
   --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
   --mds-bg-feedback-success-default: var(--mds-color-green-500);
+  --mds-bg-feedback-success-light: var(--mds-color-green-50);
   --mds-bg-feedback-success-subtle: var(--mds-color-green-100);
   --mds-bg-feedback-warning-default: var(--mds-color-yellow-500);
+  --mds-bg-feedback-warning-light: var(--mds-color-yellow-50);
   --mds-bg-feedback-warning-subtle: var(--mds-color-yellow-100);
   --mds-bg-interactive-danger-active: var(--mds-color-red-700);
   --mds-bg-interactive-danger-default: var(--mds-color-red-500);
+  --mds-bg-interactive-danger-default-light: var(--mds-color-red-50);
   --mds-bg-interactive-danger-disabled: var(--mds-color-red-200);
   --mds-bg-interactive-danger-hover: var(--mds-color-red-600);
   --mds-bg-interactive-primary-active: var(--mds-color-blue-700);
   --mds-bg-interactive-primary-default: var(--mds-color-blue-500);
+  --mds-bg-interactive-primary-default-light: var(--mds-color-blue-50);
   --mds-bg-interactive-primary-disabled: var(--mds-color-blue-200);
   --mds-bg-interactive-primary-hover: var(--mds-color-blue-600);
   --mds-bg-interactive-secondary-default: var(--mds-color-gray-400);
@@ -444,6 +624,7 @@
  */
 
 :root {
+  --mds-color-blue-50: #e7f0f9;
   --mds-color-blue-100: #cfe2f2;
   --mds-color-blue-200: #9fc4e5;
   --mds-color-blue-300: #6fa7d9;
@@ -453,6 +634,7 @@
   --mds-color-blue-700: #094173;
   --mds-color-blue-800: #062b4c;
   --mds-color-blue-900: #031626;
+  --mds-color-cyan-50: #e5f2f4;
   --mds-color-cyan-100: #cce6ea;
   --mds-color-cyan-200: #99cdd5;
   --mds-color-cyan-300: #66b3c0;
@@ -473,6 +655,7 @@
   --mds-color-gray-900: #1d2125;
   --mds-color-gray-black: #000000;
   --mds-color-gray-white: #ffffff;
+  --mds-color-green-50: #ebf2ea;
   --mds-color-green-100: #d7e4d6;
   --mds-color-green-200: #aecaad;
   --mds-color-green-300: #86af84;
@@ -518,6 +701,7 @@
   --mds-color-purple-700: #3a254a;
   --mds-color-purple-800: #271832;
   --mds-color-purple-900: #130c19;
+  --mds-color-red-50: #faeae9;
   --mds-color-red-100: #f4d6d2;
   --mds-color-red-200: #eaada6;
   --mds-color-red-300: #df8379;
@@ -536,6 +720,7 @@
   --mds-color-teal-700: #13795b;
   --mds-color-teal-800: #0d503c;
   --mds-color-teal-900: #06281e;
+  --mds-color-yellow-50: #fdf7ed;
   --mds-color-yellow-100: #fcefdc;
   --mds-color-yellow-200: #f9deb8;
   --mds-color-yellow-300: #f6ce95;
@@ -600,6 +785,7 @@
   --mds-typography-line-height-paragraph-base: 1.5rem;
   --mds-typography-line-height-paragraph-lg: 2.5rem;
   --mds-typography-line-height-paragraph-sm: 1.0875rem;
+  --mds-typography-line-height-paragraph-xs: 0.75rem;
 }
 
 /**
@@ -692,6 +878,7 @@
   --mds-line-height-paragraph-default: var(--mds-typography-line-height-paragraph-base); /** Comfortable line height for paragraphs. */
   --mds-line-height-paragraph-lead: var(--mds-typography-line-height-paragraph-lg); /** Extended line height for large body text. */
   --mds-line-height-paragraph-small: var(--mds-typography-line-height-paragraph-sm); /** Compact line height for small text. */
+  --mds-line-height-paragraph-xs: var(--mds-typography-line-height-paragraph-xs);
   --mds-margin-bottom-display: var(--mds-spacing-none); /** Default margin below a Displays. */
   --mds-margin-bottom-heading: var(--mds-spacing-xs); /** Default margin below a Headings. */
   --mds-margin-bottom-paragraph: var(--mds-spacing-md); /** Default margin below a paragraph. */

package/dist/index.js

@@ -1,7 +1,8 @@
 /* empty css                                              */
 /* empty css                 */
 /* empty css                 */
+import { ActivityIcon } from "./components/activity-icon/ActivityIcon.js";
 import { Button } from "./components/button/Button.js";
 import { CloseButton } from "./components/close-button/CloseButton.js";
 import { Radio } from "./components/radio/Radio.js";
-export { Button, CloseButton, Radio };
+export { ActivityIcon, Button, CloseButton, Radio };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moodlehq/design-system",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "The Moodle Design System",
   "files": [
     "/dist",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.0",
     "@modelcontextprotocol/sdk": "^1.0.0",
-    "@commitlint/cli": "^20.1.0",
+    "@commitlint/cli": "^21.0.1",
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/compat": "^2.0.0",
     "@eslint/eslintrc": "^3.3.3",
@@ -82,7 +82,7 @@
     "globals": "^17.1.0",
     "husky": "^9.1.7",
     "jsdom": "^29.0.0",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^17.0.5",
     "playwright": "^1.57.0",
     "prettier": "^3.7.3",
     "prettier-plugin-organize-imports": "^4.3.0",
@@ -97,7 +97,7 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.57.1",
     "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-dts": "^5.0.0",
     "vite-tsconfig-paths": "^6.0.1",
     "vitest": "^4.0.4"
   },

package/tokens/css/colors.css

@@ -18,23 +18,30 @@
   --mds-activity-icon-other-icon: var(--mds-color-gray-900);
   --mds-activity-icon-resource-bg: var(--mds-color-cyan-100);
   --mds-activity-icon-resource-icon: var(--mds-color-cyan-500);
+  --mds-bg-feedback-danger-light: var(--mds-color-red-50);
   --mds-bg-feedback-danger-subtle: var(--mds-color-red-100);
   --mds-bg-feedback-info-default: var(--mds-color-cyan-500);
+  --mds-bg-feedback-info-light: var(--mds-color-cyan-50);
   --mds-bg-feedback-info-subtle: var(--mds-color-cyan-100);
   --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
+  --mds-bg-feedback-primary-light: var(--mds-color-blue-50);
   --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
   --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
   --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
   --mds-bg-feedback-success-default: var(--mds-color-green-500);
+  --mds-bg-feedback-success-light: var(--mds-color-green-50);
   --mds-bg-feedback-success-subtle: var(--mds-color-green-100);
   --mds-bg-feedback-warning-default: var(--mds-color-yellow-500);
+  --mds-bg-feedback-warning-light: var(--mds-color-yellow-50);
   --mds-bg-feedback-warning-subtle: var(--mds-color-yellow-100);
   --mds-bg-interactive-danger-active: var(--mds-color-red-700);
   --mds-bg-interactive-danger-default: var(--mds-color-red-500);
+  --mds-bg-interactive-danger-default-light: var(--mds-color-red-50);
   --mds-bg-interactive-danger-disabled: var(--mds-color-red-200);
   --mds-bg-interactive-danger-hover: var(--mds-color-red-600);
   --mds-bg-interactive-primary-active: var(--mds-color-blue-700);
   --mds-bg-interactive-primary-default: var(--mds-color-blue-500);
+  --mds-bg-interactive-primary-default-light: var(--mds-color-blue-50);
   --mds-bg-interactive-primary-disabled: var(--mds-color-blue-200);
   --mds-bg-interactive-primary-hover: var(--mds-color-blue-600);
   --mds-bg-interactive-secondary-default: var(--mds-color-gray-400);