kumo-svelte 0.1.4 → 0.1.5

package/dist/components/autocomplete/Autocomplete.svelte

@@ -7,6 +7,7 @@
     setAutocompleteContext,
     type AutocompleteItem,
     type AutocompleteSize,
+    type AutocompleteValue,
     type NormalizedAutocompleteItem
   } from './context';
 
@@ -16,16 +17,17 @@
     children?: Snippet;
     class?: string;
     items?: AutocompleteItem[];
-    value?: string;
-    defaultValue?: string;
+    value?: AutocompleteValue;
+    defaultValue?: AutocompleteValue;
     open?: boolean;
     size?: AutocompleteSize;
     label?: string | Snippet;
+    labelTooltip?: string | Snippet;
     description?: string | Snippet;
     error?: FieldError;
     required?: boolean;
     filter?: ((item: AutocompleteItem, query: string) => boolean) | null;
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: AutocompleteValue) => void;
     onOpenChange?: (open: boolean) => void;
     [key: string]: unknown;
   }
@@ -39,6 +41,7 @@
     open = $bindable(false),
     size = 'base',
     label,
+    labelTooltip,
     description,
     error,
     required,
@@ -48,7 +51,7 @@
     ...rest
   }: Props = $props();
 
-  let query = $state(value);
+  let query = $state(Array.isArray(value) ? value.join(', ') : String(value ?? ''));
 
   const normalizedItems = $derived(items.map(normalizeAutocompleteItem));
   const errorMessage = $derived(
@@ -61,10 +64,19 @@
 
     return normalizedItems.filter((item) => {
       if (filter) return filter(item.raw, query);
-      return item.label.toLowerCase().includes(term) || item.value.toLowerCase().includes(term);
+      return item.label.toLowerCase().includes(term) || String(item.value).toLowerCase().includes(term);
     });
   });
 
+  function valuesEqual(itemValue: string | number, selectedValue: AutocompleteValue) {
+    if (Array.isArray(selectedValue)) return selectedValue.some((selected) => itemValue === selected);
+    return itemValue === selectedValue;
+  }
+
+  function isSelected(item: NormalizedAutocompleteItem) {
+    return valuesEqual(item.value, value);
+  }
+
   function select(item: NormalizedAutocompleteItem) {
     if (item.disabled) return;
     value = item.value;
@@ -92,7 +104,7 @@
     get value() {
       return value;
     },
-    set value(nextValue: string) {
+    set value(nextValue: AutocompleteValue) {
       value = nextValue;
       onValueChange?.(nextValue);
     },
@@ -109,6 +121,7 @@
     get invalid() {
       return Boolean(errorMessage);
     },
+    isSelected,
     select
   });
 </script>
@@ -120,7 +133,7 @@
 {/snippet}
 
 {#if label || description || errorMessage}
-  <Field {label} {description} error={errorMessage} {required}>
+  <Field {label} {labelTooltip} {description} error={errorMessage} {required}>
     {@render control()}
   </Field>
 {:else}

package/dist/components/autocomplete/Autocomplete.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type AutocompleteItem, type AutocompleteSize } from './context';
+import { type AutocompleteItem, type AutocompleteSize, type AutocompleteValue } from './context';
 type FieldError = string | {
     message?: string;
     match?: boolean;
@@ -8,16 +8,17 @@ export interface Props {
     children?: Snippet;
     class?: string;
     items?: AutocompleteItem[];
-    value?: string;
-    defaultValue?: string;
+    value?: AutocompleteValue;
+    defaultValue?: AutocompleteValue;
     open?: boolean;
     size?: AutocompleteSize;
     label?: string | Snippet;
+    labelTooltip?: string | Snippet;
     description?: string | Snippet;
     error?: FieldError;
     required?: boolean;
     filter?: ((item: AutocompleteItem, query: string) => boolean) | null;
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: AutocompleteValue) => void;
     onOpenChange?: (open: boolean) => void;
     [key: string]: unknown;
 }

package/dist/components/autocomplete/AutocompleteContent.svelte

@@ -3,22 +3,74 @@
   import { getAutocompleteContext } from './context';
   import { cn } from '../../utils/cn';
 
+  type AutocompleteContentAlign = 'start' | 'center' | 'end';
+  type AutocompleteContentSide = 'top' | 'right' | 'bottom' | 'left';
+  type Offset = number | string;
+
   export interface Props {
     children?: Snippet;
     class?: string;
+    align?: AutocompleteContentAlign;
+    alignOffset?: Offset;
+    side?: AutocompleteContentSide;
+    sideOffset?: Offset;
+    style?: string;
     [key: string]: unknown;
   }
 
-  let { children, class: className, ...rest }: Props = $props();
+  let {
+    children,
+    class: className,
+    align = 'start',
+    alignOffset = 0,
+    side = 'bottom',
+    sideOffset = 4,
+    style,
+    ...rest
+  }: Props = $props();
   const context = getAutocompleteContext('Autocomplete.Content');
+
+  const horizontalAlignClasses: Record<AutocompleteContentAlign, string> = {
+    start: 'left-[var(--autocomplete-align-offset)]',
+    center: 'left-1/2 -translate-x-1/2',
+    end: 'right-[var(--autocomplete-align-offset)]'
+  };
+
+  const verticalAlignClasses: Record<AutocompleteContentAlign, string> = {
+    start: 'top-[var(--autocomplete-align-offset)]',
+    center: 'top-1/2 -translate-y-1/2',
+    end: 'bottom-[var(--autocomplete-align-offset)]'
+  };
+
+  const sideClasses: Record<AutocompleteContentSide, string> = {
+    top: 'bottom-full mb-[var(--autocomplete-side-offset)]',
+    right: 'left-full ml-[var(--autocomplete-side-offset)]',
+    bottom: 'top-full mt-[var(--autocomplete-side-offset)]',
+    left: 'right-full mr-[var(--autocomplete-side-offset)]'
+  };
+
+  function toCssUnit(value: Offset) {
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  const positionStyle = $derived(
+    `--autocomplete-align-offset: ${toCssUnit(alignOffset)}; --autocomplete-side-offset: ${toCssUnit(sideOffset)};${style ? ` ${style}` : ''}`
+  );
+  const positionClass = $derived.by(() =>
+    side === 'top' || side === 'bottom'
+      ? cn(sideClasses[side], horizontalAlignClasses[align])
+      : cn(sideClasses[side], verticalAlignClasses[align])
+  );
 </script>
 
 {#if context.open && context.filteredItems.length}
   <div
     class={cn(
-      'absolute z-50 mt-1 flex max-h-96 min-w-full flex-col overflow-hidden rounded-lg bg-kumo-control py-1.5 text-kumo-default shadow-lg ring ring-kumo-line',
+      'absolute z-50 flex max-h-[min(24rem,calc(100vh-8rem))] min-w-full flex-col overflow-hidden rounded-lg bg-kumo-control py-1.5 text-kumo-default shadow-lg ring ring-kumo-line',
+      positionClass,
       className
     )}
+    style={positionStyle}
     {...rest}
   >
     {@render children?.()}

package/dist/components/autocomplete/AutocompleteContent.svelte.d.ts

@@ -1,7 +1,15 @@
 import type { Snippet } from 'svelte';
+type AutocompleteContentAlign = 'start' | 'center' | 'end';
+type AutocompleteContentSide = 'top' | 'right' | 'bottom' | 'left';
+type Offset = number | string;
 export interface Props {
     children?: Snippet;
     class?: string;
+    align?: AutocompleteContentAlign;
+    alignOffset?: Offset;
+    side?: AutocompleteContentSide;
+    sideOffset?: Offset;
+    style?: string;
     [key: string]: unknown;
 }
 declare const AutocompleteContent: import("svelte").Component<Props, {}, "">;

package/dist/components/autocomplete/AutocompleteItem.svelte

@@ -27,14 +27,14 @@
     'group mx-1.5 grid w-[calc(100%-0.75rem)] cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-left text-base outline-none',
     'hover:bg-kumo-overlay focus-visible:z-50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand',
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-    context.value === item.value && 'font-medium',
+    context.isSelected(item) && 'font-medium',
     className
   )}
   onclick={() => context.select(item)}
   {...rest}
 >
   <span class="col-start-1 min-w-0 truncate">{@render children?.()}</span>
-  {#if context.value === item.value}
+  {#if context.isSelected(item)}
     <Check class="col-start-2 size-3.5 self-center text-kumo-default" aria-hidden="true" />
   {/if}
 </button>

package/dist/components/autocomplete/context.d.ts

@@ -1,14 +1,10 @@
 import type { Snippet } from 'svelte';
 export type AutocompleteSize = 'xs' | 'sm' | 'base' | 'lg';
-export type AutocompleteItem = string | {
-    label: string;
-    value: string;
-    disabled?: boolean;
-    group?: string;
-};
+export type AutocompleteValue = string | number | string[];
+export type AutocompleteItem = unknown;
 export type NormalizedAutocompleteItem = {
     label: string;
-    value: string;
+    value: string | number;
     disabled?: boolean;
     group?: string;
     raw: AutocompleteItem;
@@ -18,12 +14,13 @@ export type AutocompleteContext = {
     get filteredItems(): NormalizedAutocompleteItem[];
     get query(): string;
     set query(value: string);
-    get value(): string;
-    set value(value: string);
+    get value(): AutocompleteValue;
+    set value(value: AutocompleteValue);
     get open(): boolean;
     set open(value: boolean);
     get size(): AutocompleteSize;
     get invalid(): boolean;
+    isSelected(item: NormalizedAutocompleteItem): boolean;
     select(item: NormalizedAutocompleteItem): void;
 };
 export type AutocompleteGroupContext = {

package/dist/components/autocomplete/context.js

@@ -17,14 +17,22 @@ export function getAutocompleteGroupContext() {
     return getContext(AUTOCOMPLETE_GROUP_CONTEXT);
 }
 export function normalizeAutocompleteItem(item) {
-    if (typeof item === 'string') {
-        return { label: item, value: item, raw: item };
+    if (typeof item === 'string' || typeof item === 'number') {
+        return { label: String(item), value: item, raw: item };
+    }
+    if (item && typeof item === 'object' && 'label' in item && 'value' in item) {
+        const option = item;
+        return {
+            label: String(option.label),
+            value: typeof option.value === 'number' ? option.value : String(option.value),
+            disabled: typeof option.disabled === 'boolean' ? option.disabled : undefined,
+            group: typeof option.group === 'string' ? option.group : undefined,
+            raw: item
+        };
     }
     return {
-        label: item.label,
-        value: item.value,
-        disabled: item.disabled,
-        group: item.group,
+        label: String(item),
+        value: String(item),
         raw: item
     };
 }

package/dist/components/banner/Banner.svelte

@@ -103,7 +103,7 @@
   {:else}
     {#if IconComponent}
       <span class={cn('shrink-0', variantConfig.iconClasses)}>
-        <IconComponent />
+        <IconComponent weight="fill" />
       </span>
     {/if}
     {#if children}

package/dist/components/chart/Chart.svelte

@@ -3,7 +3,7 @@
   import type { EChartsOption, SetOptionOpts, TooltipComponentOption } from 'echarts';
   import type { EChartsType } from 'echarts/core';
   import { cn } from '../../utils/cn';
-  import { CHART_DARK_COLORS, CHART_LIGHT_COLORS } from './Color';
+  import { CHART_DARK_COLORS, CHART_LIGHT_COLORS, ChartPalette } from './Color';
 
   export type SafeTooltipOption = Omit<TooltipComponentOption, 'formatter'> & {
     dangerousHtmlFormatter?: TooltipComponentOption['formatter'];
@@ -31,7 +31,7 @@
     options,
     optionUpdateBehavior,
     class: className,
-    isDarkMode = false,
+    isDarkMode,
     height = 350,
     onEvents = {},
     chartRef = $bindable(null)
@@ -40,8 +40,31 @@
   let el: HTMLDivElement;
   let chart: EChartsType | null = null;
   let resizeObserver: ResizeObserver | null = null;
+  let intersectionObserver: IntersectionObserver | null = null;
+  let detectedDarkMode = $state(false);
+  let hasBeenVisible = $state(false);
   const eventWrappers = new Map<string, (params: any) => void>();
   let boundEvents = new Set<string>();
+  const effectiveDarkMode = $derived(isDarkMode ?? detectedDarkMode);
+
+  const themedTooltipDefaults = $derived({
+    backgroundColor: effectiveDarkMode ? '#3A3E44' : '#FFFFFF',
+    borderColor: effectiveDarkMode ? '#505372' : '#DDDDDD',
+    textStyle: {
+      color: effectiveDarkMode ? '#B3B4B7' : '#1F1F1F'
+    },
+    extraCssText: `color: ${effectiveDarkMode ? '#B3B4B7' : '#1F1F1F'}; box-shadow: 0 8px 24px rgba(0, 0, 0, ${effectiveDarkMode ? '0.45' : '0.12'});`
+  });
+
+  const mergeTooltipTheme = (tooltipObj: SafeTooltipOption): SafeTooltipOption => ({
+    ...themedTooltipDefaults,
+    ...tooltipObj,
+    textStyle: {
+      ...themedTooltipDefaults.textStyle,
+      ...tooltipObj.textStyle
+    },
+    extraCssText: [themedTooltipDefaults.extraCssText, tooltipObj.extraCssText].filter(Boolean).join(' ')
+  });
 
   const transformTooltip = (tooltipObj: SafeTooltipOption) => {
     const { dangerousHtmlFormatter, ...restOfTooltip } = tooltipObj;
@@ -49,10 +72,19 @@
   };
 
   const prepareChartOptions = (rawOptions: KumoChartOption): EChartsOption => {
-    if (!rawOptions.tooltip) return rawOptions as EChartsOption;
-    return {
+    const optionsWithTheme = {
       ...rawOptions,
-      tooltip: Array.isArray(rawOptions.tooltip) ? rawOptions.tooltip.map(transformTooltip) : transformTooltip(rawOptions.tooltip)
+      textStyle: {
+        color: ChartPalette.text('primary', effectiveDarkMode),
+        ...(rawOptions.textStyle ?? {})
+      }
+    };
+    if (!optionsWithTheme.tooltip) return optionsWithTheme as EChartsOption;
+    return {
+      ...optionsWithTheme,
+      tooltip: Array.isArray(optionsWithTheme.tooltip)
+        ? optionsWithTheme.tooltip.map((tooltip) => transformTooltip(mergeTooltipTheme(tooltip)))
+        : transformTooltip(mergeTooltipTheme(optionsWithTheme.tooltip))
     } as EChartsOption;
   };
 
@@ -75,18 +107,58 @@
     boundEvents = nextBound;
   };
 
+  const updateOptions = () => {
+    if (!chart) return;
+    chart.setOption(prepareChartOptions(options), { notMerge: false, lazyUpdate: true, ...optionUpdateBehavior });
+    chartRef = chart;
+    bindEvents();
+  };
+
   const initChart = () => {
     if (!el) return;
     chart?.dispose();
-    const nextChart = echarts.init(el, isDarkMode ? 'dark' : { color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS }, { renderer: 'canvas' });
+    const theme = effectiveDarkMode ? { darkMode: true, color: CHART_DARK_COLORS } : { color: CHART_LIGHT_COLORS };
+    const nextChart = echarts.init(el, theme, { renderer: 'canvas' });
     chart = nextChart;
-    chartRef = nextChart;
-    nextChart.setOption(prepareChartOptions(options), { notMerge: false, lazyUpdate: true, ...optionUpdateBehavior });
-    bindEvents();
+    updateOptions();
   };
 
   onMount(() => {
+    const updateDetectedDarkMode = () => {
+      detectedDarkMode =
+        document.documentElement.classList.contains('dark') ||
+        document.body.classList.contains('dark') ||
+        document.documentElement.dataset.mode === 'dark' ||
+        document.body.dataset.mode === 'dark' ||
+        window.matchMedia?.('(prefers-color-scheme: dark)').matches === true;
+    };
+    const themeObserver = new MutationObserver(updateDetectedDarkMode);
+    updateDetectedDarkMode();
+    [document.documentElement, document.body].forEach((node) => {
+      themeObserver.observe(node, { attributes: true, attributeFilter: ['data-mode', 'class'] });
+    });
+    const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    mediaQuery?.addEventListener('change', updateDetectedDarkMode);
+
     initChart();
+
+    if ('IntersectionObserver' in window) {
+      intersectionObserver = new IntersectionObserver(
+        ([entry]) => {
+          if (!entry?.isIntersecting) return;
+          hasBeenVisible = true;
+          updateOptions();
+          intersectionObserver?.disconnect();
+          intersectionObserver = null;
+        },
+        { threshold: 0.1 }
+      );
+      intersectionObserver.observe(el);
+    } else {
+      hasBeenVisible = true;
+      updateOptions();
+    }
+
     let isInitialResize = true;
     resizeObserver = new ResizeObserver(() => {
       if (isInitialResize) {
@@ -97,6 +169,9 @@
     });
     resizeObserver.observe(el);
     return () => {
+      intersectionObserver?.disconnect();
+      themeObserver.disconnect();
+      mediaQuery?.removeEventListener('change', updateDetectedDarkMode);
       resizeObserver?.disconnect();
       for (const event of boundEvents) {
         const wrapper = eventWrappers.get(event);
@@ -109,14 +184,11 @@
   });
 
   $effect(() => {
-    if (chart) {
-      chart.setOption(prepareChartOptions(options), { notMerge: false, lazyUpdate: true, ...optionUpdateBehavior });
-      bindEvents();
-    }
+    updateOptions();
   });
 
   $effect(() => {
-    isDarkMode;
+    effectiveDarkMode;
     if (chart) initChart();
   });
 </script>

package/dist/components/chart/TimeseriesChart.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import type { SeriesOption } from 'echarts';
   import type { EChartsType } from 'echarts/core';
   import Chart, { type ChartEvents, type KumoChartOption } from './Chart.svelte';
@@ -48,7 +49,7 @@
     incomplete,
     height = 350,
     onTimeRangeChange,
-    isDarkMode = false,
+    isDarkMode,
     gradient = false,
     loading = false,
     ariaDescription,
@@ -58,6 +59,31 @@
   }: Props = $props();
 
   let chartRef: EChartsType | null = $state(null);
+  let detectedDarkMode = $state(false);
+  const effectiveDarkMode = $derived(isDarkMode ?? detectedDarkMode);
+
+  onMount(() => {
+    const updateDetectedDarkMode = () => {
+      detectedDarkMode =
+        document.documentElement.classList.contains('dark') ||
+        document.body.classList.contains('dark') ||
+        document.documentElement.dataset.mode === 'dark' ||
+        document.body.dataset.mode === 'dark' ||
+        window.matchMedia?.('(prefers-color-scheme: dark)').matches === true;
+    };
+    const themeObserver = new MutationObserver(updateDetectedDarkMode);
+    updateDetectedDarkMode();
+    [document.documentElement, document.body].forEach((node) => {
+      themeObserver.observe(node, { attributes: true, attributeFilter: ['data-mode', 'class'] });
+    });
+    const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    mediaQuery?.addEventListener('change', updateDetectedDarkMode);
+
+    return () => {
+      themeObserver.disconnect();
+      mediaQuery?.removeEventListener('change', updateDetectedDarkMode);
+    };
+  });
 
   const colorWithOpacity = (color: string, alpha: number): string => {
     const a = Math.max(0, Math.min(1, alpha));
@@ -132,6 +158,10 @@
         trigger: 'axis',
         appendTo: 'body',
         axisPointer: { type: 'shadow' },
+        backgroundColor: effectiveDarkMode ? '#3A3E44' : '#FFFFFF',
+        borderColor: effectiveDarkMode ? '#5B5E64' : '#DDDDDD',
+        textStyle: { color: effectiveDarkMode ? '#B3B4B7' : '#1F1F1F' },
+        extraCssText: `color: ${effectiveDarkMode ? '#B3B4B7' : '#1F1F1F'};`,
         dangerousHtmlFormatter: (params: any) => {
           const items = Array.isArray(params) ? params : [params];
           const seenNames = new Set<string>();
@@ -224,7 +254,7 @@
         <path
           d={wavePath}
           fill="none"
-          stroke={isDarkMode ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.2)'}
+          stroke={effectiveDarkMode ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.2)'}
           stroke-width="2"
           style:animation="kumo-chart-wave 2.4s linear infinite"
           style:transform-origin="0 0"
@@ -232,6 +262,6 @@
       </svg>
     </div>
   {:else}
-    <Chart {echarts} bind:chartRef options={options} {height} {isDarkMode} onEvents={events} optionUpdateBehavior={optionUpdateBehavior as any} />
+    <Chart {echarts} bind:chartRef options={options} {height} isDarkMode={effectiveDarkMode} onEvents={events} optionUpdateBehavior={optionUpdateBehavior as any} />
   {/if}
 </div>

package/dist/components/combobox/Combobox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
   import Field from '../field/Field.svelte';
   import { cn } from '../../utils/cn';
   import {
@@ -59,6 +59,7 @@
   }: Props = $props();
 
   let query = $state('');
+  let rootElement: HTMLDivElement | null = $state(null);
 
   const sourceItems = $derived(items ?? options);
   const normalizedItems = $derived(sourceItems.map(normalizeComboboxItem));
@@ -136,6 +137,33 @@
     emit(value.filter((selected) => !valuesEqual(itemValue, selected)));
   }
 
+  function close() {
+    if (!open) return;
+    open = false;
+    query = '';
+    onOpenChange?.(false);
+  }
+
+  function handleDocumentPointerDown(event: PointerEvent) {
+    if (!rootElement || !open || !(event.target instanceof Node)) return;
+    if (!rootElement.contains(event.target)) close();
+  }
+
+  function handleFocusOut(event: FocusEvent) {
+    if (!rootElement || !open) return;
+    const nextTarget = event.relatedTarget;
+    if (nextTarget instanceof Node && rootElement.contains(nextTarget)) return;
+    close();
+  }
+
+  onMount(() => {
+    document.addEventListener('pointerdown', handleDocumentPointerDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handleDocumentPointerDown);
+    };
+  });
+
   setComboboxContext({
     get items() {
       return normalizedItems;
@@ -183,7 +211,12 @@
 </script>
 
 {#snippet control()}
-  <div class={cn('relative inline-block max-w-full', className)} {...rest}>
+  <div
+    bind:this={rootElement}
+    onfocusout={handleFocusOut}
+    class={cn('relative inline-block max-w-full', className)}
+    {...rest}
+  >
     {@render children?.()}
   </div>
 {/snippet}

package/dist/components/combobox/Combobox.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import { type ComboboxItem, type ComboboxSize } from './context';
 type FieldError = string | {
     message?: string;