@interstellarforge/matter-svelte 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Interstellarforge
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Avatar.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Full name: used as the accessible name and for the initials fallback. */
+    name: string;
+    src?: string;
+    size?: "sm" | "md" | "lg";
+  }
+
+  let { name, src, size = "md", class: className, ...rest }: Props = $props();
+
+  const initials = $derived(
+    name
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part.charAt(0))
+      .join(""),
+  );
+</script>
+
+<span {...rest} class={["m-avatar", className]} data-size={size} role="img" aria-label={name}>
+  {#if src}<img {src} alt="" />{:else}{initials}{/if}
+</span>

package/dist/Avatar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Full name: used as the accessible name and for the initials fallback. */
+    name: string;
+    src?: string;
+    size?: "sm" | "md" | "lg";
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/Badge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  import type { BadgeTone } from "./types.ts";
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    children?: Snippet;
+  }
+
+  /** Status must also be readable as text; never rely on the tone colour alone. */
+  let { tone = "neutral", class: className, children, ...rest }: Props = $props();
+</script>
+
+<span {...rest} class={["m-badge", className]} data-tone={tone}>
+  {@render children?.()}
+</span>

package/dist/Badge.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { BadgeTone } from "./types.ts";
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/Banner.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  import type { BannerTone } from "./types.ts";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    tone?: BannerTone;
+    title?: string;
+    children?: Snippet;
+  }
+
+  let { tone = "info", title, class: className, children, ...rest }: Props = $props();
+</script>
+
+<!-- Warnings and errors are announced immediately (alert); the rest politely (status). -->
+<div
+  role={tone === "danger" || tone === "warning" ? "alert" : "status"}
+  {...rest}
+  class={["m-banner", className]}
+  data-tone={tone}
+>
+  {#if title}<div class="m-banner__title">{title}</div>{/if}
+  {@render children?.()}
+</div>

package/dist/Banner.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { BannerTone } from "./types.ts";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    tone?: BannerTone;
+    title?: string;
+    children?: Snippet;
+}
+declare const Banner: import("svelte").Component<Props, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/Button.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  import type { ButtonVariant, ControlSize } from "./types.ts";
+
+  interface Props extends HTMLButtonAttributes {
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    /** Keeps the button focusable but blocks clicks while pending. */
+    loading?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    variant = "secondary",
+    size = "md",
+    type = "button",
+    loading = false,
+    class: className,
+    onclick,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+<button
+  {...rest}
+  {type}
+  class={["m-button", className]}
+  data-variant={variant}
+  data-size={size}
+  aria-busy={loading ? true : undefined}
+  aria-disabled={loading ? true : undefined}
+  onclick={(event) => {
+    if (loading) {
+      event.preventDefault();
+    } else {
+      onclick?.(event);
+    }
+  }}
+>
+  {@render children?.()}
+</button>

package/dist/Button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { ButtonVariant, ControlSize } from "./types.ts";
+interface Props extends HTMLButtonAttributes {
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    /** Keeps the button focusable but blocks clicks while pending. */
+    loading?: boolean;
+    children?: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Card.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** Element to render; default `div`. */
+    as?: string;
+    padded?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    as: tag = "div",
+    padded = false,
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={tag}
+  {...rest}
+  class={["m-card", className]}
+  data-padded={padded ? "" : undefined}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/Card.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Element to render; default `div`. */
+    as?: string;
+    padded?: boolean;
+    children?: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/Checkbox.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLInputAttributes, "type" | "value"> {
+    invalid?: boolean;
+    indeterminate?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    invalid = false,
+    indeterminate = false,
+    checked = $bindable(false),
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+<label class={["m-checkbox", className]}>
+  <input
+    {...rest}
+    type="checkbox"
+    bind:checked
+    {indeterminate}
+    aria-invalid={invalid ? true : undefined}
+  />
+  <span>{@render children?.()}</span>
+</label>

package/dist/Checkbox.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLInputAttributes, "type" | "value"> {
+    invalid?: boolean;
+    indeterminate?: boolean;
+    children?: Snippet;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/Dialog.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Visible heading; also the accessible name. */
+    title: string;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    children?: Snippet;
+    footer?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    title,
+    closeLabel,
+    children,
+    footer,
+  }: Props = $props();
+
+  const titleId = $props.id();
+  let dialog: HTMLDialogElement | undefined = $state();
+
+  /** Modal dialog on the native `<dialog>`: focus trap, Esc and inert background come from the platform. */
+  $effect(() => {
+    if (!dialog) {
+      return;
+    }
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  });
+
+  function setOpen(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+</script>
+
+<dialog
+  bind:this={dialog}
+  class="m-dialog"
+  aria-labelledby={titleId}
+  onclose={() => {
+    setOpen(false);
+  }}
+  onclick={(event) => {
+    if (event.target === event.currentTarget) {
+      setOpen(false);
+    }
+  }}
+>
+  <div class="m-dialog__header">
+    <h2 id={titleId} class="m-dialog__title">{title}</h2>
+    <button
+      type="button"
+      class="m-button"
+      data-variant="ghost"
+      data-icon-only=""
+      aria-label={closeLabel}
+      onclick={() => {
+        setOpen(false);
+      }}
+    >
+      <span aria-hidden="true">×</span>
+    </button>
+  </div>
+  <div class="m-dialog__body">{@render children?.()}</div>
+  {#if footer}<div class="m-dialog__footer">{@render footer()}</div>{/if}
+</dialog>

package/dist/Dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Visible heading; also the accessible name. */
+    title: string;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    children?: Snippet;
+    footer?: Snippet;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/EmptyState.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: string;
+    children?: Snippet;
+    /** Optional call to action, e.g. a `Button`. */
+    action?: Snippet;
+  }
+
+  let { title, class: className, children, action, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={["m-empty", className]}>
+  <div class="m-empty__title">{title}</div>
+  {#if children}<div>{@render children()}</div>{/if}
+  {@render action?.()}
+</div>

package/dist/EmptyState.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: string;
+    children?: Snippet;
+    /** Optional call to action, e.g. a `Button`. */
+    action?: Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/Icon.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { IconDefinition } from "@interstellarforge/matter-icons";
+  import type { SVGAttributes } from "svelte/elements";
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    /** A named export of `@interstellarforge/matter-icons`, e.g. `search` (tree-shakeable). */
+    icon: IconDefinition;
+    size?: number;
+    /** Accessible name. Without it the icon is decorative and hidden from assistive technology. */
+    label?: string;
+  }
+
+  let { icon, size = 18, label, class: className, ...rest }: Props = $props();
+</script>
+
+<svg
+  {...rest}
+  class={["m-icon", className]}
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.8"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  focusable="false"
+  role={label ? "img" : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : true}
+>
+  <!-- Static markup from our own, SVGO-optimised icon sources. -->
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -- trusted static icon markup -->
+  {@html icon.body}
+</svg>

package/dist/Icon.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { IconDefinition } from "@interstellarforge/matter-icons";
+import type { SVGAttributes } from "svelte/elements";
+interface Props extends SVGAttributes<SVGSVGElement> {
+    /** A named export of `@interstellarforge/matter-icons`, e.g. `search` (tree-shakeable). */
+    icon: IconDefinition;
+    size?: number;
+    /** Accessible name. Without it the icon is decorative and hidden from assistive technology. */
+    label?: string;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/IconButton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  import Button from "./Button.svelte";
+  import type { ButtonVariant, ControlSize } from "./types.ts";
+
+  interface Props extends Omit<HTMLButtonAttributes, "aria-label"> {
+    /** Accessible name; required because the button has no visible text. */
+    label: string;
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    loading?: boolean;
+    children?: Snippet;
+  }
+
+  let { label, children, ...rest }: Props = $props();
+</script>
+
+<Button {...rest} aria-label={label} data-icon-only="">
+  {@render children?.()}
+</Button>

package/dist/IconButton.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { ButtonVariant, ControlSize } from "./types.ts";
+interface Props extends Omit<HTMLButtonAttributes, "aria-label"> {
+    /** Accessible name; required because the button has no visible text. */
+    label: string;
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    loading?: boolean;
+    children?: Snippet;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/Input.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { IconDefinition } from "@interstellarforge/matter-icons";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  import Icon from "./Icon.svelte";
+
+  interface Props extends Omit<HTMLInputAttributes, "value"> {
+    value?: string;
+    /** Sets `aria-invalid` and the error border. */
+    invalid?: boolean;
+    /** Decorative leading icon, e.g. `search`. The input still needs its own accessible name. */
+    icon?: IconDefinition;
+  }
+
+  let {
+    invalid = false,
+    icon,
+    value = $bindable(),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+{#snippet field(cls: unknown)}
+  <input
+    {...rest}
+    bind:value
+    class={["m-input", cls]}
+    aria-invalid={invalid ? true : undefined}
+  />
+{/snippet}
+
+{#if icon}
+  <span class={["m-input-icon", className]}>
+    <Icon {icon} />
+    {@render field(undefined)}
+  </span>
+{:else}
+  {@render field(className)}
+{/if}

package/dist/Input.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { IconDefinition } from "@interstellarforge/matter-icons";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLInputAttributes, "value"> {
+    value?: string;
+    /** Sets `aria-invalid` and the error border. */
+    invalid?: boolean;
+    /** Decorative leading icon, e.g. `search`. The input still needs its own accessible name. */
+    icon?: IconDefinition;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/Menu.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { tick } from "svelte";
+
+  import type { MenuItem } from "./types.ts";
+
+  interface Props {
+    /** Visible text of the trigger button. */
+    triggerLabel: string;
+    items: MenuItem[];
+    onSelect: (id: string) => void;
+  }
+
+  let { triggerLabel, items, onSelect }: Props = $props();
+
+  const menuId = $props.id();
+  let root: HTMLDivElement | undefined = $state();
+  let trigger: HTMLButtonElement | undefined = $state();
+  const itemEls: (HTMLButtonElement | undefined)[] = [];
+  let open = $state(false);
+  const enabled = $derived(items.flatMap((item, index) => (item.disabled ? [] : [index])));
+
+  $effect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointerDown(event: PointerEvent) {
+      if (!root?.contains(event.target as Node)) {
+        open = false;
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  });
+
+  function focusItem(index: number | undefined) {
+    if (index !== undefined) {
+      itemEls[index]?.focus();
+    }
+  }
+
+  function close() {
+    open = false;
+    trigger?.focus();
+  }
+
+  async function openAt(position: "first" | "last") {
+    open = true;
+    await tick();
+    focusItem(position === "first" ? enabled[0] : enabled.at(-1));
+  }
+
+  function onMenuKeyDown(event: KeyboardEvent) {
+    const current = itemEls.findIndex((element) => element === document.activeElement);
+    const position = enabled.indexOf(current);
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      return;
+    }
+    const next = {
+      ArrowDown: enabled[(position + 1) % enabled.length],
+      ArrowUp: enabled[(position - 1 + enabled.length) % enabled.length],
+      Home: enabled[0],
+      End: enabled.at(-1),
+    }[event.key];
+    if (next !== undefined) {
+      event.preventDefault();
+      focusItem(next);
+      return;
+    }
+    if (event.key.length === 1) {
+      const typed = event.key.toLowerCase();
+      focusItem(
+        enabled.find(
+          (index) => index > current && items[index]?.label.toLowerCase().startsWith(typed),
+        ) ?? enabled.find((index) => items[index]?.label.toLowerCase().startsWith(typed)),
+      );
+    }
+  }
+</script>
+
+<div bind:this={root} class="m-menu-wrap">
+  <button
+    bind:this={trigger}
+    type="button"
+    class="m-button"
+    aria-haspopup="menu"
+    aria-expanded={open}
+    aria-controls={menuId}
+    onclick={() => {
+      if (open) {
+        open = false;
+      } else {
+        void openAt("first");
+      }
+    }}
+    onkeydown={(event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        void openAt(event.key === "ArrowDown" ? "first" : "last");
+      }
+    }}
+  >
+    {triggerLabel}
+  </button>
+  <!-- svelte-ignore a11y_interactive_supports_focus -->
+  <div id={menuId} role="menu" class="m-menu" hidden={!open} onkeydown={onMenuKeyDown}>
+    {#each items as item, index (item.id)}
+      <button
+        bind:this={itemEls[index]}
+        type="button"
+        role="menuitem"
+        class="m-menu__item"
+        tabindex={-1}
+        disabled={item.disabled}
+        onclick={() => {
+          onSelect(item.id);
+          close();
+        }}
+      >
+        {item.label}
+      </button>
+    {/each}
+  </div>
+</div>

package/dist/Menu.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MenuItem } from "./types.ts";
+interface Props {
+    /** Visible text of the trigger button. */
+    triggerLabel: string;
+    items: MenuItem[];
+    onSelect: (id: string) => void;
+}
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/ProgressBar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Accessible name (required). */
+    label: string;
+    /** Omit for an indeterminate bar. */
+    value?: number;
+    max?: number;
+  }
+
+  let { label, value, max = 100, class: className, style, ...rest }: Props = $props();
+
+  const percent = $derived(
+    value === undefined ? undefined : Math.min(100, Math.max(0, (value / max) * 100)),
+  );
+</script>
+
+<div
+  {...rest}
+  class={["m-progress", className]}
+  role="progressbar"
+  aria-label={label}
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  style={percent === undefined ? style : `${style ?? ""};--m-progress:${String(percent)}%`}
+>
+  <div class="m-progress__bar"></div>
+</div>

package/dist/ProgressBar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Accessible name (required). */
+    label: string;
+    /** Omit for an indeterminate bar. */
+    value?: number;
+    max?: number;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/Select.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLSelectAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLSelectAttributes, "value"> {
+    value?: string;
+    invalid?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    invalid = false,
+    value = $bindable(),
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+<select
+  {...rest}
+  bind:value
+  class={["m-input m-select", className]}
+  aria-invalid={invalid ? true : undefined}
+>
+  {@render children?.()}
+</select>

package/dist/Select.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLSelectAttributes, "value"> {
+    value?: string;
+    invalid?: boolean;
+    children?: Snippet;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/Switch.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLButtonAttributes, "role" | "value"> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+  }
+
+  /** Needs an accessible name via `aria-label` or `aria-labelledby`. */
+  let {
+    checked = $bindable(false),
+    onCheckedChange,
+    class: className,
+    onclick,
+    ...rest
+  }: Props = $props();
+</script>
+
+<button
+  {...rest}
+  type="button"
+  role="switch"
+  aria-checked={checked}
+  class={["m-switch", className]}
+  onclick={(event) => {
+    onclick?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    checked = !checked;
+    onCheckedChange?.(checked);
+  }}
+></button>

package/dist/Switch.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLButtonAttributes, "role" | "value"> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/Tabs.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import type { TabItem } from "./types.ts";
+
+  interface Props {
+    items: TabItem[];
+    /** Accessible name of the tab list. */
+    label: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Renders the panel content for the selected tab. */
+    panel: Snippet<[string]>;
+  }
+
+  let { items, label, value = $bindable(), onValueChange, panel }: Props = $props();
+
+  const base = $props.id();
+  const tabs: Record<string, HTMLButtonElement | undefined> = {};
+  const enabled = $derived(items.filter((item) => !item.disabled));
+  const selected = $derived(value ?? enabled[0]?.id);
+
+  function select(id: string) {
+    value = id;
+    onValueChange?.(id);
+    tabs[id]?.focus();
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    const index = enabled.findIndex((item) => item.id === selected);
+    const last = enabled.length - 1;
+    const target = {
+      ArrowRight: enabled[index === last ? 0 : index + 1],
+      ArrowLeft: enabled[index <= 0 ? last : index - 1],
+      Home: enabled[0],
+      End: enabled[last],
+    }[event.key];
+    if (target) {
+      event.preventDefault();
+      select(target.id);
+    }
+  }
+</script>
+
+<div class="m-tabs">
+  <!-- svelte-ignore a11y_interactive_supports_focus -->
+  <div role="tablist" aria-label={label} class="m-tablist" {onkeydown}>
+    {#each items as item (item.id)}
+      <button
+        bind:this={tabs[item.id]}
+        type="button"
+        role="tab"
+        id="{base}-tab-{item.id}"
+        class="m-tab"
+        aria-selected={item.id === selected}
+        aria-controls="{base}-panel-{item.id}"
+        tabindex={item.id === selected ? 0 : -1}
+        disabled={item.disabled}
+        onclick={() => {
+          select(item.id);
+        }}
+      >
+        {item.label}
+      </button>
+    {/each}
+  </div>
+  {#each items as item (item.id)}
+    <div
+      role="tabpanel"
+      id="{base}-panel-{item.id}"
+      class="m-tabpanel"
+      aria-labelledby="{base}-tab-{item.id}"
+      hidden={item.id !== selected}
+    >
+      {#if item.id === selected}{@render panel(item.id)}{/if}
+    </div>
+  {/each}
+</div>

package/dist/Tabs.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { TabItem } from "./types.ts";
+interface Props {
+    items: TabItem[];
+    /** Accessible name of the tab list. */
+    label: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Renders the panel content for the selected tab. */
+    panel: Snippet<[string]>;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/Textarea.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+
+  interface Props extends HTMLTextareaAttributes {
+    invalid?: boolean;
+  }
+
+  let {
+    invalid = false,
+    value = $bindable(),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<textarea
+  {...rest}
+  bind:value
+  class={["m-input m-textarea", className]}
+  aria-invalid={invalid ? true : undefined}
+></textarea>

package/dist/Textarea.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+interface Props extends HTMLTextareaAttributes {
+    invalid?: boolean;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/Tooltip.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    content: string;
+    /** Receives the props the trigger must spread (`aria-describedby`). */
+    children: Snippet<[{ "aria-describedby": string }]>;
+  }
+
+  /** Opens on hover and focus; Esc dismisses. Placement is fixed to the top in the MVP (no collision handling). */
+  let { content, children }: Props = $props();
+
+  const id = $props.id();
+  let open = $state(false);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  class="m-tooltip-wrap"
+  onmouseenter={() => (open = true)}
+  onmouseleave={() => (open = false)}
+  onfocusin={() => (open = true)}
+  onfocusout={() => (open = false)}
+  onkeydown={(event) => {
+    if (event.key === "Escape") {
+      open = false;
+    }
+  }}
+>
+  {@render children({ "aria-describedby": id })}
+  <span {id} role="tooltip" class="m-tooltip" hidden={!open}>{content}</span>
+</span>

package/dist/Tooltip.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    content: string;
+    /** Receives the props the trigger must spread (`aria-describedby`). */
+    children: Snippet<[{
+        "aria-describedby": string;
+    }]>;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export { default as Avatar } from "./Avatar.svelte";
+export { default as Badge } from "./Badge.svelte";
+export { default as Banner } from "./Banner.svelte";
+export { default as Button } from "./Button.svelte";
+export { default as Card } from "./Card.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Dialog } from "./Dialog.svelte";
+export { default as EmptyState } from "./EmptyState.svelte";
+export { default as Icon } from "./Icon.svelte";
+export { default as IconButton } from "./IconButton.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as Menu } from "./Menu.svelte";
+export { default as ProgressBar } from "./ProgressBar.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as Switch } from "./Switch.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Textarea } from "./Textarea.svelte";
+export { default as Tooltip } from "./Tooltip.svelte";
+export type { BadgeTone, BannerTone, ButtonVariant, ControlSize, MenuItem, TabItem, } from "./types.ts";

package/dist/index.js

@@ -0,0 +1,18 @@
+export { default as Avatar } from "./Avatar.svelte";
+export { default as Badge } from "./Badge.svelte";
+export { default as Banner } from "./Banner.svelte";
+export { default as Button } from "./Button.svelte";
+export { default as Card } from "./Card.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Dialog } from "./Dialog.svelte";
+export { default as EmptyState } from "./EmptyState.svelte";
+export { default as Icon } from "./Icon.svelte";
+export { default as IconButton } from "./IconButton.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as Menu } from "./Menu.svelte";
+export { default as ProgressBar } from "./ProgressBar.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as Switch } from "./Switch.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Textarea } from "./Textarea.svelte";
+export { default as Tooltip } from "./Tooltip.svelte";

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ControlSize = "sm" | "md" | "lg";
+export type BadgeTone = "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+export interface TabItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MenuItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+export type BannerTone = "info" | "success" | "warning" | "danger";

package/dist/types.js

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

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "@interstellarforge/matter-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "license": "MIT",
+  "description": "Matter components for Svelte 5 (Vite SPA and SvelteKit). Styling comes from @interstellarforge/matter-css.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/interstellarforge/matter.git",
+    "directory": "packages/svelte"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "2.5.8",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/svelte": "5.4.2",
+    "@testing-library/user-event": "14.6.8",
+    "axe-core": "4.14.0",
+    "jsdom": "30.1.3",
+    "svelte": "5.57.3",
+    "svelte-check": "4.7.7",
+    "vitest": "4.1.6"
+  },
+  "dependencies": {
+    "@interstellarforge/matter-icons": "0.2.0"
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.