kumo-svelte 0.8.0 → 0.9.1

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0",
+  "version": "0.9.1",
   "components": {
     "Autocomplete": {
       "name": "Autocomplete",
@@ -413,13 +413,25 @@
         }
       },
       "colors": [
-        "bg-kumo-banner-info",
-        "bg-kumo-banner-warning",
         "bg-kumo-contrast",
+        "bg-kumo-danger",
         "bg-kumo-danger-tint",
+        "bg-kumo-info",
+        "bg-kumo-info-tint",
+        "bg-kumo-warning",
+        "bg-kumo-warning-tint",
+        "fill-kumo-danger",
+        "fill-kumo-info",
+        "fill-kumo-interact",
+        "fill-kumo-subtle",
+        "fill-kumo-warning",
+        "ring-kumo-danger",
+        "ring-kumo-focus",
+        "ring-kumo-info",
+        "ring-kumo-warning",
         "text-kumo-danger",
+        "text-kumo-default",
         "text-kumo-info",
-        "text-kumo-subtle",
         "text-kumo-warning"
       ]
     },
@@ -676,6 +688,7 @@
       },
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-fill",
         "border-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -914,6 +927,7 @@
       },
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-fill",
         "border-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -989,6 +1003,7 @@
       },
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-fill",
         "border-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -1405,6 +1420,7 @@
       },
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-fill",
         "border-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -4382,6 +4398,7 @@
       },
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-fill",
         "border-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -5723,6 +5740,7 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-brand",
+        "bg-kumo-elevated",
         "bg-kumo-recessed",
         "bg-kumo-tint",
         "border-kumo-hairline",
@@ -5972,6 +5990,7 @@
       },
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-fill",
         "border-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Kumo Svelte Component Registry
 
-Version: 0.8.0
+Version: 0.9.1
 
 ## Autocomplete
 

package/dist/components/badge/Badge.svelte

@@ -3,11 +3,11 @@
   export const KUMO_BADGE_VARIANTS = {
     primary: 'bg-kumo-badge-inverted text-kumo-badge-inverted',
     secondary: 'bg-kumo-fill text-kumo-badge-neutral-subtle',
-    error: 'bg-kumo-danger-tint/60 text-kumo-danger',
-    warning: 'bg-kumo-warning-tint/70 text-kumo-warning',
-    success: 'bg-kumo-success-tint/70 text-kumo-success',
+    error: 'bg-kumo-danger-tint text-kumo-danger',
+    warning: 'bg-kumo-warning-tint text-kumo-warning',
+    success: 'bg-kumo-success-tint text-kumo-success',
     destructive: 'bg-kumo-badge-red text-white',
-    info: 'bg-kumo-info-tint/70 text-kumo-info',
+    info: 'bg-kumo-info-tint text-kumo-info',
     beta: 'border border-dashed border-kumo-brand bg-transparent text-kumo-link',
     outline: 'border border-kumo-fill bg-transparent text-kumo-default',
     red: 'bg-kumo-badge-red text-white',

package/dist/components/badge/Badge.svelte.d.ts

@@ -2,11 +2,11 @@ export declare const KUMO_BADGE_BASE_STYLES = "inline-flex w-fit flex-none shrin
 export declare const KUMO_BADGE_VARIANTS: {
     readonly primary: "bg-kumo-badge-inverted text-kumo-badge-inverted";
     readonly secondary: "bg-kumo-fill text-kumo-badge-neutral-subtle";
-    readonly error: "bg-kumo-danger-tint/60 text-kumo-danger";
-    readonly warning: "bg-kumo-warning-tint/70 text-kumo-warning";
-    readonly success: "bg-kumo-success-tint/70 text-kumo-success";
+    readonly error: "bg-kumo-danger-tint text-kumo-danger";
+    readonly warning: "bg-kumo-warning-tint text-kumo-warning";
+    readonly success: "bg-kumo-success-tint text-kumo-success";
     readonly destructive: "bg-kumo-badge-red text-white";
-    readonly info: "bg-kumo-info-tint/70 text-kumo-info";
+    readonly info: "bg-kumo-info-tint text-kumo-info";
     readonly beta: "border border-dashed border-kumo-brand bg-transparent text-kumo-link";
     readonly outline: "border border-kumo-fill bg-transparent text-kumo-default";
     readonly red: "bg-kumo-badge-red text-white";

package/dist/components/banner/Banner.svelte

@@ -1,56 +1,65 @@
 <script module lang="ts">
   import { cn } from '../../utils/cn';
 
-  export const KUMO_BANNER_BASE_STYLES =
-    'flex w-full items-start gap-3 rounded-lg px-4 py-3 text-base';
+  export const KUMO_BANNER_BASE_STYLES = 'flex w-full';
 
   export const KUMO_BANNER_VARIANTS = {
     variant: {
       default: {
-        classes: 'bg-kumo-banner-info text-kumo-info',
-        iconClasses: 'text-kumo-info',
+        classes: 'bg-kumo-info-tint text-kumo-info',
+        iconClasses: 'fill-kumo-info',
         description: 'Informational banner for general messages'
       },
       alert: {
-        classes: 'bg-kumo-banner-warning text-kumo-warning',
-        iconClasses: 'text-kumo-warning',
+        classes: 'bg-kumo-warning-tint text-kumo-warning',
+        iconClasses: 'fill-kumo-warning',
         description: 'Warning banner for cautionary messages'
       },
       error: {
-        classes: 'bg-kumo-danger-tint/60 text-kumo-danger',
-        iconClasses: 'text-kumo-danger',
+        classes: 'bg-kumo-danger-tint text-kumo-danger',
+        iconClasses: 'fill-kumo-danger',
         description: 'Error banner for critical issues'
       },
       secondary: {
-        classes: 'bg-kumo-contrast/5 text-kumo-subtle',
-        iconClasses: 'text-kumo-subtle',
+        classes: 'bg-kumo-contrast/5 text-kumo-default/70',
+        iconClasses: 'fill-kumo-interact',
         description: 'Neutral banner for secondary messages'
       }
+    },
+    size: {
+      base: { classes: 'items-start gap-3 rounded-lg px-4 py-3 text-base', description: 'Default banner size' },
+      sm: { classes: 'items-center gap-2 rounded-md px-3 py-2 text-sm', description: 'Compact banner for dialogs and tight spaces' }
     }
   } as const;
 
   export const KUMO_BANNER_DEFAULT_VARIANTS = {
-    variant: 'default'
+    variant: 'default',
+    size: 'base'
   } as const;
 
   type Variant = keyof typeof KUMO_BANNER_VARIANTS.variant;
+  type Size = keyof typeof KUMO_BANNER_VARIANTS.size;
   export type BannerVariant = Variant;
+  export type KumoBannerSize = Size;
 
   export function bannerVariants({
-    variant = KUMO_BANNER_DEFAULT_VARIANTS.variant
+    variant = KUMO_BANNER_DEFAULT_VARIANTS.variant,
+    size = KUMO_BANNER_DEFAULT_VARIANTS.size
   }: {
     variant?: Variant;
+    size?: Size;
   } = {}) {
     const variantConfig =
       KUMO_BANNER_VARIANTS.variant[variant] ??
       KUMO_BANNER_VARIANTS.variant[KUMO_BANNER_DEFAULT_VARIANTS.variant];
 
-    return cn(KUMO_BANNER_BASE_STYLES, variantConfig.classes);
+    return cn(KUMO_BANNER_BASE_STYLES, variantConfig.classes, KUMO_BANNER_VARIANTS.size[size]?.classes ?? KUMO_BANNER_VARIANTS.size.base.classes);
   }
 </script>
 
 <script lang="ts">
   import type { Component, Snippet } from 'svelte';
+  import { setBannerActionContext } from './context';
 
   interface Props {
     children?: Snippet;
@@ -58,6 +67,7 @@
     class?: string;
     icon?: Component;
     variant?: Variant;
+    size?: Size;
     title?: string;
     description?: string | Snippet;
     text?: string;
@@ -70,6 +80,7 @@
     class: className,
     icon: IconComponent,
     variant = 'default',
+    size = 'base',
     title,
     description,
     text,
@@ -80,7 +91,36 @@
     KUMO_BANNER_VARIANTS.variant[variant] ??
       KUMO_BANNER_VARIANTS.variant[KUMO_BANNER_DEFAULT_VARIANTS.variant]
   );
-  const classes = $derived(cn(bannerVariants({ variant }), className));
+  const classes = $derived(cn(bannerVariants({ variant, size }), className));
+  let actionElement = $state<HTMLSpanElement>();
+  let actionIsInlineLink = $state(false);
+  let observedAction = $state<Snippet>();
+
+  $effect(() => {
+    if (action !== observedAction) {
+      observedAction = action;
+      actionIsInlineLink = false;
+    }
+  });
+
+  $effect(() => {
+    if (size !== 'sm') {
+      actionIsInlineLink = false;
+      return;
+    }
+    if (!actionElement) return;
+
+    actionIsInlineLink = Boolean(actionElement.querySelector('[data-kumo-component="Link"]'));
+  });
+
+  setBannerActionContext({
+    get variant() {
+      return variant;
+    },
+    get size() {
+      return size === 'sm' ? 'xs' : 'sm';
+    }
+  });
 </script>
 
 <div class={classes} {...rest}>
@@ -90,20 +130,45 @@
         <IconComponent weight="fill" />
       </span>
     {/if}
-    <div class={cn('flex min-w-0 flex-1 items-center justify-between gap-3', !title && 'pt-px')}>
-      <div class="flex flex-col gap-0.5">
-        {#if title}<p class="font-medium leading-snug">{title}</p>{/if}
-        {#if description}
-          <div class="text-sm leading-snug">
-            {#if typeof description === 'function'}
-              {@render description()}
-            {:else}
-              <p>{description}</p>
-            {/if}
-          </div>
-        {/if}
-      </div>
-      {#if action}<div class="flex shrink-0 items-center gap-2">{@render action()}</div>{/if}
+    <div class={cn('flex min-w-0 flex-1 items-center justify-between', size === 'sm' ? 'gap-2' : 'gap-3', !title && 'pt-px')}>
+      {#if size === 'sm'}
+        <div class="flex min-w-0 flex-wrap items-baseline gap-x-1.5">
+          {#if title}
+            <span class="font-medium leading-snug">
+              {title}
+              {#if action && actionIsInlineLink && !description}
+                <span class="banner-compact-action ml-1.5 contents">{@render action()}</span>
+              {/if}
+            </span>
+          {/if}
+          {#if description}
+            <span class="text-sm leading-snug">
+              {#if typeof description === 'function'}{@render description()}{:else}{description}{/if}
+              {#if action && actionIsInlineLink}
+                <span class="banner-compact-action ml-1.5 contents">{@render action()}</span>
+              {/if}
+            </span>
+          {/if}
+          {#if action && !actionIsInlineLink}
+            <span
+              bind:this={actionElement}
+              class="banner-compact-action ml-auto flex shrink-0 items-center gap-2"
+            >
+              {@render action()}
+            </span>
+          {/if}
+        </div>
+      {:else}
+        <div class="flex flex-col gap-0.5">
+          {#if title}<p class="font-medium leading-snug">{title}</p>{/if}
+          {#if description}
+            <div class="text-sm leading-snug">
+              {#if typeof description === 'function'}{@render description()}{:else}<p>{description}</p>{/if}
+            </div>
+          {/if}
+        </div>
+      {/if}
+      {#if action && size !== 'sm'}<div class="flex shrink-0 items-center gap-2">{@render action()}</div>{/if}
     </div>
   {:else}
     {#if IconComponent}
@@ -118,3 +183,9 @@
     {/if}
   {/if}
 </div>
+
+<style>
+  :global(.banner-compact-action > [data-kumo-component='Link']) {
+    margin-left: 0.375rem;
+  }
+</style>

package/dist/components/banner/Banner.svelte.d.ts

@@ -1,35 +1,49 @@
-export declare const KUMO_BANNER_BASE_STYLES = "flex w-full items-start gap-3 rounded-lg px-4 py-3 text-base";
+export declare const KUMO_BANNER_BASE_STYLES = "flex w-full";
 export declare const KUMO_BANNER_VARIANTS: {
     readonly variant: {
         readonly default: {
-            readonly classes: "bg-kumo-banner-info text-kumo-info";
-            readonly iconClasses: "text-kumo-info";
+            readonly classes: "bg-kumo-info-tint text-kumo-info";
+            readonly iconClasses: "fill-kumo-info";
             readonly description: "Informational banner for general messages";
         };
         readonly alert: {
-            readonly classes: "bg-kumo-banner-warning text-kumo-warning";
-            readonly iconClasses: "text-kumo-warning";
+            readonly classes: "bg-kumo-warning-tint text-kumo-warning";
+            readonly iconClasses: "fill-kumo-warning";
             readonly description: "Warning banner for cautionary messages";
         };
         readonly error: {
-            readonly classes: "bg-kumo-danger-tint/60 text-kumo-danger";
-            readonly iconClasses: "text-kumo-danger";
+            readonly classes: "bg-kumo-danger-tint text-kumo-danger";
+            readonly iconClasses: "fill-kumo-danger";
             readonly description: "Error banner for critical issues";
         };
         readonly secondary: {
-            readonly classes: "bg-kumo-contrast/5 text-kumo-subtle";
-            readonly iconClasses: "text-kumo-subtle";
+            readonly classes: "bg-kumo-contrast/5 text-kumo-default/70";
+            readonly iconClasses: "fill-kumo-interact";
             readonly description: "Neutral banner for secondary messages";
         };
     };
+    readonly size: {
+        readonly base: {
+            readonly classes: "items-start gap-3 rounded-lg px-4 py-3 text-base";
+            readonly description: "Default banner size";
+        };
+        readonly sm: {
+            readonly classes: "items-center gap-2 rounded-md px-3 py-2 text-sm";
+            readonly description: "Compact banner for dialogs and tight spaces";
+        };
+    };
 };
 export declare const KUMO_BANNER_DEFAULT_VARIANTS: {
     readonly variant: "default";
+    readonly size: "base";
 };
 type Variant = keyof typeof KUMO_BANNER_VARIANTS.variant;
+type Size = keyof typeof KUMO_BANNER_VARIANTS.size;
 export type BannerVariant = Variant;
-export declare function bannerVariants({ variant }?: {
+export type KumoBannerSize = Size;
+export declare function bannerVariants({ variant, size }?: {
     variant?: Variant;
+    size?: Size;
 }): string;
 import type { Component, Snippet } from 'svelte';
 interface Props {
@@ -38,6 +52,7 @@ interface Props {
     class?: string;
     icon?: Component;
     variant?: Variant;
+    size?: Size;
     title?: string;
     description?: string | Snippet;
     text?: string;

package/dist/components/banner/BannerAction.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import { Button } from '../button';
+  import { cn } from '../../utils/cn';
+  import { getBannerActionContext } from './context';
+
+  type ActionVariant = 'primary' | 'secondary' | 'ghost';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    icon?: Component;
+    variant?: ActionVariant;
+    style?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    icon,
+    variant = 'primary',
+    style,
+    ...rest
+  }: Props = $props();
+
+  const banner = getBannerActionContext();
+  const buttonVariant = $derived(variant === 'secondary' ? 'outline' : variant);
+  const accents = {
+    default: { token: 'var(--color-kumo-info)', secondary: 'text-inherit ring-kumo-info/50 fill-kumo-info hover:!text-inherit hover:!ring-kumo-info/50 hover:bg-kumo-info/10', ghost: 'text-inherit fill-kumo-info hover:bg-kumo-info/10' },
+    alert: { token: 'var(--color-kumo-warning)', secondary: 'text-inherit ring-kumo-warning/50 fill-kumo-warning hover:!text-inherit hover:!ring-kumo-warning/50 hover:bg-kumo-warning/10', ghost: 'text-inherit fill-kumo-warning hover:bg-kumo-warning/10' },
+    error: { token: 'var(--color-kumo-danger)', secondary: 'text-inherit ring-kumo-danger/50 fill-kumo-danger hover:!text-inherit hover:!ring-kumo-danger/50 hover:bg-kumo-danger/10', ghost: 'text-inherit fill-kumo-danger hover:bg-kumo-danger/10' },
+    secondary: { token: 'var(--color-neutral-700, oklch(37.1% 0 0))', secondary: 'text-inherit ring-kumo-focus/20 fill-kumo-subtle hover:!text-inherit hover:!ring-kumo-focus/20 hover:bg-kumo-contrast/10', ghost: 'text-inherit fill-kumo-subtle hover:bg-kumo-contrast/10' }
+  } as const;
+  const accent = accents[banner.variant];
+  const actionClass = $derived(cn(variant !== 'primary' && [
+    'text-inherit',
+    variant === 'secondary' ? accent.secondary : accent.ghost,
+    variant === 'secondary' && 'hover:!text-inherit'
+  ], className));
+  const actionStyle = $derived(
+    variant === 'primary'
+      ? [
+          `--kumo-button-emphasis-ring: color-mix(in oklch, ${accent.token}, black 10%)`,
+          `--kumo-button-emphasis-bg: color-mix(in oklch, ${accent.token}, white 30%)`,
+          `--kumo-button-emphasis-gradient-start: color-mix(in oklch, ${accent.token}, white 15%)`,
+          `--kumo-button-emphasis-gradient-end: ${accent.token}`,
+          style
+        ].filter(Boolean).join('; ')
+      : style
+  );
+</script>
+
+<Button
+  variant={buttonVariant}
+  size={banner.size === 'xs' ? 'xs' : 'sm'}
+  {icon}
+  class={actionClass}
+  style={actionStyle}
+  data-kumo-component="Banner.Action"
+  {...rest}
+>
+  {@render children?.()}
+</Button>

package/dist/components/banner/BannerAction.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Component, Snippet } from 'svelte';
+type ActionVariant = 'primary' | 'secondary' | 'ghost';
+interface Props {
+    children?: Snippet;
+    class?: string;
+    icon?: Component;
+    variant?: ActionVariant;
+    style?: string;
+    [key: string]: unknown;
+}
+declare const BannerAction: Component<Props, {}, "">;
+type BannerAction = ReturnType<typeof BannerAction>;
+export default BannerAction;

package/dist/components/banner/banner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/banner/banner.test.js

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import Banner, { bannerVariants } from "./Banner.svelte";
+import { Banner as BannerCompound } from "./index";
+import BannerLinkActionTest from "../../test-fixtures/BannerLinkActionTest.svelte";
+describe("Banner", () => {
+    it("matches the 2.9 compact size contract", () => {
+        const classes = bannerVariants({ size: "sm" });
+        expect(classes).toContain("items-center");
+        expect(classes).toContain("px-3");
+        expect(classes).toContain("py-2");
+        expect(classes).toContain("text-sm");
+    });
+    it("renders compact title and description inline", () => {
+        render(Banner, {
+            size: "sm",
+            title: "Heads up",
+            description: "More details",
+        });
+        const title = screen.getByText("Heads up");
+        const description = screen.getByText("More details");
+        expect(title.tagName).toBe("SPAN");
+        expect(description.tagName).toBe("SPAN");
+        expect(title.parentElement).toBe(description.parentElement);
+    });
+    it("uses the updated neutral secondary color", () => {
+        expect(bannerVariants({ variant: "secondary" })).toContain("text-kumo-default/70");
+    });
+    it("exposes the action through the compound Banner API", () => {
+        expect(BannerCompound).toBe(Banner);
+        expect(BannerCompound.Action).toBeDefined();
+    });
+    it("renders a Link action inline in a compact banner", () => {
+        render(BannerLinkActionTest);
+        const description = screen.getByText("A DNS record already exists.");
+        const action = screen.getByTestId("action");
+        expect(action.parentElement?.parentElement).toBe(description);
+        expect(action.parentElement?.className).toContain("banner-compact-action");
+    });
+});

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

@@ -0,0 +1,8 @@
+import type { BannerVariant } from "./Banner.svelte";
+export declare const BANNER_ACTION_CONTEXT: unique symbol;
+export interface BannerActionContextValue {
+    variant: BannerVariant;
+    size: "xs" | "sm";
+}
+export declare function setBannerActionContext(context: BannerActionContextValue): void;
+export declare function getBannerActionContext(): BannerActionContextValue;

package/dist/components/banner/context.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from "svelte";
+export const BANNER_ACTION_CONTEXT = Symbol("kumo-banner-action");
+export function setBannerActionContext(context) {
+    setContext(BANNER_ACTION_CONTEXT, context);
+}
+export function getBannerActionContext() {
+    return (getContext(BANNER_ACTION_CONTEXT) ?? {
+        variant: "default",
+        size: "sm",
+    });
+}

package/dist/components/banner/index.d.ts

@@ -1,2 +1,8 @@
-export { default as Banner, KUMO_BANNER_BASE_STYLES, KUMO_BANNER_DEFAULT_VARIANTS, KUMO_BANNER_VARIANTS, bannerVariants } from './Banner.svelte';
-export type { BannerVariant } from './Banner.svelte';
+import BannerRoot from "./Banner.svelte";
+import BannerAction from "./BannerAction.svelte";
+export { KUMO_BANNER_BASE_STYLES, KUMO_BANNER_DEFAULT_VARIANTS, KUMO_BANNER_VARIANTS, bannerVariants, } from "./Banner.svelte";
+export type { BannerVariant, KumoBannerSize } from "./Banner.svelte";
+export declare const Banner: typeof BannerRoot & {
+    Action: typeof BannerAction;
+};
+export { BannerRoot, BannerAction };

package/dist/components/banner/index.js

@@ -1 +1,7 @@
-export { default as Banner, KUMO_BANNER_BASE_STYLES, KUMO_BANNER_DEFAULT_VARIANTS, KUMO_BANNER_VARIANTS, bannerVariants } from './Banner.svelte';
+import BannerRoot from "./Banner.svelte";
+import BannerAction from "./BannerAction.svelte";
+export { KUMO_BANNER_BASE_STYLES, KUMO_BANNER_DEFAULT_VARIANTS, KUMO_BANNER_VARIANTS, bannerVariants, } from "./Banner.svelte";
+export const Banner = Object.assign(BannerRoot, {
+    Action: BannerAction,
+});
+export { BannerRoot, BannerAction };

package/dist/components/breadcrumbs/BreadcrumbsLink.svelte

@@ -11,11 +11,11 @@
   let { children, href, icon: Icon, ...rest }: Props = $props();
 </script>
 
-<a href={href} data-kumo-component="Breadcrumbs" data-kumo-part="link" class="flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline" {...rest}>
+<a href={href} data-kumo-component="Breadcrumbs" data-kumo-part="link" class="flex shrink-0 items-center gap-1 whitespace-nowrap text-kumo-subtle no-underline" {...rest}>
   {#if Icon}
     <span class="flex shrink-0 items-center">
       <Icon size={16} />
     </span>
   {/if}
-  <span class="truncate">{@render children?.()}</span>
+  <span>{@render children?.()}</span>
 </a>