@moodlehq/design-system 4.1.0 → 5.0.0

package/dist/components/checkbox/index.css

@@ -0,0 +1,181 @@
+.mds-checkbox {
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  align-self: start;
+  min-height: var(--mds-icons-lg);
+  padding: var(--mds-spacing-none);
+  column-gap: var(--mds-spacing-xs);
+  row-gap: var(--mds-spacing-xxs);
+
+  font-family: var(--mds-font-family-base);
+  font-size: var(--mds-font-size-paragraph-default);
+  font-weight: var(--mds-font-weight-regular);
+  line-height: var(--mds-line-height-paragraph-xs);
+  letter-spacing: var(--mds-letter-spacing-default);
+}
+
+.mds-checkbox-input {
+  border-radius: var(--mds-border-radius-xs);
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-secondary-default);
+}
+
+.mds-checkbox .mds-checkbox-input {
+  /* Bootstrap applies float/offset styles to .form-check-input for indented label layouts.
+     Match selector specificity and reset float/margins for the grid-based sibling layout. */
+  margin: 0;
+  float: none;
+  background-color: var(--mds-bg-surface-default);
+}
+
+.mds-checkbox-input:checked {
+  background-color: var(--mds-bg-interactive-primary-default);
+  border-color: transparent;
+}
+
+.mds-checkbox-input:indeterminate {
+  background-color: var(--mds-bg-interactive-primary-default);
+  border-color: transparent;
+}
+
+.mds-checkbox-input:disabled {
+  border-color: var(--mds-border-interactive-secondary-disabled);
+}
+
+.mds-checkbox-input:disabled:checked {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-checkbox-input:disabled:indeterminate {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-checkbox-input.is-invalid {
+  border-color: var(--mds-border-interactive-danger-default);
+}
+
+.mds-checkbox-input.is-invalid:checked {
+  background-color: var(--mds-bg-interactive-danger-default);
+  border-color: transparent;
+}
+
+.mds-checkbox-input.is-invalid:indeterminate {
+  background-color: var(--mds-bg-interactive-danger-default);
+  border-color: transparent;
+}
+
+.mds-checkbox-input.is-invalid:disabled {
+  background-color: var(--mds-bg-interactive-secondary-disabled);
+  border-color: var(--mds-border-interactive-secondary-disabled);
+}
+
+.mds-checkbox-input.is-invalid:disabled:checked {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-checkbox-input.is-invalid:disabled:indeterminate {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-checkbox-input:focus,
+.mds-checkbox-input.is-invalid:focus {
+  /* Reset Bootstrap's :focus box-shadow; our ring is applied on :focus-visible only */
+  box-shadow: none;
+  outline: none;
+}
+
+/* Bootstrap also sets border-color on :focus. Restore the correct border for each state,
+   excluding checked/indeterminate which keep their transparent border. */
+.mds-checkbox-input:focus:not(:checked):not(:indeterminate) {
+  border-color: var(--mds-border-interactive-secondary-default);
+}
+
+.mds-checkbox-input.is-invalid:focus:not(:checked):not(:indeterminate) {
+  border-color: var(--mds-border-interactive-danger-default);
+}
+
+.mds-checkbox-input:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+.mds-checkbox-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;
+}
+
+.mds-checkbox .form-check-label,
+.mds-checkbox .mds-checkbox-label {
+  display: flex;
+  align-items: center;
+  /* In the radio-style sibling layout, the checkbox should align to the label text line,
+     not to an expanded label hit area. Keep the label box tight and let htmlFor preserve click behavior. */
+  padding: 0;
+  color: var(--mds-text-default);
+}
+
+.mds-checkbox .mds-checkbox-label-text {
+  min-width: 0;
+}
+
+.mds-checkbox .mds-checkbox-input:disabled ~ .form-check-label,
+.mds-checkbox .mds-checkbox-input:disabled ~ .mds-checkbox-label {
+  color: var(--mds-text-muted);
+}
+
+.mds-checkbox .mds-checkbox-input.is-invalid ~ .form-check-label,
+.mds-checkbox .mds-checkbox-input.is-invalid ~ .mds-checkbox-label {
+  color: var(--mds-text-danger);
+}
+
+/* Disabled takes precedence over invalid — restore muted colour when both are active. */
+.mds-checkbox .mds-checkbox-input.is-invalid:disabled ~ .form-check-label,
+.mds-checkbox .mds-checkbox-input.is-invalid:disabled ~ .mds-checkbox-label {
+  color: var(--mds-text-muted);
+}
+
+.mds-checkbox-required {
+  color: var(--mds-text-danger);
+  margin-inline-start: var(--mds-spacing-xxs);
+}
+
+.mds-checkbox .invalid-feedback,
+.mds-checkbox .mds-checkbox-feedback {
+  grid-column: 2;
+  font-size: var(--mds-font-size-paragraph-small);
+  font-weight: var(--mds-font-weight-medium);
+  line-height: var(--mds-line-height-paragraph-xs);
+}
+
+.mds-checkbox .invalid-feedback,
+.mds-checkbox .mds-checkbox-feedback.mds-checkbox-supporting-text {
+  margin: 0;
+}
+
+.mds-checkbox .invalid-feedback {
+  color: var(--mds-text-danger);
+}
+
+/* In the default state supporting text is subtle. In the invalid state use danger to match
+   the label colour \u2014 matching Figma where the label container sets the colour for both. */
+.mds-checkbox .mds-checkbox-feedback.mds-checkbox-supporting-text {
+  color: var(--mds-text-subtle);
+}
+
+.mds-checkbox
+  .mds-checkbox-input.is-invalid
+  ~ .mds-checkbox-feedback.mds-checkbox-supporting-text {
+  color: var(--mds-text-danger);
+}
+
+.mds-checkbox .mds-checkbox-input:disabled ~ .invalid-feedback,
+.mds-checkbox .mds-checkbox-input:disabled ~ .mds-checkbox-feedback {
+  opacity: 0.5;
+}

package/dist/components/choicebox/Choicebox.d.ts

@@ -0,0 +1,21 @@
+import { InputHTMLAttributes, ReactElement } from 'react';
+type IconElement = ReactElement<'i' | 'svg'>;
+export interface ChoiceboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Required primary label text identifying the option.
+     * Keep to 1–5 words for readability.
+     */
+    label: string;
+    /**
+     * Optional supporting/descriptive text displayed below the label.
+     * Used to add context the label alone cannot convey. Aim for 1–2 lines.
+     */
+    supportingText?: string;
+    /**
+     * Optional icon rendered before the label group.
+     * Must be an <i> or <svg> element. Use only when the icon adds meaning.
+     */
+    icon?: IconElement;
+}
+export declare const Choicebox: import('react').ForwardRefExoticComponent<ChoiceboxProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/choicebox/Choicebox.js

@@ -0,0 +1,55 @@
+import { forwardRef, isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/choicebox/Choicebox.tsx
+var isIconElement = (el, propName) => {
+	return isValidElement(el) && (el.type === "i" || el.type === "svg");
+};
+var Choicebox = forwardRef(function Choicebox({ label, supportingText, icon, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...inputProps }, ref) {
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const supportingTextId = supportingText ? `${id}-supporting-text` : void 0;
+	const ariaDescribedBy = [supportingTextId, ariaDescribedByProp].filter(Boolean).join(" ") || void 0;
+	const resolvedIcon = isIconElement(icon, "icon") ? icon : null;
+	const wrapperClasses = ["mds-choicebox-wrapper"];
+	if (className) wrapperClasses.push(className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: wrapperClasses.join(" "),
+		children: [/* @__PURE__ */ jsx("input", {
+			...inputProps,
+			type: "radio",
+			className: "mds-choicebox-input",
+			id,
+			ref,
+			"aria-describedby": ariaDescribedBy
+		}), /* @__PURE__ */ jsxs("label", {
+			className: "mds-choicebox",
+			htmlFor: id,
+			children: [
+				resolvedIcon && /* @__PURE__ */ jsx("span", {
+					className: "mds-choicebox-icon",
+					"aria-hidden": "true",
+					children: resolvedIcon
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "mds-choicebox-labels",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mds-choicebox-label",
+						children: label
+					}), supportingText && /* @__PURE__ */ jsx("span", {
+						id: supportingTextId,
+						className: "mds-choicebox-supporting-text",
+						children: supportingText
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "mds-choicebox-indicator",
+					"aria-hidden": "true"
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { Choicebox };
+
+//# sourceMappingURL=Choicebox.js.map

package/dist/components/choicebox/Choicebox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choicebox.js","names":[],"sources":["../../../components/choicebox/Choicebox.tsx"],"sourcesContent":["import {\n  type InputHTMLAttributes,\n  type ReactElement,\n  forwardRef,\n  isValidElement,\n  useId,\n} from 'react';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\nexport interface ChoiceboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Required primary label text identifying the option.\n   * Keep to 1–5 words for readability.\n   */\n  label: string;\n  /**\n   * Optional supporting/descriptive text displayed below the label.\n   * Used to add context the label alone cannot convey. Aim for 1–2 lines.\n   */\n  supportingText?: string;\n  /**\n   * Optional icon rendered before the label group.\n   * Must be an <i> or <svg> element. Use only when the icon adds meaning.\n   */\n  icon?: IconElement;\n}\n\n// Runtime guard — icon must be an <i> or <svg> element.\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(\n      `Choicebox: \\`${propName}\\` must be an <i> or <svg> element.`,\n    );\n  }\n  return valid;\n};\n\nexport const Choicebox = forwardRef<HTMLInputElement, ChoiceboxProps>(\n  function Choicebox(\n    {\n      label,\n      supportingText,\n      icon,\n      className,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      ...inputProps\n    }: ChoiceboxProps,\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n\n    // ID used to associate supporting text with the input via aria-describedby\n    // so screen readers announce the description after the label.\n    const supportingTextId = supportingText\n      ? `${id}-supporting-text`\n      : undefined;\n\n    const ariaDescribedBy =\n      [supportingTextId, ariaDescribedByProp].filter(Boolean).join(' ') ||\n      undefined;\n\n    const resolvedIcon = isIconElement(icon, 'icon') ? icon : null;\n\n    if (import.meta.env.DEV) {\n      if (!label) {\n        console.warn(\n          'Choicebox: label prop is required. An empty label creates an inaccessible form control.',\n        );\n      }\n    }\n\n    const wrapperClasses = ['mds-choicebox-wrapper'];\n    if (className) wrapperClasses.push(className);\n\n    return (\n      <div className={wrapperClasses.join(' ')}>\n        {/* The input is visually hidden but participates in the DOM for form\n            submission, keyboard navigation, and screen reader semantics.\n            pointer-events: none prevents it from intercepting clicks — the\n            <label> for= association handles click delegation instead. */}\n        <input\n          {...inputProps}\n          type=\"radio\"\n          className=\"mds-choicebox-input\"\n          id={id}\n          ref={ref}\n          aria-describedby={ariaDescribedBy}\n        />\n        <label className=\"mds-choicebox\" htmlFor={id}>\n          {resolvedIcon && (\n            <span className=\"mds-choicebox-icon\" aria-hidden=\"true\">\n              {resolvedIcon}\n            </span>\n          )}\n          <span className=\"mds-choicebox-labels\">\n            <span className=\"mds-choicebox-label\">{label}</span>\n            {supportingText && (\n              <span\n                id={supportingTextId}\n                className=\"mds-choicebox-supporting-text\"\n              >\n                {supportingText}\n              </span>\n            )}\n          </span>\n          {/* Decorative indicator — aria-hidden since the input provides all\n              semantics. CSS drives the circle/check appearance via sibling\n              state selectors on .mds-choicebox-input. */}\n          <span className=\"mds-choicebox-indicator\" aria-hidden=\"true\" />\n        </label>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;AAgCA,IAAM,iBAAiB,IAAa,aAAwC;CAO1E,OANc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAOtE;AAEA,IAAa,YAAY,WACvB,SAAS,UACP,EACE,OACA,gBACA,MACA,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,cAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,UAAU;CAIrB,MAAM,mBAAmB,iBACrB,GAAG,GAAG,oBACN,KAAA;CAEJ,MAAM,kBACJ,CAAC,kBAAkB,mBAAmB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAChE,KAAA;CAEF,MAAM,eAAe,cAAc,MAAM,MAAM,IAAI,OAAO;CAU1D,MAAM,iBAAiB,CAAC,uBAAuB;CAC/C,IAAI,WAAW,eAAe,KAAK,SAAS;CAE5C,OACE,qBAAC,OAAD;EAAK,WAAW,eAAe,KAAK,GAAG;YAAvC,CAKE,oBAAC,SAAD;GACE,GAAI;GACJ,MAAK;GACL,WAAU;GACN;GACC;GACL,oBAAkB;EACnB,CAAA,GACD,qBAAC,SAAD;GAAO,WAAU;GAAgB,SAAS;aAA1C;IACG,gBACC,oBAAC,QAAD;KAAM,WAAU;KAAqB,eAAY;eAC9C;IACG,CAAA;IAER,qBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,oBAAC,QAAD;MAAM,WAAU;gBAAuB;KAAY,CAAA,GAClD,kBACC,oBAAC,QAAD;MACE,IAAI;MACJ,WAAU;gBAET;KACG,CAAA,CAEJ;;IAIN,oBAAC,QAAD;KAAM,WAAU;KAA0B,eAAY;IAAQ,CAAA;GACzD;IACJ;;AAET,CACF"}

package/dist/components/choicebox/index.css

@@ -0,0 +1,364 @@
+/* ==========================================================================
+   Choicebox
+   A full-surface interactive card for single-select option picking.
+   HTML structure:
+     .mds-choicebox-wrapper
+       input.mds-choicebox-input  (visually hidden radio)
+       label.mds-choicebox
+         span.mds-choicebox-icon?   (optional — aria-hidden)
+         span.mds-choicebox-labels
+           span.mds-choicebox-label
+           span.mds-choicebox-supporting-text?
+         span.mds-choicebox-indicator  (decorative — aria-hidden)
+   State is driven entirely by CSS sibling selectors (.mds-choicebox-input
+   precedes .mds-choicebox in the DOM), avoiding any JS state management.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Wrapper
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox-wrapper {
+  display: block;
+  /* Prevent flex containers from stretching this element */
+  align-self: start;
+  min-width: 320px; /* Ensure enough space for the indicator and some label text */
+}
+
+/* --------------------------------------------------------------------------
+   Hidden input
+   Visually hidden but focusable so keyboard and assistive tech can reach it.
+   pointer-events: none prevents it from receiving clicks — the <label for>
+   association handles delegation to the radio input instead.
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  pointer-events: none;
+}
+
+/* --------------------------------------------------------------------------
+   Card (label element — full-surface clickable area)
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--mds-spacing-xs);
+
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
+  border-radius: var(--mds-border-radius-md);
+  border: var(--mds-stroke-weight-sm) solid var(--mds-border-default);
+  background-color: var(--mds-bg-surface-subtle);
+
+  cursor: pointer;
+  /* Ensure the label fills its container when Choicebox is used in a grid or flex layout */
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Hover — unselected */
+.mds-choicebox-input:not(:disabled):not(:checked) + .mds-choicebox:hover {
+  background-color: var(--mds-bg-surface-default);
+  border-color: var(--mds-border-default);
+}
+
+/* Active/pressed — unselected */
+.mds-choicebox-input:not(:disabled):not(:checked) + .mds-choicebox:active {
+  background-color: var(--mds-bg-surface-strong);
+  border-color: var(--mds-border-default);
+}
+
+/* Selected — default */
+.mds-choicebox-input:checked + .mds-choicebox {
+  background-color: var(--mds-bg-interactive-primary-default-light);
+  border-color: var(--mds-border-feedback-primary);
+}
+
+/* Selected — hover */
+.mds-choicebox-input:not(:disabled):checked + .mds-choicebox:hover {
+  background-color: var(--mds-bg-surface-subtle);
+  border-color: var(--mds-border-feedback-primary);
+}
+
+/* Selected — pressed */
+.mds-choicebox-input:not(:disabled):checked + .mds-choicebox:active {
+  background-color: var(--mds-bg-surface-strong);
+  border-color: var(--mds-border-feedback-primary);
+}
+
+/* Disabled — show 'not-allowed' cursor over the whole card area.
+   cursor: not-allowed cannot be set on the label itself because
+   pointer-events: none (below) removes it from hit-testing, making the cursor
+   rule unreachable. :has() is safe for all Moodle-target browsers. */
+.mds-choicebox-wrapper:has(.mds-choicebox-input:disabled) {
+  cursor: not-allowed;
+}
+
+/* Block clicks on the label so the disabled radio cannot be activated */
+.mds-choicebox-input:disabled + .mds-choicebox {
+  pointer-events: none;
+}
+
+/* --------------------------------------------------------------------------
+   Focus — ring appears on the indicator per design spec
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox-input:focus-visible
+  + .mds-choicebox
+  .mds-choicebox-indicator::after {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+/* --------------------------------------------------------------------------
+   Icon slot
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mds-spacing-xxs);
+  flex-shrink: 0;
+  /* Icon size matches --mds-icons-sm (16px) */
+  font-size: var(--mds-icons-sm);
+  color: var(--mds-text-default);
+}
+
+/* Selected icon */
+.mds-choicebox-input:checked + .mds-choicebox .mds-choicebox-icon {
+  color: var(--mds-text-feedback-primary);
+}
+
+/* Disabled unselected icon */
+.mds-choicebox-input:disabled:not(:checked)
+  + .mds-choicebox
+  .mds-choicebox-icon {
+  color: var(--mds-text-muted);
+}
+
+/* Disabled selected icon */
+.mds-choicebox-input:disabled:checked + .mds-choicebox .mds-choicebox-icon {
+  color: var(--mds-text-link-primary-disabled);
+}
+
+/* --------------------------------------------------------------------------
+   Labels container
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox-labels {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  gap: var(--mds-spacing-xxs);
+  padding: var(--mds-spacing-xxs) 0;
+  min-width: 0; /* Allow text to wrap within the flex item */
+}
+
+/* --------------------------------------------------------------------------
+   Label text
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox-label {
+  display: block;
+  font-family: var(--mds-font-family-base);
+  font-size: var(--mds-font-size-headings-6);
+  font-weight: var(--mds-font-weight-medium);
+  line-height: var(--mds-line-height-headings-6);
+  letter-spacing: var(--mds-letter-spacing);
+  color: var(--mds-text-default);
+  word-break: break-word;
+}
+
+/* Selected label */
+.mds-choicebox-input:checked + .mds-choicebox .mds-choicebox-label {
+  color: var(--mds-text-feedback-primary);
+}
+
+/* Disabled unselected label */
+.mds-choicebox-input:disabled:not(:checked)
+  + .mds-choicebox
+  .mds-choicebox-label {
+  color: var(--mds-text-muted);
+}
+
+/* Disabled selected label */
+.mds-choicebox-input:disabled:checked + .mds-choicebox .mds-choicebox-label {
+  color: var(--mds-text-link-primary-disabled);
+}
+
+/* --------------------------------------------------------------------------
+   Supporting text
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox-supporting-text {
+  display: block;
+  font-family: var(--mds-font-family-base);
+  font-size: var(--mds-font-size-paragraph-small);
+  font-weight: var(--mds-font-weight-regular);
+  line-height: var(--mds-line-height-paragraph-small);
+  letter-spacing: var(--mds-letter-spacing);
+  color: var(--mds-text-subtle);
+  word-break: break-word;
+}
+
+/* Disabled unselected supporting text */
+.mds-choicebox-input:disabled:not(:checked)
+  + .mds-choicebox
+  .mds-choicebox-supporting-text {
+  color: var(--mds-text-subtle);
+}
+
+/* Disabled selected supporting text */
+.mds-choicebox-input:disabled:checked
+  + .mds-choicebox
+  .mds-choicebox-supporting-text {
+  color: var(--mds-text-link-primary-disabled);
+}
+
+/* --------------------------------------------------------------------------
+   Choice indicator
+   The visible circle and circle-check are rendered via ::after so no extra
+   DOM nodes are needed. The input's checked/disabled state drives the styling
+   via CSS sibling selectors.
+   -------------------------------------------------------------------------- */
+
+.mds-choicebox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  /* Vertically centre the indicator against the label line.
+     labels container has padding-block-start: spacing-xxs (0.25rem);
+     the label line-height is 1.2rem; indicator height is 1rem.
+     Offset = labels-padding-top + (label-line-height − indicator-height) / 2 */
+  margin-block-start: calc(
+    var(--mds-spacing-xxs) + (var(--mds-line-height-headings-6) - 1rem) / 2
+  );
+  flex-shrink: 0;
+}
+
+/* Unselected circle */
+.mds-choicebox-indicator::after {
+  content: '';
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--mds-border-radius-pill);
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-secondary-default);
+  background-color: var(--mds-bg-surface-subtle);
+  box-sizing: border-box;
+}
+
+/* Unselected hover indicator background follows card background. */
+.mds-choicebox-input:not(:disabled):not(:checked)
+  + .mds-choicebox:hover
+  .mds-choicebox-indicator::after {
+  background-color: var(--mds-bg-surface-default);
+}
+
+.mds-choicebox-input:not(:disabled):not(:checked)
+  + .mds-choicebox:active
+  .mds-choicebox-indicator::after {
+  background-color: var(--mds-bg-surface-strong);
+}
+
+/* Checked: filled circle with inline SVG checkmark via background-image.
+   Path matches the Figma design spec exactly (fill-based, 16×16 viewBox). */
+.mds-choicebox-input:checked + .mds-choicebox .mds-choicebox-indicator::after {
+  border: none;
+  background-color: var(--mds-bg-interactive-primary-default);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6.05791 11.1853C6.47273 11.6049 7.1138 11.6049 7.52862 11.1853L12.3556 6.30245C12.7704 5.88283 12.7704 5.23433 12.3556 4.81471C11.9407 4.3951 11.2997 4.3951 10.8848 4.81471L6.81212 8.93461L5.11515 7.25613C4.70034 6.83651 4.05926 6.83651 3.64444 7.25613C3.22963 7.67575 3.22963 8.32425 3.64444 8.74387L6.05791 11.1853Z' fill='%23ffffff'/%3E%3C/svg%3E");
+  background-size: cover;
+}
+
+/* Disabled unselected indicator — muted border */
+.mds-choicebox-input:disabled:not(:checked)
+  + .mds-choicebox
+  .mds-choicebox-indicator::after {
+  border-color: var(--mds-border-interactive-secondary-disabled);
+}
+
+/* Disabled selected indicator — dimmed fill */
+.mds-choicebox-input:disabled:checked
+  + .mds-choicebox
+  .mds-choicebox-indicator::after {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6.05791 11.1853C6.47273 11.6049 7.1138 11.6049 7.52862 11.1853L12.3556 6.30245C12.7704 5.88283 12.7704 5.23433 12.3556 4.81471C11.9407 4.3951 11.2997 4.3951 10.8848 4.81471L6.81212 8.93461L5.11515 7.25613C4.70034 6.83651 4.05926 6.83651 3.64444 7.25613C3.22963 7.67575 3.22963 8.32425 3.64444 8.74387L6.05791 11.1853Z' fill='%23ffffff'/%3E%3C/svg%3E");
+}
+
+/* --------------------------------------------------------------------------
+   Forced colors (Windows High Contrast)
+   Card borders and indicator geometry use system colour keywords so they
+   remain visible when forced-colors is active. Text colours are left to adapt
+   automatically — they reference CSS custom properties that the browser will
+   remap to system colours.
+   Note: the SVG checkmark's hardcoded fill (%23ffffff) inside the checked
+   indicator will not adapt until Must Fix 2 (mask-image refactor) is done.
+   -------------------------------------------------------------------------- */
+
+@media (forced-colors: active) {
+  .mds-choicebox {
+    border-color: ButtonText;
+  }
+
+  .mds-choicebox-input:checked + .mds-choicebox {
+    border-color: Highlight;
+  }
+
+  .mds-choicebox-input:disabled + .mds-choicebox {
+    border-color: GrayText;
+  }
+
+  /* Preserve the indicator circle using forced-color-adjust: none so the
+     border/fill remain under author control via system colour keywords. */
+  .mds-choicebox-indicator::after {
+    forced-color-adjust: none;
+    border-color: ButtonText;
+    background-color: Canvas;
+  }
+
+  .mds-choicebox-input:checked
+    + .mds-choicebox
+    .mds-choicebox-indicator::after {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    /* SVG fill %23ffffff may be invisible on some Highlight backgrounds —
+       fully addressed when Must Fix 2 (mask-image refactor) is completed. */
+  }
+
+  .mds-choicebox-input:disabled:not(:checked)
+    + .mds-choicebox
+    .mds-choicebox-indicator::after {
+    forced-color-adjust: none;
+    border-color: GrayText;
+    background-color: Canvas;
+  }
+
+  .mds-choicebox-input:disabled:checked
+    + .mds-choicebox
+    .mds-choicebox-indicator::after {
+    forced-color-adjust: none;
+    background-color: GrayText;
+  }
+
+  /* Keep the focus ring aligned with the system Highlight colour */
+  .mds-choicebox-input:focus-visible
+    + .mds-choicebox
+    .mds-choicebox-indicator::after {
+    outline-color: Highlight;
+  }
+}

package/dist/components/choicebox/index.d.ts

@@ -0,0 +1 @@
+export * from './Choicebox';

package/dist/components/choicebox/index.js

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

package/dist/components/close-button/CloseButton.d.ts

@@ -11,4 +11,4 @@ export interface CloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEl
      */
     size?: string;
 }
-export declare const CloseButton: ({ "aria-label": ariaLabel, size, className, ...props }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseButton: ({ "aria-label": ariaLabel, size, className, ...props }: CloseButtonProps) => import("react").JSX.Element;

package/dist/components/close-button/index.css

@@ -0,0 +1,47 @@
+.mds-close-button.btn-close {
+  inline-size: var(--mds-icons-md);
+  block-size: var(--mds-icons-md);
+  padding: 0;
+  border-radius: var(--mds-border-radius-xs);
+  background-image: url('./close-button.svg');
+  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);
+}