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

package/dist/utils/tone.js

@@ -0,0 +1,119 @@
+export const TONES = [
+    'neutral',
+    'primary',
+    'info',
+    'success',
+    'warning',
+    'critical',
+];
+/**
+ * A 10% wash under ink of the same tone — a status, not an action.
+ *
+ * Neutral is a 7% foreground wash, not `--muted`. The canvas is `--muted`, so
+ * a neutral badge or chip in `bg-muted` vanished wherever it sat on the page
+ * rather than on a card; a foreground wash reads on the canvas, on a card and
+ * on a muted row, in both schemes, as Skeleton's always has. 7% rather than
+ * Skeleton's 10%: at 10% a neutral fill read a step darker than the old
+ * `bg-muted` on a white card, heavier than a status that claims nothing should.
+ * Every neutral fill outside this map (an avatar, a rank disc, a stepper's
+ * track) writes the same `bg-foreground/[0.07]`.
+ */
+export const TONE_SOFT_CLASS = {
+    neutral: 'bg-foreground/[0.07] text-muted-foreground',
+    primary: 'bg-primary-soft text-primary',
+    info: 'bg-info-soft text-info',
+    success: 'bg-success-soft text-success',
+    warning: 'bg-warning-soft text-warning',
+    critical: 'bg-destructive-soft text-destructive',
+};
+/**
+ * A full fill. Neutral is the ink colour inverted rather than a grey, so that
+ * "solid" always means the loudest thing in its row; a light grey fill is
+ * what `soft` is for.
+ *
+ * Each status writes in its own `-foreground` ink rather than white: white
+ * reads on the light scheme's 600 steps but all but vanishes on the dark
+ * scheme's bright 400s.
+ */
+export const TONE_SOLID_CLASS = {
+    neutral: 'bg-foreground text-background',
+    primary: 'bg-primary text-primary-foreground',
+    info: 'bg-info text-info-foreground',
+    success: 'bg-success text-success-foreground',
+    warning: 'bg-warning text-warning-foreground',
+    critical: 'bg-destructive text-destructive-foreground',
+};
+export const TONE_OUTLINE_CLASS = {
+    neutral: 'border-border text-foreground',
+    primary: 'border-primary/50 text-primary',
+    info: 'border-info/50 text-info',
+    success: 'border-success/50 text-success',
+    warning: 'border-warning/50 text-warning',
+    critical: 'border-destructive/50 text-destructive',
+};
+/** Ink alone, for a ghost or a link. Neutral inherits the surrounding text. */
+export const TONE_TEXT_CLASS = {
+    neutral: '',
+    primary: 'text-primary',
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    critical: 'text-destructive',
+};
+/** The wash an interactive element takes on hover and while its menu is open. */
+export const TONE_HOVER_CLASS = {
+    neutral: 'hover:bg-muted data-[state=open]:bg-muted',
+    primary: 'hover:bg-primary-soft data-[state=open]:bg-primary-soft',
+    info: 'hover:bg-info-soft data-[state=open]:bg-info-soft',
+    success: 'hover:bg-success-soft data-[state=open]:bg-success-soft',
+    warning: 'hover:bg-warning-soft data-[state=open]:bg-warning-soft',
+    critical: 'hover:bg-destructive-soft data-[state=open]:bg-destructive-soft',
+};
+/**
+ * The fill of a mark — a bar, a ring, a dot, a sparkline. Neutral is the
+ * muted ink rather than the brand, so an unremarkable bar reads as a quantity
+ * and not as a claim; `primary` is there for the bar that should.
+ */
+export const TONE_FILL_CLASS = {
+    neutral: 'bg-muted-foreground',
+    primary: 'bg-primary',
+    info: 'bg-info',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    critical: 'bg-destructive',
+};
+/** The same fill as a stroke, for a ring. */
+export const TONE_STROKE_CLASS = {
+    neutral: 'stroke-muted-foreground',
+    primary: 'stroke-primary',
+    info: 'stroke-info',
+    success: 'stroke-success',
+    warning: 'stroke-warning',
+    critical: 'stroke-destructive',
+};
+/**
+ * The fill of `Progress`'s indicator, set from the outside. `Progress` is
+ * shadcn's and paints its own `bg-primary`; the `data-slot` selector beats it.
+ */
+export const TONE_INDICATOR_CLASS = {
+    neutral: '[&_[data-slot=progress-indicator]]:bg-muted-foreground',
+    primary: '[&_[data-slot=progress-indicator]]:bg-primary',
+    info: '[&_[data-slot=progress-indicator]]:bg-info',
+    success: '[&_[data-slot=progress-indicator]]:bg-success',
+    warning: '[&_[data-slot=progress-indicator]]:bg-warning',
+    critical: '[&_[data-slot=progress-indicator]]:bg-destructive',
+};
+/**
+ * The colour as a CSS value, for a library that takes one rather than a class
+ * — recharts' `stroke` and `stopColor`. Red is `--destructive`, not the
+ * `--color-error` palette hue: `Sparkline` once drew with the latter, a second
+ * red beside every badge and bar on the page.
+ */
+export const TONE_CSS_VAR = {
+    neutral: 'var(--muted-foreground)',
+    primary: 'var(--primary)',
+    info: 'var(--color-info)',
+    success: 'var(--color-success)',
+    warning: 'var(--color-warning)',
+    critical: 'var(--destructive)',
+};

package/dist/utils/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Prop helpers for wrapping elements and bits-ui primitives.
+ *
+ * From shadcn-svelte's `utils.ts` (MIT; see LICENSES/shadcn-svelte.txt).
+ */
+/** Adds a bindable `ref` to an element's props. */
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};
+/** bits-ui's `child` snippet, removed where a wrapper renders its own element. */
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;

package/dist/utils/types.js

@@ -0,0 +1,6 @@
+/**
+ * Prop helpers for wrapping elements and bits-ui primitives.
+ *
+ * From shadcn-svelte's `utils.ts` (MIT; see LICENSES/shadcn-svelte.txt).
+ */
+export {};

package/package.json

@@ -1,6 +1,127 @@
 {
   "name": "@jovertical/mise-design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.1.0",
+  "description": "Svelte 5 components and a configurable Tailwind v4 theme for operations dashboards",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "svelte": "./dist/form.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "default": "./dist/tokens.js"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "bin": {
+    "mise-theme": "./bin/mise-theme.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "LICENSES",
+    "skills",
+    "!dist/**/*.stories.svelte",
+    "!dist/**/*.stories.svelte.d.ts",
+    "!dist/**/*.test.*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jovertical/mise-design-system.git"
+  },
+  "homepage": "https://github.com/jovertical/mise-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/jovertical/mise-design-system/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "formsnap": "^2.1.0",
+    "svelte": "^5.0.0",
+    "sveltekit-superforms": "^3.0.0",
+    "tailwindcss": "^4.1.0",
+    "tw-animate-css": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "formsnap": {
+      "optional": true
+    },
+    "sveltekit-superforms": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.4",
+    "@lucide/svelte": "^1.67.0",
+    "@tanstack/svelte-table": "^9.3.1",
+    "bits-ui": "^2.20.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "d3-scale": "^4.0.3",
+    "d3-shape": "^3.2.1",
+    "layerchart": "^2.9.2",
+    "svelte-sonner": "^1.2.3",
+    "tailwind-merge": "^3.7.0",
+    "vaul-svelte": "1.0.0-next.7"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.6.4",
+    "@storybook/addon-a11y": "^10.6.5",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/addon-svelte-csf": "^5.1.6",
+    "@storybook/svelte": "^10.6.5",
+    "@storybook/sveltekit": "^10.6.5",
+    "@sveltejs/kit": "^3.1.1",
+    "@sveltejs/package": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@tailwindcss/cli": "^4.3.4",
+    "@tailwindcss/vite": "^4.3.4",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/svelte": "^5.4.2",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.2.0",
+    "@types/node": "^24.19.2",
+    "formsnap": "^2.1.0",
+    "jsdom": "^30.1.3",
+    "publint": "^0.3.25",
+    "storybook": "^10.6.5",
+    "storybook-addon-tag-badges": "^3.1.0",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.7.8",
+    "sveltekit-superforms": "^3.1.0",
+    "tailwindcss": "^4.3.4",
+    "tsx": "^4.23.15",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0",
+    "zod": "^4.6.7"
+  },
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package && pnpm build:theme && publint",
+    "build:theme": "tsx scripts/build-theme.ts",
+    "build:skill": "tsx scripts/build-skill.ts",
+    "storybook": "pnpm build:theme && storybook dev -p 6006",
+    "build:storybook": "pnpm build:theme && storybook build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "test": "pnpm check && pnpm lint && pnpm test:unit"
+  }
 }

package/skills/mise/SKILL.md

@@ -0,0 +1,159 @@
+---
+name: mise
+description: >-
+  Builds Svelte 5 UI in an app that uses @jovertical/mise-design-system: picking the mise
+  component for a job, its props and defaults, theming, and setting mise up. Activates when
+  writing or changing Svelte UI in an app that depends on @jovertical/mise-design-system, or
+  setting mise up in a new app; or when the user mentions mise, the design system, a mise
+  component, tone, variant, or mise-theme.
+---
+
+# mise
+
+mise is a library of Svelte 5 components and a Tailwind v4 theme for operations dashboards:
+locations, shifts, orders, stock. This skill is for an app that depends on it. Before writing
+any UI, find the mise component that does the job; write your own only when none does.
+
+## This app
+
+```json
+!`npx --no-install mise-theme info --json`
+```
+
+`stack` says how the app is wired (`sveltekit`, `inertia` or `vite`), `stylesheet` where mise's
+theme is imported, `themeConfig` whether the app has its own theme, and `form` whether
+`mise/form` can be used. If the command failed, mise is not installed here: follow
+[setup.md](setup.md).
+
+## Which copy to trust
+
+This skill may be newer or older than the mise the app has installed. When they disagree, read
+`node_modules/@jovertical/mise-design-system/skills/mise/` instead: that copy ships with the
+installed `version` above, and its `components/` files list exactly the props that version
+takes.
+
+## Rules
+
+- **Use a mise component before writing UI.** A badge, a card, a table, an empty state or a
+  confirmation dialog almost certainly exists; the index below says which.
+- **Compose before customising.** A card of facts is `Card` with `FactList` in it, not a styled
+  `div`. A dashboard is `PageLayout`, `PageHeader`, `CardGrid` and `StatTile`s.
+- **Props before classes.** Colour is `tone`: `neutral`, `primary`, `info`, `success`,
+  `warning` or `critical` (never `destructive`, `error` or `danger`). Treatment is `variant`.
+  Size is `size`: `sm`, `md` (the default) or `lg`. States are bare adjectives: `loading`,
+  `invalid`, `disabled`.
+- **Semantic colours only.** `bg-primary`, `text-muted-foreground`, `border-border`. Never a
+  palette class (`bg-blue-500`) or a `dark:` colour override: the theme handles dark mode.
+- **`class` is for layout**: margin, width, grid placement. Do not restyle a component's
+  colours, radius or type through `class`; change the theme ([theming.md](theming.md)).
+- **A neutral fill on the page** is `bg-foreground/[0.07]`, the same wash mise's neutral badges
+  use. `bg-muted` is the page canvas, so a `bg-muted` chip disappears on it.
+- **The app formats, mise displays.** Money, dates and statuses are formatted by the app.
+  `NumberInput` with `format="currency"` takes and reports integer cents.
+- **Every component** takes `class` and spreads other attributes onto its root, and every part
+  takes `bind:ref`. Overlays and inputs use `bind:open` and `bind:value`.
+- **For the app's own components**, mise exports `cn` (class merging), the `Tone` and `Size`
+  types, `TONES`, and the tone class maps (`TONE_SOFT_CLASS`, `TONE_SOLID_CLASS`,
+  `TONE_TEXT_CLASS`, `TONE_FILL_CLASS` and the rest), so a custom badge-like element matches
+  mise's colours.
+
+## Which component
+
+Each line is a job and the component that does it. The group files list every part, prop,
+type and default.
+
+**Actions** ([components/actions.md](components/actions.md))
+
+- A button, or a link that looks like one (`href`): `Button`
+- A menu of actions on a row or a page: `DropdownMenu`
+- A searchable list of commands or a palette (`CommandDialog`): `Command`
+- The light and dark switch: `ThemeToggle`, inside a `ThemeProvider`
+
+**Forms** ([components/forms.md](components/forms.md))
+
+- A label, description and error around any input: `Field` (with `Label`)
+- Text: `Input`; several lines: `Textarea`
+- An input with an icon, a prefix or a button inside it: `InputGroup`
+- A number, a price or a count: `NumberInput`, never `Input type="number"`
+- An amount and its unit (2.5 kg): `QuantityInput`
+- One choice from a few: `RadioGroup`; when each choice needs a description or media:
+  `ChoiceRow`
+- One choice from many: `Select`; searchable or several values: `Combobox`
+- On or off: `Switch`; with a label and description in a row: `SwitchField`; a tick:
+  `Checkbox`
+- A date: `DatePicker`; a calendar on the page: `Calendar`; a time: `TimePicker`
+- A one-time code: `InputOTP`
+- An image or file upload: `MediaDropzone`
+- Segmented buttons: `ToggleGroup`; one pressed state: `Toggle`; joined buttons and inputs:
+  `ButtonGroup`
+- A validated form in SvelteKit: `Form`, from `@jovertical/mise-design-system/form`. It needs
+  SvelteKit; in an Inertia or plain Vite app use `Field` with the app's own form state
+  ([recipes/form.md](recipes/form.md))
+
+**Navigation** ([components/navigation.md](components/navigation.md))
+
+- The app's side menu: `Sidebar`
+- Where am I: `Breadcrumb`
+- Sections of one page: `Tabs`
+- The steps of a flow: `Stepper`
+
+**Layout** ([components/layout.md](components/layout.md))
+
+- The page frame: `PageLayout`, with `PageHeader` for the title, description and actions
+- A surface: `Card`
+- Cards in a grid: `CardGrid`; rows inside one card: `CardList`
+- A collapsible card for a side column: `AsideCard`
+- What one step produced, read-only: `SummaryCard`
+- Show and hide a section: `Collapsible`
+- A rule: `Separator`
+
+**Overlays** ([components/overlays.md](components/overlays.md))
+
+- "Are you sure?": `AlertDialog`
+- A task in a modal: `Dialog`; in a side panel: `Sheet`; from the bottom on mobile: `Drawer`
+- A small floating panel: `Popover`; a preview on hover: `HoverCard`
+- A label on hover: `Tooltip`; a `?` that explains the thing beside it: `Hint`
+
+**Feedback** ([components/feedback.md](components/feedback.md))
+
+- A message in the page: `Alert`; a toast: `Toaster` once in the layout, then `toast(…)`
+- Loading: `Spinner` inline, `Skeleton` for the shape of what is coming, `LoadingState` for a
+  whole panel
+- Nothing here yet: `EmptyState`; to compose your own: `Empty` and its parts
+- An error page (not found, forbidden, failed): `ErrorState`
+- Progress: `Progress`; a route change: `NavigationProgress`
+- A feature the user cannot use yet: `FeaturePreview` for a whole page, `LockedOverlay` over
+  one card
+
+**Data display** ([components/data-display.md](components/data-display.md))
+
+- A status or a tag: `Badge`; a change up or down: `DeltaBadge`
+- A person's picture or initials: `Avatar`; a named thing with its mark and one line:
+  `EntityLabel`; a list row with media, text and actions: `Item`
+- An icon in a tinted square: `IconChip`
+- Label and value pairs: `FactList`
+- The headline number of a dashboard: `StatTile`. One figure per tile, with its delta, unit and
+  sparkline
+- One subject and several figures with a bar beneath: `MetricRow`
+- One measure drawn as a bar, in a ranked list: `MetricBar`; sub-groups to compare side by
+  side: `MetricGrid`
+- A share of a whole as a ring: `RadialStat`; as one segmented bar: `SegmentedBar`
+- A trend in a cell or a tile: `Sparkline`; a full chart: `ChartContainer` (LayerChart)
+- Rows of data: `Table`; with sorting, filtering, selection or pagination: `DataTable`
+- A history of events: `Timeline`
+- Setup steps: `Checklist`, and `ChecklistCard` for the summary card; what a page still needs
+  before going live: `ReadinessChecklist`
+- A code read off one screen and typed into another: `SegmentedCode`
+- A row in a nested list: `TreeLeaf`
+
+**Typography** ([components/typography.md](components/typography.md))
+
+- A heading: `Heading`; body text with size, muting and tone: `Text`
+
+## Read next
+
+- [setup.md](setup.md): install mise and wire it into SvelteKit, Laravel with Inertia, or Vite.
+- [theming.md](theming.md): presets, the brand colour, radius, fonts and dark mode.
+- [recipes/dashboard-page.md](recipes/dashboard-page.md): a dashboard page.
+- [recipes/form.md](recipes/form.md): a form, in Inertia and in SvelteKit.
+- [recipes/data-table.md](recipes/data-table.md): a data table with filters and row actions.

package/skills/mise/components/actions.md

@@ -0,0 +1,200 @@
+<!-- Generated by pnpm build:skill. Do not edit by hand. -->
+
+# Actions
+
+## Button
+
+`import { Button, buttonVariants, defaultButtonTone } from '@jovertical/mise-design-system'`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'` | `'solid'` |  |
+| `tone` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'critical'` |  | Defaults to `primary` for `solid` and `link`, `neutral` for the rest. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |  |
+| `iconOnly` | `boolean` | `false` | One glyph and no label: square, round, and it needs an `aria-label`. |
+| `children` | `Snippet` |  |  |
+
+Also takes: every `<button>` attribute; every `<a>` attribute.
+
+Also exports: `buttonVariants`, `defaultButtonTone`.
+
+Types: `ButtonSize` (`'sm' | 'md' | 'lg'`), `ButtonVariant` (`'solid' | 'soft' | 'outline' | 'ghost' | 'link'`).
+
+## Command
+
+`import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@jovertical/mise-design-system'`
+
+A filterable, keyboard-navigable list, grouped by section: the shape a command palette is built on. Bare for an inline picker; `CommandDialog` puts it in a dialog.
+
+Also takes: bits-ui `Command.Root` props.
+
+### `CommandDialog`
+
+`Command` in a `Dialog`, for a palette that takes over the screen. The title and description are for a screen reader only.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | `'Command palette'` |  |
+| `description` | `string` | `'Search for a command to run.'` |  |
+| `showCloseButton` | `boolean` | `true` |  |
+| `class` | `string` |  |  |
+| `children` (required) | `Snippet` |  |  |
+
+Also takes: bits-ui `Dialog.Root` props except `children`, `child`; bits-ui `Command.Root` props except `children`, `child`.
+
+### `CommandEmpty`
+
+Shown when nothing matches what was typed.
+
+Also takes: bits-ui `Command.Empty` props.
+
+### `CommandGroup`
+
+A section of items, under a small muted heading.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `heading` | `string` |  |  |
+
+Also takes: bits-ui `Command.Group` props.
+
+### `CommandInput`
+
+The search field, with its glyph, ruled off from the list below.
+
+Also takes: bits-ui `Command.Input` props.
+
+### `CommandItem`
+
+One command. The highlighted row takes the muted wash, as a menu row does.
+
+Also takes: bits-ui `Command.Item` props.
+
+### `CommandList`
+
+The scrolling list of groups and items.
+
+Also takes: bits-ui `Command.List` props.
+
+### `CommandSeparator`
+
+A rule between groups.
+
+Also takes: bits-ui `Command.Separator` props.
+
+### `CommandShortcut`
+
+A keyboard shortcut, muted at the end of the item.
+
+Also takes: every `<span>` attribute.
+
+## DropdownMenu
+
+`import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '@jovertical/mise-design-system'`
+
+Also takes: bits-ui `DropdownMenu.Root` props.
+
+### `DropdownMenuCheckboxItem`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `Snippet` |  |  |
+
+Also takes: bits-ui `DropdownMenu.CheckboxItem` props except `children`, `child`.
+
+### `DropdownMenuContent`
+
+`min-w-44` (176px) by default, the width menus kept asking for.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `portalProps` | `DropdownMenuPrimitive.PortalProps` |  |  |
+
+Also takes: bits-ui `DropdownMenu.Content` props.
+
+### `DropdownMenuGroup`
+
+Also takes: bits-ui `DropdownMenu.Group` props.
+
+### `DropdownMenuItem`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `inset` | `boolean` |  |  |
+| `variant` | `'default' \| 'destructive'` | `'default'` | `destructive` for an action that removes or ends something. |
+
+Also takes: bits-ui `DropdownMenu.Item` props.
+
+### `DropdownMenuLabel`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `inset` | `boolean` |  |  |
+
+Also takes: every `<div>` attribute.
+
+### `DropdownMenuPortal`
+
+Also takes: bits-ui `DropdownMenu.Portal` props.
+
+### `DropdownMenuRadioGroup`
+
+Also takes: bits-ui `DropdownMenu.RadioGroup` props.
+
+### `DropdownMenuRadioItem`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `Snippet` |  |  |
+
+Also takes: bits-ui `DropdownMenu.RadioItem` props except `children`, `child`.
+
+### `DropdownMenuSeparator`
+
+Also takes: bits-ui `DropdownMenu.Separator` props.
+
+### `DropdownMenuShortcut`
+
+Also takes: every `<span>` attribute.
+
+### `DropdownMenuSub`
+
+Also takes: bits-ui `DropdownMenu.Sub` props.
+
+### `DropdownMenuSubContent`
+
+Also takes: bits-ui `DropdownMenu.SubContent` props.
+
+### `DropdownMenuSubTrigger`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `inset` | `boolean` |  |  |
+
+Also takes: bits-ui `DropdownMenu.SubTrigger` props.
+
+### `DropdownMenuTrigger`
+
+Also takes: bits-ui `DropdownMenu.Trigger` props.
+
+## ThemeToggle
+
+`import { ThemeProvider, ThemeToggle, ThemeState, useTheme } from '@jovertical/mise-design-system'`
+
+Icon-only toggle between light and dark, inside a `ThemeProvider`.
+
+Also takes: everything `Button` takes except `children`, `onclick`.
+
+### `ThemeProvider`
+
+Applies a `light` / `dark` class to `<html>` and persists the choice. The class on the root is what Tailwind's `dark:` variant reads, so this touches the DOM directly rather than passing a value down alone.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultTheme` | `'dark' \| 'light' \| 'system'` | `'system'` |  |
+| `storageKey` | `string` | `'vite-ui-theme'` | localStorage key. Distinct per app, so two apps on one host do not share a theme. |
+| `children` (required) | `Snippet` |  |  |
+
+Also exports: `ThemeState`, `useTheme`.
+
+Types: `Theme` (`'dark' | 'light' | 'system'`).