@marwes-ui/svelte 1.3.0

package/dist/components/card/Card.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { createCardRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { CardProps } from "./types.js";
+
+  let {
+    title,
+    children,
+    class: className,
+    id,
+    dataAttributes,
+  }: CardProps = $props();
+
+  const kit = $derived(createCardRecipe(dataAttributes ? { dataAttributes } : {}));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+</script>
+
+<div {id} class={mergedClass} {...kit.dataAttributes}>
+  {#if title}
+    <div class="mw-card__header">
+      <span class="mw-card__title">
+        {#if typeof title === "string"}
+          {title}
+        {:else}
+          {@render title()}
+        {/if}
+      </span>
+    </div>
+  {/if}
+  <div class="mw-card__body">
+    {@render children?.()}
+  </div>
+</div>

package/dist/components/card/Card.svelte.d.ts

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

package/dist/components/card/ProductCard.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import Card from "./Card.svelte";
+  import type { CardProps } from "./types.js";
+  let { dataAttributes, ...props }: CardProps = $props();
+</script>
+<Card {...props} dataAttributes={{ ...dataAttributes, "data-purpose": "product-card" }} />

package/dist/components/card/ProductCard.svelte.d.ts

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

package/dist/components/card/ProfileCard.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import Card from "./Card.svelte";
+  import type { CardProps } from "./types.js";
+  let { dataAttributes, ...props }: CardProps = $props();
+</script>
+<Card {...props} dataAttributes={{ ...dataAttributes, "data-purpose": "profile-card" }} />

package/dist/components/card/ProfileCard.svelte.d.ts

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

package/dist/components/card/README.md

@@ -0,0 +1,15 @@
+# Card — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `Card` atom with `createCardRecipe`
+- Title (string or snippet) + body content
+- Correct DOM structure: mw-card > mw-card__header > mw-card__title + mw-card__body
+- Class merging, id, data attributes
+
+### Missing ❌
+- **Purpose variant wrappers** (3): `ProductCard`, `ProfileCard`, `StatCard`
+
+### Notes
+- Purpose card variants add pre-configured slot structures and data-purpose attributes. Medium complexity — each needs custom slot/snippet layout.

package/dist/components/card/StatCard.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import Card from "./Card.svelte";
+  import type { CardProps } from "./types.js";
+  let { dataAttributes, ...props }: CardProps = $props();
+</script>
+<Card {...props} dataAttributes={{ ...dataAttributes, "data-purpose": "stat-card" }} />

package/dist/components/card/StatCard.svelte.d.ts

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

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

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

package/dist/components/card/index.js

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

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

@@ -0,0 +1,10 @@
+import type { CardOptions } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface CardProps extends CardOptions {
+    /** Optional title rendered above the body content */
+    title?: Snippet | string;
+    /** Card body content */
+    children?: Snippet;
+    class?: string;
+    id?: string;
+}

package/dist/components/card/types.js

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

package/dist/components/checkbox/Checkbox.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { checkboxRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { CheckboxProps } from "./types.js";
+
+  let {
+    checked = $bindable(),
+    onchange,
+    oncheckedchange,
+    class: className,
+    ariaDescribedBy,
+    ...coreProps
+  }: CheckboxProps = $props();
+
+  const kit = $derived(checkboxRecipe({
+    ...coreProps,
+    ...(checked !== undefined ? { checked } : {}),
+    ...(ariaDescribedBy ? { ariaDescribedBy } : {}),
+  }));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+
+  let inputElement: HTMLInputElement | undefined = $state(undefined);
+
+  $effect(() => {
+    if (inputElement) {
+      inputElement.indeterminate = kit.indeterminate;
+    }
+  });
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }): void {
+    checked = e.currentTarget.checked;
+    onchange?.(e);
+    oncheckedchange?.(e.currentTarget.checked);
+  }
+</script>
+
+<input
+  bind:this={inputElement}
+  type="checkbox"
+  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-checked={kit.a11y.ariaChecked}
+  aria-invalid={kit.a11y.ariaInvalid === true ? true : undefined}
+  checked={kit.checked}
+  defaultChecked={kit.defaultChecked}
+  onchange={handleChange}
+/>

package/dist/components/checkbox/Checkbox.svelte.d.ts

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

package/dist/components/checkbox/CheckboxField.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { buildCheckboxFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Checkbox from "./Checkbox.svelte";
+  import type { CheckboxFieldProps, CheckboxProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    description,
+    error,
+    checkbox = {},
+    ariaDescribedBy,
+    checked = $bindable(false),
+    class: className,
+  }: CheckboxFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-checkbox-${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 invalid = $derived(hasError || checkbox.invalid || false);
+  const disabled = $derived(checkbox.disabled || false);
+
+  const a11yIds = $derived(
+    buildCheckboxFieldA11yIds({
+      id: fieldId,
+      hasDescription,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
+  );
+
+  const wrapperClass = $derived(
+    mergeClass(
+      "mw-checkbox-field",
+      disabled && "mw-checkbox-field--disabled",
+      invalid && "mw-checkbox-field--invalid",
+      className
+    )
+  );
+</script>
+
+<div class={wrapperClass}>
+  <div class="mw-checkbox-field__row">
+    <Checkbox
+      {...checkbox}
+      id={fieldId}
+      {invalid}
+      ariaDescribedBy={a11yIds.describedBy ?? undefined}
+      bind:checked
+    />
+    <label class="mw-checkbox-field__label" for={fieldId}>
+      <p class="mw-p mw-p--md">{label}</p>
+    </label>
+  </div>
+
+  {#if hasDescription}
+    <div class="mw-checkbox-field__description" id={a11yIds.descriptionId}>
+      <p class="mw-p mw-p--sm">{description}</p>
+    </div>
+  {/if}
+
+  {#if hasError}
+    <div class="mw-checkbox-field__error" id={a11yIds.errorId} aria-live="polite">
+      <p class="mw-p mw-p--sm">{error}</p>
+    </div>
+  {/if}
+</div>

package/dist/components/checkbox/CheckboxField.svelte.d.ts

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

package/dist/components/checkbox/CheckboxGroupField.svelte

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

package/dist/components/checkbox/CheckboxGroupField.svelte.d.ts

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

package/dist/components/checkbox/README.md

@@ -0,0 +1,17 @@
+# Checkbox — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `Checkbox` atom with `checkboxRecipe`
+- `bind:checked` support
+- `indeterminate` DOM property applied via `$effect`
+- `oncheckedchange` callback
+- All a11y: aria-label, aria-labelledby, aria-describedby, aria-checked="mixed", aria-invalid
+- `CheckboxField` molecule with label, description, error, `buildCheckboxFieldA11yIds`
+
+### Missing ❌
+- **`CheckboxGroupField`** molecule (groups multiple checkboxes with shared label/error)
+
+### Notes
+- `CheckboxGroupField` is a fieldset-based wrapper around multiple `CheckboxField` items. Same pattern as `RadioGroupField`. Medium complexity.

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

@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as CheckboxField } from "./CheckboxField.svelte";
+export type { CheckboxProps, CheckboxFieldProps, CheckboxGroupFieldProps } from "./types.js";

package/dist/components/checkbox/index.js

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

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

@@ -0,0 +1,30 @@
+import type { CheckboxProps as CoreCheckboxProps } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface CheckboxProps extends Omit<CoreCheckboxProps, "ariaDescribedBy"> {
+    checked?: boolean;
+    onchange?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    oncheckedchange?: (checked: boolean) => void;
+    class?: string;
+    ariaDescribedBy?: string | undefined;
+}
+export interface CheckboxFieldProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    checkbox?: CheckboxProps;
+    ariaDescribedBy?: string;
+    checked?: boolean;
+    class?: string;
+}
+export interface CheckboxGroupFieldProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    ariaDescribedBy?: string;
+    children?: Snippet;
+    class?: string;
+}

package/dist/components/checkbox/types.js

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

package/dist/components/date-picker/DatePicker.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { createDatePickerRecipe } from "@marwes-ui/core";
+  import type { DatePickerOptions } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { DatePickerProps } from "./types.js";
+
+  let {
+    monthLabel,
+    weekdayLabels,
+    weeks,
+    device,
+    previousYearLabel,
+    previousMonthLabel,
+    nextMonthLabel,
+    nextYearLabel,
+    cancelLabel,
+    applyLabel,
+    calendarLabel,
+    dataAttributes,
+    onpreviousyear,
+    onpreviousmonth,
+    onnextmonth,
+    onnextyear,
+    ondayselect,
+    oncancel,
+    onapply,
+    class: className,
+  }: DatePickerProps = $props();
+
+  const recipeOptions = $derived.by((): DatePickerOptions => {
+    const opts: DatePickerOptions = {};
+    if (monthLabel !== undefined) opts.monthLabel = monthLabel;
+    if (weekdayLabels !== undefined) opts.weekdayLabels = weekdayLabels;
+    if (weeks !== undefined) opts.weeks = weeks;
+    if (device !== undefined) opts.device = device;
+    if (previousYearLabel !== undefined) opts.previousYearLabel = previousYearLabel;
+    if (previousMonthLabel !== undefined) opts.previousMonthLabel = previousMonthLabel;
+    if (nextMonthLabel !== undefined) opts.nextMonthLabel = nextMonthLabel;
+    if (nextYearLabel !== undefined) opts.nextYearLabel = nextYearLabel;
+    if (cancelLabel !== undefined) opts.cancelLabel = cancelLabel;
+    if (applyLabel !== undefined) opts.applyLabel = applyLabel;
+    if (calendarLabel !== undefined) opts.calendarLabel = calendarLabel;
+    if (dataAttributes !== undefined) opts.dataAttributes = dataAttributes;
+    return opts;
+  });
+
+  const kit = $derived(createDatePickerRecipe(recipeOptions));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+</script>
+
+<section class={mergedClass} aria-label={kit.labels.calendar} {...kit.dataAttributes}>
+  <header class={kit.slots.headerClassName}>
+    <div class={kit.slots.navGroupClassName}>
+      <button type="button" class={kit.slots.navButtonClassName} aria-label={kit.labels.previousYear} onclick={onpreviousyear}>«</button>
+      <button type="button" class={kit.slots.navButtonClassName} aria-label={kit.labels.previousMonth} onclick={onpreviousmonth}>‹</button>
+    </div>
+    <div class={kit.slots.monthLabelClassName}>{kit.monthLabel}</div>
+    <div class={kit.slots.navGroupClassName}>
+      <button type="button" class={kit.slots.navButtonClassName} aria-label={kit.labels.nextMonth} onclick={onnextmonth}>›</button>
+      <button type="button" class={kit.slots.navButtonClassName} aria-label={kit.labels.nextYear} onclick={onnextyear}>»</button>
+    </div>
+  </header>
+
+  <table class={kit.slots.gridClassName} aria-label={kit.monthLabel}>
+    <thead>
+      <tr class="mw-date-picker__weekdays">
+        {#each kit.weekdayLabels as weekday (weekday)}
+          <th class={kit.slots.weekdayClassName} scope="col">{weekday}</th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each kit.weeks as week, weekIndex}
+        <tr class={kit.slots.weekClassName}>
+          {#each week as day, dayIndex}
+            {@const dayKit = kit.dayKits[weekIndex]?.[dayIndex]}
+            {#if dayKit}
+              <td class={kit.slots.cellClassName}>
+                <button
+                  type="button"
+                  class={dayKit.className}
+                  aria-label={dayKit.ariaLabel}
+                  aria-pressed={dayKit.selected ? "true" : undefined}
+                  disabled={dayKit.disabled}
+                  onclick={() => ondayselect?.(day)}
+                  {...dayKit.dataAttributes}
+                >
+                  {day.label}
+                </button>
+              </td>
+            {/if}
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+
+  <footer class={kit.slots.footerClassName}>
+    <button type="button" class={kit.slots.footerButtonClassName} onclick={oncancel}>
+      {kit.labels.cancel}
+    </button>
+    {#if kit.labels.apply}
+      <button type="button" class="{kit.slots.footerButtonClassName} mw-date-picker__footer-button--primary" onclick={onapply}>
+        {kit.labels.apply}
+      </button>
+    {/if}
+  </footer>
+</section>

package/dist/components/date-picker/DatePicker.svelte.d.ts

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

package/dist/components/date-picker/README.md

@@ -0,0 +1,17 @@
+# DatePicker — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `DatePicker` atom with `createDatePickerRecipe`
+- Month grid with weekday headers and day buttons
+- Navigation controls: previous/next month/year
+- Footer with cancel/apply buttons
+- Day states: default, hover, selected, range, range-hover, disabled, null
+- `aria-label`, `aria-pressed` on selected days, `disabled` on empty/disabled days
+- Device variants: desktop, mobile
+- All label props for customization
+
+### Notes
+- Date parsing, formatting, popover state, and form orchestration are intentionally outside the component scope.
+- The consumer provides `weeks`, `weekdayLabels`, and `monthLabel` data — the component is a pure rendering surface.

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { DatePickerDay, DatePickerOptions } from "@marwes-ui/core";
+export interface DatePickerProps extends DatePickerOptions {
+    weeks?: DatePickerDay[][];
+    weekdayLabels?: string[];
+    onpreviousyear?: () => void;
+    onpreviousmonth?: () => void;
+    onnextmonth?: () => void;
+    onnextyear?: () => void;
+    ondayselect?: (day: DatePickerDay) => void;
+    oncancel?: () => void;
+    onapply?: () => void;
+    class?: string;
+}

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

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

package/dist/components/dialog/ConfirmDialog.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import CancelButton from "../button/CancelButton.svelte";
+  import ConfirmButton from "../button/ConfirmButton.svelte";
+  import DialogModal from "./DialogModal.svelte";
+  import type { ConfirmDialogProps } from "./types.js";
+
+  let {
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    onconfirm,
+    oncancel,
+    dataAttributes,
+    ...dialogProps
+  }: ConfirmDialogProps = $props();
+
+  const mergedDataAttrs = $derived({
+    ...dataAttributes,
+    ...createPurposeSemanticAttributes("confirm-dialog"),
+  });
+</script>
+
+<DialogModal {...dialogProps} dataAttributes={mergedDataAttrs}>
+  {#snippet footer({ close })}
+    <CancelButton onclick={() => { oncancel?.(); close(); }}>{cancelLabel}</CancelButton>
+    <ConfirmButton onclick={() => { onconfirm?.(); close(); }}>{confirmLabel}</ConfirmButton>
+  {/snippet}
+</DialogModal>

package/dist/components/dialog/ConfirmDialog.svelte.d.ts

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

package/dist/components/dialog/DestructiveDialog.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import CancelButton from "../button/CancelButton.svelte";
+  import DestructiveButton from "../button/DestructiveButton.svelte";
+  import DialogModal from "./DialogModal.svelte";
+  import type { DestructiveDialogProps } from "./types.js";
+
+  let {
+    confirmLabel = "Delete",
+    cancelLabel = "Cancel",
+    onconfirm,
+    oncancel,
+    dataAttributes,
+    ...dialogProps
+  }: DestructiveDialogProps = $props();
+
+  const mergedDataAttrs = $derived({
+    ...dataAttributes,
+    ...createPurposeSemanticAttributes("destructive-dialog"),
+  });
+</script>
+
+<DialogModal {...dialogProps} dataAttributes={mergedDataAttrs}>
+  {#snippet footer({ close })}
+    <CancelButton onclick={() => { oncancel?.(); close(); }}>{cancelLabel}</CancelButton>
+    <DestructiveButton onclick={() => { onconfirm?.(); close(); }}>{confirmLabel}</DestructiveButton>
+  {/snippet}
+</DialogModal>

package/dist/components/dialog/DestructiveDialog.svelte.d.ts

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