@makolabs/ripple 2.1.0 → 2.3.0

package/dist/forms/SegmentedControl.svelte

@@ -29,23 +29,19 @@
 
 	const hasError = $derived(errors && errors.length > 0);
 
-	const clarkCollapsed = $derived(
-		compact && appearance === 'clarkSidebar' && orientation === 'vertical'
-	);
-
 	const trackClass = $derived(
 		cn(
 			segmentedTrack({
 				appearance,
-				orientation,
-				clarkCollapsed
+				orientation
 			}),
-			orientation === 'vertical' && compact && appearance !== 'clarkSidebar' && 'items-stretch'
+			orientation === 'vertical' && compact && 'items-stretch'
 		)
 	);
 
 	const rootClass = $derived(
 		cn(
+			'w-fit',
 			labelLayout === 'inline' ? 'flex flex-row items-center gap-2' : 'flex flex-col gap-2',
 			className
 		)
@@ -110,8 +106,6 @@
 			}
 		}
 	}
-
-	const isClark = $derived(appearance === 'clarkDefault' || appearance === 'clarkSidebar');
 </script>
 
 <div class={rootClass}>
@@ -133,8 +127,6 @@
 	>
 		{#each options as option, index (option.value)}
 			{@const isSelected = value === option.value}
-			{@const isFirst = index === 0}
-			{@const isLast = index === options.length - 1}
 			{@const segDisabled = disabled || option.disabled}
 			<button
 				id="{groupId}-seg-{index}"
@@ -149,11 +141,7 @@
 					disabled: !!segDisabled,
 					appearance,
 					color: color as VariantColors,
-					size: size as VariantSizes,
-					isFirst,
-					isLast,
-					orientation,
-					clarkCollapsed
+					size: size as VariantSizes
 				})}
 				data-testid={buildTestId('segmented', 'item', testId, index)}
 				onclick={() => handleSelect(option.value, option.disabled)}
@@ -164,8 +152,7 @@
 				{/if}
 				<span
 					class={cn(
-						!compact && (size === Size.XS || size === Size.SM) && !isClark && 'text-sm',
-						isClark && !compact && 'text-xs font-medium',
+						!compact && (size === Size.XS || size === Size.SM) && 'text-sm',
 						compact && 'sr-only'
 					)}
 				>

package/dist/forms/Tags.svelte

@@ -105,7 +105,7 @@
 
 	const containerClass = $derived(
 		cn(
-			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-sm px-3 py-2',
+			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-xs px-3 py-2',
 			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
 			{
 				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500':

package/dist/forms/form-types.d.ts

@@ -33,19 +33,6 @@ export type RadioOption = {
     value: string;
     label: string;
 };
-export type RadioInputsProps = {
-    name: string;
-    label?: string;
-    options: RadioOption[];
-    value?: string;
-    disabled?: boolean;
-    class?: ClassValue;
-    size?: VariantSizes;
-    color?: VariantColors;
-    errors?: string[];
-    required?: boolean;
-    testId?: string;
-};
 export type CheckboxProps = {
     name: string;
     label?: string;
@@ -102,6 +89,7 @@ export interface DateRangeProps {
     startLabel?: string;
     endLabel?: string;
     format?: string;
+    errors?: string[];
     onselect?: ({ startDate, endDate }: {
         startDate?: Date;
         endDate?: Date;
@@ -156,16 +144,6 @@ export interface SliderProps {
     };
     testId?: string;
 }
-export type RadioPillProps = {
-    name: string;
-    options: RadioOption[];
-    value?: string;
-    label?: string;
-    class?: ClassValue;
-    errors?: string[];
-    onchange?: (value: string) => void;
-    testId?: string;
-};
 /** Single segment in a fused SegmentedControl bar (not TabGroup — no panels). */
 export type SegmentedOption = RadioOption & {
     /** Shown before label, e.g. flag emoji */
@@ -180,19 +158,12 @@ export type SegmentedControlProps = {
     name?: string;
     label?: string;
     class?: ClassValue;
-    /**
-     * - `surface` / `inverted`: generic Ripple styling (`color` applies).
-     * - `clarkDefault` / `clarkSidebar`: match Clark AR market bar (fixed blue selection, inline-friendly).
-     */
-    appearance?: 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
+    appearance?: 'surface' | 'inverted' | 'pills';
     orientation?: 'horizontal' | 'vertical';
     color?: VariantColors;
     size?: VariantSizes;
-    /** Hide segment label text; prefix only (`sr-only`); with Clark sidebar + vertical = collapsed column */
     compact?: boolean;
-    /** Label above the track vs beside the track (Clark uses `inline`) */
     labelLayout?: 'above' | 'inline';
-    /** Optional class on the visible label (e.g. `sr-only` when collapsed sidebar) */
     labelClass?: ClassValue;
     disabled?: boolean;
     errors?: string[];

package/dist/forms/market/market-selector-types.d.ts

@@ -1,41 +1,21 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { CountryCode } from './country-data.js';
 import type { VariantColors, VariantSizes } from '../../index.js';
-/** Clark AR toolbar (`default`) vs dark sidebar (`sidebar`) — maps to SegmentedControl Clark appearances. */
-export type MarketSelectorVariant = 'default' | 'sidebar';
 export type MarketSelectorProps = {
-    /**
-     * Non-empty ordered list of ISO 3166-1 alpha-2 codes to show (e.g. `[Market.DE, Market.GB, Market.CH]`).
-     * United Kingdom is `Market.GB` (not `UK`).
-     */
     markets: CountryCode[];
-    /** Selected market; use `bind:selectedMarket`. */
     selectedMarket?: CountryCode;
-    /** Used when `selectedMarket` is unset or not in `markets` (e.g. first paint or bad URL). */
     defaultMarket?: CountryCode;
     showFlags?: boolean;
     label?: string;
-    /**
-     * Clark AR–style market bar. When set, overrides `appearance` to `clarkDefault` / `clarkSidebar`
-     * and defaults `labelLayout` to `inline` (override with `labelLayout`).
-     */
-    variant?: MarketSelectorVariant;
-    /**
-     * With `variant="sidebar"` only: vertical icon column and `sr-only` segment labels (Clark collapsed sidebar).
-     */
-    collapsed?: boolean;
-    appearance?: 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
+    appearance?: 'surface' | 'inverted' | 'pills';
     orientation?: 'horizontal' | 'vertical';
-    /** Label above vs beside the track (Clark uses `inline` via `variant`). */
     labelLayout?: 'above' | 'inline';
-    /** Extra classes on the visible label (e.g. override default `sr-only` when collapsed). */
     labelClass?: ClassValue;
     color?: VariantColors;
     size?: VariantSizes;
     compact?: boolean;
     disabled?: boolean;
     class?: ClassValue;
-    /** Optional form field name (hidden input), same as `SegmentedControl`. */
     name?: string;
     onchange?: (market: CountryCode) => void;
     testId?: string;

package/dist/forms/segmented-control.d.ts

@@ -1,60 +1,36 @@
 import type { VariantColors, VariantSizes } from '../index.js';
 /** @see SegmentedControlProps['appearance'] */
-export type SegmentAppearance = 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
+export type SegmentAppearance = 'surface' | 'inverted' | 'pills';
 export declare const segmentedTrack: import("tailwind-variants").TVReturnType<{
     appearance: {
         surface: string;
         inverted: string;
-        /** Clark (light toolbar): flush segments, gray border, white track */
-        clarkDefault: string;
-        /** Clark (dark sidebar): translucent track */
-        clarkSidebar: string;
+        pills: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
-    /** Collapsed sidebar column layout (Clark) */
-    clarkCollapsed: {
-        true: string;
-        false: string;
-    };
 }, undefined, "inline-flex overflow-hidden rounded-lg border", {
     appearance: {
         surface: string;
         inverted: string;
-        /** Clark (light toolbar): flush segments, gray border, white track */
-        clarkDefault: string;
-        /** Clark (dark sidebar): translucent track */
-        clarkSidebar: string;
+        pills: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
-    /** Collapsed sidebar column layout (Clark) */
-    clarkCollapsed: {
-        true: string;
-        false: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     appearance: {
         surface: string;
         inverted: string;
-        /** Clark (light toolbar): flush segments, gray border, white track */
-        clarkDefault: string;
-        /** Clark (dark sidebar): translucent track */
-        clarkSidebar: string;
+        pills: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
-    /** Collapsed sidebar column layout (Clark) */
-    clarkCollapsed: {
-        true: string;
-        false: string;
-    };
 }, undefined, "inline-flex overflow-hidden rounded-lg border", unknown, unknown, undefined>>;
 export declare function segmentClasses(args: {
     selected: boolean;
@@ -62,11 +38,5 @@ export declare function segmentClasses(args: {
     appearance: SegmentAppearance;
     color: VariantColors;
     size: VariantSizes;
-    isFirst: boolean;
-    isLast: boolean;
-    orientation: 'horizontal' | 'vertical';
-    /** Clark sidebar collapsed: stacked segments, smaller padding */
-    clarkCollapsed?: boolean;
 }): string;
-/** Label next to / above the track (Clark uses muted gray or default-300 in sidebar). */
 export declare function segmentedLabelClasses(appearance: SegmentAppearance, hasError: boolean): string;

package/dist/forms/segmented-control.js

@@ -5,34 +5,18 @@ export const segmentedTrack = tv({
     base: 'inline-flex overflow-hidden rounded-lg border',
     variants: {
         appearance: {
-            surface: 'border-default-200 bg-default-50 p-0.5',
+            surface: 'border-default-200 bg-white p-0',
             inverted: 'border-white/20 bg-white/5 p-0.5',
-            /** Clark (light toolbar): flush segments, gray border, white track */
-            clarkDefault: 'items-center border-gray-300 bg-white p-0',
-            /** Clark (dark sidebar): translucent track */
-            clarkSidebar: 'items-center border-white/20 bg-white/5 p-0'
+            pills: 'border-transparent bg-transparent gap-1.5 p-0 overflow-visible rounded-none'
         },
         orientation: {
             horizontal: 'flex-row',
             vertical: 'w-full flex-col'
-        },
-        /** Collapsed sidebar column layout (Clark) */
-        clarkCollapsed: {
-            true: 'gap-1',
-            false: ''
         }
     },
-    compoundVariants: [
-        {
-            appearance: ['clarkDefault', 'clarkSidebar'],
-            orientation: 'vertical',
-            class: 'items-center'
-        }
-    ],
     defaultVariants: {
         appearance: 'surface',
-        orientation: 'horizontal',
-        clarkCollapsed: false
+        orientation: 'horizontal'
     }
 });
 const selectedByColor = {
@@ -46,41 +30,23 @@ const selectedByColor = {
 };
 const segmentSize = {
     [Size.XS]: 'gap-1 px-2 py-1 text-xs',
-    [Size.SM]: 'gap-1.5 px-2.5 py-1.5 text-xs',
+    [Size.SM]: 'gap-1.5 px-3 py-1.5 text-xs',
     [Size.BASE]: 'gap-1.5 px-3 py-1.5 text-sm',
     [Size.LG]: 'gap-2 px-4 py-2 text-base',
     [Size.XL]: 'gap-2 px-4 py-2.5 text-lg',
     [Size.XXL]: 'gap-2 px-5 py-3 text-xl'
 };
-function isClark(appearance) {
-    return appearance === 'clarkDefault' || appearance === 'clarkSidebar';
-}
 export function segmentClasses(args) {
-    const { selected, disabled, appearance, color, size, isFirst, isLast, orientation, clarkCollapsed } = args;
-    if (isClark(appearance)) {
-        const isSidebar = appearance === 'clarkSidebar';
-        const rounding = clarkCollapsed && isSidebar
-            ? 'rounded-md'
-            : orientation === 'horizontal'
-                ? cn(isFirst && 'rounded-l-lg', isLast && 'rounded-r-lg')
-                : cn(isFirst && 'rounded-t-lg', isLast && 'rounded-b-lg');
-        const clarkPad = clarkCollapsed && isSidebar ? 'justify-center px-2 py-1.5' : 'gap-1.5 px-3 py-1.5';
-        const clarkBase = cn('group relative flex cursor-pointer items-center transition-all duration-150', clarkPad, 'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none', isSidebar ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', rounding, disabled && 'cursor-not-allowed opacity-50');
-        if (disabled) {
-            return cn(clarkBase, 'text-default-400');
-        }
-        if (selected) {
-            return cn(clarkBase, 'bg-blue-600 text-white');
-        }
-        if (appearance === 'clarkDefault') {
-            return cn(clarkBase, 'bg-white text-gray-600 hover:bg-gray-50');
-        }
-        return cn(clarkBase, 'text-default-200 hover:bg-white/10');
+    const { selected, disabled, appearance, color, size } = args;
+    if (appearance === 'pills') {
+        const pillBase = cn('flex cursor-pointer items-center justify-center rounded-full font-medium transition-colors duration-150', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-offset-2', segmentSize[size], disabled && 'cursor-not-allowed opacity-50');
+        if (disabled)
+            return cn(pillBase, 'text-default-400');
+        if (selected)
+            return cn(pillBase, selectedByColor[color]);
+        return cn(pillBase, 'bg-default-100 text-default-700 hover:bg-default-200');
     }
-    const rounding = orientation === 'horizontal'
-        ? cn(isFirst && 'rounded-l-md', isLast && 'rounded-r-md')
-        : cn(isFirst && 'rounded-t-md', isLast && 'rounded-b-md');
-    const base = cn('flex cursor-pointer items-center justify-center font-medium transition-colors duration-150', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none', appearance === 'inverted' ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', segmentSize[size], rounding, disabled && 'cursor-not-allowed opacity-50');
+    const base = cn('flex cursor-pointer items-center justify-center font-medium transition-colors duration-150', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none', appearance === 'inverted' ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', segmentSize[size], disabled && 'cursor-not-allowed opacity-50');
     if (disabled) {
         return cn(base, 'text-default-400');
     }
@@ -88,20 +54,14 @@ export function segmentClasses(args) {
         return cn(base, selectedByColor[color]);
     }
     if (appearance === 'surface') {
-        return cn(base, 'bg-transparent text-default-700 hover:bg-white/90');
+        return cn(base, 'bg-white text-default-600 hover:bg-default-50');
     }
     return cn(base, 'bg-transparent text-default-200 hover:bg-white/10');
 }
-/** Label next to / above the track (Clark uses muted gray or default-300 in sidebar). */
 export function segmentedLabelClasses(appearance, hasError) {
-    if (hasError) {
-        return 'text-sm font-medium text-danger-500';
-    }
-    if (appearance === 'clarkDefault') {
-        return 'text-sm text-gray-500';
-    }
-    if (appearance === 'clarkSidebar') {
-        return 'text-xs text-default-300';
-    }
-    return cn('text-sm font-medium', 'text-default-700');
+    if (hasError)
+        return 'text-sm font-medium text-danger-600';
+    if (appearance === 'inverted')
+        return 'text-sm font-medium text-default-200';
+    return 'text-sm font-medium text-default-700';
 }

package/dist/index.d.ts

@@ -28,22 +28,19 @@ export type { BreadcrumbItem, BreadcrumbsProps, PageHeaderProps } from './header
 export type { TabItem, TabProps, TabsGroupProps, TabContentProps } from './layout/tabs/tabs-types.js';
 export type { NavbarLinkItem, NavbarProps } from './layout/navbar/navbar-types.js';
 export type { MenuBar, BaseNavigationItem, WithIcon, Activatable, LinkItem, ParentItem, DividerItem, NavigationItem, LogoType, NavGroupProps, NavItemProps, SidebarProps } from './layout/sidebar/sidebar-types.js';
-export type { ChartColorKey, ChartColorValue, ChartColors, ChartType, ChartColorString, XAxisConfig, YAxisConfig, SeriesConfig, GridConfig, LegendConfig, TooltipConfig, ToolboxConfig, ChartConfig, PointClickType, ChartRenderType, ChartProps } from './charts/chart-types.js';
-export type { FormProps, InputProps, RadioOption, RadioInputsProps, CheckboxProps, ToggleProps, CurrencyOption, NumberInputProps, DateRangeProps, DateSelectEvent, TagsProps, SliderMode, NotationType, EnumOption, SliderProps, RadioPillProps, SegmentedOption, SegmentedControlProps } from './forms/form-types.js';
+export type { ChartColorKey, ChartColorValue, ChartColors, ChartType, ChartColorString, XAxisConfig, YAxisConfig, SeriesConfig, ChartThreshold, ChartAnnotation, GridConfig, LegendConfig, TooltipConfig, ToolboxConfig, ChartConfig, PointClickType, ChartRenderType, ChartProps } from './charts/chart-types.js';
+export type { FormProps, InputProps, RadioOption, CheckboxProps, ToggleProps, CurrencyOption, NumberInputProps, DateRangeProps, DateSelectEvent, TagsProps, SliderMode, NotationType, EnumOption, SliderProps, SegmentedOption, SegmentedControlProps } from './forms/form-types.js';
 export type { CountryCode } from './forms/market/country-data.js';
 export type { MarketCode } from './forms/market/market.js';
 export { ALL_COUNTRY_CODES, COUNTRY_NAMES } from './forms/market/country-data.js';
 export { Market } from './forms/market/market.js';
-export type { MarketSelectorProps, MarketSelectorVariant } from './forms/market/market-selector-types.js';
+export type { MarketSelectorProps } from './forms/market/market-selector-types.js';
 export { countryCodeToFlagEmoji } from './forms/market/flag-emoji.js';
 export type { ProgressSegment, ProgressProps } from './elements/progress/progress-types.js';
 export type { SpinnerProps } from './elements/spinner/spinner-types.js';
 export type { EmptyStateProps, EmptyStateSize } from './elements/empty-state/empty-state-types.js';
-export type { CollapsibleProps } from './elements/collapsible/collapsible-types.js';
 export type { TooltipProps, TooltipPlacement } from './elements/tooltip/tooltip-types.js';
-export type { ComboboxItem, ComboboxProps } from './elements/combobox/combobox-types.js';
 export type { AccordionProps } from './elements/accordion/accordion-types.js';
-export type { TimelineItem } from './elements/timeline/timeline-types.js';
 export type { FilterTab, FilterGroup, CompactFiltersProps } from './filters/filter-types.js';
 export type { ActivityItemBadge, ActivityItemAction, ActivityItem, ActivityListProps, ActivityListSize } from './layout/activity-list/activity-list-types.js';
 export type { FileUploadProps, FileUploadSize, FilePreviewProps, UploadedFile, StagedFile } from './elements/file-upload/file-upload-types.js';
@@ -84,11 +81,8 @@ export { default as Spinner } from './elements/spinner/Spinner.svelte';
 export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
 export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
 export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
-export { default as Collapsible } from './elements/collapsible/Collapsible.svelte';
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
-export { default as Combobox } from './elements/combobox/Combobox.svelte';
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
-export { default as Timeline } from './elements/timeline/Timeline.svelte';
 export { default as Chart } from './charts/Chart.svelte';
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
@@ -99,14 +93,12 @@ export { default as CodeRenderer } from './ai/CodeRenderer.svelte';
 export * from './ai/content-detector.js';
 export { default as Form } from './forms/Form.svelte';
 export { default as Input } from './forms/Input.svelte';
-export { default as RadioInputs } from './forms/RadioInputs.svelte';
 export { default as Checkbox } from './forms/Checkbox.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as Slider } from './forms/Slider.svelte';
 export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as DateRange } from './forms/DateRange.svelte';
 export { default as Tags } from './forms/Tags.svelte';
-export { default as RadioPill } from './forms/RadioPill.svelte';
 export { default as SegmentedControl } from './forms/SegmentedControl.svelte';
 export { default as MarketSelector } from './forms/MarketSelector.svelte';
 export { dropdownMenu } from './elements/dropdown/dropdown.js';

package/dist/index.js

@@ -67,16 +67,10 @@ export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
 // Elements - EmptyState
 export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
 export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
-// Elements - Collapsible
-export { default as Collapsible } from './elements/collapsible/Collapsible.svelte';
 // Elements - Tooltip
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
-// Elements - Combobox
-export { default as Combobox } from './elements/combobox/Combobox.svelte';
 // Elements - Accordion
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
-// Elements - Timeline
-export { default as Timeline } from './elements/timeline/Timeline.svelte';
 // Chart
 export { default as Chart } from './charts/Chart.svelte';
 // File Upload
@@ -93,14 +87,12 @@ export * from './ai/content-detector.js';
 // Form Component Exports
 export { default as Form } from './forms/Form.svelte';
 export { default as Input } from './forms/Input.svelte';
-export { default as RadioInputs } from './forms/RadioInputs.svelte';
 export { default as Checkbox } from './forms/Checkbox.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as Slider } from './forms/Slider.svelte';
 export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as DateRange } from './forms/DateRange.svelte';
 export { default as Tags } from './forms/Tags.svelte';
-export { default as RadioPill } from './forms/RadioPill.svelte';
 export { default as SegmentedControl } from './forms/SegmentedControl.svelte';
 export { default as MarketSelector } from './forms/MarketSelector.svelte';
 // ============================================================================

package/dist/layout/activity-list/ActivityList.svelte

@@ -105,6 +105,61 @@
 						<div class="min-w-0 flex-1" data-activity-custom="">
 							{@render customContent?.(activityItem, index)}
 						</div>
+					{:else if timeline && activityItem.subtitle}
+						<div class="min-w-0 flex-1">
+							<div class="flex items-start justify-between gap-3">
+								<div
+									class="ring-default-200 flex-1 rounded-md bg-white p-3 ring-1"
+									data-activity-comment=""
+								>
+									<div class="mb-1 flex justify-between gap-x-4">
+										<div class="flex flex-wrap items-center gap-2">
+											<button
+												class="text-default-900 text-sm font-medium"
+												onclick={() => onItemClick?.(activityItem, index)}
+											>
+												{activityItem.title}
+											</button>
+											{#if activityItem.badges}
+												{#each activityItem.badges as badge (badge.text)}
+													{#if badge.color}
+														<Badge color={badge.color} size={Size.SM}>{badge.text}</Badge>
+													{:else if badge.class}
+														<span
+															class="inline-flex rounded-full px-2 py-1 text-xs font-medium {badge.class}"
+														>
+															{badge.text}
+														</span>
+													{:else}
+														<Badge size={Size.SM}>{badge.text}</Badge>
+													{/if}
+												{/each}
+											{/if}
+										</div>
+										{#if activityItem.timestamp}
+											<div class={itemTimestamp()} data-activity-timestamp="">
+												{activityItem.timestamp}
+											</div>
+										{/if}
+									</div>
+									<p class="text-default-500 text-sm">{activityItem.subtitle}</p>
+								</div>
+							</div>
+							{#if activityItem.actions}
+								<div class={cn(itemActions(), 'mt-2')}>
+									{#each activityItem.actions as action (action.label)}
+										<Button
+											size={Size.XS}
+											variant={action.variant ?? 'outline'}
+											color={action.color ?? Color.DEFAULT}
+											onclick={() => action.onClick?.()}
+										>
+											{action.label}
+										</Button>
+									{/each}
+								</div>
+							{/if}
+						</div>
 					{:else}
 						<div class={itemContent()}>
 							<div class={itemMain()}>
@@ -117,7 +172,6 @@
 											{#if badge.color}
 												<Badge color={badge.color} size={Size.SM}>{badge.text}</Badge>
 											{:else if badge.class}
-												<!-- Legacy class-based badge — kept for backward compat -->
 												<span
 													class="inline-flex rounded-full px-2 py-1 text-xs font-medium {badge.class}"
 												>

package/dist/variants.js

@@ -24,12 +24,12 @@ export const ChartColor = {
     DEFAULT: 'default'
 };
 export const defaultChartColors = {
-    [ChartColor.HEALTH]: '#1F69FF',
-    [ChartColor.PROPERTY]: '#2D9D78',
-    [ChartColor.AUTO]: '#E8A317',
-    [ChartColor.LIFE]: '#E34974',
-    [ChartColor.OTHER]: '#7B3FE4',
-    [ChartColor.DEFAULT]: '#6B7280'
+    [ChartColor.HEALTH]: '#6366f1',
+    [ChartColor.PROPERTY]: '#10b981',
+    [ChartColor.AUTO]: '#f59e0b',
+    [ChartColor.LIFE]: '#ef4444',
+    [ChartColor.OTHER]: '#8b5cf6',
+    [ChartColor.DEFAULT]: '#64748b'
 };
 export const colors = Object.values(Color);
 export const sizes = Object.values(Size);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "2.1.0",
+	"version": "2.3.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {

package/dist/elements/collapsible/Collapsible.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../helper/cls.js';
-	import { buildTestId } from '../../helper/testid.js';
-	import type { CollapsibleProps } from '../../index.js';
-
-	let {
-		open = $bindable(false),
-		title,
-		header,
-		children,
-		class: className = '',
-		headerClass = '',
-		contentClass = '',
-		disabled = false,
-		ontoggle,
-		testId
-	}: CollapsibleProps = $props();
-
-	function toggle() {
-		if (disabled) return;
-		open = !open;
-		ontoggle?.(open);
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault();
-			toggle();
-		}
-	}
-</script>
-
-<div
-	class={cn('border-default-200 overflow-hidden rounded-md border', className)}
-	data-testid={buildTestId('collapsible', undefined, testId)}
-	data-open={open ? 'true' : 'false'}
->
-	<button
-		type="button"
-		class={cn(
-			'flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-3 text-left transition-colors',
-			'hover:bg-default-50 focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none',
-			disabled && 'cursor-not-allowed opacity-50',
-			headerClass
-		)}
-		aria-expanded={open}
-		aria-disabled={disabled ? 'true' : undefined}
-		{disabled}
-		onclick={toggle}
-		onkeydown={handleKeydown}
-	>
-		{#if header}
-			{@render header({ open })}
-		{:else}
-			<span class="text-default-800 font-medium">{title}</span>
-		{/if}
-		<svg
-			class={cn(
-				'text-default-500 h-4 w-4 shrink-0 transition-transform duration-200',
-				open && 'rotate-180'
-			)}
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 20 20"
-			fill="currentColor"
-			aria-hidden="true"
-		>
-			<path
-				fill-rule="evenodd"
-				d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
-				clip-rule="evenodd"
-			/>
-		</svg>
-	</button>
-	{#if open}
-		<div class={cn('border-default-200 border-t px-4 py-3', contentClass)}>
-			{@render children()}
-		</div>
-	{/if}
-</div>

package/dist/elements/collapsible/Collapsible.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { CollapsibleProps } from '../../index.js';
-declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "open">;
-type Collapsible = ReturnType<typeof Collapsible>;
-export default Collapsible;