A `Card` centered in the viewport with a dimmed backdrop that blocks interaction with the rest of the page, built on [Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog) for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional `title` renders a header with a close button, otherwise just the `children` are shown.

pnpm add @behivetech/atoms.modal

Published to npm.pkg.github.com

Checking the registry…

Changelog

v0.4.3

Patch Changes

  • 8fe9fb4: Full-height layouts and the Modal's height follow the visible viewport on iOS Safari (dvh, with vh as the fallback), and the sidebar layout's content column can shrink (minmax(0, 1fr)) instead of widening the page.
  • 8fe9fb4: Import icons from their own packages (@behivetech/icons.<name>), and the shared stylesheet and types from @behivetech/icons.base, instead of @behivetech/atoms.icon, which no longer exists.
  • 8fe9fb4: Declare "sideEffects": ["**/*.css"] so a bundler can drop the package when its exports are unused. Packages that build class names depend on @behivetech/get-class-name (a real dependency, kept external) instead of bundling their own copy of the helper, so an app loads it once.
  • Updated dependencies [8fe9fb4]
  • Updated dependencies [8fe9fb4]
  • Updated dependencies [8fe9fb4]
    • @behivetech/icons.base@0.4.0
    • @behivetech/icons.close@0.1.0
    • @behivetech/get-class-name@0.1.0
    • @behivetech/atoms.button@0.5.2
    • @behivetech/atoms.card@0.6.2

v0.4.2

Patch Changes

  • b12f0c9: Dependency updates: Radix UI (checkbox 1.4, dialog 1.3, dropdown-menu 2.2, select 2.4, slot 1.5, switch 1.4, toast 1.3, tooltip 1.4), react-hook-form 7.91, TipTap 3.33 and TanStack Query 5.107. No API changes. TipTap 3.33 brings prosemirror-view 1.42.6 or later, which fixes a paste XSS (GHSA-c8x8-7fp4-3x9w). In the rich-text editor, Tab at the start of a paragraph right after a list now moves that paragraph into the list (TipTap's list keymap, from 3.30) instead of moving focus out of the editor.
  • Updated dependencies [4d3c523]
  • Updated dependencies [b12f0c9]
    • @behivetech/atoms.card@0.6.1
    • @behivetech/atoms.button@0.5.1

v0.4.1

Patch Changes

  • 00e81c9: Drawer and Modal now pull in Card's stylesheet through the package (@behivetech/atoms.card/card.module.scss) instead of a monorepo-relative path, so the shipped .module.scss source compiles outside the monorepo. Card exports ./card.module.scss for this. The published dist/index.css is unchanged.
  • Updated dependencies [00e81c9]
  • Updated dependencies [6534e7a]
    • @behivetech/atoms.card@0.6.0
    • @behivetech/atoms.icon@0.3.8

v0.4.0

Minor Changes

  • 5593d1c: Add the optional footer prop to Modal: action buttons that sit below the content and stay visible while the content scrolls under the panel's height cap. Existing uses are unchanged.

Patch Changes

  • Updated dependencies [5593d1c]
  • Updated dependencies [0e4857f]
    • @behivetech/atoms.card@0.5.0
    • @behivetech/atoms.icon@0.3.7

v0.3.0

Minor Changes

  • cef5a60: Add size="fullscreen": the dialog fills the viewport on the lowest surface tier with no Card panel, a top bar holding the title and an always-present close button, and children filling the rest. title now also accepts a node. New closeLabel names the close button for translation, and onCloseAutoFocus lets a consumer decide where focus returns when the modal closes.

Patch Changes

  • Updated dependencies [b356876]
  • Updated dependencies [408d5a9]
  • Updated dependencies [5cb85ef]
    • @behivetech/atoms.button@0.5.0
    • @behivetech/atoms.icon@0.3.6

v0.2.5

Patch Changes

  • Updated dependencies [d6dd746]
    • @behivetech/atoms.icon@0.3.5

v0.2.4

Patch Changes

  • 0c52e51: Each published package now says what it is and where its docs are: description from the README's first paragraph, and homepage plus a Docs: line in the README pointing at the package's page on https://bht-galaxy.vercel.app, all applied at publish time from one source. Seven READMEs that still said "TODO" have a summary; @behivetech/atoms.stat and @behivetech/cms.base-styles have a README at all; the hand-written props tables are gone from the READMEs, since the Props tab on the site is generated from the interface.
  • Updated dependencies [0c52e51]
    • @behivetech/atoms.button@0.4.4
    • @behivetech/atoms.card@0.4.4
    • @behivetech/atoms.icon@0.3.4

v0.2.3

Patch Changes

  • c733fc5: Published to the public npm registry (registry.npmjs.org, access public, with provenance) instead of GitHub Packages. Install with no registry configuration: pnpm add @behivetech/atoms.button. The versions already on GitHub Packages stay there; nothing in the packages changed.
  • Updated dependencies [c733fc5]
    • @behivetech/atoms.button@0.4.3
    • @behivetech/atoms.card@0.4.3
    • @behivetech/atoms.icon@0.3.3

v0.2.2

Patch Changes

  • e3bf015: Live examples are <name>.example.tsx (was <name>.composition.tsx), following template 0.4.0 of the component registry: the published files list and the docs site's Examples tab use the new name. No component code changed.
  • Updated dependencies [e3bf015]
    • @behivetech/atoms.button@0.4.2
    • @behivetech/atoms.card@0.4.2
    • @behivetech/atoms.icon@0.3.2

v0.2.1

Patch Changes

  • 726a7ab: The component registry is now the bht-component-registry template, adopted into this repo: every package lives at registry/behivetech/<category>/<name> and builds with the template's shared env. Published output is the same code; the class-name helper is bundled into each package instead of being a runtime dependency on @behivetech/get-class-name, the tarball now ships README.md, the source, the compositions and a docs.json the docs site reads, and each package declares license: MIT.
  • Updated dependencies [dcbb801]
  • Updated dependencies [726a7ab]
    • @behivetech/atoms.card@0.4.1
    • @behivetech/atoms.button@0.4.1
    • @behivetech/atoms.icon@0.3.1

v0.2.0

Minor Changes

  • a7bf591: Restyle to Material Design 3. Colors, type, shape, elevation and motion now come from --md-sys-* tokens, and each one falls back to the pre-MD3 --color-* name. Hardcoded brand colors and filter: brightness() are gone, so components follow the theme in both light and dark.

    Interaction

    • Hover, focus and press show a translucent layer of the content color.
    • Interactive controls get a :focus-visible ring.
    • Small controls get a 48px touch target without changing their drawn size.

    Props and component sizes are unchanged.

    Visible changes

    • Buttons are pill-shaped.
    • Text fields are outlined with a transparent fill.
    • FormField labels use body-small type.
    • Tooltips and toasts use the inverse surface.
    • Modal has no outline and 28px corners.
    • The hero headline is display-medium at regular weight.
    • Sidebar and NavItem no longer read cms-admin's --admin-sidebar-* variables.

    Fixes: these never matched and now work:

    • The NavItem active state.
    • Spinner sizes.
    • Button icon-only widths.
    • Table row dividers.

    Specificity: modifier styles now use .BHT__X--mod.BHT__X (0-2-0). A single-class className override of a modifier-controlled property needs matching specificity to win.

  • a7bf591: Add a scrollableBody prop to Card, and fix selectors that never matched.

    • New prop: scrollableBody keeps the header fixed and scrolls only the body when the card has a bounded height.
    • Modal and Drawer now use scrollableBody instead of styling Card's internal classes.
    • Fix: Card's padding prop and its interactive-body styles now apply. Their selectors were missing the BHT__ prefix and matched nothing.
    • Fix: Modal bodies now scroll.
    • Fix: Drawer's left/right and top/bottom panel sizing now applies.

    If your app patched these bugs itself (for example with .BHT__Card--padding-md .BHT__Card__body-padding overrides), those patches are no longer needed after upgrading.

Patch Changes

  • Updated dependencies [a7bf591]
  • Updated dependencies [a7bf591]
  • Updated dependencies [a7bf591]
    • @behivetech/atoms.button@0.4.0
    • @behivetech/atoms.card@0.4.0
    • @behivetech/atoms.icon@0.3.0

v0.1.5

Patch Changes

  • 87efc37: Import the close glyph directly rather than through <Icon name>. The name-keyed Icon component is a runtime registry lookup, so no bundler can tell which glyphs are reachable — importing it pulled all 22 icons into every consumer of Modal or Drawer (and, downstream, ConfirmDialog) to render a single close button. CloseIcon is a static import that tree-shakes to one glyph. No visual or API change.

v0.1.4

Patch Changes

  • Updated dependencies [e092644]
    • @behivetech/atoms.icon@0.2.4

v0.1.3

Patch Changes

  • f8c57db: Generate TypeScript declarations once per build instead of once per format.

    dist/index.d.cts is no longer emitted. Nothing referenced it: each package's exports["."].types points at dist/index.d.ts, which is unchanged and still covers both the import and require conditions. There are no API, type, or runtime changes.

  • Updated dependencies [f8c57db]

    • @behivetech/atoms.button@0.3.1
    • @behivetech/atoms.card@0.3.1
    • @behivetech/atoms.icon@0.2.3

v0.1.2

Patch Changes

  • Updated dependencies [b98ff2a]
    • @behivetech/atoms.icon@0.2.2

v0.1.1

Patch Changes

  • Updated dependencies [0e22d45]
    • @behivetech/atoms.icon@0.2.1

v0.1.0

Minor Changes

  • 08d7dd6: class names are namespaced with a BHT__ prefix, and sizing moves to rem

Patch Changes

  • Updated dependencies [08d7dd6]
    • @behivetech/atoms.button@0.3.0
    • @behivetech/atoms.card@0.3.0
    • @behivetech/atoms.icon@0.2.0

v0.0.3

Patch Changes

  • d0111c4: transient layers (dropdown, toast, tooltip) now stack above surfaces

    --z-dropdown moves 100 to 450 so Select and DropdownMenu popups render above Modal (400) and sticky headers (200). Every overlay atom portals its content to document.body, so a popup is a sibling of the modal that spawned it rather than a descendant, and raw z-index is the only thing ordering them. Inline fallbacks are corrected too, for consumers importing an atom's CSS without base-styles' tokens.

v0.0.2

Patch Changes

  • e634291: Fixed modal component and updates to others
  • Updated dependencies [e634291]
    • @behivetech/atoms.card@0.2.2
    • @behivetech/atoms.icon@0.1.2

v0.0.1

Patch Changes

  • 775262e: 55-58: File manager, theme editor, component catalog, site settings
  • Updated dependencies [775262e]
    • @behivetech/atoms.card@0.2.1
    • @behivetech/atoms.icon@0.1.1