@marwes-ui/svelte 1.3.0 → 1.4.0

package/dist/components/date-picker/index.d.ts

@@ -1,2 +1,2 @@
-export { default as DatePicker } from "./DatePicker.svelte";
-export type { DatePickerProps } from "./types.js";
+export { default as DatePickerField } from "./DatePickerField.svelte";
+export type { DatePickerFieldProps } from "./types.js";

package/dist/components/date-picker/index.js

@@ -1 +1,3 @@
-export { default as DatePicker } from "./DatePicker.svelte";
+// `DatePicker` atom intentionally NOT re-exported — use `DatePickerField`.
+// Internal consumers can deep-import "./DatePicker.svelte" directly.
+export { default as DatePickerField } from "./DatePickerField.svelte";

package/dist/components/date-picker/types.d.ts

@@ -11,3 +11,18 @@ export interface DatePickerProps extends DatePickerOptions {
     onapply?: () => void;
     class?: string;
 }
+export interface DatePickerFieldProps {
+    /** Optional: if omitted, a stable id is generated. */
+    id?: string;
+    /** Field label (required for accessibility). */
+    label: string;
+    /** Optional helper text shown below the calendar. */
+    helperText?: string;
+    /** Optional error message. */
+    error?: string;
+    /** Props forwarded to the DatePicker atom. */
+    datePicker?: Omit<DatePickerProps, "ariaLabel" | "ariaLabelledBy" | "calendarLabel">;
+    /** Additional aria-describedby IDs to merge with internal helper/error IDs. */
+    ariaDescribedBy?: string;
+    class?: string;
+}

package/dist/components/dialog/Dialog.svelte

@@ -63,6 +63,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <section
   id={dialogId}
   class={mergedClass}

package/dist/components/dialog/DialogModal.svelte

@@ -8,6 +8,9 @@
     closeOnEscape = true,
     closeOnScrimClick = true,
     restoreFocus = true,
+    surfaceWidth,
+    tone = "default",
+    divider = "visible",
     onopenchange,
     overlayClass,
     footer,
@@ -19,6 +22,11 @@
   let previouslyFocused: HTMLElement | null = $state(null);
 
   const mergedOverlayClass = $derived(mergeClass("mw-dialog-modal", overlayClass));
+  const surfaceWidthStyle = $derived(
+    surfaceWidth === undefined
+      ? undefined
+      : `--mw-dialog-surface-width: ${typeof surfaceWidth === "number" ? `${surfaceWidth}px` : surfaceWidth}`
+  );
 
   function close(): void {
     if (!open) return;
@@ -108,6 +116,10 @@
   <div
     bind:this={overlayElement}
     class={mergedOverlayClass}
+    style={surfaceWidthStyle}
+    data-surface-width={surfaceWidth === undefined ? undefined : "custom"}
+    data-tone={tone}
+    data-divider={divider}
     onclick={handleScrimClick}
     onkeydown={handleKeyDown}
     role="presentation"

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

@@ -3,4 +3,4 @@ export { default as DialogModal } from "./DialogModal.svelte";
 export { default as ConfirmDialog } from "./ConfirmDialog.svelte";
 export { default as DestructiveDialog } from "./DestructiveDialog.svelte";
 export { default as InfoDialog } from "./InfoDialog.svelte";
-export type { ConfirmDialogProps, DestructiveDialogProps, DialogModalProps, DialogProps, InfoDialogProps, } from "./types.js";
+export type { ConfirmDialogProps, DestructiveDialogProps, DialogFooterControls, DialogModalProps, DialogProps, InfoDialogProps, } from "./types.js";

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

@@ -12,14 +12,18 @@ export interface DialogProps extends DialogOptions {
     class?: string;
     dataAttributes?: Record<string, string>;
 }
+export interface DialogFooterControls {
+    close: () => void;
+}
 export interface DialogModalProps extends Omit<DialogProps, "footer" | "onclose"> {
     open?: boolean;
     closeOnEscape?: boolean;
     closeOnScrimClick?: boolean;
     restoreFocus?: boolean;
-    footer?: Snippet<[{
-        close: () => void;
-    }]>;
+    surfaceWidth?: string | number;
+    tone?: "default" | "calm";
+    divider?: "visible" | "hidden";
+    footer?: Snippet<[DialogFooterControls]>;
     onopenchange?: (open: boolean) => void;
     class?: string;
     overlayClass?: string;

package/dist/components/drawer/Drawer.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { IconName, createDrawerRecipe } from "@marwes-ui/core";
+  import type { DrawerOptions } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Icon from "../icon/Icon.svelte";
+  import type { DrawerProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    title,
+    description,
+    children,
+    footer,
+    onclose,
+    class: className,
+    panelClass,
+    dataAttributes,
+    size,
+    placement,
+    showFooter,
+    dismissible,
+    modal,
+    showScrim,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+  }: DrawerProps = $props();
+
+  const uniqueId = $props.id();
+  const drawerId = $derived(userProvidedId ?? `mw-drawer-${uniqueId}`);
+  const titleId = $derived(`${drawerId}-title`);
+  const descriptionId = $derived(`${drawerId}-description`);
+
+  const hasTitle = $derived(title !== undefined && title.trim().length > 0);
+  const hasDescription = $derived(description !== undefined && description.trim().length > 0);
+  const hasFooter = $derived((showFooter ?? true) && footer !== undefined);
+  const isDismissible = $derived((dismissible ?? true) && onclose !== undefined);
+
+  const drawerOptions = $derived.by((): DrawerOptions => {
+    const opts: DrawerOptions = {
+      showFooter: hasFooter,
+      dismissible: isDismissible,
+    };
+    if (modal !== undefined) opts.modal = modal;
+    if (showScrim !== undefined) opts.showScrim = showScrim;
+    if (dataAttributes !== undefined) opts.dataAttributes = dataAttributes;
+    if (size !== undefined) opts.size = size;
+    if (placement !== undefined) opts.placement = placement;
+    if (ariaLabel !== undefined) opts.ariaLabel = ariaLabel;
+    if (ariaLabelledBy !== undefined) {
+      opts.ariaLabelledBy = ariaLabelledBy;
+    } else if (ariaLabel === undefined && hasTitle) {
+      opts.ariaLabelledBy = titleId;
+    }
+    if (ariaDescribedBy !== undefined) {
+      opts.ariaDescribedBy = ariaDescribedBy;
+    } else if (hasDescription) {
+      opts.ariaDescribedBy = descriptionId;
+    }
+    return opts;
+  });
+
+  const kit = $derived(createDrawerRecipe(drawerOptions));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedPanelClass = $derived(mergeClass(kit.panel.className, panelClass));
+
+  function handleClose(): void {
+    onclose?.();
+  }
+</script>
+
+<div class={mergedClass} {...kit.dataAttributes}>
+  {#if kit.showScrim}
+    <div
+      class={kit.scrim.className}
+      aria-hidden="true"
+      onclick={isDismissible ? handleClose : undefined}
+      {...kit.scrim.dataAttributes}
+    ></div>
+  {/if}
+
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    id={drawerId}
+    class={mergedPanelClass}
+    role={kit.panel.a11y.role}
+    aria-modal={kit.panel.a11y.ariaModal ? "true" : undefined}
+    aria-label={kit.panel.a11y.ariaLabel}
+    aria-labelledby={kit.panel.a11y.ariaLabelledBy}
+    aria-describedby={kit.panel.a11y.ariaDescribedBy}
+    tabindex={-1}
+    {...kit.panel.dataAttributes}
+  >
+    {#if hasTitle || kit.showCloseButton}
+      <div class="mw-drawer__header">
+        {#if hasTitle}
+          <div class="mw-drawer__heading-group">
+            <h2 class="mw-drawer__title" id={titleId}>{title}</h2>
+          </div>
+        {:else}
+          <span class="mw-drawer__spacer" aria-hidden="true"></span>
+        {/if}
+
+        {#if kit.showCloseButton && onclose}
+          <button
+            type="button"
+            class="mw-drawer__close"
+            aria-label="Close drawer"
+            onclick={handleClose}
+          >
+            <Icon name={IconName.X} decorative />
+          </button>
+        {/if}
+      </div>
+      <div class="mw-drawer__header-divider" aria-hidden="true"></div>
+    {/if}
+
+    <div class="mw-drawer__content">
+      {#if hasDescription}
+        <p class="mw-drawer__description" id={descriptionId}>{description}</p>
+      {/if}
+      {@render children?.()}
+    </div>
+
+    {#if hasFooter}
+      <div class="mw-drawer__footer-divider" aria-hidden="true"></div>
+      <div class="mw-drawer__footer">
+        {@render footer?.({ close: handleClose })}
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/components/drawer/Drawer.svelte.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Drawer } from "./Drawer.svelte";
+export type { DrawerPlacement, DrawerProps, DrawerSize } from "./types.js";

package/dist/components/drawer/index.js

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

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

@@ -0,0 +1,16 @@
+import type { DrawerOptions, DrawerPlacement, DrawerSize } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface DrawerProps extends DrawerOptions {
+    id?: string;
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    footer?: Snippet<[{
+        close: () => void;
+    }]>;
+    onclose?: () => void;
+    class?: string;
+    panelClass?: string;
+    dataAttributes?: Record<string, string>;
+}
+export type { DrawerPlacement, DrawerSize };

package/dist/components/drawer/types.js

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

package/dist/components/heading/H1.svelte

@@ -1,3 +1,13 @@
+<!--
+  H1 (Heading Level 1) — semantic top-level heading rendered as `<h1>`.
+
+  @remarks
+  Marwes officially styles H1-H3 only. For semantic H4-H6 (deep section
+  nesting, accessibility outlines), render
+  `<Text headingLevel={4} variant="..." />` — it produces the correct
+  heading tag while letting the consumer pick the visual variant.
+  Type your wrappers against `SemanticHeadingLevel` from `@marwes-ui/core`.
+-->
 <script lang="ts">
   import { headingRecipe } from "@marwes-ui/core";
   import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";

package/dist/components/heading/H2.svelte

@@ -1,3 +1,9 @@
+<!--
+  H2 (Heading Level 2) — semantic section heading rendered as `<h2>`.
+
+  @remarks
+  For semantic H4-H6, use `<Text headingLevel={4..6} variant="..." />`.
+-->
 <script lang="ts">
   import { headingRecipe } from "@marwes-ui/core";
   import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";

package/dist/components/heading/H3.svelte

@@ -1,3 +1,10 @@
+<!--
+  H3 (Heading Level 3) — semantic subsection heading rendered as `<h3>`.
+
+  @remarks
+  H3 is the deepest blessed rung. For H4-H6, use
+  `<Text headingLevel={4..6} variant="..." />`.
+-->
 <script lang="ts">
   import { headingRecipe } from "@marwes-ui/core";
   import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";

package/dist/components/input/CurrencyField.svelte

@@ -5,7 +5,7 @@
   let { currency, input = {}, ...props }: Props = $props();
 
   const symbols: Record<string, string> = { USD: "$", EUR: "€", GBP: "£", JPY: "¥", SEK: "kr", NOK: "kr", DKK: "kr", CHF: "CHF", BTC: "₿" };
-  const leadingSymbol = currency ? symbols[currency] : undefined;
+  const leadingSymbol = $derived(currency ? symbols[currency] : undefined);
 </script>
 <div data-purpose="currency" data-currency={currency}>
   <InputField {...props} input={{ ...input, type: "text", inputMode: "decimal" }} {...(leadingSymbol ? { leadingSymbol } : {})} />

package/dist/components/input/Input.svelte

@@ -42,6 +42,7 @@
   readonly={kit.a11y.readOnly}
   required={kit.a11y.required}
   aria-label={kit.a11y.ariaLabel}
+  aria-labelledby={kit.a11y.ariaLabelledBy}
   aria-invalid={kit.a11y.ariaInvalid}
   aria-describedby={kit.a11y.ariaDescribedBy}
   {value}

package/dist/components/input/InputField.svelte

@@ -2,6 +2,7 @@
   import { buildInputFieldA11yIds } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
   import Icon from "../icon/Icon.svelte";
+  import Text from "../text/Text.svelte";
   import Input from "./Input.svelte";
   import type { InputFieldProps } from "./types.js";
 
@@ -76,7 +77,7 @@
 
 <div class={wrapperClass}>
   <label class="mw-input-field__label" for={fieldId}>
-    <p class="mw-p mw-p--md">{label}</p>
+    <Text variant="label">{label}</Text>
   </label>
 
   <div class="mw-input-field__input-wrapper">
@@ -127,13 +128,13 @@
 
   {#if hasHelperText && !hasError}
     <div class="mw-input-field__helper" id={a11yIds.helperTextId}>
-      <p class="mw-p mw-p--sm">{helperText}</p>
+      <Text variant="caption">{helperText}</Text>
     </div>
   {/if}
 
   {#if hasError}
     <div class="mw-input-field__error" id={a11yIds.errorId} aria-live="polite">
-      <p class="mw-p mw-p--sm">{error}</p>
+      <Text variant="caption">{error}</Text>
     </div>
   {/if}
 </div>

package/dist/components/input/InputOtp.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
-  import {
-    buildInputFieldA11yIds,
-    createInputOtpRecipe,
-    sanitizeInputOtpValue,
-  } from "@marwes-ui/core";
+  import { createInputOtpRecipe, sanitizeInputOtpValue } from "@marwes-ui/core";
   import type { InputOtpOptions } from "@marwes-ui/core";
   import { cssVarsToStyle } from "../../internal/css-vars.js";
   import { mergeClass } from "../../internal/merge-class.js";
   import type { InputOtpProps } from "./types.js";
 
+  /**
+   * InputOtp (Atom) — bare OTP cells. Renders the visual cells and a hidden
+   * native `<input>` that captures keyboard entry. Pair with `InputOtpField`
+   * for label + helper/error wiring.
+   */
   let {
     id: userProvidedId,
     name,
-    label,
-    helperText,
-    error,
-    ariaDescribedBy,
     value: controlledValue,
     defaultValue,
     length: lengthProp,
@@ -23,8 +20,11 @@
     disabled,
     readOnly,
     required,
-    invalid: invalidProp,
+    invalid,
     ariaLabel,
+    label,
+    ariaLabelledBy,
+    describedBy,
     onvaluechange,
     class: className,
   }: InputOtpProps = $props();
@@ -33,44 +33,34 @@
   const fieldId = $derived(userProvidedId ?? `mw-input-otp-${uniqueId}`);
   const otpLength = $derived(Math.max(1, lengthProp ?? 6));
 
-  function hasTextContent(text: string | undefined): boolean {
-    return text !== undefined && text.trim().length > 0;
-  }
-
-  const hasHelperText = $derived(hasTextContent(helperText));
-  const hasError = $derived(hasTextContent(error));
-  const isInvalid = $derived(hasError || invalidProp === true);
   const isControlled = $derived(controlledValue !== undefined);
 
-  let uncontrolledValue = $state(sanitizeInputOtpValue(defaultValue, lengthProp ?? 6));
+  function getInitialUncontrolledValue(): string {
+    return sanitizeInputOtpValue(defaultValue, lengthProp ?? 6);
+  }
+
+  let uncontrolledValue = $state(getInitialUncontrolledValue());
 
   const currentValue = $derived(
     sanitizeInputOtpValue(isControlled ? controlledValue : uncontrolledValue, otpLength)
   );
 
-  const a11yIds = $derived(
-    buildInputFieldA11yIds({
-      id: fieldId,
-      hasHelperText,
-      hasError,
-      externalDescribedBy: ariaDescribedBy,
-    })
-  );
-
   const recipeOptions = $derived.by((): InputOtpOptions => {
     const opts: InputOtpOptions = {
       id: fieldId,
       value: currentValue,
       length: otpLength,
-      invalid: isInvalid,
     };
     if (name) opts.name = name;
     if (placeholderCharacter) opts.placeholderCharacter = placeholderCharacter;
     if (disabled) opts.disabled = true;
     if (readOnly) opts.readOnly = true;
     if (required) opts.required = true;
-    if (a11yIds.describedBy) opts.describedBy = a11yIds.describedBy;
+    if (invalid) opts.invalid = true;
+    if (describedBy) opts.describedBy = describedBy;
     if (ariaLabel) opts.ariaLabel = ariaLabel;
+    if (label) opts.label = label;
+    if (ariaLabelledBy) opts.ariaLabelledBy = ariaLabelledBy;
     return opts;
   });
 
@@ -91,13 +81,9 @@
   class={mergedClass}
   style={mergedStyle}
   data-component="input-otp"
-  data-invalid={isInvalid ? "true" : undefined}
+  data-invalid={invalid ? "true" : undefined}
   data-disabled={disabled ? "true" : undefined}
 >
-  <label class="mw-input-otp__label" for={fieldId}>
-    <p class="mw-p mw-p--md">{label}</p>
-  </label>
-
   <div class="mw-input-otp__cells">
     {#each kit.displayCells as cell (cell.key)}
       <span
@@ -121,20 +107,11 @@
       readonly={kit.a11y.readOnly}
       required={kit.a11y.required}
       aria-label={kit.a11y.ariaLabel}
+      aria-labelledby={kit.a11y.ariaLabelledBy}
       aria-invalid={kit.a11y.ariaInvalid}
       aria-describedby={kit.a11y.ariaDescribedBy}
       value={kit.displayValue}
       oninput={handleChange}
     />
   </div>
-
-  {#if hasError}
-    <div class="mw-input-otp__error" id={a11yIds.errorId} aria-live="polite">
-      <p class="mw-p mw-p--sm">{error}</p>
-    </div>
-  {:else if hasHelperText}
-    <div class="mw-input-otp__helper" id={a11yIds.helperTextId}>
-      <p class="mw-p mw-p--sm">{helperText}</p>
-    </div>
-  {/if}
 </div>

package/dist/components/input/InputOtpField.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { buildInputFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
+  import InputOtp from "./InputOtp.svelte";
+  import type { InputOtpFieldProps, InputOtpProps } from "./types.js";
+
+  /**
+   * InputOtpField (Molecule) — labeled wrapper around `InputOtp`.
+   */
+  let {
+    id: userProvidedId,
+    label,
+    helperText,
+    error,
+    inputOtp = {},
+    ariaDescribedBy,
+    class: className,
+  }: InputOtpFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-input-otp-${uniqueId}`);
+  const labelId = $derived(`${fieldId}-label`);
+
+  function hasTextContent(text: string | undefined): boolean {
+    return text !== undefined && text.trim().length > 0;
+  }
+
+  const hasHelperText = $derived(hasTextContent(helperText));
+  const hasError = $derived(hasTextContent(error));
+  const isInvalid = $derived(hasError || inputOtp.invalid === true);
+
+  const a11yIds = $derived(
+    buildInputFieldA11yIds({
+      id: fieldId,
+      hasHelperText,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
+  );
+
+  const wrapperClass = $derived(
+    mergeClass(
+      "mw-input-otp-field",
+      hasError && "mw-input-otp-field--invalid",
+      inputOtp.disabled && "mw-input-otp-field--disabled",
+      className
+    )
+  );
+
+  const otpProps = $derived.by((): InputOtpProps => {
+    const props: InputOtpProps = {
+      ...inputOtp,
+      id: fieldId,
+      invalid: isInvalid,
+      ariaLabelledBy: labelId,
+    };
+    if (a11yIds.describedBy) {
+      props.describedBy = a11yIds.describedBy;
+    }
+    return props;
+  });
+</script>
+
+<div class={wrapperClass}>
+  <label class="mw-input-otp-field__label" for={fieldId} id={labelId}>
+    <Text variant="label">{label}</Text>
+  </label>
+
+  <InputOtp {...otpProps} />
+
+  {#if hasError}
+    <div class="mw-input-otp-field__error" id={a11yIds.errorId} aria-live="polite">
+      <Text variant="caption">{error}</Text>
+    </div>
+  {:else if hasHelperText}
+    <div class="mw-input-otp-field__helper" id={a11yIds.helperTextId}>
+      <Text variant="caption">{helperText}</Text>
+    </div>
+  {/if}
+</div>

package/dist/components/input/InputOtpField.svelte.d.ts

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

package/dist/components/input/RichText.svelte

@@ -32,11 +32,15 @@
   const showToolbar = $derived(!options.readOnly);
 
   let editorElement: HTMLDivElement | undefined = $state(undefined);
-  let uncontrolledHtml = $state(normalizeRichTextHtml(defaultValue));
-  let isEditorEmpty = $state(isRichTextHtmlEmpty(isControlled ? normalizeRichTextHtml(controlledValue) : uncontrolledHtml));
+  function getInitialUncontrolledHtml(): string {
+    return normalizeRichTextHtml(defaultValue);
+  }
+
+  let uncontrolledHtml = $state(getInitialUncontrolledHtml());
   let activeFormats = $state<RichTextFormat[]>([]);
 
   const editorHtml = $derived(isControlled ? normalizeRichTextHtml(controlledValue) : uncontrolledHtml);
+  const isEditorEmpty = $derived(isRichTextHtmlEmpty(editorHtml));
 
   const formatLabels: Record<RichTextFormat, string> = {
     bold: "Bold",
@@ -46,9 +50,7 @@
 
   function syncEditorState(nextHtml: string): string {
     const normalized = normalizeRichTextHtml(nextHtml);
-    const empty = isRichTextHtmlEmpty(normalized);
     if (!isControlled) uncontrolledHtml = normalized;
-    isEditorEmpty = empty;
     onvaluechange?.(normalized);
     return normalized;
   }
@@ -113,7 +115,6 @@
     if (!editorElement) return;
     const normalizedDom = normalizeRichTextHtml(editorElement.innerHTML);
     if (normalizedDom !== editorHtml) editorElement.innerHTML = editorHtml;
-    isEditorEmpty = isRichTextHtmlEmpty(editorHtml);
   });
 
   $effect(() => {
@@ -154,7 +155,7 @@
     data-empty={isEditorEmpty ? "true" : undefined}
     data-placeholder={options.placeholder}
     id={kit.a11y.id}
-    role={kit.a11y.role}
+    role="textbox"
     tabindex={kit.a11y.tabIndex}
     aria-label={kit.a11y.ariaLabel}
     aria-labelledby={kit.a11y.ariaLabelledBy}

package/dist/components/input/RichTextField.svelte

@@ -2,6 +2,7 @@
   import { buildRichTextFieldA11yIds } from "@marwes-ui/core";
   import type { RichTextOptions } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
   import RichText from "./RichText.svelte";
   import type { RichTextFieldProps } from "./types.js";
 
@@ -57,7 +58,7 @@
       el?.focus();
     }}
   >
-    <p class="mw-p mw-p--md">{label}</p>
+    <Text variant="label">{label}</Text>
   </button>
 
   <div class="mw-input-field__input-wrapper">
@@ -72,13 +73,13 @@
 
   {#if hasHelperText && !hasError}
     <div class="mw-input-field__helper" id={a11yIds.helperTextId}>
-      <p class="mw-p mw-p--sm">{helperText}</p>
+      <Text variant="caption">{helperText}</Text>
     </div>
   {/if}
 
   {#if hasError}
     <div class="mw-input-field__error" id={a11yIds.errorId} aria-live="polite">
-      <p class="mw-p mw-p--sm">{error}</p>
+      <Text variant="caption">{error}</Text>
     </div>
   {/if}
 </div>