@makolabs/ripple 2.5.8 → 3.0.0

package/dist/charts/Chart.svelte

@@ -101,15 +101,15 @@
 	let resizeObserver: ResizeObserver;
 	let resizeTimeoutId: ReturnType<typeof setTimeout>;
 
-	const chartColors: ChartColors = { ...defaultChartColors, ...colors };
-	const baseColors = [
+	const chartColors: ChartColors = $derived({ ...defaultChartColors, ...colors });
+	const baseColors = $derived([
 		chartColors.health,
 		chartColors.other,
 		chartColors.property,
 		chartColors.auto,
 		chartColors.life,
 		chartColors.default
-	];
+	]);
 
 	function getColor(color?: ChartColorString): string | undefined {
 		return color ? chartColors[color as keyof ChartColors] || color : undefined;
@@ -474,18 +474,10 @@
 					barCategoryGap: '20%',
 					barGap: '10%',
 					color: getColor(seriesConfig.color),
-					itemStyle: (() => {
-						const baseHex = getColor(seriesConfig.color) ?? '#6366f1';
-						const isStacked = !!seriesConfig.stack;
-						const isLastInStack = isStacked
-							? series.filter((s) => s.stack === seriesConfig.stack).at(-1) === seriesConfig
-							: true;
-						return {
-							color: barGradient(baseHex, isStacked),
-							borderRadius: isLastInStack ? [4, 4, 0, 0] : [0, 0, 0, 0],
-							opacity: seriesConfig.opacity ?? 1
-						};
-					})()
+					itemStyle: {
+						color: barGradient(getColor(seriesConfig.color) ?? '#6366f1', !!seriesConfig.stack),
+						opacity: seriesConfig.opacity ?? 1
+					}
 				}),
 
 				label: {
@@ -690,7 +682,7 @@
 					type: 'value',
 					name: axis.label,
 					nameLocation: 'middle',
-					nameGap: 50,
+					nameGap: axis.nameGap ?? 75,
 					nameRotate: 90,
 					nameTextStyle: { color: '#6b7280', fontSize: 12 },
 					position: axis.position || (index === 0 ? 'left' : 'right'),

package/dist/charts/chart-types.d.ts

@@ -6,7 +6,12 @@ export type ChartColorValue = (typeof ChartColor)[ChartColorKey];
 export type ChartColors = {
     [K in ChartColorValue]: string;
 };
-export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie' | 'stacked-bar';
+/**
+ * Chart series type. Note: stacked bars are done with `type: 'bar'` + a
+ * `stack` key on the series config — there's no separate `'stacked-bar'`
+ * type (ECharts doesn't ship one).
+ */
+export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie';
 export type ChartColorString = `#${string}` | keyof ChartColors;
 export type ChartThreshold = {
     value: number | string;
@@ -45,6 +50,13 @@ export type YAxisConfig<T> = {
     position?: 'left' | 'right';
     min?: number;
     max?: number;
+    /**
+     * Distance in pixels between the axis line and the rotated axis name.
+     * The default clears typical currency labels like `'CHF 400K'`. Bump
+     * higher (e.g. 95) for wider labels (`'$1,234,567'`) or lower (e.g. 45)
+     * for short ones (`'42'`). @default 75
+     */
+    nameGap?: number;
     axisLine?: {
         show?: boolean;
         lineStyle?: {
@@ -136,14 +148,79 @@ export interface ChartRenderType<T> {
         options: ChartConfig<T>;
     };
 }
+/**
+ * Props for `<Chart>` — a flexible ECharts wrapper supporting line, bar,
+ * stacked bar, horizontal bar, area, pie, and donut variants. Pass
+ * `data` (any array of records) and a `config` describing the axes +
+ * series.
+ *
+ * For per-axis overflow tuning, see `YAxisConfig.nameGap`. For
+ * negative-value bar styling (rounded corners on the bottom), no config
+ * needed — `<Chart>` infers it from the data sign.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { Chart, ChartColor } from '@makolabs/ripple';
+ *   const data = [
+ *     { month: 'Jan', revenue: 12000 },
+ *     { month: 'Feb', revenue: 18500 }
+ *   ];
+ * </script>
+ *
+ * <Chart
+ *   {data}
+ *   config={{
+ *     xAxis: { dataKey: 'month' },
+ *     yAxis: [{ dataKey: 'revenue', label: 'Revenue ($)' }],
+ *     series: [{ dataKey: 'revenue', type: 'bar', color: ChartColor.PROPERTY }]
+ *   }}
+ *   height="320px"
+ * />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Mixed line + bar with two Y axes -->
+ * <Chart
+ *   {data}
+ *   config={{
+ *     xAxis: { dataKey: 'month' },
+ *     yAxis: [
+ *       { dataKey: 'orders', label: 'Orders' },
+ *       { dataKey: 'revenue', label: 'Revenue ($)', position: 'right' }
+ *     ],
+ *     series: [
+ *       { dataKey: 'orders', type: 'bar', name: 'Orders' },
+ *       { dataKey: 'revenue', type: 'line', name: 'Revenue', yAxisIndex: 1 }
+ *     ]
+ *   }}
+ *   onpointclick={({ detail }) => console.log(detail.originalData)}
+ * />
+ * ```
+ */
 export interface ChartProps<T> {
+    /** Source data — typically an array of records. */
     data: T[];
+    /** Axis + series configuration. See `ChartConfig`. */
     config: ChartConfig<T>;
+    /**
+     * Override default chart color palette. Merged with built-in defaults
+     * (so partial overrides work — only specify the colors you want to change).
+     */
     colors?: Partial<ChartColors>;
+    /** CSS height. @default '300px' */
     height?: string;
+    /** CSS width. @default '100%' */
     width?: string;
     class?: ClassValue;
+    /** Fires when the user clicks a data point (bar, line vertex, pie slice). */
     onpointclick?: (event: PointClickType<T>) => void;
+    /**
+     * Fires after the chart has rendered. Receives the underlying ECharts
+     * instance — escape hatch for advanced consumers needing direct
+     * access (custom plugins, imperative animation triggers, etc.).
+     */
     onchartrender?: (event: ChartRenderType<T>) => void;
     testId?: string;
 }

package/dist/drawer/Drawer.svelte

@@ -5,7 +5,6 @@
 	import { quintOut } from 'svelte/easing';
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
-	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import { drawer } from './drawer.js';
 	import type { DrawerProps } from '../index.js';
 
@@ -19,34 +18,15 @@
 		header,
 		footer,
 		class: className = '',
-		backdropclass,
-		backdropClass = backdropclass ?? '',
-		contentclass,
-		contentClass = contentclass ?? '',
-		headerclass,
-		headerClass = headerclass ?? '',
-		bodyclass,
-		bodyClass = bodyclass ?? '',
-		titleclass,
-		titleClass = titleclass ?? '',
-		footerclass,
-		footerClass = footerclass ?? '',
+		backdropClass = '',
+		contentClass = '',
+		headerClass = '',
+		bodyClass = '',
+		titleClass = '',
+		footerClass = '',
 		testId
 	}: DrawerProps = $props();
 
-	warnDeprecatedProps(
-		'Drawer',
-		{ backdropclass, contentclass, headerclass, bodyclass, titleclass, footerclass },
-		{
-			backdropclass: 'backdropClass',
-			contentclass: 'contentClass',
-			headerclass: 'headerClass',
-			bodyclass: 'bodyClass',
-			titleclass: 'titleClass',
-			footerclass: 'footerClass'
-		}
-	);
-
 	let drawerElement: HTMLDivElement | undefined = $state();
 
 	const {

package/dist/drawer/drawer-types.d.ts

@@ -1,33 +1,54 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { VariantSizes } from '../index.js';
+/**
+ * Props for `<Drawer>` — a side-anchored sliding panel. Use for
+ * supplementary content that shouldn't take over the page (filters,
+ * settings, details panels). For modal dialogs (forms, confirmations)
+ * prefer `<Modal>`; for transient feedback use `toast()`.
+ *
+ * @example
+ * ```svelte
+ * <Drawer bind:open title="Filters" position="right">
+ *   <FilterPanel bind:filters />
+ *   {#snippet footer()}
+ *     <div class="flex justify-end gap-2 p-4">
+ *       <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+ *       <Button onclick={apply}>Apply</Button>
+ *     </div>
+ *   {/snippet}
+ * </Drawer>
+ * ```
+ */
 export type DrawerProps = {
+    /** Bindable open state. @default false */
     open?: boolean;
+    /** Fires when the drawer dismisses (backdrop click, Escape). */
     onclose?: () => void;
+    /** Header title text. Ignored if a `header` snippet is provided. */
     title?: string;
+    /** Side the drawer slides in from. @default 'right' */
     position?: 'left' | 'right';
+    /** @default 'sm' */
     size?: VariantSizes;
     class?: ClassValue;
-    /** @deprecated Use backdropClass instead */
-    backdropclass?: ClassValue;
+    /** Classes on the backdrop overlay. */
     backdropClass?: ClassValue;
-    /** @deprecated Use contentClass instead */
-    contentclass?: ClassValue;
+    /** Classes on the dialog container. */
     contentClass?: ClassValue;
-    /** @deprecated Use headerClass instead */
-    headerclass?: ClassValue;
+    /** Classes on the header row. */
     headerClass?: ClassValue;
-    /** @deprecated Use bodyClass instead */
-    bodyclass?: ClassValue;
+    /** Classes on the body content area. */
     bodyClass?: ClassValue;
-    /** @deprecated Use titleClass instead */
-    titleclass?: ClassValue;
+    /** Classes on the title element. */
     titleClass?: ClassValue;
-    /** @deprecated Use footerClass instead */
-    footerclass?: ClassValue;
+    /** Classes on the footer area. */
     footerClass?: ClassValue;
+    /** Body content. */
     children?: Snippet;
+    /** Replace the default title bar. */
     header?: Snippet;
+    /** Footer content (usually action buttons). */
     footer?: Snippet;
     testId?: string;
 };

package/dist/drawer/drawer.d.ts

@@ -28,7 +28,7 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
         sm: {
             contentWrapper: string;
         };
-        base: {
+        md: {
             contentWrapper: string;
         };
         lg: {
@@ -81,7 +81,7 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
         sm: {
             contentWrapper: string;
         };
-        base: {
+        md: {
             contentWrapper: string;
         };
         lg: {
@@ -134,7 +134,7 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
         sm: {
             contentWrapper: string;
         };
-        base: {
+        md: {
             contentWrapper: string;
         };
         lg: {

package/dist/drawer/drawer.js

@@ -42,7 +42,7 @@ export const drawer = tv({
             [Size.SM]: {
                 contentWrapper: 'w-80'
             },
-            [Size.BASE]: {
+            [Size.MD]: {
                 contentWrapper: 'w-96'
             },
             [Size.LG]: {

package/dist/elements/accordion/Accordion.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
-	import { warnDeprecatedProps } from '../../helper/deprecation.js';
 	import { accordion } from './accordion.js';
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 	import type { AccordionProps } from '../../index.js';
 
 	let {
@@ -17,13 +18,10 @@
 		oncollapse,
 		ontoggle,
 		class: className,
-		titleclass,
-		titleClass = titleclass ?? '',
-		bodyclass,
-		bodyClass = bodyclass ?? '',
+		titleClass = '',
+		bodyClass = '',
 		contentClass,
-		headerclass,
-		headerClass = headerclass ?? '',
+		headerClass = '',
 		summary,
 		header,
 		children,
@@ -31,16 +29,6 @@
 		testId
 	}: AccordionProps = $props();
 
-	warnDeprecatedProps(
-		'Accordion',
-		{ titleclass, bodyclass, headerclass },
-		{
-			titleclass: 'titleClass',
-			bodyclass: 'bodyClass',
-			headerclass: 'headerClass'
-		}
-	);
-
 	const styles = $derived(
 		accordion({
 			color,
@@ -103,6 +91,7 @@
 				class={cn(styles.body(), bodyClass, contentClass)}
 				{id}
 				data-testid={buildTestId('accordion', 'content', testId)}
+				transition:slide={{ duration: 300, easing: quintOut }}
 			>
 				{@render children()}
 			</div>

package/dist/elements/accordion/accordion-types.d.ts

@@ -2,34 +2,81 @@ import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
 import type { VariantColors } from '../../index.js';
+/**
+ * Props for `<Accordion>` — a collapsible section with a clickable
+ * header and a slide-animated body. Use when you have optional detail
+ * that should default to hidden (FAQs, advanced settings).
+ *
+ * For multiple independent collapsibles on one page, render multiple
+ * `<Accordion>`s side-by-side. For a mutually-exclusive "only one open"
+ * group, track the open state yourself with `bind:open`.
+ *
+ * @example
+ * ```svelte
+ * <Accordion title="How does billing work?">
+ *   <p>We charge monthly on the first of the month…</p>
+ * </Accordion>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Custom header snippet receives the open state -->
+ * <Accordion bind:open>
+ *   {#snippet header({ open })}
+ *     <span>Advanced options</span>
+ *     <Badge>{open ? 'Hide' : 'Show'}</Badge>
+ *   {/snippet}
+ *   <form>…</form>
+ * </Accordion>
+ * ```
+ */
 export type AccordionProps = {
     id?: string;
+    /** Plain-text header. Ignored if the `header` snippet is provided. */
     title?: string;
+    /** Short sub-header rendered under the title. */
     description?: string;
+    /** Body content — rendered only when open. */
     children?: Snippet;
+    /**
+     * Short text rendered inline in the collapsed header (e.g. current
+     * selection summary). Distinct from `description`, which is shown
+     * above the body when expanded.
+     */
     summary?: Snippet;
+    /**
+     * Fully custom header snippet. Receives the current open state so you
+     * can render different text / icons per state.
+     */
     header?: Snippet<[{
         open: boolean;
     }]>;
+    /** Bindable open state. @default false */
     open?: boolean;
+    /** Disable expansion. */
     disabled?: boolean;
+    /** Background/border tint. @default 'default' */
     color?: VariantColors;
     class?: ClassValue;
-    /** @deprecated Use titleClass instead */
-    titleclass?: ClassValue;
+    /** Classes for the title text only. */
     titleClass?: ClassValue;
-    /** @deprecated Use bodyClass instead */
-    bodyclass?: ClassValue;
+    /** Alias for `contentClass` — body container classes. */
     bodyClass?: ClassValue;
+    /** Classes for the content/body container. */
     contentClass?: ClassValue;
-    /** @deprecated Use headerClass instead */
-    headerclass?: ClassValue;
+    /** Classes for the clickable header row. */
     headerClass?: ClassValue;
+    /** Optional icon rendered next to the title. */
     icon?: Component;
+    /** Which side of the title to render the icon on. @default 'start' */
     iconPosition?: 'start' | 'end';
+    /** Show a border around the whole accordion. @default true */
     bordered?: boolean;
+    /** Fires when the accordion expands (transitions from closed to open). */
     onexpand?: () => void;
+    /** Fires when the accordion collapses. */
     oncollapse?: () => void;
+    /** Fires on any toggle, receives the new open state. */
     ontoggle?: (open: boolean) => void;
     testId?: string;
 };

package/dist/elements/alert/Alert.svelte

@@ -2,6 +2,8 @@
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
 	import { Color } from '../../variants.js';
+	import { fade } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 	import type { AlertProps, VariantColors } from '../../index.js';
 
 	let {
@@ -34,6 +36,7 @@
 	role="alert"
 	class={cn('relative rounded-lg border p-4', colorClasses[color], className)}
 	data-testid={buildTestId('alert', undefined, testId)}
+	transition:fade={{ duration: 1000, easing: quintOut }}
 >
 	<div class="flex items-start justify-between gap-4">
 		{#if Icon}

package/dist/elements/badge/Badge.svelte

@@ -6,7 +6,7 @@
 	import type { BadgeProps } from '../../index.js';
 
 	let {
-		size = Size.BASE,
+		size = Size.MD,
 		color = Color.DEFAULT,
 		class: className = '',
 		children,

package/dist/elements/badge/badge-types.d.ts

@@ -1,11 +1,33 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { VariantColors, VariantSizes } from '../../index.js';
+/**
+ * Props for `<Badge>` — a small rounded pill used for statuses, counts,
+ * tags, and inline labels. Pass `onclose` to make it dismissable with a ×.
+ *
+ * @example
+ * ```svelte
+ * <Badge color="success">Active</Badge>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Dismissable tag -->
+ * <Badge color="info" onclose={() => removeTag('react')}>react</Badge>
+ * ```
+ */
 export type BadgeProps = {
+    /** @default 'sm' */
     size?: VariantSizes;
+    /** @default 'default' */
     color?: VariantColors;
     class?: ClassValue;
+    /** Badge content (usually short text). */
     children: Snippet;
+    /**
+     * When provided, renders a × dismiss button and calls this handler
+     * when clicked. Use for removable tag UIs.
+     */
     onclose?: (event: MouseEvent) => void;
     testId?: string;
 };

package/dist/elements/badge/badge.d.ts

@@ -8,7 +8,7 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
             base: string;
             icon: string;
         };
-        base: {
+        md: {
             base: string;
             icon: string;
         };
@@ -68,7 +68,7 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
             base: string;
             icon: string;
         };
-        base: {
+        md: {
             base: string;
             icon: string;
         };
@@ -128,7 +128,7 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
             base: string;
             icon: string;
         };
-        base: {
+        md: {
             base: string;
             icon: string;
         };

package/dist/elements/badge/badge.js

@@ -15,7 +15,7 @@ export const badge = tv({
                 base: 'h-5 px-2 text-xs rounded gap-1',
                 icon: 'h-3 w-3'
             },
-            [Size.BASE]: {
+            [Size.MD]: {
                 base: 'h-6 px-2.5 text-sm rounded-md gap-1.5',
                 icon: 'h-3.5 w-3.5'
             },