@marwes-ui/svelte 1.3.0

package/dist/components/accordion/AccordionField.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { buildAccordionFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Accordion from "./Accordion.svelte";
+  import type { AccordionFieldItem, AccordionFieldProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    description,
+    error,
+    items,
+    openItems: controlledOpen,
+    defaultOpenItems,
+    onopenitemschange,
+    multiple = true,
+    ariaDescribedBy,
+    class: className,
+  }: AccordionFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-accordion-field-${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(
+    buildAccordionFieldA11yIds({ id: fieldId, hasDescription, hasError, externalDescribedBy: ariaDescribedBy })
+  );
+
+  let internalOpen = $state<string[]>(defaultOpenItems ?? []);
+  const activeOpen = $derived(controlledOpen ?? internalOpen);
+
+  function toggleItem(value: string): void {
+    let next: string[];
+    if (activeOpen.includes(value)) {
+      next = activeOpen.filter((v) => v !== value);
+    } else {
+      next = multiple ? [...activeOpen, value] : [value];
+    }
+    if (controlledOpen === undefined) {
+      internalOpen = next;
+    }
+    onopenitemschange?.(next);
+  }
+
+  const wrapperClass = $derived(mergeClass("mw-accordion-field", className));
+</script>
+
+<div
+  class={wrapperClass}
+  role="group"
+  aria-labelledby={a11yIds.labelId}
+  aria-describedby={a11yIds.describedBy}
+  aria-invalid={hasError ? true : undefined}
+>
+  <div class="mw-accordion-field__label" id={a11yIds.labelId}>
+    <p class="mw-p mw-p--md">{label}</p>
+  </div>
+
+  {#if hasDescription && !hasError}
+    <div class="mw-accordion-field__description" id={a11yIds.descriptionId}>
+      <p class="mw-p mw-p--sm">{description}</p>
+    </div>
+  {/if}
+
+  <div class="mw-accordion-field__items">
+    {#each items as item}
+      <Accordion
+        id={`${fieldId}-${item.value}`}
+        title={item.title}
+        open={activeOpen.includes(item.value)}
+        disabled={item.disabled ?? false}
+        ontoggle={() => toggleItem(item.value)}
+      >
+        {item.content}
+      </Accordion>
+    {/each}
+  </div>
+
+  {#if hasError}
+    <div class="mw-accordion-field__error" id={a11yIds.errorId} aria-live="polite">
+      <p class="mw-p mw-p--sm">{error}</p>
+    </div>
+  {/if}
+</div>

package/dist/components/accordion/AccordionField.svelte.d.ts

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

package/dist/components/accordion/FAQAccordion.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import AccordionField from "./AccordionField.svelte";
+
+  interface FAQAccordionProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    items: Array<{ value: string; title: string; content: string; disabled?: boolean }>;
+    openItems?: string[];
+    defaultOpenItems?: string[];
+    onopenitemschange?: (items: string[]) => void;
+    ariaDescribedBy?: string;
+    class?: string;
+  }
+
+  let props: FAQAccordionProps = $props();
+</script>
+<div data-purpose="faq">
+  <AccordionField {...props} multiple={false} />
+</div>

package/dist/components/accordion/FAQAccordion.svelte.d.ts

@@ -0,0 +1,20 @@
+interface FAQAccordionProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    items: Array<{
+        value: string;
+        title: string;
+        content: string;
+        disabled?: boolean;
+    }>;
+    openItems?: string[];
+    defaultOpenItems?: string[];
+    onopenitemschange?: (items: string[]) => void;
+    ariaDescribedBy?: string;
+    class?: string;
+}
+declare const FAQAccordion: import("svelte").Component<FAQAccordionProps, {}, "">;
+type FAQAccordion = ReturnType<typeof FAQAccordion>;
+export default FAQAccordion;

package/dist/components/accordion/README.md

@@ -0,0 +1,19 @@
+# Accordion — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `createAccordionRecipe` integration
+- Open/closed state with `ontoggle` callback
+- Disabled state
+- Proper aria wiring: aria-expanded, aria-controls, aria-labelledby
+- Trigger + panel compound structure
+- Generated IDs via `$props.id()`
+- Icon placeholder for expand/collapse indicator
+
+### Missing ❌
+- **`AccordionField`** molecule (wraps accordion with label/description)
+- **Purpose variants**: React/Vue have some accordion variants
+
+### Notes
+- The base accordion is fully functional. `AccordionField` adds a thin label/description wrapper around a group of accordions.

package/dist/components/accordion/SectionsAccordion.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import AccordionField from "./AccordionField.svelte";
+
+  interface SectionsAccordionProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    items: Array<{ value: string; title: string; content: string; disabled?: boolean }>;
+    openItems?: string[];
+    defaultOpenItems?: string[];
+    onopenitemschange?: (items: string[]) => void;
+    multiple?: boolean;
+    ariaDescribedBy?: string;
+    class?: string;
+  }
+
+  let props: SectionsAccordionProps = $props();
+</script>
+<div data-purpose="sections">
+  <AccordionField {...props} />
+</div>

package/dist/components/accordion/SectionsAccordion.svelte.d.ts

@@ -0,0 +1,21 @@
+interface SectionsAccordionProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    items: Array<{
+        value: string;
+        title: string;
+        content: string;
+        disabled?: boolean;
+    }>;
+    openItems?: string[];
+    defaultOpenItems?: string[];
+    onopenitemschange?: (items: string[]) => void;
+    multiple?: boolean;
+    ariaDescribedBy?: string;
+    class?: string;
+}
+declare const SectionsAccordion: import("svelte").Component<SectionsAccordionProps, {}, "">;
+type SectionsAccordion = ReturnType<typeof SectionsAccordion>;
+export default SectionsAccordion;

package/dist/components/accordion/SettingsAccordion.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import AccordionField from "./AccordionField.svelte";
+
+  interface SettingsAccordionProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    items: Array<{ value: string; title: string; content: string; disabled?: boolean }>;
+    openItems?: string[];
+    defaultOpenItems?: string[];
+    onopenitemschange?: (items: string[]) => void;
+    ariaDescribedBy?: string;
+    class?: string;
+  }
+
+  let props: SettingsAccordionProps = $props();
+</script>
+<div data-purpose="settings">
+  <AccordionField {...props} multiple={true} />
+</div>

package/dist/components/accordion/SettingsAccordion.svelte.d.ts

@@ -0,0 +1,20 @@
+interface SettingsAccordionProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    items: Array<{
+        value: string;
+        title: string;
+        content: string;
+        disabled?: boolean;
+    }>;
+    openItems?: string[];
+    defaultOpenItems?: string[];
+    onopenitemschange?: (items: string[]) => void;
+    ariaDescribedBy?: string;
+    class?: string;
+}
+declare const SettingsAccordion: import("svelte").Component<SettingsAccordionProps, {}, "">;
+type SettingsAccordion = ReturnType<typeof SettingsAccordion>;
+export default SettingsAccordion;

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

@@ -0,0 +1,2 @@
+export { default as Accordion } from "./Accordion.svelte";
+export type { AccordionProps, AccordionFieldItem, AccordionFieldProps } from "./types.js";

package/dist/components/accordion/index.js

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

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

@@ -0,0 +1,28 @@
+import type { AccordionOptions } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface AccordionProps extends Partial<AccordionOptions> {
+    title: string;
+    children?: Snippet;
+    class?: string;
+    ontoggle?: () => void;
+}
+export interface AccordionFieldItem {
+    value: string;
+    title: string;
+    content: string;
+    disabled?: boolean;
+}
+export interface AccordionFieldProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    items: AccordionFieldItem[];
+    openItems?: string[];
+    defaultOpenItems?: string[];
+    onopenitemschange?: (items: string[]) => void;
+    multiple?: boolean;
+    ariaDescribedBy?: string;
+    class?: string;
+    disabled?: boolean;
+}

package/dist/components/accordion/types.js

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

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { createAvatarRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Icon from "../icon/Icon.svelte";
+  import type { AvatarProps } from "./types.js";
+
+  let {
+    class: className,
+    style,
+    dataAttributes,
+    ...options
+  }: AvatarProps = $props();
+
+  const kit = $derived(createAvatarRecipe(options));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const isDecorative = $derived(kit.a11y.ariaHidden === true);
+  const isOuterAccessible = $derived(kit.a11y.role === "img");
+</script>
+
+<span
+  class={mergedClass}
+  {style}
+  role={kit.a11y.role}
+  aria-hidden={isDecorative ? "true" : undefined}
+  aria-label={kit.a11y.ariaLabel}
+  {...kit.dataAttributes}
+  {...dataAttributes}
+>
+  {#if kit.content.type === "image"}
+    <img
+      class="mw-avatar__image"
+      src={kit.content.src}
+      alt={isDecorative ? "" : (kit.content.alt ?? "")}
+    />
+  {:else if kit.content.type === "initials"}
+    <span
+      aria-hidden={isOuterAccessible ? "true" : undefined}
+      class="mw-avatar__initials"
+    >
+      {kit.content.initials}
+    </span>
+  {:else}
+    <Icon name={kit.content.iconName ?? "user"} class="mw-avatar__icon" decorative />
+  {/if}
+</span>

package/dist/components/avatar/Avatar.svelte.d.ts

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

package/dist/components/avatar/AvatarBadge.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { createAvatarRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Avatar from "./Avatar.svelte";
+  import type { AvatarProps } from "./types.js";
+
+  interface AvatarBadgeProps extends AvatarProps {
+    statusLabel?: string;
+  }
+
+  let {
+    class: className,
+    statusLabel = "Online",
+    decorative,
+    dataAttributes,
+    ...avatarProps
+  }: AvatarBadgeProps = $props();
+
+  const kit = $derived(createAvatarRecipe(avatarProps));
+  const resolvedSize = $derived(kit.dataAttributes["data-size"]);
+
+  const accessibleLabel = $derived.by(() => {
+    if (kit.a11y.ariaHidden) return undefined;
+    if (kit.content.type === "image") {
+      return kit.content.alt ? `${kit.content.alt}, ${statusLabel}` : statusLabel;
+    }
+    return kit.a11y.ariaLabel ? `${kit.a11y.ariaLabel}, ${statusLabel}` : statusLabel;
+  });
+
+  const mergedClass = $derived(
+    mergeClass("mw-avatar-badge", `mw-avatar-badge--${resolvedSize}`, className)
+  );
+</script>
+
+<span
+  class={mergedClass}
+  data-component="avatar-badge"
+  data-size={resolvedSize}
+  data-status="online"
+  role={decorative ? undefined : "img"}
+  aria-hidden={decorative ? "true" : undefined}
+  aria-label={decorative ? undefined : accessibleLabel}
+  {...dataAttributes}
+>
+  <Avatar {...avatarProps} decorative />
+  <span aria-hidden="true" class="mw-avatar-badge__indicator"></span>
+</span>

package/dist/components/avatar/AvatarBadge.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { AvatarProps } from "./types.js";
+interface AvatarBadgeProps extends AvatarProps {
+    statusLabel?: string;
+}
+declare const AvatarBadge: import("svelte").Component<AvatarBadgeProps, {}, "">;
+type AvatarBadge = ReturnType<typeof AvatarBadge>;
+export default AvatarBadge;

package/dist/components/avatar/AvatarGroup.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Avatar from "./Avatar.svelte";
+  import type { AvatarProps } from "./types.js";
+
+  interface AvatarGroupItem extends Omit<AvatarProps, "size" | "class" | "style"> {
+    id?: string;
+  }
+
+  interface AvatarGroupProps {
+    items: AvatarGroupItem[];
+    overflowCount?: number;
+    overflowLabel?: string;
+    ariaLabel?: string;
+    dataAttributes?: Record<string, string>;
+    class?: string;
+  }
+
+  let {
+    items,
+    overflowCount,
+    overflowLabel,
+    ariaLabel = "Avatar group",
+    dataAttributes,
+    class: className,
+  }: AvatarGroupProps = $props();
+
+  const mergedClass = $derived(mergeClass("mw-avatar-group", className));
+  const shouldRenderOverflow = $derived(overflowCount !== undefined && overflowCount > 0);
+  const resolvedOverflowLabel = $derived(overflowLabel ?? `${overflowCount} more people`);
+</script>
+
+<fieldset
+  class={mergedClass}
+  data-component="avatar-group"
+  aria-label={ariaLabel}
+  {...dataAttributes}
+>
+  {#each items as item, i}
+    <span class="mw-avatar-group__item">
+      <Avatar {...item} size="medium" />
+    </span>
+  {/each}
+
+  {#if shouldRenderOverflow}
+    <span aria-label={resolvedOverflowLabel} class="mw-avatar-group__counter" role="img">
+      +{overflowCount}
+    </span>
+  {/if}
+</fieldset>

package/dist/components/avatar/AvatarGroup.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { AvatarProps } from "./types.js";
+interface AvatarGroupItem extends Omit<AvatarProps, "size" | "class" | "style"> {
+    id?: string;
+}
+interface AvatarGroupProps {
+    items: AvatarGroupItem[];
+    overflowCount?: number;
+    overflowLabel?: string;
+    ariaLabel?: string;
+    dataAttributes?: Record<string, string>;
+    class?: string;
+}
+declare const AvatarGroup: import("svelte").Component<AvatarGroupProps, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/avatar/PresenceAvatar.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import AvatarBadge from "./AvatarBadge.svelte";
+  import type { AvatarProps } from "./types.js";
+
+  interface PresenceAvatarProps extends AvatarProps {
+    statusLabel?: string;
+  }
+
+  let { dataAttributes, ...props }: PresenceAvatarProps = $props();
+</script>
+<AvatarBadge {...props} dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("presence") }} />

package/dist/components/avatar/PresenceAvatar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { AvatarProps } from "./types.js";
+interface PresenceAvatarProps extends AvatarProps {
+    statusLabel?: string;
+}
+declare const PresenceAvatar: import("svelte").Component<PresenceAvatarProps, {}, "">;
+type PresenceAvatar = ReturnType<typeof PresenceAvatar>;
+export default PresenceAvatar;

package/dist/components/avatar/ProfileAvatar.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Avatar from "./Avatar.svelte";
+  import type { AvatarProps } from "./types.js";
+  let { dataAttributes, ...props }: AvatarProps = $props();
+</script>
+<Avatar {...props} dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("profile") }} />

package/dist/components/avatar/ProfileAvatar.svelte.d.ts

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

package/dist/components/avatar/README.md

@@ -0,0 +1,19 @@
+# Avatar — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `createAvatarRecipe` integration
+- All types: icon, initials, image (auto-detected)
+- All sizes: small, medium, large
+- Proper content rendering per type (img, span with initials, Icon)
+- Accessibility: role="img", aria-hidden for decorative, aria-label
+- Initials normalization (max 2 chars, uppercase)
+
+### Missing ❌
+- **`AvatarBadge`** component (small indicator overlaid on avatar)
+- **`AvatarGroup`** component (stacked avatar row with overlap)
+- **Purpose variants**
+
+### Notes
+- `AvatarBadge` and `AvatarGroup` are layout/positioning components. Medium complexity. They rely on CSS positioning rather than core recipes.

package/dist/components/avatar/TeamAvatarGroup.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import AvatarGroup from "./AvatarGroup.svelte";
+  import type { AvatarProps } from "./types.js";
+
+  interface AvatarGroupItem extends Omit<AvatarProps, "size" | "class" | "style"> {
+    id?: string;
+  }
+
+  interface TeamAvatarGroupProps {
+    items: AvatarGroupItem[];
+    overflowCount?: number;
+    overflowLabel?: string;
+    ariaLabel?: string;
+    dataAttributes?: Record<string, string>;
+    class?: string;
+  }
+
+  let { dataAttributes, ...props }: TeamAvatarGroupProps = $props();
+</script>
+<AvatarGroup {...props} dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("team") }} />

package/dist/components/avatar/TeamAvatarGroup.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { AvatarProps } from "./types.js";
+interface AvatarGroupItem extends Omit<AvatarProps, "size" | "class" | "style"> {
+    id?: string;
+}
+interface TeamAvatarGroupProps {
+    items: AvatarGroupItem[];
+    overflowCount?: number;
+    overflowLabel?: string;
+    ariaLabel?: string;
+    dataAttributes?: Record<string, string>;
+    class?: string;
+}
+declare const TeamAvatarGroup: import("svelte").Component<TeamAvatarGroupProps, {}, "">;
+type TeamAvatarGroup = ReturnType<typeof TeamAvatarGroup>;
+export default TeamAvatarGroup;

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

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

package/dist/components/avatar/index.js

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

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

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

package/dist/components/avatar/types.js

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

package/dist/components/badge/Badge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { createBadgeRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { BadgeProps } from "./types.js";
+
+  let {
+    children,
+    class: className,
+    id,
+    dataAttributes,
+    ...coreProps
+  }: BadgeProps = $props();
+
+  const kit = $derived(createBadgeRecipe(coreProps));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+</script>
+
+<span
+  {id}
+  class={mergedClass}
+  aria-label={kit.a11y.ariaLabel}
+  {...kit.dataAttributes}
+  {...dataAttributes}
+>
+  {@render children?.()}
+</span>

package/dist/components/badge/Badge.svelte.d.ts

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

package/dist/components/badge/BadgeGroup.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { BadgeGroupProps } from "./types.js";
+
+  let {
+    label,
+    children,
+    class: className,
+    id: userProvidedId,
+  }: BadgeGroupProps = $props();
+
+  const uniqueId = $props.id();
+  const groupId = $derived(userProvidedId ?? `mw-badge-group-${uniqueId}`);
+  const labelId = $derived(`${groupId}-label`);
+  const mergedClass = $derived(mergeClass("mw-badge-group", className));
+</script>
+
+<fieldset class={mergedClass} aria-labelledby={labelId}>
+  <legend class="mw-badge-group__label" id={labelId}>
+    <p class="mw-p mw-p--sm">{label}</p>
+  </legend>
+  <div class="mw-badge-group__items">
+    {@render children?.()}
+  </div>
+</fieldset>

package/dist/components/badge/BadgeGroup.svelte.d.ts

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

package/dist/components/badge/NotificationBadge.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Badge from "./Badge.svelte";
+  import type { BadgeProps } from "./types.js";
+  let { dataAttributes, ...props }: BadgeProps = $props();
+</script>
+<Badge {...props} dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("notification") }} />

package/dist/components/badge/NotificationBadge.svelte.d.ts

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