kumo-svelte 0.2.0 → 0.7.0

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.7.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": {
@@ -2055,7 +2054,7 @@
             "xl"
           ],
           "default": "base",
-          "description": "Dialog width preset."
+          "description": "Fixed dialog width preset: sm (288px), base (384px), lg (512px), or xl (768px)."
         },
         "style": {
           "type": "string",
@@ -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,9 +3634,9 @@
               "description": "Supporting description text."
             },
             "value": {
-              "type": "string",
+              "type": "Value",
               "optional": true,
-              "description": "Controlled value."
+              "description": "Controlled value. Parameterized by the radio value type Value, which defaults to string."
             },
             "disabled": {
               "type": "boolean",
@@ -3665,9 +3664,9 @@
               "description": "Additional classes merged onto the root element."
             },
             "defaultValue": {
-              "type": "string",
+              "type": "Value",
               "optional": true,
-              "description": "Initial uncontrolled value."
+              "description": "Initial uncontrolled value. Parameterized by the radio value type Value, which defaults to string."
             },
             "required": {
               "type": "boolean",
@@ -3675,9 +3674,9 @@
               "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."
+              "description": "Called when the value changes. The second argument carries native event details about the interaction."
             }
           }
         },
@@ -3731,10 +3730,10 @@
               "description": "Supporting description text."
             },
             "value": {
-              "type": "string",
+              "type": "Value",
               "optional": false,
               "required": true,
-              "description": "Controlled value."
+              "description": "Item value. Parameterized by the radio value type Value to match the enclosing Radio.Group value type."
             }
           }
         },
@@ -5189,6 +5188,118 @@
       "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 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-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 +5473,14 @@
       "Tabs",
       "Text",
       "Toast",
+      "Toolbar",
       "Tooltip"
     ],
     "byCategory": {
       "Action": [
         "Button",
-        "Link"
+        "Link",
+        "Toolbar"
       ],
       "Display": [
         "Badge",
@@ -5465,6 +5578,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.7.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) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active: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) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active: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 rounded-[inherit] bg-linear-to-b from-(--kumo-button-emphasis-gradient-start) to-(--kumo-button-emphasis-gradient-end) shadow-[inset_0_1px_0_0_var(--kumo-button-emphasis-bg)] 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) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active: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) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active: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/button/button.test.js

@@ -30,4 +30,17 @@ describe('Button', () => {
         expect(button.disabled).toBe(true);
         expect(button.getAttribute('aria-busy')).toBe('true');
     });
+    it('keeps emphasized variant rings color-matched when pressed or focused', () => {
+        for (const variant of ['primary', 'destructive']) {
+            render(Button, {
+                variant,
+                'aria-label': variant
+            });
+            const className = screen.getByRole('button', { name: variant }).className;
+            expect(className).toContain('ring-(--kumo-button-emphasis-ring)');
+            expect(className).toContain('focus:ring-(--kumo-button-emphasis-ring)');
+            expect(className).toContain('focus-visible:ring-(--kumo-button-emphasis-ring)');
+            expect(className).toContain('active:ring-(--kumo-button-emphasis-ring)');
+        }
+    });
 });