@marwes-ui/svelte 1.3.0 → 1.4.1

package/dist/index.js

@@ -1,5 +1,5 @@
 // @marwes-ui/svelte — main public API
-// CSS is NOT imported here. Users import from @marwes-ui/presets explicitly.
+import "@marwes-ui/presets/firstEdition/styles.css";
 // Provider
 export { default as MarwesProvider } from "./provider/MarwesProvider.svelte";
 export { useTheme } from "./provider/use-theme.js";
@@ -8,6 +8,7 @@ export { useThemeMode } from "./provider/use-theme-mode.js";
 export { createMarwesThemeScript, createMarwesThemeStyle } from "./ssr.js";
 // Button
 export { default as Button } from "./components/button/Button.svelte";
+export { default as IconButton } from "./components/button/IconButton.svelte";
 export { default as PrimaryButton } from "./components/button/PrimaryButton.svelte";
 export { default as SecondaryButton } from "./components/button/SecondaryButton.svelte";
 export { default as TextButton } from "./components/button/TextButton.svelte";
@@ -37,7 +38,7 @@ export { default as Spinner } from "./components/spinner/Spinner.svelte";
 export { default as ButtonSpinner } from "./components/spinner/ButtonSpinner.svelte";
 export { default as EmptyStateSpinner } from "./components/spinner/EmptyStateSpinner.svelte";
 // Input
-export { default as Input } from "./components/input/Input.svelte";
+// `Input` atom intentionally NOT exported — use `InputField` (or a purpose variant).
 export { default as InputField } from "./components/input/InputField.svelte";
 export { default as PasswordField } from "./components/input/PasswordField.svelte";
 export { default as EmailField } from "./components/input/EmailField.svelte";
@@ -48,8 +49,10 @@ export { default as CurrencyField } from "./components/input/CurrencyField.svelt
 export { default as DateOfBirthField } from "./components/input/DateOfBirthField.svelte";
 export { default as ZipCodeField } from "./components/input/ZipCodeField.svelte";
 export { default as DropdownField } from "./components/input/DropdownField.svelte";
-export { default as InputOtp } from "./components/input/InputOtp.svelte";
-export { default as RichText } from "./components/input/RichText.svelte";
+// `InputOtp` (the bare atom — cells-only render) is intentionally NOT
+// exported from the public entry. Use `InputOtpField` instead.
+export { default as InputOtpField } from "./components/input/InputOtpField.svelte";
+// `RichText` atom intentionally NOT exported from the public entry — use `RichTextField`.
 export { default as RichTextField } from "./components/input/RichTextField.svelte";
 // Badge
 export { default as Badge } from "./components/badge/Badge.svelte";
@@ -57,6 +60,13 @@ export { default as BadgeGroup } from "./components/badge/BadgeGroup.svelte";
 export { default as StatusBadge } from "./components/badge/StatusBadge.svelte";
 export { default as PriorityBadge } from "./components/badge/PriorityBadge.svelte";
 export { default as NotificationBadge } from "./components/badge/NotificationBadge.svelte";
+// Banner
+export { default as Banner } from "./components/banner/Banner.svelte";
+export { default as InfoBanner } from "./components/banner/InfoBanner.svelte";
+export { default as SuccessBanner } from "./components/banner/SuccessBanner.svelte";
+export { default as WarningBanner } from "./components/banner/WarningBanner.svelte";
+export { default as ErrorBanner } from "./components/banner/ErrorBanner.svelte";
+export { BannerVariant } from "@marwes-ui/core";
 // Card
 export { default as Card } from "./components/card/Card.svelte";
 export { default as ProductCard } from "./components/card/ProductCard.svelte";
@@ -64,6 +74,10 @@ export { default as ProfileCard } from "./components/card/ProfileCard.svelte";
 export { default as StatCard } from "./components/card/StatCard.svelte";
 // Divider
 export { default as Divider } from "./components/divider/Divider.svelte";
+// ContextMenu
+export { default as ContextMenu } from "./components/context-menu/ContextMenu.svelte";
+// Breadcrumb
+export { default as Breadcrumb } from "./components/breadcrumb/Breadcrumb.svelte";
 // Spacing
 export { default as Spacing } from "./components/spacing/Spacing.svelte";
 export { default as Spacer } from "./components/spacing/Spacer.svelte";
@@ -73,24 +87,30 @@ export { default as H2 } from "./components/heading/H2.svelte";
 export { default as H3 } from "./components/heading/H3.svelte";
 // Paragraph
 export { default as Paragraph } from "./components/paragraph/Paragraph.svelte";
+// Text
+export { default as Text } from "./components/text/Text.svelte";
+export { default as TypographyText } from "./components/text/Text.svelte";
 // Textarea
-export { default as Textarea } from "./components/input/Textarea.svelte";
+// `Textarea` atom intentionally NOT exported — use `TextareaField`.
 export { default as TextareaField } from "./components/input/TextareaField.svelte";
 // Select
-export { default as Select } from "./components/input/Select.svelte";
+// `Select` atom intentionally NOT exported — use `SelectField` or `DropdownField`.
 export { default as SelectField } from "./components/input/SelectField.svelte";
 // Checkbox
-export { default as Checkbox } from "./components/checkbox/Checkbox.svelte";
+// The `Checkbox` atom is intentionally NOT exported from the public entry —
+// use `CheckboxField` (or `CheckboxGroupField`) instead.
 export { default as CheckboxField } from "./components/checkbox/CheckboxField.svelte";
 export { default as CheckboxGroupField } from "./components/checkbox/CheckboxGroupField.svelte";
 // Switch
-export { default as Switch } from "./components/switch/Switch.svelte";
+// The `Switch` atom is intentionally NOT exported from the public entry —
+// use `SwitchField` (or a purpose variant) instead.
 export { default as SwitchField } from "./components/switch/SwitchField.svelte";
 export { default as FeatureToggle } from "./components/switch/FeatureToggle.svelte";
 export { default as PreferenceSwitch } from "./components/switch/PreferenceSwitch.svelte";
 export { default as PermissionSwitch } from "./components/switch/PermissionSwitch.svelte";
 // Radio
-export { default as Radio } from "./components/radio/Radio.svelte";
+// The `Radio` atom is intentionally NOT exported from the public entry —
+// use `RadioGroupField` (or a purpose variant) instead.
 export { default as RadioGroupField } from "./components/radio/RadioGroupField.svelte";
 export { default as OptionRadioGroup } from "./components/radio/OptionRadioGroup.svelte";
 export { default as YesNoRadioGroup } from "./components/radio/YesNoRadioGroup.svelte";
@@ -103,9 +123,15 @@ export { default as ProfileAvatar } from "./components/avatar/ProfileAvatar.svel
 export { default as PresenceAvatar } from "./components/avatar/PresenceAvatar.svelte";
 export { default as TeamAvatarGroup } from "./components/avatar/TeamAvatarGroup.svelte";
 // DatePicker
-export { default as DatePicker } from "./components/date-picker/DatePicker.svelte";
+// The `DatePicker` atom is intentionally NOT exported from the public entry —
+// use `DatePickerField` instead.
+export { default as DatePickerField } from "./components/date-picker/DatePickerField.svelte";
+// Drawer
+export { default as Drawer } from "./components/drawer/Drawer.svelte";
 // Skeleton
 export { default as Skeleton } from "./components/skeleton/Skeleton.svelte";
+// ProgressBar
+export { default as ProgressBar } from "./components/progress-bar/ProgressBar.svelte";
 // StatTile
 export { default as StatTile } from "./components/stat-tile/StatTile.svelte";
 // Tooltip
@@ -127,7 +153,8 @@ export { default as ConfirmDialog } from "./components/dialog/ConfirmDialog.svel
 export { default as DestructiveDialog } from "./components/dialog/DestructiveDialog.svelte";
 export { default as InfoDialog } from "./components/dialog/InfoDialog.svelte";
 // Accordion
-export { default as Accordion } from "./components/accordion/Accordion.svelte";
+// The `Accordion` atom (single collapsible panel) is intentionally NOT exported —
+// use `AccordionField` (groups) or a purpose variant.
 export { default as AccordionField } from "./components/accordion/AccordionField.svelte";
 export { default as FAQAccordion } from "./components/accordion/FAQAccordion.svelte";
 export { default as SettingsAccordion } from "./components/accordion/SettingsAccordion.svelte";
@@ -139,11 +166,22 @@ export { default as TabGroup } from "./components/tab/TabGroup.svelte";
 export { default as NavigationTabs } from "./components/tab/NavigationTabs.svelte";
 export { default as ContentTabs } from "./components/tab/ContentTabs.svelte";
 export { default as SettingsTabs } from "./components/tab/SettingsTabs.svelte";
+// Segmented Control
+// The `SegmentedControl` atom is intentionally NOT exported from the public entry —
+// use `SegmentedControlField` instead.
+export { default as SegmentedControlField } from "./components/segmented-control/SegmentedControlField.svelte";
+// Pagination
+// The `Pagination` atom is intentionally NOT exported from the public entry —
+// use `PaginationField` instead.
+export { default as PaginationField } from "./components/pagination/PaginationField.svelte";
+// SkipLink
+export { default as SkipLink } from "./components/skip-link/SkipLink.svelte";
 // Slider
-export { default as Slider } from "./components/slider/Slider.svelte";
+// The `Slider` atom is intentionally NOT exported from the public entry —
+// use `SliderField` (or a purpose variant) instead.
 export { default as SliderField } from "./components/slider/SliderField.svelte";
 export { default as VolumeSlider } from "./components/slider/VolumeSlider.svelte";
 export { default as BrightnessSlider } from "./components/slider/BrightnessSlider.svelte";
 export { default as RadiusSlider } from "./components/slider/RadiusSlider.svelte";
 // Core re-exports
-export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, createFontStack, IconName, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar, Spacings, SwitchSize, ThemeMode, } from "@marwes-ui/core";
+export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, createFontStack, IconName, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwTheme, mwThemeVarNames, mwThemeVars, mwVar, createMwTheme, createMwThemeMedia, Spacings, SwitchSize, TextVariant, ThemeMode, } from "@marwes-ui/core";

package/dist/provider/MarwesProvider.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import {
     ThemeMode as MwThemeMode,
+    createMwTheme,
     nextThemeMode,
     resolveThemeInput,
     resolveThemePreference,
   } from "@marwes-ui/core";
-  import type { ResolvedTheme, ThemeMode, ThemePreference } from "@marwes-ui/core";
+  import type { MwTheme, ResolvedTheme, ThemeMode, ThemePreference } from "@marwes-ui/core";
   import { setMarwesContext } from "./context.js";
   import { applyThemeToElement, loadThemeFonts, themeToRootStyle } from "./runtime-theme.js";
   import {
@@ -38,13 +39,17 @@
 
   let rootElement: HTMLDivElement | undefined = $state(undefined);
 
-  let internalPreference = $state<ThemePreference>(
-    defaultPreference ?? defaultMode ?? MwThemeMode.light
-  );
+  function getInitialPreference(): ThemePreference {
+    return defaultPreference ?? defaultMode ?? MwThemeMode.light;
+  }
 
-  let systemMode = $state<ThemeMode>(
-    enableSystem ? getSystemThemeMode() : MwThemeMode.light
-  );
+  function getInitialSystemMode(): ThemeMode {
+    return enableSystem ? getSystemThemeMode() : MwThemeMode.light;
+  }
+
+  let internalPreference = $state<ThemePreference>(getInitialPreference());
+
+  let systemMode = $state<ThemeMode>(getInitialSystemMode());
 
   const activePreference = $derived(
     controlledPreference ?? controlledMode ?? theme?.mode ?? internalPreference
@@ -60,6 +65,8 @@
     resolveThemeInput({ ...(theme ?? {}), mode: activeMode })
   );
 
+  const mwTheme: MwTheme = $derived(createMwTheme(resolved));
+
   const rootStyle = $derived(
     variableStrategy === "style-tag" ? undefined : themeToRootStyle(resolved)
   );
@@ -89,13 +96,17 @@
     setMode(nextThemeMode(activeMode));
   }
 
+  function getInitialContextState(): MarwesContextState {
+    return {
+      theme: resolved,
+      mode: activeMode,
+      preference: activePreference,
+      systemMode,
+    };
+  }
+
   // Context state — mutated reactively by effects below
-  const contextState: MarwesContextState = $state({
-    theme: resolved,
-    mode: activeMode,
-    preference: activePreference,
-    systemMode,
-  });
+  const contextState: MarwesContextState = $state(getInitialContextState());
 
   setMarwesContext({
     get state() { return contextState; },
@@ -180,7 +191,8 @@
   class={`mw-theme--${resolved.mode}`}
   data-marwes-theme="true"
   data-marwes-mode={resolved.mode}
+  data-marwes-personality={resolved.personality}
   style={rootStyleString}
 >
-  {@render children?.()}
+  {@render children?.({ mwTheme })}
 </div>

package/dist/provider/types.d.ts

@@ -1,6 +1,9 @@
-import type { FontLoadingConfig, ResolvedTheme, ThemeInput, ThemeMode, ThemePreference, ThemeVariableStrategy } from "@marwes-ui/core";
+import type { FontLoadingConfig, MwTheme, ResolvedTheme, ThemeInput, ThemeMode, ThemePreference, ThemeVariableStrategy } from "@marwes-ui/core";
 import type { Snippet } from "svelte";
 import type { ThemeAttribute, ThemeTarget } from "./theme-mode-runtime.js";
+export interface MarwesProviderSnippetProps {
+    mwTheme: MwTheme;
+}
 export interface MarwesProviderProps {
     theme?: ThemeInput;
     defaultPreference?: ThemePreference;
@@ -16,7 +19,7 @@ export interface MarwesProviderProps {
     attribute?: ThemeAttribute;
     disableTransitionOnChange?: boolean;
     variableStrategy?: ThemeVariableStrategy;
-    children?: Snippet;
+    children?: Snippet<[MarwesProviderSnippetProps?]>;
 }
 export interface MarwesContextState {
     theme: ResolvedTheme;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@marwes-ui/svelte",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "publishConfig": {
     "access": "public"
   },
   "license": "MIT",
   "private": false,
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": true,
   "main": "./dist/index.js",
   "files": [
     "dist",
@@ -29,7 +29,8 @@
     }
   },
   "dependencies": {
-    "@marwes-ui/core": "1.3.0"
+    "@marwes-ui/core": "1.4.1",
+    "@marwes-ui/presets": "1.4.1"
   },
   "peerDependencies": {
     "svelte": "^5.20.0"
@@ -40,11 +41,11 @@
     "@testing-library/svelte": "^5.0.0",
     "jsdom": "26.1.0",
     "rimraf": "6.1.2",
-    "svelte": "^5.20.0",
+    "svelte": "5.56.3",
     "svelte-check": "^4.0.0",
     "typescript": "5.9.3",
     "vite": "^6.0.0",
-    "vitest": "4.0.18"
+    "vitest": "4.1.8"
   },
   "scripts": {
     "dev": "svelte-package --watch",

package/dist/components/accordion/README.md

@@ -1,19 +0,0 @@
-# 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/avatar/README.md

@@ -1,19 +0,0 @@
-# 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/badge/README.md

@@ -1,16 +0,0 @@
-# Badge — Parity Findings
-
-## Svelte vs React/Vue
-
-### Aligned ✅
-- `Badge` atom with `createBadgeRecipe`
-- All variants: neutral, info, success, warning, error
-- `BadgeGroup` molecule with fieldset/legend/aria-labelledby
-- Class merging, data attributes spreading
-- Optional ariaLabel, id, custom dataAttributes
-
-### Missing ❌
-- **Purpose variant wrappers** (3): `StatusBadge`, `PriorityBadge`, `NotificationBadge`
-
-### Notes
-- Purpose badge variants are thin — they pre-set variant and add purpose-specific data attributes. Low priority follow-up.

package/dist/components/button/README.md

@@ -1,21 +0,0 @@
-# Button — Parity Findings
-
-## Svelte vs React/Vue
-
-### Aligned ✅
-- Base `Button` component with full `createButtonRecipe` integration
-- All props: variant, size, action, disabled, loading, iconLeft, iconRight, href, as
-- Anchor path (as="a") with href
-- Loading state with `ButtonSpinner`
-- Icon rendering via `Icon` component
-- Class/style merging with core output
-- All a11y attributes from core recipe
-- Data attributes spreading
-
-### Missing ❌
-- **Purpose variant wrappers** (22 components): `PrimaryButton`, `SecondaryButton`, `TextButton`, `SuccessButton`, `DestructiveButton`, `CreateButton`, `SubmitButton`, `CancelButton`, `LinkButton`, `SaveButton`, `ConfirmButton`, `VerifyButton`, `EditButton`, `CloseButton`, `RefreshButton`, `UploadButton`, `DownloadButton`, `CopyButton`, `SearchButton`, `FilterButton`, `SortButton`, `DropdownButton`
-- Dev-mode warnings for forbidden props on purpose variants
-
-### Notes
-- Purpose wrappers are thin — each just pre-sets `variant`, `action`, and optionally `iconLeft`/`iconRight` via the core `createPurposeSemanticAttributes`. Can be added as a follow-up batch.
-- The base `Button` atom is fully functional and covers all use cases the purpose wrappers serve.

package/dist/components/card/README.md

@@ -1,15 +0,0 @@
-# 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/checkbox/README.md

@@ -1,17 +0,0 @@
-# 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/date-picker/README.md

@@ -1,17 +0,0 @@
-# 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/dialog/README.md

@@ -1,23 +0,0 @@
-# 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/divider/README.md

@@ -1,15 +0,0 @@
-# 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/heading/README.md

@@ -1,13 +0,0 @@
-# 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/icon/README.md

@@ -1,18 +0,0 @@
-# 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.)

package/dist/components/input/README.md

@@ -1,24 +0,0 @@
-# Input — Parity Findings
-
-## Svelte vs React/Vue
-
-### Aligned ✅
-- `Input` atom with `createInputRecipe` and `bind:value`
-- `InputField` molecule with label, helperText, error, leadingSymbol, ariaDescribedBy
-- Stable generated IDs via `$props.id()`
-- Full a11y: aria-invalid, aria-describedby, aria-live="polite" on error
-- `buildInputFieldA11yIds` integration from core
-
-### Missing ❌
-- **`Select`** — implemented as separate component (not under input folder like React/Vue)
-- **`Textarea`** — implemented as separate component
-- **`SelectField`** molecule
-- **`TextareaField`** molecule
-- **`RichText`** atom + `RichTextField` molecule
-- **`InputOtp`** atom
-- **Field variant wrappers** (9): `DropdownField`, `SearchField`, `PasswordField`, `EmailField`, `DateOfBirthField`, `ZipCodeField`, `PhoneField`, `URLField`, `CurrencyField`
-
-### Notes
-- React/Vue group Select, Textarea, RichText under `components/input/`. Svelte separates them into their own folders for clarity.
-- The missing field variants are thin wrappers that pre-configure InputField with specific type/inputMode/leadingSymbol. Can be added as a batch.
-- `RichText` and `InputOtp` are high-complexity components flagged for later implementation.

package/dist/components/paragraph/README.md

@@ -1,13 +0,0 @@
-# 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/radio/README.md

@@ -1,16 +0,0 @@
-# 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/skeleton/README.md

@@ -1,16 +0,0 @@
-# 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/slider/README.md

@@ -1,20 +0,0 @@
-# Slider — Parity Findings
-
-## Svelte vs React/Vue
-
-### Aligned ✅
-- `createSliderRecipe` integration
-- `bind:value` + `onvaluechange` callback
-- Native `<input type="range">` with proper a11y
-- All props: min, max, step, disabled, orientation, ariaLabel, ariaValueText
-- CSS var for fill percentage (--mw-slider-fill-percentage)
-- Tooltip support
-- Data attributes
-
-### Missing ❌
-- **`SliderField`** molecule (label, description, error wiring)
-- **Touch area** visual treatment (showTouchArea renders differently in React)
-- **Purpose variants**
-
-### Notes
-- The base slider is fully functional. `SliderField` follows the standard field molecule pattern and can be added easily.

package/dist/components/spacing/README.md

@@ -1,15 +0,0 @@
-# Spacing — Parity Findings
-
-## Svelte vs React/Vue
-
-### Aligned ✅
-- Full parity with React/Vue
-- `createSpacingRecipe` integration
-- All 18 token sizes (sp-0 through sp-120)
-- `scale` multiplier prop
-- Decorative `<div>` with aria-hidden="true"
-- Data attributes, class/style/CSS vars merging
-- `Spacer` alias component
-
-### Missing ❌
-- None — full parity.

package/dist/components/spinner/README.md

@@ -1,19 +0,0 @@
-# Spinner — Parity Findings
-
-## Svelte vs React/Vue
-
-### Aligned ✅
-- `Spinner` atom with full `createSpinnerRecipe` integration
-- All 7 variants: classic, ring, dual, dots-round, dots-square, lines, cross
-- All sizes: xs, sm, md, lg (and custom numeric)
-- SVG node rendering with kebab-case attribute conversion
-- `ButtonSpinner` purpose wrapper with track/indicator color vars
-- Accessibility: role="status", aria-hidden, aria-label, aria-live
-- Data attributes: data-component, data-variant, data-size
-- Class/style/CSS vars merging
-
-### Missing ❌
-- `EmptyStateSpinner` purpose wrapper (React/Vue have it, low priority)
-
-### Notes
-- `EmptyStateSpinner` is trivial — same as `ButtonSpinner` but defaults to `variant="dots-round"`, `size="lg"`, with `data-purpose="empty-state"`.

package/dist/components/stat-tile/README.md

@@ -1,15 +0,0 @@
-# StatTile — Parity Findings
-
-## Svelte vs React/Vue
-
-### Aligned ✅
-- Full parity with React/Vue
-- `createStatTileRecipe` integration
-- All tones: neutral, brand, success, warning, danger
-- Trend direction with icon (↑/↓) and trend value
-- Slots: header, label, value, subtitle, trend
-- aria-label on trend for screen readers
-- Data attributes (data-component, data-tone, data-trend)
-
-### Missing ❌
-- None — full parity.