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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jovert Palonpon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LICENSES/shadcn-svelte.txt

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2023 Hunter Johnston <https://github.com/huntabyte>
+Copyright (c) 2023 CokaKoala <https://github.com/adriangonz97>
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LICENSES/shadcn-ui.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LICENSES/tailwindcss.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,128 @@
-# Temporary Holding Version
+# mise-design-system
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Svelte 5 components and a configurable Tailwind v4 theme for operations
+dashboards: locations, shifts, orders, stock.
+
+> **Status:** 1.0. Published to npm as `@jovertical/mise-design-system`;
+> releases and the changelog are cut by release-please.
+
+mise ports the API of a React design system to Svelte 5 and
+[bits-ui](https://bits-ui.com). Its Svelte mechanics follow
+[shadcn-svelte](https://shadcn-svelte.com). It ships a neutral default theme
+(zinc with an indigo brand), which a consuming app configures on top.
+
+## Install
+
+```sh
+pnpm add @jovertical/mise-design-system
+pnpm add -D tailwindcss tw-animate-css
+```
+
+`svelte`, `tailwindcss` and `tw-animate-css` are peer dependencies. Your own
+stylesheet imports all three, so they resolve from your install.
+
+## Set up
+
+In your app's main stylesheet:
+
+```css
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import '@jovertical/mise-design-system/theme.css';
+@source '../node_modules/@jovertical/mise-design-system/dist';
+```
+
+The `@source` line is required. Tailwind v4 skips `node_modules` when it
+looks for classes, so without it every component renders unstyled. Adjust the
+relative path to where your stylesheet lives.
+
+Dark mode is the `.dark` class on an ancestor, usually `<html>`.
+
+```svelte
+<script lang="ts">
+  import { Button } from '@jovertical/mise-design-system'
+</script>
+
+<Button>Open orders</Button>
+<Button variant="outline" href="/shifts">Shifts</Button>
+```
+
+## Theming
+
+Three levels, each optional.
+
+**1. Use the default.** The imports above are all it takes.
+
+**2. Override tokens in CSS.** The semantic tokens are a documented contract:
+`--background`, `--foreground`, `--primary`, `--muted`, `--muted-foreground`,
+`--border`, `--success`, `--warning`, `--destructive`, `--radius`,
+`--font-sans`, `--font-heading`, `--font-mono`, and the rest listed in
+`SEMANTIC_TOKENS`. Override any of them after the import:
+
+```css
+:root { --primary: oklch(0.6 0.15 160); --radius: 0.5rem; }
+.dark { --primary: oklch(0.75 0.13 160); }
+```
+
+The `-soft` tints are `color-mix()` of their ink, so they follow automatically.
+
+**3. Generate a theme from a config.** For a different base, brand ramp or
+status mapping:
+
+```js
+// mise.theme.js
+import { defineTheme } from '@jovertical/mise-design-system/tokens'
+
+export default defineTheme({
+  base: 'stone',              // zinc | slate | gray | neutral | stone
+  primary: 'teal',            // a Tailwind hue name, or a custom 50–950 ramp
+  status: { warning: 'orange' },
+  radius: '0.5rem',
+  fonts: { sans: "'Inter', system-ui, sans-serif" },
+  light: { '--sidebar': 'oklch(0.98 0 0)' },
+  dark: { '--sidebar': 'oklch(0.2 0 0)' },
+})
+```
+
+```sh
+npx mise-theme mise.theme.js -o src/mise-theme.css
+```
+
+Import `src/mise-theme.css` in place of `theme.css`. `emitThemeCss(config)`
+is exported from `/tokens` too, if you would rather call it in your own build
+script.
+
+## AI agents
+
+mise ships an agent skill, `skills/mise/`, that teaches a coding agent in your
+app which mise component does which job, every component's props and
+defaults, setup per stack, theming, and worked recipes. Install it with the
+[`skills` CLI](https://github.com/vercel-labs/skills):
+
+```sh
+npx skills add jovertical/mise-design-system --skill mise
+```
+
+The same skill is in the package at
+`node_modules/@jovertical/mise-design-system/skills/mise/`, matching the
+installed version. `npx skills experimental_sync` links it from there, so it
+updates with mise.
+
+The skill reads the app's setup with `npx mise-theme info --json`: the
+installed version, the stack, the theme config and the stylesheet that imports
+mise.
+
+## Develop
+
+```sh
+pnpm install
+pnpm storybook        # http://localhost:6006
+pnpm test             # svelte-check, lint, unit tests
+pnpm build            # dist/ + dist/theme.css, then publint
+```
+
+## Licence
+
+MIT. The components were ported from an earlier React design system by the
+same author. Tailwind CSS's palette, shadcn/ui and shadcn-svelte are MIT too;
+their notices are in `LICENSES/`.

package/bin/mise-theme.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import { readFile } from 'node:fs/promises'
+
+import { runThemeCli } from '../dist/tokens/cli.js'
+
+const { version } = JSON.parse(await readFile(new URL('../package.json', import.meta.url), 'utf8'))
+const { code, message } = await runThemeCli(process.argv.slice(2), process.cwd(), version)
+
+if (code === 0) console.log(message)
+else console.error(message)
+
+process.exit(code)

package/dist/components/actions/button/button-variants.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Origin: the React package 2.23.0 `button-variants.ts`, itself shadcn/ui new-york `button`
+ * Diverged: none. Copied verbatim; only the import path moved.
+ *
+ * `variant` (solid, soft, outline, ghost, link) × `tone` (the shared `Tone`),
+ * sizes `sm | md | lg`, and `iconOnly` for the square. Hover is `--muted`,
+ * never `--accent`.
+ */
+import { type VariantProps } from 'class-variance-authority';
+import { type Size, type Tone } from '../../../utils/tone.js';
+export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link';
+/**
+ * The tone a variant takes when none is given.
+ *
+ * A solid button is the page's primary action, so it defaults to the brand; a
+ * link is navigation, and navigation is brand-coloured too. Everything else is
+ * secondary by construction and defaults to neutral — an outline Cancel beside
+ * a solid Save should not also be blue.
+ */
+export declare function defaultButtonTone(variant: ButtonVariant): Tone;
+declare const buttonClasses: (props?: ({
+    variant?: "solid" | "soft" | "outline" | "ghost" | "link" | null | undefined;
+    tone?: "neutral" | "primary" | "info" | "success" | "warning" | "critical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonSize = Size;
+/**
+ * The class string for a button, for an element that has to look like one
+ * without being `Button` — a calendar's nav arrows, a link styled as an action.
+ *
+ * A function rather than the bare cva so the tone default follows the variant
+ * here too. cva's `defaultVariants` is one fixed tone, and a caller asking for
+ * `{ variant: 'ghost' }` would have got brand-blue ink.
+ */
+export declare function buttonVariants({ variant, tone, size, iconOnly, }?: VariantProps<typeof buttonClasses>): string;
+export {};

package/dist/components/actions/button/button-variants.js

@@ -0,0 +1,99 @@
+/**
+ * Origin: the React package 2.23.0 `button-variants.ts`, itself shadcn/ui new-york `button`
+ * Diverged: none. Copied verbatim; only the import path moved.
+ *
+ * `variant` (solid, soft, outline, ghost, link) × `tone` (the shared `Tone`),
+ * sizes `sm | md | lg`, and `iconOnly` for the square. Hover is `--muted`,
+ * never `--accent`.
+ */
+import { cva } from 'class-variance-authority';
+import { TONE_HOVER_CLASS, TONE_OUTLINE_CLASS, TONE_SOFT_CLASS, TONE_SOLID_CLASS, TONE_TEXT_CLASS, TONES, } from '../../../utils/tone.js';
+const TREATMENT = {
+    solid: (tone) => `${TONE_SOLID_CLASS[tone]} hover:opacity-85`,
+    soft: (tone) => `${TONE_SOFT_CLASS[tone]} hover:opacity-80 data-[state=open]:opacity-80`,
+    outline: (tone) => `bg-background shadow-xs dark:bg-input/30 ${TONE_OUTLINE_CLASS[tone]} ${TONE_HOVER_CLASS[tone]}`,
+    ghost: (tone) => `${TONE_TEXT_CLASS[tone]} ${TONE_HOVER_CLASS[tone]}`,
+    link: (tone) => `${TONE_TEXT_CLASS[tone]} underline-offset-4 hover:underline`,
+};
+const VARIANTS = ['solid', 'soft', 'outline', 'ghost', 'link'];
+/**
+ * The tone a variant takes when none is given.
+ *
+ * A solid button is the page's primary action, so it defaults to the brand; a
+ * link is navigation, and navigation is brand-coloured too. Everything else is
+ * secondary by construction and defaults to neutral — an outline Cancel beside
+ * a solid Save should not also be blue.
+ */
+export function defaultButtonTone(variant) {
+    if (variant === 'solid' || variant === 'link')
+        return 'primary';
+    return 'neutral';
+}
+const buttonClasses = cva(
+// Radius, transparent border and the press nudge are lifted from the
+// reference's shipped button CSS. The radius is a fixed 16px rather than
+// `rounded-full`, so it reads as a pill at the default height and keeps a
+// consistent corner on the taller sizes.
+"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl border border-transparent bg-clip-padding text-sm font-medium transition-all select-none active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: { solid: '', soft: '', outline: '', ghost: '', link: '' },
+        tone: {
+            neutral: '',
+            primary: '',
+            info: '',
+            success: '',
+            warning: '',
+            critical: '',
+        },
+        size: {
+            sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
+            md: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            lg: 'h-10 px-6 has-[>svg]:px-4',
+        },
+        /**
+         * A square button holding one glyph, drawn as a circle.
+         *
+         * A flag rather than three more sizes. Before 2.0 the size list was
+         * `default | sm | lg | icon | icon-sm | icon-lg`, which made "how big"
+         * and "what shape" one choice, and a caller wanting a small icon button
+         * had to know it was spelt `icon-sm` and not `sm`.
+         *
+         * Round because the reference draws it round, and because 14 call sites
+         * across the portals had already overridden a row's ⋯ trigger to
+         * `rounded-full` by hand.
+         */
+        iconOnly: {
+            true: 'rounded-full px-0 has-[>svg]:px-0',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        ...VARIANTS.flatMap((variant) => TONES.map((tone) => ({ variant, tone, class: TREATMENT[variant](tone) }))),
+        { iconOnly: true, size: 'sm', class: 'size-8' },
+        { iconOnly: true, size: 'md', class: 'size-9' },
+        { iconOnly: true, size: 'lg', class: 'size-10' },
+    ],
+    defaultVariants: {
+        variant: 'solid',
+        tone: 'primary',
+        size: 'md',
+        iconOnly: false,
+    },
+});
+/**
+ * The class string for a button, for an element that has to look like one
+ * without being `Button` — a calendar's nav arrows, a link styled as an action.
+ *
+ * A function rather than the bare cva so the tone default follows the variant
+ * here too. cva's `defaultVariants` is one fixed tone, and a caller asking for
+ * `{ variant: 'ghost' }` would have got brand-blue ink.
+ */
+export function buttonVariants({ variant = 'solid', tone, size, iconOnly, } = {}) {
+    const resolvedVariant = variant ?? 'solid';
+    return buttonClasses({
+        variant: resolvedVariant,
+        tone: tone ?? defaultButtonTone(resolvedVariant),
+        size,
+        iconOnly,
+    });
+}

package/dist/components/actions/button/button.svelte

@@ -0,0 +1,84 @@
+<!--
+  Origin: the React package 2.23.0 `button.tsx`, itself shadcn/ui new-york `button`
+  Svelte: shadcn-svelte `button`
+  Diverged: `asChild` dropped for `href`, which renders an <a>. A disabled link
+    drops its href, sets aria-disabled and leaves the tab order, as
+    shadcn-svelte's button does; components.css draws it like :disabled. No
+    `type` default is added; the React button has none.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+
+  import type { Tone } from '../../../utils/tone.js'
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { ButtonSize, ButtonVariant } from './button-variants.js'
+
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant
+      /** Defaults to `primary` for `solid` and `link`, `neutral` for the rest. */
+      tone?: Tone
+      size?: ButtonSize
+      /** One glyph and no label: square, round, and it needs an `aria-label`. */
+      iconOnly?: boolean
+      children?: Snippet
+    }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { buttonVariants, defaultButtonTone } from './button-variants.js'
+
+  let {
+    variant = 'solid',
+    tone,
+    size = 'md',
+    iconOnly = false,
+    href,
+    disabled,
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: ButtonProps = $props()
+
+  const resolvedTone = $derived(tone ?? defaultButtonTone(variant))
+  const classes = $derived(
+    cn(buttonVariants({ variant, tone: resolvedTone, size, iconOnly }), className),
+  )
+</script>
+
+{#if href}
+  <a
+    bind:this={ref}
+    href={disabled ? undefined : href}
+    aria-disabled={disabled || undefined}
+    role={disabled ? 'link' : undefined}
+    tabindex={disabled ? -1 : undefined}
+    class={classes}
+    data-slot="button"
+    data-variant={variant}
+    data-tone={resolvedTone}
+    data-size={size}
+    data-icon-only={iconOnly || undefined}
+    {...rest}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <!-- biome-ignore lint/a11y/useButtonType: `type` comes from the caller through rest, as in React -->
+  <button
+    bind:this={ref}
+    {disabled}
+    class={classes}
+    data-slot="button"
+    data-variant={variant}
+    data-tone={resolvedTone}
+    data-size={size}
+    data-icon-only={iconOnly || undefined}
+    {...rest}
+  >
+    {@render children?.()}
+  </button>
+{/if}

package/dist/components/actions/button/button.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { ButtonSize, ButtonVariant } from './button-variants.js';
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    /** Defaults to `primary` for `solid` and `link`, `neutral` for the rest. */
+    tone?: Tone;
+    size?: ButtonSize;
+    /** One glyph and no label: square, round, and it needs an `aria-label`. */
+    iconOnly?: boolean;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/actions/button/index.d.ts

@@ -0,0 +1,2 @@
+export { type ButtonProps, default as Button } from './button.svelte';
+export { type ButtonSize, type ButtonVariant, buttonVariants, defaultButtonTone, } from './button-variants.js';

package/dist/components/actions/button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './button.svelte';
+export { buttonVariants, defaultButtonTone, } from './button-variants.js';

package/dist/components/actions/command/command-dialog.svelte

@@ -0,0 +1,60 @@
+<!--
+  Origin: the React package 2.23.0 `command.tsx` (`CommandDialog`), itself shadcn/ui new-york `command`
+  Svelte: shadcn-svelte `command`
+  Diverged: the dialog's sizing reaches the list through `data-slot` selectors, where React reached into cmdk's attributes. The title defaults to "Command palette", sentence case.
+-->
+<script lang="ts" module>
+  import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui'
+  import type { Snippet } from 'svelte'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  /**
+   * `Command` in a `Dialog`, for a palette that takes over the screen. The
+   * title and description are for a screen reader only.
+   */
+  export type CommandDialogProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+    WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+      title?: string
+      description?: string
+      showCloseButton?: boolean
+      class?: string
+      children: Snippet
+    }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Dialog from '../../overlays/dialog/dialog.svelte'
+  import DialogContent from '../../overlays/dialog/dialog-content.svelte'
+  import DialogDescription from '../../overlays/dialog/dialog-description.svelte'
+  import DialogHeader from '../../overlays/dialog/dialog-header.svelte'
+  import DialogTitle from '../../overlays/dialog/dialog-title.svelte'
+  import Command from './command.svelte'
+
+  let {
+    open = $bindable(false),
+    value = $bindable(''),
+    title = 'Command palette',
+    description = 'Search for a command to run.',
+    showCloseButton = true,
+    class: className,
+    children,
+    ...rest
+  }: CommandDialogProps = $props()
+</script>
+
+<Dialog bind:open {...rest}>
+  <DialogContent class={cn('overflow-hidden p-0', className)} {showCloseButton}>
+    <DialogHeader class="sr-only">
+      <DialogTitle>{title}</DialogTitle>
+      <DialogDescription>{description}</DialogDescription>
+    </DialogHeader>
+    <Command
+      bind:value
+      class="**:data-[slot=command-input-wrapper]:h-12 **:data-[slot=command-input]:h-12 [&_[data-slot=command-group]]:px-2 [&_[data-slot=command-input-wrapper]_svg]:size-5 [&_[data-slot=command-item]]:px-2 [&_[data-slot=command-item]]:py-3 [&_[data-slot=command-item]_svg]:size-5"
+    >
+      {@render children()}
+    </Command>
+  </DialogContent>
+</Dialog>

package/dist/components/actions/command/command-dialog.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+/**
+ * `Command` in a `Dialog`, for a palette that takes over the screen. The
+ * title and description are for a screen reader only.
+ */
+export type CommandDialogProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const CommandDialog: import("svelte").Component<CommandDialogProps, {}, "value" | "open">;
+type CommandDialog = ReturnType<typeof CommandDialog>;
+export default CommandDialog;

package/dist/components/actions/command/command-empty.svelte

@@ -0,0 +1,24 @@
+<!--
+  Origin: the React package 2.23.0 `command.tsx` (`CommandEmpty`), itself shadcn/ui new-york `command`
+  Svelte: shadcn-svelte `command`
+  Diverged: bits-ui Command for cmdk.
+-->
+<script lang="ts" module>
+  import { Command as CommandPrimitive } from 'bits-ui'
+
+  /** Shown when nothing matches what was typed. */
+  export type CommandEmptyProps = CommandPrimitive.EmptyProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: CommandEmptyProps = $props()
+</script>
+
+<CommandPrimitive.Empty
+  bind:ref
+  data-slot="command-empty"
+  class={cn('py-6 text-center text-sm', className)}
+  {...rest}
+/>

package/dist/components/actions/command/command-empty.svelte.d.ts

@@ -0,0 +1,6 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+/** Shown when nothing matches what was typed. */
+export type CommandEmptyProps = CommandPrimitive.EmptyProps;
+declare const CommandEmpty: import("svelte").Component<CommandPrimitive.EmptyProps, {}, "ref">;
+type CommandEmpty = ReturnType<typeof CommandEmpty>;
+export default CommandEmpty;

package/dist/components/actions/command/command-group.svelte

@@ -0,0 +1,43 @@
+<!--
+  Origin: the React package 2.23.0 `command.tsx` (`CommandGroup`), itself shadcn/ui new-york `command`
+  Svelte: shadcn-svelte `command`
+  Diverged: bits-ui Command for cmdk. The heading is a `heading` prop drawn as bits-ui's `GroupHeading`, where cmdk styled a `[cmdk-group-heading]` attribute; the classes are React's.
+-->
+<script lang="ts" module>
+  import { Command as CommandPrimitive } from 'bits-ui'
+
+  /** A section of items, under a small muted heading. */
+  export type CommandGroupProps = CommandPrimitive.GroupProps & { heading?: string }
+</script>
+
+<script lang="ts">
+  import { useId } from 'bits-ui'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    heading,
+    value,
+    class: className,
+    children,
+    ...rest
+  }: CommandGroupProps = $props()
+
+  const fallbackValue = `----${useId()}`
+</script>
+
+<CommandPrimitive.Group
+  bind:ref
+  data-slot="command-group"
+  value={value ?? heading ?? fallbackValue}
+  class={cn('text-foreground overflow-hidden p-1', className)}
+  {...rest}
+>
+  {#if heading}
+    <CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+      {heading}
+    </CommandPrimitive.GroupHeading>
+  {/if}
+  <CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

package/dist/components/actions/command/command-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+/** A section of items, under a small muted heading. */
+export type CommandGroupProps = CommandPrimitive.GroupProps & {
+    heading?: string;
+};
+declare const CommandGroup: import("svelte").Component<CommandGroupProps, {}, "ref">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;