@marwes-ui/svelte 1.3.0

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

@@ -0,0 +1,104 @@
+import type { InputOptions, RichTextOptions, SelectOptions, TextareaOptions } from "@marwes-ui/core";
+export type { SelectOption } from "@marwes-ui/core";
+export interface InputProps extends Omit<InputOptions, "describedBy"> {
+    value?: string;
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    class?: string;
+    style?: string | undefined;
+    /** Merged aria-describedby from InputField or user. */
+    describedBy?: string | undefined;
+}
+export interface InputFieldProps {
+    /** Optional: if omitted, a stable id is generated. */
+    id?: string;
+    /** Field label (required for accessibility). */
+    label: string;
+    /** Optional helper text shown below the input. */
+    helperText?: string;
+    /** Optional error message. When present, input is marked invalid. */
+    error?: string;
+    /** Props forwarded to the Input atom. */
+    input?: Omit<InputProps, "value">;
+    /** Additional aria-describedby IDs to merge with internal helper/error IDs. */
+    ariaDescribedBy?: string;
+    /** Optional leading text symbol displayed inside the input on the left (e.g. "$", "€", "kr"). */
+    leadingSymbol?: string;
+    /** The input value — supports bind:value. */
+    value?: string;
+    class?: string;
+}
+export interface InputOtpProps {
+    id?: string;
+    name?: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    ariaDescribedBy?: string;
+    value?: string;
+    defaultValue?: string;
+    length?: number;
+    placeholderCharacter?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    ariaLabel?: string;
+    onvaluechange?: (value: string) => void;
+    class?: string;
+}
+export interface RichTextProps extends RichTextOptions {
+    onvaluechange?: (value: string) => void;
+    class?: string;
+}
+export interface RichTextFieldProps {
+    id?: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    editor: RichTextOptions & {
+        onvaluechange?: (value: string) => void;
+        class?: string;
+    };
+    ariaDescribedBy?: string;
+}
+export interface SelectProps extends Omit<SelectOptions, "describedBy"> {
+    value?: string;
+    onvaluechange?: (value: string) => void;
+    onchange?: (e: Event & {
+        currentTarget: HTMLSelectElement;
+    }) => void;
+    class?: string;
+    style?: string | undefined;
+    describedBy?: string | undefined;
+}
+export interface SelectFieldProps {
+    id?: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    select?: SelectProps;
+    ariaDescribedBy?: string;
+    value?: string;
+    class?: string;
+}
+export interface TextareaProps extends Omit<TextareaOptions, "describedBy"> {
+    value?: string;
+    oninput?: (e: Event & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
+    class?: string;
+    style?: string | undefined;
+    describedBy?: string | undefined;
+}
+export interface TextareaFieldProps {
+    id?: string;
+    label: string;
+    helperText?: string;
+    error?: string;
+    textarea?: Omit<TextareaProps, "value">;
+    ariaDescribedBy?: string;
+    value?: string;
+    class?: string;
+}

package/dist/components/input/types.js

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

package/dist/components/paragraph/Paragraph.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { paragraphRecipe } from "@marwes-ui/core";
+  import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import { useTheme } from "../../provider/use-theme.js";
+  import type { ParagraphProps } from "./types.js";
+
+  let {
+    children,
+    class: className,
+    style,
+    ...opts
+  }: ParagraphProps = $props();
+
+  const { theme } = useTheme();
+  const kit = $derived(paragraphRecipe(opts, theme));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+</script>
+
+<p id={kit.a11y.id} class={mergedClass} style={mergedStyle}>
+  {@render children?.()}
+</p>

package/dist/components/paragraph/Paragraph.svelte.d.ts

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

package/dist/components/paragraph/README.md

@@ -0,0 +1,13 @@
+# Paragraph — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `Paragraph` component with `paragraphRecipe`
+- `mw-p` class with size modifiers (`mw-p--sm`, `mw-p--md`, `mw-p--lg`)
+- CSS vars for font family, size, weight, line height from resolved theme
+- Optional `id`, `size`, custom `class`, `style`
+- Requires `MarwesProvider` context for theme access
+
+### Notes
+- Paragraph recipe requires the resolved theme to compute font variables.

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

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

package/dist/components/paragraph/index.js

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

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

@@ -0,0 +1,9 @@
+import type { ParagraphSize } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface ParagraphProps {
+    size?: ParagraphSize;
+    id?: string;
+    children?: Snippet;
+    class?: string;
+    style?: string | undefined;
+}

package/dist/components/paragraph/types.js

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

package/dist/components/radio/OptionRadioGroup.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import Radio from "./Radio.svelte";
+  import RadioGroupField from "./RadioGroupField.svelte";
+
+  interface OptionRadioGroupProps {
+    name: string;
+    label: string;
+    description?: string;
+    error?: string;
+    ariaDescribedBy?: string;
+    options: Array<{ value: string; label: string; disabled?: boolean }>;
+    value?: string;
+    defaultValue?: string;
+    onchange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+  }
+
+  let { name, options, value, defaultValue, onchange, disabled, required, error, ...fieldProps }: OptionRadioGroupProps = $props();
+
+  let selected = $state(value ?? defaultValue ?? "");
+  const isInvalid = $derived(error !== undefined && error.trim().length > 0);
+
+  function handleChange(optValue: string) {
+    selected = optValue;
+    onchange?.(optValue);
+  }
+</script>
+
+<RadioGroupField
+  {...fieldProps}
+  error={error ?? ""}
+  disabled={disabled === true}
+  required={required === true}
+  dataAttributes={{ "data-purpose": "selection" }}
+>
+  {#each options as opt (opt.value)}
+    <label class="mw-radio-group-field__option">
+      <Radio
+        {name}
+        value={opt.value}
+        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>
+    </label>
+  {/each}
+</RadioGroupField>

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

@@ -0,0 +1,21 @@
+interface OptionRadioGroupProps {
+    name: string;
+    label: string;
+    description?: string;
+    error?: string;
+    ariaDescribedBy?: string;
+    options: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    value?: string;
+    defaultValue?: string;
+    onchange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+}
+declare const OptionRadioGroup: import("svelte").Component<OptionRadioGroupProps, {}, "">;
+type OptionRadioGroup = ReturnType<typeof OptionRadioGroup>;
+export default OptionRadioGroup;

package/dist/components/radio/README.md

@@ -0,0 +1,16 @@
+# Radio — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `Radio` atom with `radioRecipe`
+- `bind:checked` support
+- `oncheckedchange` callback
+- `RadioGroupField` molecule with fieldset, legend, aria-labelledby, error region
+- `buildRadioGroupFieldA11yIds` integration
+
+### Missing ❌
+- **Purpose variant wrappers**: React/Vue have `RadioCard` and similar (not critical)
+
+### Notes
+- Full functional parity for the core atom + group field. Variant wrappers are optional enhancements.

package/dist/components/radio/Radio.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { radioRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { RadioProps } from "./types.js";
+
+  let {
+    checked = $bindable(false),
+    onchange,
+    oncheckedchange,
+    class: className,
+    ...coreProps
+  }: RadioProps = $props();
+
+  const kit = $derived(radioRecipe({ ...coreProps, checked }));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }): void {
+    checked = e.currentTarget.checked;
+    onchange?.(e);
+    oncheckedchange?.(e.currentTarget.checked);
+  }
+</script>
+
+<input
+  type="radio"
+  class={mergedClass}
+  id={kit.a11y.id}
+  name={kit.a11y.name}
+  value={kit.a11y.value}
+  disabled={kit.a11y.disabled === true}
+  required={kit.a11y.required === true}
+  aria-label={kit.a11y.ariaLabel}
+  aria-labelledby={kit.a11y.ariaLabelledBy}
+  aria-describedby={kit.a11y.ariaDescribedBy}
+  aria-invalid={kit.a11y.ariaInvalid === true ? true : undefined}
+  {checked}
+  onchange={handleChange}
+/>

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

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

package/dist/components/radio/RadioGroupField.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { buildRadioGroupFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { RadioGroupFieldProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    description,
+    error,
+    ariaDescribedBy,
+    required,
+    disabled,
+    dataAttributes,
+    children,
+    class: className,
+  }: RadioGroupFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-radio-group-${uniqueId}`);
+
+  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(
+    buildRadioGroupFieldA11yIds({
+      id: fieldId,
+      hasDescription,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
+  );
+
+  const wrapperClass = $derived(
+    mergeClass(
+      "mw-radio-group-field",
+      disabled && "mw-radio-group-field--disabled",
+      hasError && "mw-radio-group-field--invalid",
+      className
+    )
+  );
+</script>
+
+<div class={wrapperClass} {...dataAttributes}>
+  <div class="mw-radio-group-field__label" id={a11yIds.labelId}>
+    <p class="mw-p mw-p--sm">{label}</p>
+  </div>
+
+  {#if hasDescription}
+    <div class="mw-radio-group-field__description" id={a11yIds.descriptionId}>
+      <p class="mw-p mw-p--sm">{description}</p>
+    </div>
+  {/if}
+
+  <div
+    role="radiogroup"
+    aria-labelledby={a11yIds.labelId}
+    aria-describedby={a11yIds.describedBy}
+    aria-invalid={hasError ? true : undefined}
+    aria-required={required ? true : undefined}
+    class="mw-radio-group-field__options"
+  >
+    {@render children?.()}
+  </div>
+
+  {#if hasError}
+    <div class="mw-radio-group-field__error" id={a11yIds.errorId} aria-live="polite">
+      <p class="mw-p mw-p--sm">{error}</p>
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/radio/RatingRadioGroup.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import Radio from "./Radio.svelte";
+  import RadioGroupField from "./RadioGroupField.svelte";
+
+  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;
+  }
+
+  let { name, min = 1, max = 5, labelFn = String, value, defaultValue, onchange, disabled, ...fieldProps }: RatingRadioGroupProps = $props();
+
+  let selected = $state(value ?? defaultValue ?? "");
+
+  const options = $derived(
+    Array.from({ length: max - min + 1 }, (_, i) => {
+      const v = min + i;
+      return { value: String(v), label: labelFn(v) };
+    })
+  );
+
+  function handleChange(optValue: string) {
+    selected = optValue;
+    onchange?.(optValue);
+  }
+</script>
+<div data-purpose="rating">
+  <RadioGroupField {...fieldProps}>
+    {#each options as opt (opt.value)}
+      <label class="mw-radio-group-field__option">
+        <Radio
+          {name}
+          value={opt.value}
+          checked={selected === opt.value}
+          disabled={disabled || false}
+          onchange={() => handleChange(opt.value)}
+        />
+        <span class="mw-p mw-p--sm">{opt.label}</span>
+      </label>
+    {/each}
+  </RadioGroupField>
+</div>

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

@@ -0,0 +1,17 @@
+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;
+}
+declare const RatingRadioGroup: import("svelte").Component<RatingRadioGroupProps, {}, "">;
+type RatingRadioGroup = ReturnType<typeof RatingRadioGroup>;
+export default RatingRadioGroup;

package/dist/components/radio/YesNoRadioGroup.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import Radio from "./Radio.svelte";
+  import RadioGroupField from "./RadioGroupField.svelte";
+
+  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;
+  }
+
+  let { name, yesLabel = "Yes", noLabel = "No", value, defaultValue, onchange, disabled, ...fieldProps }: YesNoRadioGroupProps = $props();
+
+  let selected = $state(value ?? defaultValue ?? "");
+
+  const options = $derived([
+    { value: "yes", label: yesLabel },
+    { value: "no", label: noLabel },
+  ]);
+
+  function handleChange(optValue: string) {
+    selected = optValue;
+    onchange?.(optValue);
+  }
+</script>
+<div data-purpose="binary-choice">
+  <RadioGroupField {...fieldProps}>
+    {#each options as opt (opt.value)}
+      <label class="mw-radio-group-field__option">
+        <Radio
+          {name}
+          value={opt.value}
+          checked={selected === opt.value}
+          disabled={disabled || false}
+          onchange={() => handleChange(opt.value)}
+        />
+        <span class="mw-p mw-p--sm">{opt.label}</span>
+      </label>
+    {/each}
+  </RadioGroupField>
+</div>

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

@@ -0,0 +1,16 @@
+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;
+}
+declare const YesNoRadioGroup: import("svelte").Component<YesNoRadioGroupProps, {}, "">;
+type YesNoRadioGroup = ReturnType<typeof YesNoRadioGroup>;
+export default YesNoRadioGroup;

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

@@ -0,0 +1,3 @@
+export { default as Radio } from "./Radio.svelte";
+export { default as RadioGroupField } from "./RadioGroupField.svelte";
+export type { RadioProps, RadioGroupFieldProps } from "./types.js";

package/dist/components/radio/index.js

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

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

@@ -0,0 +1,22 @@
+import type { RadioOptions } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface RadioProps extends RadioOptions {
+    checked?: boolean;
+    onchange?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    oncheckedchange?: (checked: boolean) => void;
+    class?: string;
+}
+export interface RadioGroupFieldProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    ariaDescribedBy?: string;
+    required?: boolean;
+    disabled?: boolean;
+    dataAttributes?: Record<string, string>;
+    children?: Snippet;
+    class?: string;
+}

package/dist/components/radio/types.js

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

package/dist/components/skeleton/README.md

@@ -0,0 +1,16 @@
+# Skeleton — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- Full parity with React/Vue
+- `createSkeletonRecipe` integration
+- All variants: text, circular, rectangular
+- All animations: pulse, wave, none
+- Custom width, height, radius
+- CSS vars for dimensions
+- Accessibility: aria-hidden or role="status" with aria-label
+- Data attributes
+
+### Missing ❌
+- None — full parity.

package/dist/components/skeleton/Skeleton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { createSkeletonRecipe } from "@marwes-ui/core";
+  import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { SkeletonProps } from "./types.js";
+
+  let {
+    class: className,
+    style,
+    dataAttributes,
+    ...options
+  }: SkeletonProps = $props();
+
+  const kit = $derived(createSkeletonRecipe(options));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+</script>
+
+<span
+  class={mergedClass}
+  style={mergedStyle}
+  id={kit.a11y.id}
+  role={kit.a11y.role}
+  aria-hidden={kit.a11y.ariaHidden ? "true" : undefined}
+  aria-label={kit.a11y.ariaLabel}
+  aria-live={kit.a11y.ariaLive}
+  {...kit.dataAttributes}
+  {...dataAttributes}
+></span>

package/dist/components/skeleton/Skeleton.svelte.d.ts

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

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

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

package/dist/components/skeleton/index.js

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

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

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

package/dist/components/skeleton/types.js

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

package/dist/components/slider/BrightnessSlider.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import SliderField from "./SliderField.svelte";
+  import type { SliderFieldProps, SliderProps } from "./types.js";
+
+  interface BrightnessSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
+    label?: string;
+    slider?: Omit<SliderProps, "value">;
+    orientation?: SliderProps["orientation"];
+    minValueLabel?: string;
+    maxValueLabel?: string;
+  }
+
+  let {
+    label = "Brightness",
+    slider,
+    orientation,
+    minValueLabel = "0",
+    maxValueLabel = "100",
+    dataAttributes,
+    ...rest
+  }: BrightnessSliderProps = $props();
+</script>
+
+<SliderField
+  {...rest}
+  {label}
+  {minValueLabel}
+  {maxValueLabel}
+  slider={{ min: 0, max: 100, step: 1, showTooltip: true, ...(orientation !== undefined ? { orientation } : {}), ...slider }}
+  dataAttributes={{ ...dataAttributes, "data-purpose": "brightness" }}
+/>