themelia-react-ui 2.0.4 → 2.0.5

package/CHANGELOG.md

@@ -1,5 +1,140 @@
 # Changelog
 
+## 2.0.5 — 2026-10-31
+
+- Modal scrims render again under `SidebarProvider`/`AppSidebar`. The sidebar
+  drawer owner is a Dialog root around the app, so Base UI treated every dialog
+  inside as nested and skipped its backdrop. A modal now draws its backdrop
+  unless it opens from inside another modal's content.
+- Collection rows (menus, Command, Select, Combobox, cascader, global search) are
+  sized by their height role: block padding steps one tier below Item's, so a
+  single line is exactly 32/28/36px at default/compact/comfortable instead of
+  1.5px taller. DataTable menus, kanban and activities drop the legacy 24px
+  `density="table"` rows.
+- Skeletons use the translucent neutral chip fill, so they keep one contrast on
+  every surface, including a `--muted` sidebar where they used to disappear.
+- `StackedLayout`, `TopbarSidebarLayout` and `AppLayout` with no variant follow
+  the active theme; `headerTheme`/`light-header`/`dark-header` still scope the
+  header. Header controls (sidebar trigger, search, tools, notifications, a
+  one-line user trigger) share the 32px action height.
+- The dual navigation cluster docks its contextual panel from 768px beside a
+  primary rail and opens it as a drawer below that; `mobileSidebarMode="inline"`
+  keeps the previous docked cluster.
+- `GlobalSearch` input is a combobox with `aria-activedescendant`; results are
+  options reached with the arrow keys rather than Tab.
+- Filter editors focus their primary input when opened and share one editor
+  header; selection captions read "2 status selected" in running text.
+- Additive: `CardShell surface`, `FormSection titleSize`, CoordinatesInput
+  latitude/longitude accessible-label strings, MetricComparison `pointsUnit`,
+  UsageCard average-unavailable string, AI tool-call `elapsedLabel`, AI summary
+  `confidenceLabel`, ActivityRow `reserveDisclosure`/`reserveMenu`,
+  MediaLibraryToolbar `summary`/`disabled`, `useMediaLibrary().retry` and
+  `strings.retry`.
+- Alert places its action beside the copy only when the alert itself is wide
+  enough (container query), otherwise below it. PageHeader wraps its commands
+  below the copy before the copy column gets cramped.
+
+- `--height-action` and `--height-control` default to 2rem (32px) instead of
+  2.25rem. Their size steps are eighths of the root (¾, ⅞, 9⁄8), so the scale is
+  24/28/32/36px in whole pixels; it was 28/32/36/40px in ninths. Set the roots
+  back to 2.25rem to restore the previous heights (steps become 27/31.5/36/40.5px).
+- Corner roles: `rounded-radius` (`--radius`, 12px by default) is now the
+  default corner for buttons, inputs, select and facet triggers, badges,
+  collection and navigation rows and nested bodies. The new `rounded-surface`
+  (4/3 × `--radius`, 16px) is the larger corner of cards, popups, dialogs,
+  command shells and other outer surfaces. `rounded-inner` and its bounded
+  formula are removed. Migration: replace an app's `rounded-radius` on outer
+  shells with `rounded-surface`, and `rounded-inner` with `rounded-radius`.
+- `Alert` and the `Toaster` toast take Item's row geometry: the row insets
+  (`px-row-x`, `py-row-y`, 12px and 8px by default) and Item's 12px
+  media/actions gap, instead of the 24px card surface inset. A two-line notice
+  is about 60px tall instead of 94px. Overlay tone notices, which are Alerts,
+  follow the same row roles.
+- `PopoverTitle` and `PopoverDescription` no longer wrap plain text in the
+  popover's inherited line box, and `Cascader` keeps "Select current" beside
+  its title and path instead of inside the title row. A drilled level's title
+  and parent path now sit 4px apart instead of 11px.
+- Menu surfaces (popover menus and their header and footer bands, dropdown
+  menus, Select and Combobox lists, Command and its search row, global search,
+  mentions and the cascader) inset by md (8px) on both axes instead of xs
+  (4px) inline, so rows and the search field sit further from the edge, and
+  header and footer copy sit one small xs step (4px) inside that edge instead
+  of adding the full row inset (shared `popoverRecipes.menuCopyInset`).
+- Filters support nested options. `FilterOption.children` was declared but
+  ignored; `SELECT` and `MULTI_SELECT` editors now show nested options one level
+  at a time through the Cascader's panel (path search, Back, multi-select across
+  levels, `closeOnSelect`), and `SelectFacet` uses the `Cascader` field. A chosen
+  nested option reads as its path ("Europe / Greece / Athens") in chips and
+  facets. `FilterConfig.selectableOptions: 'any'` lets a branch be chosen, and
+  the filter strings add `previousLevel` and `selectCurrentLevel`. The panel is
+  a private part shared by `Cascader` and filters; `Cascader` behaviour is
+  unchanged.
+- `Cascader` moves between levels with motion: a drilled level or a new column
+  enters from the side it was reached from (shared `motionRecipes.level`,
+  `@starting-style`, reduced-motion aware). Opening and searching do not
+  animate the list.
+- `LayoutSidebarProvider` (and so `AppSidebar`) defaults to
+  `menuDensity="default"`: 28px primary rows and 24px nested rows on a 4px gap
+  (with the 2rem action height below), instead of comfortable 36px and 32px
+  rows. Pass `menuDensity="comfortable"` for 32px rows. Sidebar navigation
+  labels are medium weight throughout; the current entry is marked by its fill.
+  An unscoped base `SidebarMenuButton` falls back to the default density like
+  the rest of the menu, and a collapsed icon-rail row is the square of its own
+  height.
+- Remove the leftover `active:translate-y-0!` press overrides from Collapsible
+  and Tooltip triggers, dialog and sheet close buttons, popover buttons and the
+  sidebar trigger. Nothing translates on press any more, and the overrides made
+  triggers centred with a translate, such as the sidebar disclosure chevron,
+  jump down while pressed.
+- Add a fourth consumer skill, `themelia-design`, for the designer's part of a
+  view: a data brief read from real records, a view spec with ranked
+  information, wireframes and encodings, and a scored critique rubric with a
+  browser census for rendered screens. A `themelia-ui-designer` agent
+  definition applies it to whole views (design mode builds, renders and fixes;
+  review mode critiques read-only). `setup-skills.mjs --agents <directory>`
+  copies the agent without overwriting an existing file, and `--check`
+  compares it. The project-instructions block lists the new skill.
+- `ResourceCell` draws its media circle only when `imageUrl`, `icon` or
+  `fallback` is passed, and no longer falls back to a decorative mail glyph, so
+  order and invoice identifiers read as plain text. To keep a monogram for a
+  person or organization, pass `fallback={<Initials value={name} />}` (on every
+  row of a column where only some rows have a photo). An explicit `fallback`
+  still wins over `icon`, and `icon` now wins over title initials.
+- `InvoiceLineItems` states quantity and unit price once per narrow row instead
+  of repeating column labels, aligns header and rows on one subgrid with
+  content-sized numeric tracks, top-aligns custom cells, scrolls custom columns
+  horizontally (or drops columns marked `wideOnly` below its `@lg` width), and
+  adds `surface="flat"` for use inside a Card. Header and
+  rows now sit in `.invoice-line-items--body`, which carries the grid template
+  that each row used to repeat. The family
+  index now exports `InvoiceColumn`, `InvoiceLineItemsFooterRow`,
+  `InvoiceLineItemsStrings` and `defaultInvoiceLineItemsStrings`.
+- Commerce owners that hard-coded their frame accept `surface`/`padding`:
+  `FulfillmentGroup` (framed by default) and `InvoiceHeader`,
+  `DiscountStackPreview`, `TaxBreakdownCard`, `RefundStatusCard`,
+  `CartSummaryCard`, `ShipmentTracking` and `InventorySectionCard` (unframed by
+  default). Defaults are unchanged.
+- Add `maxVisibleSecondaryActions` to page, record, settings, workspace and
+  resource headers (default 2), `visibleFields` and `children` to
+  `ProductVariantEditor`, and `showGroupBy` to `ProductVariantsManager`
+  (default true).
+- Consumer gaps from the round-2 rebuilds: `InvoiceStatus` adds `draft` and
+  `disputed`; `InvoiceHeader.status` is optional and parties take `details`;
+  `OrderCustomer` adds `shippingMethod` and `showShippingAddress`;
+  `FulfillmentGroup` adds `count`; `MetricComparison` honours `current.trend`;
+  `ChartTooltipContent` adds `valueFormatter`; `ProductVariantEditor` adds
+  `errors`, `formId` and `showHeader`; `ResourceCell` adds `mediaShape` and a
+  full-title hover; `MediaResourceGallery` grid shows whole images and omits a
+  missing file size; an explicit DataTable column `size` sets its width without
+  resizing; `base/toaster` re-exports `toast`; `blocks/commerce` exports its
+  status tone maps and invoice strings. `ProductOptionsMatrix` focuses a value
+  added in its option editor so it can be typed at once.
+- Discovery resolves near-miss import paths with `importResolution`, the mapper
+  knows 139 roles across commerce, products, media, charts and analytics and
+  suggests nearby roles for unmatched phrases, and the inspector reads several
+  props at once and points hooks to their declaration. A new order and invoice
+  composition reference ships with executable recipes.
+
 ## 2.0.4 — 2026-10-28
 
 Shared composition roles, stronger consumer guidance and executable component

package/README.md

@@ -2,7 +2,7 @@
 
 A publishable React UI package built on Base UI and Tailwind, with shadcn-compatible themes and Themelia's public APIs. Routing, persistence, permissions and translations remain consumer-owned.
 
-Package: **`themelia-react-ui`** · current version: **`2.0.4`** · MIT licensed.
+Package: **`themelia-react-ui`** · current version: **`2.0.5`** · MIT licensed.
 The GitHub repository is `themelia-react-ui`; npm imports use `themelia-react-ui`.
 
 Consuming apps start with [consumer setup](#consumer-setup) and the packaged
@@ -25,6 +25,14 @@ npm run check:all
 
 The Vite React playground has foundations, a complete searchable catalogue, and an interactive products workspace. The catalogue groups Foundations (including semantic primitives and composition structures), Base components, Layouts, Blocks, and domain Features. Layouts includes five composed AppLayout presets (light header, dark header, sidebar, inset canvas and stacked navigation), plus a responsive composition guide for viewport grids, parent-driven grids, wrapping actions and stable content order. Navigation uses actual package families, static domain headings above Features, padded disclosures and a single Skeletons family page. Expansion persists across page changes and mobile drawer closure; search shows the same group context. `/` opens the full catalogue with preview-only hash navigation (`/?page=catalog` also works); `/?page=products` exercises options, generation, validation, async save/retry and bulk actions. React Router is not a dependency.
 
+For the application shell at its actual viewport size, open
+`/?page=shells&layout=header`, `/?page=shells&layout=sidebar` or
+`/?page=shells&layout=inset`; append `&theme=dark`
+for the dark theme. This preview-only mode removes catalogue chrome from the
+composition. The [shell architecture verification report](docs/verification/2026-10-29-shell-architecture-catalogue.md)
+records source ownership, rendered measurements and executed interactions for
+the three catalogue structures.
+
 `build` emits ESM entrypoints, TypeScript declarations, compiled component CSS, editable Tailwind theme source and optional map styles. Playground files stay outside the tarball. `check:contract` enforces exact exports, retained source symbols, component layers, dependencies and token ownership. `check:preview` verifies ready routes, example files, exact current public symbols, published imports and public family coverage. `check:docs` verifies local props for source-origin-qualified public callable owners, including all static displayed PropsTables. `check:package` requires a fresh `npm run build`. It installs the tarball into an isolated consumer, checks strict declarations for every family and matches installed declaration exports to the source-backed skill index. Its installed basic fixture checks SSR/hydration and executes provider defaults, controlled Input/Select/Checkbox state, form submission/validation/reset, scoped overlay portals and async confirmation/retry. Native links retain a separate strict typecheck and Vite-build smoke. The optional fixture exercises controlled table sorting/selection/visibility and client module initialization for specialist peers. Initialization does not establish specialist workflow or server-rendering support. It uses the configured npm cache, or `THEMELIA_NPM_CACHE`; a fresh `npm ci` cache may lack fixture registry metadata. Use `THEMELIA_FIXTURE_INSTALL=online` explicitly for cold temporary consumers, or supply a prepared cache for the default offline install. See [release readiness](docs/releasing.md).
 
 `lint` runs development-only `@shadcn/lint` through Oxlint: semantic colors across components, shared recipes and preview TSX and fixed typography contracts in preview examples. `check:design-lint` proves rule recognition, package stylesheet discovery and permitted customization. Both run inside `check`; `.oxlintrc.json` owns the staged policy. See [typography and lint guidance](docs/typography-and-design-lint.md).
@@ -48,14 +56,14 @@ Chromium 111+, Safari 18.1+ or Firefox 151+ for this theme behavior. The nearest
 mode class governs nested components and their scoped portals; see the
 [theme guide](docs/consumer-skill/references/theming.md) for partial overrides.
 
-Version 2.0.4 uses official `@base-ui/react ^1.9.0` from npm. Themelia's
+Version 2.0.5 uses official `@base-ui/react ^1.9.0` from npm. Themelia's
 `ComboboxRoot.dismissLabel` and feature `strings.dismiss` name both screen-reader
 dismissal controls. Shared popup owners preserve focus restored to a child
 trigger during deferred parent recovery. These behaviors are library-owned;
 consumers install the unmodified official Base UI package.
 
 ```sh
-npm install ./themelia-react-ui-2.0.4.tgz '@base-ui/react@^1.9.0' lucide-react
+npm install ./themelia-react-ui-2.0.5.tgz '@base-ui/react@^1.9.0' lucide-react
 ```
 
 For a registry release, install into a React 19 application with:
@@ -99,16 +107,21 @@ app overrides after library CSS. A Tailwind v4 application can additionally
 import `theme.css` after Tailwind to generate app-owned utilities from the same
 mappings; this editable file contains Tailwind directives and needs processing.
 
-The package ships three focused agent capabilities:
+The package ships four focused agent capabilities:
 [components](docs/consumer-skills/themelia-components/SKILL.md) for installed setup,
 search and typed component/form integration;
-[tokenization](docs/consumer-skills/themelia-tokenization/SKILL.md) for semantic
-themes, typography and shared geometry; and
+[tokenization](docs/consumer-skills/themelia-tokenization/SKILL.md) for domain
+structures combining public parts with semantic JSX and token-backed Tailwind,
+plus shared themes, typography and geometry;
 [composition](docs/consumer-skills/themelia-composition/SKILL.md) for business
-hierarchy, responsive screens and visual repair. Their shared assets and
+hierarchy, responsive screens and visual repair; and
+[design](docs/consumer-skills/themelia-design/SKILL.md) for reading records into
+view specs and scoring rendered views against a critique rubric. A
+[designer agent](docs/consumer-skill/agents/themelia-ui-designer.md) applies the
+design skill to whole views. Their shared assets and
 the compatible original entrypoint remain in `docs/consumer-skill`. The previous
 foundation/forms paths remain package compatibility routes; fresh skill copying
-installs the three canonical capabilities. Follow the
+installs the four canonical capabilities. Follow the
 [installed setup and copying guide](docs/consumer-skill/references/installation.md)
 to preserve all references; npm installation does not modify global agent skills.
 
@@ -163,7 +176,8 @@ defines application freedom and library-owned anatomy; the
 and verification gate. Shipped consumer examples receive the same design lint as
 library compositions. Those repository checks do not run automatically in apps.
 Popover display/menu anatomy and default/compact insets are separate from collection
-row density and control size. Flush delegates padding to owned regions. Command
+row density and control size. Rich display surfaces keep 24px default insets;
+compact menu/list shells use 4px around their already-padded rows. Flush delegates padding to owned regions. Command
 search composes the public Input; features inherit these base recipes rather than
 rebuilding menu chrome or passing local padding overrides.
 
@@ -240,9 +254,10 @@ Use `titleSuffix` for card status, count and version badges. `headerStart` is fu
 Application drawers use `ActionDrawer` and `useOverlayVisibility` from `themelia-react-ui/features/overlays`. Sheet is the structural foundation and remains available for lower-layer infrastructure and compatibility.
 
 Header commands are role-based: one `primaryAction` and ordered
-`secondaryActions` render as `[secondary…] [primary] [⋯]`, with overflow,
-destructive commands and narrow widths moved into the More actions menu that
-ends the row. Page, PageHeader, PageHeading, the resource shells,
+`secondaryActions` render as `[secondary…] [primary] [⋯]`, with overflow
+and destructive commands moved into the More actions menu that ends the row.
+Below 40rem of actual header width, one More actions trigger contains all commands,
+including primary. Page, PageHeader, PageHeading, the resource shells,
 WorkspaceRecordHeader and SettingsShell share that row; keep `actions` for
 non-command controls. Use `header.tabs` for separately selected or routed record
 sections, with counts when useful. Continuous detail documents keep their
@@ -256,7 +271,18 @@ scale. The menu comes after any primary command in its row, and destructive
 entries stay last.
 Page owns inline and block padding, defaulting to the large surface role;
 PageViewport owns scrolling and supplies no inset. Use `Page narrow` for a
-centered single resource; explicit `maxWidth` wins. Page headers use dense copy
+centered single resource. An `aside` selects the `xl` (80rem) measure unless
+`narrow` or an explicit `maxWidth` wins. Page owns `toolbar`, body lifecycle
+states (`loading`, `error`, `empty`, `onRetry`) and the route header.
+Its four header content slots are `beforeTitle`, `titleSuffix`, `afterDescription`
+and `actions`: pass React content or a callback receiving `{ renderLink, defaultContent }`.
+Compose Badge or MetadataList in those slots; the header adds no avatar or automatic
+metadata shape. `slots.actions` can wrap or return its default responsive command
+row through `defaultContent`; replacing it makes command behavior caller-owned.
+Legacy `slots.back`, `titleBadges`, `titleIcon` and direct `actions` remain supported.
+ResourceHeader, ResourceIndexShell, ResourceShowShell and TabbedResourceShell
+are deprecated; replace them with Page rather than nesting route owners. Their
+existing embedded geometry remains supported. Page headers use dense copy
 gaps. Ordinary cards default to `surface="card"` and `md` padding (24px), with
 an unruled header and a ruled footer. Explicit divider props override provider
 defaults. Use `surface="framed"` for grouped emphasis and `surface="flat"`
@@ -264,10 +290,73 @@ inside an existing boundary. Card padding supports `none`, `sm` (12px), `md`
 (24px) and `lg` (32px); its default regional gap follows the same surface tier
 (`none` retains the 24px gap). The general surface scale also includes 16px. All
 are scaled once by `--space-scale`; control heights and corners remain separate.
+
+AppLayout keeps its five variant choices. The shared header-height root now
+defaults to `4rem`. Header-first
+`light-header`/`dark-header` layouts can opt into `contentSurface="inset"`: a
+quiet secondary canvas around the card-colored main surface. Sidebar-first
+`sidebar`/`inset` presets keep their existing flush/inset behavior. Shells own
+one PageViewport; Page supplies the page padding, and header partials occupy the
+shell's single header owner.
+
+The catalogue leads with three structures: a global Header shell, the shared
+App sidebar shell and a shadcn-style Inset shell. Single/dual navigation,
+attached/floating framing and collapse behavior configure these structures.
+They reuse the five presets. Full-size previews use
+`?page=shells&layout=header`, `sidebar` or `inset`, optionally with `&theme=dark`.
+The focused `grouped`, `dual`, `dual-inset`, `floating` and `stacked` views remain
+available for comparison.
+
+The featured layouts use grouped left navigation or a static left area rail
+beside a full navigation panel. Collapse is a caller choice on
+`AppSidebar`/`LayoutSidebar`, independent of the shell or sidebar skin:
+`collapsible="icon"` minimizes the full panel to icons, `"offcanvas"` hides it,
+and `"none"` keeps it expanded. Current examples default to `icon` and expose
+a preview selector for these modes. In a dual layout the primary area rail
+remains static: icon mode leaves a second compact column, while offcanvas
+leaves only the original rail. One explicit trigger controls the contextual
+panel; selecting an area opens it. Keep the primary rail's `collapsible="none"`
+policy independent of the adjacent panel's policy.
+At narrow widths the inline cluster pans a minimum page canvas while its area
+rail stays pinned; resizing does not silently minimize navigation.
+Both header-first and sidebar-first shells expose `mobileSidebarMode`; choose
+`inline` for this persistent cluster, or retain the default drawer policy.
+Sidebar shells accept
+`slots.sidebar` (primary) and `slots.secondarySidebar` (contextual), with named
+state inherited under one LayoutSidebarProvider. `openPanels` controls expansion and
+`mobilePanel` selects one shared undocked drawer while preserving desktop state.
+`navigationPanel` selects the untargeted trigger/shortcut destination. Existing
+primary `open`/`onOpenChange` remain supported; controlled `openPanels` takes
+precedence. Independent width props and `sidebarPresentation="rail"` use existing
+shell geometry, with no new public theme roots. SidebarNavigationRail supplies
+area navigation on its own background surface with one divider. Its dedicated
+width is 52px at the default roots (a 36px action plus 8px on each side); the
+existing full-sidebar icon-collapse width remains 60px. These are derived
+recipes, not new public settings. SidebarRail remains the collapse affordance.
+
 AppSidebar offers pinned `slots.headerStart`/`headerEnd` around its workspace
-region, compact navigation and a separated footer. The
+region, grouped navigation and a separated footer. The four `header`,
+`beforeNavigation`, `afterNavigation` and `footer` slots accept content or a
+callback with named state, renderLink and defaultContent. A header node preserves
+its legacy full replacement behavior; callback header content and either footer
+form retain library-owned insets. Before/after navigation content scrolls.
+Ordered `{ id, label?, items }` groups supplement the existing Record form, and
+`renderItemContent` customizes label content inside the accessible row. Use
+`currentUrl` for most-specific destination matching; render contexts distinguish
+the current item from its `ancestor`. In icon mode, searchable sidebars retain
+their search band as an icon that expands and focuses the field. Compact rows
+keep a small gap; default and comfortable density share a roomier row gap,
+with separate caption and group spacing. SidebarNavigationRail also exposes
+`header`, `beforeNavigation`, `afterNavigation` and `footer` slots: header/footer
+stay pinned and before/after content scrolls with navigation. Use
+`surface="transparent"` for navigation that shares a docked shell canvas;
+drawers remain opaque. `adaptTo="container"` keeps an embedded drawer and its
+backdrop inside the provider for compositions that use drawers. Omit a contextual
+group label when its header already supplies that same label. KPI peers use MetricGrid. The
 [complete shell recipe](docs/consumer-skill/examples/app-layout.tsx) demonstrates
-public workspace/account controls and hosts route children directly. Its separate
+single- and multiple-region composition with public workspace/account controls
+and hosts route children directly. Its `contextualCollapsible` option defaults
+to `icon`; a supplied `secondarySidebar` can choose its own collapse mode. Its separate
 `WorkspaceExamplePage` owns the illustrative title, Create callback and narrow
 measure; a real route such as `AccountDetailPage` replaces that example.
 
@@ -276,7 +365,13 @@ surfaces win. Leave Card's `icon` slot for a glyph that carries state or a
 brand; titles name the subject. `headerPlacement` chooses inside/frame
 composition independently. Independent framed peers use `gap="2xl"`, matching
 Page and TwoColumnLayout's rhythm, since outer rings consume a smaller DOM gap.
-MetadataList (`themelia-react-ui/base/metadata-list`) keeps semibold labels and normal primary values in both densities.
+Card body children use the related (`xl`, 16px) gap by default; explicit
+`contentGap` remains authoritative. SettingsShell spaces direct sections by the
+subjects (`2xl`, 24px) role. MetadataList (`themelia-react-ui/base/metadata-list`)
+keeps semibold labels and normal primary values in both densities. It now adapts
+to its own container by default, with 22/28/38/52/64rem thresholds; pass
+`adaptTo="viewport"` to retain viewport breakpoints. DataTable owns its surface
+and topbar insets; place compact FilterLayout in `topbarContent`, or use DataView.
 Dashboard KPIs use Metric/MetricGrid/MetricBar; quotas use the focused UsageCard
 owner. See [analytics selection](docs/consumer-skill/references/analytics.md) and
 the [resource page recipe](docs/consumer-skill/examples/detail.tsx).
@@ -293,7 +388,7 @@ and ordinary Card subjects without app chrome. The packaged
 offers and real navigation links using the same theme and inset owners.
 
 
-Popover content uses `type="display"` for substantive content and `type="menu"` for collections. Mixed searchable menus use flush shells and compact region insets. `--radius` defaults to 12px. Cards and popup/command shells use `rounded-radius`; controls, collection/navigation rows and nested bodies use the shared, height-bounded `rounded-inner` role (normally 9px). Both derive from the same public root. Consumers inherit these recipes; see the [theme contract](docs/consumer-skill/references/theming.md) for scaling and custom roots. No separate surface/control radius setting is introduced.
+Popover content uses `type="display"` for substantive content and `type="menu"` for collections. Mixed searchable menus use flush shells and compact region insets. `--radius` defaults to 12px. Cards and popup/command shells use `rounded-surface`; controls, collection/navigation rows and nested bodies use the shared, height-bounded `rounded-radius` role (normally 9px). Both derive from the same public root. Consumers inherit these recipes; see the [theme contract](docs/consumer-skill/references/theming.md) for scaling and custom roots. No separate surface/control radius setting is introduced.
 
 
 ## Agent skill and consumer references
@@ -342,7 +437,7 @@ visual review remain separate.
 
 Maintainers run `npm run docs:sync-skill` after changes to exports, types, selection guidance, peers or tokens. `npm run check:skill` requires a fresh library build and rejects stale source-backed references, built declaration exports and broken reference links. `prepack` checks source-backed references without rebuilding; `prepublishOnly` builds fresh assets and verifies built guidance. `check:package` verifies the complete shipped skill, strictly compiles the basic recipes without optional peers and every recipe with its required peers, and executes installed shell/resource-page and workflow checks.
 
-Build portable consumer documentation with `npm run build` followed by `npm run build:docs`. The generated [static entry](dist-docs/index.html) links to `dist-docs/2.0.4/` for the current version. Each version preserves the complete skill and all declaration files, supports search with the same finder, and uses relative links under any hosting subdirectory. Serve the entire artifact over HTTP; it needs no external CDN. Run `npm run check:static-docs` to check generated asset paths. The future hosting destination remains pending.
+Build portable consumer documentation with `npm run build` followed by `npm run build:docs`. The generated [static entry](dist-docs/index.html) links to `dist-docs/2.0.5/` for the current version. Each version preserves the complete skill and all declaration files, supports search with the same finder, and uses relative links under any hosting subdirectory. Serve the entire artifact over HTTP; it needs no external CDN. Run `npm run check:static-docs` to check generated asset paths. The future hosting destination remains pending.
 
 `npm run check:agent` runs focused agent-consumption fixtures and built skill alignment. `npm run check:release` performs the real serial local build/package/browser/agent/static-documentation gate; it does not publish or deploy. `npm run check:quick` runs the everyday core (contract, lint, design lint, typecheck, unit tests, build). See the [release guide](docs/releasing.md) and [draft changelog](CHANGELOG.md). There is no hosted CI; every check runs locally, when you choose. These commands verify locally; publication and deployment remain separate actions.
 

package/dist/{accordion-96o0pN62.js → accordion-B9MHG0cT.js}

@@ -1,13 +1,13 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-CF3c95Io.js";
-import { c as n } from "./typography-CSyJrh28.js";
+import { t } from "./utils-B6kKb8jB.js";
+import { c as n } from "./typography-BQnine1k.js";
 import { t as r } from "./focus-recipes-B653VaLq.js";
-import { t as i } from "./motion-recipes-ChBg4HBq.js";
-import { t as a } from "./structure-C0V0_Fyf.js";
+import { t as i } from "./motion-recipes-DitYv6P2.js";
+import { t as a } from "./structure-DuxKl954.js";
 import { t as o } from "./interaction-recipes-XR9ZpVYL.js";
 import { t as s } from "./disclosure-panel-B0HFNZ9x.js";
-import { t as c } from "./icon-badge-COWbCCWu.js";
+import { t as c } from "./icon-badge-DZF-YjQp.js";
 import * as l from "react";
 import { forwardRef as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
@@ -61,7 +61,7 @@ function v({ className: e, children: n, render: r, ...a }) {
 var y = l.forwardRef(function({ className: e, ...n }, r) {
 	return /* @__PURE__ */ d(h, {
 		ref: r,
-		className: t("accordion--component rounded-radius border-border bg-card text-card-foreground", e),
+		className: t("accordion--component rounded-surface border-border bg-card text-card-foreground", e),
 		...n
 	});
 });
@@ -111,12 +111,12 @@ S.displayName = "AccordionContent";
 //#region src/components/base/accordion/accordion-variants.ts
 var C = {
 	card: "gap-space-md border-0 rounded-none bg-transparent text-inherit overflow-visible",
-	bordered: "rounded-radius border border-border bg-card text-card-foreground overflow-hidden",
-	flat: "border-0 rounded-none bg-transparent text-inherit overflow-visible"
+	bordered: "rounded-surface border border-border bg-card text-card-foreground overflow-hidden",
+	flat: "-mx-row-x w-auto border-0 rounded-none bg-transparent text-inherit overflow-visible"
 }, w = {
-	card: "border border-border bg-card text-card-foreground rounded-radius overflow-hidden",
+	card: "border border-border bg-card text-card-foreground rounded-surface overflow-hidden",
 	bordered: "bg-transparent not-last:border-b border-border",
-	flat: "border-0 not-last:border-b-0 bg-transparent rounded-radius overflow-hidden"
+	flat: "border-0 not-last:border-b-0 bg-transparent rounded-surface overflow-hidden"
 }, T = "items-center gap-space-lg px-row-x py-row-y text-start hover:no-underline", E = {
 	withMedallion: "ps-[calc(var(--row-x)*var(--space-scale)+var(--avatar)+0.75rem*var(--space-scale))] pe-row-x pt-0",
 	withInline: "ps-[calc(var(--row-x)*var(--space-scale)+var(--icon)*1.25+0.75rem*var(--space-scale))] pe-row-x pt-0",
@@ -205,4 +205,4 @@ function A({ iconStyle: e, icon: n, reserveSpace: r }) {
 //#endregion
 export { C as a, S as c, w as i, b as l, D as n, T as o, E as r, y as s, O as t, x as u };
 
-//# sourceMappingURL=accordion-96o0pN62.js.map
+//# sourceMappingURL=accordion-B9MHG0cT.js.map

package/dist/accordion-B9MHG0cT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-B9MHG0cT.js","names":["Accordion","AccordionPrimitive","AccordionItem","AccordionTrigger","AccordionContent","Accordion","React","PrimitiveAccordion","PrimitiveAccordionItem","PrimitiveAccordionTrigger","PrimitiveAccordionContent","Accordion","Text","focusRecipes","motionRecipes","Stack","interactionRecipes","DisclosurePanelElement","IconBadge","React$1","Accordion$2","props","Accordion","cn","className","AccordionItem$1","AccordionTrigger$1","children","ChevronDownIcon","AccordionContent$1","panelProps","Accordion$1","AccordionItem","AccordionTrigger","isSimpleText","AccordionContent","ACCORDION_ROOT_VARIANT_CLASS","ACCORDION_ITEM_VARIANT_CLASS","ACCORDION_TRIGGER_BASE","ACCORDION_CONTENT_PADDING","defaultSmartAccordionStrings","SmartAccordion","forwardRef","stringsProp","strings","useStrings","hasIconColumn","iconStyle","items","item","contentPadding","triggerGridClass","onValueChange","next","variant","itemClassName","triggerClassName","SmartAccordionIcon","isSimpleContent","contentClassName","content","reserveSpace","icon"],"sources":["../src/components/ui/accordion.tsx","../src/components/base/accordion/accordion.tsx","../src/components/base/accordion/accordion-variants.ts","../src/components/base/accordion/accordion.strings.ts","../src/components/base/accordion/smart-accordion.tsx"],"sourcesContent":["import { DisclosurePanelElement } from './disclosure-panel';\nimport { motionRecipes } from '../../lib/motion-recipes';\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"../../lib/utils\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"border-border accordion--component flex w-full flex-col border box-border overflow-hidden\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-border accordion-item--component border-b last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"accordion-header m-0\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\"accordion-trigger--component flex w-full items-center justify-between border-0 bg-transparent outline-none cursor-pointer box-border\", className)}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className={cn(\"accordion-trigger--icon size-icon text-muted-foreground shrink-0 [[aria-expanded=true]_&]:rotate-180\", motionRecipes.chevron)} />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  render,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className={cn(\"accordion-content--component box-border text-inherit h-(--accordion-panel-height)\", motionRecipes.disclosure, className)}\n      {...props}\n      render={(panelProps, state) => <DisclosurePanelElement props={panelProps} state={state} render={render} heightVariable=\"--accordion-panel-height\" />}\n    >\n      {children}\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n\n","/**\n * Accordion — tokenized base wrapper around the shadcn/Base UI primitive.\n *\n * The internal primitive intentionally keeps shadcn's roomy defaults. This\n * public layer calibrates them for admin surfaces: radius tokens, 12px row\n * insets, density-aware vertical rhythm, quiet hover/focus treatments, and\n * matching trigger/content columns. Consumers retain the complete compound\n * API and can override any treatment with `className`.\n */\nimport * as React from 'react';\n\nimport {\n\tAccordion as PrimitiveAccordion,\n\tAccordionContent as PrimitiveAccordionContent,\n\tAccordionItem as PrimitiveAccordionItem,\n\tAccordionTrigger as PrimitiveAccordionTrigger,\n} from '../../ui/accordion';\nimport { Text } from '../../typography';\nimport { cn } from '../../../lib/utils';\nimport { focusRecipes } from '../../../lib/focus-recipes';\nimport { interactionRecipes } from '../../../lib/interaction-recipes';\n\nexport type AccordionProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordion>;\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionItem>;\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionTrigger>;\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionContent>;\n\nconst Accordion = React.forwardRef<React.ElementRef<typeof PrimitiveAccordion>, AccordionProps>(\n\tfunction Accordion({ className, ...props }, ref) {\n\t\treturn (\n\t\t\t<PrimitiveAccordion\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion--component rounded-surface border-border bg-card text-card-foreground',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAccordion.displayName = 'Accordion';\n\nconst AccordionItem = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionItem>, AccordionItemProps>(\n\tfunction AccordionItem({ className, ...props }, ref) {\n\t\treturn (\n\t\t\t<PrimitiveAccordionItem\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-item--component border-border',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionTrigger>, AccordionTriggerProps>(\n\tfunction AccordionTrigger({ className, children, ...props }, ref) {\n\t\tconst isSimpleText = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n\t\treturn (\n\t\t\t<PrimitiveAccordionTrigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-trigger--component min-h-action items-center gap-space-lg px-row-x py-row-y',\n\t\t\t\t\t`text-start text-inherit text-sm font-medium transition-colors ${interactionRecipes.rowHover} hover:no-underline`,\n\t\t\t\t\t// Inset: the shell clips its rounded corners, so an outer ring was cut off.\n\t\t\t\t\t`focus-visible:z-10 ${focusRecipes.inset}`,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{isSimpleText ? (\n\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className=\"text-inherit\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Text>\n\t\t\t\t) : children}\n\t\t\t</PrimitiveAccordionTrigger>\n\t\t);\n\t},\n);\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nconst AccordionContent = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionContent>, AccordionContentProps>(\n\tfunction AccordionContent({ className, children, ...props }, ref) {\n\t\tconst isSimpleText = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n\t\treturn (\n\t\t\t<PrimitiveAccordionContent\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-content--component px-row-x pb-space-lg text-sm',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{isSimpleText ? (\n\t\t\t\t\t<Text tag=\"div\" size=\"inherit\" lineHeight=\"relaxed\" className=\"text-inherit\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Text>\n\t\t\t\t) : children}\n\t\t\t</PrimitiveAccordionContent>\n\t\t);\n\t},\n);\nAccordionContent.displayName = 'AccordionContent';\n\nexport {\n\tAccordion,\n\tAccordionItem,\n\tAccordionTrigger,\n\tAccordionContent,\n};\n","/**\n * Shared accordion-shell variant classes — used by both `SmartAccordion`\n * and any blocks surface that builds on `base/accordion` directly\n * (e.g. `blocks/onboarding/checklist`).\n *\n * Exported because two consumers already keep it in lockstep; a third\n * one will copy this exact map. Centralising means a future tweak\n * (e.g. tighten `card` items to `border-border/70`) propagates.\n *\n * Padding tokens for trigger / content live alongside so the rhythm\n * is shared too:\n *\n * - Trigger: `gap-space-lg px-row-x py-row-y` — density-driven,\n *   `<UIProvider>`\n *   override flows through.\n * - Content padding accounts for the base panel's `px-row-x`.\n *   Medallion and inline rows use shared media/spacing tokens, and\n *   no-icon rows add no extra left padding so body copy tracks the\n *   trigger text column instead of drifting.\n */\nimport type { DisclosureSurface } from '../../../lib/component-vocabulary';\n\nexport type AccordionShellVariant = DisclosureSurface;\n\n// Flat sits inside a surface that already owns the inset. It outdents by the row\n// inset, so trigger and panel text align with that surface's content edge while\n// the hover fill and focus edge keep their room in the surface gutter.\nexport const ACCORDION_ROOT_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'gap-space-md border-0 rounded-none bg-transparent text-inherit overflow-visible',\n\tbordered: 'rounded-surface border border-border bg-card text-card-foreground overflow-hidden',\n\tflat: '-mx-row-x w-auto border-0 rounded-none bg-transparent text-inherit overflow-visible',\n};\n\n// The chevron and the revealed panel carry the open state; an open item is not\n// tinted into a box. Rounded items clip their trigger so its inset focus ring and\n// hover fill follow the item's corners.\nexport const ACCORDION_ITEM_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'border border-border bg-card text-card-foreground rounded-surface overflow-hidden',\n\tbordered: 'bg-transparent not-last:border-b border-border',\n\tflat: 'border-0 not-last:border-b-0 bg-transparent rounded-surface overflow-hidden',\n};\n\nexport const ACCORDION_TRIGGER_BASE =\n\t'items-center gap-space-lg px-row-x py-row-y text-start hover:no-underline';\n\n/**\n * Content-padding presets keyed off the leading-icon width. Use\n * `withMedallion` when the trigger renders a default `IconBadge`\n * plus the shared row gap so body text aligns under the title at every\n * consumer density.\n */\nexport const ACCORDION_CONTENT_PADDING = {\n\t// Composed from root tokens so a scoped density/space boundary applies (the\n\t// `--spacing-*` aliases resolve once at :root inside arbitrary values).\n\twithMedallion: 'ps-[calc(var(--row-x)*var(--space-scale)+var(--avatar)+0.75rem*var(--space-scale))] pe-row-x pt-0',\n\twithInline: 'ps-[calc(var(--row-x)*var(--space-scale)+var(--icon)*1.25+0.75rem*var(--space-scale))] pe-row-x pt-0',\n\twithoutIcon: 'px-row-x pt-0',\n} as const;\n","/**\n * Strings for `SmartAccordion`. There aren't many — Radix handles the\n * trigger ARIA states automatically, so the only library-owned copy is\n * the optional landmark label on the wrapping nav region. Consumers\n * override per-item `title` / `badge` / `content` directly via\n * `SmartAccordionItem` props (the strings live in the data, not here).\n */\nexport interface SmartAccordionStrings {\n\t/**\n\t * Sets `aria-label` on the wrapping element so screen readers can name\n\t * the accordion region. Optional — when absent, no aria-label is set.\n\t */\n\tregionAriaLabel?: string;\n}\n\nexport const defaultSmartAccordionStrings: SmartAccordionStrings = {\n\tregionAriaLabel: undefined,\n};\n","/**\n * SmartAccordion — the canonical \"icon + title + optional badge + body\"\n * accordion pattern, with three visual variants for the surface chrome\n * (`card` | `bordered` | `flat`) and three icon framings (`medallion` |\n * `inline` | `none`).\n *\n * Composes the wrapped `base/accordion` parts (rule 2 — blocks-style\n * convenience built from re-exports, not the raw shadcn primitive).\n *\n * For richer rows (multi-line metadata, custom layouts), drop down to\n * the compound API:\n *\n *     import { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n *       from '.';\n */\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconBadge } from '../display/icon-badge';\nimport { Stack } from '../structure';\nimport { Text } from '../../typography';\nimport { useStrings } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';\nimport {\n\tACCORDION_CONTENT_PADDING,\n\tACCORDION_ITEM_VARIANT_CLASS,\n\tACCORDION_ROOT_VARIANT_CLASS,\n\tACCORDION_TRIGGER_BASE,\n} from './accordion-variants';\nimport { defaultSmartAccordionStrings } from './accordion.strings';\nimport type {\n\tSmartAccordionIconStyle,\n\tSmartAccordionProps,\n} from './accordion.types';\n\n/**\n * Bounded accordion composition for repeated icon, title, description, badge,\n * and body sections. Use the compound Accordion parts when row structure or\n * per-item presentation differs.\n */\nexport const SmartAccordion = forwardRef<HTMLDivElement, SmartAccordionProps>(function SmartAccordion({\n\titems,\n\tmultiple = false,\n\tdefaultValue,\n\tvalue,\n\tonValueChange,\n\tvariant = 'bordered',\n\ticonStyle = 'inline',\n\tclassName,\n\titemClassName,\n\ttriggerClassName,\n\tcontentClassName,\n\tstrings: stringsProp,\n}, ref) {\n\tconst strings = useStrings(defaultSmartAccordionStrings, stringsProp);\n\tconst hasIconColumn = iconStyle !== 'none' && items.some((item) => item.icon != null);\n\tconst contentPadding =\n\t\t!hasIconColumn\n\t\t\t? ACCORDION_CONTENT_PADDING.withoutIcon\n\t\t\t: iconStyle === 'medallion'\n\t\t\t? ACCORDION_CONTENT_PADDING.withMedallion\n\t\t\t: ACCORDION_CONTENT_PADDING.withInline;\n\tconst triggerGridClass = !hasIconColumn\n\t\t? 'grid-cols-[minmax(0,1fr)]'\n\t\t: 'grid-cols-[auto_minmax(0,1fr)]';\n\treturn (\n\t\t<Accordion\n\t\t\tref={ref}\n\t\t\tmultiple={multiple}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tvalue={value}\n\t\t\tonValueChange={\n\t\t\t\tonValueChange\n\t\t\t\t\t? (next) => onValueChange(next as string[])\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-label={strings.regionAriaLabel}\n\t\t\tdata-variant={variant}\n\t\t\tdata-icon-style={iconStyle}\n\t\t\tclassName={cn('smart-accordion--component', ACCORDION_ROOT_VARIANT_CLASS[variant], className)}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<AccordionItem\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tvalue={item.value}\n\t\t\t\t\tclassName={cn('smart-accordion--item', ACCORDION_ITEM_VARIANT_CLASS[variant], itemClassName)}\n\t\t\t\t>\n\t\t\t\t\t<AccordionTrigger\n\t\t\t\t\t\tclassName={cn('smart-accordion--trigger', ACCORDION_TRIGGER_BASE, triggerClassName)}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={cn('grid min-w-0 flex-1 items-center gap-x-space-lg', triggerGridClass)}>\n\t\t\t\t\t\t\t<SmartAccordionIcon\n\t\t\t\t\t\t\t\ticonStyle={iconStyle}\n\t\t\t\t\t\t\t\ticon={item.icon}\n\t\t\t\t\t\t\t\treserveSpace={hasIconColumn}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Stack render={<span />} gap=\"dense\" className=\"smart-accordion--heading flex-1\">\n\t\t\t\t\t\t\t\t<span className=\"flex min-w-0 flex-wrap items-center gap-x-space-md gap-y-space-xs\">\n\t\t\t\t\t\t\t\t\t{isSimpleContent(item.title) ? (\n\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"inherit\" weight=\"semibold\" className=\"smart-accordion--title min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t) : item.title}\n\t\t\t\t\t\t\t\t\t{item.badge != null && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"smart-accordion--badge inline-flex shrink-0\">{item.badge}</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{!!item.description && (\n\t\t\t\t\t\t\t\t\tisSimpleContent(item.description) ? (\n\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"secondary\" className=\"smart-accordion--description min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t) : item.description\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AccordionTrigger>\n\t\t\t\t\t<AccordionContent\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'smart-accordion--content',\n\t\t\t\t\t\t\tcontentPadding,\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isSimpleContent(item.content) ? (\n\t\t\t\t\t\t\t<Text tag=\"div\" type=\"secondary\" lineHeight=\"relaxed\">\n\t\t\t\t\t\t\t\t{item.content}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : item.content}\n\t\t\t\t\t</AccordionContent>\n\t\t\t\t</AccordionItem>\n\t\t\t))}\n\t\t</Accordion>\n\t);\n});\n\nSmartAccordion.displayName = 'SmartAccordion';\n\nfunction isSimpleContent(content: ReactNode): content is string | number | bigint {\n\treturn typeof content === 'string' || typeof content === 'number' || typeof content === 'bigint';\n}\n\nfunction SmartAccordionIcon({\n\ticonStyle,\n\ticon,\n\treserveSpace,\n}: {\n\ticonStyle: SmartAccordionIconStyle;\n\ticon?: ReactNode;\n\treserveSpace: boolean;\n}) {\n\tif (iconStyle === 'none' || !reserveSpace) return null;\n\tif (!icon) {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'smart-accordion--icon inline-flex shrink-0',\n\t\t\t\t\ticonStyle === 'inline' ? 'size-icon-lg' : 'size-avatar',\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t}\n\tif (iconStyle === 'inline') {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"smart-accordion--icon inline-flex size-icon-lg shrink-0 self-center text-muted-foreground [&>svg]:size-icon\"\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t</span>\n\t\t);\n\t}\n\treturn (\n\t\t<IconBadge size=\"md\" tone=\"neutral\" shape=\"circle\" aria-hidden=\"true\" className=\"smart-accordion--icon self-center\">\n\t\t\t{icon}\n\t\t</IconBadge>\n\t);\n}\n"],"mappings":"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"}

package/dist/{action-menu-CHgs8vmj.js → action-menu-Dr8K-ghE.js}

@@ -1,13 +1,13 @@
 "use client";
-import { s as e, v as t } from "./ui-provider-CQCuCBcy.js";
+import { S as e, d as t } from "./ui-provider-C-74NVLc.js";
 import { useStrings as n } from "./lib/strings.js";
-import { t as r } from "./utils-CF3c95Io.js";
-import { n as i } from "./buttons-BbfzgczK.js";
-import { c as a } from "./typography-CSyJrh28.js";
+import { t as r } from "./utils-B6kKb8jB.js";
+import { n as i } from "./buttons-BedGfygC.js";
+import { c as a } from "./typography-BQnine1k.js";
 import { t as o } from "./composition.recipes-COdiFhxB.js";
-import { i as s, t as c } from "./popover.recipes-D3j8R8Yp.js";
-import { t as l } from "./collection-content-C0e8SsTm.js";
-import { a as u, d, g as f, i as p, n as m, o as h, r as g, s as _, t as v } from "./dropdown-menu-CjY8Vt7W.js";
+import { i as s, t as c } from "./popover.recipes-DdiEp0rd.js";
+import { t as l } from "./collection-content-gDh1v6O4.js";
+import { a as u, d, g as f, i as p, n as m, o as h, r as g, s as _, t as v } from "./dropdown-menu-CLs8Lihj.js";
 import y, { isValidElement as b } from "react";
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 import { MoreHorizontal as w } from "lucide-react";
@@ -149,64 +149,67 @@ function F(e) {
 function I(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-var L = y.forwardRef(function({ actions: o, label: c, icon: l = T.icon, srText: u, context: d = "inline", buttonProps: m, align: h = "end", side: _ = "bottom", contentClassName: b = "", width: w = "w-auto", closeOnSelect: D = !0, density: k = "default", labelVisibility: j = "visible", preserveOrder: M = !1, renderLink: N, renderTrigger: P, strings: L }, R) {
-	let [z, B] = y.useState(!1), { defaultScale: V } = e(), H = n(E, L), U = u ?? H.openMenuLabel, W = y.useMemo(() => O(o, M), [o, M]);
-	if (W.length === 0) return null;
-	let G = !!c && j === "visible", K = !!c && j === "responsive", q = T.context[d] ?? T.context.inline, J = G ? m?.size ?? "sm" : t(m?.size, V), Y = J === "sm" ? "size-action-sm" : J === "lg" ? "size-action-lg" : "size-action", X = {
-		tone: q.tone,
-		buttonStyle: q.buttonStyle,
-		size: J,
-		iconOnly: !G,
-		className: G ? void 0 : K ? `${Y} p-0 sm:w-auto sm:gap-space-sm sm:px-control-sm` : r(`${Y} p-0`, q.glyph)
-	}, { tone: Z = q.tone, buttonStyle: Q = q.buttonStyle, size: ee = J, iconOnly: te = !G, className: ne, ...re } = {
-		...X,
-		...m,
-		className: r(X.className, m?.className)
-	}, ie = j === "hidden" ? "sr-only" : j === "responsive" ? "sr-only sm:not-sr-only" : void 0, $ = A(l), ae = c ? /* @__PURE__ */ C(x, { children: [$, /* @__PURE__ */ S(a, {
+var L = y.forwardRef(function({ actions: o, open: c, onOpenChange: l, finalFocus: u, label: d, icon: m = T.icon, srText: h, context: _ = "inline", buttonProps: b, align: w = "end", side: D = "bottom", contentClassName: k = "", width: j = "w-auto", closeOnSelect: M = !0, density: N = "default", labelVisibility: P = "visible", preserveOrder: L = !1, renderLink: R, renderTrigger: z, strings: B }, V) {
+	let [H, U] = y.useState(!1), W = c ?? H, { defaultScale: G } = t(), K = n(E, B), ee = h ?? K.openMenuLabel, q = y.useMemo(() => O(o, L), [o, L]);
+	if (q.length === 0) return null;
+	let J = !!d && P === "visible", te = !!d && P === "responsive", Y = T.context[_] ?? T.context.inline, X = J ? b?.size ?? "sm" : e(b?.size, G), Z = X === "sm" ? "size-action-sm" : X === "lg" ? "size-action-lg" : "size-action", Q = {
+		tone: Y.tone,
+		buttonStyle: Y.buttonStyle,
+		size: X,
+		iconOnly: !J,
+		className: J ? void 0 : te ? `${Z} p-0 sm:w-auto sm:gap-space-sm sm:px-control-sm` : r(`${Z} p-0`, Y.glyph)
+	}, { tone: ne = Y.tone, buttonStyle: re = Y.buttonStyle, size: ie = X, iconOnly: ae = !J, className: oe, ...se } = {
+		...Q,
+		...b,
+		className: r(Q.className, b?.className)
+	}, ce = P === "hidden" ? "sr-only" : P === "responsive" ? "sr-only sm:not-sr-only" : void 0, $ = A(m), le = d ? /* @__PURE__ */ C(x, { children: [$, /* @__PURE__ */ S(a, {
 		tag: "span",
 		size: "inherit",
 		weight: "medium",
 		lineHeight: "tight",
-		className: r("whitespace-nowrap text-inherit", ie),
-		children: c
+		className: r("whitespace-nowrap text-inherit", ce),
+		children: d
 	})] }) : /* @__PURE__ */ C(x, { children: [$, /* @__PURE__ */ S(a, {
 		tag: "span",
 		size: "inherit",
 		className: "sr-only",
-		children: U
+		children: ee
 	})] });
 	return /* @__PURE__ */ C(v, {
-		open: z,
-		onOpenChange: B,
-		children: [/* @__PURE__ */ S(f, { render: P ?? ((e) => {
+		open: W,
+		onOpenChange: (e, t) => {
+			l?.(e, t), c === void 0 && !t.isCanceled && U(e);
+		},
+		children: [/* @__PURE__ */ S(f, { render: z ?? ((e) => {
 			let { ref: t } = e, n = (e) => {
-				I(t, e), I(R, e);
+				I(t, e), I(V, e);
 			};
 			return /* @__PURE__ */ S(i, {
-				...re,
+				...se,
 				...e,
 				ref: n,
 				type: "button",
-				tone: Z,
-				buttonStyle: Q,
-				size: ee,
-				iconOnly: te,
-				"data-context": d,
-				className: r("action-menu--component", ne, e.className),
-				children: ae
+				tone: ne,
+				buttonStyle: re,
+				size: ie,
+				iconOnly: ae,
+				"data-context": _,
+				className: r("action-menu--component", oe, e.className),
+				children: le
 			});
 		}) }), /* @__PURE__ */ S(g, {
-			density: k === "table" ? "compact" : k,
-			align: h,
-			side: _,
-			className: r("action-menu--content", w, s.menuMin, b),
+			finalFocus: u,
+			density: N === "table" ? "compact" : N,
+			align: w,
+			side: D,
+			className: r("action-menu--content", j, s.menuMin, k),
 			children: /* @__PURE__ */ S(p, {
 				className: "action-menu--group",
 				children: F({
-					actions: W,
-					density: k,
-					closeOnSelect: D,
-					renderLink: N
+					actions: q,
+					density: N,
+					closeOnSelect: M,
+					renderLink: R
 				})
 			})
 		})]
@@ -278,4 +281,4 @@ R.displayName = "ActionButtons";
 //#endregion
 export { L as n, E as r, R as t };
 
-//# sourceMappingURL=action-menu-CHgs8vmj.js.map
+//# sourceMappingURL=action-menu-Dr8K-ghE.js.map