kumo-svelte 0.13.0 → 0.14.0

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.13.0",
+  "version": "0.14.0",
   "components": {
     "Autocomplete": {
       "name": "Autocomplete",
@@ -562,7 +562,7 @@
       "name": "BubbleMap",
       "type": "component",
       "category": "Data Visualization",
-      "description": "Map chart components for visualizing geographic data with GeoJSON.",
+      "description": "Map components for visualizing geographic data with GeoJSON or an interactive SVG globe.",
       "importPath": "kumo-svelte/components/chart",
       "sourceFile": "components/chart",
       "props": {
@@ -719,6 +719,8 @@
         "bg-kumo-base",
         "bg-kumo-fill",
         "border-kumo-line",
+        "stroke-kumo-base",
+        "stroke-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -900,6 +902,16 @@
         }
       }
     },
+    "Button Group": {
+      "name": "Button Group",
+      "type": "component",
+      "category": "Other",
+      "description": "Joins a primary action and a related trigger into a single split button.",
+      "importPath": "kumo-svelte/components/button-group",
+      "sourceFile": "components/button-group",
+      "props": {},
+      "colors": []
+    },
     "Chart": {
       "name": "Chart",
       "type": "component",
@@ -958,6 +970,8 @@
         "bg-kumo-base",
         "bg-kumo-fill",
         "border-kumo-line",
+        "stroke-kumo-base",
+        "stroke-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -1034,6 +1048,8 @@
         "bg-kumo-base",
         "bg-kumo-fill",
         "border-kumo-line",
+        "stroke-kumo-base",
+        "stroke-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -1302,7 +1318,7 @@
       "name": "ChoroplethMap",
       "type": "component",
       "category": "Data Visualization",
-      "description": "Map chart components for visualizing geographic data with GeoJSON.",
+      "description": "Map components for visualizing geographic data with GeoJSON or an interactive SVG globe.",
       "importPath": "kumo-svelte/components/chart",
       "sourceFile": "components/chart",
       "props": {
@@ -1451,6 +1467,8 @@
         "bg-kumo-base",
         "bg-kumo-fill",
         "border-kumo-line",
+        "stroke-kumo-base",
+        "stroke-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -1907,10 +1925,10 @@
           "description": "Size preset."
         },
         "items": {
-          "type": "unknown[]",
+          "type": "ComboboxItem[] | ComboboxItemCollection",
           "optional": false,
           "required": true,
-          "description": "Array of items to display in the dropdown."
+          "description": "Items to display, optionally created with Combobox.createItems()."
         },
         "value": {
           "type": "unknown",
@@ -3153,10 +3171,9 @@
         "bg-kumo-control",
         "bg-kumo-overlay",
         "border-kumo-fill",
-        "border-kumo-interact",
+        "ring-kumo-line",
         "text-kumo-brand",
         "text-kumo-default",
-        "text-kumo-inactive",
         "text-kumo-subtle",
         "text-kumo-success"
       ]
@@ -3307,6 +3324,126 @@
         }
       }
     },
+    "GlobeMap": {
+      "name": "GlobeMap",
+      "type": "component",
+      "category": "Data Visualization",
+      "description": "Map components for visualizing geographic data with GeoJSON or an interactive SVG globe.",
+      "importPath": "kumo-svelte/components/chart",
+      "sourceFile": "components/chart",
+      "props": {
+        "landColor": {
+          "type": "string",
+          "optional": true,
+          "description": "Stroke color for the hatched land."
+        },
+        "landHatchSpacing": {
+          "type": "number",
+          "optional": true,
+          "default": "10",
+          "description": "Spacing between land hatch lines in view-box pixels."
+        },
+        "oceanColor": {
+          "type": "string",
+          "optional": true,
+          "default": "var(--color-kumo-base)",
+          "description": "Fill behind the land and graticule."
+        },
+        "markers": {
+          "type": "GlobeMapMarker[]",
+          "optional": true,
+          "default": "[]",
+          "description": "Geographic points drawn above the land."
+        },
+        "markerColor": {
+          "type": "string",
+          "optional": true,
+          "description": "Default marker fill."
+        },
+        "markerRadius": {
+          "type": "number",
+          "optional": true,
+          "default": "7",
+          "description": "Default marker radius in view-box pixels."
+        },
+        "onMarkerClick": {
+          "type": "(marker: GlobeMapMarker) => void",
+          "optional": true,
+          "description": "Called when a visible marker is clicked."
+        },
+        "defaultRotation": {
+          "type": "[number, number, number]",
+          "optional": true,
+          "default": "[-10, -20, 0]",
+          "description": "Initial longitude, latitude, and roll rotation."
+        },
+        "draggable": {
+          "type": "boolean",
+          "optional": true,
+          "default": "true",
+          "description": "Allows pointer and keyboard rotation."
+        },
+        "autoRotate": {
+          "type": "boolean",
+          "optional": true,
+          "default": "false",
+          "description": "Continuously rotates the globe horizontally."
+        },
+        "autoRotateSpeed": {
+          "type": "number",
+          "optional": true,
+          "default": "4",
+          "description": "Horizontal auto-rotation speed in degrees per second."
+        },
+        "showGraticule": {
+          "type": "boolean",
+          "optional": true,
+          "default": "false",
+          "description": "Draws latitude and longitude guides."
+        },
+        "showTooltip": {
+          "type": "boolean",
+          "optional": true,
+          "default": "true",
+          "description": "Shows the Kumo-styled marker tooltip."
+        },
+        "onUserRotationChange": {
+          "type": "(rotation: [number, number, number]) => void",
+          "optional": true,
+          "description": "Called after pointer or keyboard rotation."
+        },
+        "aria-label": {
+          "type": "string",
+          "optional": true,
+          "default": "Interactive globe map",
+          "description": "Accessible label for the visualization."
+        },
+        "height": {
+          "type": "number",
+          "optional": true,
+          "description": "Fixed height in pixels; otherwise uses a square aspect ratio."
+        },
+        "class": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional classes for the container."
+        },
+        "isDarkMode": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Overrides automatic theme detection."
+        }
+      },
+      "colors": [
+        "bg-kumo-base",
+        "bg-kumo-fill",
+        "border-kumo-line",
+        "stroke-kumo-base",
+        "stroke-kumo-line",
+        "text-kumo-default",
+        "text-kumo-subtle"
+      ]
+    },
     "Grid": {
       "name": "Grid",
       "type": "component",
@@ -3380,6 +3517,74 @@
         }
       }
     },
+    "InlineCopyText": {
+      "name": "InlineCopyText",
+      "type": "component",
+      "category": "Action",
+      "description": "A compact, borderless copy control for short inline values.",
+      "importPath": "kumo-svelte/components/inline-copy-text",
+      "sourceFile": "components/inline-copy-text",
+      "props": {
+        "children": {
+          "type": "Snippet",
+          "optional": false,
+          "required": true,
+          "description": "Inline content to display."
+        },
+        "value": {
+          "type": "string",
+          "optional": true,
+          "description": "Value copied to the clipboard. Defaults to rendered text content."
+        },
+        "variant": {
+          "type": "InlineCopyTextVariant",
+          "optional": true,
+          "default": "mono-secondary",
+          "description": "Text style; heading variants are excluded."
+        },
+        "size": {
+          "type": "KumoTextSize",
+          "optional": true,
+          "description": "Text size."
+        },
+        "bold": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Uses medium-weight copy text."
+        },
+        "truncate": {
+          "type": "boolean",
+          "optional": true,
+          "default": "true",
+          "description": "Truncates overflowing text."
+        },
+        "as": {
+          "type": "TextElement",
+          "optional": true,
+          "default": "span",
+          "description": "Element used for displayed text."
+        },
+        "onCopy": {
+          "type": "() => void",
+          "optional": true,
+          "description": "Called after a successful clipboard write."
+        },
+        "labels": {
+          "type": "InlineCopyTextLabels",
+          "optional": true,
+          "description": "Localized copy and copied accessible labels."
+        },
+        "class": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional button classes."
+        }
+      },
+      "colors": [
+        "ring-kumo-brand",
+        "text-kumo-default"
+      ]
+    },
     "Input": {
       "name": "Input",
       "type": "component",
@@ -3690,6 +3895,26 @@
         "text-kumo-subtle"
       ]
     },
+    "Layer Dialog": {
+      "name": "Layer Dialog",
+      "type": "component",
+      "category": "Other",
+      "description": "A responsive dialog that becomes a bottom sheet on mobile.",
+      "importPath": "kumo-svelte/components/layer-dialog",
+      "sourceFile": "components/layer-dialog",
+      "props": {},
+      "colors": [
+        "bg-kumo-base",
+        "bg-kumo-contrast",
+        "bg-kumo-elevated",
+        "bg-kumo-fill",
+        "bg-kumo-recessed",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
+        "text-kumo-default",
+        "text-kumo-subtle"
+      ]
+    },
     "LayerCard": {
       "name": "LayerCard",
       "type": "component",
@@ -4519,6 +4744,8 @@
         "bg-kumo-base",
         "bg-kumo-fill",
         "border-kumo-line",
+        "stroke-kumo-base",
+        "stroke-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -5086,6 +5313,11 @@
               "optional": true,
               "description": "Callback when open state changes."
             },
+            "onOpenChangeComplete": {
+              "type": "(open: boolean) => void",
+              "optional": true,
+              "description": "Callback after the sidebar finishes its open or close transition."
+            },
             "variant": {
               "type": "enum",
               "optional": true,
@@ -5964,6 +6196,23 @@
         "text-kumo-subtle"
       ]
     },
+    "Tag Input": {
+      "name": "Tag Input",
+      "type": "component",
+      "category": "Other",
+      "description": "A creatable multi-value input for values that do not come from a predefined option list.",
+      "importPath": "kumo-svelte/components/tag-input",
+      "sourceFile": "components/tag-input",
+      "props": {},
+      "colors": [
+        "bg-kumo-overlay",
+        "ring-kumo-hairline",
+        "text-kumo-danger",
+        "text-kumo-default",
+        "text-kumo-muted",
+        "text-kumo-subtle"
+      ]
+    },
     "Text": {
       "name": "Text",
       "type": "component",
@@ -6112,11 +6361,21 @@
           "optional": true,
           "description": "Number of ticks to display on the y-axis."
         },
+        "yAxisMinInterval": {
+          "type": "number",
+          "optional": true,
+          "description": "Minimum interval between y-axis ticks. Use 1 for discrete count data."
+        },
         "tooltipValueFormat": {
           "type": "(value: number) => string",
           "optional": true,
           "description": "Custom formatter for tooltip values. Takes precedence over yAxisTickLabelFormat."
         },
+        "tooltipFooter": {
+          "type": "string",
+          "optional": true,
+          "description": "Brief supporting text rendered below the series rows in every tooltip."
+        },
         "tooltipMode": {
           "type": "enum",
           "optional": true,
@@ -6205,6 +6464,8 @@
         "bg-kumo-base",
         "bg-kumo-fill",
         "border-kumo-line",
+        "stroke-kumo-base",
+        "stroke-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -6510,6 +6771,7 @@
       "Breadcrumbs",
       "BubbleMap",
       "Button",
+      "Button Group",
       "Chart",
       "ChartLegend",
       "Checkbox",
@@ -6525,11 +6787,14 @@
       "DropdownMenu",
       "Empty",
       "Flow",
+      "GlobeMap",
       "Grid",
+      "InlineCopyText",
       "Input",
       "InputArea",
       "InputGroup",
       "Label",
+      "Layer Dialog",
       "LayerCard",
       "Link",
       "Loader",
@@ -6547,6 +6812,7 @@
       "Table",
       "TableOfContents",
       "Tabs",
+      "Tag Input",
       "Text",
       "TimeseriesChart",
       "Toast",
@@ -6556,6 +6822,7 @@
     "byCategory": {
       "Action": [
         "Button",
+        "InlineCopyText",
         "Link",
         "Toolbar"
       ],
@@ -6564,6 +6831,7 @@
         "Chart",
         "ChartLegend",
         "ChoroplethMap",
+        "GlobeMap",
         "SankeyChart",
         "TimeseriesChart"
       ],
@@ -6608,10 +6876,13 @@
         "Tabs"
       ],
       "Other": [
+        "Button Group",
         "CloudflareLogo",
         "Collapsible",
+        "Layer Dialog",
         "Switch",
         "Table",
+        "Tag Input",
         "Text"
       ],
       "Overlay": [
@@ -6629,6 +6900,7 @@
         "Breadcrumbs",
         "BubbleMap",
         "Button",
+        "Button Group",
         "Chart",
         "ChartLegend",
         "Checkbox",
@@ -6644,11 +6916,14 @@
         "DropdownMenu",
         "Empty",
         "Flow",
+        "GlobeMap",
         "Grid",
+        "InlineCopyText",
         "Input",
         "InputArea",
         "InputGroup",
         "Label",
+        "Layer Dialog",
         "LayerCard",
         "Link",
         "Loader",
@@ -6666,6 +6941,7 @@
         "Table",
         "TableOfContents",
         "Tabs",
+        "Tag Input",
         "Text",
         "TimeseriesChart",
         "Toast",

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Kumo Svelte Component Registry
 
-Version: 0.13.0
+Version: 0.14.0
 
 ## Autocomplete
 
@@ -36,7 +36,7 @@ A navigation component that shows the current page's location within a navigatio
 
 ## BubbleMap
 
-Map chart components for visualizing geographic data with GeoJSON.
+Map components for visualizing geographic data with GeoJSON or an interactive SVG globe.
 
 - Category: Data Visualization
 - Import: `import { BubbleMap } from "kumo-svelte/components/chart";`
@@ -50,6 +50,14 @@ Displays a button or a component that looks like a button.
 - Import: `import { Button } from "kumo-svelte/components/button";`
 - Source: `components/button`
 
+## Button Group
+
+Joins a primary action and a related trigger into a single split button.
+
+- Category: Other
+- Import: `import { Button Group } from "kumo-svelte/components/button-group";`
+- Source: `components/button-group`
+
 ## Chart
 
 Charts built on ECharts.
@@ -76,7 +84,7 @@ A control that allows the user to toggle between checked and not checked. Featur
 
 ## ChoroplethMap
 
-Map chart components for visualizing geographic data with GeoJSON.
+Map components for visualizing geographic data with GeoJSON or an interactive SVG globe.
 
 - Category: Data Visualization
 - Import: `import { ChoroplethMap } from "kumo-svelte/components/chart";`
@@ -170,6 +178,14 @@ A group of components for building directed flow diagrams with nodes and connect
 - Import: `import { Flow } from "kumo-svelte/components/flow";`
 - Source: `components/flow`
 
+## GlobeMap
+
+Map components for visualizing geographic data with GeoJSON or an interactive SVG globe.
+
+- Category: Data Visualization
+- Import: `import { GlobeMap } from "kumo-svelte/components/chart";`
+- Source: `components/chart`
+
 ## Grid
 
 A responsive grid layout component for organizing content into columns.
@@ -178,6 +194,14 @@ A responsive grid layout component for organizing content into columns.
 - Import: `import { Grid } from "kumo-svelte/components/grid";`
 - Source: `components/grid`
 
+## InlineCopyText
+
+A compact, borderless copy control for short inline values.
+
+- Category: Action
+- Import: `import { InlineCopyText } from "kumo-svelte/components/inline-copy-text";`
+- Source: `components/inline-copy-text`
+
 ## Input
 
 A text input field for user input with built-in label, description, and error support.
@@ -210,6 +234,14 @@ A label component for form fields with support for required/optional indicators
 - Import: `import { Label } from "kumo-svelte/components/label";`
 - Source: `components/label`
 
+## Layer Dialog
+
+A responsive dialog that becomes a bottom sheet on mobile.
+
+- Category: Other
+- Import: `import { Layer Dialog } from "kumo-svelte/components/layer-dialog";`
+- Source: `components/layer-dialog`
+
 ## LayerCard
 
 A card component with a layered visual effect, perfect for navigation or feature highlights.
@@ -346,6 +378,14 @@ A set of layered sections of content, known as tab panels, displayed one at a ti
 - Import: `import { Tabs } from "kumo-svelte/components/tabs";`
 - Source: `components/tabs`
 
+## Tag Input
+
+A creatable multi-value input for values that do not come from a predefined option list.
+
+- Category: Other
+- Import: `import { Tag Input } from "kumo-svelte/components/tag-input";`
+- Source: `components/tag-input`
+
 ## Text
 
 A typography component for various heading and copy styles.

package/dist/components/button-group/ButtonGroup.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import { cn } from '../../utils/cn';
+  export const KUMO_BUTTON_GROUP_VARIANTS = {} as const;
+  export const KUMO_BUTTON_GROUP_DEFAULT_VARIANTS = {} as const;
+  export const KUMO_BUTTON_GROUP_STYLING = {
+    baseClasses: cn(
+      'relative isolate inline-flex w-max flex-row',
+      '[&>*]:relative [&>*:focus-visible]:z-10 [&>*:has(:focus-visible)]:z-10',
+      '[&>*>:is(button,a)]:shadow-none [&>:is(button,a)]:shadow-none',
+      '[&>*:not(:first-child):is(button,a)]:rounded-s-none',
+      '[&>*:not(:last-child):is(button,a)]:rounded-e-none',
+      '[&>*:not(:first-child)>:is(button,a)]:rounded-s-none',
+      '[&>*:not(:last-child)>:is(button,a)]:rounded-e-none',
+      '[&>*:not(:first-child)]:-ms-px'
+    )
+  } as const;
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props { children?: Snippet; class?: string; [key: string]: unknown; }
+  let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<div role="group" data-kumo-component="ButtonGroup" class={cn(KUMO_BUTTON_GROUP_STYLING.baseClasses, className)} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/button-group/ButtonGroup.svelte.d.ts

@@ -0,0 +1,14 @@
+export declare const KUMO_BUTTON_GROUP_VARIANTS: {};
+export declare const KUMO_BUTTON_GROUP_DEFAULT_VARIANTS: {};
+export declare const KUMO_BUTTON_GROUP_STYLING: {
+    readonly baseClasses: string;
+};
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/button-group/ButtonGroupTestHost.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Button } from '../button';
+  import { ButtonGroup } from './index';
+</script>
+<ButtonGroup aria-label="Deploy"><Button>Deploy</Button><Button shape="square" aria-label="More options">+</Button></ButtonGroup>

package/dist/components/button-group/ButtonGroupTestHost.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ButtonGroupTestHost: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonGroupTestHost = InstanceType<typeof ButtonGroupTestHost>;
+export default ButtonGroupTestHost;

package/dist/components/button-group/button-group.test.js

@@ -0,0 +1,15 @@
+// @vitest-environment happy-dom
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import ButtonGroupTestHost from './ButtonGroupTestHost.svelte';
+describe('ButtonGroup', () => {
+    it('renders a named group with joined-control selectors', () => {
+        render(ButtonGroupTestHost);
+        const group = screen.getByRole('group', { name: 'Deploy' });
+        expect(group.textContent).toContain('Deploy');
+        expect(group.className).toContain('rounded-s-none');
+        expect(group.className).toContain('rounded-e-none');
+        expect(group.className).toContain('-ms-px');
+        expect(group.className).toContain('flex-row');
+    });
+});

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { KUMO_BUTTON_GROUP_DEFAULT_VARIANTS, KUMO_BUTTON_GROUP_STYLING, KUMO_BUTTON_GROUP_VARIANTS } from './ButtonGroup.svelte';

package/dist/components/button-group/index.js

@@ -0,0 +1,2 @@
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { KUMO_BUTTON_GROUP_DEFAULT_VARIANTS, KUMO_BUTTON_GROUP_STYLING, KUMO_BUTTON_GROUP_VARIANTS } from './ButtonGroup.svelte';