@marwes-ui/svelte 1.3.0

package/dist/components/dialog/Dialog.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { IconName, createDialogRecipe } from "@marwes-ui/core";
+  import type { DialogOptions } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Icon from "../icon/Icon.svelte";
+  import type { DialogProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    title,
+    description,
+    children,
+    footer,
+    onclose,
+    class: className,
+    dataAttributes,
+    size,
+    showFooter,
+    dismissible,
+    modal,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+  }: DialogProps = $props();
+
+  const uniqueId = $props.id();
+  const dialogId = $derived(userProvidedId ?? `mw-dialog-${uniqueId}`);
+  const titleId = $derived(`${dialogId}-title`);
+  const descriptionId = $derived(`${dialogId}-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 dialogOptions = $derived.by((): DialogOptions => {
+    const opts: DialogOptions = {
+      showFooter: hasFooter,
+      dismissible: isDismissible,
+    };
+    if (modal !== undefined) opts.modal = modal;
+    if (dataAttributes !== undefined) opts.dataAttributes = dataAttributes;
+    if (size !== undefined) opts.size = size;
+    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(createDialogRecipe(dialogOptions));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+
+  function handleClose(): void {
+    onclose?.();
+  }
+</script>
+
+<section
+  id={dialogId}
+  class={mergedClass}
+  role={kit.a11y.role}
+  aria-modal={kit.a11y.ariaModal ? "true" : undefined}
+  aria-label={kit.a11y.ariaLabel}
+  aria-labelledby={kit.a11y.ariaLabelledBy}
+  aria-describedby={kit.a11y.ariaDescribedBy}
+  tabindex={-1}
+  {...kit.dataAttributes}
+>
+  {#if hasTitle || kit.showCloseButton}
+    <header class="mw-dialog__header">
+      {#if hasTitle}
+        <div class="mw-dialog__heading-group">
+          <h2 class="mw-dialog__title" id={titleId}>{title}</h2>
+        </div>
+      {:else}
+        <span class="mw-dialog__spacer" aria-hidden="true"></span>
+      {/if}
+
+      {#if kit.showCloseButton && onclose}
+        <button
+          type="button"
+          class="mw-dialog__close"
+          aria-label="Close dialog"
+          onclick={handleClose}
+        >
+          <Icon name={IconName.X} decorative />
+        </button>
+      {/if}
+    </header>
+    <div class="mw-dialog__header-divider" aria-hidden="true"></div>
+  {/if}
+
+  <div class="mw-dialog__content">
+    {#if hasDescription}
+      <p class="mw-dialog__description" id={descriptionId}>{description}</p>
+    {/if}
+    {@render children?.()}
+  </div>
+
+  {#if hasFooter}
+    <div class="mw-dialog__footer-divider" aria-hidden="true"></div>
+    <footer class="mw-dialog__footer">
+      {@render footer?.({ close: handleClose })}
+    </footer>
+  {/if}
+</section>

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

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

package/dist/components/dialog/DialogModal.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Dialog from "./Dialog.svelte";
+  import type { DialogModalProps } from "./types.js";
+
+  let {
+    open = $bindable(false),
+    closeOnEscape = true,
+    closeOnScrimClick = true,
+    restoreFocus = true,
+    onopenchange,
+    overlayClass,
+    footer,
+    ...dialogProps
+  }: DialogModalProps = $props();
+
+  let overlayElement: HTMLDivElement | undefined = $state(undefined);
+  let surfaceElement: HTMLDivElement | undefined = $state(undefined);
+  let previouslyFocused: HTMLElement | null = $state(null);
+
+  const mergedOverlayClass = $derived(mergeClass("mw-dialog-modal", overlayClass));
+
+  function close(): void {
+    if (!open) return;
+    onopenchange?.(false);
+    if (!onopenchange) {
+      open = false;
+    }
+  }
+
+  function getFocusableElements(container: HTMLElement | null): HTMLElement[] {
+    if (!container) return [];
+    return Array.from(
+      container.querySelectorAll<HTMLElement>(
+        "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])"
+      )
+    ).filter(el => !el.hasAttribute("hidden") && el.getAttribute("aria-hidden") !== "true");
+  }
+
+  $effect(() => {
+    if (open && typeof document !== "undefined") {
+      const previousOverflow = document.body.style.overflow;
+      previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      document.body.style.overflow = "hidden";
+
+      // Focus first focusable element
+      requestAnimationFrame(() => {
+        const dialogEl = overlayElement?.querySelector<HTMLElement>(".mw-dialog") ?? null;
+        const focusable = getFocusableElements(dialogEl);
+        const firstEl = focusable[0];
+        if (firstEl) {
+          firstEl.focus();
+        } else {
+          dialogEl?.focus();
+        }
+      });
+
+      return () => {
+        document.body.style.overflow = previousOverflow;
+        if (restoreFocus && previouslyFocused) {
+          previouslyFocused.focus();
+        }
+      };
+    }
+  });
+
+  function handleKeyDown(e: KeyboardEvent): void {
+    if (e.key === "Escape" && closeOnEscape) {
+      e.preventDefault();
+      e.stopPropagation();
+      close();
+      return;
+    }
+
+    if (e.key !== "Tab") return;
+
+    const dialogEl = overlayElement?.querySelector<HTMLElement>(".mw-dialog") ?? null;
+    const focusable = getFocusableElements(dialogEl);
+    if (focusable.length === 0) {
+      e.preventDefault();
+      dialogEl?.focus();
+      return;
+    }
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+
+    if (e.shiftKey && active === first) {
+      e.preventDefault();
+      last?.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first?.focus();
+    }
+  }
+
+  function handleScrimClick(e: MouseEvent): void {
+    if (!closeOnScrimClick) return;
+    const target = e.target;
+    if (!(target instanceof Node)) return;
+    if (surfaceElement?.contains(target)) return;
+    close();
+  }
+</script>
+
+{#if open}
+  <div
+    bind:this={overlayElement}
+    class={mergedOverlayClass}
+    onclick={handleScrimClick}
+    onkeydown={handleKeyDown}
+    role="presentation"
+  >
+    <div class="mw-dialog-modal__scrim" aria-hidden="true"></div>
+    <div bind:this={surfaceElement} class="mw-dialog-modal__surface">
+      <Dialog {...dialogProps} modal onclose={close} {...(footer ? { footer } : {})} />
+    </div>
+  </div>
+{/if}

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

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

package/dist/components/dialog/InfoDialog.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import ConfirmButton from "../button/ConfirmButton.svelte";
+  import DialogModal from "./DialogModal.svelte";
+  import type { InfoDialogProps } from "./types.js";
+
+  let {
+    acknowledgeLabel = "Okay",
+    onacknowledge,
+    dataAttributes,
+    ...dialogProps
+  }: InfoDialogProps = $props();
+
+  const mergedDataAttrs = $derived({
+    ...dataAttributes,
+    ...createPurposeSemanticAttributes("info-dialog"),
+  });
+</script>
+
+<DialogModal {...dialogProps} dataAttributes={mergedDataAttrs}>
+  {#snippet footer({ close })}
+    <ConfirmButton onclick={() => { onacknowledge?.(); close(); }}>{acknowledgeLabel}</ConfirmButton>
+  {/snippet}
+</DialogModal>

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

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

package/dist/components/dialog/README.md

@@ -0,0 +1,23 @@
+# Dialog — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `Dialog` atom with `createDialogRecipe`
+- Header with title, close button (via `IconName.X`)
+- Content area with optional description
+- Footer via Svelte snippet: `{#snippet footer({ close })}...{/snippet}`
+- `aria-labelledby` wired to title, `aria-describedby` wired to description
+- `aria-label` fallback when no visible title
+- `aria-modal` only when `modal` is explicitly true
+- `DialogModal` molecule with scrim, focus trap, escape/scrim-click dismiss, focus restoration
+- `ConfirmDialog`, `DestructiveDialog`, `InfoDialog` purpose wrappers with `createPurposeSemanticAttributes`
+- `bind:open` two-way binding on modal components
+
+### Svelte-specific
+- Footer uses Svelte snippets instead of React render props: `{#snippet footer({ close })}` vs `footer={({ close }) => ...}`
+- No `portalTarget` prop — Svelte renders modals in-place (no React portal equivalent needed)
+
+### Notes
+- All purpose dialogs set correct `data-purpose` attributes.
+- Focus management follows the same algorithm: first focusable element, or dialog surface as fallback.

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

@@ -0,0 +1,6 @@
+export { default as Dialog } from "./Dialog.svelte";
+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";

package/dist/components/dialog/index.js

@@ -0,0 +1,5 @@
+export { default as Dialog } from "./Dialog.svelte";
+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";

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

@@ -0,0 +1,42 @@
+import type { DialogOptions } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface DialogProps extends DialogOptions {
+    id?: string;
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    footer?: Snippet<[{
+        close: () => void;
+    }]>;
+    onclose?: () => void;
+    class?: string;
+    dataAttributes?: Record<string, string>;
+}
+export interface DialogModalProps extends Omit<DialogProps, "footer" | "onclose"> {
+    open?: boolean;
+    closeOnEscape?: boolean;
+    closeOnScrimClick?: boolean;
+    restoreFocus?: boolean;
+    footer?: Snippet<[{
+        close: () => void;
+    }]>;
+    onopenchange?: (open: boolean) => void;
+    class?: string;
+    overlayClass?: string;
+}
+export interface ConfirmDialogProps extends Omit<DialogModalProps, "footer"> {
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+}
+export interface DestructiveDialogProps extends Omit<DialogModalProps, "footer"> {
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+}
+export interface InfoDialogProps extends Omit<DialogModalProps, "footer"> {
+    acknowledgeLabel?: string;
+    onacknowledge?: () => void;
+}

package/dist/components/dialog/types.js

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

package/dist/components/divider/Divider.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { createDividerRecipe } from "@marwes-ui/core";
+  import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { DividerProps } from "./types.js";
+
+  let {
+    class: className,
+    style,
+    ...options
+  }: DividerProps = $props();
+
+  const kit = $derived(createDividerRecipe(options));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+</script>
+
+<hr
+  class={mergedClass}
+  style={mergedStyle}
+  id={kit.a11y.id}
+  role={kit.a11y.role}
+  aria-orientation={kit.a11y["aria-orientation"]}
+  {...kit.dataAttributes}
+/>

package/dist/components/divider/Divider.svelte.d.ts

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

package/dist/components/divider/README.md

@@ -0,0 +1,15 @@
+# Divider — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- Full parity with React/Vue
+- `createDividerRecipe` integration
+- All sizes: xxs, xs, sm, md, lg, xl, xxl
+- Orientation: horizontal, vertical
+- Semantic `<hr>` with role="separator" and aria-orientation
+- CSS vars for line thickness and spacing
+- Data attributes, class/style merging
+
+### Missing ❌
+- None — full parity.

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

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

package/dist/components/divider/index.js

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

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

@@ -0,0 +1,5 @@
+import type { DividerOptions } from "@marwes-ui/core";
+export interface DividerProps extends DividerOptions {
+    class?: string;
+    style?: string | undefined;
+}

package/dist/components/divider/types.js

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

package/dist/components/heading/H1.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { headingRecipe } 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 { H1Props } from "./types.js";
+
+  let {
+    children,
+    class: className,
+    style,
+    ...opts
+  }: H1Props = $props();
+
+  const { theme } = useTheme();
+  const kit = $derived(headingRecipe({ ...opts, level: 1 }, theme));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+</script>
+
+<h1 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} class={mergedClass} style={mergedStyle}>
+  {@render children?.()}
+</h1>

package/dist/components/heading/H1.svelte.d.ts

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

package/dist/components/heading/H2.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { headingRecipe } 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 { H2Props } from "./types.js";
+
+  let {
+    children,
+    class: className,
+    style,
+    ...opts
+  }: H2Props = $props();
+
+  const { theme } = useTheme();
+  const kit = $derived(headingRecipe({ ...opts, level: 2 }, theme));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+</script>
+
+<h2 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} class={mergedClass} style={mergedStyle}>
+  {@render children?.()}
+</h2>

package/dist/components/heading/H2.svelte.d.ts

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

package/dist/components/heading/H3.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { headingRecipe } 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 { H3Props } from "./types.js";
+
+  let {
+    children,
+    class: className,
+    style,
+    ...opts
+  }: H3Props = $props();
+
+  const { theme } = useTheme();
+  const kit = $derived(headingRecipe({ ...opts, level: 3 }, theme));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+</script>
+
+<h3 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} class={mergedClass} style={mergedStyle}>
+  {@render children?.()}
+</h3>

package/dist/components/heading/H3.svelte.d.ts

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

package/dist/components/heading/README.md

@@ -0,0 +1,13 @@
+# Heading — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `H1`, `H2`, `H3` components with `headingRecipe`
+- `mw-heading` class with size modifiers (`mw-heading--h1`, etc.)
+- CSS vars for font family, size, weight, line height from resolved theme
+- Optional `id`, `ariaLabel`, `size` override, custom `class`, `style`
+- Requires `MarwesProvider` context for theme access
+
+### Notes
+- Heading recipe requires the resolved theme to compute font variables.

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

@@ -0,0 +1,4 @@
+export { default as H1 } from "./H1.svelte";
+export { default as H2 } from "./H2.svelte";
+export { default as H3 } from "./H3.svelte";
+export type { H1Props, H2Props, H3Props } from "./types.js";

package/dist/components/heading/index.js

@@ -0,0 +1,3 @@
+export { default as H1 } from "./H1.svelte";
+export { default as H2 } from "./H2.svelte";
+export { default as H3 } from "./H3.svelte";

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

@@ -0,0 +1,26 @@
+import type { HeadingSize } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface H1Props {
+    size?: HeadingSize;
+    id?: string;
+    ariaLabel?: string;
+    children?: Snippet;
+    class?: string;
+    style?: string | undefined;
+}
+export interface H2Props {
+    size?: HeadingSize;
+    id?: string;
+    ariaLabel?: string;
+    children?: Snippet;
+    class?: string;
+    style?: string | undefined;
+}
+export interface H3Props {
+    size?: HeadingSize;
+    id?: string;
+    ariaLabel?: string;
+    children?: Snippet;
+    class?: string;
+    style?: string | undefined;
+}

package/dist/components/heading/types.js

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

package/dist/components/icon/Icon.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import {
+    iconRegistry,
+    resolveIconA11y,
+    resolveIconSize,
+    resolveIconStrokeWidth,
+  } from "@marwes-ui/core";
+  import { svgAttrsToKebab } from "../../internal/svg-attrs.js";
+  import type { IconProps } from "./types.js";
+
+  let {
+    name,
+    size,
+    strokeWidth,
+    class: className,
+    "aria-label": ariaLabel,
+    decorative,
+  }: IconProps = $props();
+
+  const px = $derived(resolveIconSize(size ?? "sm"));
+  const sw = $derived(resolveIconStrokeWidth(strokeWidth ?? "md"));
+  const def = $derived(iconRegistry[name]);
+  const a11y = $derived(
+    resolveIconA11y({
+      ...(ariaLabel !== undefined ? { ariaLabel } : {}),
+      ...(decorative !== undefined ? { decorative } : {}),
+    })
+  );
+</script>
+
+{#if def}
+  <svg
+    width={px}
+    height={px}
+    viewBox={def.viewBox}
+    fill="none"
+    stroke="currentColor"
+    stroke-width={sw}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    aria-hidden={a11y.ariaHidden ? "true" : undefined}
+    aria-label={a11y.ariaLabel}
+    role={a11y.role}
+    focusable="false"
+  >
+    {#each def.nodes as node}
+      {#if node.tag === "path"}
+        <path {...svgAttrsToKebab(node.attrs)} />
+      {:else if node.tag === "circle"}
+        <circle {...svgAttrsToKebab(node.attrs)} />
+      {:else if node.tag === "line"}
+        <line {...svgAttrsToKebab(node.attrs)} />
+      {:else if node.tag === "polygon"}
+        <polygon {...svgAttrsToKebab(node.attrs)} />
+      {:else if node.tag === "polyline"}
+        <polyline {...svgAttrsToKebab(node.attrs)} />
+      {:else if node.tag === "rect"}
+        <rect {...svgAttrsToKebab(node.attrs)} />
+      {:else if node.tag === "ellipse"}
+        <ellipse {...svgAttrsToKebab(node.attrs)} />
+      {/if}
+    {/each}
+  </svg>
+{/if}

package/dist/components/icon/Icon.svelte.d.ts

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

package/dist/components/icon/README.md

@@ -0,0 +1,18 @@
+# Icon — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- Full `iconRegistry` integration
+- All props: name, size, strokeWidth, decorative, aria-label
+- SVG rendering from core registry nodes
+- Proper kebab-case attribute conversion via `svgAttrsToKebab`
+- All SVG element types handled (path, circle, line, polygon, polyline, rect, ellipse)
+- Accessibility: role="img", aria-hidden, aria-label from `resolveIconA11y`
+- `class` prop merging
+
+### Missing ❌
+- None — full parity with React/Vue atom.
+
+### Notes
+- The `color` prop from core (`IconColor`) is accepted in types but visual application relies on preset CSS (`mw-icon--currentColor` etc.)