@marwes-ui/svelte 1.3.0 → 1.4.0

package/dist/components/radio/OptionRadioGroup.svelte.d.ts

@@ -1,14 +1,11 @@
+import type { RadioGroupFieldOption } from "./types.js";
 interface OptionRadioGroupProps {
     name: string;
     label: string;
     description?: string;
     error?: string;
     ariaDescribedBy?: string;
-    options: Array<{
-        value: string;
-        label: string;
-        disabled?: boolean;
-    }>;
+    options: RadioGroupFieldOption[];
     value?: string;
     defaultValue?: string;
     onchange?: (value: string) => void;

package/dist/components/radio/Radio.svelte

@@ -21,6 +21,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
 <input
   type="radio"
   class={mergedClass}

package/dist/components/radio/RadioGroupField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buildRadioGroupFieldA11yIds } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
   import type { RadioGroupFieldProps } from "./types.js";
 
   let {
@@ -47,12 +48,12 @@
 
 <div class={wrapperClass} {...dataAttributes}>
   <div class="mw-radio-group-field__label" id={a11yIds.labelId}>
-    <p class="mw-p mw-p--sm">{label}</p>
+    <Text variant="label">{label}</Text>
   </div>
 
   {#if hasDescription}
     <div class="mw-radio-group-field__description" id={a11yIds.descriptionId}>
-      <p class="mw-p mw-p--sm">{description}</p>
+      <Text variant="caption">{description}</Text>
     </div>
   {/if}
 
@@ -69,7 +70,7 @@
 
   {#if hasError}
     <div class="mw-radio-group-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/radio/RatingRadioGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Text from "../text/Text.svelte";
   import Radio from "./Radio.svelte";
   import RadioGroupField from "./RadioGroupField.svelte";
 
@@ -19,7 +20,13 @@
 
   let { name, min = 1, max = 5, labelFn = String, value, defaultValue, onchange, disabled, ...fieldProps }: RatingRadioGroupProps = $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 options = $derived(
     Array.from({ length: max - min + 1 }, (_, i) => {
@@ -29,22 +36,30 @@
   );
 
   function handleChange(optValue: string) {
-    selected = optValue;
+    if (!isControlled) {
+      internalSelected = optValue;
+    }
     onchange?.(optValue);
   }
 </script>
 <div data-purpose="rating">
   <RadioGroupField {...fieldProps}>
     {#each options as opt (opt.value)}
+      {@const optionLabelId = `${name}-${opt.value}-label`}
       <label class="mw-radio-group-field__option">
         <Radio
           {name}
           value={opt.value}
+          ariaLabelledBy={optionLabelId}
           checked={selected === opt.value}
           disabled={disabled || false}
           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>
+        </span>
       </label>
     {/each}
   </RadioGroupField>

package/dist/components/radio/YesNoRadioGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Text from "../text/Text.svelte";
   import Radio from "./Radio.svelte";
   import RadioGroupField from "./RadioGroupField.svelte";
 
@@ -18,7 +19,13 @@
 
   let { name, yesLabel = "Yes", noLabel = "No", value, defaultValue, onchange, disabled, ...fieldProps }: YesNoRadioGroupProps = $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 options = $derived([
     { value: "yes", label: yesLabel },
@@ -26,22 +33,30 @@
   ]);
 
   function handleChange(optValue: string) {
-    selected = optValue;
+    if (!isControlled) {
+      internalSelected = optValue;
+    }
     onchange?.(optValue);
   }
 </script>
 <div data-purpose="binary-choice">
   <RadioGroupField {...fieldProps}>
     {#each options as opt (opt.value)}
+      {@const optionLabelId = `${name}-${opt.value}-label`}
       <label class="mw-radio-group-field__option">
         <Radio
           {name}
           value={opt.value}
+          ariaLabelledBy={optionLabelId}
           checked={selected === opt.value}
           disabled={disabled || false}
           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>
+        </span>
       </label>
     {/each}
   </RadioGroupField>

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

@@ -1,3 +1,5 @@
-export { default as Radio } from "./Radio.svelte";
 export { default as RadioGroupField } from "./RadioGroupField.svelte";
-export type { RadioProps, RadioGroupFieldProps } from "./types.js";
+export { default as YesNoRadioGroup } from "./YesNoRadioGroup.svelte";
+export { default as RatingRadioGroup } from "./RatingRadioGroup.svelte";
+export { default as OptionRadioGroup } from "./OptionRadioGroup.svelte";
+export type { RadioGroupFieldOption, RadioGroupFieldProps, YesNoRadioGroupProps, RatingRadioGroupProps, OptionRadioGroupProps, } from "./types.js";

package/dist/components/radio/index.js

@@ -1,2 +1,7 @@
-export { default as Radio } from "./Radio.svelte";
+// `Radio` (the atom) is intentionally NOT re-exported here.
+// Use `RadioGroupField` (or a purpose variant) instead. Internal
+// consumers can deep-import "./Radio.svelte" directly.
 export { default as RadioGroupField } from "./RadioGroupField.svelte";
+export { default as YesNoRadioGroup } from "./YesNoRadioGroup.svelte";
+export { default as RatingRadioGroup } from "./RatingRadioGroup.svelte";
+export { default as OptionRadioGroup } from "./OptionRadioGroup.svelte";

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

@@ -8,6 +8,12 @@ export interface RadioProps extends RadioOptions {
     oncheckedchange?: (checked: boolean) => void;
     class?: string;
 }
+export interface RadioGroupFieldOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
 export interface RadioGroupFieldProps {
     id?: string;
     label: string;
@@ -20,3 +26,44 @@ export interface RadioGroupFieldProps {
     children?: Snippet;
     class?: string;
 }
+export interface YesNoRadioGroupProps {
+    name: string;
+    label: string;
+    description?: string;
+    error?: string;
+    yesLabel?: string;
+    noLabel?: string;
+    value?: string;
+    defaultValue?: string;
+    onchange?: (value: string) => void;
+    disabled?: boolean;
+    class?: string;
+}
+export interface RatingRadioGroupProps {
+    name: string;
+    label: string;
+    description?: string;
+    error?: string;
+    min?: number;
+    max?: number;
+    labelFn?: (value: number) => string;
+    value?: string;
+    defaultValue?: string;
+    onchange?: (value: string) => void;
+    disabled?: boolean;
+    class?: string;
+}
+export interface OptionRadioGroupProps {
+    name: string;
+    label: string;
+    description?: string;
+    error?: string;
+    ariaDescribedBy?: string;
+    options: RadioGroupFieldOption[];
+    value?: string;
+    defaultValue?: string;
+    onchange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+}

package/dist/components/segmented-control/SegmentedControl.svelte

@@ -0,0 +1,125 @@
+<script lang="ts" generics="T extends string = string">
+  import {
+    createSegmentedControlRecipe,
+    createSegmentedControlItemRecipe,
+    moveSegmentedControlSelection,
+    resolveSegmentedControlValue,
+  } from "@marwes-ui/core";
+  import type { SegmentedControlItemState } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { SegmentedControlProps } from "./types.js";
+
+  let {
+    items,
+    value: controlledValue,
+    defaultValue,
+    onvaluechange,
+    variant,
+    size,
+    disabled,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    fullWidth,
+    label,
+    class: className,
+    id,
+    style,
+  }: SegmentedControlProps<T> = $props();
+
+  const itemStates: SegmentedControlItemState[] = $derived(
+    items.map((item) => ({ value: item.value, ...(item.disabled ? { disabled: true } : {}) }))
+  );
+
+  let internalValue = $state<string | undefined>(undefined);
+
+  $effect(() => {
+    if (internalValue === undefined) {
+      internalValue = resolveSegmentedControlValue(itemStates, defaultValue);
+    }
+  });
+
+  const resolvedValue = $derived(
+    controlledValue !== undefined
+      ? resolveSegmentedControlValue(itemStates, controlledValue)
+      : internalValue
+  );
+
+  function selectItem(nextValue: string): void {
+    const resolved = resolveSegmentedControlValue(itemStates, nextValue);
+    if (!resolved || resolved === resolvedValue) return;
+
+    if (controlledValue === undefined) {
+      internalValue = resolved;
+    }
+    // `resolved` always traces back to one of `items[i].value: T`, so this cast is safe.
+    onvaluechange?.(resolved as T);
+  }
+
+  function handleKeydown(e: KeyboardEvent): void {
+    let direction: "next" | "previous" | "start" | "end" | undefined;
+    if (e.key === "ArrowRight") direction = "next";
+    else if (e.key === "ArrowLeft") direction = "previous";
+    else if (e.key === "Home") direction = "start";
+    else if (e.key === "End") direction = "end";
+
+    if (!direction) return;
+    e.preventDefault();
+
+    const next = moveSegmentedControlSelection(itemStates, resolvedValue, direction);
+    if (next) {
+      selectItem(next);
+      const container = e.currentTarget as HTMLElement;
+      const btn = container.querySelector<HTMLButtonElement>(`[data-value="${next}"]`);
+      btn?.focus();
+    }
+  }
+
+  const trackKit = $derived(
+    createSegmentedControlRecipe({ value: resolvedValue, variant, size, disabled, ariaLabel, ariaLabelledBy, ariaDescribedBy, fullWidth, label })
+  );
+  const mergedClass = $derived(mergeClass(trackKit.className, className));
+</script>
+
+<div
+  {id}
+  class={mergedClass}
+  role={trackKit.a11y.role}
+  aria-label={trackKit.a11y.ariaLabel}
+  aria-labelledby={trackKit.a11y.ariaLabelledBy}
+  aria-describedby={trackKit.a11y.ariaDescribedBy}
+  aria-disabled={trackKit.a11y.ariaDisabled}
+  onkeydown={handleKeydown}
+  style={style}
+>
+  {#each items as item}
+    {@const isSelected = item.value === resolvedValue}
+    {@const isItemDisabled = disabled || item.disabled}
+    {@const itemKit = createSegmentedControlItemRecipe({
+      value: item.value,
+      selected: isSelected,
+      disabled: isItemDisabled,
+      ariaLabel: item.ariaLabel,
+      iconOnly: item.icon != null && item.label == null,
+    })}
+    <button
+      type="button"
+      class={itemKit.className}
+      role={itemKit.a11y.role}
+      aria-checked={itemKit.a11y.ariaChecked}
+      aria-disabled={itemKit.a11y.ariaDisabled}
+      aria-label={itemKit.a11y.ariaLabel}
+      tabindex={itemKit.a11y.tabIndex}
+      disabled={isItemDisabled}
+      data-value={item.value}
+      onclick={() => !isItemDisabled && selectItem(item.value)}
+    >
+      {#if item.icon}
+        {@render item.icon()}
+      {/if}
+      {#if item.label}
+        {item.label}
+      {/if}
+    </button>
+  {/each}
+</div>

package/dist/components/segmented-control/SegmentedControl.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { SegmentedControlProps } from "./types.js";
+declare function $$render<T extends string = string>(): {
+    props: SegmentedControlProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SegmentedControl: $$IsomorphicComponent;
+type SegmentedControl<T extends string = string> = InstanceType<typeof SegmentedControl<T>>;
+export default SegmentedControl;

package/dist/components/segmented-control/SegmentedControlField.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" generics="T extends string = string">
+  import { buildInputFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
+  import SegmentedControl from "./SegmentedControl.svelte";
+  import type { SegmentedControlFieldProps, SegmentedControlProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    description,
+    error,
+    segmentedControl,
+    ariaDescribedBy,
+    class: className,
+  }: SegmentedControlFieldProps<T> = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-segmented-control-${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-segmented-control-field",
+      hasError && "mw-segmented-control-field--invalid",
+      className
+    )
+  );
+
+  const scProps = $derived.by((): SegmentedControlProps<T> => {
+    const sc: SegmentedControlProps<T> = {
+      ...segmentedControl,
+      ariaLabelledBy: labelId,
+    } as SegmentedControlProps<T>;
+    if (a11yIds.describedBy) {
+      sc.ariaDescribedBy = a11yIds.describedBy;
+    }
+    return sc;
+  });
+</script>
+
+<div class={wrapperClass}>
+  <span class="mw-segmented-control-field__label" id={labelId}>
+    <Text variant="label">{label}</Text>
+  </span>
+
+  {#if hasDescription && !hasError}
+    <div class="mw-segmented-control-field__description" id={a11yIds.helperTextId}>
+      <Text variant="caption">{description}</Text>
+    </div>
+  {/if}
+
+  <SegmentedControl {...scProps} />
+
+  {#if hasError}
+    <div class="mw-segmented-control-field__error" id={a11yIds.errorId} aria-live="polite">
+      <Text variant="caption">{error}</Text>
+    </div>
+  {/if}
+</div>

package/dist/components/segmented-control/SegmentedControlField.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { SegmentedControlFieldProps } from "./types.js";
+declare function $$render<T extends string = string>(): {
+    props: SegmentedControlFieldProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SegmentedControlField: $$IsomorphicComponent;
+type SegmentedControlField<T extends string = string> = InstanceType<typeof SegmentedControlField<T>>;
+export default SegmentedControlField;

package/dist/components/segmented-control/index.d.ts

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

package/dist/components/segmented-control/index.js

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

package/dist/components/segmented-control/types.d.ts

@@ -0,0 +1,41 @@
+import type { SegmentedControlSize, SegmentedControlVariant } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface SegmentedControlItem<T extends string = string> {
+    value: T;
+    label?: string;
+    icon?: Snippet;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+export interface SegmentedControlProps<T extends string = string> {
+    items: SegmentedControlItem<T>[];
+    value?: T;
+    defaultValue?: T;
+    onvaluechange?: (value: T) => void;
+    variant?: SegmentedControlVariant;
+    size?: SegmentedControlSize;
+    disabled?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    fullWidth?: boolean;
+    label?: string;
+    class?: string;
+    id?: string;
+    style?: string;
+}
+export interface SegmentedControlFieldProps<T extends string = string> {
+    /** 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 SegmentedControl atom. */
+    segmentedControl: Omit<SegmentedControlProps<T>, "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy">;
+    /** Additional aria-describedby IDs to merge with internal description/error IDs. */
+    ariaDescribedBy?: string;
+    class?: string;
+}

package/dist/components/segmented-control/types.js

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

package/dist/components/skip-link/SkipLink.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { createSkipLinkRecipe } from "@marwes-ui/core";
+  import type { SkipLinkProps } from "./types.js";
+
+  let { href, children, class: className }: SkipLinkProps = $props();
+
+  const kit = $derived(createSkipLinkRecipe({ href, className }));
+</script>
+
+<a {href} class={kit.className}>
+  {@render children?.()}
+</a>

package/dist/components/skip-link/SkipLink.svelte.d.ts

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

package/dist/components/skip-link/index.d.ts

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

package/dist/components/skip-link/index.js

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

package/dist/components/skip-link/types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+export interface SkipLinkProps {
+    /** Anchor href, typically a fragment like "#main". */
+    href: string;
+    children: Snippet;
+    class?: string;
+}

package/dist/components/skip-link/types.js

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

package/dist/components/slider/SliderField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buildSliderFieldA11yIds } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
   import Slider from "./Slider.svelte";
   import type { SliderFieldProps, SliderProps } from "./types.js";
 
@@ -54,23 +55,23 @@
 <div class={wrapperClass} data-label-position={labelPosition} {...dataAttributes}>
   <div class="mw-slider-field__header">
     <div class="mw-slider-field__label" id={a11yIds.labelId}>
-      <p class="mw-p mw-p--md">{label}</p>
+      <Text variant="label">{label}</Text>
     </div>
   </div>
 
   {#if hasDescription && !hasError}
     <div class="mw-slider-field__description" id={a11yIds.descriptionId}>
-      <p class="mw-p mw-p--sm">{descriptionText}</p>
+      <Text variant="caption">{descriptionText}</Text>
     </div>
   {/if}
 
   {#if labelPosition === "top" && showEdgeValues}
     <div class="mw-slider-field__values-row">
       <span class="mw-slider-field__edge-value mw-slider-field__edge-value--min">
-        <p class="mw-p mw-p--sm">{minEdgeValue}</p>
+        <Text variant="caption">{minEdgeValue}</Text>
       </span>
       <span class="mw-slider-field__edge-value mw-slider-field__edge-value--max">
-        <p class="mw-p mw-p--sm">{maxEdgeValue}</p>
+        <Text variant="caption">{maxEdgeValue}</Text>
       </span>
     </div>
   {/if}
@@ -78,7 +79,7 @@
   <div class="mw-slider-field__control-row">
     {#if labelPosition === "inline" && showEdgeValues}
       <span class="mw-slider-field__edge-value mw-slider-field__edge-value--min">
-        <p class="mw-p mw-p--sm">{minEdgeValue}</p>
+        <Text variant="caption">{minEdgeValue}</Text>
       </span>
     {/if}
 
@@ -96,20 +97,20 @@
 
     {#if labelPosition === "inline" && showEdgeValues}
       <span class="mw-slider-field__edge-value mw-slider-field__edge-value--max">
-        <p class="mw-p mw-p--sm">{maxEdgeValue}</p>
+        <Text variant="caption">{maxEdgeValue}</Text>
       </span>
     {/if}
   </div>
 
   {#if hasDescription && hasError}
     <div class="mw-slider-field__description" id={a11yIds.descriptionId}>
-      <p class="mw-p mw-p--sm">{descriptionText}</p>
+      <Text variant="caption">{descriptionText}</Text>
     </div>
   {/if}
 
   {#if hasError}
     <div class="mw-slider-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>