@kerfjs/ui 5.0.0-beta.94 → 5.0.0-beta.96

package/llms.txt

@@ -27,6 +27,8 @@ twice. Check contrast in both color schemes over the actual backdrop. See
 For arbitrary interactive help or popup content, use `openAnchoredSurface` or
 `openAnchoredSurfaceAt` from `@kerfjs/ui/anchored-surface`; see
 [AnchoredSurface](./docs/anchored-surface.md). The app owns content and actions.
+Inside a native `<dialog>`, `wa-dialog`, or `wa-drawer`, the surface stays
+interactive and closes with the dialog.
 For a public subpath containing several visual components, use a folder with one
 component per source file and one owned stylesheet per visual component. Keep its
 compatibility entrypoints implementation-free: JavaScript/TypeScript only re-exports
@@ -201,17 +203,24 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   own the geometry (8px inline margin + 1px border + 8px padding). Render an
   ordinary surface-like child as `ContentItem` (`@kerfjs/ui/content-item`) with
   typed `frame` (`none`/`framed`) and `shape` (`rounded`/`pill`) props instead
-  of hand-writing `<div class="kui-content-item">`. Do not add a
+  of hand-writing `<div class="kui-content-item">`. For a chat transcript, set
+  `bubble="start"` (other participants) or `bubble="end"` with
+  `appearance="brand-loud"` (the person's own messages): the item fits its
+  message up to 80% of the row. Do not add a
   container padding on top of a content-item's own margin — pick one owner. Use
   `.kui-content` for 24px major vertical rhythm.
 - **Opt into document globals explicitly.** Import `@kerfjs/ui/document.css`
   once for border-box sizing, token-backed body/link presentation, inherited
-  native table-cell and form-control font metrics, and zero body
-  margin. Put `.kui-app-root` on the one direct mount container only when a
+  native table-cell and form-control font metrics, zero body margin, and
+  zero-specificity semantic cursors for native controls (pointer, not-allowed
+  when disabled, text on text inputs). Put `.kui-app-root` on the one direct mount container only when a
   percentage-height shell needs the provided `html` → `body` → app-root height
-  chain. The baseline is not part of `styles.css` or component browser imports.
+  chain. Add `data-viewport="locked"` to that body-child root for a
+  full-viewport shell whose document never scrolls (`100dvh` and
+  `overflow: clip` on `html`, `body`, and the root). The baseline is not part of `styles.css` or component browser imports.
 - **Use compact layout options where needed.** `Text flush lineHeight="tight"`
-  fits short dialog copy; `ValueTable density="compact"` reduces row spacing,
+  fits short dialog copy, and `Text align="center"` centers wrapping status
+  copy; `ValueTable density="compact"` reduces row spacing,
   with public row column, padding, and gap tokens for specific metadata layouts.
   `ToolbarText size="xsmall"` suits a dense rail heading. The
   `TokenSearchField` editor shrinks in narrow groups; its minimum width can be
@@ -229,7 +238,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   full row and a reduced-motion-aware downward entrance.
   `--kui-toolbar-inset: 0px` removes an embedded Toolbar's outer padding and
   corresponding minimum-height allowance while preserving its zone gap and
-  safe-area compensation.
+  safe-area compensation. For a shorter header embedded in a panel or card,
+  pass `density="compact"` (40px: a 34px control band and 3px block insets)
+  and give its groups `size="compact"`; never shrink a Toolbar with CSS.
+  Composites forward `density` from their `ToolbarConfig` (Workbench panel,
+  main, and bottom toolbars, CollapsiblePanel, NavStack, SplitView) and size
+  the groups they compose (panel toggles, the back button) to match; pass
+  `density` to `CollapsiblePanelRelocated` when its toolbar is compact.
 - **Position region restore controls declaratively.** A ResizableRegion has a
   background token, `contentOverflow="visible"` for an anchored popup,
   top/bottom `restorePosition`, typed `restoreInset`, and
@@ -239,7 +254,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   gives option rows more room. `multiline` wraps labels, with
   `multilineIconAlign="center"` when the icon should center on the whole copy.
   `divider` owns row separators and `state="drag-target"` paints the drop
-  target. Public ListItem tokens set row, icon, label, and trailing geometry;
+  target. For a reorderable list, set `draggable` + `itemId` on `ListItem`,
+  `ListItemLink`, or `ListActionRow` rows and call `wireListReorder` (from
+  `@kerfjs/ui/wire-list-reorder`) once; it paints the dimmed dragging rows and
+  the before/after insertion line, supports Alt+Shift+ArrowUp/ArrowDown, and
+  reports `{ listId, sourceIds, target: { id, position }, source }` for
+  `reorderListItems`. The `dragging` / `dropPosition` props render the same
+  states from app-owned drag state. Public ListItem tokens set row, icon, label, and trailing geometry;
   ListHeader `size="xs|sm|m|l|xl"` sets label scale independently of
   `headingLevel` (`sm` keeps the current FieldLabel-sized uppercase style;
   `m`/`l`/`xl` match themed h5/h4/h3). Its height, title padding, and border
@@ -362,8 +383,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   row, as in the catalog resource footer. `PopupMenu` items also support nested `submenu`
   actions, headings, dividers, checked or trailing choice marks, danger tone,
   and disabled reasons; nested headings/dividers stay out of keyboard choices;
-  use `context` with `openPopupMenuAt`/`closePopupMenu` for pointer-anchored row
-  menus. Do not force a dropdown or button width. Nothing
+  use `context` with `anchor` + `openPopupMenu` (or `openPopupMenuAt`) and
+  `closePopupMenu` for pointer-anchored row menus; the menu owns its
+  zero-footprint anchor host, so add no wrapper or CSS. `openPopupMenuAt`
+  also opens a button-triggered menu at the pointer for one opening. A row's
+  trailing "…" overflow menu is `ListActionRow`'s `trailingMenu` (`label`,
+  `icon`, `items`, optional `placement` and `disabled`), which renders a
+  `PopupMenu` as the row's sibling trailing control. Do not force a dropdown or button width. Nothing
   wraps inside a group: an icon sits beside its label on one row, and a
   `ToolbarText` is one ellipsized line unless you opt into `wrap`/`maxLines`. A
   Select or PopupMenu trigger drops its focus ring while its popup is open and
@@ -378,8 +404,11 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   divider to make it look right.
 - **Use one direct toolbar composition for panel/dialog/page headings.** Put an
   optional icon in a `ToolbarControlGroup`, an extra-large `ToolbarText` directly
-  in the leading zone, and actions in a trailing group. Supporting copy is
-  app-owned content below. Do not create a private heading wrapper or restyle the
+  in the leading zone, and actions in a trailing group. A short supporting
+  line ("Changes save automatically.") is the `ToolbarText` `description`:
+  quiet, one truncating line under the title, aligned with its text, with
+  `descriptionId` for `aria-describedby`. Longer copy is app-owned content
+  below. Do not create a private heading wrapper or restyle the
   toolbar. A narrow peripheral rail or drawer, where extra-large would truncate
   at its minimum size, names itself with the default `ToolbarText` size.
   `ToolbarText size="xlarge-fixed"` keeps the 20px `--kui-font-l` heading step;
@@ -494,6 +523,10 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   `onRemoveToken`, ArrowRight moves the caret past a trailing chip), and an
   `onEdit({id, editor, event})` input callback (the `InputEvent` lets you gate on `inputType`/`data`) — so the app can drop its own keydown/input
   boilerplate while still owning parsing and controlled token state.
+  When `onEdit` or `onRemoveToken` changes tokens and the controlled render
+  replaces the focused editor, the helper hands focus and caret to the new
+  editor in the same task (end stays at end), so do not add a refocus
+  `MutationObserver` or `requestAnimationFrame`.
 - **Placeholder loading state, don't rebuild it.** For a value or component that is
   still loading, set `placeholder` on the component (`Select`, `ListHeader`,
   `ListItem`, `ValueTableRow`, `SegmentedControl`, `StateBanner`,
@@ -523,6 +556,69 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
 - **Configure StateBanner copy and action placement.** `copyLayout="stacked"`
   puts detail below the title and badge; `actionPlacement="below"` gives the
   action a separate trailing row. The inline defaults remain compact.
+  `presentation="strip"` renders a flush, square, full-width band for a
+  layout edge with tone-colored `dividerSides` (bottom by default) instead of
+  the inset rounded card; never restyle a card into a strip.
+- **Use `SplitButton` for a primary action with options.** One loud semantic
+  fill with a native primary button and an options trigger (`aria-expanded`,
+  `aria-haspopup`); `tone`, `fill`, `busy`, and `disabled` are props. Never
+  build one from `wa-button-group` or app CSS on native buttons.
+- **Use `IconToggleButton` for an icon toggle outside a Toolbar.** In content or a
+  pane footer, `IconToggleButton({ icon, iconName, label, pressed, action })`
+  gives a native `aria-pressed` button the single contained toolbar group's
+  geometry; never wrap a `ToolbarControlGroup` outside a toolbar or restyle a
+  button to match it.
+- **Let an icon-state toggle skip selected chrome.** When a pressed toggle's
+  glyph already shows its state (an empty or filled star), set
+  `data-selected-chrome="none"` on that button, or `selectedChrome="none"` on
+  its `ToolbarControlGroup`; never override the group's pressed-button styles.
+- **Lay out a `ValueTable` through its props.** `labelWidth` sets a minimum
+  label column, `presentation="stacked"` puts values under labels, and
+  `stackBelow="compact" | "narrow"` stacks only while the table is narrower
+  than 512px/576px; do not override `--kui-value-table-row-columns`.
+- **Show selectable item summaries with `SummaryRow`.** One `role="option"`
+  per item as a list `row` or board `card`, with a state `rail`, a clamped
+  `title`, `trailingMeta`, a `metadata` line, `selected`, `dimmed`, and
+  `listEdge` rounding; the app owns the listbox and keyboard movement. Never
+  hand-roll ticket-row chrome.
+- **Group settings rows in `FramedList`.** For rows of arbitrary content in
+  one rounded frame with dividers between them (settings, account cards,
+  shortcut lists), compose `FramedListRow`s; `ValueTable` is the same frame for
+  label/value facts. Never hand-roll a `ul` with borders and row padding.
+- **Square an icon-only button with `IconButton`.** Web Awesome squares a
+  `wa-button` only for a lone `wa-icon`; with a `LucideIcon` use
+  `IconButton({ icon, iconName, label })` (label required) instead of
+  overriding `wa-button::part(base)`. Inside a `ToolbarControlGroup` keep a
+  native `button`; the group owns its geometry.
+- **Paint a strip's surface with `List surface`.** `surface="base"` or
+  `"raised"` fills a List and its insets with a solid surface (a banner strip
+  above a sunken work area); never wrap it in app CSS that sets a background.
+- **Use `Combobox` to pick or create a value by typing.** A themed native
+  input on the ARIA combobox pattern with filtered suggestions and an optional
+  create option; `wireComboboxes(root, { onCommit })` reports `{ id, value,
+created, input }`. Never use a hand-styled `<input list>` + `<datalist>`.
+- **Pick or drop files with `FilePickerTrigger` / `FileDropZone`.** Both wrap
+  a real, visually hidden file input; `wireFilePickers(root, { onFiles })`
+  reports browsed and dropped files and highlights the zone while dragging.
+  Never hand-style a file input, its label, or a dashed drop target.
+- **Swap content in place with `ContentSwap`.** Two sides share one cell;
+  `active`, `transition` (`push`, `crossfade`, `none`), and `direction` drive
+  Kerf-owned motion with an inert, hidden inactive side and reduced-motion
+  fallback. Use `NavStack` for full views with toolbars.
+- **Lay out a kanban board with `ColumnTrack`.** Equal columns that never
+  narrow below `minColumnWidth` scroll sideways; `layout="paged"` pages one
+  column at a time with a peek and snapping. Never re-track a `Grid` or
+  hand-roll scroll-snap CSS.
+- **Show ambient activity with `EdgeActivityIndicator`.** A layout-free,
+  pointer-inert top-edge strip whose bars ripple while `busy`, with an optional
+  polite `message` pill; Kerf owns the wave and reduced motion. Never hand-roll
+  fixed bars, keyframes, or a hanging pill in app CSS.
+- **Host app-level progress in `CornerStatus`.** For a non-dismissible
+  "Loading…" or "Updating… N of M" with no home beside the affected work, put
+  a `StateBanner` (`urgency="status"`) inside `CornerStatus` and call
+  `wireCornerStatus` once: a top-layer manual popover at a safe-area-aware
+  corner, with no close button, light dismiss, Escape, or focus change. Never
+  position a banner with fixed-position CSS or hide a toast's close part.
 - **Size a Select through its API.** `triggerWidth` chooses `fit-content`,
   `max-content`, or `fill`; `--kui-select-trigger-max-width` caps it. For custom
   selected text, use the public color, font-size, and font-weight tokens; the
@@ -548,17 +644,30 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   For new content without a count, use the text-free `size="dot"` form: it
   takes no children, and needs a `label` (announced as an image) or
   `ariaHidden` when its owner announces it. A `TabNavigator` tab shows the dot
-  with `badge: true` plus its required `badgeLabel`.
+  with `badge: true` plus its required `badgeLabel`. A text badge takes a
+  decorative leading `icon`, a `title` tooltip, and `data-*` `rootAttributes`
+  for app identity; never wrap a Badge or nest a `Row` in it for those.
+  For app-supplied text that can run long (a tag or category name), set
+  `maxWidth` (a `CssLength`, such as `px(160)`): the label truncates with an
+  ellipsis and string or number content becomes the hover `title`.
 - **Use `Chip` for removable tags.** Give the native remove button a delegated
   `removeAction` and a specific `removeLabel`; the application updates the tag
   list. `itemId` identifies the chip to the action handler. `size="compact"`
   gives a 20px chip and 16px remove button; `disabled` disables removal.
+- **Use `ChoiceChips` for a wrapping exclusive choice.** When one value comes
+  from a visible set too large for a `SegmentedControl` track (a nine-color
+  palette in a 560px dialog), render separate pills backed by native radios:
+  one Tab stop, arrow-key selection, and a real form value under `name`. Name
+  the group with `label` or `labelledBy`, lead choices with a `swatch`
+  (`CssColor`, or `'transparent'` for the struck-through no-color dot) or an
+  `icon`, and handle the delegated `action` on `change`. Never wrap a
+  `SegmentedControl` or button-appearance `wa-radio` set instead.
 
 ## Public exports
 
 `Badge`, `LucideIcon`, `DisclosureArrow`, `Toolbar`, `ToolbarControlGroup`, `ToolbarActionLink`, `FloatingToolbar`, `ToolbarText`, `Text`,
-`ListItem`, `ListActionRow`, `ListHeader`, `ListInsetControl`,
-`ListInsetText`, `SegmentedControl`,
+`ListItem`, `ListActionRow` (+ `wireListReorder`, `reorderListItems`), `ListHeader`, `ListInsetControl`,
+`ListInsetText`, `SegmentedControl`, `ChoiceChips`,
 `Select`, `TokenSearchField` (+ `readTokenSearchField`, `placeTokenSearchCaret`,
 `wireTokenSearchFields`), `AppTab`, `TabBar` (+ `wireTabBars`, `reorderTabs`),
 `wireScrollDividers` (scroll-state dividers for every `Pane`, `NavStack`,
@@ -628,8 +737,8 @@ details.
 
 Select menus use native viewport shifting with 10px gutters: default menus grow to content (up to 20rem), while `fitMenu` matches trigger width and long labels wrap. Keep popup sizing and position repairs out of consumer CSS.
 
-Modal `DialogSurface` bounds use typed `viewportGutter` and `maxHeight` (`CssLength` or `"viewport"`); explicit caps stay within the dynamic viewport minus both gutters. Omitted props preserve Web Awesome defaults. Application render state chooses responsive values, and preview layout remains application-owned.
+Key sibling `DialogSurface`s that render conditionally with `rootAttributes={{ "data-key": "…" }}` so a re-render morphs each dialog into itself; never wrap one in a keyed app `div`. Modal `DialogSurface` bounds use typed `viewportGutter` and `maxHeight` (`CssLength` or `"viewport"`); explicit caps stay within the dynamic viewport minus both gutters. Omitted props preserve Web Awesome defaults. Application render state chooses responsive values, and preview layout remains application-owned. `height` sets a definite bounded modal size and `bodyLayout="fill"` lets one child fill the body. `PopoverDialogSurface` is the non-modal, light-dismiss counterpart on the native Popover API, with the same size props and an `embedded` in-flow presentation.
 
-Import `@kerfjs/ui/surface-scaffold/register` once when using `DialogSurface`: it registers `wa-dialog` and repairs Web Awesome 3.12 native dialog names before the first modal opening. Headed dialogs reference the rendered title, including live slotted labels; headerless dialogs use the public `label`. Explicit host `aria-label` and pre-existing native names are preserved. Geometry-only markup stays CSS-free and does not register Web Awesome implicitly.
+Import `@kerfjs/ui/surface-scaffold/register` once when using `DialogSurface`: it registers `wa-dialog` and repairs Web Awesome 3.12 native dialog names before the first modal opening. Headed dialogs reference the rendered title, including live slotted labels; headerless dialogs use the public `label`. Explicit host `aria-label` and pre-existing native names are preserved. A host that is itself an explicit dialog (`role="dialog"` or `"alertdialog"` with its own name) keeps that name alone: the native panel is left unnamed, so one dialog carries the name. Geometry-only markup stays CSS-free and does not register Web Awesome implicitly.
 
 Toolbar visibility measurement probes and invisible state children are helper-owned and survive Kerf rerenders through `data-morph-preserve`. Actual CSS visibility stays stable while rendering removes transient parent markers, preventing geometry-driven render feedback and repeated probe recreation. Toolbar replacement, explicit internal-node removal and disposal retain their existing behavior.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.94",
+  "version": "5.0.0-beta.96",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -224,6 +224,10 @@
       "types": "./dist/wire-scroll-dividers.d.ts",
       "import": "./dist/wire-scroll-dividers.js"
     },
+    "./wire-list-reorder": {
+      "types": "./dist/wire-list-reorder.d.ts",
+      "import": "./dist/wire-list-reorder.js"
+    },
     "./wire-toolbar-visibility": {
       "types": "./dist/wire-toolbar-visibility.d.ts",
       "import": "./dist/wire-toolbar-visibility.js"
@@ -303,6 +307,11 @@
       "browser": "./dist/browser/segmented-control.js",
       "import": "./dist/segmented-control.js"
     },
+    "./choice-chips": {
+      "types": "./dist/choice-chips.d.ts",
+      "browser": "./dist/browser/choice-chips.js",
+      "import": "./dist/choice-chips.js"
+    },
     "./token-search-field": {
       "types": "./dist/token-search-field.d.ts",
       "browser": "./dist/browser/token-search-field.js",
@@ -342,6 +351,73 @@
       "types": "./dist/webawesome.d.ts",
       "import": "./dist/webawesome.js"
     },
+    "./summary-row": {
+      "types": "./dist/summary-row.d.ts",
+      "browser": "./dist/browser/summary-row.js",
+      "import": "./dist/summary-row.js"
+    },
+    "./framed-list": {
+      "types": "./dist/framed-list.d.ts",
+      "browser": "./dist/browser/framed-list.js",
+      "import": "./dist/framed-list.js"
+    },
+    "./split-button": {
+      "types": "./dist/split-button.d.ts",
+      "browser": "./dist/browser/split-button.js",
+      "import": "./dist/split-button.js"
+    },
+    "./icon-toggle-button": {
+      "types": "./dist/icon-toggle-button.d.ts",
+      "browser": "./dist/browser/icon-toggle-button.js",
+      "import": "./dist/icon-toggle-button.js"
+    },
+    "./icon-button": {
+      "types": "./dist/icon-button.d.ts",
+      "browser": "./dist/browser/icon-button.js",
+      "import": "./dist/icon-button.js"
+    },
+    "./edge-activity-indicator": {
+      "types": "./dist/edge-activity-indicator.d.ts",
+      "browser": "./dist/browser/edge-activity-indicator.js",
+      "import": "./dist/edge-activity-indicator.js"
+    },
+    "./combobox": {
+      "types": "./dist/combobox.d.ts",
+      "browser": "./dist/browser/combobox.js",
+      "import": "./dist/combobox.js"
+    },
+    "./wire-comboboxes": {
+      "types": "./dist/wire-comboboxes.d.ts",
+      "import": "./dist/wire-comboboxes.js"
+    },
+    "./file-picker": {
+      "types": "./dist/file-picker.d.ts",
+      "browser": "./dist/browser/file-picker.js",
+      "import": "./dist/file-picker.js"
+    },
+    "./wire-file-pickers": {
+      "types": "./dist/wire-file-pickers.d.ts",
+      "import": "./dist/wire-file-pickers.js"
+    },
+    "./content-swap": {
+      "types": "./dist/content-swap.d.ts",
+      "browser": "./dist/browser/content-swap.js",
+      "import": "./dist/content-swap.js"
+    },
+    "./column-track": {
+      "types": "./dist/column-track.d.ts",
+      "browser": "./dist/browser/column-track.js",
+      "import": "./dist/column-track.js"
+    },
+    "./corner-status": {
+      "types": "./dist/corner-status.d.ts",
+      "browser": "./dist/browser/corner-status.js",
+      "import": "./dist/corner-status.js"
+    },
+    "./wire-corner-status": {
+      "types": "./dist/wire-corner-status.d.ts",
+      "import": "./dist/wire-corner-status.js"
+    },
     "./state-banner": {
       "types": "./dist/state-banner.d.ts",
       "browser": "./dist/browser/state-banner.js",
@@ -403,8 +479,20 @@
     "./skeleton.css": "./dist/styles/skeleton.css",
     "./sunken-panel.css": "./dist/styles/sunken-panel.css",
     "./segmented-control.css": "./dist/styles/segmented-control.css",
+    "./choice-chips.css": "./dist/styles/choice-chips.css",
     "./token-search-field.css": "./dist/styles/token-search-field.css",
     "./state-banner.css": "./dist/styles/state-banner.css",
+    "./corner-status.css": "./dist/styles/corner-status.css",
+    "./column-track.css": "./dist/styles/column-track.css",
+    "./content-swap.css": "./dist/styles/content-swap.css",
+    "./file-picker.css": "./dist/styles/file-picker.css",
+    "./combobox.css": "./dist/styles/combobox.css",
+    "./edge-activity-indicator.css": "./dist/styles/edge-activity-indicator.css",
+    "./icon-button.css": "./dist/styles/icon-button.css",
+    "./icon-toggle-button.css": "./dist/styles/icon-toggle-button.css",
+    "./split-button.css": "./dist/styles/split-button.css",
+    "./framed-list.css": "./dist/styles/framed-list.css",
+    "./summary-row.css": "./dist/styles/summary-row.css",
     "./empty-state.css": "./dist/styles/empty-state.css",
     "./value-table.css": "./dist/styles/value-table.css",
     "./ai/*": "./ai/*",

package/vite-ux-review.d.mts

@@ -38,6 +38,45 @@ export interface UxReviewPlugin {
 /** The nearest directory at or above `start` that holds `.git`, else `start`. */
 export declare function findProjectDirectory(start: string): string;
 
+export interface ResolveUxReviewProjectOptions {
+  /** The directory to start from. Default: `process.cwd()`. */
+  root?: string;
+  /**
+   * An explicit project directory, resolved against `root`. Default: the
+   * nearest ancestor of `root` holding `.git`, or `root` itself.
+   */
+  projectDirectory?: string;
+}
+
+/** The real path of the UX Review project directory for a server. */
+export declare function resolveUxReviewProject(
+  options?: ResolveUxReviewProjectOptions,
+): string;
+
+/**
+ * Answer a Fetch API request for `…/__ux-review/project.json` at any base
+ * path: the project JSON for a GET, 405 for another method, or `null` for any
+ * other path so the server handles it as usual. Mount it on a development
+ * server only.
+ */
+export declare function uxReviewProjectResponse(
+  request: Request,
+  projectDirectory: string,
+): Response | null;
+
+/** A Node / connect `(request, response, next)` handler for a server's middleware stack. */
+export type UxReviewMiddleware = Parameters<
+  UxReviewMiddlewareServer['middlewares']['use']
+>[0];
+
+/**
+ * A Node / connect-style handler for `…/__ux-review/project.json` at any base
+ * path; other requests go to `next`. Mount it on a development server only.
+ */
+export declare function uxReviewMiddleware(
+  projectDirectory: string,
+): UxReviewMiddleware;
+
 /** Serve the UX Review project directory to catalog pages on dev and preview servers. */
 export declare function uxReviewPlugin(
   options?: UxReviewPluginOptions,

package/vite-ux-review.mjs

@@ -1,15 +1,21 @@
 /**
- * `@kerfjs/ui/vite-ux-review` — a Node-only Vite plugin that tells a local
- * catalog page which project it belongs to, so the catalog can offer a UX
- * Review "Capture region" link (see `wireCatalog`'s `onUxReviewProject` and
- * the Catalog's `uxReview` prop in `@kerfjs/ui/catalog`).
+ * `@kerfjs/ui/vite-ux-review` — Node-only helpers that tell a local catalog
+ * page which project it belongs to, so the catalog can offer a UX Review
+ * "Capture region" link (see `wireCatalog`'s `onUxReviewProject` and the
+ * Catalog's `uxReview` prop in `@kerfjs/ui/catalog`).
  *
- * It answers `GET …/__ux-review/project.json` with `{ projectDirectory }` on
- * the dev and preview servers. It imports nothing from Vite and never reaches
- * a browser bundle; a static build has no endpoint, so the link stays hidden.
+ * The endpoint answers `GET …/__ux-review/project.json` with
+ * `{ projectDirectory }`. `uxReviewPlugin()` mounts it on Vite's dev and
+ * preview servers; an app that serves its catalog from its own backend mounts
+ * `uxReviewProjectResponse()` (Fetch API servers) or `uxReviewMiddleware()`
+ * (Node / connect servers) instead, on its development server only. Nothing
+ * here imports Vite or reaches a browser bundle; a static build has no
+ * endpoint, so the link stays hidden.
  */
 import { existsSync, realpathSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
+import process from 'node:process';
+import { URL } from 'node:url';
 
 /** Where the endpoint lives, relative to the catalog page. */
 export const UX_REVIEW_PROJECT_PATH = '__ux-review/project.json';
@@ -24,15 +30,53 @@ export function findProjectDirectory(start) {
 }
 
 /**
- * Serve the UX Review project directory to catalog pages. By default it is
- * the repository holding Vite's `root` (the nearest ancestor with `.git`, or
- * `root` itself); `projectDirectory` overrides it, resolved against `root`.
+ * The real path of the UX Review project directory: `projectDirectory`
+ * resolved against `root` when given, otherwise the repository holding `root`
+ * (the nearest ancestor with `.git`, or `root` itself). `root` defaults to the
+ * current working directory.
  */
-export function uxReviewPlugin(options = {}) {
-  let projectDirectory = '';
-  const serve = (request, response, next) => {
+export function resolveUxReviewProject({
+  root = process.cwd(),
+  projectDirectory,
+} = {}) {
+  return realpathSync(
+    projectDirectory
+      ? resolve(root, projectDirectory)
+      : findProjectDirectory(root),
+  );
+}
+
+const isEndpoint = (path) => path.endsWith(`/${UX_REVIEW_PROJECT_PATH}`);
+const JSON_HEADERS = {
+  'Content-Type': 'application/json; charset=utf-8',
+  'Cache-Control': 'no-store',
+};
+
+/**
+ * Answer a Fetch API request for the endpoint, at any base path: the project
+ * JSON for a GET, 405 for another method, or `null` when the request is for
+ * some other path so the server handles it as usual.
+ */
+export function uxReviewProjectResponse(request, projectDirectory) {
+  if (!isEndpoint(new URL(request.url).pathname)) return null;
+  if (request.method !== 'GET')
+    return new globalThis.Response(null, {
+      status: 405,
+      headers: { Allow: 'GET' },
+    });
+  return new globalThis.Response(JSON.stringify({ projectDirectory }), {
+    headers: JSON_HEADERS,
+  });
+}
+
+/**
+ * A Node / connect-style `(request, response, next)` handler for the
+ * endpoint, at any base path; other requests go to `next`.
+ */
+export function uxReviewMiddleware(projectDirectory) {
+  return (request, response, next) => {
     const path = (request.url ?? '').split(/[?#]/)[0];
-    if (!path.endsWith(`/${UX_REVIEW_PROJECT_PATH}`)) {
+    if (!isEndpoint(path)) {
       next();
       return;
     }
@@ -42,17 +86,28 @@ export function uxReviewPlugin(options = {}) {
       response.end();
       return;
     }
-    response.setHeader('Content-Type', 'application/json; charset=utf-8');
-    response.setHeader('Cache-Control', 'no-store');
+    for (const [name, value] of Object.entries(JSON_HEADERS))
+      response.setHeader(name, value);
     response.end(JSON.stringify({ projectDirectory }));
   };
+}
+
+/**
+ * Serve the UX Review project directory to catalog pages on Vite's dev and
+ * preview servers. By default it is the repository holding Vite's `root`;
+ * `projectDirectory` overrides it, resolved against `root`.
+ */
+export function uxReviewPlugin(options = {}) {
+  let handler = uxReviewMiddleware('');
+  const serve = (request, response, next) => handler(request, response, next);
   return {
     name: 'kerf-ux-review',
     configResolved(config) {
-      projectDirectory = realpathSync(
-        options.projectDirectory
-          ? resolve(config.root, options.projectDirectory)
-          : findProjectDirectory(config.root),
+      handler = uxReviewMiddleware(
+        resolveUxReviewProject({
+          root: config.root,
+          projectDirectory: options.projectDirectory,
+        }),
       );
     },
     configureServer(server) {

package/dist/chunk-3DXHNLME.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/actions/toolbar-text/toolbar-text.tsx"],"names":[],"mappings":";;;;AAsEO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,EAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,IAAA;AAAA,EACX,QAAA,GAAW,IAAA;AAAA,EACX,IAAA,GAAO,KAAA;AAAA,EACP,IAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,QAAA,IAAY,IAAA,IAAQ,QAAA,GAAW,CAAA;AACtD,EAAA,IAAI,MAAA,KAAW,MAAA;AACb,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC5C,gBAAA,EAAe,cAAA;AAAA,QACf,WAAA,EAAW,IAAA;AAAA,QACX,iBAAA,EAAiB,SAAA;AAAA,QACjB,iBAAA,EAAiB,SAAA;AAAA,QACjB,WAAA,EAAW,IAAA,KAAS,SAAA,GAAY,MAAA,GAAY,IAAA;AAAA,QAC5C,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,QAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,QACtC,aAAA,EAAa,MAAA;AAAA,QACb,EAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,KAC7C;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,iBAAA,EAAiB,SAAA;AAAA,MACjB,iBAAA,EAAiB,SAAA;AAAA,MACjB,WAAA,EAAW,IAAA,KAAS,SAAA,GAAY,MAAA,GAAY,IAAA;AAAA,MAC5C,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,MACtC,gBAAA,EAAgB,MAAA,GAAS,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAC5C,KAAA,EAAO,MAAA,GAAS,CAAA,6BAAA,EAAgC,QAAQ,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,EAAA;AAAA,MACA,IAAA,EAAM,eAAe,SAAA,GAAY,MAAA;AAAA,MACjC,YAAA,EAAY,YAAA,GAAe,MAAA,CAAO,YAAY,CAAA,GAAI,MAAA;AAAA,MAClD,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,CAAC,CAAA,EAAG,CAAA,mBAExB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,GAE/C;AAEJ","file":"chunk-3DXHNLME.js","sourcesContent":["import { type CssLength, em } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type ToolbarTextSize =\n  'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';\n\nexport type ToolbarTextTone = 'default' | 'dark';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ToolbarTextBaseProps {\n  text: string;\n  size?: ToolbarTextSize;\n  /** Use dark-toolbar foregrounds on a dark or photo-backed toolbar. */\n  tone?: ToolbarTextTone;\n  /** Hide below this Toolbar content width; requires wireToolbarVisibility. */\n  hideBelow?: CssLength;\n  /** Show only below this Toolbar content width; requires wireToolbarVisibility. */\n  showBelow?: CssLength;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n  /**\n   * Show a trailing ellipsis (…) where the text is truncated — on the single line\n   * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n   * instead. Default true.\n   */\n  ellipsis?: boolean;\n  /**\n   * Grow to fill the free space of the flex row it sits in (a Toolbar zone),\n   * truncating at the space left by its siblings instead of taking only its\n   * text's width. Default false.\n   */\n  fill?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n  /**\n   * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n   * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n   */\n}\n\ntype ToolbarTextWrappingProps =\n  | {\n      /** Wrap onto multiple lines; combine with `maxLines` to cap them. */\n      wrap: true;\n      maxLines?: number | null;\n    }\n  | { wrap?: false; maxLines?: never };\n\nexport type ToolbarTextProps = ToolbarTextBaseProps &\n  (\n    | ({\n        action?: never;\n        /** Expose `role=\"heading\"` and `aria-level` on read-only text. */\n        headingLevel?: HeadingLevel;\n        /** Render an unanimated loading skeleton instead of the text. */\n        placeholder?: boolean;\n      } & ToolbarTextWrappingProps)\n    | {\n        /** Render a native button with this delegated action; the app owns editing. */\n        action: string;\n        headingLevel?: never;\n        placeholder?: never;\n        wrap?: never;\n        maxLines?: never;\n      }\n  );\n\nexport function ToolbarText({\n  text,\n  size = 'default',\n  tone = 'default',\n  hideBelow,\n  showBelow,\n  className = '',\n  id,\n  headingLevel,\n  placeholder = false,\n  wrap = false,\n  ellipsis = true,\n  maxLines = null,\n  fill = false,\n  slot,\n  action,\n}: ToolbarTextProps) {\n  const capped = wrap && maxLines != null && maxLines > 0;\n  if (action !== undefined)\n    return (\n      <button\n        type=\"button\"\n        class={`kui-toolbar-text ${className}`.trim()}\n        data-component=\"toolbar-text\"\n        data-size={size}\n        data-hide-below={hideBelow}\n        data-show-below={showBelow}\n        data-tone={tone === 'default' ? undefined : tone}\n        data-fill={fill ? 'true' : undefined}\n        data-ellipsis={ellipsis ? undefined : 'false'}\n        data-action={action}\n        id={id}\n        slot={slot}\n      >\n        <span class=\"kui-toolbar-text__text\">{text}</span>\n      </button>\n    );\n  return (\n    <span\n      class={`kui-toolbar-text ${className}`.trim()}\n      data-component=\"toolbar-text\"\n      data-size={size}\n      data-hide-below={hideBelow}\n      data-show-below={showBelow}\n      data-tone={tone === 'default' ? undefined : tone}\n      data-fill={fill ? 'true' : undefined}\n      data-wrap={wrap ? 'true' : undefined}\n      data-ellipsis={ellipsis ? undefined : 'false'}\n      data-max-lines={capped ? String(maxLines) : undefined}\n      style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      id={id}\n      role={headingLevel ? 'heading' : undefined}\n      aria-level={headingLevel ? String(headingLevel) : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {placeholder ? (\n        <Skeleton width={em(8)} />\n      ) : (\n        <span class=\"kui-toolbar-text__text\">{text}</span>\n      )}\n    </span>\n  );\n}\n"]}

package/dist/chunk-3PO7JEK7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/collections/list-item/list-item.tsx"],"names":[],"mappings":"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","file":"chunk-3PO7JEK7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-has-description',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-state',\n  'data-kui-disabled',\n  'data-icon-align',\n]);\n\ntype ListItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-has-description'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-state'?: never;\n    'data-kui-disabled'?: never;\n    'data-icon-align'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  /** App-owned supporting text rendered in the component's stable label stack. */\n  description?: string | SafeHtml;\n  icon?: SafeHtml;\n  /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */\n  trailing?: KerfUiContent;\n  /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */\n  status?: string | SafeHtml;\n  /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */\n  busy?: boolean;\n  density?: 'standard' | 'compact' | 'spacious';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  /** Alignment of an icon beside a wrapped label. Defaults to its first line. */\n  multilineIconAlign?: 'first-line' | 'center';\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  rootAttributes?: ListItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport interface ListItemLinkProps extends Omit<\n  ListItemProps,\n  'action' | 'pressed'\n> {\n  /** Native destination for this navigation row. */\n  href: string;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  action?: never;\n  pressed?: never;\n}\n\nfunction listItemContent({\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  multiline = false,\n  placeholder = false,\n}: Pick<\n  ListItemProps,\n  | 'label'\n  | 'description'\n  | 'icon'\n  | 'trailing'\n  | 'status'\n  | 'busy'\n  | 'multiline'\n  | 'placeholder'\n>) {\n  return (\n    <>\n      {icon && (\n        <span class=\"kui-list-item__icon\">\n          {placeholder ? (\n            <Skeleton block width={remify(18)} height={remify(18)} />\n          ) : (\n            icon\n          )}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        <span class=\"kui-list-item__primary-label\">\n          {placeholder ? (\n            <Skeleton width={em(9)} />\n          ) : multiline ? (\n            withWordBreaks(label)\n          ) : (\n            label\n          )}\n        </span>\n        {description && (\n          <span class=\"kui-list-item__description\">\n            {placeholder ? <Skeleton width={em(11)} /> : description}\n          </span>\n        )}\n      </span>\n      {(busy || status || trailing) && (\n        <span class=\"kui-list-item__trailing\">\n          {/* The busy spinner is component-owned chrome drawn from a known\n              prop, so a placeholder keeps it live. Status text and\n              author-supplied trailing content are values: skeletons. */}\n          {busy && <LoadingSpinner />}\n          {status && (\n            <span class=\"kui-list-item__status\">\n              {placeholder ? <Skeleton width={em(3.5)} /> : status}\n            </span>\n          )}\n          {trailing && (placeholder ? <Skeleton width={em(1.5)} /> : trailing)}\n        </span>\n      )}\n    </>\n  );\n}\n\nexport function ListItem({\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  rootAttributes = {},\n  slot,\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      title={placeholder ? undefined : title}\n      disabled={disabled || placeholder}\n      tabindex={placeholder ? -1 : tabIndex}\n      data-component=\"list-item\"\n      data-action={placeholder ? undefined : action}\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </button>\n  );\n}\n\n/** A navigation row with native link activation and ListItem geometry. */\nexport function ListItemLink({\n  href,\n  external = false,\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  itemId,\n  className = '',\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  rootAttributes = {},\n  slot,\n}: ListItemLinkProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const inactive = disabled || placeholder;\n  const linkLabel =\n    accessibleLabel ??\n    (external && typeof label === 'string'\n      ? `${label} (opens in new tab)`\n      : undefined);\n  return (\n    <a\n      {...extensionAttributes}\n      class={`kui-list-item ${className}`.trim()}\n      href={inactive ? undefined : href}\n      target={inactive || !external ? undefined : '_blank'}\n      rel={inactive || !external ? undefined : 'noopener noreferrer'}\n      title={placeholder ? undefined : title}\n      tabindex={inactive ? -1 : tabIndex}\n      data-component=\"list-item-link\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-label={linkLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-disabled={inactive ? 'true' : undefined}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </a>\n  );\n}\n"]}

package/dist/chunk-3XPGJUUQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/surfaces/sunken-panel/sunken-panel.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,KAAA,EAAO,SAAA,GAAY,CAAA,yBAAA,EAA4B,SAAS,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,IAAA,EAAM,YAAY,QAAA,GAAW,MAAA;AAAA,MAC7B,YAAA,EAAY,SAAA;AAAA,MACZ,QAAA,EAAU,QAAA;AAAA,MACV,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-3XPGJUUQ.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type {\n  CssFlex,\n  CssFlexKeyword,\n} from '../../../shared/styles/css-values.js';\n\nexport type SunkenPanelShape = 'rounded' | 'square';\n\nexport interface SunkenPanelProps {\n  children?: KerfUiContent;\n  /** Optional accessible landmark name for a distinct application region. */\n  ariaLabel?: string;\n  /** Corner shape: a rounded rectangle (default) or square corners. */\n  shape?: SunkenPanelShape;\n  /** Grow or shrink within a flex parent, using Grid's typed flex contract. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /** Fill a parent with a definite height; use flex inside a flex layout. */\n  fill?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A lowered application surface with one compact inset and a vertical content\n * stack. The panel owns its background and padding; children own their own\n * borders and internal geometry.\n */\nexport function SunkenPanel({\n  children,\n  ariaLabel,\n  shape = 'rounded',\n  flex = false,\n  fill = false,\n  tabIndex,\n  outlined = false,\n  className = '',\n  slot,\n}: SunkenPanelProps) {\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  return (\n    <div\n      class={`kui-sunken-panel ${className}`.trim()}\n      data-component=\"sunken-panel\"\n      data-shape={shape}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-outlined={outlined ? 'true' : undefined}\n      style={flexValue ? `--_kui-sunken-panel-flex:${flexValue}` : undefined}\n      role={ariaLabel ? 'region' : undefined}\n      aria-label={ariaLabel}\n      tabindex={tabIndex}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}