@marwes-ui/svelte 1.3.0

package/dist/components/slider/BrightnessSlider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SliderFieldProps, SliderProps } from "./types.js";
+interface BrightnessSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
+    label?: string;
+    slider?: Omit<SliderProps, "value">;
+    orientation?: SliderProps["orientation"];
+    minValueLabel?: string;
+    maxValueLabel?: string;
+}
+declare const BrightnessSlider: import("svelte").Component<BrightnessSliderProps, {}, "">;
+type BrightnessSlider = ReturnType<typeof BrightnessSlider>;
+export default BrightnessSlider;

package/dist/components/slider/README.md

@@ -0,0 +1,20 @@
+# 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/slider/RadiusSlider.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import SliderField from "./SliderField.svelte";
+  import type { SliderFieldProps, SliderProps } from "./types.js";
+
+  interface RadiusSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
+    label?: string;
+    slider?: Omit<SliderProps, "value">;
+    orientation?: SliderProps["orientation"];
+    minValueLabel?: string;
+    maxValueLabel?: string;
+  }
+
+  let {
+    label = "Radius",
+    slider,
+    orientation,
+    minValueLabel = "0px",
+    maxValueLabel = "48px",
+    dataAttributes,
+    ...rest
+  }: RadiusSliderProps = $props();
+</script>
+
+<SliderField
+  {...rest}
+  {label}
+  {minValueLabel}
+  {maxValueLabel}
+  slider={{ min: 0, max: 48, step: 2, showTooltip: true, ...(orientation !== undefined ? { orientation } : {}), ...slider }}
+  dataAttributes={{ ...dataAttributes, "data-purpose": "radius" }}
+/>

package/dist/components/slider/RadiusSlider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SliderFieldProps, SliderProps } from "./types.js";
+interface RadiusSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
+    label?: string;
+    slider?: Omit<SliderProps, "value">;
+    orientation?: SliderProps["orientation"];
+    minValueLabel?: string;
+    maxValueLabel?: string;
+}
+declare const RadiusSlider: import("svelte").Component<RadiusSliderProps, {}, "">;
+type RadiusSlider = ReturnType<typeof RadiusSlider>;
+export default RadiusSlider;

package/dist/components/slider/Slider.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { createSliderRecipe } from "@marwes-ui/core";
+  import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { SliderProps } from "./types.js";
+
+  let {
+    value = $bindable(50),
+    oninput,
+    onvaluechange,
+    class: className,
+    style,
+    ariaDescribedBy,
+    ariaInvalid,
+    ...options
+  }: SliderProps = $props();
+
+  const kit = $derived(createSliderRecipe({
+    ...options,
+    value,
+    ...(ariaDescribedBy ? { ariaDescribedBy } : {}),
+  }));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }): void {
+    const next = Number(e.currentTarget.value);
+    value = next;
+    oninput?.(e);
+    onvaluechange?.(next);
+  }
+</script>
+
+<div class={mergedClass} style={mergedStyle} {...kit.dataAttributes}>
+  <div class="mw-slider__control">
+    <input
+      type="range"
+      class={kit.inputClassName}
+      id={kit.a11y.id}
+      name={kit.a11y.name}
+      min={kit.a11y.min}
+      max={kit.a11y.max}
+      step={kit.a11y.step}
+      disabled={kit.a11y.disabled}
+      required={kit.a11y.required}
+      aria-label={kit.a11y.ariaLabel}
+      aria-labelledby={kit.a11y.ariaLabelledBy}
+      aria-describedby={kit.a11y.ariaDescribedBy}
+      aria-valuetext={kit.a11y.ariaValueText}
+      aria-orientation={kit.a11y.ariaOrientation}
+      aria-invalid={ariaInvalid ? true : undefined}
+      value={kit.value}
+      oninput={handleInput}
+    />
+
+    <div class="mw-slider__visual" aria-hidden="true">
+      <span class="mw-slider__track"></span>
+      <span class="mw-slider__fill"></span>
+      <span class="mw-slider__touch-area"></span>
+      <span class="mw-slider__thumb"></span>
+    </div>
+
+    {#if kit.showTooltip}
+      <span class="mw-slider__tooltip" aria-hidden="true">{kit.value}</span>
+    {/if}
+  </div>
+</div>

package/dist/components/slider/Slider.svelte.d.ts

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

package/dist/components/slider/SliderField.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { buildSliderFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Slider from "./Slider.svelte";
+  import type { SliderFieldProps, SliderProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    description,
+    helperText,
+    error,
+    slider = {},
+    ariaDescribedBy,
+    minValueLabel,
+    maxValueLabel,
+    labelPosition = "top",
+    showEdgeValues = true,
+    dataAttributes,
+    value = $bindable(50),
+    class: className,
+  }: SliderFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-slider-${uniqueId}`);
+
+  function hasTextContent(text: string | undefined): boolean {
+    return text !== undefined && text.trim().length > 0;
+  }
+
+  const descriptionText = $derived(description ?? helperText);
+  const hasDescription = $derived(hasTextContent(descriptionText));
+  const hasError = $derived(hasTextContent(error));
+  const isDisabled = $derived(slider.disabled === true);
+  const minEdgeValue = $derived(minValueLabel ?? `${slider.min ?? 0}`);
+  const maxEdgeValue = $derived(maxValueLabel ?? `${slider.max ?? 100}`);
+
+  const a11yIds = $derived(
+    buildSliderFieldA11yIds({ id: fieldId, hasDescription, hasError, externalDescribedBy: ariaDescribedBy })
+  );
+
+  const wrapperClass = $derived(
+    mergeClass(
+      "mw-slider-field",
+      labelPosition === "top" && "mw-slider-field--label-top",
+      labelPosition === "inline" && "mw-slider-field--label-inline",
+      isDisabled && "mw-slider-field--disabled",
+      hasError && "mw-slider-field--invalid",
+      className
+    )
+  );
+</script>
+
+<div class={wrapperClass} data-label-position={labelPosition} {...dataAttributes}>
+  <div class="mw-slider-field__header">
+    <div class="mw-slider-field__label" id={a11yIds.labelId}>
+      <p class="mw-p mw-p--md">{label}</p>
+    </div>
+  </div>
+
+  {#if hasDescription && !hasError}
+    <div class="mw-slider-field__description" id={a11yIds.descriptionId}>
+      <p class="mw-p mw-p--sm">{descriptionText}</p>
+    </div>
+  {/if}
+
+  {#if labelPosition === "top" && showEdgeValues}
+    <div class="mw-slider-field__values-row">
+      <span class="mw-slider-field__edge-value mw-slider-field__edge-value--min">
+        <p class="mw-p mw-p--sm">{minEdgeValue}</p>
+      </span>
+      <span class="mw-slider-field__edge-value mw-slider-field__edge-value--max">
+        <p class="mw-p mw-p--sm">{maxEdgeValue}</p>
+      </span>
+    </div>
+  {/if}
+
+  <div class="mw-slider-field__control-row">
+    {#if labelPosition === "inline" && showEdgeValues}
+      <span class="mw-slider-field__edge-value mw-slider-field__edge-value--min">
+        <p class="mw-p mw-p--sm">{minEdgeValue}</p>
+      </span>
+    {/if}
+
+    <div class="mw-slider-field__slider">
+      <Slider
+        {...slider}
+        id={fieldId}
+        ariaLabelledBy={a11yIds.labelId}
+        ariaDescribedBy={a11yIds.describedBy || undefined}
+        ariaInvalid={hasError}
+        style="width: 100%;"
+        bind:value
+      />
+    </div>
+
+    {#if labelPosition === "inline" && showEdgeValues}
+      <span class="mw-slider-field__edge-value mw-slider-field__edge-value--max">
+        <p class="mw-p mw-p--sm">{maxEdgeValue}</p>
+      </span>
+    {/if}
+  </div>
+
+  {#if hasDescription && hasError}
+    <div class="mw-slider-field__description" id={a11yIds.descriptionId}>
+      <p class="mw-p mw-p--sm">{descriptionText}</p>
+    </div>
+  {/if}
+
+  {#if hasError}
+    <div class="mw-slider-field__error" id={a11yIds.errorId} aria-live="polite">
+      <p class="mw-p mw-p--sm">{error}</p>
+    </div>
+  {/if}
+</div>

package/dist/components/slider/SliderField.svelte.d.ts

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

package/dist/components/slider/VolumeSlider.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import SliderField from "./SliderField.svelte";
+  import type { SliderFieldProps, SliderProps } from "./types.js";
+
+  interface VolumeSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
+    label?: string;
+    slider?: Omit<SliderProps, "value">;
+    orientation?: SliderProps["orientation"];
+    minValueLabel?: string;
+    maxValueLabel?: string;
+  }
+
+  let {
+    label = "Volume",
+    slider,
+    orientation,
+    minValueLabel = "0",
+    maxValueLabel = "100",
+    dataAttributes,
+    ...rest
+  }: VolumeSliderProps = $props();
+</script>
+
+<SliderField
+  {...rest}
+  {label}
+  {minValueLabel}
+  {maxValueLabel}
+  slider={{ min: 0, max: 100, step: 1, showTooltip: true, ...(orientation !== undefined ? { orientation } : {}), ...slider }}
+  dataAttributes={{ ...dataAttributes, "data-purpose": "volume" }}
+/>

package/dist/components/slider/VolumeSlider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SliderFieldProps, SliderProps } from "./types.js";
+interface VolumeSliderProps extends Omit<SliderFieldProps, "label" | "slider" | "minValueLabel" | "maxValueLabel"> {
+    label?: string;
+    slider?: Omit<SliderProps, "value">;
+    orientation?: SliderProps["orientation"];
+    minValueLabel?: string;
+    maxValueLabel?: string;
+}
+declare const VolumeSlider: import("svelte").Component<VolumeSliderProps, {}, "">;
+type VolumeSlider = ReturnType<typeof VolumeSlider>;
+export default VolumeSlider;

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

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

package/dist/components/slider/index.js

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

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

@@ -0,0 +1,28 @@
+import type { SliderOptions } from "@marwes-ui/core";
+export interface SliderProps extends Omit<SliderOptions, "ariaDescribedBy"> {
+    value?: number;
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    onvaluechange?: (value: number) => void;
+    class?: string;
+    style?: string | undefined;
+    ariaDescribedBy?: string | undefined;
+    ariaInvalid?: boolean;
+}
+export interface SliderFieldProps {
+    id?: string;
+    label: string;
+    description?: string;
+    helperText?: string;
+    error?: string;
+    slider?: Omit<SliderProps, "value">;
+    ariaDescribedBy?: string;
+    minValueLabel?: string;
+    maxValueLabel?: string;
+    labelPosition?: "top" | "inline";
+    showEdgeValues?: boolean;
+    dataAttributes?: Record<string, string>;
+    value?: number;
+    class?: string;
+}

package/dist/components/slider/types.js

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

package/dist/components/spacing/README.md

@@ -0,0 +1,15 @@
+# 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/spacing/Spacer.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Spacing from "./Spacing.svelte";
+  import type { SpacerProps } from "./types.js";
+
+  let props: SpacerProps = $props();
+</script>
+
+<Spacing {...props} />

package/dist/components/spacing/Spacer.svelte.d.ts

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

package/dist/components/spacing/Spacing.svelte

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

package/dist/components/spacing/Spacing.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as Spacing } from "./Spacing.svelte";
+export { default as Spacer } from "./Spacer.svelte";
+export type { SpacingProps, SpacerProps } from "./types.js";

package/dist/components/spacing/index.js

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

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

@@ -0,0 +1,7 @@
+import type { SpacingOptions } from "@marwes-ui/core";
+export interface SpacingProps extends SpacingOptions {
+    class?: string;
+    style?: string | undefined;
+}
+/** Spacer is an alias for Spacing. */
+export type SpacerProps = SpacingProps;

package/dist/components/spacing/types.js

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

package/dist/components/spinner/ButtonSpinner.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { mergeStyle } from "../../internal/css-vars.js";
+  import Spinner from "./Spinner.svelte";
+  import type { ButtonSpinnerProps } from "./types.js";
+
+  let {
+    inverted = false,
+    variant = "classic",
+    size = "xs",
+    decorative = true,
+    style,
+    dataAttributes,
+    ...rest
+  }: ButtonSpinnerProps = $props();
+
+  const spinnerStyle = $derived(
+    mergeStyle(
+      `--mw-spinner-track-color: ${inverted ? "color-mix(in srgb, currentColor 80%, transparent)" : "color-mix(in srgb, currentColor 35%, transparent)"}; --mw-spinner-indicator-color: currentColor`,
+      style
+    )
+  );
+</script>
+
+<Spinner
+  {...rest}
+  {variant}
+  {size}
+  {decorative}
+  style={spinnerStyle}
+  dataAttributes={{
+    ...dataAttributes,
+    "data-purpose": "button-loading",
+    "data-context": "button-loading",
+  }}
+/>

package/dist/components/spinner/ButtonSpinner.svelte.d.ts

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

package/dist/components/spinner/EmptyStateSpinner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { mergeStyle } from "../../internal/css-vars.js";
+  import Spinner from "./Spinner.svelte";
+  import type { SpinnerProps } from "./types.js";
+
+  type Props = SpinnerProps;
+  let { dataAttributes, ...props }: Props = $props();
+</script>
+
+<Spinner
+  {...props}
+  variant={props.variant ?? "dots-round"}
+  size={props.size ?? "lg"}
+  decorative={props.decorative ?? true}
+  dataAttributes={{
+    ...dataAttributes,
+    "data-purpose": "empty-state",
+    "data-context": "empty-state",
+  }}
+/>

package/dist/components/spinner/EmptyStateSpinner.svelte.d.ts

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

package/dist/components/spinner/README.md

@@ -0,0 +1,19 @@
+# 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/spinner/Spinner.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { createSpinnerRecipe } from "@marwes-ui/core";
+  import { cssVarsToStyle, mergeStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import { svgAttrsToKebab } from "../../internal/svg-attrs.js";
+  import type { SpinnerProps } from "./types.js";
+
+  let {
+    variant,
+    size,
+    decorative,
+    ariaLabel,
+    id,
+    class: className,
+    style,
+    dataAttributes,
+  }: SpinnerProps = $props();
+
+  const kit = $derived(
+    createSpinnerRecipe({
+      ...(variant !== undefined ? { variant } : {}),
+      ...(size !== undefined ? { size } : {}),
+      ...(decorative !== undefined ? { decorative } : {}),
+      ...(ariaLabel !== undefined ? { ariaLabel } : {}),
+      ...(id !== undefined ? { id } : {}),
+    })
+  );
+
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
+</script>
+
+<span
+  class={mergedClass}
+  style={mergedStyle}
+  role={kit.a11y.role}
+  id={kit.a11y.id}
+  aria-hidden={kit.a11y.ariaHidden ? "true" : undefined}
+  aria-label={kit.a11y.ariaLabel}
+  aria-live={kit.a11y.ariaLive}
+  {...kit.dataAttributes}
+  {...dataAttributes}
+>
+  <svg
+    class="mw-spinner__svg"
+    viewBox={kit.svg.viewBox}
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each kit.svg.nodes as node}
+      {#if node.tag === "circle"}
+        <circle {...svgAttrsToKebab(node.attrs)} />
+      {:else if node.tag === "path"}
+        <path {...svgAttrsToKebab(node.attrs)} />
+      {:else if node.tag === "rect"}
+        <rect {...svgAttrsToKebab(node.attrs)} />
+      {/if}
+    {/each}
+  </svg>
+</span>

package/dist/components/spinner/Spinner.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as Spinner } from "./Spinner.svelte";
+export { default as ButtonSpinner } from "./ButtonSpinner.svelte";
+export type { SpinnerProps, ButtonSpinnerProps } from "./types.js";

package/dist/components/spinner/index.js

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

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

@@ -0,0 +1,9 @@
+import type { SpinnerOptions } from "@marwes-ui/core";
+export interface SpinnerProps extends SpinnerOptions {
+    class?: string;
+    style?: string | undefined;
+    dataAttributes?: Record<string, string>;
+}
+export interface ButtonSpinnerProps extends SpinnerProps {
+    inverted?: boolean;
+}

package/dist/components/spinner/types.js

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

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

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