kumo-svelte 0.1.8 → 0.2.0

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.8",
+  "version": "0.2.0",
   "components": {
     "Autocomplete": {
       "name": "Autocomplete",
@@ -1206,6 +1206,12 @@
           "optional": true,
           "description": "Called when open state changes."
         },
+        "autoScrollOnOpen": {
+          "type": "boolean",
+          "optional": true,
+          "default": "false",
+          "description": "Scrolls newly expanded sidebar content into view after opening."
+        },
         "onOpenChangeComplete": {
           "type": "(open: boolean) => void",
           "optional": true,
@@ -4077,6 +4083,11 @@
           "required": true,
           "description": "Sidebar content — Header, Content, Footer, groups, menus, and related slots."
         },
+        "contentClass": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional classes for the desktop content container."
+        },
         "class": {
           "type": "string",
           "optional": true,
@@ -4084,7 +4095,6 @@
         }
       },
       "colors": [
-        "bg-kumo-base",
         "bg-kumo-brand",
         "bg-kumo-hairline",
         "bg-kumo-line",
@@ -4293,6 +4303,12 @@
               "default": "250",
               "description": "Transition duration in milliseconds for width and peek animations."
             },
+            "mobileBreakpoint": {
+              "type": "number",
+              "optional": true,
+              "default": "768",
+              "description": "Viewport width below which the sidebar renders as a mobile navigation drawer."
+            },
             "children": {
               "type": "Snippet",
               "optional": false,

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Kumo Svelte Component Registry
 
-Version: 0.1.8
+Version: 0.2.0
 
 ## Autocomplete
 

package/dist/components/chart/Chart.svelte

@@ -73,6 +73,8 @@
 
   const prepareChartOptions = (rawOptions: KumoChartOption, suppressAnimation = false): EChartsOption => {
     const optionsWithTheme = {
+      backgroundColor: 'transparent',
+      color: effectiveDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS,
       ...rawOptions,
       ...(suppressAnimation ? { animation: false } : {}),
       textStyle: {
@@ -123,8 +125,7 @@
   const initChart = () => {
     if (!el) return;
     chart?.dispose();
-    const theme = effectiveDarkMode ? { darkMode: true, color: CHART_DARK_COLORS } : { color: CHART_LIGHT_COLORS };
-    const nextChart = echarts.init(el, theme, { renderer: 'canvas' });
+    const nextChart = echarts.init(el, effectiveDarkMode ? 'dark' : undefined, { renderer: 'canvas' });
     chart = nextChart;
     updateOptions();
   };

package/dist/components/flow/Connectors.svelte

@@ -22,7 +22,7 @@
   });
 </script>
 
-<svg width="100%" height="100%" aria-hidden="true" class="text-kumo-inactive overflow-visible">
+<svg width="100%" height="100%" overflow="visible" aria-hidden="true" class="text-kumo-inactive overflow-visible">
   <defs>
     {#if markerId}
       <marker

package/dist/components/flow/connectors.d.ts

@@ -1,4 +1,4 @@
-import type { FlowOrientation } from './context';
+import type { FlowOrientation } from "./context";
 export interface Connector {
     x1: number;
     y1: number;
@@ -23,4 +23,4 @@ export declare function createRoundedPath({ x1, y1, x2, y2 }: {
     y1: number;
     x2: number;
     y2: number;
-}, { cornerRadius: maxCornerRadius, midOffset, arrowheadOffset, isBottom, single, orientation }?: PathProps): string;
+}, { cornerRadius: maxCornerRadius, midOffset, arrowheadOffset, isBottom, single, orientation, }?: PathProps): string;

package/dist/components/flow/connectors.js

@@ -1,7 +1,7 @@
 const FLAT_THRESHOLD = 2;
-export function createRoundedPath({ x1, y1, x2, y2 }, { cornerRadius: maxCornerRadius = 8, midOffset = 32, arrowheadOffset = 8, isBottom = false, single = false, orientation = 'vertical' } = {}) {
-    const cornerRadius = Math.min(maxCornerRadius, Math.abs(orientation === 'horizontal' ? (y2 - y1) / 2 : (x2 - x1) / 2));
-    if (orientation === 'horizontal') {
+export function createRoundedPath({ x1, y1, x2, y2 }, { cornerRadius: maxCornerRadius = 8, midOffset = 32, arrowheadOffset = 8, isBottom = false, single = false, orientation = "vertical", } = {}) {
+    const cornerRadius = Math.min(maxCornerRadius, Math.abs(orientation === "horizontal" ? (y2 - y1) / 2 : (x2 - x1) / 2));
+    if (orientation === "horizontal") {
         if (Math.abs(y2 - y1) <= FLAT_THRESHOLD) {
             return `M ${x1} ${y1} L ${x2 - arrowheadOffset} ${y2}`;
         }
@@ -18,16 +18,20 @@ export function createRoundedPath({ x1, y1, x2, y2 }, { cornerRadius: maxCornerR
             `Q ${verticalX} ${y1} ${verticalX} ${verticalStart}`,
             single
                 ? `L ${verticalX} ${verticalEnd} Q ${verticalX} ${y2} ${secondHorizontalStart} ${y2}`
-                : `L ${verticalX} ${y2}`
+                : `L ${verticalX} ${y2}`,
         ];
         const topCurveCommands = [
             single
                 ? `L ${firstHorizontalEnd} ${y1} Q ${verticalX} ${y1} ${verticalX} ${verticalStart}`
                 : `L ${verticalX} ${y1}`,
             `L ${verticalX} ${verticalEnd}`,
-            `Q ${verticalX} ${y2} ${secondHorizontalStart} ${y2}`
+            `Q ${verticalX} ${y2} ${secondHorizontalStart} ${y2}`,
         ];
-        return [`M ${x1} ${y1}`, isBottom ? bottomCurveCommands : topCurveCommands, `L ${pathEndX} ${y2}`].join(' ');
+        return [
+            `M ${x1} ${y1}`,
+            ...(isBottom ? bottomCurveCommands : topCurveCommands),
+            `L ${pathEndX} ${y2}`,
+        ].join(" ");
     }
     if (Math.abs(x2 - x1) <= FLAT_THRESHOLD) {
         return `M ${x1} ${y1} L ${x2} ${y2 - arrowheadOffset}`;
@@ -43,12 +47,16 @@ export function createRoundedPath({ x1, y1, x2, y2 }, { cornerRadius: maxCornerR
     const bottomCurveCommands = [
         `L ${x1} ${firstVerticalEnd}`,
         `Q ${x1} ${horizontalY} ${horizontalStart} ${horizontalY}`,
-        `L ${x2} ${horizontalY}`
+        `L ${x2} ${horizontalY}`,
     ];
     const topCurveCommands = [
         `L ${x1} ${horizontalY}`,
         `L ${horizontalEnd} ${horizontalY}`,
-        `Q ${x2} ${horizontalY} ${x2} ${secondVerticalStart}`
+        `Q ${x2} ${horizontalY} ${x2} ${secondVerticalStart}`,
     ];
-    return [`M ${x1} ${y1}`, isBottom ? bottomCurveCommands : topCurveCommands, `L ${x2} ${pathEndY}`].join(' ');
+    return [
+        `M ${x1} ${y1}`,
+        ...(isBottom ? bottomCurveCommands : topCurveCommands),
+        `L ${x2} ${pathEndY}`,
+    ].join(" ");
 }

package/dist/components/flow/flow.test.js

@@ -1,7 +1,8 @@
 // @vitest-environment happy-dom
-import { fireEvent, render, screen } from '@testing-library/svelte';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import FlowPanningTestHost from './FlowPanningTestHost.svelte';
+import { fireEvent, render, screen } from "@testing-library/svelte";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createRoundedPath } from "./connectors";
+import FlowPanningTestHost from "./FlowPanningTestHost.svelte";
 const resizeObservers = [];
 class TestResizeObserver {
     callback;
@@ -25,7 +26,7 @@ function setRect(element, rect) {
         height: 0,
         ...rect,
     };
-    vi.spyOn(element, 'getBoundingClientRect').mockReturnValue(nextRect);
+    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(nextRect);
 }
 async function measure() {
     for (const observer of resizeObservers) {
@@ -35,31 +36,31 @@ async function measure() {
 }
 beforeEach(() => {
     resizeObservers.length = 0;
-    vi.stubGlobal('ResizeObserver', TestResizeObserver);
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
+    vi.stubGlobal("ResizeObserver", TestResizeObserver);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
 });
-describe('Flow canvas panning', () => {
-    it('pans with the wheel and clamps to measured bounds', async () => {
+describe("Flow canvas panning", () => {
+    it("pans with the wheel and clamps to measured bounds", async () => {
         render(FlowPanningTestHost);
-        const wrapper = screen.getByTestId('flow-wrapper');
-        const contents = screen.getByTestId('flow-contents');
+        const wrapper = screen.getByTestId("flow-wrapper");
+        const contents = screen.getByTestId("flow-contents");
         setRect(wrapper, { width: 300, height: 200 });
         setRect(contents, { width: 800, height: 500 });
         await measure();
         await fireEvent.wheel(wrapper, { deltaX: 700, deltaY: 400 });
-        expect(contents.style.transform).toBe('translate(-500px, -300px)');
+        expect(contents.style.transform).toBe("translate(-500px, -300px)");
         await fireEvent.wheel(wrapper, { deltaX: -1000, deltaY: -1000 });
-        expect(contents.style.transform).toBe('translate(0px, 0px)');
+        expect(contents.style.transform).toBe("translate(0px, 0px)");
     });
-    it('drag-pans the canvas while ignoring drags that start on nodes', async () => {
+    it("drag-pans the canvas while ignoring drags that start on nodes", async () => {
         render(FlowPanningTestHost);
-        const wrapper = screen.getByTestId('flow-wrapper');
-        const contents = screen.getByTestId('flow-contents');
+        const wrapper = screen.getByTestId("flow-wrapper");
+        const contents = screen.getByTestId("flow-contents");
         setRect(wrapper, { width: 300, height: 200 });
         setRect(contents, { width: 800, height: 500 });
         await measure();
-        await fireEvent.pointerDown(screen.getByTestId('start'), {
+        await fireEvent.pointerDown(screen.getByTestId("start"), {
             button: 0,
             clientX: 100,
             clientY: 100,
@@ -70,23 +71,31 @@ describe('Flow canvas panning', () => {
             clientY: 50,
             pointerId: 1,
         });
-        expect(contents.style.transform).toBe('translate(0px, 0px)');
+        expect(contents.style.transform).toBe("translate(0px, 0px)");
         await fireEvent.pointerDown(wrapper, {
             button: 0,
             clientX: 100,
             clientY: 100,
             pointerId: 2,
         });
-        expect(document.body.style.cursor).toBe('grabbing');
-        expect(document.body.style.userSelect).toBe('none');
+        expect(document.body.style.cursor).toBe("grabbing");
+        expect(document.body.style.userSelect).toBe("none");
         await fireEvent.pointerMove(wrapper, {
             clientX: 40,
             clientY: 10,
             pointerId: 2,
         });
-        expect(contents.style.transform).toBe('translate(-60px, -90px)');
+        expect(contents.style.transform).toBe("translate(-60px, -90px)");
         await fireEvent.pointerUp(wrapper, { pointerId: 2 });
-        expect(document.body.style.cursor).toBe('');
-        expect(document.body.style.userSelect).toBe('');
+        expect(document.body.style.cursor).toBe("");
+        expect(document.body.style.userSelect).toBe("");
+    });
+});
+describe("createRoundedPath", () => {
+    it("serializes connector command arrays without comma separators", () => {
+        const verticalPath = createRoundedPath({ x1: 0, y1: 0, x2: 80, y2: 120 });
+        const horizontalPath = createRoundedPath({ x1: 0, y1: 0, x2: 120, y2: 80 }, { orientation: "horizontal" });
+        expect(verticalPath).not.toContain(",");
+        expect(horizontalPath).not.toContain(",");
     });
 });

package/dist/components/sidebar/Sidebar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import { cn } from '../../utils/cn';
   import { TooltipProvider } from '../tooltip';
@@ -8,11 +7,15 @@
   interface Props {
     children?: Snippet;
     class?: string;
+    contentClass?: string;
     [key: string]: unknown;
   }
 
-  let { children, class: className, ...rest }: Props = $props();
+  let { children, class: className, contentClass, ...rest }: Props = $props();
   const sidebar = getSidebarContext('Sidebar');
+  let mobileNode: HTMLElement | null = $state(null);
+  let mobileTrigger: HTMLElement | null = null;
+  let shouldRestoreFocus = false;
   const isAlwaysExpanded = $derived(sidebar.collapsible === 'none');
   const isVisible = $derived(sidebar.open || sidebar.isPeeking || isAlwaysExpanded);
   const railWidth = $derived(isAlwaysExpanded || sidebar.open ? 'var(--sidebar-width)' : sidebar.collapsible === 'icon' ? 'var(--sidebar-width-icon)' : '0px');
@@ -28,12 +31,45 @@
       !sidebar.open && sidebar.side === 'left' && 'left-0',
       !sidebar.open && sidebar.side === 'right' && 'right-0',
       sidebar.open && 'relative',
-      sidebar.isMobile && 'fixed inset-y-0 max-w-[85vw] shadow-xl md:static md:max-w-none md:shadow-none',
-      sidebar.isMobile && !sidebar.open && 'hidden md:flex',
-      sidebar.isMobile && sidebar.side === 'left' && 'left-0',
-      sidebar.isMobile && sidebar.side === 'right' && 'right-0'
+      contentClass
     )
   );
+
+  function closeMobile(restoreFocus: boolean) {
+    shouldRestoreFocus = restoreFocus;
+    sidebar.setOpenMobile(false);
+  }
+
+  function handleMobileKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') closeMobile(true);
+  }
+
+  function handleMobileFocusout(event: FocusEvent) {
+    if (mobileNode && !mobileNode.contains(event.relatedTarget as Node | null)) {
+      closeMobile(false);
+    }
+  }
+
+  $effect(() => {
+    if (!sidebar.isMobile || !sidebar.openMobile) return;
+
+    mobileTrigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    shouldRestoreFocus = false;
+
+    requestAnimationFrame(() => {
+      const firstFocusable = mobileNode?.querySelector<HTMLElement>(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      (firstFocusable ?? mobileNode)?.focus();
+    });
+  });
+
+  $effect(() => {
+    if (sidebar.openMobile || !shouldRestoreFocus || !mobileTrigger) return;
+    mobileTrigger.focus();
+    mobileTrigger = null;
+    shouldRestoreFocus = false;
+  });
 </script>
 
 {#snippet sidebarContent()}
@@ -43,39 +79,48 @@
 {/snippet}
 
 {#if sidebar.isMobile}
-  <DialogPrimitive.Root open={sidebar.openMobile} onOpenChange={(open) => sidebar.setOpenMobile(open)}>
-    <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay
-        data-sidebar-backdrop
-        data-kumo-component="Sidebar"
-        data-kumo-part="mobile-backdrop"
-        class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0"
-      />
-      <DialogPrimitive.Content
-        data-sidebar-popup
-        aria-label="Sidebar"
-        class={cn(
-          'fixed inset-y-0 z-50 flex w-(--sidebar-width) flex-col bg-kumo-base p-0 duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0',
-          sidebar.side === 'left' && 'left-0 data-ending-style:-translate-x-full data-starting-style:-translate-x-full',
-          sidebar.side === 'right' && 'right-0 data-ending-style:translate-x-full data-starting-style:translate-x-full'
-        )}
-        style="transition-property: transform, opacity; transition-timing-function: var(--default-transition-timing-function);"
-      >
-        <div
-          data-state="expanded"
-          data-side={sidebar.side}
-          data-variant={sidebar.variant}
-          data-collapsible={sidebar.collapsible}
-          data-mobile="true"
-          data-sidebar="sidebar"
-          class={cn('group/sidebar flex h-full w-full flex-col bg-kumo-base text-kumo-default', className)}
-          {...rest}
-        >
-          {@render sidebarContent()}
-        </div>
-      </DialogPrimitive.Content>
-    </DialogPrimitive.Portal>
-  </DialogPrimitive.Root>
+  <div
+    data-sidebar-backdrop
+    data-kumo-component="Sidebar"
+    data-kumo-part="mobile-backdrop"
+    class={cn(
+      sidebar.contained ? 'absolute inset-0 z-40 bg-kumo-recessed' : 'fixed inset-0 z-40 bg-kumo-recessed',
+      'transition-opacity duration-(--sidebar-animation-duration) ease-(--sidebar-easing) motion-reduce:transition-none',
+      sidebar.openMobile ? 'opacity-80' : 'pointer-events-none opacity-0'
+    )}
+    onclick={() => closeMobile(true)}
+    aria-hidden="true"
+  ></div>
+
+  <nav
+    bind:this={mobileNode}
+    tabindex="-1"
+    aria-label="Navigation"
+    aria-hidden={sidebar.openMobile ? undefined : 'true'}
+    inert={sidebar.openMobile ? undefined : true}
+    data-state={sidebar.openMobile ? 'expanded' : 'collapsed'}
+    data-side={sidebar.side}
+    data-variant={sidebar.variant}
+    data-collapsible={sidebar.collapsible}
+    data-mobile="true"
+    data-sidebar="sidebar"
+    class={cn(
+      sidebar.contained
+        ? 'group/sidebar absolute inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden'
+        : 'group/sidebar fixed inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden',
+      'border-r border-kumo-line bg-(--sidebar-bg) text-kumo-default transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing) motion-reduce:transition-none',
+      sidebar.side === 'left' && 'left-0',
+      sidebar.side === 'right' && 'right-0',
+      sidebar.side === 'left' && (sidebar.openMobile ? 'translate-x-0' : '-translate-x-full'),
+      sidebar.side === 'right' && (sidebar.openMobile ? 'translate-x-0' : 'translate-x-full'),
+      className
+    )}
+    onkeydown={handleMobileKeydown}
+    onfocusout={handleMobileFocusout}
+    {...rest}
+  >
+    {@render sidebarContent()}
+  </nav>
 {:else}
   <aside
     data-state={sidebar.state}

package/dist/components/sidebar/Sidebar.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     children?: Snippet;
     class?: string;
+    contentClass?: string;
     [key: string]: unknown;
 }
 declare const Sidebar: import("svelte").Component<Props, {}, "">;

package/dist/components/sidebar/SidebarCollapsible.svelte

@@ -2,8 +2,24 @@
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
   import { cn } from '../../utils/cn';
-  interface Props { children?: Snippet; class?: string; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; [key: string]: unknown; }
-  let { children, class: className, defaultOpen = false, open = $bindable(defaultOpen), onOpenChange, ...rest }: Props = $props();
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    autoScrollOnOpen?: boolean;
+    [key: string]: unknown;
+  }
+  let {
+    children,
+    class: className,
+    defaultOpen = false,
+    open = $bindable(defaultOpen),
+    onOpenChange,
+    autoScrollOnOpen = false,
+    ...rest
+  }: Props = $props();
   const contentId = `kumo-sidebar-collapsible-${Math.random().toString(36).slice(2)}`;
   const context = {
     get open() {
@@ -12,6 +28,9 @@
     get contentId() {
       return contentId;
     },
+    get autoScrollOnOpen() {
+      return autoScrollOnOpen;
+    },
     toggle() {
       open = !open;
       onOpenChange?.(open);

package/dist/components/sidebar/SidebarCollapsible.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    autoScrollOnOpen?: boolean;
     [key: string]: unknown;
 }
 declare const SidebarCollapsible: import("svelte").Component<Props, {}, "open">;

package/dist/components/sidebar/SidebarCollapsibleContent.svelte

@@ -2,22 +2,41 @@
   import type { Snippet } from 'svelte';
   import { getContext } from 'svelte';
   import { cn } from '../../utils/cn';
-  interface CollapsibleContext { get open(): boolean; get contentId(): string; toggle(): void; }
+  import { getSidebarContext } from './context';
+  interface CollapsibleContext { get open(): boolean; get contentId(): string; get autoScrollOnOpen(): boolean; toggle(): void; }
   interface Props { children?: Snippet; class?: string; [key: string]: unknown; }
   let { children, class: className, ...rest }: Props = $props();
   const collapsible = getContext<CollapsibleContext>('kumo-sidebar-collapsible');
+  const sidebar = getSidebarContext('Sidebar.CollapsibleContent');
+  let contentEl: HTMLDivElement | null = $state(null);
+  const isOpen = $derived(Boolean(collapsible?.open && sidebar.state !== 'collapsed'));
+
+  $effect(() => {
+    if (!isOpen || !collapsible?.autoScrollOnOpen || !contentEl) return;
+
+    const timeout = window.setTimeout(() => {
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      contentEl?.scrollIntoView({
+        block: 'nearest',
+        behavior: prefersReducedMotion ? 'auto' : 'smooth'
+      });
+    }, sidebar.animationDuration);
+
+    return () => window.clearTimeout(timeout);
+  });
 </script>
 
 <div
+  bind:this={contentEl}
   id={collapsible?.contentId}
   data-sidebar="collapsible-content"
-  data-open={collapsible?.open ? '' : undefined}
+  data-open={isOpen ? '' : undefined}
   role="region"
-  aria-hidden={collapsible?.open ? undefined : 'true'}
-  inert={collapsible?.open ? undefined : true}
+  aria-hidden={isOpen ? undefined : 'true'}
+  inert={isOpen ? undefined : true}
   class={cn(
     'grid overflow-hidden transition-[grid-template-rows,opacity] duration-(--sidebar-animation-duration) motion-reduce:transition-none',
-    collapsible?.open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+    isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
     className
   )}
   {...rest}

package/dist/components/sidebar/SidebarCollapsibleTrigger.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte';
   import { getContext } from 'svelte';
   import { cn } from '../../utils/cn';
-  interface CollapsibleContext { get open(): boolean; get contentId(): string; toggle(): void; }
+  interface CollapsibleContext { get open(): boolean; get contentId(): string; get autoScrollOnOpen(): boolean; toggle(): void; }
   interface Props { children?: Snippet; class?: string; [key: string]: unknown; }
   let { children, class: className, ...rest }: Props = $props();
   const collapsible = getContext<CollapsibleContext>('kumo-sidebar-collapsible');

package/dist/components/sidebar/SidebarContent.svelte

@@ -8,13 +8,14 @@
 <div
   data-sidebar="content"
   class={cn(
-    'relative min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-[11px] py-[13px] transition-[padding] duration-(--sidebar-animation-duration) group-not-data-[state=collapsed]/sidebar:px-3.5 group-data-[state=collapsed]/sidebar:overflow-x-hidden!',
+    'relative min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-[11px] py-3 transition-[padding] duration-(--sidebar-animation-duration) group-not-data-[state=collapsed]/sidebar:px-3.5 group-data-[state=collapsed]/sidebar:overflow-x-hidden!',
+    'group-data-[mobile=true]/sidebar:px-3.5',
     className
   )}
   role="presentation"
   {...rest}
 >
-  <div class="flex min-w-0 flex-col gap-2 group-data-[state=collapsed]/sidebar:min-w-0!">
+  <div class="flex min-w-0! flex-col">
     {@render children?.()}
   </div>
 </div>

package/dist/components/sidebar/SidebarGroupLabel.svelte

@@ -9,12 +9,13 @@
   data-sidebar="group-label"
   class={cn(
     'grid grid-rows-[0fr] overflow-hidden border-b border-kumo-line my-3 transition-[grid-template-rows,margin,border-color] duration-(--sidebar-animation-duration) ease-(--sidebar-easing) [[data-sidebar=group]:first-child_&]:my-0 [[data-sidebar=group]:first-child_&]:border-transparent group-not-data-[state=collapsed]/sidebar:grid-rows-[1fr] group-not-data-[state=collapsed]/sidebar:my-0 group-not-data-[state=collapsed]/sidebar:border-transparent',
+    'group-data-[mobile=true]/sidebar:my-0 group-data-[mobile=true]/sidebar:grid-rows-[1fr] group-data-[mobile=true]/sidebar:border-transparent group-data-[mobile=true]/sidebar:transition-none',
     className
   )}
   {...rest}
 >
-  <div class="min-h-0">
-    <div class="truncate px-3 mt-4 mb-2 text-sm font-medium text-kumo-subtle [[data-sidebar=group]:first-child_&]:mt-2">
+  <div class="min-h-0 min-w-0">
+    <div class="truncate px-3 mt-6 mb-2 text-sm font-medium text-kumo-subtle [[data-sidebar=group]:first-child_&]:mt-2">
       {@render children?.()}
     </div>
   </div>

package/dist/components/sidebar/SidebarHeader.svelte

@@ -5,6 +5,6 @@
   let { children, class: className, ...rest }: Props = $props();
 </script>
 
-<div data-sidebar="header" class={cn('flex h-[58px] items-center gap-1 overflow-hidden border-b border-kumo-line px-3.5', className)} {...rest}>
+<div data-sidebar="header" class={cn('flex h-[58px] shrink-0 items-center gap-1 overflow-hidden border-b border-kumo-line px-3', className)} {...rest}>
   {@render children?.()}
 </div>

package/dist/components/sidebar/SidebarMenuButton.svelte

@@ -11,11 +11,12 @@
     active?: boolean;
     size?: 'base' | 'sm';
     href?: string;
+    target?: string;
     tooltip?: string;
     [key: string]: unknown;
   }
 
-  let { children, class: className, icon: Icon, active = false, size = 'base', href, tooltip, ...rest }: Props = $props();
+  let { children, class: className, icon: Icon, active = false, size = 'base', href, target, tooltip, ...rest }: Props = $props();
   const menuItem = getSidebarMenuItemContext();
   let sidebar = $state<ReturnType<typeof getSidebarContext> | undefined>();
 
@@ -27,14 +28,14 @@
 
   const classes = $derived(
     cn(
-      'group/menu-button relative flex w-full min-w-0 cursor-pointer items-center gap-2.5 rounded-lg text-kumo-default outline-none transition-[color,background-color,box-shadow,outline] duration-(--sidebar-animation-duration)',
+      'group/menu-button relative flex w-full min-w-0 cursor-pointer items-center gap-2.5 rounded-lg text-kumo-default outline-none transition-[color,box-shadow,outline] duration-(--sidebar-animation-duration)',
       'before:absolute before:inset-x-0 before:-inset-y-px',
       size === 'base' && 'min-h-8.5 px-3 py-0 text-sm font-medium',
       size === 'sm' && 'min-h-7 px-2 py-0 text-sm',
-      !active && 'hover:bg-kumo-tint',
-      active && 'bg-kumo-tint',
-      'has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-kumo-tint',
-      'focus:outline-none focus-visible:bg-kumo-tint focus-visible:text-kumo-strong',
+      !active && 'hover:bg-(--sidebar-active-bg)',
+      active && 'bg-(--sidebar-active-bg)',
+      'has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-(--sidebar-active-bg)',
+      'focus:outline-none focus-visible:bg-(--sidebar-active-bg) focus-visible:text-kumo-strong',
       className
     )
   );
@@ -46,6 +47,7 @@
     <a
       class={cn(classes, 'no-underline!')}
       {href}
+      {target}
       data-active={active || undefined}
       data-sidebar="menu-button"
       data-kumo-component="Sidebar"
@@ -55,7 +57,7 @@
       {...rest}
     >
       <span class="flex min-w-0 flex-1 items-center gap-3 translate-x-[-3px] transition-transform duration-(--sidebar-animation-duration) group-not-data-[state=collapsed]/sidebar:translate-x-0">
-        {#if Icon}<Icon class={cn('shrink-0 opacity-50', size === 'base' ? 'size-4' : 'size-3.5')} />{/if}
+        {#if Icon}<Icon class={cn('shrink-0 opacity-40', size === 'base' ? 'size-4' : 'size-3.5')} />{/if}
         <span class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-left">
           {@render children?.()}
         </span>
@@ -74,7 +76,7 @@
       {...rest}
     >
       <span class="flex min-w-0 flex-1 items-center gap-3 translate-x-[-3px] transition-transform duration-(--sidebar-animation-duration) group-not-data-[state=collapsed]/sidebar:translate-x-0">
-        {#if Icon}<Icon class={cn('shrink-0 opacity-50', size === 'base' ? 'size-4' : 'size-3.5')} />{/if}
+        {#if Icon}<Icon class={cn('shrink-0 opacity-40', size === 'base' ? 'size-4' : 'size-3.5')} />{/if}
         <span class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-left">
           {@render children?.()}
         </span>

package/dist/components/sidebar/SidebarMenuButton.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     active?: boolean;
     size?: 'base' | 'sm';
     href?: string;
+    target?: string;
     tooltip?: string;
     [key: string]: unknown;
 }