@marwes-ui/svelte 1.3.0

package/dist/components/stat-tile/StatTile.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { createStatTileRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { StatTileProps } from "./types.js";
+
+  let {
+    label,
+    value,
+    subtitle,
+    trendValue,
+    dataAttributes,
+    class: className,
+    ...options
+  }: StatTileProps = $props();
+
+  const kit = $derived(createStatTileRecipe({
+    ...options,
+    ...(trendValue ? { trendValue } : {}),
+    ...(dataAttributes ? { dataAttributes } : {}),
+  }));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+</script>
+
+<article class={mergedClass} {...kit.dataAttributes}>
+  <div class={kit.slots.headerClassName}>
+    <span class={kit.slots.labelClassName}>{label}</span>
+    {#if trendValue}
+      <span
+        class={kit.slots.trendClassName}
+        aria-label={kit.a11y.trendAriaLabel}
+        {...kit.trendDataAttributes}
+      >
+        {#if kit.trendIcon}
+          <span class={kit.slots.trendIconClassName} aria-hidden="true">{kit.trendIcon}</span>
+        {/if}
+        <span class={kit.slots.trendValueClassName}>{trendValue}</span>
+      </span>
+    {/if}
+  </div>
+  <div class={kit.slots.valueClassName}>{value}</div>
+  {#if subtitle}
+    <div class={kit.slots.subtitleClassName}>{subtitle}</div>
+  {/if}
+</article>

package/dist/components/stat-tile/StatTile.svelte.d.ts

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

package/dist/components/stat-tile/index.d.ts

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

package/dist/components/stat-tile/index.js

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

package/dist/components/stat-tile/types.d.ts

@@ -0,0 +1,14 @@
+import type { StatTileOptions } from "@marwes-ui/core";
+export interface StatTileProps extends StatTileOptions {
+    /** The main label (e.g. "Revenue") */
+    label: string;
+    /** The primary value (e.g. "$12,345") */
+    value: string;
+    /** Optional subtitle below value */
+    subtitle?: string;
+    /** Optional trend value (e.g. "+12%") */
+    trendValue?: string;
+    /** Data attributes for AI-friendly metadata */
+    dataAttributes?: Record<string, string>;
+    class?: string;
+}

package/dist/components/stat-tile/types.js

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

package/dist/components/switch/FeatureToggle.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import SwitchField from "./SwitchField.svelte";
+  import type { SwitchProps } from "./types.js";
+
+  interface SwitchFieldPurposeProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    switch?: Omit<SwitchProps, "children">;
+    ariaDescribedBy?: string;
+    class?: string;
+  }
+
+  let props: SwitchFieldPurposeProps = $props();
+</script>
+<div data-purpose="feature-toggle">
+  <SwitchField {...props} />
+</div>

package/dist/components/switch/FeatureToggle.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SwitchProps } from "./types.js";
+interface SwitchFieldPurposeProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    switch?: Omit<SwitchProps, "children">;
+    ariaDescribedBy?: string;
+    class?: string;
+}
+declare const FeatureToggle: import("svelte").Component<SwitchFieldPurposeProps, {}, "">;
+type FeatureToggle = ReturnType<typeof FeatureToggle>;
+export default FeatureToggle;

package/dist/components/switch/PermissionSwitch.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import SwitchField from "./SwitchField.svelte";
+  import type { SwitchProps } from "./types.js";
+
+  interface SwitchFieldPurposeProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    switch?: Omit<SwitchProps, "children">;
+    ariaDescribedBy?: string;
+    class?: string;
+  }
+
+  let props: SwitchFieldPurposeProps = $props();
+</script>
+<div data-purpose="permission">
+  <SwitchField {...props} />
+</div>

package/dist/components/switch/PermissionSwitch.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SwitchProps } from "./types.js";
+interface SwitchFieldPurposeProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    switch?: Omit<SwitchProps, "children">;
+    ariaDescribedBy?: string;
+    class?: string;
+}
+declare const PermissionSwitch: import("svelte").Component<SwitchFieldPurposeProps, {}, "">;
+type PermissionSwitch = ReturnType<typeof PermissionSwitch>;
+export default PermissionSwitch;

package/dist/components/switch/PreferenceSwitch.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import SwitchField from "./SwitchField.svelte";
+  import type { SwitchProps } from "./types.js";
+
+  interface SwitchFieldPurposeProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    switch?: Omit<SwitchProps, "children">;
+    ariaDescribedBy?: string;
+    class?: string;
+  }
+
+  let props: SwitchFieldPurposeProps = $props();
+</script>
+<div data-purpose="preference">
+  <SwitchField {...props} />
+</div>

package/dist/components/switch/PreferenceSwitch.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SwitchProps } from "./types.js";
+interface SwitchFieldPurposeProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    switch?: Omit<SwitchProps, "children">;
+    ariaDescribedBy?: string;
+    class?: string;
+}
+declare const PreferenceSwitch: import("svelte").Component<SwitchFieldPurposeProps, {}, "">;
+type PreferenceSwitch = ReturnType<typeof PreferenceSwitch>;
+export default PreferenceSwitch;

package/dist/components/switch/README.md

@@ -0,0 +1,17 @@
+# Switch — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `Switch` atom with `createSwitchRecipe`
+- `oncheckedchange` callback
+- role="switch", aria-checked, aria-disabled
+- Track/thumb DOM structure (mw-switch__track > mw-switch__thumb)
+- `SwitchField` molecule with label, description, error, `buildSwitchFieldA11yIds`
+- All sizes: compact, wide, rich
+
+### Missing ❌
+- **Purpose variant wrappers**: React/Vue have some switch variants (not critical)
+
+### Notes
+- Full functional parity. Switch variants in React/Vue are minor visual presets — not blocking.

package/dist/components/switch/Switch.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { createSwitchRecipe } from "@marwes-ui/core";
+  import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { SwitchProps } from "./types.js";
+
+  let {
+    children,
+    class: className,
+    id,
+    oncheckedchange,
+    onclick,
+    ariaDescribedBy,
+    ariaLabel,
+    ...coreProps
+  }: SwitchProps = $props();
+
+  const kit = $derived(createSwitchRecipe({
+    ...coreProps,
+    ...(ariaDescribedBy ? { ariaDescribedBy } : {}),
+    ...(ariaLabel ? { ariaLabel } : {}),
+  }));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(cssVarsToStyle(kit.vars));
+  const isDisabled = $derived(kit.a11y.ariaDisabled === true);
+
+  function handleClick(e: MouseEvent): void {
+    onclick?.(e);
+    if (isDisabled || e.defaultPrevented) return;
+    oncheckedchange?.(!kit.a11y.ariaChecked);
+  }
+</script>
+
+<button
+  {id}
+  type="button"
+  role={kit.a11y.role}
+  disabled={isDisabled}
+  aria-checked={kit.a11y.ariaChecked}
+  aria-disabled={kit.a11y.ariaDisabled}
+  aria-label={kit.a11y.ariaLabel}
+  aria-labelledby={kit.a11y.ariaLabelledby}
+  aria-describedby={kit.a11y.ariaDescribedBy}
+  class={mergedClass}
+  style={mergedStyle}
+  onclick={handleClick}
+>
+  <span class="mw-switch__track">
+    <span class="mw-switch__thumb"></span>
+  </span>
+  {@render children?.()}
+</button>

package/dist/components/switch/Switch.svelte.d.ts

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

package/dist/components/switch/SwitchField.svelte

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

package/dist/components/switch/SwitchField.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as Switch } from "./Switch.svelte";
+export { default as SwitchField } from "./SwitchField.svelte";
+export type { SwitchProps, SwitchFieldProps } from "./types.js";

package/dist/components/switch/index.js

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

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

@@ -0,0 +1,20 @@
+import type { SwitchOptions } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface SwitchProps extends Omit<SwitchOptions, "ariaDescribedBy" | "ariaLabel"> {
+    children?: Snippet;
+    class?: string;
+    id?: string;
+    oncheckedchange?: (checked: boolean) => void;
+    onclick?: (e: MouseEvent) => void;
+    ariaDescribedBy?: string | undefined;
+    ariaLabel?: string | undefined;
+}
+export interface SwitchFieldProps {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    switch?: Omit<SwitchProps, "children">;
+    ariaDescribedBy?: string;
+    class?: string;
+}

package/dist/components/switch/types.js

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

package/dist/components/tab/ContentTabs.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import TabGroup from "./TabGroup.svelte";
+  import type { ContentTabsProps } from "./types.js";
+  let { ariaLabel = "Content tabs", dataAttributes, ...props }: ContentTabsProps = $props();
+</script>
+
+<TabGroup
+  {...props}
+  {ariaLabel}
+  dataAttributes={{ ...dataAttributes, "data-purpose": "content-tabs" }}
+/>

package/dist/components/tab/ContentTabs.svelte.d.ts

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

package/dist/components/tab/NavigationTabs.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import TabGroup from "./TabGroup.svelte";
+  import type { NavigationTabsProps } from "./types.js";
+  let { ariaLabel = "Navigation tabs", dataAttributes, ...props }: NavigationTabsProps = $props();
+</script>
+
+<TabGroup
+  {...props}
+  {ariaLabel}
+  dataAttributes={{ ...dataAttributes, "data-purpose": "navigation-tabs" }}
+/>

package/dist/components/tab/NavigationTabs.svelte.d.ts

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

package/dist/components/tab/README.md

@@ -0,0 +1,26 @@
+# Tab
+
+Svelte tab components are aligned with the React and Vue tab family.
+
+## Public Components
+
+- `Tab` — atom for custom tablist layouts.
+- `TabPanel` — atom-level panel primitive.
+- `TabGroup` — coordinated tablist and panel molecule.
+- `NavigationTabs` — purpose wrapper for navigation-style tab groups.
+- `ContentTabs` — purpose wrapper for content-section tab groups.
+- `SettingsTabs` — purpose wrapper for settings/admin tab groups.
+
+## Shared Contract
+
+- Uses `createTabRecipe`, `buildTabGroupA11yIds`, `moveTabSelection`, and `resolveTabValue` from `@marwes-ui/core`.
+- Supports controlled and uncontrolled active tab state.
+- Supports disabled tabs.
+- Supports ArrowLeft, ArrowRight, Home, and End keyboard navigation.
+- Wires `role="tablist"`, `role="tab"`, `role="tabpanel"`, `aria-selected`, `aria-controls`, and `aria-labelledby`.
+- Renders string panel content or Svelte snippets.
+- Applies purpose metadata to the `.mw-tab-group` root through `dataAttributes`, matching React and Vue.
+
+## Svelte Notes
+
+Svelte keeps the same declarative `tabs` array API as React and Vue. Event naming follows Svelte conventions with `onactivetabchange`.

package/dist/components/tab/SettingsTabs.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import TabGroup from "./TabGroup.svelte";
+  import type { SettingsTabsProps } from "./types.js";
+  let { ariaLabel = "Settings tabs", dataAttributes, ...props }: SettingsTabsProps = $props();
+</script>
+
+<TabGroup
+  {...props}
+  {ariaLabel}
+  dataAttributes={{ ...dataAttributes, "data-purpose": "settings-tabs" }}
+/>

package/dist/components/tab/SettingsTabs.svelte.d.ts

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

package/dist/components/tab/Tab.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { createTabRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { TabProps } from "./types.js";
+
+  let {
+    children,
+    class: className,
+    id,
+    onclick,
+    ...coreProps
+  }: TabProps = $props();
+
+  const kit = $derived(createTabRecipe(coreProps));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+</script>
+
+<button
+  {id}
+  type="button"
+  class={mergedClass}
+  role={kit.a11y.role}
+  aria-selected={kit.a11y.ariaSelected}
+  aria-disabled={kit.a11y.ariaDisabled}
+  aria-label={kit.a11y.ariaLabel}
+  aria-controls={kit.a11y.ariaControls}
+  tabindex={kit.a11y.tabIndex}
+  disabled={coreProps.disabled}
+  {onclick}
+>
+  {@render children?.()}
+</button>

package/dist/components/tab/Tab.svelte.d.ts

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

package/dist/components/tab/TabGroup.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import {
+    buildTabGroupA11yIds,
+    createTabRecipe,
+    moveTabSelection,
+    resolveTabValue,
+  } from "@marwes-ui/core";
+  import type { TabGroupItemState } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { TabGroupProps } from "./types.js";
+
+  let {
+    id: idProp,
+    label,
+    ariaLabel,
+    tabs,
+    activeTab: controlledActive,
+    defaultActiveTab,
+    onactivetabchange,
+    dataAttributes,
+    class: className,
+  }: TabGroupProps = $props();
+
+  const uniqueId = $props.id();
+  const groupId = $derived(idProp ?? `mw-tab-group-${uniqueId}`);
+
+  const itemStates: TabGroupItemState[] = $derived(
+    tabs.map((t) => ({ value: t.value, ...(t.disabled ? { disabled: true } : {}) }))
+  );
+
+  const itemValues = $derived(tabs.map((t) => t.value));
+  const hasLabel = $derived(!!label);
+
+  const a11yIds = $derived(buildTabGroupA11yIds({ id: groupId, itemValues, hasLabel }));
+
+  let internalActive = $state<string | undefined>(undefined);
+
+  // Initialize internal state
+  $effect(() => {
+    if (internalActive === undefined) {
+      internalActive = resolveTabValue(itemStates, defaultActiveTab);
+    }
+  });
+
+  const activeValue = $derived(
+    controlledActive !== undefined ? resolveTabValue(itemStates, controlledActive) : internalActive
+  );
+
+  function selectTab(value: string): void {
+    if (controlledActive === undefined) {
+      internalActive = value;
+    }
+    onactivetabchange?.(value);
+  }
+
+  function handleKeydown(e: KeyboardEvent): void {
+    let direction: "next" | "previous" | "start" | "end" | undefined;
+    if (e.key === "ArrowRight") direction = "next";
+    else if (e.key === "ArrowLeft") direction = "previous";
+    else if (e.key === "Home") direction = "start";
+    else if (e.key === "End") direction = "end";
+
+    if (!direction) return;
+    e.preventDefault();
+
+    const next = moveTabSelection(itemStates, activeValue, direction);
+    if (next) {
+      selectTab(next);
+      const tabEl = document.getElementById(a11yIds.tabIds[next] ?? "");
+      if (tabEl instanceof HTMLButtonElement) tabEl.focus();
+    }
+  }
+
+  const mergedClass = $derived(mergeClass("mw-tab-group", className));
+</script>
+
+<div class={mergedClass} {...dataAttributes}>
+  {#if label}
+    <div class="mw-tab-group__label" id={a11yIds.labelId}>
+      <p class="mw-p mw-p--sm">{label}</p>
+    </div>
+  {/if}
+
+  <div
+    class="mw-tab-group__tablist"
+    role="tablist"
+    id={a11yIds.tabListId}
+    aria-labelledby={a11yIds.labelId}
+    aria-label={!label ? ariaLabel : undefined}
+    onkeydown={handleKeydown}
+  >
+    {#each tabs as tab}
+      {@const isSelected = tab.value === activeValue}
+      {@const kit = createTabRecipe({ selected: isSelected, ...(tab.disabled ? { disabled: tab.disabled } : {}), ...(tab.ariaLabel ? { ariaLabel: tab.ariaLabel } : {}), ...(a11yIds.panelIds[tab.value] ? { ariaControls: a11yIds.panelIds[tab.value] } : {}) })}
+      <button
+        id={a11yIds.tabIds[tab.value]}
+        type="button"
+        role={kit.a11y.role}
+        class={kit.className}
+        aria-selected={kit.a11y.ariaSelected}
+        aria-disabled={kit.a11y.ariaDisabled}
+        aria-controls={kit.a11y.ariaControls}
+        aria-label={kit.a11y.ariaLabel}
+        tabindex={kit.a11y.tabIndex}
+        disabled={tab.disabled}
+        onclick={() => !tab.disabled && selectTab(tab.value)}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+
+  {#each tabs as tab}
+    {@const isActive = tab.value === activeValue}
+    <div
+      id={a11yIds.panelIds[tab.value]}
+      role="tabpanel"
+      aria-labelledby={a11yIds.tabIds[tab.value]}
+      class="mw-tab-group__panel"
+      tabindex={isActive ? 0 : undefined}
+      hidden={!isActive}
+    >
+      {#if isActive}
+        {#if typeof tab.panel === "string"}
+          <p class="mw-p mw-p--md">{tab.panel}</p>
+        {:else}
+          {@render tab.panel()}
+        {/if}
+      {/if}
+    </div>
+  {/each}
+</div>

package/dist/components/tab/TabGroup.svelte.d.ts

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

package/dist/components/tab/TabPanel.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { TabPanelProps } from "./types.js";
+
+  let {
+    id,
+    tabId,
+    hidden = false,
+    children,
+    class: className,
+  }: TabPanelProps = $props();
+
+  const mergedClass = $derived(mergeClass("mw-tab-group__panel", className));
+</script>
+
+<div
+  {id}
+  role="tabpanel"
+  aria-labelledby={tabId}
+  class={mergedClass}
+  hidden={hidden || undefined}
+  tabindex={hidden ? undefined : 0}
+>
+  {@render children?.()}
+</div>

package/dist/components/tab/TabPanel.svelte.d.ts

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