@marwes-ui/svelte 1.3.0 → 1.4.0

package/dist/components/pagination/Pagination.svelte

@@ -0,0 +1,399 @@
+<script lang="ts">
+  import {
+    IconName,
+    clampPaginationPage,
+    createPaginationControlRecipe,
+    createPaginationEllipsisRecipe,
+    createPaginationListItemRecipe,
+    createPaginationListRecipe,
+    createPaginationPageRecipe,
+    createPaginationRecipe,
+    resolvePaginationAdaptiveProfile,
+    resolvePaginationItemAriaLabel,
+  } from "@marwes-ui/core";
+  import { onMount } from "svelte";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Icon from "../icon/Icon.svelte";
+  import type { PaginationAdaptiveProfile, PaginationResolvedControlDisplay } from "@marwes-ui/core";
+  import type { PaginationProps } from "./types.js";
+
+  let {
+    pageCount,
+    page = $bindable(undefined),
+    defaultPage,
+    siblingCount,
+    boundaryCount,
+    maxVisibleItems,
+    controlDisplay = "auto",
+    adaptive = true,
+    showPrevNext,
+    showFirstLast,
+    disabled,
+    firstLabel = "First",
+    previousLabel = "Previous",
+    nextLabel = "Next",
+    lastLabel = "Last",
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    getItemAriaLabel,
+    onpagechange,
+    class: className,
+    id,
+  }: PaginationProps = $props();
+
+  let internalPage = $state<number | undefined>(undefined);
+  let rootElement = $state<HTMLElement | undefined>(undefined);
+  let adaptiveProfile = $state<PaginationAdaptiveProfile | undefined>(undefined);
+  let frame = 0;
+
+  const resolvedPage = $derived(
+    clampPaginationPage(page !== undefined ? page : internalPage, pageCount)
+  );
+
+  $effect(() => {
+    if (internalPage === undefined) {
+      internalPage = clampPaginationPage(defaultPage, pageCount);
+    }
+  });
+
+  function selectPage(nextPage: number): void {
+    if (disabled) return;
+
+    const resolved = clampPaginationPage(nextPage, pageCount);
+    if (resolved === 0 || resolved === resolvedPage) return;
+
+    if (page !== undefined) {
+      page = resolved;
+    } else {
+      internalPage = resolved;
+    }
+    onpagechange?.(resolved);
+  }
+
+  function parsePxValue(value: string, fallback: number): number {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+
+  function resolveControlWidths(
+    controls: HTMLElement[],
+    itemSize: number
+  ): { labelControlWidth: number; iconControlWidth: number } {
+    const labelControlWidth = controls.reduce((total, control) => {
+      const icon = control.querySelector<HTMLElement>(".mw-pagination__control-icon");
+      const label = control.querySelector<HTMLElement>(".mw-pagination__control-label");
+      const iconWidth = icon?.getBoundingClientRect().width ?? 0;
+      const labelWidth = label?.scrollWidth ?? label?.getBoundingClientRect().width ?? 0;
+      const labelGap = iconWidth > 0 && labelWidth > 0 ? 4 : 0;
+      const measuredLabelWidth = iconWidth + labelGap + labelWidth;
+
+      return total + Math.max(control.getBoundingClientRect().width, measuredLabelWidth);
+    }, 0);
+
+    return {
+      labelControlWidth,
+      iconControlWidth: controls.length * itemSize,
+    };
+  }
+
+  function measureAdaptiveProfile(): void {
+    const parent = rootElement?.parentElement;
+    if (!rootElement || !parent || adaptive === false || typeof window === "undefined") {
+      adaptiveProfile = undefined;
+      return;
+    }
+
+    const rootStyles = window.getComputedStyle(rootElement);
+    const parentStyles = window.getComputedStyle(parent);
+    const itemSize = parsePxValue(rootStyles.getPropertyValue("--mw-pagination-size"), 32);
+    const itemGap = parsePxValue(rootStyles.getPropertyValue("--mw-pagination-gap"), 2);
+    const sectionGap = parsePxValue(
+      rootStyles.getPropertyValue("--mw-pagination-section-gap"),
+      12
+    );
+    const parentWidth =
+      parent.getBoundingClientRect().width -
+      parsePxValue(parentStyles.paddingLeft, 0) -
+      parsePxValue(parentStyles.paddingRight, 0);
+
+    if (parentWidth <= 0) {
+      adaptiveProfile = undefined;
+      return;
+    }
+
+    const controls = Array.from(rootElement.querySelectorAll<HTMLElement>(".mw-pagination__control"));
+    const { labelControlWidth, iconControlWidth } = resolveControlWidths(controls, itemSize);
+    adaptiveProfile = resolvePaginationAdaptiveProfile({
+      containerWidth: parentWidth,
+      labelControlWidth,
+      iconControlWidth,
+      controlCount: controls.length,
+      itemSize,
+      itemGap,
+      sectionGap,
+      pageCount,
+      ...(siblingCount !== undefined ? { siblingCount } : {}),
+      ...(boundaryCount !== undefined ? { boundaryCount } : {}),
+      ...(maxVisibleItems !== undefined ? { maxVisibleItems } : {}),
+      controlDisplay,
+    });
+  }
+
+  function requestMeasure(): void {
+    if (typeof window === "undefined") return;
+    window.cancelAnimationFrame(frame);
+    frame = window.requestAnimationFrame(measureAdaptiveProfile);
+  }
+
+  onMount(() => {
+    requestMeasure();
+
+    const parent = rootElement?.parentElement;
+    const resizeObserver =
+      typeof window !== "undefined" && window.ResizeObserver && rootElement && parent
+        ? new window.ResizeObserver(requestMeasure)
+        : undefined;
+
+    if (rootElement) resizeObserver?.observe(rootElement);
+    if (parent) resizeObserver?.observe(parent);
+    window.addEventListener("resize", requestMeasure);
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", requestMeasure);
+    };
+  });
+
+  $effect(() => {
+    adaptive;
+    boundaryCount;
+    controlDisplay;
+    maxVisibleItems;
+    pageCount;
+    siblingCount;
+    requestMeasure();
+  });
+
+  const resolvedControlDisplay = $derived<PaginationResolvedControlDisplay>(
+    adaptive && adaptiveProfile
+      ? adaptiveProfile.controlDisplay
+      : controlDisplay === "icon"
+        ? "icon"
+        : "label"
+  );
+  const resolvedMaxVisibleItems = $derived(
+    adaptive && adaptiveProfile ? adaptiveProfile.maxVisibleItems : maxVisibleItems
+  );
+  const rootKit = $derived(
+    createPaginationRecipe({
+      page: resolvedPage,
+      pageCount,
+      ...(siblingCount !== undefined ? { siblingCount } : {}),
+      ...(boundaryCount !== undefined ? { boundaryCount } : {}),
+      ...(resolvedMaxVisibleItems !== undefined ? { maxVisibleItems: resolvedMaxVisibleItems } : {}),
+      controlDisplay: resolvedControlDisplay,
+      ...(showPrevNext !== undefined ? { showPrevNext } : {}),
+      ...(showFirstLast !== undefined ? { showFirstLast } : {}),
+      ...(disabled !== undefined ? { disabled } : {}),
+      ...(ariaLabel !== undefined ? { ariaLabel } : {}),
+      ...(ariaLabelledBy !== undefined ? { ariaLabelledBy } : {}),
+      ...(ariaDescribedBy !== undefined ? { ariaDescribedBy } : {}),
+      firstLabel,
+      previousLabel,
+      nextLabel,
+      lastLabel,
+      ...(getItemAriaLabel !== undefined ? { getItemAriaLabel } : {}),
+    })
+  );
+  const listKit = $derived(createPaginationListRecipe());
+  const listItemKit = $derived(createPaginationListItemRecipe());
+  const previousDisabled = $derived(disabled || resolvedPage <= 1);
+  const nextDisabled = $derived(disabled || resolvedPage <= 0 || resolvedPage >= pageCount);
+  const firstDisabled = $derived(disabled || resolvedPage <= 1);
+  const lastDisabled = $derived(disabled || resolvedPage <= 0 || resolvedPage >= pageCount);
+  const firstKit = $derived(
+    createPaginationControlRecipe({
+      direction: "first",
+      disabled: firstDisabled,
+      label: firstLabel,
+      ...(getItemAriaLabel !== undefined
+        ? {
+            ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+              type: "first",
+              page: 1,
+              selected: false,
+            }),
+          }
+        : {}),
+    })
+  );
+  const previousKit = $derived(
+    createPaginationControlRecipe({
+      direction: "previous",
+      disabled: previousDisabled,
+      label: previousLabel,
+      ...(getItemAriaLabel !== undefined
+        ? {
+            ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+              type: "previous",
+              page: resolvedPage - 1,
+              selected: false,
+            }),
+          }
+        : {}),
+    })
+  );
+  const nextKit = $derived(
+    createPaginationControlRecipe({
+      direction: "next",
+      disabled: nextDisabled,
+      label: nextLabel,
+      ...(getItemAriaLabel !== undefined
+        ? {
+            ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+              type: "next",
+              page: resolvedPage + 1,
+              selected: false,
+            }),
+          }
+        : {}),
+    })
+  );
+  const lastKit = $derived(
+    createPaginationControlRecipe({
+      direction: "last",
+      disabled: lastDisabled,
+      label: lastLabel,
+      ...(getItemAriaLabel !== undefined
+        ? {
+            ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+              type: "last",
+              page: pageCount,
+              selected: false,
+            }),
+          }
+        : {}),
+    })
+  );
+  const mergedClass = $derived(mergeClass(rootKit.className, className));
+  const rootStyle = $derived(rootKit.vars["--mw-pagination-list-width"]
+    ? `--mw-pagination-list-width: ${rootKit.vars["--mw-pagination-list-width"]};`
+    : undefined);
+</script>
+
+<nav
+  {id}
+  bind:this={rootElement}
+  class={mergedClass}
+  style={rootStyle}
+  aria-label={rootKit.a11y.ariaLabel}
+  aria-labelledby={rootKit.a11y.ariaLabelledBy}
+  aria-describedby={rootKit.a11y.ariaDescribedBy}
+  data-component="pagination"
+  data-control-display={rootKit.controlDisplay}
+>
+  {#if rootKit.showFirstLast}
+    <button
+      type="button"
+      class={firstKit.className}
+      aria-label={firstKit.a11y.ariaLabel}
+      aria-disabled={firstKit.a11y.ariaDisabled}
+      disabled={firstDisabled}
+      onclick={() => selectPage(1)}
+    >
+      <span class="mw-pagination__control-icon">
+        <Icon name={IconName.ChevronsLeft} decorative size={12} />
+      </span>
+      <span class="mw-pagination__control-label">{firstLabel}</span>
+    </button>
+  {/if}
+
+  {#if rootKit.showPrevNext}
+    <button
+      type="button"
+      class={previousKit.className}
+      aria-label={previousKit.a11y.ariaLabel}
+      aria-disabled={previousKit.a11y.ariaDisabled}
+      disabled={previousDisabled}
+      onclick={() => selectPage(resolvedPage - 1)}
+    >
+      <span class="mw-pagination__control-icon">
+        <Icon name={IconName.ChevronLeft} decorative size={12} />
+      </span>
+      <span class="mw-pagination__control-label">{previousLabel}</span>
+    </button>
+  {/if}
+
+  <ul class={listKit.className} role={listKit.a11y.role}>
+    {#each rootKit.items as item (item.key)}
+      <li class={listItemKit.className}>
+        {#if item.type !== "page"}
+          {@const ellipsisKit = createPaginationEllipsisRecipe()}
+          <span class={ellipsisKit.className} aria-hidden={ellipsisKit.a11y.ariaHidden}>
+            ...
+          </span>
+        {:else}
+          {@const pageKit = createPaginationPageRecipe({
+            page: item.page,
+            selected: item.selected,
+            ...(disabled !== undefined ? { disabled } : {}),
+            ...(getItemAriaLabel !== undefined
+              ? {
+                  ariaLabel: resolvePaginationItemAriaLabel(getItemAriaLabel, {
+                    type: "page",
+                    page: item.page,
+                    selected: item.selected,
+                  }),
+                }
+              : {}),
+          })}
+          <button
+            type="button"
+            class={pageKit.className}
+            aria-label={pageKit.a11y.ariaLabel}
+            aria-current={pageKit.a11y.ariaCurrent}
+            aria-disabled={pageKit.a11y.ariaDisabled}
+            disabled={disabled}
+            onclick={() => selectPage(item.page)}
+          >
+            {item.page}
+          </button>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+
+  {#if rootKit.showPrevNext}
+    <button
+      type="button"
+      class={nextKit.className}
+      aria-label={nextKit.a11y.ariaLabel}
+      aria-disabled={nextKit.a11y.ariaDisabled}
+      disabled={nextDisabled}
+      onclick={() => selectPage(resolvedPage + 1)}
+    >
+      <span class="mw-pagination__control-label">{nextLabel}</span>
+      <span class="mw-pagination__control-icon">
+        <Icon name={IconName.ChevronRight} decorative size={12} />
+      </span>
+    </button>
+  {/if}
+
+  {#if rootKit.showFirstLast}
+    <button
+      type="button"
+      class={lastKit.className}
+      aria-label={lastKit.a11y.ariaLabel}
+      aria-disabled={lastKit.a11y.ariaDisabled}
+      disabled={lastDisabled}
+      onclick={() => selectPage(pageCount)}
+    >
+      <span class="mw-pagination__control-label">{lastLabel}</span>
+      <span class="mw-pagination__control-icon">
+        <Icon name={IconName.ChevronsRight} decorative size={12} />
+      </span>
+    </button>
+  {/if}
+</nav>

package/dist/components/pagination/Pagination.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationProps } from "./types.js";
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/pagination/PaginationField.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { buildInputFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
+  import Pagination from "./Pagination.svelte";
+  import type { PaginationFieldProps, PaginationProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    description,
+    error,
+    pagination,
+    ariaDescribedBy,
+    class: className,
+  }: PaginationFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-pagination-${uniqueId}`);
+  const labelId = $derived(`${fieldId}-label`);
+
+  function hasTextContent(text: string | undefined): boolean {
+    return text !== undefined && text.trim().length > 0;
+  }
+
+  const hasDescription = $derived(hasTextContent(description));
+  const hasError = $derived(hasTextContent(error));
+
+  const a11yIds = $derived(
+    buildInputFieldA11yIds({
+      id: fieldId,
+      hasHelperText: hasDescription,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
+  );
+
+  const wrapperClass = $derived(
+    mergeClass("mw-pagination-field", hasError && "mw-pagination-field--invalid", className)
+  );
+
+  const paginationProps = $derived.by((): PaginationProps => {
+    const props: PaginationProps = {
+      ...pagination,
+      ariaLabelledBy: labelId,
+    } as PaginationProps;
+    if (a11yIds.describedBy) {
+      props.ariaDescribedBy = a11yIds.describedBy;
+    }
+    return props;
+  });
+</script>
+
+<div class={wrapperClass}>
+  <span class="mw-pagination-field__label" id={labelId}>
+    <Text variant="label">{label}</Text>
+  </span>
+
+  {#if hasDescription && !hasError}
+    <div class="mw-pagination-field__description" id={a11yIds.helperTextId}>
+      <Text variant="caption">{description}</Text>
+    </div>
+  {/if}
+
+  <Pagination {...paginationProps} />
+
+  {#if hasError}
+    <div class="mw-pagination-field__error" id={a11yIds.errorId} aria-live="polite">
+      <Text variant="caption">{error}</Text>
+    </div>
+  {/if}
+</div>

package/dist/components/pagination/PaginationField.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationFieldProps } from "./types.js";
+declare const PaginationField: import("svelte").Component<PaginationFieldProps, {}, "">;
+type PaginationField = ReturnType<typeof PaginationField>;
+export default PaginationField;

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

@@ -0,0 +1,2 @@
+export { default as PaginationField } from "./PaginationField.svelte";
+export type { PaginationFieldProps } from "./types.js";

package/dist/components/pagination/index.js

@@ -0,0 +1,2 @@
+// `Pagination` atom intentionally NOT re-exported — use `PaginationField`.
+export { default as PaginationField } from "./PaginationField.svelte";

package/dist/components/pagination/types.d.ts

@@ -0,0 +1,40 @@
+import type { PaginationControlDisplay, PaginationGetItemAriaLabel } from "@marwes-ui/core";
+export interface PaginationProps {
+    pageCount: number;
+    page?: number;
+    defaultPage?: number;
+    siblingCount?: number;
+    boundaryCount?: number;
+    maxVisibleItems?: number;
+    controlDisplay?: PaginationControlDisplay;
+    adaptive?: boolean;
+    showPrevNext?: boolean;
+    showFirstLast?: boolean;
+    disabled?: boolean;
+    firstLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    lastLabel?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    getItemAriaLabel?: PaginationGetItemAriaLabel;
+    onpagechange?: (page: number) => void;
+    class?: string;
+    id?: string;
+}
+export interface PaginationFieldProps {
+    /** Optional: if omitted, a stable id is generated. */
+    id?: string;
+    /** Field label (required for accessibility). */
+    label: string;
+    /** Optional description text. */
+    description?: string;
+    /** Optional error message. */
+    error?: string;
+    /** Props forwarded to the Pagination atom. */
+    pagination: Omit<PaginationProps, "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy">;
+    /** Additional aria-describedby IDs to merge with internal description/error IDs. */
+    ariaDescribedBy?: string;
+    class?: string;
+}

package/dist/components/pagination/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/progress-bar/ProgressBar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { createProgressBarRecipe } from "@marwes-ui/core";
+  import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { ProgressBarProps } from "./types.js";
+
+  let {
+    class: className,
+    style,
+    dataAttributes,
+    ...options
+  }: ProgressBarProps = $props();
+
+  const kit = $derived(createProgressBarRecipe(options));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+  const hasLabelRow = $derived(kit.showLabel || kit.showPercentage);
+</script>
+
+<div
+  class={mergedClass}
+  style={mergedStyle}
+  id={kit.a11y.id}
+  role={kit.a11y.role}
+  aria-valuemin={kit.a11y.ariaValueMin}
+  aria-valuemax={kit.a11y.ariaValueMax}
+  aria-valuenow={kit.a11y.ariaValueNow}
+  aria-valuetext={kit.a11y.ariaValueText}
+  aria-label={kit.a11y.ariaLabel}
+  aria-labelledby={kit.a11y.ariaLabelledBy}
+  aria-describedby={kit.a11y.ariaDescribedBy}
+  aria-disabled={kit.a11y.ariaDisabled ? "true" : undefined}
+  {...kit.dataAttributes}
+  {...dataAttributes}
+>
+  {#if hasLabelRow}
+    <div class="mw-progress-bar__label-row">
+      {#if kit.showLabel}
+        <span id={kit.labelId} class={kit.labelClassName}>{kit.label}</span>
+      {/if}
+      {#if kit.showPercentage}
+        <span class={kit.percentageClassName}>{kit.percentageLabel}</span>
+      {/if}
+    </div>
+  {/if}
+
+  <div class={kit.trackClassName} aria-hidden="true">
+    <span class={kit.fillClassName}></span>
+  </div>
+</div>

package/dist/components/progress-bar/ProgressBar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProgressBarProps } from "./types.js";
+declare const ProgressBar: import("svelte").Component<ProgressBarProps, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from "./ProgressBar.svelte";
+export type { ProgressBarProps } from "./types.js";

package/dist/components/progress-bar/index.js

@@ -0,0 +1 @@
+export { default as ProgressBar } from "./ProgressBar.svelte";

package/dist/components/progress-bar/types.d.ts

@@ -0,0 +1,6 @@
+import type { ProgressBarOptions } from "@marwes-ui/core";
+export interface ProgressBarProps extends ProgressBarOptions {
+    class?: string;
+    style?: string | undefined;
+    dataAttributes?: Record<string, string>;
+}

package/dist/components/progress-bar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/radio/OptionRadioGroup.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import Text from "../text/Text.svelte";
   import Radio from "./Radio.svelte";
   import RadioGroupField from "./RadioGroupField.svelte";
+  import type { RadioGroupFieldOption } from "./types.js";
 
   interface OptionRadioGroupProps {
     name: string;
@@ -8,7 +10,7 @@
     description?: string;
     error?: string;
     ariaDescribedBy?: string;
-    options: Array<{ value: string; label: string; disabled?: boolean }>;
+    options: RadioGroupFieldOption[];
     value?: string;
     defaultValue?: string;
     onchange?: (value: string) => void;
@@ -19,11 +21,23 @@
 
   let { name, options, value, defaultValue, onchange, disabled, required, error, ...fieldProps }: OptionRadioGroupProps = $props();
 
-  let selected = $state(value ?? defaultValue ?? "");
+  function getInitialSelected(): string {
+    return defaultValue ?? "";
+  }
+
+  const isControlled = $derived(value !== undefined);
+  let internalSelected = $state(getInitialSelected());
+  const selected = $derived(isControlled ? (value ?? "") : internalSelected);
   const isInvalid = $derived(error !== undefined && error.trim().length > 0);
 
+  function hasTextContent(text: string | undefined): boolean {
+    return text !== undefined && text.trim().length > 0;
+  }
+
   function handleChange(optValue: string) {
-    selected = optValue;
+    if (!isControlled) {
+      internalSelected = optValue;
+    }
     onchange?.(optValue);
   }
 </script>
@@ -36,17 +50,37 @@
   dataAttributes={{ "data-purpose": "selection" }}
 >
   {#each options as opt (opt.value)}
-    <label class="mw-radio-group-field__option">
+    {@const optionLabelId = `${name}-${opt.value}-label`}
+    {@const optionDescriptionId = `${name}-${opt.value}-description`}
+    {@const hasOptionDescription = hasTextContent(opt.description)}
+    <label
+      class={`mw-radio-group-field__option${hasOptionDescription ? " mw-radio-group-field__option--with-description" : ""}`}
+    >
       <Radio
         {name}
         value={opt.value}
+        ariaLabelledBy={optionLabelId}
+        {...(hasOptionDescription ? { ariaDescribedBy: optionDescriptionId } : {})}
         checked={selected === opt.value}
         disabled={disabled || opt.disabled || false}
         invalid={isInvalid}
         required={required === true}
         onchange={() => handleChange(opt.value)}
       />
-      <span class="mw-p mw-p--sm">{opt.label}</span>
+      <span class="mw-radio-group-field__option-content">
+        <Text id={optionLabelId} variant="label" class="mw-radio-group-field__option-label">
+          {opt.label}
+        </Text>
+        {#if hasOptionDescription}
+          <Text
+            id={optionDescriptionId}
+            variant="label-small"
+            class="mw-radio-group-field__option-description"
+          >
+            {opt.description}
+          </Text>
+        {/if}
+      </span>
     </label>
   {/each}
 </RadioGroupField>