@tristan2828/ui-foundation 4.62.0 → 4.63.0

package/conventions/docs/design-language.md

@@ -3,25 +3,28 @@
 <!-- index: written by `npm run docs:index` in the package from the headings below; never edit it by hand -->
 ## Index
 
-- [Semantic tones](#semantic-tones) · lines 34–62
-- [The three badge styles](#the-three-badge-styles) · lines 64–81
-- [Mapping an enum to tones](#mapping-an-enum-to-tones) · lines 83–112
-- [Glyphs and icons: 3:1](#glyphs-and-icons-31) · lines 114–127
-- [Logos and brand marks](#logos-and-brand-marks) · lines 129–173
-- [Categorical colour](#categorical-colour) · lines 175–245
-- [Typography](#typography) · lines 247–338
-  - [Written text (notes)](#written-text-notes) · lines 278–338
-- [Density](#density) · lines 340–397
-- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 399–513
-- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 515–584
-- [Notices](#notices) · lines 586–614
-- [A value over time](#a-value-over-time) · lines 616–694
-  - [Several values over time](#several-values-over-time) · lines 657–694
-- [A list as a board](#a-list-as-a-board) · lines 696–747
-- [A list as cards](#a-list-as-cards) · lines 749–795
-- [Key numbers on a record](#key-numbers-on-a-record) · lines 797–819
-- [Picking at random](#picking-at-random) · lines 821–852
-- [Filling in what's missing](#filling-in-whats-missing) · lines 854–921
+- [Palettes](#palettes) · lines 37–95
+- [Glow](#glow) · lines 97–115
+- [Semantic tones](#semantic-tones) · lines 117–145
+- [The three badge styles](#the-three-badge-styles) · lines 147–164
+- [Mapping an enum to tones](#mapping-an-enum-to-tones) · lines 166–195
+- [Glyphs and icons: 3:1](#glyphs-and-icons-31) · lines 197–210
+- [Logos and brand marks](#logos-and-brand-marks) · lines 212–256
+- [Categorical colour](#categorical-colour) · lines 258–328
+- [Shapes and sizes](#shapes-and-sizes) · lines 330–351
+- [Typography](#typography) · lines 353–447
+  - [Written text (notes)](#written-text-notes) · lines 387–447
+- [Density](#density) · lines 449–506
+- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 508–622
+- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 624–693
+- [Notices](#notices) · lines 695–723
+- [A value over time](#a-value-over-time) · lines 725–803
+  - [Several values over time](#several-values-over-time) · lines 766–803
+- [A list as a board](#a-list-as-a-board) · lines 805–856
+- [A list as cards](#a-list-as-cards) · lines 858–904
+- [Key numbers on a record](#key-numbers-on-a-record) · lines 906–928
+- [Picking at random](#picking-at-random) · lines 930–961
+- [Filling in what's missing](#filling-in-whats-missing) · lines 963–1030
 
 <!-- /index -->
 
@@ -31,6 +34,86 @@ Tokens and styles here **grow freely**, in the foundation package, so every
 app gets them: they do not wait for a second app to need them. New
 composites don't grow that way; they are built against a real app's screen.
 
+## Palettes
+
+A palette is an app's own dark look: its surfaces, text, accent and a
+second colour, chosen once for every app the foundation serves. There
+are four, in the order they were ranked:
+
+| Name | `palette` | Accent | Second colour |
+|---|---|---|---|
+| Indigo and Cyan | `indigo-cyan` | indigo, the only accent that passes 4.5:1 on cards | cyan |
+| Indigo and Rose | `indigo-rose` | indigo-violet | rose |
+| Graphite and Periwinkle | `graphite-periwinkle` | periwinkle on neutral grey | lilac |
+| Violet | `violet` | violet | magenta |
+
+**How an app picks one.** `<FoundationProviders palette="indigo-cyan">`
+names the app's default. Add `palettePicker` and the app shell's header
+offers all four (with swatches); the one picked is remembered on that
+device, and a new device starts on the default. `usePalette()` reads the
+palette on screen. Without `palette`, nothing changes: light and dark
+follow the system, with the toggle in the header.
+
+**A palette is dark only.** With one, the theme is forced dark and the
+shell has no light/dark toggle. The light theme stays for apps without a
+palette. Printed notes still print light: the print override beats a
+palette's block.
+
+**Where it lives.** `styles/theme.css`: each palette's colours as
+primitives (`--palette-<name>-*`, ratios beside them), and one block per
+palette, `.dark[data-palette="<name>"]`, that sets only what differs from
+`.dark`. `data-palette` goes on `<html>`, so popups portaled to `<body>`
+wear it too. An installed app's colours follow it with
+`pwa({ palette })`.
+
+**Why some tokens aren't the guide's colour as written.**
+
+- **The focus ring is the accent** (4.24 to 5.25:1 on the page), not the
+  guide's accent deep, which measured 2.30 to 2.91, under the 3:1 a focus
+  indicator needs.
+- **Links are accent light** (`--link`, 8.5:1 or more). The accent fails
+  4.5:1 as small text on Indigo and Rose and on Violet, and on every
+  palette's cards but Indigo and Cyan, so it is never small text: it is
+  the ring, the primary fill and the active item's tint. The `link`
+  Button variant is `text-link` for the same reason.
+- **The status colours are text shades.** The guide's success, warning
+  and danger are `--success-text`, `--warning-text` and
+  `--destructive-text` (soft badges, icons, coloured words). Solid fills
+  keep the deeper shades with white text: white on the guide's success
+  green measures 1.80. Info keeps its blue.
+- **Violet's text on its accent** is `#110823`, a shade darker than the
+  guide's `#130925`, which measured 4.496:1 (under 4.5).
+- **Danger text** is `#df7a72`, a shade lighter than the guide's
+  `#dc726a`, which measured 4.37 on Graphite's raised surface and 4.46 on
+  an outline button's fill (an invalid image field's message).
+- **Field borders** (`--input`, the guide's strong border) measure 2.5 to
+  2.9 against the page, under 3:1. It is already the lightest grey each
+  palette has, so it is kept as designed; axe doesn't check borders.
+
+The package's `e2e/fixtures-visual.spec.ts` runs every primitive,
+composite and tone story through axe in each palette, and measures every
+glyph and categorical slot against each palette's page and card.
+
+## Glow
+
+Under a palette only, from `--primary` so each palette glows in its own
+accent; an app without a palette never gets it. Everything else stays
+flat: no glow at the top of the page.
+
+- **The primary button** (Button's default variant) on hover, keyboard
+  focus and press: one soft layer of the accent (`--primary-glow`: 38px
+  blur, 2px spread, 38%), and on hover a shine sweeping across once
+  (650ms). Under reduced motion, no shine and no shrink. Secondary,
+  outline, ghost and destructive buttons never glow.
+- **A hovered card**: its edge turns the accent with a soft halo
+  (`--edge-glow`), through the `glow-edge` utility. `ModuleCard`,
+  `WidgetCard` and `Board`'s cards carry it, and a `DataTable` card
+  layout's `Card`s; an app's own card takes the class.
+- **A slider's thumb** (`ui/slider`): a small halo (`--thumb-glow`).
+
+For anything else of an app's own, `palette:` is the variant
+(`palette:hover:shadow-(--primary-glow)`).
+
 ## Semantic tones
 
 Four tones carry meaning: **success**, **warning**, **destructive** and
@@ -244,6 +327,29 @@ If you find yourself wanting a thirteenth, that is a sign the column should
 be showing a shape or a label rather than more colours: there is no more
 room that stays readable.
 
+## Shapes and sizes
+
+The shared style guide's, the same in every app with or without a
+palette:
+
+- **Radius 9px** (`--radius-base`): buttons and cards on `--radius`,
+  fields on `--radius-md` (about 7px).
+- **Buttons** 36px tall with 16px sides, semibold (`sm` 32px, `lg` 40px,
+  the icon sizes to match). A press shrinks the button to 96%, not under
+  reduced motion.
+- **Fields** (input, select, input group, a multi-pick's box) 36px,
+  outlined. **Checkbox** 18px, a 5px radius, solid when checked, a small
+  press pop.
+- **Cards** a hairline border with a soft shadow (`--card-shadow`: 30% in
+  dark, lighter on white), 16px padding, 14px between their parts. A
+  card's header, when it comes first, is a tinted bar flush with the top
+  (`--card-header`), as on every `WidgetCard` and `EntityView` section.
+- **Badges** are pills; the default is a soft tint of the accent
+  (`variant="solid"` is the filled one). The tone styles are unchanged.
+- **Behind a dialog or sheet**, the page is dimmed and blurred.
+- **Motion** is quick: 120ms with the standard easing, for every
+  transition that doesn't name its own.
+
 ## Typography
 
 Six roles cover every screen. Each is one class that sets size, line
@@ -251,13 +357,16 @@ height and weight together, from tokens in the package's `styles/theme.css`:
 
 | Class | For | Size / weight |
 |---|---|---|
-| `type-page-title` | the screen's one `<h1>` (a table's title, a form's title) | 18px / 600 |
+| `type-page-title` | the screen's one `<h1>` (a table's title, a form's title) | 28px / 600, line 1.2 |
 | `type-section-title` | a heading inside a screen (a form section, a card group) | 16px / 600 |
-| `type-body` | running text, table cells, form text, the pagination summary | 14px / 400 |
+| `type-body` | running text, table cells, form text, the pagination summary | 14px / 400, line 1.5 |
 | `type-label` | column headers, field labels, a small heading over a group | 14px / 500 |
 | `type-caption` | counts, metadata, helper text under a field | 12px / 400 |
 | `type-numeric` | the one live number on a card (`ModuleCard`'s count), in tabular figures | 22px / 500 |
 
+- **Headings draw in a little:** the page and section titles, and written
+  text's `#` and `##`, take -0.02em letter spacing. Labels stay normal
+  case at 14px medium (small caps at 12px read too small).
 - **Use a role instead of size and weight classes,** not as well as them.
   `type-page-title` replaces `text-lg font-semibold`. Combining a role with
   `text-sm`, `font-medium` or `leading-*` makes two classes set the same
@@ -351,8 +460,8 @@ set, not a `DataTable` prop:
 
 | `data-density` | Changes | Table cell padding (vertical) | Header height | For |
 |---|---|---|---|---|
-| `compact` | table rows, and a hub's cards (`WidgetCard`, `WidgetList` rows, `ModuleCard`) | 4px | 32px | wide tables people scan, many rows per screen; a dense hub |
-| *(unset)* | — | 8px | 40px | the default |
+| *(unset)* | — | 4px | 32px | the default: compact rows, as the shared style guide has them |
+| `compact` | a hub's cards (`WidgetCard`, `WidgetList` rows, `ModuleCard`); table rows stay the default's | 4px | 32px | a dense hub |
 | `comfortable` | table rows only | 12px | 48px | short tables, or rows people read rather than scan |
 | `large` | **everything**: type, spacing, control heights, icons, the sidebar, table rows | 12px | 56px | a screen read from a distance: a TV used as the desktop monitor, with a mouse and keyboard |
 

package/dist/components/app/app-shell.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRightIcon, LogOutIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { ChevronRightIcon, LogOutIcon, MoonIcon, PaletteIcon, SunIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useEffect, useId, useState } from 'react';
 import { Link, Navigate, Outlet, useLocation } from 'react-router';
@@ -11,8 +11,11 @@ import { ErrorState } from './error-state.js';
 import { useErrorReporter } from '../../error-reporting/error-reporting-context.js';
 import { ReportRoutePattern } from '../../error-reporting/error-reporting-provider.js';
 import { useShellDocumentTitle } from '../../hooks/use-document-title.js';
+import { usePalette } from '../../hooks/use-palette.js';
+import { isPaletteName, PALETTE_LABELS, PALETTES } from '../../lib/palettes.js';
 import { cn } from 'cn';
 import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
 import { Skeleton } from '../ui/skeleton.js';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarTrigger, useSidebar, } from '../ui/sidebar.js';
 import { Toaster } from '../ui/sonner.js';
@@ -36,6 +39,29 @@ function CloseMobileSidebarOnNavigate() {
     }, [key, setOpenMobile]);
     return null;
 }
+// The header's look control: an app with a palette is always dark, so it
+// has no light/dark toggle, and with the picker on it gets the palette
+// menu in its place (design-language.md "Palettes").
+function LookControl() {
+    const { palette, picker } = usePalette();
+    if (!palette)
+        return _jsx(ThemeToggle, {});
+    return picker ? _jsx(PalettePicker, { palette: palette }) : null;
+}
+// Each palette's swatch is its own background with its accent and second
+// colour on it, read from the palette primitives, so the menu shows all
+// four whichever is on screen.
+function PaletteSwatch({ name }) {
+    const colour = (part) => `var(--palette-${name}-${part})`;
+    return (_jsxs("span", { "aria-hidden": true, className: "flex h-4 w-7 shrink-0 items-center justify-center gap-0.5 rounded-sm border border-border", style: { background: colour('background') }, children: [_jsx("span", { className: "size-2 rounded-full", style: { background: colour('accent') } }), _jsx("span", { className: "size-2 rounded-full", style: { background: colour('second') } })] }));
+}
+function PalettePicker({ palette }) {
+    const { setPalette } = usePalette();
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Palette: ${PALETTE_LABELS[palette]}` }), children: _jsx(PaletteIcon, {}) }), _jsx(DropdownMenuContent, { align: "end", className: "w-60", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Palette on this device" }), _jsx(DropdownMenuRadioGroup, { value: palette, onValueChange: (next) => {
+                                if (isPaletteName(next))
+                                    setPalette(next);
+                            }, children: PALETTES.map((name) => (_jsxs(DropdownMenuRadioItem, { value: name, children: [_jsx(PaletteSwatch, { name: name }), PALETTE_LABELS[name]] }, name))) })] }) })] }));
+}
 function ThemeToggle() {
     const { resolvedTheme, setTheme } = useTheme();
     const isDark = resolvedTheme === 'dark';
@@ -160,5 +186,5 @@ export function AppShell({ title, logo: Logo, nav, sidebarExtra, defaultSidebarO
                                                         // (AuthProvider), so this stays a deliberate logout: a
                                                         // clean /login, never the previous user's page as `from`.
                                                         logout().catch(() => { });
-                                                    }, children: _jsx(LogOutIcon, {}) })] })] })] }) }), _jsxs(SidebarInset, { className: "min-w-0", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border px-4", children: [_jsx(SidebarTrigger, {}), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {})] }), _jsx("div", { className: cn('flex-1 p-6', bottomBar?.length && BOTTOM_BAR_PADDING), children: _jsx(Outlet, {}) })] }), bottomBar && bottomBar.length > 0 && _jsx(BottomBar, { items: bottomBar, nav: nav, activeTo: activeTo })] }), _jsx(Toaster, { position: "top-center" })] }));
+                                                    }, children: _jsx(LogOutIcon, {}) })] })] })] }) }), _jsxs(SidebarInset, { className: "min-w-0", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border px-4", children: [_jsx(SidebarTrigger, {}), _jsx("div", { className: "flex-1" }), _jsx(LookControl, {})] }), _jsx("div", { className: cn('flex-1 p-6', bottomBar?.length && BOTTOM_BAR_PADDING), children: _jsx(Outlet, {}) })] }), bottomBar && bottomBar.length > 0 && _jsx(BottomBar, { items: bottomBar, nav: nav, activeTo: activeTo })] }), _jsx(Toaster, { position: "top-center" })] }));
 }

package/dist/components/app/board.js

@@ -101,7 +101,7 @@ export function Board({ 'aria-label': ariaLabel, columns, items, getId, getColum
                                     event.dataTransfer.setData(DRAG_TYPE, String(getId(item)));
                                     event.dataTransfer.effectAllowed = 'move';
                                 }
-                                : undefined, className: cn('gap-2 px-3 py-3', onMove && 'cursor-grab active:cursor-grabbing'), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: renderCard(item) }), onMove && (_jsx(MoveMenu, { id: String(getId(item)), name: getName(item), value: getColumn(item), targets: targets, onMove: (value) => move(String(getId(item)), value, 'menu') }))] }) }, getId(item)))), cards.length === 0 && (_jsx("p", { className: "px-1 py-6 text-center type-caption text-muted-foreground", children: column.empty ?? 'Nothing here' })), column.footer && _jsx("div", { className: "px-1 type-caption text-muted-foreground", children: column.footer })] }, column.value));
+                                : undefined, className: cn('glow-edge gap-2 px-3 py-3', onMove && 'cursor-grab active:cursor-grabbing'), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: renderCard(item) }), onMove && (_jsx(MoveMenu, { id: String(getId(item)), name: getName(item), value: getColumn(item), targets: targets, onMove: (value) => move(String(getId(item)), value, 'menu') }))] }) }, getId(item)))), cards.length === 0 && (_jsx("p", { className: "px-1 py-6 text-center type-caption text-muted-foreground", children: column.empty ?? 'Nothing here' })), column.footer && _jsx("div", { className: "px-1 type-caption text-muted-foreground", children: column.footer })] }, column.value));
             }), _jsx("span", { role: "status", className: "sr-only", children: announcement })] }));
 }
 function BoardColumnView({ column, count, headingLevel, onDrop, children, }) {

package/dist/components/app/data-table.js

@@ -559,7 +559,7 @@ function GroupLabel({ run, icon, isFolded, onToggle, }) {
     return (_jsxs("button", { type: "button", "aria-expanded": !isFolded, onClick: onToggle, className: GROUP_TOGGLE_CLASS, children: [_jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn('size-4 self-center text-muted-foreground transition-transform', isFolded && '-rotate-90') }), label, _jsx("span", { className: "type-caption text-muted-foreground tabular-nums", children: run.rows.length })] }));
 }
 function Cards({ layout, runs, rows, folded, onToggleFold, groupSummary, groupIcons, }) {
-    const list = (items) => (_jsx("ul", { role: "list", className: cn(layout.arrange === 'list' ? CARD_LIST_CLASS : ['grid', CARD_GRID_CLASS[layout.size ?? 'md'], CARD_GRID_GAP_CLASS]), children: items.map((row) => (_jsx("li", { "data-slot": "data-table-card", className: "min-w-0", children: layout.renderCard(row.original) }, row.id))) }));
+    const list = (items) => (_jsx("ul", { role: "list", className: cn(layout.arrange === 'list' ? CARD_LIST_CLASS : ['grid', CARD_GRID_CLASS[layout.size ?? 'md'], CARD_GRID_GAP_CLASS]), children: items.map((row) => (_jsx("li", { "data-slot": "data-table-card", className: "min-w-0 *:data-[slot=card]:glow-edge", children: layout.renderCard(row.original) }, row.id))) }));
     return (_jsx("div", { className: "@container/data-table-cards flex flex-col gap-6", "data-state": "success", "data-slot": "data-table-cards", children: runs
             ? runs.map((run, runIndex) => {
                 const isFolded = folded.has(run.key);

package/dist/components/app/foundation-providers.d.ts

@@ -1,7 +1,8 @@
 import { type QueryClient } from '@tanstack/react-query';
 import { type ReactNode } from 'react';
+import type { PaletteName } from '../../lib/palettes.js';
 import { type ErrorReportingOptions } from '../../error-reporting/reporter.js';
-export declare function FoundationProviders({ mockMode, queryClient, errorReporting, children, }: {
+export declare function FoundationProviders({ mockMode, queryClient, errorReporting, palette, palettePicker, children, }: {
     /** Whether the API is served by MSW — the app's own IS_MOCK_MODE. */
     mockMode: boolean;
     /** Defaults to createQueryClient(); pass one to share it with code outside React. */
@@ -13,5 +14,17 @@ export declare function FoundationProviders({ mockMode, queryClient, errorReport
      * report holds and never holds. `{ release }` names the build.
      */
     errorReporting?: boolean | ErrorReportingOptions;
+    /**
+     * The app's palette (design-language.md "Palettes"). With one, the app
+     * is always dark in that palette and the shell has no light/dark
+     * toggle; printed notes still print light. Without, light and dark
+     * follow the system, as before.
+     */
+    palette?: PaletteName;
+    /**
+     * With `palette`: the shell offers all four palettes, and the one picked
+     * is remembered on this device. A new device starts on `palette`.
+     */
+    palettePicker?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/app/foundation-providers.js

@@ -5,20 +5,21 @@ import { createQueryClient } from '../../api/query-client.js';
 import { AuthProvider } from '../../auth/use-auth.js';
 import { MockModeBanner } from './mock-mode-banner.js';
 import { ThemeProvider } from '../theme-provider.js';
+import { PaletteProvider } from './palette-provider.js';
 import { ErrorReportingProvider } from '../../error-reporting/error-reporting-provider.js';
 import { resolveErrorReporting } from '../../error-reporting/reporter.js';
 import { browserStaleChunkReload } from '../../lib/stale-chunk-reload.js';
 // Everything an app's root needs around its router, in the order that
-// works: the theme outermost, the mock-mode banner above the router so it
+// works: the theme outermost (and the palette, which forces it dark), the mock-mode banner above the router so it
 // shows on every route (/login included), and AuthProvider inside
 // QueryClientProvider because it queries /auth/me through TanStack Query.
 // An app's DataEnvironmentBanner goes first among the children, before its
 // router: it queries too, and shows on every route like the mock banner.
 // It also reloads the page once when a lazy chunk is gone after a deploy
 // (lib/stale-chunk-reload.ts), so no app adds its own listener.
-export function FoundationProviders({ mockMode, queryClient, errorReporting, children, }) {
+export function FoundationProviders({ mockMode, queryClient, errorReporting, palette, palettePicker = false, children, }) {
     const [client] = useState(() => queryClient ?? createQueryClient());
     const reporting = resolveErrorReporting(errorReporting);
     useEffect(() => browserStaleChunkReload().install(window), []);
-    return (_jsxs(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: [_jsx(MockModeBanner, { active: mockMode }), _jsx(QueryClientProvider, { client: client, children: _jsx(AuthProvider, { children: reporting ? _jsx(ErrorReportingProvider, { options: reporting, children: children }) : children }) })] }));
+    return (_jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, forcedTheme: palette ? 'dark' : undefined, children: _jsxs(PaletteProvider, { palette: palette, picker: palettePicker, children: [_jsx(MockModeBanner, { active: mockMode }), _jsx(QueryClientProvider, { client: client, children: _jsx(AuthProvider, { children: reporting ? _jsx(ErrorReportingProvider, { options: reporting, children: children }) : children }) })] }) }));
 }

package/dist/components/app/module-card.js

@@ -113,7 +113,7 @@ export function ModuleCard({ title, icon: Icon, category, to, href, value, note,
         'data-slot': 'module-card-band',
         className: cn(BAND_LINK_CLASS, category && BAND_CLASS[category]),
     };
-    const card = (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('relative h-full min-w-0 gap-0 py-0', mobile === 'row' && 'max-md:hidden', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
+    const card = (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('glow-edge relative h-full min-w-0 gap-0 py-0', mobile === 'row' && 'max-md:hidden', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
                 (action.href !== undefined ? (_jsxs("a", { href: action.href, target: "_blank", rel: "noreferrer", "aria-describedby": titleId, className: ACTION_CLASS, children: [_jsx("span", { className: "truncate", children: action.label }), _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: action.to, "aria-describedby": titleId, className: ACTION_CLASS, children: _jsx("span", { className: "truncate", children: action.label }) })))] }));
     if (mobile === 'tiles')
         return card;

package/dist/components/app/palette-provider.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type PaletteName, type PaletteStore } from '../../lib/palettes.js';
+/**
+ * Puts the palette on <html>. FoundationProviders renders it; an app
+ * doesn't. Without `palette` it does nothing, and the app keeps light and
+ * dark.
+ */
+export declare function PaletteProvider({ palette: defaultPalette, picker, store, children, }: {
+    palette?: PaletteName;
+    picker?: boolean;
+    /** For tests; the browser's localStorage by default. */
+    store?: PaletteStore;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/app/palette-provider.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo, useSyncExternalStore } from 'react';
+import { PaletteContext } from '../../hooks/use-palette.js';
+import { browserPaletteStore, subscribeToBrowserPaletteStore } from '../../lib/palettes.js';
+/**
+ * Puts the palette on <html>. FoundationProviders renders it; an app
+ * doesn't. Without `palette` it does nothing, and the app keeps light and
+ * dark.
+ */
+export function PaletteProvider({ palette: defaultPalette, picker = false, store = browserPaletteStore, children, }) {
+    const subscribe = useCallback((listener) => (store === browserPaletteStore ? subscribeToBrowserPaletteStore(listener) : store.subscribe(listener)), [store]);
+    const saved = useSyncExternalStore(subscribe, store.get, () => null);
+    const palette = defaultPalette ? ((picker && saved) || defaultPalette) : null;
+    // Before paint, so the first frame is already in the palette.
+    useLayoutEffect(() => {
+        const root = document.documentElement;
+        if (palette)
+            root.dataset.palette = palette;
+        else
+            delete root.dataset.palette;
+        return () => {
+            delete root.dataset.palette;
+        };
+    }, [palette]);
+    const value = useMemo(() => ({
+        palette,
+        defaultPalette: defaultPalette ?? null,
+        picker: Boolean(defaultPalette && picker),
+        setPalette: (next) => {
+            if (defaultPalette && picker)
+                store.set(next);
+        },
+    }), [palette, defaultPalette, picker, store]);
+    return _jsx(PaletteContext.Provider, { value: value, children: children });
+}

package/dist/components/app/widget-card.js

@@ -90,7 +90,7 @@ export function WidgetCard({ id, title, icon: Icon, headingLevel = 2, link, isLo
             return;
         toggle();
     };
-    return (_jsx("section", { id: id, "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, "data-collapsed": collapsed || undefined, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { onClick: onHeaderClick, className: cn('flex items-center justify-between gap-3', inAccordion && 'cursor-pointer select-none'), children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), (link || foldable || summaryShown) && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [summaryShown && (_jsx("span", { id: summaryId, "data-slot": "widget-card-summary", className: "mr-2 flex items-center", children: _jsx(WidgetCardSummary, { state: state, summary: summary, emptySummary: emptySummary }) })), link?.href !== undefined ? (_jsxs("a", { href: link.href, target: "_blank", rel: "noreferrer", "aria-describedby": headingId, className: cn(HEADER_LINK_CLASS, 'inline-flex items-center gap-1'), children: [link.label, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })) : (link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label }))), foldable && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-labelledby": headingId, "aria-describedby": summaryShown ? summaryId : undefined, "aria-expanded": !collapsed, "aria-controls": contentId, onClick: toggle, 
+    return (_jsx("section", { id: id, "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, "data-collapsed": collapsed || undefined, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "glow-edge density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { onClick: onHeaderClick, className: cn('flex items-center justify-between gap-3', inAccordion && 'cursor-pointer select-none'), children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), (link || foldable || summaryShown) && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [summaryShown && (_jsx("span", { id: summaryId, "data-slot": "widget-card-summary", className: "mr-2 flex items-center", children: _jsx(WidgetCardSummary, { state: state, summary: summary, emptySummary: emptySummary }) })), link?.href !== undefined ? (_jsxs("a", { href: link.href, target: "_blank", rel: "noreferrer", "aria-describedby": headingId, className: cn(HEADER_LINK_CLASS, 'inline-flex items-center gap-1'), children: [link.label, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })) : (link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label }))), foldable && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-labelledby": headingId, "aria-describedby": summaryShown ? summaryId : undefined, "aria-expanded": !collapsed, "aria-controls": contentId, onClick: toggle, 
                                     // The button's own open look (a filled background) would
                                     // read as pressed: the chevron says it.
                                     className: "-my-1 -mr-1.5 aria-expanded:not-hover:bg-transparent", children: _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn('transition-transform', collapsed && '-rotate-90') }) }))] }))] }), _jsx(CardContent, { id: contentId, hidden: collapsed, "aria-busy": state === 'loading' || undefined, children: error ? (_jsx(ErrorState, { error: error, onRetry: onRetry, size: "compact" })) : state === 'loading' ? (_jsx(WidgetListSkeleton, { rows: skeletonRows })) : state === 'empty' ? (_jsx("p", { "data-state": "empty", className: "py-2 type-body text-muted-foreground", children: emptyMessage })) : (children) })] }) }));
@@ -127,7 +127,7 @@ const ROW_CLASS = 'flex min-h-9 items-center gap-3 py-2 density-compact:min-h-8
 // Varied widths, so the skeleton reads as a list of titles, not a grid.
 const SKELETON_WIDTHS = ['w-3/5', 'w-2/5', 'w-1/2', 'w-2/3', 'w-1/3', 'w-3/5'];
 function WidgetListSkeleton({ rows }) {
-    return (_jsxs("div", { "data-state": "loading", className: "flex flex-col divide-y divide-border", children: [_jsx("span", { className: "sr-only", children: "Loading" }), Array.from({ length: rows }, (_, row) => (_jsxs("div", { className: ROW_CLASS, children: [_jsx(Skeleton, { className: cn('h-4', SKELETON_WIDTHS[row % SKELETON_WIDTHS.length]) }), _jsx(Skeleton, { className: "ml-auto h-4 w-12" })] }, row)))] }));
+    return (_jsxs("div", { "data-state": "loading", className: "flex flex-col divide-y divide-border", children: [_jsx("span", { className: "sr-only", children: "Loading" }), Array.from({ length: rows }, (_, row) => (_jsxs("div", { className: cn(ROW_CLASS, 'type-body'), children: [_jsx("span", { "aria-hidden": "true", className: "-mr-3 w-0 overflow-hidden", children: "\u00A0" }), _jsx(Skeleton, { className: cn('h-4', SKELETON_WIDTHS[row % SKELETON_WIDTHS.length]) }), _jsx(Skeleton, { className: "ml-auto h-4 w-12" })] }, row)))] }));
 }
 /** The rows of a WidgetCard: a list with a divider between rows. */
 export function WidgetList({ children, className }) {

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "success" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "warning" | "info" | "outline-success" | "outline-warning" | "outline-info" | "outline-destructive" | "tinted-success" | "tinted-warning" | "tinted-info" | "tinted-destructive" | null | undefined;
+    variant?: "link" | "success" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "solid" | "warning" | "info" | "outline-success" | "outline-warning" | "outline-info" | "outline-destructive" | "tinted-success" | "tinted-warning" | "tinted-info" | "tinted-destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -5,7 +5,10 @@ import { cn } from "cn";
 const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            // The default is a soft tint of the accent (the shared style
+            // guide's badge); `solid` is the old filled look.
+            default: "bg-primary/12 text-foreground dark:bg-primary/20 dark:text-link [a]:hover:bg-primary/20",
+            solid: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
             secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
             destructive: "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/90",
             success: "bg-success text-success-foreground focus-visible:ring-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success/90",
@@ -30,7 +33,7 @@ const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-cent
             "tinted-info": "bg-info/15 text-info-text dark:bg-info/20",
             "tinted-destructive": "bg-destructive/15 text-destructive-text dark:bg-destructive/20",
             ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-            link: "text-primary underline-offset-4 hover:underline",
+            link: "text-link underline-offset-4 hover:underline",
         },
     },
     defaultVariants: {

package/dist/components/ui/button.js

@@ -2,25 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 motion-safe:active:not-aria-[haspopup]:scale-96 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/80",
+            default: "bg-primary text-primary-foreground hover:bg-primary/80 palette:hover:shadow-(--primary-glow) palette:focus-visible:shadow-(--primary-glow) palette:active:shadow-(--primary-glow)",
             outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
             secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
             ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
             destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-            link: "text-primary underline-offset-4 hover:underline",
+            link: "text-link underline-offset-4 hover:underline",
         },
         size: {
-            default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            default: "h-9 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
             xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-(length:--control-text-sm) in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-            icon: "size-8",
+            sm: "h-8 gap-1 rounded-[min(var(--radius-md),12px)] px-3 text-(length:--control-text-sm) in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-10 gap-1.5 px-5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+            icon: "size-9",
             "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-            "icon-lg": "size-9",
+            "icon-sm": "size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+            "icon-lg": "size-10",
         },
     },
     defaultVariants: {
@@ -29,6 +29,6 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
     },
 });
 function Button({ className, variant = "default", size = "default", ...props }) {
-    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", "data-variant": variant, className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
 export { Button, buttonVariants };

package/dist/components/ui/card.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "cn";
 function Card({ className, size = "default", ...props }) {
-    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-gap) overflow-hidden rounded-lg bg-card py-(--card-spacing) text-sm text-card-foreground shadow-(--card-shadow) ring-1 ring-border [--card-gap:--spacing(3.5)] [--card-spacing:--spacing(4)] has-[>[data-slot=card-header]:first-child]:pt-0 has-[>[data-slot=card-header]:last-child]:pb-0 data-[size=sm]:[--card-gap:--spacing(3)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", className), ...props }));
 }
 function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing) first:border-b first:border-border first:bg-card-header first:py-[calc(var(--card-spacing)*0.75)] last:border-b-0", className), ...props }));
 }
 function CardTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
@@ -20,6 +20,6 @@ function CardContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
 }
 function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
 }
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/checkbox.js

@@ -3,6 +3,6 @@ import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { cn } from "cn";
 import { CheckIcon } from "lucide-react";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4.5 shrink-0 items-center justify-center rounded-[5px] border border-input transition-[color,background-color,border-color,box-shadow,transform] outline-none motion-safe:active:scale-85 group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
 }
 export { Checkbox };

package/dist/components/ui/combobox.js

@@ -44,7 +44,7 @@ function ComboboxSeparator({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
 }
 function ComboboxChips({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-9 flex-wrap items-center gap-1 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
 }
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
     return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove

package/dist/components/ui/dialog.js

@@ -17,7 +17,7 @@ function DialogClose({ ...props }) {
     return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
+    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm dark:bg-black/40 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
     return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));

package/dist/components/ui/input-group.js

@@ -6,7 +6,7 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 function InputGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
 }
 const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
     variants: {