@sepale/components 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tyren
+
+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/README.md

@@ -1,3 +1,65 @@
-# 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.
+# @sepale/components
+
+Sepale's Svelte 5 components, typed by the family stylesheet you import.
+
+```sh
+npm install @sepale/components @sepale/style
+```
+
+```svelte
+<script>
+	import { Button } from '@sepale/components';
+	import '@sepale/style/daisy.css';             // explicit, never automatic: and it types the props
+	import '@sepale/style/daisy/themes/light.css';
+</script>
+
+<Button color="primary">Save</Button>
+```
+
+## Types that follow the family
+
+Each family's stylesheet carries its types: `daisy.css` comes with
+`daisy.css.d.ts`, which registers what daisy draws. Import the stylesheet from
+any file of your project — a layout, typically — and every component's props
+narrow to it, in every file: a variant daisy lacks is a compile error.
+
+- **Switching family** is changing that one import; `svelte-check` lists what
+  the new family lacks. The runtime never changes.
+- **No family imported**: the props are generic, every variant of every family,
+  with no guarantee that one renders.
+- **Several families imported** (scoped by `data-theme`): a prop accepts what
+  any of them draws.
+- **Staying portable** across families: register them all — for its types
+  only, `import type {} from '@sepale/style/cosmos.css'` — and declare
+
+  ```ts
+  declare global {
+  	namespace Sepale {
+  		interface Config { portable: true }
+  	}
+  }
+  ```
+
+  Props then accept only what every registered family draws, so switching
+  between them never breaks the build.
+
+A family that is not in `@sepale/style` — written by hand or by an assistant,
+loaded into the site's "Create a family" page, kept private — works the same:
+keep its `<family>.css.d.ts` beside its `<family>.css` and import the
+stylesheet. Never write that file by hand; derive it from the stylesheet:
+
+```sh
+npx sepale-types my-family.css                          # -> my-family.css.d.ts
+npx sepale-types --components src/lib/components my.css # components you changed
+```
+
+The site gives the same file ("Download types" on the "Create a family" page,
+or in a bundle). Regenerate it whenever the stylesheet changes. A family works
+without it: the props are then generic. Under `"moduleResolution": "nodenext"`, TypeScript does not look for a
+loose `.d.ts` beside a stylesheet: register it with
+`/// <reference path="./<family>.css.d.ts" />` in a `.d.ts` of yours. (The
+package's own stylesheets map their types explicitly and need nothing.)
+
+The components load no CSS. `@sepale/style` is an optional peer, because the
+stylesheet may come from elsewhere: a family and a `theme.css` downloaded from
+the site's theme generator work the same.

package/dist/components/Accordion.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+	/** What .accordion is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'accordion';
+
+	export const AXES = {} as const;
+
+	export const FLAGS = {
+		separate: 'Keep the collapses apart instead of joining their edges.'
+	} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A stack of Collapses. Put them in as children; with `exclusive`, opening
+	 * one closes the others.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setAccordion } from './accordion-context.js';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+		/** At most one collapse open at a time. */
+		exclusive?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		exclusive = false,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	setAccordion(() => exclusive);
+</script>
+
+<div {...applied.rest} class={classes}>
+	{@render children?.()}
+</div>

package/dist/components/Accordion.svelte.d.ts

@@ -0,0 +1,24 @@
+/** What .accordion is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "accordion";
+export declare const AXES: {};
+export declare const FLAGS: {
+    readonly separate: "Keep the collapses apart instead of joining their edges.";
+};
+export declare const PARTS: readonly [];
+/**
+     * A stack of Collapses. Put them in as children; with `exclusive`, opening
+     * one closes the others.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+    /** At most one collapse open at a time. */
+    exclusive?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Alert.svelte

@@ -0,0 +1,107 @@
+<script module lang="ts">
+	/** What .alert is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'alert';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Default is a soft tint; these two are the alternatives. */
+		variant: ['outline', 'solid']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['icon', 'body', 'title', 'actions', 'close'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * An inline message: something the user should know, in place.
+	 *
+	 * `info`, `success`, `warning` and `error` come with an icon of their own;
+	 * the `icon` snippet replaces it. A dismissible alert hides itself when its
+	 * close button is pressed, then calls `onDismiss` — the parent need not
+	 * track it.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { slide } from 'svelte/transition';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'title'> {
+		/** A bold first line. */
+		title?: string;
+		/** Replaces the colour's own icon. */
+		icon?: Snippet;
+		/** Buttons or links on the trailing side. */
+		actions?: Snippet;
+		/** Draw a close button that hides the alert. */
+		dismissible?: boolean;
+		/** After the alert hid itself. */
+		onDismiss?: () => void;
+		/** The close button's accessible name. */
+		dismissLabel?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		title,
+		icon,
+		actions,
+		dismissible = false,
+		onDismiss,
+		dismissLabel = 'Dismiss',
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	/* Read back from the classes, the one place the axes are resolved. */
+	let kind = $derived((['info', 'success', 'warning', 'error'] as const).find((k) => classes.includes(`${PREFIX}-${k}`)));
+	let urgent = $derived(kind === 'error' || kind === 'warning');
+
+	let gone = $state(false);
+
+	function dismiss() {
+		gone = true;
+		onDismiss?.();
+	}
+</script>
+
+{#if !gone}
+	<div {...applied.rest} class={classes} role={urgent ? 'alert' : 'status'} out:slide={{ duration: 160 }}>
+		{#if icon}
+			<span class="alert-icon">{@render icon()}</span>
+		{:else if kind}
+			<span class="alert-icon" aria-hidden="true">
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					{#if kind === 'success'}
+						<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0" /><path d="m8 12 3 3 5-6" />
+					{:else if kind === 'warning'}
+						<path d="M12 3 2 20h20L12 3Z" /><path d="M12 10v4M12 17h.01" />
+					{:else if kind === 'error'}
+						<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0" /><path d="m9 9 6 6M15 9l-6 6" />
+					{:else}
+						<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0" /><path d="M12 11v5M12 8h.01" />
+					{/if}
+				</svg>
+			</span>
+		{/if}
+		<div class="alert-body">
+			{#if title}<p class="alert-title">{title}</p>{/if}
+			{@render children?.()}
+		</div>
+		{#if actions}<div class="alert-actions">{@render actions()}</div>{/if}
+		{#if dismissible}
+			<button type="button" class="alert-close" aria-label={dismissLabel} onclick={dismiss}>
+				<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="m6 6 12 12M18 6 6 18" /></svg>
+			</button>
+		{/if}
+	</div>
+{/if}

package/dist/components/Alert.svelte.d.ts

@@ -0,0 +1,40 @@
+/** What .alert is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "alert";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["outline", "solid"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["icon", "body", "title", "actions", "close"];
+/**
+     * An inline message: something the user should know, in place.
+     *
+     * `info`, `success`, `warning` and `error` come with an icon of their own;
+     * the `icon` snippet replaces it. A dismissible alert hides itself when its
+     * close button is pressed, then calls `onDismiss` — the parent need not
+     * track it.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'title'> {
+    /** A bold first line. */
+    title?: string;
+    /** Replaces the colour's own icon. */
+    icon?: Snippet;
+    /** Buttons or links on the trailing side. */
+    actions?: Snippet;
+    /** Draw a close button that hides the alert. */
+    dismissible?: boolean;
+    /** After the alert hid itself. */
+    onDismiss?: () => void;
+    /** The close button's accessible name. */
+    dismissLabel?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/Avatar.svelte

@@ -0,0 +1,75 @@
+<script module lang="ts">
+	/** What .avatar is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'avatar';
+
+	export const AXES = {
+		/* The contour: a ring in that colour. No colour, no ring. */
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Round by default everywhere; which other shapes exist is the
+		   family's call — daisy has daisyUI's masks, the others a box. */
+		shape: ['square', 'squircle', 'hexagon']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A picture, or a few letters, standing for someone.
+	 *
+	 * `src` draws a picture; without it the children are the initials. A
+	 * `badge` wraps the avatar in a `.badge` and pins a `.chip` to its edge —
+	 * the badge component's own markup, written here so the copy a family
+	 * ships imports nothing.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+		/** The picture. Without it, the children are drawn instead. */
+		src?: string;
+		/** The picture's alternative text. */
+		alt?: string;
+		/** A count or a status, pinned to the avatar's edge as a .chip. */
+		badge?: Snippet;
+		/** Which edge the badge sits on, at the end side. */
+		badgeSide?: 'top' | 'bottom';
+		class?: string;
+		/** The initials, when there is no picture. */
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		src,
+		alt = '',
+		badge,
+		badgeSide = 'top',
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+{#snippet frame()}
+	<div {...applied.rest} class={classes}>
+		{#if src}<img {src} {alt} />{:else}<span>{@render children?.()}</span>{/if}
+	</div>
+{/snippet}
+
+{#if badge}
+	<div class={['badge', badgeSide === 'bottom' ? 'badge-bottom' : 'badge-top', 'badge-end']}>
+		{@render frame()}
+		<span class="chip">{@render badge()}</span>
+	</div>
+{:else}
+	{@render frame()}
+{/if}

package/dist/components/Avatar.svelte.d.ts

@@ -0,0 +1,37 @@
+/** What .avatar is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "avatar";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly shape: readonly ["square", "squircle", "hexagon"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+/**
+     * A picture, or a few letters, standing for someone.
+     *
+     * `src` draws a picture; without it the children are the initials. A
+     * `badge` wraps the avatar in a `.badge` and pins a `.chip` to its edge —
+     * the badge component's own markup, written here so the copy a family
+     * ships imports nothing.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** The picture. Without it, the children are drawn instead. */
+    src?: string;
+    /** The picture's alternative text. */
+    alt?: string;
+    /** A count or a status, pinned to the avatar's edge as a .chip. */
+    badge?: Snippet;
+    /** Which edge the badge sits on, at the end side. */
+    badgeSide?: 'top' | 'bottom';
+    class?: string;
+    /** The initials, when there is no picture. */
+    children?: Snippet;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Badge.svelte

@@ -0,0 +1,46 @@
+<script module lang="ts">
+	/** What .badge is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'badge';
+
+	export const AXES = {
+		/* Where the floating chip sits. Two axes, because a corner is two
+		   independent choices — nothing else about a badge is styled. */
+		align: ['start', 'center', 'end'],
+		side: ['top', 'middle', 'bottom']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+		/** What the badge floats over. */
+		children?: Snippet;
+		/** The badge itself; rendered as a .chip pinned to the chosen corner. */
+		badge?: Snippet;
+		class?: string;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		class: klass = '',
+		children,
+		badge,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<div {...applied.rest} class={classes}>
+	{@render children?.()}
+	{#if badge}<span class="chip">{@render badge()}</span>{/if}
+</div>

package/dist/components/Badge.svelte.d.ts

@@ -0,0 +1,22 @@
+/** What .badge is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "badge";
+export declare const AXES: {
+    readonly align: readonly ["start", "center", "end"];
+    readonly side: readonly ["top", "middle", "bottom"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+    /** What the badge floats over. */
+    children?: Snippet;
+    /** The badge itself; rendered as a .chip pinned to the chosen corner. */
+    badge?: Snippet;
+    class?: string;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Breadcrumbs.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+	/** What .breadcrumbs is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'breadcrumbs';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<nav {...applied.rest} class={classes}>
+	<ul>{@render children?.()}</ul>
+</nav>

package/dist/components/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,18 @@
+/** What .breadcrumbs is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "breadcrumbs";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/Bubble.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+	/** What .bubble is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'bubble';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	/* `end` is a flag, not a side axis: the start side is simply the bubble
+	   with no class, and `no-tail` combines with either. */
+	export const FLAGS = {
+		end: 'Put the tail on the end side, and the bubble at the end of the line.',
+		'no-tail': 'Drop the tail but keep its room: a follow-up message.'
+	} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	/** A chat message: a fill, an ink, and a tail on one side. */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+		class?: string;
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<div {...applied.rest} class={classes}>{@render children?.()}</div>

package/dist/components/Bubble.svelte.d.ts

@@ -0,0 +1,23 @@
+/** What .bubble is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "bubble";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {
+    readonly end: "Put the tail on the end side, and the bubble at the end of the line.";
+    readonly 'no-tail': "Drop the tail but keep its room: a follow-up message.";
+};
+export declare const PARTS: readonly [];
+/** A chat message: a fill, an ink, and a tail on one side. */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    class?: string;
+    children?: Snippet;
+}
+declare const Bubble: import("svelte").Component<Props, {}, "">;
+type Bubble = ReturnType<typeof Bubble>;
+export default Bubble;