kumo-svelte 0.2.0 → 0.3.0

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.3.0",
   "components": {
     "Autocomplete": {
       "name": "Autocomplete",
@@ -608,15 +608,14 @@
       },
       "colors": [
         "bg-kumo-base",
-        "bg-kumo-brand",
-        "bg-kumo-brand-hover",
-        "bg-kumo-danger",
         "bg-kumo-tint",
         "ring-kumo-brand",
+        "ring-kumo-danger",
         "ring-kumo-focus",
-        "ring-kumo-hairline",
+        "ring-kumo-line",
         "text-kumo-danger",
         "text-kumo-default",
+        "text-kumo-strong",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -3569,7 +3568,7 @@
           "description": "Additional classes merged onto the root element."
         },
         "onValueChange": {
-          "type": "(value: string) => void",
+          "type": "(value: string, eventDetails?: unknown) => void",
           "optional": true,
           "description": "Called when the value changes."
         }
@@ -3635,7 +3634,7 @@
               "description": "Supporting description text."
             },
             "value": {
-              "type": "string",
+              "type": "Value",
               "optional": true,
               "description": "Controlled value."
             },
@@ -3665,7 +3664,7 @@
               "description": "Additional classes merged onto the root element."
             },
             "defaultValue": {
-              "type": "string",
+              "type": "Value",
               "optional": true,
               "description": "Initial uncontrolled value."
             },
@@ -3675,7 +3674,7 @@
               "description": "Marks the field as required."
             },
             "onValueChange": {
-              "type": "(value: string) => void",
+              "type": "(value: Value, eventDetails?: unknown) => void",
               "optional": true,
               "description": "Called when the value changes."
             }
@@ -3731,7 +3730,7 @@
               "description": "Supporting description text."
             },
             "value": {
-              "type": "string",
+              "type": "Value",
               "optional": false,
               "required": true,
               "description": "Controlled value."
@@ -5189,6 +5188,119 @@
       "props": {},
       "colors": []
     },
+    "Toolbar": {
+      "name": "Toolbar",
+      "type": "component",
+      "category": "Action",
+      "description": "Compose explicit toolbar controls into one clean grouped card.",
+      "importPath": "kumo-svelte/components/toolbar",
+      "sourceFile": "components/toolbar",
+      "props": {
+        "children": {
+          "type": "Snippet",
+          "optional": false,
+          "required": true,
+          "description": "Toolbar controls rendered as one grouped card."
+        },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
+          "default": "base",
+          "description": "Locks every supported toolbar item to this size."
+        },
+        "class": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional classes merged onto the toolbar root."
+        }
+      },
+      "colors": [
+        "bg-kumo-control",
+        "border-kumo-line",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
+        "ring-kumo-line"
+      ],
+      "subComponents": {
+        "Button": {
+          "description": "Toolbar.Button",
+          "props": {
+            "children": {
+              "type": "Snippet",
+              "optional": true,
+              "description": "Optional visible button label."
+            },
+            "icon": {
+              "type": "Component",
+              "optional": true,
+              "description": "Optional icon component rendered before the label."
+            },
+            "shape": {
+              "type": "enum",
+              "optional": true,
+              "values": [
+                "base",
+                "square",
+                "circle"
+              ],
+              "description": "Button shape. Icon-only toolbar buttons default to square."
+            },
+            "disabled": {
+              "type": "boolean",
+              "optional": true,
+              "description": "Disables the toolbar button."
+            },
+            "loading": {
+              "type": "boolean",
+              "optional": true,
+              "description": "Shows a loading indicator and disables the toolbar button."
+            }
+          }
+        },
+        "Input": {
+          "description": "Toolbar.Input",
+          "props": {
+            "value": {
+              "type": "string | number",
+              "optional": true,
+              "description": "Input value, bindable with `bind:value`."
+            },
+            "onValueChange": {
+              "type": "(value: string) => void",
+              "optional": true,
+              "description": "Called when the input value changes."
+            },
+            "class": {
+              "type": "string",
+              "optional": true,
+              "description": "Additional classes merged onto the toolbar input."
+            }
+          }
+        },
+        "InputGroup": {
+          "description": "Toolbar.InputGroup",
+          "props": {
+            "children": {
+              "type": "Snippet",
+              "optional": false,
+              "required": true,
+              "description": "InputGroup children rendered as one toolbar item."
+            },
+            "class": {
+              "type": "string",
+              "optional": true,
+              "description": "Additional classes merged onto the toolbar input group."
+            }
+          }
+        }
+      }
+    },
     "Tooltip": {
       "name": "Tooltip",
       "type": "component",
@@ -5362,12 +5474,14 @@
       "Tabs",
       "Text",
       "Toast",
+      "Toolbar",
       "Tooltip"
     ],
     "byCategory": {
       "Action": [
         "Button",
-        "Link"
+        "Link",
+        "Toolbar"
       ],
       "Display": [
         "Badge",
@@ -5465,6 +5579,7 @@
         "Tabs",
         "Text",
         "Toast",
+        "Toolbar",
         "Tooltip"
       ],
       "block": [

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Kumo Svelte Component Registry
 
-Version: 0.2.0
+Version: 0.3.0
 
 ## Autocomplete
 
@@ -322,6 +322,14 @@ A notification system for displaying brief, non-intrusive messages to users.
 - Import: `import { Toast } from "kumo-svelte/components/toast";`
 - Source: `components/toast`
 
+## Toolbar
+
+Compose explicit toolbar controls into one clean grouped card.
+
+- Category: Action
+- Import: `import { Toolbar } from "kumo-svelte/components/toolbar";`
+- Source: `components/toolbar`
+
 ## Tooltip
 
 A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

package/dist/components/button/Button.svelte

@@ -45,12 +45,13 @@
     },
     variant: {
       primary: {
-        classes: 'bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50',
+        classes:
+          'relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50',
         description: 'High-emphasis button for primary actions'
       },
       secondary: {
         classes:
-          'bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base',
+          'bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-base',
         description: 'Default button style for most actions'
       },
       ghost: {
@@ -58,16 +59,18 @@
         description: 'Minimal button with no background'
       },
       destructive: {
-        classes: 'bg-kumo-danger !text-white hover:bg-kumo-danger/70',
+        classes:
+          'relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50',
         description: 'Danger button for destructive actions like delete'
       },
       'secondary-destructive': {
         classes:
-          'bg-kumo-base !text-kumo-danger ring not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base',
+          'bg-kumo-base !text-kumo-danger ring not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30 disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base',
         description: 'Secondary button with destructive text for less prominent dangerous actions'
       },
       outline: {
-        classes: 'bg-transparent text-kumo-default ring ring-kumo-hairline',
+        classes:
+          'bg-transparent text-kumo-default ring ring-kumo-line transition-colors not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25',
         description: 'Bordered button with transparent background'
       }
     }
@@ -100,10 +103,10 @@
       'focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand',
       'cursor-pointer',
       'disabled:cursor-not-allowed disabled:text-kumo-subtle',
-      KUMO_BUTTON_VARIANTS.variant[variant].classes,
       KUMO_BUTTON_VARIANTS.size[size].classes,
       KUMO_BUTTON_VARIANTS.shape[shape].classes,
-      isCompactShape && KUMO_BUTTON_VARIANTS.compactSize[size].classes
+      isCompactShape && KUMO_BUTTON_VARIANTS.compactSize[size].classes,
+      KUMO_BUTTON_VARIANTS.variant[variant].classes
     );
   }
 
@@ -120,7 +123,7 @@
     variant?: Variant;
     loading?: boolean;
     title?: string;
-    componentName?: 'Button' | 'LinkButton';
+    componentName?: 'Button' | 'LinkButton' | 'Toolbar.Button';
     [key: string]: unknown;
   }
 
@@ -152,6 +155,19 @@
 
   const loaderSize = $derived(size === 'lg' ? 16 : 14);
   const externalProps = $derived(external ? { target: '_blank', rel: 'noopener noreferrer' } : {});
+  const emphasisToken = $derived(
+    variant === 'primary'
+      ? 'var(--color-kumo-brand)'
+      : variant === 'destructive'
+        ? 'var(--color-kumo-danger)'
+        : undefined
+  );
+  const emphasisRing = $derived(emphasisToken ? `color-mix(in oklch, ${emphasisToken}, black 10%)` : undefined);
+  const emphasisBg = $derived(emphasisToken ? `color-mix(in oklch, ${emphasisToken}, white 30%)` : undefined);
+  const emphasisGradientStart = $derived(
+    emphasisToken ? `color-mix(in oklch, ${emphasisToken}, white 15%)` : undefined
+  );
+  const emphasisGradientEnd = $derived(emphasisToken);
 </script>
 
 {#snippet buttonElement()}
@@ -164,16 +180,37 @@
     aria-busy={loading || undefined}
     data-kumo-component={componentName}
     data-kumo-part={href ? 'link-button' : 'button'}
+    style:--kumo-button-emphasis-ring={emphasisRing}
+    style:--kumo-button-emphasis-bg={emphasisBg}
+    style:--kumo-button-emphasis-gradient-start={emphasisGradientStart}
+    style:--kumo-button-emphasis-gradient-end={emphasisGradientEnd}
     {...externalProps}
     {...rest}
   >
-    {#if loading}
-      <Loader size={loaderSize} />
-    {:else if IconComponent}
-      <IconComponent />
-    {/if}
-    {#if children}
-      <span class="contents">{@render children()}</span>
+    {#if emphasisToken}
+      <span
+        aria-hidden="true"
+        class="absolute inset-0 translate-y-px rounded-[inherit] bg-linear-to-b from-(--kumo-button-emphasis-gradient-start) to-(--kumo-button-emphasis-gradient-end) group-hover:from-(--kumo-button-emphasis-bg)"
+      ></span>
+      <span class="relative flex items-center gap-1.5">
+        {#if loading}
+          <Loader size={loaderSize} />
+        {:else if IconComponent}
+          <IconComponent />
+        {/if}
+        {#if children}
+          <span class="contents">{@render children()}</span>
+        {/if}
+      </span>
+    {:else}
+      {#if loading}
+        <Loader size={loaderSize} />
+      {:else if IconComponent}
+        <IconComponent />
+      {/if}
+      {#if children}
+        <span class="contents">{@render children()}</span>
+      {/if}
     {/if}
   </svelte:element>
 {/snippet}

package/dist/components/button/Button.svelte.d.ts

@@ -13,7 +13,7 @@ declare const Button: Component<{
     variant?: "secondary" | "primary" | "ghost" | "destructive" | "secondary-destructive" | "outline";
     loading?: boolean;
     title?: string;
-    componentName?: "Button" | "LinkButton";
+    componentName?: "Button" | "LinkButton" | "Toolbar.Button";
 }, {
     KUMO_BUTTON_VARIANTS: {
         readonly shape: {
@@ -64,11 +64,11 @@ declare const Button: Component<{
         };
         readonly variant: {
             readonly primary: {
-                readonly classes: "bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50";
+                readonly classes: "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50";
                 readonly description: "High-emphasis button for primary actions";
             };
             readonly secondary: {
-                readonly classes: "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base";
+                readonly classes: "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-base";
                 readonly description: "Default button style for most actions";
             };
             readonly ghost: {
@@ -76,15 +76,15 @@ declare const Button: Component<{
                 readonly description: "Minimal button with no background";
             };
             readonly destructive: {
-                readonly classes: "bg-kumo-danger !text-white hover:bg-kumo-danger/70";
+                readonly classes: "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50";
                 readonly description: "Danger button for destructive actions like delete";
             };
             readonly 'secondary-destructive': {
-                readonly classes: "bg-kumo-base !text-kumo-danger ring not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base";
+                readonly classes: "bg-kumo-base !text-kumo-danger ring not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30 disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base";
                 readonly description: "Secondary button with destructive text for less prominent dangerous actions";
             };
             readonly outline: {
-                readonly classes: "bg-transparent text-kumo-default ring ring-kumo-hairline";
+                readonly classes: "bg-transparent text-kumo-default ring ring-kumo-line transition-colors not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25";
                 readonly description: "Bordered button with transparent background";
             };
         };

package/dist/components/chart/ChartLegend.svelte

@@ -8,13 +8,47 @@
     value: string;
     unit?: string;
     inactive?: boolean;
+    onpointerenter?: (event: PointerEvent) => void;
+    onpointerleave?: (event: PointerEvent) => void;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+    [key: string]: unknown;
   }
 
-  let { variant = 'small', name, color, value, unit, inactive = false }: Props = $props();
+  let {
+    variant = 'small',
+    name,
+    color,
+    value,
+    unit,
+    inactive = false,
+    onpointerenter,
+    onpointerleave,
+    onclick,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!onclick || (event.key !== 'Enter' && event.key !== ' ')) return;
+    event.preventDefault();
+    (event.currentTarget as HTMLElement).dispatchEvent(
+      new MouseEvent('click', { bubbles: true, cancelable: true })
+    );
+  }
 </script>
 
 {#if variant === 'large'}
-  <div class="inline-flex min-w-42 flex-col gap-2 py-2">
+  <div
+    role="button"
+    tabindex={onclick ? 0 : -1}
+    class={cn('inline-flex min-w-42 flex-col gap-2 py-2', onclick && 'cursor-pointer', className)}
+    {onpointerenter}
+    {onpointerleave}
+    {onclick}
+    onkeydown={handleKeydown}
+    {...rest}
+  >
     <div class="flex items-center gap-2">
       <span class={cn('inline-block size-2 rounded-full', inactive && 'opacity-50')} style:background-color={color}></span>
       <span class={cn('text-xs', inactive && 'opacity-50')}>{name}</span>
@@ -25,7 +59,16 @@
     </div>
   </div>
 {:else}
-  <div class="inline-flex items-center gap-2">
+  <div
+    role="button"
+    tabindex={onclick ? 0 : -1}
+    class={cn('inline-flex items-center gap-2', onclick && 'cursor-pointer', className)}
+    {onpointerenter}
+    {onpointerleave}
+    {onclick}
+    onkeydown={handleKeydown}
+    {...rest}
+  >
     <span class={cn('inline-block size-2 rounded-full', inactive && 'opacity-50')} style:background-color={color}></span>
     <span class={cn('text-xs', inactive && 'opacity-50')}>{name}</span>
     <span class={cn('text-xs font-medium', inactive && 'opacity-50')}>{value}</span>

package/dist/components/chart/ChartLegend.svelte.d.ts

@@ -5,6 +5,11 @@ interface Props {
     value: string;
     unit?: string;
     inactive?: boolean;
+    onpointerenter?: (event: PointerEvent) => void;
+    onpointerleave?: (event: PointerEvent) => void;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+    [key: string]: unknown;
 }
 declare const ChartLegend: import("svelte").Component<Props, {}, "">;
 type ChartLegend = ReturnType<typeof ChartLegend>;

package/dist/components/chart/TimeseriesChart.svelte

@@ -28,12 +28,14 @@
     tooltipBoundary?: 'clipping-ancestors' | Element | Element[];
     tooltipFollowCursor?: 'both' | 'x';
     incomplete?: { before?: number; after?: number };
+    enableLegendSelection?: boolean;
     height?: number;
     onTimeRangeChange?: (from: number, to: number) => void;
     isDarkMode?: boolean;
     gradient?: boolean;
     loading?: boolean;
     ariaDescription?: string;
+    chartRef?: EChartsType | null;
     animation?: boolean;
     animationDuration?: number;
     optionUpdateBehavior?: Record<string, unknown>;
@@ -56,22 +58,24 @@
     tooltipBoundary,
     tooltipFollowCursor = 'both',
     incomplete,
+    enableLegendSelection = false,
     height = 350,
     onTimeRangeChange,
     isDarkMode,
     gradient = false,
     loading = false,
     ariaDescription,
+    chartRef = $bindable(null),
     animation = true,
     animationDuration = 600,
     optionUpdateBehavior
   }: Props = $props();
 
-  let chartRef: EChartsType | null = $state(null);
   let detectedDarkMode = $state(false);
   let containerRef: HTMLDivElement;
   let tooltipAnchor: HTMLSpanElement | null = $state(null);
   let tooltipState: { ts: number; rows: { name: string; value: number; color: string }[]; hiddenCount: number } | null = $state(null);
+  let legendSelected: Record<string, boolean> | null = $state(null);
   let mousePos = $state({ x: 0, y: 0 });
   const effectiveDarkMode = $derived(isDarkMode ?? detectedDarkMode);
 
@@ -207,6 +211,7 @@
       animationEasing: 'cubicOut',
       animationEasingUpdate: 'cubicOut',
       toolbox: { show: false },
+      ...(enableLegendSelection ? { legend: { show: false } } : {}),
       xAxis: {
         name: xAxisName,
         nameLocation: 'middle',
@@ -242,6 +247,7 @@
 
         for (const series of data) {
           if (seenNames.has(series.name)) continue;
+          if (legendSelected && legendSelected[series.name] === false) continue;
           seenNames.add(series.name);
           const value = findNearest(series.data, ts);
           if (value != null) allRows.push({ name: series.name, value, color: series.color });
@@ -270,6 +276,15 @@
       globalout: () => {
         tooltipState = null;
       },
+      legendselectchanged: (params: { selected?: Record<string, boolean> }) => {
+        legendSelected = params.selected ?? null;
+      },
+      legendselected: (params: { selected?: Record<string, boolean> }) => {
+        legendSelected = params.selected ?? null;
+      },
+      legendunselected: (params: { selected?: Record<string, boolean> }) => {
+        legendSelected = params.selected ?? null;
+      },
       ...(onTimeRangeChange
         ? {
             brushend: (params: any) => {
@@ -283,6 +298,12 @@
     }
   );
 
+  $effect(() => {
+    enableLegendSelection;
+    effectiveDarkMode;
+    legendSelected = null;
+  });
+
   $effect(() => {
     if (chartRef && onTimeRangeChange && !loading) {
       chartRef.dispatchAction({

package/dist/components/chart/TimeseriesChart.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { EChartsType } from 'echarts/core';
 export interface TimeseriesData {
     name: string;
     data: [number, number][];
@@ -23,16 +24,18 @@ interface Props {
         before?: number;
         after?: number;
     };
+    enableLegendSelection?: boolean;
     height?: number;
     onTimeRangeChange?: (from: number, to: number) => void;
     isDarkMode?: boolean;
     gradient?: boolean;
     loading?: boolean;
     ariaDescription?: string;
+    chartRef?: EChartsType | null;
     animation?: boolean;
     animationDuration?: number;
     optionUpdateBehavior?: Record<string, unknown>;
 }
-declare const TimeseriesChart: import("svelte").Component<Props, {}, "">;
+declare const TimeseriesChart: import("svelte").Component<Props, {}, "chartRef">;
 type TimeseriesChart = ReturnType<typeof TimeseriesChart>;
 export default TimeseriesChart;

package/dist/components/dialog/Dialog.svelte

@@ -136,7 +136,7 @@
 
   let contentClasses = $derived(
     cn(
-      'shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0',
+      'shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0',
       KUMO_DIALOG_VARIANTS.size[size].classes,
       className
     )

package/dist/components/radio/Radio.svelte

@@ -76,7 +76,7 @@
     description?: string | Snippet;
     error?: string;
     class?: string;
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: string, eventDetails?: unknown) => void;
   }
 
   let {

package/dist/components/radio/Radio.svelte.d.ts

@@ -56,7 +56,7 @@ interface Props {
     description?: string | Snippet;
     error?: string;
     class?: string;
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: string, eventDetails?: unknown) => void;
 }
 declare const Radio: import("svelte").Component<Props, {}, "value">;
 type Radio = ReturnType<typeof Radio>;