@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/navigation/sidebar/sidebar-inset.svelte

@@ -0,0 +1,32 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarInset`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarInsetProps = WithElementRef<HTMLAttributes<HTMLElement>, HTMLElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SidebarInsetProps = $props()
+</script>
+
+<main
+  bind:this={ref}
+  data-slot="sidebar-inset"
+  data-sidebar="inset"
+  class={cn(
+    'bg-muted relative flex w-full flex-1 flex-col',
+    'group-data-[mobile=false]/sidebar-wrapper:peer-data-[variant=inset]:m-2 group-data-[mobile=false]/sidebar-wrapper:peer-data-[variant=inset]:ml-0 group-data-[mobile=false]/sidebar-wrapper:peer-data-[variant=inset]:rounded-xl group-data-[mobile=false]/sidebar-wrapper:peer-data-[variant=inset]:shadow-sm group-data-[mobile=false]/sidebar-wrapper:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</main>

package/dist/components/navigation/sidebar/sidebar-inset.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarInsetProps = WithElementRef<HTMLAttributes<HTMLElement>, HTMLElement>;
+declare const SidebarInset: import("svelte").Component<SidebarInsetProps, {}, "ref">;
+type SidebarInset = ReturnType<typeof SidebarInset>;
+export default SidebarInset;

package/dist/components/navigation/sidebar/sidebar-menu-action.svelte

@@ -0,0 +1,58 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenuAction`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: React's `asChild` becomes a `child` snippet that receives the
+    part's props, as in BreadcrumbLink.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarMenuActionProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    /** Renders your own element with these props instead of the default one. */
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+    /** Shows the action only while its row is hovered or focused, from `md`. */
+    showOnHover?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    child,
+    showOnHover = false,
+    class: className,
+    children,
+    ...rest
+  }: SidebarMenuActionProps = $props()
+
+  const partProps = $derived({
+    'data-slot': 'sidebar-menu-action',
+    'data-sidebar': 'menu-action',
+    class: cn(
+      'ring-sidebar-ring absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[sidetheme=primary]:text-white group-data-[sidetheme=primary]:hover:bg-white/20 group-data-[sidetheme=primary]:peer-hover/menu-button:text-white',
+      'group-data-[sidetheme=light]:text-muted-foreground group-data-[sidetheme=light]:hover:bg-black/5 group-data-[sidetheme=light]:hover:text-foreground group-data-[sidetheme=light]:peer-hover/menu-button:text-foreground group-data-[sidetheme=light]:peer-data-[active=true]/menu-button:text-white',
+      'group-data-[sidetheme=panel]:text-muted-foreground group-data-[sidetheme=panel]:hover:bg-sidebar-accent group-data-[sidetheme=panel]:hover:text-sidebar-foreground group-data-[sidetheme=panel]:peer-data-[active=true]/menu-button:text-accent-foreground',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover &&
+        'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+      className,
+    ),
+    ...rest,
+  })
+</script>
+
+{#if child}
+  {@render child({ props: partProps })}
+{:else}
+  <button bind:this={ref} type="button" {...partProps}>{@render children?.()}</button>
+{/if}

package/dist/components/navigation/sidebar/sidebar-menu-action.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarMenuActionProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    /** Renders your own element with these props instead of the default one. */
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /** Shows the action only while its row is hovered or focused, from `md`. */
+    showOnHover?: boolean;
+};
+declare const SidebarMenuAction: import("svelte").Component<SidebarMenuActionProps, {}, "ref">;
+type SidebarMenuAction = ReturnType<typeof SidebarMenuAction>;
+export default SidebarMenuAction;

package/dist/components/navigation/sidebar/sidebar-menu-badge.svelte

@@ -0,0 +1,42 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenuBadge`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarMenuBadgeProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: SidebarMenuBadgeProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-menu-badge"
+  data-sidebar="menu-badge"
+  class={cn(
+    'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+    'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-data-[sidetheme=light]:peer-data-[active=true]/menu-button:text-white',
+    'group-data-[sidetheme=panel]:peer-data-[active=true]/menu-button:text-accent-foreground',
+    'peer-data-[size=sm]/menu-button:top-1',
+    'peer-data-[size=default]/menu-button:top-1.5',
+    'peer-data-[size=lg]/menu-button:top-2.5',
+    'group-data-[collapsible=icon]:hidden',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/navigation/sidebar/sidebar-menu-badge.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarMenuBadgeProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const SidebarMenuBadge: import("svelte").Component<SidebarMenuBadgeProps, {}, "ref">;
+type SidebarMenuBadge = ReturnType<typeof SidebarMenuBadge>;
+export default SidebarMenuBadge;

package/dist/components/navigation/sidebar/sidebar-menu-button.svelte

@@ -0,0 +1,97 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenuButton`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: React's `asChild` becomes a `child` snippet that receives the
+    button's props. `tooltip` takes a string or a snippet; React's
+    TooltipContent props object becomes `tooltipContentProps`.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { TooltipContentProps } from '../../overlays/tooltip/tooltip-content.svelte'
+  import type { SidebarMenuButtonSize } from './sidebar-variants.js'
+
+  export type SidebarMenuButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+    isActive?: boolean
+    size?: SidebarMenuButtonSize
+    /** Keeps the button flat: no hover or active background, as for a logo. */
+    noHover?: boolean
+    /** Shown beside the button while the sidebar is collapsed to icons, on desktop. */
+    tooltip?: string | Snippet
+    tooltipContentProps?: Omit<TooltipContentProps, 'children'>
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Tooltip from '../../overlays/tooltip/tooltip.svelte'
+  import TooltipContent from '../../overlays/tooltip/tooltip-content.svelte'
+  import TooltipTrigger from '../../overlays/tooltip/tooltip-trigger.svelte'
+  import { useSidebar } from './context.svelte.js'
+  import { sidebarMenuButtonVariants } from './sidebar-variants.js'
+
+  let {
+    ref = $bindable(null),
+    child,
+    isActive = false,
+    size = 'default',
+    noHover = false,
+    tooltip,
+    tooltipContentProps,
+    class: className,
+    children,
+    ...rest
+  }: SidebarMenuButtonProps = $props()
+
+  const sidebar = useSidebar()
+
+  const buttonProps = $derived({
+    'data-slot': 'sidebar-menu-button',
+    'data-sidebar': 'menu-button',
+    'data-size': size,
+    'data-active': isActive,
+    class: cn(
+      sidebarMenuButtonVariants({ size }),
+      noHover &&
+        'hover:bg-transparent! active:bg-transparent! data-[active=true]:bg-transparent! data-[state=open]:bg-transparent!',
+      className,
+    ),
+    ...rest,
+  })
+</script>
+
+{#snippet button(extra: Record<string, unknown>)}
+  {@const merged = { ...buttonProps, ...extra }}
+  {#if child}
+    {@render child({ props: merged })}
+  {:else}
+    <button bind:this={ref} type="button" {...merged}>{@render children?.()}</button>
+  {/if}
+{/snippet}
+
+{#if !tooltip}
+  {@render button({})}
+{:else}
+  <Tooltip>
+    <TooltipTrigger>
+      {#snippet child({ props })}
+        {@render button(props)}
+      {/snippet}
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
+      {...tooltipContentProps}
+    >
+      {#if typeof tooltip === 'string'}
+        {tooltip}
+      {:else}
+        {@render tooltip()}
+      {/if}
+    </TooltipContent>
+  </Tooltip>
+{/if}

package/dist/components/navigation/sidebar/sidebar-menu-button.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { TooltipContentProps } from '../../overlays/tooltip/tooltip-content.svelte';
+import type { SidebarMenuButtonSize } from './sidebar-variants.js';
+export type SidebarMenuButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    isActive?: boolean;
+    size?: SidebarMenuButtonSize;
+    /** Keeps the button flat: no hover or active background, as for a logo. */
+    noHover?: boolean;
+    /** Shown beside the button while the sidebar is collapsed to icons, on desktop. */
+    tooltip?: string | Snippet;
+    tooltipContentProps?: Omit<TooltipContentProps, 'children'>;
+};
+declare const SidebarMenuButton: import("svelte").Component<SidebarMenuButtonProps, {}, "ref">;
+type SidebarMenuButton = ReturnType<typeof SidebarMenuButton>;
+export default SidebarMenuButton;

package/dist/components/navigation/sidebar/sidebar-menu-item.svelte

@@ -0,0 +1,33 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenuItem`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLLiAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarMenuItemProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: SidebarMenuItemProps = $props()
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="sidebar-menu-item"
+  data-sidebar="menu-item"
+  class={cn('group/menu-item relative', className)}
+  {...rest}
+>
+  {@render children?.()}
+</li>

package/dist/components/navigation/sidebar/sidebar-menu-item.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLLiAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarMenuItemProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>;
+declare const SidebarMenuItem: import("svelte").Component<SidebarMenuItemProps, {}, "ref">;
+type SidebarMenuItem = ReturnType<typeof SidebarMenuItem>;
+export default SidebarMenuItem;

package/dist/components/navigation/sidebar/sidebar-menu-skeleton.svelte

@@ -0,0 +1,46 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenuSkeleton`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarMenuSkeletonProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    showIcon?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Skeleton from '../../feedback/skeleton/skeleton.svelte'
+
+  let {
+    ref = $bindable(null),
+    showIcon = false,
+    class: className,
+    ...rest
+  }: SidebarMenuSkeletonProps = $props()
+
+  // A width between 50 and 90%, so a column of placeholders does not read as a grid.
+  const width = `${Math.floor(Math.random() * 40) + 50}%`
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-menu-skeleton"
+  data-sidebar="menu-skeleton"
+  class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+  {...rest}
+>
+  {#if showIcon}
+    <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+  {/if}
+  <Skeleton
+    class="h-4 max-w-(--skeleton-width) flex-1"
+    data-sidebar="menu-skeleton-text"
+    style="--skeleton-width: {width};"
+  />
+</div>

package/dist/components/navigation/sidebar/sidebar-menu-skeleton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarMenuSkeletonProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    showIcon?: boolean;
+};
+declare const SidebarMenuSkeleton: import("svelte").Component<SidebarMenuSkeletonProps, {}, "ref">;
+type SidebarMenuSkeleton = ReturnType<typeof SidebarMenuSkeleton>;
+export default SidebarMenuSkeleton;

package/dist/components/navigation/sidebar/sidebar-menu-sub-button.svelte

@@ -0,0 +1,64 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenuSubButton`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: React's `asChild` becomes a `child` snippet that receives the
+    part's props, as in BreadcrumbLink.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarMenuSubButtonProps = WithElementRef<
+    HTMLAnchorAttributes,
+    HTMLAnchorElement
+  > & {
+    /** Renders your own element with these props instead of the default one. */
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+    size?: 'sm' | 'md'
+    isActive?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    href,
+    child,
+    size = 'md',
+    isActive = false,
+    class: className,
+    children,
+    ...rest
+  }: SidebarMenuSubButtonProps = $props()
+
+  const partProps = $derived({
+    'data-slot': 'sidebar-menu-sub-button',
+    'data-sidebar': 'menu-sub-button',
+    'data-size': size,
+    'data-active': isActive,
+    class: cn(
+      'ring-sidebar-ring flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-r-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[sidetheme=primary]:text-white/90 group-data-[sidetheme=primary]:hover:bg-white/15 group-data-[sidetheme=primary]:hover:text-white group-data-[sidetheme=primary]:active:bg-white/20',
+      'group-data-[sidetheme=primary]:data-[active=true]:bg-white group-data-[sidetheme=primary]:data-[active=true]:text-black group-data-[sidetheme=primary]:data-[active=true]:font-medium group-data-[sidetheme=primary]:data-[active=true]:shadow-sm',
+      'group-data-[sidetheme=light]:text-muted-foreground group-data-[sidetheme=light]:hover:bg-black/5 group-data-[sidetheme=light]:hover:text-foreground',
+      'group-data-[sidetheme=light]:data-[active=true]:bg-primary-600 group-data-[sidetheme=light]:data-[active=true]:text-white group-data-[sidetheme=light]:data-[active=true]:font-medium',
+      'group-data-[sidetheme=panel]:rounded-xl group-data-[sidetheme=panel]:text-muted-foreground group-data-[sidetheme=panel]:hover:bg-sidebar-accent group-data-[sidetheme=panel]:hover:text-sidebar-foreground',
+      'group-data-[sidetheme=panel]:data-[active=true]:bg-sidebar-primary group-data-[sidetheme=panel]:data-[active=true]:text-sidebar-primary-foreground group-data-[sidetheme=panel]:data-[active=true]:font-medium',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      className,
+    ),
+    ...rest,
+  })
+</script>
+
+{#if child}
+  {@render child({ props: { ...partProps, href } })}
+{:else}
+  <a bind:this={ref} {href} {...partProps}>{@render children?.()}</a>
+{/if}

package/dist/components/navigation/sidebar/sidebar-menu-sub-button.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarMenuSubButtonProps = WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
+    /** Renders your own element with these props instead of the default one. */
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+};
+declare const SidebarMenuSubButton: import("svelte").Component<SidebarMenuSubButtonProps, {}, "ref">;
+type SidebarMenuSubButton = ReturnType<typeof SidebarMenuSubButton>;
+export default SidebarMenuSubButton;

package/dist/components/navigation/sidebar/sidebar-menu-sub-item.svelte

@@ -0,0 +1,33 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenuSubItem`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLLiAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarMenuSubItemProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: SidebarMenuSubItemProps = $props()
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="sidebar-menu-sub-item"
+  data-sidebar="menu-sub-item"
+  class={cn('group/menu-sub-item relative', className)}
+  {...rest}
+>
+  {@render children?.()}
+</li>

package/dist/components/navigation/sidebar/sidebar-menu-sub-item.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLLiAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarMenuSubItemProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>;
+declare const SidebarMenuSubItem: import("svelte").Component<SidebarMenuSubItemProps, {}, "ref">;
+type SidebarMenuSubItem = ReturnType<typeof SidebarMenuSubItem>;
+export default SidebarMenuSubItem;

package/dist/components/navigation/sidebar/sidebar-menu-sub.svelte

@@ -0,0 +1,37 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenuSub`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarMenuSubProps = WithElementRef<
+    HTMLAttributes<HTMLUListElement>,
+    HTMLUListElement
+  >
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SidebarMenuSubProps = $props()
+</script>
+
+<ul
+  bind:this={ref}
+  data-slot="sidebar-menu-sub"
+  data-sidebar="menu-sub"
+  class={cn(
+    'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l-2 border-dotted py-0.5 pr-2.5',
+    'group-data-[sidetheme=primary]:border-white/30 group-data-[sidetheme=light]:border-border',
+    'group-data-[sidetheme=panel]:border-l group-data-[sidetheme=panel]:border-solid group-data-[sidetheme=panel]:border-sidebar-border',
+    'group-data-[collapsible=icon]:hidden',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</ul>

package/dist/components/navigation/sidebar/sidebar-menu-sub.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarMenuSubProps = WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+declare const SidebarMenuSub: import("svelte").Component<SidebarMenuSubProps, {}, "ref">;
+type SidebarMenuSub = ReturnType<typeof SidebarMenuSub>;
+export default SidebarMenuSub;

package/dist/components/navigation/sidebar/sidebar-menu.svelte

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarMenu`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarMenuProps = WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SidebarMenuProps = $props()
+</script>
+
+<ul
+  bind:this={ref}
+  data-slot="sidebar-menu"
+  data-sidebar="menu"
+  class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+  {...rest}
+>
+  {@render children?.()}
+</ul>

package/dist/components/navigation/sidebar/sidebar-menu.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarMenuProps = WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+declare const SidebarMenu: import("svelte").Component<SidebarMenuProps, {}, "ref">;
+type SidebarMenu = ReturnType<typeof SidebarMenu>;
+export default SidebarMenu;

package/dist/components/navigation/sidebar/sidebar-provider.svelte

@@ -0,0 +1,74 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarProvider`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: `open` is bindable and `onOpenChange` is kept. React set
+    `--sidebar-width: var(--sidebar-width)` inline, which refers to itself and
+    is invalid CSS; this sets shadcn's 16rem, which `style` can override.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * Owns the open and collapsed state and the CSS variables the whole family
+   * reads. It always wraps `Sidebar` and its page, never `Sidebar` alone.
+   */
+  export type SidebarProviderProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /**
+     * Viewport width, in pixels, below which the sidebar becomes a sheet.
+     * Raise it when the persistent rail costs the content more room than it is
+     * worth.
+     */
+    mobileBreakpoint?: number
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import TooltipProvider from '../../overlays/tooltip/tooltip-provider.svelte'
+  import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, setSidebar } from './context.svelte.js'
+
+  let {
+    ref = $bindable(null),
+    open = $bindable(true),
+    onOpenChange,
+    mobileBreakpoint,
+    class: className,
+    style,
+    children,
+    ...rest
+  }: SidebarProviderProps = $props()
+
+  const sidebar = setSidebar({
+    open: () => open,
+    setOpen: (value) => {
+      open = value
+      onOpenChange?.(value)
+    },
+    // svelte-ignore state_referenced_locally
+    mobileBreakpoint,
+  })
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<TooltipProvider>
+  <!-- The breakpoint, published for CSS, so a raised `mobileBreakpoint` moves both halves at once. -->
+  <div
+    bind:this={ref}
+    data-slot="sidebar-wrapper"
+    data-mobile={sidebar.isMobile}
+    style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style ??
+      ''}"
+    class={cn(
+      'group/sidebar-wrapper bg-muted has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+      className,
+    )}
+    {...rest}
+  >
+    {@render children?.()}
+  </div>
+</TooltipProvider>