@kennycorrea/ui 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.10.0 — 2026-10-19
+
+### Added
+- **`NotificationCard`** — a persistent rich toast in a viewport corner: icon, title,
+  description, collapsible body and actions; controlled or uncontrolled; `onDismiss(reason)`;
+  non-modal, Escape only while focused; a labelled `section`, not a live region.
+
+### Changed
+- **`Drawer` never portals to `<body>`.** Without a `<Theme>` above it, it renders in place;
+  inside one, its portal is wrapped in a nested `<Theme>` so it keeps the appearance.
+- README rewritten as a generic presentation of the library.
+
 ## 0.9.1 — 2026-10-18
 
 ### Fixed

package/README.md

@@ -1,350 +1,196 @@
 # @kennycorrea/ui
 
-Upfront's house component layer: the atoms over Radix Themes, the token bridge, and the accent
-logic. Shared by the dashboard (`upfront-web-app`), the marketing site (`upfront-web-site`) and
-the admin app (`upfront-admin`).
-
-**The product brief, the roadmap and every design document live in the `upfront` repository**,
-not here. This file covers only what is true about this package.
-
-## Why it exists
-
-Two apps said `variant="secondary"` and `text-ink-muted`, and each carried its own copy of what
-those meant. `docs/ecosystem.md` in the product repository called starting a third app the
-trigger, and this is the trigger being pulled.
-
-**The drift, measured rather than assumed.** It was real, and it was concentrated in the
-components rather than the colours:
-
-| | dashboard | site | visible? |
-| --- | --- | --- | --- |
-| `Button` `secondary` | Themes' `soft` | Themes' `surface` | **yes** |
-| `danger` variant | yes | absent | **yes** |
-| sizes | `sm`/`md`/`lg` | raw Themes `1`–`4` | **yes** |
-| `href` prop | absent | yes | **yes** |
-| `--font-sans` | `'Inter', …` | `ui-sans-serif, …` | no — neither app loads Inter |
-| `--color-ink` fallback | `#1d3b31` | `#1a211f` | only if Radix's CSS fails to load |
-| `--color-hairline` fallback | 12% | 10% | same |
-
-The `.radix-themes` blocks — the *live* colour assignments — had been kept in step by hand and
-agreed. It was the `@theme` fallbacks underneath them that had not, which is drift that is real
-and invisible: the least urgent kind and the easiest to leave lying around for years.
-
-So the honest case for this package is the component API, not the palette.
-
-## The Button disagreement, resolved
-
-**`secondary` now means exactly one thing: Themes' `soft`.** The site's bordered, translucent
-look is still available and is called **`outline`**.
-
-Making one of them simply win would have been a decision about the word rather than about the
-need — the site wants the bordered button because it sits over a dark hero, and the dashboard
-wants the tinted one because it sits on a panel. Both needs are real; only the name was
-ambiguous.
-
-The package's `Button` is the superset: `loading`, `fullWidth`, ref forwarding and `danger` from
-the dashboard, `href` from the site. Nothing was dropped.
-
-## Using it
-
-```ts
-import { Button, Card, Select, UiStringsProvider } from '@kennycorrea/ui';
+A small React + TypeScript component library built on top of
+[Radix Themes](https://www.radix-ui.com/themes). It wraps Radix's components in a consistent,
+opinionated API, adds a few components Radix does not ship, and bridges Radix's design tokens to
+Tailwind utilities.
+
+- **Atoms** — `Button`, `Input`, `Select`, `Checkbox`, `Switch`, `Slider`, `Dialog`, `Drawer`,
+  `Popover`, `Tooltip`, `Toast`, `NotificationCard`, `RichText` and more.
+- **Primitives** — Radix Themes' layout and typography components, re-exported.
+- **Tokens** — `tokens.css` maps Radix Themes variables to Tailwind colour utilities.
+- **Theming** — light/dark/system appearance and a configurable accent list.
+- **No words of its own** — the few strings components need come from `UiStringsProvider`.
+
+## Install
+
+```bash
+npm install @kennycorrea/ui @radix-ui/themes react react-dom
 ```
 
-And in the app's own `index.css`:
+In your stylesheet:
 
 ```css
 @import 'tailwindcss';
 @source '../node_modules/@kennycorrea/ui/dist';
+@import '@radix-ui/themes/styles.css';
 @import '@kennycorrea/ui/tokens.css';
 ```
 
-⚠ **The `@source` line is not optional.** Tailwind does not scan `node_modules`, so without it
-every utility class used *inside* the atoms — `w-full`, `inline-flex` — is missing from the
-generated CSS. The components come out subtly unstyled and nothing appears in the console.
-
-### Colour scales — required
+The `@source` line matters: Tailwind does not scan `node_modules`, so without it the utility
+classes used inside the components are missing from the generated CSS.
 
-The atoms name five Radix scales: **gray**, **jade** (`Badge` success, `Toast` success),
-**amber** (warning), **red** (danger/error) and **blue** (`Toast`/`Alert` info). If the app
-imports Radix Themes piecemeal rather than the whole `@radix-ui/themes/styles.css`, every one of
-them must be imported, **after `base.css`** as Radix documents it, plus the app's own accent:
+Wrap the app in Radix's `<Theme>` and, optionally, `UiStringsProvider`:
 
-```css
-@import '@radix-ui/themes/tokens/base.css';
-@import '@radix-ui/themes/tokens/colors/gray.css';
-@import '@radix-ui/themes/tokens/colors/jade.css';
-@import '@radix-ui/themes/tokens/colors/amber.css';
-@import '@radix-ui/themes/tokens/colors/red.css';
-@import '@radix-ui/themes/tokens/colors/blue.css';
-/* …the accent the app offers, if not one of the above */
-@import '@radix-ui/themes/components.css';
-@import '@radix-ui/themes/utilities.css';
+```tsx
+import { Theme } from '@radix-ui/themes';
+import { Button, UiStringsProvider } from '@kennycorrea/ui';
+
+<Theme appearance="dark" accentColor="teal">
+  <UiStringsProvider strings={{ close: 'Fechar', expand: 'Expandir', collapse: 'Recolher' }}>
+    <Button>Save</Button>
+  </UiStringsProvider>
+</Theme>;
 ```
 
-A missing scale is not an error to CSS — the variables are just undefined, and badges and toasts
-render colourless. Since 0.8.1 the first `Badge` or `Toaster` to mount checks for them and
-`console.warn`s the missing imports by name, outside production builds.
+### Colour scales
 
-## Theming — 0.2.0
+If you import Radix Themes piecemeal instead of `styles.css`, import **gray**, **jade**, **amber**,
+**red** and **blue** (used by status variants) plus your accent, after `base.css`. A missing scale
+is not a CSS error — the variables are just undefined — so in development the first `Badge` or
+`Toaster` to mount warns about missing scales in the console.
 
-**A product configures its own accents, default and storage namespace.** Until 0.2.0 all three
-were hardcoded to the first app that used this package: the fallback accent was jade, the accent
-list was six fixed colours, and preferences were stored under `upfront.theme` / `upfront.accent`.
+## Theming
 
 ```ts
-// Once, in the app.
+import { createTheming, applyTheme } from '@kennycorrea/ui';
+
 export const theming = createTheming({
   accents: ['teal', 'crimson'],
-  defaultAccent: 'teal',
-  storagePrefix: 'myapp',
+  defaultAccent: 'teal', // must be one of `accents` — a type error otherwise
+  storagePrefix: 'myapp', // required: namespaces stored preferences
 });
 
 theming.readAccent(); // 'teal' | 'crimson'
 ```
 
-Any Radix accent name works, and a product with one brand colour passes one. The list is the
-order a picker should render.
-
-**`defaultAccent` is typed as a member of `accents`**, so naming one that is not on the list is
-`TS2322` rather than a colourless first paint — verified by compiling the mistake.
-
-**The literal array needs no `as const`**; the `const` type parameter infers the tuple. A list
-declared separately does, because `const list = ['teal']` widens to `string[]` and is rejected.
-
-⚠ **`storagePrefix` is required and has no default.** A default would be one product's name
-silently storing another's preferences, and because separate origins never collide, nothing would
-ever reveal it.
-
-⚠ **Every accent needs its Radix colour scale imported** in the app's `main.tsx` — see Colour
-scales below. A missing scale is not an error; it is a colourless app.
-
-**A factory, not a `configure()` call.** Module-level mutable state would have to be written
-before the first read, making correctness depend on import order — the same class of silent bug as
-the CSS import order this package already has to warn about. An instance cannot be read before it
-is made.
-
-`applyTheme` stays a free function, because `data-theme` is the contract between it and
-`tokens.css` rather than a preference: two apps disagreeing about the attribute name would each
-need their own stylesheet.
-
-### What still works unchanged
-
-`readTheme`, `storeTheme`, `readAccent` and `storeAccent` are still exported as free functions,
-bound to an instance with the six default accents, jade, and the `upfront.*` keys. **One
-implementation, not two** — they are literally a pre-made instance, so no call site had to change
-and nobody who already picked a theme loses it. `ACCENTS` remains as a deprecated alias for
-`DEFAULT_ACCENTS`, the same array.
-
-A new product should call `createTheming` with its own name rather than inherit those.
-
-## What is deliberately not here
-
-- **Dictionaries.** Words belong to an app. The two strings the atoms say on their own behalf —
-  a standing spinner's label and an empty select's placeholder — come from `UiStringsProvider`,
-  which each app feeds from its own dictionary. Defaults are English so a host that forgets to
-  wrap gets something legible rather than something wrong.
-- **Auth, stores, API clients.** Same reason, and they were never shared.
-- **`ACCENT_LABELS`.** The accent *list* is structure and lives here; what each one is called is
-  words and does not.
-- **Molecules and organisms.** `FormField`, `ConfirmDialog` and the rest stay in the dashboard
-  until a second app wants one. Moving a component here should be a response to a second
-  consumer, not an anticipation of one.
+Every accent you offer needs its Radix colour scale imported.
 
-## Colour scales
+### Dark mode and portals
 
-Each app imports only the Radix colour scales it uses, in `main.tsx`, and **the import order is
-load-bearing** — scales define `--gray-*` literally and `base.css` remaps it onto the chosen
-`grayColor`, so `base.css` must come last. Adding an accent to `ACCENTS` means adding its scale
-in every app that offers it, or it resolves to nothing.
+Radix Themes defines its colour variables (`--color-panel-solid`, `--gray-*`, `--accent-*`, …)
+only on and under the `.radix-themes` element that `<Theme>` renders, and switches light/dark
+with a `.light`/`.dark` class on that element. **Anything rendered outside it gets light colours,
+or none, whatever appearance the app is in.**
 
-## ⚠ 0.1.0 was broken for any Node consumer
+So no component in this library portals to `document.body`. Floating components (`Drawer`,
+`NotificationCard`) portal into the nearest `.radix-themes` ancestor, wrapped in a nested
+`<Theme>` that inherits appearance and accent — or into a `container` you pass — and render in
+place when there is no Theme above them. Their colours, borders and shadows use only theme
+variables: the appearance is whatever `<Theme>` says, never `prefers-color-scheme`.
 
-**Fixed in 0.1.1.** The package compiled with `moduleResolution: bundler`, which leaves relative
-imports extensionless in the output — `export * from './atoms'`. Vite resolves that happily, so
-every build passed and the linked `file:../ui` setup never complained. **Node does not support
-directory imports**, so the moment the package was installed from the registry it failed:
+Do the same in your own code: set appearance on `<Theme>`, not with a `dark` class on
+`<html>`/`<body>`.
 
-    Directory import '…/@kennycorrea/ui/dist/atoms' is not supported
-    resolving ES modules imported from …/@kennycorrea/ui/dist/index.js
+## Strings
 
-It surfaced in the dashboard's Vitest run, which resolves dependencies with Node semantics. A
-bundler-only consumer would never have noticed, which is why it shipped.
+Components never contain literal text. The handful they need — a spinner's label, a select's
+placeholder, close/expand/collapse names — come from `UiStringsProvider`, which takes a partial
+`UiStrings` object. Defaults are English. Most components also accept the label as a prop.
 
-The fix is the rule this project already applies in `api/`, whose own brief states it: **an
-explicit `.js` on every relative import**, and `/index.js` for a directory. `tsconfig.json` is now
-`moduleResolution: nodenext`, so `tsc` *refuses* the extensionless form — verified by putting one
-back and watching it error — rather than silently emitting it again.
+## Components
 
-⚠ **The lesson is about what "the build passes" is worth.** Three apps built, 46 tests passed and
-a browser check confirmed the styling, all while the package was unimportable by Node. Nothing was
-wrong with those checks; they simply all went through the same bundler. The first consumer with
-different resolution semantics found it immediately.
+### Toast
 
-## Releasing
+Mount `<Toaster />` once inside `<Theme>` and call `toast()` from anywhere.
 
-`npm run build` compiles to `dist/` with type declarations. The version in `package.json` is the
-contract: bump it, and bump the dependency in each consumer.
-
-**`files` in `package.json` is the published surface**: `dist`, `tokens.css` and this README.
-`src` is deliberately not in it — consumers import from `dist`, and shipping the TypeScript
-source as well would let an app import a path that bypasses the build and the types.
-
-`prepublishOnly` runs the build, so `npm publish` cannot ship a stale `dist` — which would
-otherwise publish silently, with a version number that says nothing about it. `dist/` is
-gitignored and present in the tarball, which is the right way round: the build output is not
-worth reviewing in a diff and is worth shipping.
-
-**The scope is `@kennycorrea` on npm.** `upfront` was not available, so the account was converted
-into an organisation. Settling that before the first publish rather than after was worth doing:
-the name is an import line in three apps, so renaming it was free today and would have cost a
-major version and three coordinated bumps after a release.
-
-GitHub Packages was the alternative and would have forced `@kennyrafael/ui`, because it requires
-the scope to match the repository owner. `publishConfig.access: "public"` is set, because a scoped
-package defaults to restricted and restricted needs a paid plan.
-
-### The publish workflow
-
-`.github/workflows/npm-publish.yml`: a `build` job that runs `npm test`, then `publish-npm`
-which needs it.
-
-⚠ **Pushing to `main` does not publish, and is not meant to.** The trigger is
-`release: [created]` — a GitHub *release*, which means a tag and a release object. A commit on
-`main` fires nothing and leaves no run in the Actions tab, which looks identical to a broken
-workflow. `workflow_dispatch` is also enabled, so the first publish and any retry can be run from
-the Actions tab without inventing a version to hang a release off.
-
-Two things that fail at the `npm publish` step rather than earlier, and are worth checking before
-blaming the workflow:
+```tsx
+<Toaster duration={5000} position="bottom-right" />
 
-- **The token must be a repository or organisation Actions secret**, not an account-level one.
-  GitHub's account-level secrets are for Codespaces; Actions reads repository, environment and
-  organisation secrets. The step references `secrets.npm_token`, and secret names are
-  case-insensitive, so `NPM_TOKEN` matches.
-- **It must be an npm _Automation_ token** (or a granular token with publish rights). A classic
-  *Publish* token fails with `EOTP` the moment the account or org requires 2FA for publishing,
-  because there is no one there to type a one-time password. That failure reads like a bad
-  credential and is not one.
+toast({ title: 'Saved' });
+toast.success({ title: 'Moved', description: 'Tue 14:30' });
+const id = toast.error({ title: 'Payment failed', duration: Infinity });
+toast.info({ title: 'Deleted', action: { label: 'Undo', onClick: restore } });
+toast.dismiss(id);
+```
 
-⚠ **`npm test` has to keep existing.** It is lint, a typecheck and (since 0.5.0) the Vitest suite — and
-it is load-bearing for a reason that has nothing to do with quality:
-without a `test` script the `build` job fails on `Missing script: "test"`, `publish-npm` never
-runs because it needs `build`, and **the release publishes nothing while looking like it worked.**
-That was the state when the workflow was first added.
-
-### Where it is consumed from today
+### NotificationCard
 
-✅ **All three apps depend on a version from the registry**, as of 2026-09-30. The
-`file:../ui` arrangement is gone, and each app now builds on Vercel from its own repository.
+A persistent rich toast: it floats in a viewport corner and stays until it is closed.
 
-```jsonc
-// a new consumer
-"@kennycorrea/ui": "^0.2.0"
-
-// web, site and admin, still — see the note below
-"@kennycorrea/ui": "^0.1.1"
+```tsx
+import { Button, NotificationCard } from '@kennycorrea/ui';
+
+const [open, setOpen] = useState(true);
+
+<NotificationCard
+  position="bottom-right" // bottom-left | top-right | top-left
+  open={open}
+  onOpenChange={setOpen}
+  onDismiss={(reason) => track(reason)} // 'close-button' | 'escape' | 'programmatic'
+  icon={<AppIcon />}
+  title="Add this app to your computer"
+  description="Open it like any other app."
+  expandLabel="Show me how"
+  collapseLabel="Hide steps"
+  actions={<Button onClick={install}>Install</Button>}
+>
+  <ol>
+    <li>Open the browser menu</li>
+    <li>Choose "Install app"</li>
+  </ol>
+</NotificationCard>;
 ```
 
-⚠ **Never floor a range at 0.1.0** — its published output cannot be imported by Node. `^0.1.0`
-resolves correctly today because npm picks the newest match, but a range whose floor is unusable
-documents nothing and would let a lockfile built from scratch land back on it.
-
-⚠ **Under `0.x`, `^` does not cross a minor.** `^0.1.1` will **not** take 0.2.0, so moving a
-consumer onto the new theming API is a `package.json` change in each app, not just a lockfile
-refresh. The free functions still work, so an app that does not need `createTheming` can stay
-where it is — and the three existing apps deliberately do, for now. Moving them is a one-line
-change each plus a lockfile, worth doing to stop three consumers drifting a minor behind, and
-worth doing as its own commit rather than inside this one.
+- **Never auto-dismisses.** Controlled (`open`/`onOpenChange`) or uncontrolled (`defaultOpen`).
+- **Slots**: `icon`, `title`, `description`, `children` (collapsible body), `actions` (footer).
+- **Collapsible body** with a built-in toggle (`aria-expanded`/`aria-controls`), controlled
+  (`expanded`/`onExpandedChange`) or uncontrolled (`defaultExpanded`). Labels come from
+  `expandLabel`/`collapseLabel` or the `expand`/`collapse` strings.
+- **Close** button named by `closeLabel` or the `close` string. `onDismiss` reports why it
+  closed; a controlled `open` set to `false` by the host is `'programmatic'`.
+- **Non-modal**: no focus trap, the page stays interactive, and Escape closes it only while focus
+  is inside it.
+- **Quiet**: a `section` labelled by its title and described by its description — not
+  `role="alert"` or a live region, so it is not announced on every page load.
+- 16px from the corner, `min(24rem, 100vw - 2rem)` wide, above page content and below dialogs.
+  Enters and exits with a transform, switched off under `prefers-reduced-motion`.
+- Themed as described under [Dark mode and portals](#dark-mode-and-portals); pass `container`
+  to choose the portal target.
 
-⚠ **A `file:` install was a symlink; a version install is a copy.** Edits here no longer appear in
-a consumer. An app that needs an unreleased change wants `npm link` or a temporary `file:`
-override — never a copied file, which is the drift this package exists to end.
+Full example, in light and dark: `examples/NotificationCards.tsx`.
 
-## Toasts — 0.3.0
+### Drawer
 
-Mount `<Toaster />` once, inside `<Theme>`, and call `toast()` from anywhere — it is a factory
-over a module-level store, so each call stacks another toast and returns its id.
+A bottom sheet with `collapsed`/`expanded` snap points and a draggable handle.
 
 ```tsx
-<Toaster duration={5000} position="bottom-right" />
+// Non-modal: floating banner, page stays usable.
+<Drawer mode="non-modal" title="Get started" peek={<p>Swipe up.</p>}
+  footer={<Button>Start</Button>}>
+  <ol>…</ol>
+</Drawer>
 
-toast({ title: 'Saved' });                                    // info by default
-toast.success({ title: 'Booking moved', description: 'Tue 14:30' });
-toast.warning({ title: 'Close to the IVA ceiling', duration: 10_000 });
-const id = toast.error({ title: 'Payment failed', duration: Infinity });
-toast.info({ title: 'Cancelled', action: { label: 'Undo', onClick: restore } });
-toast.dismiss(id); // or toast.dismiss() for all
+// Modal: scrim, focus trapped, page inert; Escape and the scrim close it.
+<Drawer open={open} onOpenChange={setOpen} defaultSnap="expanded" title="New item"
+  showCloseButton>
+  <form>…</form>
+</Drawer>
 ```
 
-`duration` overrides the `Toaster` default per toast. An action closes the toast after its
-`onClick` unless `keepOpen` is set. Passing an existing `id` replaces that toast in place.
-The close button's name comes from `UiStrings.dismiss`, so feed it through `UiStringsProvider`.
+Snap and open state are controllable (`snap`/`onSnapChange`, `open`/`onOpenChange`). The handle
+is a real button with `aria-expanded`. Example: `examples/Drawers.tsx`.
 
-## Slider — 0.4.0
+### Slider
 
-A thin wrap of Radix Themes' `Slider` at size `2`, like the other atoms. `label` is required and
-becomes the `aria-label`, because a slider has no visible text of its own.
+`label` is required and becomes the `aria-label`. Values are arrays, one per thumb.
+`fillFrom` fills from a value to the thumb; `marks` adds labelled ticks.
 
 ```tsx
-<Slider label="Reminder lead time (hours)" min={1} max={48} step={1}
-  value={[hours]} onValueChange={([h]) => setHours(h)} />
-<Slider label="Price range" defaultValue={[10, 60]} min={0} max={200} /> // two thumbs = range
+<Slider label="Lead time (hours)" min={1} max={48} value={[h]} onValueChange={([v]) => setH(v)} />
+<Slider label="Cycle" min={0} max={29} value={day} onValueChange={setDay} fillFrom={16}
+  marks={[0, 16, 29].map((value) => ({ value, label: String(value) }))} />
 ```
 
-Values are arrays, as in Radix: one entry per thumb.
-
-## Slider fill origin and marks — 0.5.0
+## Development
 
-```tsx
-const marks = [0, 6, 11, 16, 22, 29].map((value) => ({ value, label: String(value) }));
-<Slider label="Budget cycle" min={0} max={29} value={day} onValueChange={setDay}
-  fillFrom={16} marks={marks} />
+```bash
+npm test
 ```
 
-`fillFrom` fills from that value to the thumb, either way. Themes' slider cannot place its
-range, so with `fillFrom` the atom is built on `@radix-ui/react-slider` and styled by
-`.ui-slider*` in `tokens.css` from Themes' public tokens — no `.rt-*` class is touched.
-Without it, nothing changed. Limits and details: [CHANGELOG.md](CHANGELOG.md); a full example
-is in `examples/BudgetCycleSlider.tsx`.
-
-⚠ `--ui-slider-thumb-size` mirrors Themes' size-2 thumb (`--space-2 + --space-1`). The fill
-and the marks are placed from it, so if Themes ever resizes its thumb, change it there.
-
-## Drawer — bottom sheet
-
-A sheet anchored to the bottom of the viewport: full width on phones, `max-w-lg` and centred
-above that (`maxWidthClassName` to change it), safe-area aware, themed from the house tokens.
-
-```tsx
-// Non-modal: a floating banner, the page stays usable, no focus trap.
-<Drawer mode="non-modal" title="Take deposits" peek={<p>Swipe up to see how.</p>}
-  footer={<Button>Get started</Button>}>
-  <ol>…steps…</ol>
-</Drawer>
-
-// Modal: scrim, focus trapped, page inert, Escape and the scrim close it.
-<Drawer open={open} onOpenChange={setOpen} defaultSnap="expanded" title="New client"
-  showCloseButton footer={<Button type="submit" form="f">Save</Button>}>
-  <form id="f">…</form>
-</Drawer>
-```
+runs lint (Biome), a typecheck and the Vitest suite (jsdom + Testing Library). `npm run build`
+compiles to `dist/`. Relative imports carry an explicit `.js` extension so the output works
+under Node's ESM resolution as well as bundlers.
 
-- **Snap points** `collapsed` (header + `peek`) and `expanded` (body, scrolls inside, up to
-  80vh). Controlled with `snap`/`onSnapChange`, or uncontrolled from `defaultSnap`; likewise
-  `open`/`onOpenChange`/`defaultOpen`.
-- **Drag** the header with touch or mouse: it follows the pointer, then settles past 60px or a
-  flick faster than 0.5px/ms. Down from collapsed closes when `dismissible` (the default).
-  A drag from inside the body counts only when the body is scrolled to the top and moving down.
-- **The handle is a real button** with `aria-expanded`/`aria-controls`, so keyboard and screen
-  reader users toggle it the same way.
-- **No words of its own.** The handle and close button names come from `expandLabel`,
-  `collapseLabel` and `closeLabel`, or the new `expand`, `collapse` and `close` keys of
-  `UiStringsProvider`.
-- Motion is a CSS transform, switched off under `prefers-reduced-motion`.
-
-It portals into the nearest `<Theme>` so it inherits the appearance and accent, falling back to
-`<body>`; `container` overrides that.
-
-Built by hand rather than on Radix Dialog because the non-modal half must not do what Dialog
-does to the rest of the page. Both examples are in `examples/Drawers.tsx`.
+Publishing happens from the GitHub workflow on a release; `prepublishOnly` rebuilds `dist`.
+Changes are listed in [CHANGELOG.md](CHANGELOG.md).

package/dist/atoms/Drawer/Drawer.d.ts

@@ -43,7 +43,7 @@ export interface DrawerProps {
     /** Caps the width on wider screens. Default `max-w-lg`; pass `max-w-none` for full width. */
     maxWidthClassName?: string;
     className?: string;
-    /** Where the portal mounts. Default: the nearest `<Theme>` (`.radix-themes`), else `document.body`. */
+    /** Where the portal mounts. Default: the nearest `<Theme>` (`.radix-themes`), else rendered in place. */
     container?: HTMLElement | null;
 }
 /**

package/dist/atoms/Drawer/Drawer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
+import { useCallback, useEffect, useId, useRef, useState, } from 'react';
 import { useUiStrings } from '../../strings.js';
 import { cn } from '../../utils/cn.js';
+import { ThemePortal, useThemePortalTarget } from '../../utils/themePortal.js';
 /** Pixels of travel that commit a drag regardless of speed. */
 const DISTANCE = 60;
 /** Pixels per millisecond that commit a flick regardless of distance. */
@@ -55,16 +55,12 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
     }, [setOpen, onClose]);
     // Portal into the nearest <Theme> so the sheet inherits its appearance, accent and tokens;
     // a portal under <body> would sit outside `.radix-themes`, where none of them are defined.
-    const anchorRef = useRef(null);
-    const [themeRoot, setThemeRoot] = useState(null);
-    useLayoutEffect(() => {
-        setThemeRoot(anchorRef.current?.closest('.radix-themes') ?? document.body);
-    }, []);
-    const target = container ?? themeRoot;
+    // With no Theme above it the sheet renders in place rather than escaping to <body>.
+    const { anchorRef, target, resolved } = useThemePortalTarget(container);
     // Modal: everything else on the page goes inert, focus moves in, and comes back on close.
     useEffect(() => {
         // The wrapper only exists once the target is known, so wait for it.
-        if (!open || !modal || !target)
+        if (!open || !modal || !resolved)
             return;
         const wrapper = wrapperRef.current;
         const previous = document.activeElement;
@@ -87,7 +83,7 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
                 el.removeAttribute('inert');
             previous?.focus?.();
         };
-    }, [open, modal, target]);
+    }, [open, modal, resolved]);
     useEffect(() => {
         if (!open || !modal || !dismissible)
             return;
@@ -189,13 +185,13 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
     };
     // A hidden marker stays in the React tree's DOM position, so the portal can find its Theme.
     const anchor = _jsx("span", { ref: anchorRef, hidden: true, "data-drawer-anchor": "" });
-    if (!open || !target)
+    if (!open || !resolved)
         return anchor;
     const dragHandlers = {
         onPointerMove: move,
         onPointerUp: end,
         onPointerCancel: cancel,
     };
-    return (_jsxs(_Fragment, { children: [anchor, createPortal(_jsxs("div", { ref: wrapperRef, "data-drawer-root": "", children: [modal ? (_jsx("div", { "data-testid": "drawer-scrim", "aria-hidden": "true", className: "fixed inset-0 z-40 bg-scrim", onClick: dismissible ? close : undefined })) : null, _jsxs("div", { ref: sheetRef, role: modal ? 'dialog' : 'region', "aria-modal": modal ? true : undefined, "aria-labelledby": titleId, "aria-describedby": description ? descId : undefined, tabIndex: -1, "data-snap": snap, "data-mode": mode, onKeyDown: trapTab, style: { transform: `translateY(${Math.max(offset, -40)}px)` }, className: cn('fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full flex-col', 'rounded-t-2xl border border-b-0 border-hairline bg-sheet text-ink shadow-2xl', 'pb-[env(safe-area-inset-bottom)] outline-none', !dragging &&
-                            'transition-transform duration-200 ease-out motion-reduce:transition-none', maxWidthClassName, className), children: [_jsxs("div", { className: "touch-none select-none px-5 pt-2", onPointerDown: (e) => begin(e, false), ...dragHandlers, children: [_jsx("button", { type: "button", "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": expanded ? (collapseLabel ?? strings.collapse) : (expandLabel ?? strings.expand), onClick: onHandleClick, className: "mx-auto flex h-6 w-16 cursor-grab items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-brand-700 active:cursor-grabbing", children: _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-10 rounded-full bg-hairline" }) }), _jsxs("div", { className: "flex items-start gap-3 pb-3 pt-1", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "m-0 text-base font-medium text-brand-900", children: title }), description ? (_jsx("p", { id: descId, className: "m-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), showCloseButton && dismissible ? (_jsx("button", { type: "button", "aria-label": closeLabel ?? strings.close, onClick: close, className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-full text-ink-muted hover:bg-brand-700/8 focus-visible:outline-2 focus-visible:outline-brand-700", children: _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.5 3.5l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })) : null] })] }), !expanded && peek ? _jsx("div", { className: "px-5 pb-4", children: peek }) : null, _jsx("div", { ref: bodyRef, id: bodyId, hidden: !expanded, className: "max-h-[80vh] overflow-y-auto overscroll-contain px-5 pb-4", onPointerDown: (e) => begin(e, true), ...dragHandlers, children: children }), footer ? (_jsx("div", { className: "flex justify-end gap-2 border-t border-hairline px-5 py-3", children: footer })) : null] })] }), target)] }));
+    return (_jsxs(_Fragment, { children: [anchor, _jsx(ThemePortal, { target: target, children: _jsxs("div", { ref: wrapperRef, "data-drawer-root": "", children: [modal ? (_jsx("div", { "data-testid": "drawer-scrim", "aria-hidden": "true", className: "fixed inset-0 z-40 bg-scrim", onClick: dismissible ? close : undefined })) : null, _jsxs("div", { ref: sheetRef, role: modal ? 'dialog' : 'region', "aria-modal": modal ? true : undefined, "aria-labelledby": titleId, "aria-describedby": description ? descId : undefined, tabIndex: -1, "data-snap": snap, "data-mode": mode, onKeyDown: trapTab, style: { transform: `translateY(${Math.max(offset, -40)}px)` }, className: cn('fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full flex-col', 'rounded-t-2xl border border-b-0 border-hairline bg-sheet text-ink shadow-2xl', 'pb-[env(safe-area-inset-bottom)] outline-none', !dragging &&
+                                'transition-transform duration-200 ease-out motion-reduce:transition-none', maxWidthClassName, className), children: [_jsxs("div", { className: "touch-none select-none px-5 pt-2", onPointerDown: (e) => begin(e, false), ...dragHandlers, children: [_jsx("button", { type: "button", "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": expanded ? (collapseLabel ?? strings.collapse) : (expandLabel ?? strings.expand), onClick: onHandleClick, className: "mx-auto flex h-6 w-16 cursor-grab items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-brand-700 active:cursor-grabbing", children: _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-10 rounded-full bg-hairline" }) }), _jsxs("div", { className: "flex items-start gap-3 pb-3 pt-1", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "m-0 text-base font-medium text-brand-900", children: title }), description ? (_jsx("p", { id: descId, className: "m-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), showCloseButton && dismissible ? (_jsx("button", { type: "button", "aria-label": closeLabel ?? strings.close, onClick: close, className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-full text-ink-muted hover:bg-brand-700/8 focus-visible:outline-2 focus-visible:outline-brand-700", children: _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.5 3.5l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })) : null] })] }), !expanded && peek ? _jsx("div", { className: "px-5 pb-4", children: peek }) : null, _jsx("div", { ref: bodyRef, id: bodyId, hidden: !expanded, className: "max-h-[80vh] overflow-y-auto overscroll-contain px-5 pb-4", onPointerDown: (e) => begin(e, true), ...dragHandlers, children: children }), footer ? (_jsx("div", { className: "flex justify-end gap-2 border-t border-hairline px-5 py-3", children: footer })) : null] })] }) })] }));
 }

package/dist/atoms/NotificationCard/NotificationCard.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+/** The viewport corner the card floats in. */
+export type NotificationCardPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+/** Why the card closed. `programmatic` is a controlled `open` turned false by the host. */
+export type NotificationCardDismissReason = 'close-button' | 'escape' | 'programmatic';
+export interface NotificationCardProps {
+    /** Viewport corner. Default `bottom-right`. */
+    position?: NotificationCardPosition;
+    /** Controlled visibility. */
+    open?: boolean;
+    /** Initial visibility when uncontrolled. Default `true`. */
+    defaultOpen?: boolean;
+    /** Called whenever the card asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Called once per close, with what closed it. */
+    onDismiss?: (reason: NotificationCardDismissReason) => void;
+    /** Optional leading media: an icon, an app logo. */
+    icon?: ReactNode;
+    /** Labels the section via `aria-labelledby`. */
+    title: ReactNode;
+    /** Wired up via `aria-describedby`. */
+    description?: ReactNode;
+    /** Collapsible body. When present the card shows a toggle for it. */
+    children?: ReactNode;
+    /** Footer row: buttons, links. */
+    actions?: ReactNode;
+    /** Controlled expansion of the body. */
+    expanded?: boolean;
+    /** Initial expansion when uncontrolled. Default `false`. */
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Toggle text while collapsed (otherwise the `expand` UI string). */
+    expandLabel?: string;
+    /** Toggle text while expanded (otherwise the `collapse` UI string). */
+    collapseLabel?: string;
+    /** Close button's accessible name (otherwise the `close` UI string). */
+    closeLabel?: string;
+    /** Portal target. Default: the nearest `<Theme>`, else rendered in place. */
+    container?: HTMLElement | null;
+    className?: string;
+}
+/**
+ * A persistent rich toast: floats in a viewport corner and stays until somebody closes it.
+ *
+ * Deliberately a labelled `section`, not `role="alert"` or a live region — it is the kind of
+ * card that is present on page load, and announcing it on every load would be noise. It is
+ * non-modal: no focus trap, and Escape closes it only while focus is inside it.
+ *
+ * It portals into the nearest `<Theme>` (wrapped in a nested `<Theme>`, which inherits the
+ * appearance) so dark mode reaches it; with no Theme above it, it renders in place.
+ */
+export declare function NotificationCard({ position, open: openProp, defaultOpen, onOpenChange, onDismiss, icon, title, description, children, actions, expanded: expandedProp, defaultExpanded, onExpandedChange, expandLabel, collapseLabel, closeLabel, container, className, }: NotificationCardProps): import("react").JSX.Element;

package/dist/atoms/NotificationCard/NotificationCard.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState, } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+import { ThemePortal, useThemePortalTarget } from '../../utils/themePortal.js';
+/** Longest the exit animation may take before the card unmounts anyway. */
+const EXIT_MS = 250;
+function useControllable(value, initial, onChange) {
+    const [inner, setInner] = useState(initial);
+    const controlled = value !== undefined;
+    const current = controlled ? value : inner;
+    const set = useCallback((next) => {
+        if (!controlled)
+            setInner(next);
+        onChange?.(next);
+    }, [controlled, onChange]);
+    return [current, set];
+}
+/**
+ * A persistent rich toast: floats in a viewport corner and stays until somebody closes it.
+ *
+ * Deliberately a labelled `section`, not `role="alert"` or a live region — it is the kind of
+ * card that is present on page load, and announcing it on every load would be noise. It is
+ * non-modal: no focus trap, and Escape closes it only while focus is inside it.
+ *
+ * It portals into the nearest `<Theme>` (wrapped in a nested `<Theme>`, which inherits the
+ * appearance) so dark mode reaches it; with no Theme above it, it renders in place.
+ */
+export function NotificationCard({ position = 'bottom-right', open: openProp, defaultOpen = true, onOpenChange, onDismiss, icon, title, description, children, actions, expanded: expandedProp, defaultExpanded = false, onExpandedChange, expandLabel, collapseLabel, closeLabel, container, className, }) {
+    const strings = useUiStrings();
+    const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+    const [expanded, setExpanded] = useControllable(expandedProp, defaultExpanded, onExpandedChange);
+    const { anchorRef, target, resolved } = useThemePortalTarget(container);
+    const id = useId();
+    const titleId = `${id}-title`;
+    const descId = `${id}-desc`;
+    const bodyId = `${id}-body`;
+    // Mounted while open and through the exit animation.
+    const [mounted, setMounted] = useState(open);
+    // What the card itself asked to close for; a close it did not ask for is the host's.
+    const reason = useRef(null);
+    const wasOpen = useRef(open);
+    const onDismissRef = useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    useEffect(() => {
+        const was = wasOpen.current;
+        wasOpen.current = open;
+        if (open) {
+            setMounted(true);
+            return;
+        }
+        if (!was)
+            return;
+        onDismissRef.current?.(reason.current ?? 'programmatic');
+        reason.current = null;
+        const t = setTimeout(() => setMounted(false), EXIT_MS);
+        return () => clearTimeout(t);
+    }, [open]);
+    const close = (why) => {
+        if (!open)
+            return;
+        reason.current = why;
+        setOpen(false);
+    };
+    const onKeyDown = (e) => {
+        if (e.key !== 'Escape')
+            return;
+        e.stopPropagation();
+        close('escape');
+    };
+    const anchor = _jsx("span", { ref: anchorRef, hidden: true, "data-notification-anchor": "" });
+    if (!mounted || !resolved)
+        return anchor;
+    return (_jsxs(_Fragment, { children: [anchor, _jsx(ThemePortal, { target: target, children: _jsxs("section", { "aria-labelledby": titleId, "aria-describedby": description ? descId : undefined, "data-state": open ? 'open' : 'closed', "data-position": position, onKeyDown: onKeyDown, onAnimationEnd: () => {
+                        if (!open)
+                            setMounted(false);
+                    }, className: cn('ui-notification-card', className), children: [_jsxs("div", { className: "ui-notification-card__header", children: [icon ? _jsx("div", { className: "ui-notification-card__icon", children: icon }) : null, _jsxs("div", { className: "ui-notification-card__text", children: [_jsx("h2", { id: titleId, className: "ui-notification-card__title", children: title }), description ? (_jsx("p", { id: descId, className: "ui-notification-card__description", children: description })) : null] }), _jsx("button", { type: "button", "aria-label": closeLabel ?? strings.close, onClick: () => close('close-button'), className: "ui-notification-card__close", children: _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.5 3.5l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] }), children ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-expanded": expanded, "aria-controls": bodyId, onClick: () => setExpanded(!expanded), className: "ui-notification-card__toggle", children: [expanded ? (collapseLabel ?? strings.collapse) : (expandLabel ?? strings.expand), _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: expanded ? 'M4 9.5l3.5-3.5 3.5 3.5' : 'M4 6l3.5 3.5L11 6', stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), _jsx("div", { id: bodyId, hidden: !expanded, className: "ui-notification-card__body", children: children })] })) : null, actions ? _jsx("div", { className: "ui-notification-card__actions", children: actions }) : null] }) })] }));
+}

package/dist/atoms/NotificationCard/index.d.ts

@@ -0,0 +1 @@
+export * from './NotificationCard.js';

package/dist/atoms/NotificationCard/index.js

@@ -0,0 +1 @@
+export * from './NotificationCard.js';

package/dist/atoms/index.d.ts

@@ -10,6 +10,7 @@ export * from './Drawer/index.js';
 export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Label/index.js';
+export * from './NotificationCard/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
 export * from './RichText/index.js';

package/dist/atoms/index.js

@@ -10,6 +10,7 @@ export * from './Drawer/index.js';
 export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Label/index.js';
+export * from './NotificationCard/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
 export * from './RichText/index.js';

package/dist/strings.d.ts

@@ -28,11 +28,11 @@ export interface UiStrings {
     heading: string;
     bulletList: string;
     orderedList: string;
-    /** Drawer: the close button's accessible name. */
+    /** Drawer and NotificationCard: the close button's accessible name. */
     close: string;
-    /** Drawer: the handle's accessible name while collapsed. */
+    /** Drawer handle / NotificationCard toggle, while collapsed. */
     expand: string;
-    /** Drawer: the handle's accessible name while expanded. */
+    /** Drawer handle / NotificationCard toggle, while expanded. */
     collapse: string;
 }
 /**

package/dist/utils/themePortal.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+/**
+ * Finds where a floating component may portal without leaving its theme.
+ *
+ * Radix Themes defines every colour variable on `.radix-themes` and flips light/dark with a
+ * class on that element, so a portal under `<body>` renders light whatever the app is in. The
+ * target is `container` when given, else the nearest `.radix-themes` above `anchorRef`, else
+ * nothing — meaning render in place.
+ */
+export declare function useThemePortalTarget(container?: HTMLElement | null): {
+    anchorRef: import("react").RefObject<HTMLSpanElement | null>;
+    target: HTMLElement | null;
+    resolved: boolean;
+};
+/** Portals into `target` wrapped in a nested `<Theme>` (which inherits appearance and accent), or renders in place. */
+export declare function ThemePortal({ target, children, }: {
+    target: HTMLElement | null;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/utils/themePortal.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Theme } from '@radix-ui/themes';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+/**
+ * Finds where a floating component may portal without leaving its theme.
+ *
+ * Radix Themes defines every colour variable on `.radix-themes` and flips light/dark with a
+ * class on that element, so a portal under `<body>` renders light whatever the app is in. The
+ * target is `container` when given, else the nearest `.radix-themes` above `anchorRef`, else
+ * nothing — meaning render in place.
+ */
+export function useThemePortalTarget(container) {
+    const anchorRef = useRef(null);
+    const [themeRoot, setThemeRoot] = useState(null);
+    const [resolved, setResolved] = useState(false);
+    useLayoutEffect(() => {
+        setThemeRoot(anchorRef.current?.closest('.radix-themes') ?? null);
+        setResolved(true);
+    }, []);
+    return { anchorRef, target: container ?? themeRoot, resolved: resolved || !!container };
+}
+/** Portals into `target` wrapped in a nested `<Theme>` (which inherits appearance and accent), or renders in place. */
+export function ThemePortal({ target, children, }) {
+    if (!target)
+        return _jsx(_Fragment, { children: children });
+    return createPortal(_jsx(Theme, { hasBackground: false, children: children }), target);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.9.1",
-  "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
+  "version": "0.10.0",
+  "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",
   "license": "UNLICENSED",

package/tokens.css

@@ -455,3 +455,64 @@
   pointer-events: none;
   color: var(--gray-a10);
 }
+
+/**
+ * NotificationCard — a persistent rich toast. Only Radix Themes variables, so it follows the
+ * `.light`/`.dark` class on the nearest <Theme> rather than the OS. z-index sits below Radix
+ * Themes dialogs and the Drawer (50) and above page content.
+ */
+.ui-notification-card {
+  position: fixed;
+  z-index: 40;
+  width: min(24rem, 100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  background: var(--color-panel-solid);
+  color: var(--gray-12);
+  border: 1px solid var(--gray-a6);
+  border-radius: var(--radius-4);
+  box-shadow: var(--shadow-5);
+  font-family: var(--default-font-family);
+  --ui-nc-from: translateY(calc(100% + 16px));
+}
+.ui-notification-card[data-position='bottom-right'] { bottom: 16px; right: 16px; }
+.ui-notification-card[data-position='bottom-left'] { bottom: 16px; left: 16px; }
+.ui-notification-card[data-position='top-right'] { top: 16px; right: 16px; --ui-nc-from: translateY(calc(-100% - 16px)); }
+.ui-notification-card[data-position='top-left'] { top: 16px; left: 16px; --ui-nc-from: translateY(calc(-100% - 16px)); }
+.ui-notification-card[data-state='open'] { animation: ui-nc-in 220ms ease-out; }
+.ui-notification-card[data-state='closed'] { animation: ui-nc-out 160ms ease-in forwards; }
+@keyframes ui-nc-in { from { transform: var(--ui-nc-from); opacity: 0; } }
+@keyframes ui-nc-out { to { transform: var(--ui-nc-from); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .ui-notification-card[data-state] { animation-duration: 1ms; }
+}
+.ui-notification-card__header { display: flex; align-items: flex-start; gap: var(--space-3); }
+.ui-notification-card__icon { flex-shrink: 0; display: flex; }
+.ui-notification-card__text { flex: 1; min-width: 0; }
+.ui-notification-card__title { margin: 0; font-size: var(--font-size-3); font-weight: var(--font-weight-medium); line-height: var(--line-height-3); }
+.ui-notification-card__description { margin: var(--space-1) 0 0; font-size: var(--font-size-2); line-height: var(--line-height-2); color: var(--gray-11); }
+.ui-notification-card__close,
+.ui-notification-card__toggle {
+  appearance: none; border: 0; background: transparent; color: var(--gray-11);
+  cursor: pointer; font: inherit; border-radius: var(--radius-2);
+}
+.ui-notification-card__close {
+  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+  width: var(--space-6); height: var(--space-6); margin: calc(var(--space-1) * -1);
+}
+.ui-notification-card__toggle {
+  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1);
+  padding: var(--space-1) var(--space-2); margin-left: calc(var(--space-2) * -1);
+  font-size: var(--font-size-2); color: var(--accent-11);
+}
+.ui-notification-card__close:hover,
+.ui-notification-card__toggle:hover { background: var(--gray-a3); }
+.ui-notification-card__close:focus-visible,
+.ui-notification-card__toggle:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; }
+.ui-notification-card__body { font-size: var(--font-size-2); color: var(--gray-12); }
+.ui-notification-card__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }