kumo-svelte 0.1.6 → 0.1.7

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.6",
+  "version": "0.1.7",
   "components": {
     "Autocomplete": {
       "name": "Autocomplete",
@@ -305,6 +305,16 @@
           "default": "primary",
           "description": "Visual variant."
         },
+        "appearance": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "filled",
+            "dot"
+          ],
+          "default": "filled",
+          "description": "Visual appearance. Dot renders an outlined badge with a small status indicator for success, warning, error, or neutral variants."
+        },
         "class": {
           "type": "string",
           "optional": true,
@@ -334,6 +344,7 @@
         "bg-kumo-warning-tint",
         "border-kumo-brand",
         "border-kumo-fill",
+        "ring-kumo-hairline",
         "text-kumo-badge-inverted",
         "text-kumo-badge-neutral-subtle",
         "text-kumo-badge-teal-subtle",
@@ -3865,6 +3876,7 @@
         "bg-kumo-base",
         "bg-kumo-tint",
         "ring-kumo-brand",
+        "ring-kumo-danger",
         "ring-kumo-focus",
         "ring-kumo-line",
         "text-kumo-default",

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Kumo Svelte Component Registry
 
-Version: 0.1.6
+Version: 0.1.7
 
 ## Autocomplete
 

package/dist/components/badge/Badge.svelte

@@ -20,7 +20,20 @@
     blue: 'bg-kumo-badge-blue text-white'
   } as const;
 
+  export const KUMO_BADGE_APPEARANCES = {
+    filled: '',
+    dot: 'gap-1.5 bg-transparent text-kumo-default ring ring-kumo-hairline'
+  } as const;
+
+  export const KUMO_BADGE_DOT_COLORS = {
+    success: 'bg-kumo-badge-green',
+    warning: 'bg-kumo-badge-orange',
+    error: 'bg-kumo-badge-red',
+    neutral: 'bg-kumo-badge-neutral'
+  } as const;
+
   export type BadgeVariant = keyof typeof KUMO_BADGE_VARIANTS;
+  export type BadgeAppearance = keyof typeof KUMO_BADGE_APPEARANCES;
 </script>
 
 <script lang="ts">
@@ -31,12 +44,32 @@
     children?: Snippet;
     class?: string;
     variant?: BadgeVariant;
+    appearance?: BadgeAppearance;
     [key: string]: unknown;
   }
 
-  let { children, class: className, variant = 'primary', ...rest }: Props = $props();
+  let {
+    children,
+    class: className,
+    variant = 'primary',
+    appearance = 'filled',
+    ...rest
+  }: Props = $props();
+
+  const dotColor = $derived(appearance === 'dot' ? KUMO_BADGE_DOT_COLORS[variant as keyof typeof KUMO_BADGE_DOT_COLORS] : undefined);
 </script>
 
-<span class={cn(KUMO_BADGE_BASE_STYLES, KUMO_BADGE_VARIANTS[variant], className)} {...rest}>
+<span
+  class={cn(
+    KUMO_BADGE_BASE_STYLES,
+    appearance === 'dot' ? undefined : KUMO_BADGE_VARIANTS[variant],
+    KUMO_BADGE_APPEARANCES[appearance],
+    className
+  )}
+  {...rest}
+>
+  {#if dotColor}
+    <span aria-hidden="true" class={cn('size-1.75 shrink-0 rounded-full', dotColor)}></span>
+  {/if}
   {@render children?.()}
 </span>

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

@@ -18,12 +18,24 @@ export declare const KUMO_BADGE_VARIANTS: {
     readonly 'teal-subtle': "bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle";
     readonly blue: "bg-kumo-badge-blue text-white";
 };
+export declare const KUMO_BADGE_APPEARANCES: {
+    readonly filled: "";
+    readonly dot: "gap-1.5 bg-transparent text-kumo-default ring ring-kumo-hairline";
+};
+export declare const KUMO_BADGE_DOT_COLORS: {
+    readonly success: "bg-kumo-badge-green";
+    readonly warning: "bg-kumo-badge-orange";
+    readonly error: "bg-kumo-badge-red";
+    readonly neutral: "bg-kumo-badge-neutral";
+};
 export type BadgeVariant = keyof typeof KUMO_BADGE_VARIANTS;
+export type BadgeAppearance = keyof typeof KUMO_BADGE_APPEARANCES;
 import type { Snippet } from 'svelte';
 interface Props {
     children?: Snippet;
     class?: string;
     variant?: BadgeVariant;
+    appearance?: BadgeAppearance;
     [key: string]: unknown;
 }
 declare const Badge: import("svelte").Component<Props, {}, "">;

package/dist/components/code/CodeHighlighted.svelte

@@ -14,14 +14,23 @@
   export type CodeHighlightedLang =
     | 'bash'
     | 'css'
+    | 'diff'
+    | 'graphql'
+    | 'hcl'
     | 'html'
     | 'javascript'
+    | 'jsx'
     | 'json'
     | 'jsonc'
+    | 'markdown'
+    | 'python'
+    | 'sql'
     | 'svelte'
+    | 'toml'
     | 'ts'
     | 'typescript'
-    | 'tsx';
+    | 'tsx'
+    | 'yaml';
 </script>
 
 <script lang="ts">
@@ -48,10 +57,18 @@
   }: Props = $props();
 
   const languageAliases: Record<string, string> = {
+    cjs: 'javascript',
+    cts: 'typescript',
+    gql: 'graphql',
     js: 'javascript',
+    md: 'markdown',
+    mjs: 'javascript',
+    mts: 'typescript',
+    py: 'python',
     sh: 'bash',
     shell: 'bash',
     ts: 'typescript',
+    yml: 'yaml',
     zsh: 'bash'
   };
 

package/dist/components/code/CodeHighlighted.svelte.d.ts

@@ -9,7 +9,7 @@ export declare const KUMO_CODE_HIGHLIGHTED_STYLING: {
         readonly overflow: "overflow-hidden";
     };
 };
-export type CodeHighlightedLang = 'bash' | 'css' | 'html' | 'javascript' | 'json' | 'jsonc' | 'svelte' | 'ts' | 'typescript' | 'tsx';
+export type CodeHighlightedLang = 'bash' | 'css' | 'diff' | 'graphql' | 'hcl' | 'html' | 'javascript' | 'jsx' | 'json' | 'jsonc' | 'markdown' | 'python' | 'sql' | 'svelte' | 'toml' | 'ts' | 'typescript' | 'tsx' | 'yaml';
 interface Props {
     code: string;
     lang?: CodeHighlightedLang;

package/dist/components/input-group/InputGroup.svelte

@@ -89,7 +89,7 @@
       focusMode === 'container'
         ? [
             'overflow-hidden bg-kumo-control ring ring-kumo-line',
-            'focus-within:ring-kumo-focus'
+            'focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]'
           ]
         : 'isolate overflow-visible bg-kumo-control ring-0 shadow-none',
       'has-[input[aria-invalid=true]]:ring-kumo-danger',

package/dist/components/popover/Popover.svelte

@@ -31,7 +31,7 @@
     description,
     side = 'bottom',
     align = 'center',
-    sideOffset = 8,
+    sideOffset = 0,
     alignOffset = 0,
     openOnHover = false,
     delay = 700,

package/dist/components/popover/PopoverContent.svelte

@@ -26,7 +26,7 @@
     class: className,
     side = 'bottom',
     align = 'center',
-    sideOffset = 8,
+    sideOffset = 0,
     alignOffset = 0,
     strategy,
     positionMethod,
@@ -92,34 +92,26 @@
 
 <style>
   :global(.kumo-popover-arrow[data-side='top']) {
-    top: calc(100% - 1px) !important;
-    right: auto !important;
-    bottom: auto !important;
-    left: calc(50% - 10px) !important;
-    transform: rotate(180deg) !important;
+    top: auto !important;
+    bottom: -8px !important;
+    transform: none !important;
   }
 
   :global(.kumo-popover-arrow[data-side='bottom']) {
-    top: auto !important;
-    right: auto !important;
-    bottom: calc(100% - 1px) !important;
-    left: calc(50% - 10px) !important;
+    top: -8px !important;
+    bottom: auto !important;
     transform: none !important;
   }
 
   :global(.kumo-popover-arrow[data-side='left']) {
-    top: calc(50% - 5px) !important;
     right: -13px !important;
-    bottom: auto !important;
     left: auto !important;
-    transform: rotate(90deg) !important;
+    transform: none !important;
   }
 
   :global(.kumo-popover-arrow[data-side='right']) {
-    top: calc(50% - 5px) !important;
     right: auto !important;
-    bottom: auto !important;
     left: -13px !important;
-    transform: rotate(-90deg) !important;
+    transform: none !important;
   }
 </style>

package/dist/components/select/Select.svelte

@@ -123,9 +123,11 @@
         'inline-flex w-full items-center justify-between gap-2 bg-kumo-base text-left font-normal text-kumo-default shadow-xs outline-none ring ring-kumo-line transition focus:opacity-100 focus:ring-2 focus:ring-kumo-focus/50 focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50 *:in-focus:opacity-100',
         sizes[size],
         !value || (Array.isArray(value) && value.length === 0) ? 'text-kumo-placeholder' : undefined,
+        errorMessage ? 'ring-kumo-danger! focus:ring-kumo-danger/50!' : undefined,
         className
       )}
       aria-label={rest['aria-label'] as string | undefined}
+      aria-invalid={Boolean(errorMessage) || undefined}
     >
       {#if loading}
         <span class="inline-flex min-w-0 flex-1 items-center">

package/dist/components/tooltip/Tooltip.svelte

@@ -40,6 +40,7 @@
     onOpenChange?: (open: boolean) => void;
     side?: TooltipSide;
     align?: TooltipAlign;
+    sideOffset?: number;
     delay?: number;
     closeDelay?: number;
     disabled?: boolean;
@@ -56,6 +57,7 @@
     onOpenChange,
     side = KUMO_TOOLTIP_DEFAULT_VARIANTS.side,
     align,
+    sideOffset = 1,
     delay = 600,
     closeDelay,
     disabled,
@@ -64,10 +66,11 @@
   }: Props = $props();
 
   let internalOpen = $state(false);
+
   function tooltipVariants({ side = KUMO_TOOLTIP_DEFAULT_VARIANTS.side }: { side?: TooltipSide } = {}) {
     return cn(
       'flex origin-(--bits-floating-transform-origin) flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default',
-      'shadow-lg shadow-kumo-tip-shadow outline outline-1 outline-kumo-fill',
+      'shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill',
       'transition-[transform,scale,opacity] duration-150',
       'data-[starting-style]:scale-90 data-[starting-style]:opacity-0',
       'data-[ending-style]:scale-90 data-[ending-style]:opacity-0',
@@ -108,7 +111,12 @@
   {/if}
 
   <TooltipPrimitive.Portal to={container}>
-    <TooltipPrimitive.Content class={popupClass} {side} {align} sideOffset={10}>
+    <TooltipPrimitive.Content
+      class={cn('max-w-[var(--bits-floating-available-width)]', popupClass)}
+      {side}
+      {align}
+      {sideOffset}
+    >
       <TooltipPrimitive.Arrow
         width={20}
         height={10}
@@ -158,34 +166,26 @@
 
 <style>
   :global(.kumo-tooltip-arrow[data-side='top']) {
-    top: calc(100% - 1px) !important;
-    right: auto !important;
-    bottom: auto !important;
-    left: calc(50% - 10px) !important;
-    transform: rotate(180deg) !important;
+    top: auto !important;
+    bottom: -8px !important;
+    transform: none !important;
   }
 
   :global(.kumo-tooltip-arrow[data-side='bottom']) {
-    top: auto !important;
-    right: auto !important;
-    bottom: calc(100% - 1px) !important;
-    left: calc(50% - 10px) !important;
+    top: -8px !important;
+    bottom: auto !important;
     transform: none !important;
   }
 
   :global(.kumo-tooltip-arrow[data-side='left']) {
-    top: calc(50% - 5px) !important;
     right: -13px !important;
-    bottom: auto !important;
     left: auto !important;
-    transform: rotate(90deg) !important;
+    transform: none !important;
   }
 
   :global(.kumo-tooltip-arrow[data-side='right']) {
-    top: calc(50% - 5px) !important;
     right: auto !important;
-    bottom: auto !important;
     left: -13px !important;
-    transform: rotate(-90deg) !important;
+    transform: none !important;
   }
 </style>

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -9,6 +9,7 @@ declare const Tooltip: import("svelte").Component<{
     onOpenChange?: (open: boolean) => void;
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
+    sideOffset?: number;
     delay?: number;
     closeDelay?: number;
     disabled?: boolean;

package/dist/docs/CodeBlock.svelte

@@ -11,16 +11,24 @@
   let copied = $state(false);
 
   const languageAliases: Record<string, string> = {
-    svelte: 'svelte',
-    ts: 'typescript',
-    tsx: 'tsx',
+    cjs: 'javascript',
+    cts: 'typescript',
+    gql: 'graphql',
     js: 'javascript',
     jsx: 'jsx',
+    md: 'markdown',
+    mjs: 'javascript',
+    mts: 'typescript',
+    py: 'python',
     sh: 'bash',
     shell: 'bash',
+    svelte: 'svelte',
+    ts: 'typescript',
+    tsx: 'tsx',
+    txt: 'text',
+    yml: 'yaml',
     zsh: 'bash',
     jsonc: 'jsonc',
-    txt: 'text'
   };
 
   const normalizedCode = $derived(

package/dist/docs/HomeGrid.svelte

@@ -315,11 +315,13 @@
                                 <div
                                     id="home-tooltip-add"
                                     role="tooltip"
-                                    class="kumo-tooltip-popup absolute bottom-[calc(100%+10px)] left-1/2 z-10 flex -translate-x-1/2 flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm whitespace-nowrap text-kumo-default shadow-lg shadow-kumo-tip-shadow outline outline-1 outline-kumo-fill"
+                                    data-side="top"
+                                    class="kumo-tooltip-popup absolute bottom-[calc(100%+10px)] left-1/2 z-10 flex -translate-x-1/2 flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm whitespace-nowrap text-kumo-default shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
                                 >
                                     Add
                                     <span
-                                        class="absolute top-[calc(100%-1px)] left-1/2 flex -translate-x-1/2 rotate-180"
+                                        class="kumo-tooltip-arrow absolute bottom-[-8px] left-1/2 flex -translate-x-1/2 rotate-180"
+                                        data-side="top"
                                         aria-hidden="true"
                                     >
                                         <svg
@@ -466,15 +468,11 @@
                         class="absolute top-4 left-4 text-base font-medium text-kumo-subtle hover:text-kumo-default"
                         >SkeletonLine</a
                     >
-                    <div
-                        class="flex w-full items-center justify-center p-8 tracking-normal leading-normal"
-                    >
-                        <div class="flex w-[200px] flex-col gap-2">
-                            <SkeletonLine minWidth={50} maxWidth={100} />
-                            <SkeletonLine minWidth={100} />
-                            <SkeletonLine minWidth={50} maxWidth={150} />
-                        </div>
-                    </div>
+                    <div class="flex w-[200px] flex-col gap-2">
+                              <SkeletonLine minWidth={50} maxWidth={100} />
+                              <SkeletonLine minWidth={100} />
+                              <SkeletonLine minWidth={50} maxWidth={150} />
+                            </div>
                 </li>
 
                 <li

package/dist/docs/changelog.server.js

@@ -1,11 +1,7 @@
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
+import rawChangelog from '../../../CHANGELOG.md?raw';
 import { CHANGELOG_PER_PAGE } from './changelog';
 const bumpPriority = ['major', 'minor', 'patch'];
-function changelogPath() {
-    return resolve(process.cwd(), 'CHANGELOG.md');
-}
-export function parseChangelog(raw = readFileSync(changelogPath(), 'utf-8')) {
+export function parseChangelog(raw = rawChangelog) {
     const versions = [];
     let curVer = null;
     let curSec = null;

package/dist/docs/demo-snippets/BadgeDotDemo.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Badge } from '../../index.ts';
+</script>
+
+<div class="flex flex-wrap items-center gap-2">
+  <Badge variant="success" appearance="dot">Healthy</Badge>
+  <Badge variant="warning" appearance="dot">Degraded</Badge>
+  <Badge variant="error" appearance="dot">Down</Badge>
+  <Badge variant="neutral" appearance="dot">Unknown</Badge>
+</div>

package/dist/docs/demo-snippets/BadgeDotDemo.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 BadgeDotDemo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BadgeDotDemo = InstanceType<typeof BadgeDotDemo>;
+export default BadgeDotDemo;