kumo-svelte 0.9.1 → 0.13.0

package/README.md

@@ -2,6 +2,10 @@
 
 Cloudflare's component library for building modern web applications, ported to Svelte.
 
+> This is an independent community package and is not affiliated with, sponsored by, or endorsed by Cloudflare.
+
+The expanded fidelity test coverage was contributed by [axel-rock](https://github.com/axel-rock/kumo-svelte).
+
 Kumo Svelte provides accessible, design-system-compliant UI components built on [Bits UI](https://bits-ui.com/). It handles keyboard navigation, focus management, and ARIA attributes so you can build accessible applications without thinking through every detail.
 
 <img width="2560" height="1456" alt="Kumo UI preview" src="https://github.com/user-attachments/assets/032f5a0e-b686-4440-b1ca-6182379479aa" />

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.1",
+  "version": "0.13.0",
   "components": {
     "Autocomplete": {
       "name": "Autocomplete",
@@ -75,6 +75,29 @@
           "type": "(open: boolean) => void",
           "optional": true,
           "description": "Called when open state changes."
+        },
+        "disabled": {
+          "type": "boolean",
+          "optional": true,
+          "default": "false",
+          "description": "Prevents interaction with the field."
+        },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
+          "default": "base",
+          "description": "Size preset."
+        },
+        "filter": {
+          "type": "((item: AutocompleteItem, query: string) => boolean) | null",
+          "optional": true,
+          "description": "Custom filter function. Set to null to disable filtering."
         }
       },
       "colors": [
@@ -320,6 +343,11 @@
           "optional": true,
           "description": "Additional classes merged onto the root element."
         },
+        "icon": {
+          "type": "Component",
+          "optional": true,
+          "description": "Icon rendered before the content on filled badges."
+        },
         "children": {
           "type": "Snippet",
           "optional": false,
@@ -337,6 +365,7 @@
         "bg-kumo-badge-red",
         "bg-kumo-badge-teal",
         "bg-kumo-badge-teal-subtle",
+        "bg-kumo-base",
         "bg-kumo-danger-tint",
         "bg-kumo-fill",
         "bg-kumo-info-tint",
@@ -1691,7 +1720,7 @@
       },
       "colors": [
         "border-kumo-fill",
-        "text-kumo-link"
+        "text-kumo-default"
       ],
       "subComponents": {
         "DefaultPanel": {
@@ -1938,6 +1967,27 @@
           "type": "(open: boolean) => void",
           "optional": true,
           "description": "Called when open state changes."
+        },
+        "disabled": {
+          "type": "boolean",
+          "optional": true,
+          "default": "false",
+          "description": "Prevents interaction with the field."
+        },
+        "defaultValue": {
+          "type": "unknown",
+          "optional": true,
+          "description": "Initial value."
+        },
+        "filter": {
+          "type": "((item: ComboboxItem, query: string) => boolean) | null",
+          "optional": true,
+          "description": "Custom filter function. Set to null to disable filtering."
+        },
+        "isItemEqualToValue": {
+          "type": "(item: unknown, value: unknown) => boolean",
+          "optional": true,
+          "description": "Custom value equality matcher function."
         }
       },
       "colors": [
@@ -2005,6 +2055,66 @@
               "optional": true,
               "default": "4",
               "description": "Offset between the popup and the trigger."
+            },
+            "customAnchor": {
+              "type": "string | HTMLElement | Measurable | null",
+              "optional": true,
+              "description": "Custom element or virtual anchor used to position the popup."
+            },
+            "strategy": {
+              "type": "enum",
+              "optional": true,
+              "values": [
+                "absolute",
+                "fixed"
+              ],
+              "description": "CSS positioning strategy used by the floating content."
+            },
+            "avoidCollisions": {
+              "type": "boolean",
+              "optional": true,
+              "default": "true",
+              "description": "Adjust placement to avoid crossing collision boundaries."
+            },
+            "collisionBoundary": {
+              "type": "Boundary | Boundary[]",
+              "optional": true,
+              "description": "Boundary elements used for collision detection."
+            },
+            "collisionPadding": {
+              "type": "number | Partial<Record<Side, number>>",
+              "optional": true,
+              "default": "8",
+              "description": "Padding kept between the popup and collision boundaries."
+            },
+            "sticky": {
+              "type": "enum",
+              "optional": true,
+              "values": [
+                "partial",
+                "always"
+              ],
+              "description": "How the popup remains attached when its anchor approaches a boundary."
+            },
+            "hideWhenDetached": {
+              "type": "boolean",
+              "optional": true,
+              "description": "Hide the popup when its anchor is fully clipped."
+            },
+            "updatePositionStrategy": {
+              "type": "enum",
+              "optional": true,
+              "values": [
+                "optimized",
+                "always"
+              ],
+              "default": "'optimized'",
+              "description": "How frequently floating position updates are calculated."
+            },
+            "container": {
+              "type": "HTMLElement | string",
+              "optional": true,
+              "description": "Portal target for the popup content."
             }
           }
         },
@@ -2111,11 +2221,9 @@
         "bg-kumo-elevated",
         "bg-kumo-overlay",
         "bg-kumo-warning",
-        "border-kumo-line",
         "ring-kumo-brand",
         "ring-kumo-hairline",
         "text-kumo-default",
-        "text-kumo-placeholder",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -3611,8 +3719,6 @@
         "bg-kumo-base",
         "bg-kumo-elevated",
         "ring-kumo-fill",
-        "ring-kumo-hairline",
-        "ring-kumo-line",
         "text-kumo-subtle"
       ]
     },
@@ -3697,9 +3803,9 @@
       "name": "MenuBar",
       "type": "component",
       "category": "Navigation",
-      "description": "A horizontal menu bar with icon buttons, commonly used for text editors or toolbars.",
-      "importPath": "kumo-svelte/components/menubar",
-      "sourceFile": "components/menubar",
+      "description": "Deprecated horizontal menu bar. Use segmented Tabs for new work.",
+      "importPath": "kumo-svelte/components/menu-bar",
+      "sourceFile": "components/menu-bar",
       "props": {
         "class": {
           "type": "string",
@@ -3725,7 +3831,14 @@
           "description": "When true, each option's id is used for active matching instead of its array index."
         }
       },
-      "colors": []
+      "colors": [
+        "bg-kumo-base",
+        "bg-kumo-recessed",
+        "border-kumo-recessed",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
+        "ring-kumo-line"
+      ]
     },
     "Meter": {
       "name": "Meter",
@@ -3821,6 +3934,11 @@
           "optional": true,
           "description": "Total number of items across all pages."
         },
+        "hasNextPage": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether another page exists when the total count is unknown."
+        },
         "class": {
           "type": "string",
           "optional": true,
@@ -3981,9 +4099,10 @@
       },
       "colors": [
         "bg-kumo-base",
+        "fill-kumo-arrow-edge",
+        "fill-kumo-arrow-stroke",
         "fill-kumo-base",
-        "fill-kumo-tip-shadow",
-        "fill-kumo-tip-stroke",
+        "ring-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -4525,14 +4644,83 @@
           "type": "HTMLElement | string",
           "optional": true,
           "description": "Container element for the portal."
+        },
+        "side": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "top",
+            "right",
+            "bottom",
+            "left"
+          ],
+          "default": "bottom",
+          "description": "Preferred popup side; collision handling may flip it."
+        },
+        "sideOffset": {
+          "type": "number",
+          "optional": true,
+          "default": "4",
+          "description": "Distance between the trigger and popup."
+        },
+        "align": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "start",
+            "center",
+            "end"
+          ],
+          "default": "start",
+          "description": "Popup alignment along the trigger edge."
+        },
+        "alignOffset": {
+          "type": "number",
+          "optional": true,
+          "default": "0",
+          "description": "Additional offset along the alignment axis."
+        },
+        "customAnchor": {
+          "type": "HTMLElement | string",
+          "optional": true,
+          "description": "Custom floating-position anchor."
+        },
+        "strategy": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "absolute",
+            "fixed"
+          ],
+          "description": "CSS positioning strategy for the popup."
+        },
+        "avoidCollisions": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether the popup should adjust to avoid viewport collisions."
+        },
+        "collisionPadding": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "top",
+            "right",
+            "bottom",
+            "left"
+          ],
+          "description": "Padding between the popup and its collision boundary."
         }
       },
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-control",
+        "bg-kumo-hairline",
         "bg-kumo-tint",
+        "border-kumo-line",
         "ring-kumo-brand",
         "ring-kumo-danger",
         "ring-kumo-focus",
+        "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-default",
         "text-kumo-placeholder",
@@ -4816,6 +5004,11 @@
               "optional": true,
               "description": "Tooltip label shown when the sidebar is collapsed."
             },
+            "itemId": {
+              "type": "string",
+              "optional": true,
+              "description": "Anchor id used by useSidebar().scrollToItem()."
+            },
             "children": {
               "type": "Snippet",
               "optional": true,
@@ -4828,6 +5021,26 @@
             }
           }
         },
+        "MenuItem": {
+          "description": "Sidebar.MenuItem",
+          "props": {
+            "itemId": {
+              "type": "string",
+              "optional": true,
+              "description": "Anchor id used by useSidebar().scrollToItem()."
+            },
+            "children": {
+              "type": "Snippet",
+              "optional": true,
+              "description": "Menu item content."
+            },
+            "class": {
+              "type": "string",
+              "optional": true,
+              "description": "Additional classes."
+            }
+          }
+        },
         "MenuSubButton": {
           "description": "Sidebar.MenuSubButton",
           "props": {
@@ -5740,7 +5953,6 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-brand",
-        "bg-kumo-elevated",
         "bg-kumo-recessed",
         "bg-kumo-tint",
         "border-kumo-hairline",
@@ -5764,6 +5976,7 @@
           "type": "enum",
           "optional": true,
           "values": [
+            "heading",
             "heading1",
             "heading2",
             "heading3",
@@ -5775,7 +5988,7 @@
             "error"
           ],
           "default": "body",
-          "description": "Visual variant."
+          "description": "Visual variant. Numbered heading variants are deprecated; use heading with size and as."
         },
         "size": {
           "type": "enum",
@@ -5787,7 +6000,7 @@
             "lg"
           ],
           "default": "base",
-          "description": "Size preset."
+          "description": "Size preset. Heading accepts lg for a 20px heading; its default is 16px."
         },
         "bold": {
           "type": "boolean",
@@ -6030,7 +6243,7 @@
             "lg"
           ],
           "default": "base",
-          "description": "Locks every toolbar item to this size."
+          "description": "Deprecated. Sets every toolbar item to this size; omit it for the base size."
         },
         "class": {
           "type": "string",
@@ -6115,6 +6328,46 @@
               "description": "Additional classes merged onto the toolbar input group."
             }
           }
+        },
+        "Link": {
+          "description": "Toolbar.Link",
+          "props": {
+            "children": {
+              "type": "Snippet",
+              "optional": true,
+              "description": "Optional visible link label."
+            },
+            "href": {
+              "type": "string",
+              "optional": true,
+              "description": "Navigation destination."
+            },
+            "icon": {
+              "type": "Component",
+              "optional": true,
+              "description": "Optional icon component rendered before the label."
+            },
+            "shape": {
+              "type": "enum",
+              "optional": true,
+              "values": [
+                "base",
+                "square",
+                "circle"
+              ],
+              "description": "Link shape. Icon-only toolbar links default to square."
+            },
+            "external": {
+              "type": "boolean",
+              "optional": true,
+              "description": "Opens the link in a new tab with safe rel attributes."
+            },
+            "disabled": {
+              "type": "boolean",
+              "optional": true,
+              "description": "Disables navigation and exposes disabled semantics."
+            }
+          }
         }
       }
     },
@@ -6199,9 +6452,9 @@
       },
       "colors": [
         "bg-kumo-base",
+        "fill-kumo-arrow-edge",
+        "fill-kumo-arrow-stroke",
         "fill-kumo-base",
-        "fill-kumo-tip-shadow",
-        "fill-kumo-tip-stroke",
         "text-kumo-default"
       ]
     }

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Kumo Svelte Component Registry
 
-Version: 0.9.1
+Version: 0.13.0
 
 ## Autocomplete
 
@@ -236,11 +236,11 @@ A loading spinner to indicate loading state.
 
 ## MenuBar
 
-A horizontal menu bar with icon buttons, commonly used for text editors or toolbars.
+Deprecated horizontal menu bar. Use segmented Tabs for new work.
 
 - Category: Navigation
-- Import: `import { MenuBar } from "kumo-svelte/components/menubar";`
-- Source: `components/menubar`
+- Import: `import { MenuBar } from "kumo-svelte/components/menu-bar";`
+- Source: `components/menu-bar`
 
 ## Meter
 

package/dist/components/autocomplete/Autocomplete.svelte

@@ -12,6 +12,7 @@
     type NormalizedAutocompleteItem
   } from './context';
   import { createKumoFilter } from '../filter';
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
 
   type FieldError = string | { message?: string; match?: boolean };
 
@@ -22,6 +23,7 @@
     value?: AutocompleteValue;
     defaultValue?: AutocompleteValue;
     open?: boolean;
+    disabled?: boolean;
     size?: AutocompleteSize;
     label?: string | Snippet;
     labelTooltip?: string | Snippet;
@@ -41,6 +43,7 @@
     defaultValue,
     value = $bindable(defaultValue ?? ''),
     open = $bindable(false),
+    disabled = false,
     size = 'base',
     label,
     labelTooltip,
@@ -73,6 +76,62 @@
     });
   });
 
+  const serializedOptions = $derived(
+    normalizedItems.map((item, index) => ({
+      ...item,
+      serializedValue: `kumo-autocomplete:${index}`
+    }))
+  );
+
+  function serializeSelectedValue(selectionValue: unknown) {
+    const option = serializedOptions.find((entry) => valuesEqual(entry.value, selectionValue as AutocompleteValue));
+    if (option) return option.serializedValue;
+    return typeof selectionValue === 'string' || typeof selectionValue === 'number' ? String(selectionValue) : undefined;
+  }
+
+  function deserializePrimitiveValue(primitiveValue: string) {
+    const option = serializedOptions.find((entry) => entry.serializedValue === primitiveValue);
+    return option ? option.value : primitiveValue;
+  }
+
+  const primitiveValue = $derived.by(() => {
+    if (Array.isArray(value)) {
+      return value.map(serializeSelectedValue).filter((v): v is string => v !== undefined);
+    }
+    const val = serializeSelectedValue(value);
+    return val !== undefined ? val : '';
+  });
+
+  function handleSingleValueChange(nextValue: string | undefined) {
+    if (nextValue === undefined) return;
+    const deserialized = deserializePrimitiveValue(nextValue);
+    value = deserialized;
+    const option = serializedOptions.find((entry) => entry.serializedValue === nextValue);
+    if (option) {
+      query = option.label;
+    }
+    open = false;
+    onValueChange?.(deserialized);
+    onOpenChange?.(false);
+  }
+
+  function handleMultipleValueChange(nextValue: string[]) {
+    const deserialized = nextValue.map(deserializePrimitiveValue).map(String);
+    value = deserialized;
+    onValueChange?.(deserialized);
+  }
+
+  $effect(() => {
+    if (!open) {
+      if (Array.isArray(value)) {
+        query = value.join(', ');
+      } else {
+        const option = serializedOptions.find((entry) => entry.value === value);
+        query = option ? option.label : String(value ?? '');
+      }
+    }
+  });
+
   function valuesEqual(itemValue: string | number, selectedValue: AutocompleteValue) {
     if (Array.isArray(selectedValue)) return selectedValue.some((selected) => itemValue === selected);
     return itemValue === selectedValue;
@@ -151,13 +210,39 @@
       onOpenChange?.(false);
     },
     isSelected,
-    select
+    select,
+    serializeValue(itemValue: unknown): string {
+      const option = serializedOptions.find((entry) => entry.value === itemValue);
+      return option?.serializedValue ?? String(itemValue ?? '');
+    }
   });
 </script>
 
 {#snippet control()}
   <div bind:this={rootElement} class={cn('relative w-full', className)} {...rest}>
-    {@render children?.()}
+    {#if Array.isArray(value)}
+      <ComboboxPrimitive.Root
+        type="multiple"
+        value={Array.isArray(primitiveValue) ? primitiveValue : []}
+        onValueChange={handleMultipleValueChange}
+        bind:open={open}
+        disabled={disabled}
+        inputValue={query}
+      >
+        {@render children?.()}
+      </ComboboxPrimitive.Root>
+    {:else}
+      <ComboboxPrimitive.Root
+        type="single"
+        value={Array.isArray(primitiveValue) ? (primitiveValue[0] ?? '') : primitiveValue}
+        onValueChange={handleSingleValueChange}
+        bind:open={open}
+        disabled={disabled}
+        inputValue={query}
+      >
+        {@render children?.()}
+      </ComboboxPrimitive.Root>
+    {/if}
   </div>
 {/snippet}
 

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

@@ -11,6 +11,7 @@ export interface Props {
     value?: AutocompleteValue;
     defaultValue?: AutocompleteValue;
     open?: boolean;
+    disabled?: boolean;
     size?: AutocompleteSize;
     label?: string | Snippet;
     labelTooltip?: string | Snippet;