@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/toolbar-control-group.d.ts

@@ -1,17 +1,121 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
 
+type ToolbarControlGroupAppearance = 'contained' | 'borderless';
+type ToolbarControlGroupTone = 'default' | 'dark';
+/** Surface material: the opaque `solid` fill (default) or translucent `glass`. */
+type ToolbarControlGroupMaterial = 'solid' | 'glass';
+/** Quiet palette for a contained, single decorative icon tile. */
+type ToolbarControlGroupTileTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+type ToolbarControlGroupButtonAppearance = 'plain' | 'push';
+type ToolbarControlGroupShape = 'pill' | 'rounded';
+type ToolbarControlGroupSize = 'default' | 'compact';
+type ToolbarControlGroupDensity = 'comfortable' | 'tight';
+type ToolbarControlGroupContent = 'icon' | 'text' | 'mixed' | 'avatar' | 'search';
+type ToolbarControlGroupFocusRing = 'control' | 'outline' | 'halo';
+type ToolbarControlGroupSelectedChrome = 'raised' | 'filled' | 'outline' | 'none';
+type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';
+type ToolbarControlGroupOverflow = 'visible' | 'scroll' | 'wrap';
+type ToolbarControlGroupExpandedOverflow = 'clip' | 'visible';
+type ToolbarControlGroupMenuInset = 'standard' | 'compact' | 'list-zero';
+type ToolbarControlGroupVisibility = 'always' | 'compact-only' | 'hide-collapsed-tiny' | 'yield-to-expanded-sibling' | 'yield-to-priority-row';
+type ToolbarControlGroupSizing = 'content' | 'grow' | 'fill';
+type ToolbarControlGroupPlacement = 'start' | 'end';
+interface ToolbarActionLinkProps {
+    href: string;
+    label: string;
+    icon?: KerfUiContent;
+    /** Optional machine-readable detail hidden visually but included in the default accessible name. */
+    detail?: string;
+    /** Override the accessible name when surrounding context is needed. */
+    ariaLabel?: string;
+    /** Open in a new tab with a safe rel and announce that behavior. */
+    external?: boolean;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** A semantic anchor with ToolbarControlGroup-owned action geometry. */
+declare function ToolbarActionLink({ href, label, icon, detail, ariaLabel, external, className, slot, }: ToolbarActionLinkProps): kerfjs.SafeHtml;
 interface ToolbarControlGroupProps {
-    children: SafeHtml | SafeHtml[];
+    children: KerfUiContent;
     label?: string;
     className?: string;
     expanded?: boolean;
     single?: boolean;
-    appearance?: 'contained' | 'borderless';
-    tone?: 'default' | 'dark';
-    buttonAppearance?: 'plain' | 'push';
+    appearance?: ToolbarControlGroupAppearance;
+    tone?: ToolbarControlGroupTone;
+    /**
+     * `glass` paints the group on the translucent chrome material (backdrop
+     * blur and saturation) with a specular edge and a soft shadow, for a group
+     * floating over imagery or a clear toolbar. Controls take the normal text
+     * color so they keep AA over any content; the fill turns opaque under
+     * reduced transparency, increased contrast, static effects, or without
+     * backdrop-filter support. A borderless group has no surface and ignores it.
+     */
+    material?: ToolbarControlGroupMaterial;
+    /** Quiet fill, matching border and foreground for a contained single group whose only child is a decorative SVG. Ignored for interactive or mixed content. */
+    tileTone?: ToolbarControlGroupTileTone;
+    buttonAppearance?: ToolbarControlGroupButtonAppearance;
     /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */
-    shape?: 'pill' | 'rounded';
+    shape?: ToolbarControlGroupShape;
+    size?: ToolbarControlGroupSize;
+    density?: ToolbarControlGroupDensity;
+    content?: ToolbarControlGroupContent;
+    /** Whether controls paint focus individually or the group paints an outline/halo on focus-within. */
+    focusRing?: ToolbarControlGroupFocusRing;
+    /**
+     * Chrome a pressed (`aria-pressed="true"`) control paints. `none` keeps a
+     * pressed control looking like its neighbors, for an icon-state toggle whose
+     * glyph already shows the state (an empty or filled star); hover and the
+     * focus ring are unchanged. One control can opt out alone with
+     * `data-selected-chrome="none"` on its own button.
+     */
+    selectedChrome?: ToolbarControlGroupSelectedChrome;
+    selectedTone?: ToolbarControlGroupSelectedTone;
+    /** Size a nested Web Awesome dropdown trigger as part of this group. */
+    nestedDropdown?: boolean;
+    /** Configure the nested dropdown menu inset without consumer ::part() CSS. */
+    menuInset?: ToolbarControlGroupMenuInset;
+    /** Keep an overlong row inside the available width by scrolling or wrapping. */
+    overflow?: ToolbarControlGroupOverflow;
+    /** Let app-owned anchored surfaces extend outside an expanded search group. Collapsed searches retain their clipping. */
+    expandedOverflow?: ToolbarControlGroupExpandedOverflow;
+    /**
+     * Responsive visibility owned by the enclosing Toolbar container.
+     * `yield-to-priority-row` hides this trailing group exactly while its
+     * Toolbar's `responsive="trailing-priority"` row is active (an expanded
+     * trailing sibling at the Toolbar's `responsiveAt` width), so the app never
+     * restates that breakpoint with `hideBelow`.
+     */
+    visibility?: ToolbarControlGroupVisibility;
+    /** Hide below this Toolbar content width; requires wireToolbarVisibility. */
+    hideBelow?: CssLength;
+    /** Show only below this Toolbar content width; requires wireToolbarVisibility. */
+    showBelow?: CssLength;
+    /** Intrinsic (default), grow from a basis, or occupy a full wrapping row. */
+    sizing?: ToolbarControlGroupSizing;
+    /** Place this group at the end of its flex row in a wrapping Toolbar zone. */
+    placement?: ToolbarControlGroupPlacement;
+    /** CSS length used as the minimum width and flex basis for `sizing="grow"`; defaults to 19rem. */
+    growBasis?: string;
+    /** Move this group into the work-area toolbar when its panel collapses. */
+    relocateOnCollapse?: boolean;
+    /** Add contrast behind photo-backed avatar content. */
+    scrim?: boolean;
+    /** Block the group's controls and show a spinner without changing its dimensions. */
+    busy?: boolean;
+    /** Announced status while busy; defaults to “Working”. */
+    busyLabel?: string;
+    /**
+     * Avatar image URL. A single-control group paints it on the group; a
+     * multi-control group paints it only on the pressed selection highlight.
+     */
+    avatarImage?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape }: ToolbarControlGroupProps): SafeHtml;
+declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, material, tileTone, buttonAppearance, shape, size, density, content, focusRing, selectedChrome, selectedTone, nestedDropdown, menuInset, overflow, expandedOverflow, visibility, hideBelow, showBelow, sizing, placement, growBasis, relocateOnCollapse, scrim, busy, busyLabel, avatarImage, slot, }: ToolbarControlGroupProps): kerfjs.SafeHtml;
 
-export { ToolbarControlGroup, type ToolbarControlGroupProps };
+export { ToolbarActionLink, type ToolbarActionLinkProps, ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupContent, type ToolbarControlGroupDensity, type ToolbarControlGroupExpandedOverflow, type ToolbarControlGroupFocusRing, type ToolbarControlGroupMaterial, type ToolbarControlGroupMenuInset, type ToolbarControlGroupOverflow, type ToolbarControlGroupPlacement, type ToolbarControlGroupProps, type ToolbarControlGroupSelectedChrome, type ToolbarControlGroupSelectedTone, type ToolbarControlGroupShape, type ToolbarControlGroupSize, type ToolbarControlGroupSizing, type ToolbarControlGroupTileTone, type ToolbarControlGroupTone, type ToolbarControlGroupVisibility };

package/dist/toolbar-control-group.js

@@ -1,3 +1,5 @@
-export { ToolbarControlGroup } from './chunk-RNPGFQ33.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+
+
 
 //# sourceMappingURL=toolbar-control-group.js.map

package/dist/toolbar-text.d.ts

@@ -1,23 +1,77 @@
 import * as kerfjs from 'kerfjs';
+import { CssLength } from './css-values.js';
 
-type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';
+type ToolbarTextSize = 'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';
+type ToolbarTextTone = 'default' | 'dark';
 /** ARIA heading level for a title exposed as a heading landmark. */
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface ToolbarTextProps {
+interface ToolbarTextBaseProps {
     text: string;
     size?: ToolbarTextSize;
+    /**
+     * Use loud-toolbar foregrounds on a toolbar painted with the inverse loud
+     * fill, matching dark control groups; like them it inverts with the color
+     * scheme. Over a dark photo or scrim keep the default tone inside a
+     * `BackdropImage` overlay, which takes the dark scheme under its scrim.
+     */
+    tone?: ToolbarTextTone;
+    /** Hide below this Toolbar content width; requires wireToolbarVisibility. */
+    hideBelow?: CssLength;
+    /** Show only below this Toolbar content width; requires wireToolbarVisibility. */
+    showBelow?: CssLength;
     className?: string;
     /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */
     id?: string;
     /**
-     * Expose heading semantics (`role="heading"` + `aria-level`) so the text acts as
-     * a heading landmark — e.g. a page's primary title. Omit to keep the plain span
-     * (the default), which suits a dialog title referenced via `aria-labelledby`.
+     * Show a trailing ellipsis (…) where the text is truncated — on the single line
+     * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip
+     * instead. Default true.
+     */
+    ellipsis?: boolean;
+    /**
+     * Grow to fill the free space of the flex row it sits in (a Toolbar zone),
+     * truncating at the space left by its siblings instead of taking only its
+     * text's width. Default false.
      */
+    fill?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type ToolbarTextWrappingProps = {
+    /** Wrap onto multiple lines; combine with `maxLines` to cap them. */
+    wrap: true;
+    maxLines?: number | null;
+} | {
+    wrap?: false;
+    maxLines?: never;
+};
+type ToolbarTextProps = ToolbarTextBaseProps & (({
+    action?: never;
+    /** Expose `role="heading"` and `aria-level` on read-only text. */
     headingLevel?: HeadingLevel;
-    /** Render the text as an unanimated loading skeleton instead of its value. */
+    /** Render an unanimated loading skeleton instead of the text. */
     placeholder?: boolean;
-}
-declare function ToolbarText({ text, size, className, id, headingLevel, placeholder }: ToolbarTextProps): kerfjs.SafeHtml;
+    /**
+     * Quiet, single-line supporting copy under the title ("Changes save
+     * automatically."), truncating with an ellipsis. Title and description
+     * share the toolbar's control band and the same text start, with or
+     * without a leading icon group. With a description, `id` and
+     * `headingLevel` apply to the title alone, so a dialog's
+     * `aria-labelledby` names only the title.
+     */
+    description?: string;
+    /** Id for the description, for a dialog's `aria-describedby`. */
+    descriptionId?: string;
+} & ToolbarTextWrappingProps) | {
+    /** Render a native button with this delegated action; the app owns editing. */
+    action: string;
+    headingLevel?: never;
+    placeholder?: never;
+    wrap?: never;
+    maxLines?: never;
+    description?: never;
+    descriptionId?: never;
+});
+declare function ToolbarText({ text, size, tone, hideBelow, showBelow, className, id, headingLevel, placeholder, wrap, ellipsis, maxLines, fill, slot, action, description, descriptionId, }: ToolbarTextProps): kerfjs.SafeHtml;
 
-export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize };
+export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize, type ToolbarTextTone };

package/dist/toolbar-text.js

@@ -1,4 +1,5 @@
-export { ToolbarText } from './chunk-RUNWEPR4.js';
+export { ToolbarText } from './chunk-EKHDLBRP.js';
+
 
 
 //# sourceMappingURL=toolbar-text.js.map

package/dist/toolbar.d.ts

@@ -1,13 +1,83 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
+import { PaneSeparatorSide } from './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
 
+type ToolbarPosition = 'header' | 'footer';
+/** Control-band density: `default` (60px with 44px groups) or `compact`. */
+type ToolbarDensity = 'default' | 'compact';
 interface ToolbarProps {
-    leading?: SafeHtml;
-    center?: SafeHtml;
-    trailing?: SafeHtml;
+    /**
+     * The toolbar's id, so app code can address it: name it as a scrolling
+     * List's chrome in `wireScrollDividers({ targets })`, or find it in tests.
+     */
+    id?: string;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
     label?: string;
-    divider?: boolean;
+    /** Use footer semantics for a bottom toolbar; defaults to header. */
+    position?: ToolbarPosition;
+    /**
+     * `compact` sizes the toolbar to a 34px control band with 3px block
+     * insets — 40px tall — for a header embedded in a panel or card. Fill it
+     * with `ToolbarControlGroup size="compact"` groups; inline insets and the
+     * gap between zones are unchanged. Composites that render a Toolbar from a
+     * `ToolbarConfig` (Workbench, CollapsiblePanel, NavStack, SplitView) forward
+     * it and size the groups they compose to match. Defaults to `default`.
+     */
+    density?: ToolbarDensity;
+    /**
+     * Physical divider edges in canonical top/right/bottom/left order, drawn
+     * always. Defaults to none: a toolbar pinned over or under scrolling content
+     * gets its divider from the scroll state instead — a `Pane` draws the line
+     * between its chrome and content while content is scrolled away beneath it,
+     * and `wireScrollDividers` `targets` can name a toolbar as chrome, which
+     * then draws its facing side the same way.
+     */
+    dividerSides?: Sides;
+    /** `balanced` gives both side zones equal tracks, centering the middle zone on the toolbar even if only one side has controls. */
+    centerAlign?: 'center' | 'stretch' | 'balanced';
+    /**
+     * Component-owned responsive layout; applications choose the policy rather
+     * than restyling toolbar internals. Under every policy the trailing zone
+     * wraps its groups instead of clipping an action, and the center zone keeps
+     * its whole content width: when the zones do not fit one row, the leading
+     * title truncates with an ellipsis rather than the center overlapping it.
+     * - `none` keeps one row; the leading identity truncates first.
+     * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control
+     *   groups onto further rows.
+     * - `wrap` keeps one row while every zone fits at its natural width, and
+     *   otherwise moves the trailing zone below a whole leading identity.
+     * - `center-priority` gives an expanded center control the full row.
+     * - `trailing-priority` moves an expanded trailing control to a full row
+     *   below the leading identity at `responsiveAt`.
+     */
+    responsive?: 'none' | 'stack' | 'wrap' | 'center-priority' | 'trailing-priority';
+    /** Container width at which `stack` or `trailing-priority` activates. */
+    responsiveAt?: 'compact' | 'narrow';
+    /**
+     * Screen edges this toolbar claims for device safe-area compensation, for an
+     * app bar or bottom bar that sits directly at a screen edge rather than in a
+     * Pane header or footer. Each listed side pads by the inset its surrounding
+     * layout reports through `--kui-edge-inset-*`, or the full device inset when
+     * nothing routes that edge, while the toolbar's box and dividers paint
+     * through. Omitted, the toolbar pads only the inline edges an owner such as
+     * a Pane header hands it, and never a block edge.
+     */
+    safeAreaEdges?: readonly PaneSeparatorSide[];
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function Toolbar({ leading, center, trailing, label, divider, className }: ToolbarProps): SafeHtml;
+/**
+ * A toolbar's configuration, apart from its content: the props a composite
+ * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel
+ * toolbar) forwards, so the app configures that toolbar instead of styling it.
+ */
+type ToolbarConfig = Pick<ToolbarProps, 'density' | 'dividerSides' | 'centerAlign' | 'responsive' | 'responsiveAt' | 'safeAreaEdges'>;
+declare function Toolbar({ id, leading, center, trailing, label, position, density, dividerSides, centerAlign, responsive, responsiveAt, safeAreaEdges, className, slot, }: ToolbarProps): kerfjs.SafeHtml;
 
-export { Toolbar, type ToolbarProps };
+export { Sides, Toolbar, type ToolbarConfig, type ToolbarDensity, type ToolbarPosition, type ToolbarProps };

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-DAFFDO33.js';
+export { Toolbar } from './chunk-ZN7KUMPY.js';
 
 //# sourceMappingURL=toolbar.js.map

package/dist/types-DmHWkSd6.d.ts

@@ -0,0 +1,207 @@
+import { ToolbarConfig } from './toolbar.js';
+import { WorkbenchPanel } from './workbench.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** A reference link shown in the detail footer for the active entry. */
+interface CatalogResource {
+    label: string;
+    href: string;
+    /** Optional machine-readable detail (e.g. a file path) carried by the action link. */
+    detail?: string;
+}
+/** A related entry offered in the detail footer's "Related entries" popup menu. */
+interface CatalogRelated {
+    id: string;
+    name: string;
+    /** Group heading in the menu, e.g. "Uses" / "Used by". */
+    group: string;
+}
+interface CatalogEntry {
+    id: string;
+    name: string;
+    description?: string;
+    /** Short metadata tags shown at the trailing edge of the sidebar row. */
+    tags?: readonly string[];
+    resources?: readonly CatalogResource[];
+    related?: readonly CatalogRelated[];
+}
+interface CatalogSection {
+    category: string;
+    entries: readonly CatalogEntry[];
+}
+/** A quieter, optionally collapsible group of catalog sections. */
+interface CatalogSecondaryGroup {
+    label: string;
+    sections: readonly CatalogSection[];
+    collapsible?: boolean;
+    expanded?: boolean;
+    /**
+     * A switch, shown while the group is open, that hides every entry carrying
+     * `tag` until it is turned on, such as entries an integration discourages.
+     * The active entry always stays listed, so a direct route still shows where
+     * it is.
+     */
+    tagFilter?: CatalogTagFilter;
+}
+/** A controlled show/hide switch for one entry tag in a secondary group. */
+interface CatalogTagFilter {
+    /** The entry tag the switch hides, matched exactly. */
+    tag: string;
+    /** The switch's visible label and accessible name, such as `Show Discouraged`. */
+    label: string;
+    /** Whether entries carrying `tag` are listed (the switch is on). */
+    show: boolean;
+}
+interface CatalogBrand {
+    title: string;
+    subtitle?: string;
+    /** Logo image URL (rendered decorative). Omit for a text-only brand. */
+    logoUrl?: string;
+}
+/**
+ * The UX Review capture link a {@link Catalog} shows when it knows the local
+ * project directory (see `uxReviewPlugin` and `wireCatalog`'s
+ * `onUxReviewProject`).
+ */
+interface CatalogUxReview {
+    /** The absolute project directory UX Review files captures under. */
+    projectDirectory: string;
+    /** The catalog's name in the capture title and context (default `brand.title`). */
+    name?: string;
+}
+type CatalogStageRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-catalog-stage'?: never;
+    'data-background-style'?: never;
+}>;
+/** Background used behind catalog specimens. */
+type CatalogBackgroundStyle = 'checkerboard' | 'vertical-stripes' | 'layout-guide' | 'surface' | 'sunken';
+/**
+ * The Catalog sidebar's configuration, forwarded to its Workbench left rail.
+ * Everything is optional; omitted fields keep the Catalog's defaults.
+ */
+interface CatalogSidebarConfig extends Pick<WorkbenchPanel, 'resizable' | 'separator' | 'collapseMotion' | 'presentation' | 'responsiveOverlayAt' | 'compactOverlay'> {
+    /**
+     * Sidebar width in px (default 288). With `resizable`, it is the current
+     * width: render the app's size signal here and hand the same signal to
+     * `wireCatalog`'s `sidebarSize`, which writes each committed resize to it.
+     */
+    size?: number;
+    /** The sidebar header toolbar's configuration (default: no divider; its pane draws one while scrolled). */
+    toolbar?: ToolbarConfig;
+}
+/**
+ * The Catalog settings pane's configuration, forwarded to its Workbench right
+ * rail. Everything is optional; omitted fields keep the Catalog's defaults.
+ */
+interface CatalogSettingsConfig extends Pick<WorkbenchPanel, 'resizable' | 'separator' | 'collapseMotion' | 'presentation' | 'responsiveOverlayAt' | 'compactOverlay'> {
+    /**
+     * Pane width in px (default 288). With `resizable`, it is the current
+     * width: render the app's size signal here and hand the same signal to
+     * `wireCatalog`'s `settingsSize`, which writes each committed resize to it.
+     */
+    size?: number;
+    /** The pane's title (default `Settings`); it also names the toggle. */
+    title?: string;
+    /** The pane header toolbar's configuration. */
+    toolbar?: ToolbarConfig;
+}
+interface CatalogProps {
+    /**
+     * The catalog's `id` (default `kui-catalog`). Its Workbench derives the
+     * sidebar's id from it (`<id>-left-rail`) and the settings pane's
+     * (`<id>-right-rail`), which `wireCatalog` wires.
+     */
+    id?: string;
+    brand: CatalogBrand;
+    sections: readonly CatalogSection[];
+    active: string;
+    content: KerfUiContent;
+    collapsed?: boolean;
+    theme?: 'light' | 'dark';
+    /** Show the controlled increased-contrast toggle when supplied. The app applies the preference. */
+    increasedContrast?: boolean;
+    /** Show the controlled reduced-motion toggle when supplied. The app applies the preference. */
+    reducedMotion?: boolean;
+    /** Show the preview background chooser; `backgroundStyle` remains app-owned. */
+    backgroundControl?: boolean;
+    headerActions?: KerfUiContent;
+    /**
+     * The active entry's settings (variant and state controls for its preview).
+     * When supplied, the Catalog renders a settings pane beside the stage — a
+     * Workbench right rail titled `settingsPanel.title` — with the standard
+     * toggle: in the pane's header while it is open, at the end of the entry
+     * toolbar while it is collapsed. Omit it (or pass `null`) for an entry with
+     * no settings; neither the pane nor the toggle renders. Below the
+     * Workbench's `narrow` breakpoint the pane overlays the stage.
+     */
+    settings?: KerfUiContent;
+    /**
+     * Whether the settings pane is collapsed (default `false`). The app owns
+     * it; hand the same signal to `wireCatalog`'s `settingsCollapsed`, which
+     * flips it from the toggle and makes the pane a transient overlay on a
+     * small screen.
+     */
+    settingsCollapsed?: boolean;
+    /**
+     * The settings pane's title, size, resizing, and overlay configuration
+     * (default: `Settings`, 288px, not resizable, an overlay below the
+     * Workbench's `narrow` breakpoint, `inset` in a compact Workbench).
+     */
+    settingsPanel?: CatalogSettingsConfig;
+    /**
+     * Show a "Capture region" link to UX Review after `headerActions`, preset
+     * with the project and the active entry. Supply it once the project is known
+     * (`wireCatalog`'s `onUxReviewProject`); omit it on static hosting.
+     */
+    uxReview?: CatalogUxReview;
+    secondarySections?: CatalogSecondaryGroup;
+    sidebarFooter?: KerfUiContent;
+    status?: KerfUiContent;
+    /** Preview background (default `checkerboard`). */
+    backgroundStyle?: CatalogBackgroundStyle;
+    /** Consumer-owned data attributes applied to the preview stage. */
+    stageRootAttributes?: CatalogStageRootAttributes;
+    selectAction?: string;
+    toggleSidebarAction?: string;
+    toggleThemeAction?: string;
+    toggleContrastAction?: string;
+    toggleMotionAction?: string;
+    selectBackgroundAction?: string;
+    toggleSecondaryAction?: string;
+    /** The secondary group's tag-filter switch `data-action` (default `catalog-toggle-secondary-filter`). */
+    toggleSecondaryFilterAction?: string;
+    /** The settings pane toggle's `data-action` (default `catalog-toggle-settings`). */
+    toggleSettingsAction?: string;
+    /**
+     * Whether the entry toolbar and description stay pinned above the preview
+     * (`fixed`), scroll away with it (`scroll`), or stay pinned while the entry
+     * pane is tall enough and scroll with the preview when it is short (`auto`,
+     * default), so a short window or large text never squeezes the preview out.
+     */
+    headerPlacement?: 'fixed' | 'scroll' | 'auto';
+    /**
+     * The same for the status and resource footer (default `auto`).
+     */
+    footerPlacement?: 'fixed' | 'scroll' | 'auto';
+    /**
+     * The sidebar's size, resizing, and overlay configuration, forwarded to the
+     * Workbench left rail (default: 288px, not resizable, an overlay below the
+     * Workbench's `narrow` breakpoint, `inset` in a compact Workbench).
+     */
+    sidebar?: CatalogSidebarConfig;
+    /**
+     * The entry toolbar's configuration (default `responsive: 'wrap'`: the entry
+     * title stays whole and the actions wrap below it when narrow).
+     */
+    mainToolbar?: ToolbarConfig;
+    /**
+     * The resource footer toolbar's configuration (default no divider,
+     * `responsive: 'stack'` at `responsiveAt: 'narrow'`).
+     */
+    footerToolbar?: ToolbarConfig;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+
+export type { CatalogResource as C, CatalogBackgroundStyle as a, CatalogProps as b, CatalogBrand as c, CatalogEntry as d, CatalogRelated as e, CatalogSecondaryGroup as f, CatalogSection as g, CatalogSettingsConfig as h, CatalogStageRootAttributes as i, CatalogTagFilter as j, CatalogUxReview as k };

package/dist/value-table.d.ts

@@ -1,4 +1,7 @@
+import * as kerfjs from 'kerfjs';
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
 
 interface ValueTableRowProps {
     label: string | SafeHtml;
@@ -7,14 +10,37 @@ interface ValueTableRowProps {
     className?: string;
     /** Render the value as an unanimated loading skeleton, keeping the field label. */
     placeholder?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function ValueTableRow({ label, value, icon, className, placeholder }: ValueTableRowProps): SafeHtml;
+declare function ValueTableRow({ label, value, icon, className, placeholder, slot, }: ValueTableRowProps): SafeHtml;
 
+/** `columns` keeps label and value side by side; `stacked` puts each value under its label. */
+type ValueTablePresentation = 'columns' | 'stacked';
+/** Table width below which columns stack: `compact` is 512px, `narrow` 576px. */
+type ValueTableStackBelow = 'compact' | 'narrow';
 interface ValueTableProps {
     label: string;
+    /** Compact row spacing for metadata-dense surfaces. */
+    density?: 'default' | 'compact';
+    /**
+     * Minimum width of the label column (for example `px(160)`); the value then
+     * takes the rest of the row. Omitted, label and value share the row by
+     * content.
+     */
+    labelWidth?: CssLength;
+    /** Side-by-side columns (default) or values stacked under their labels. */
+    presentation?: ValueTablePresentation;
+    /**
+     * Stack the rows only while the table itself is narrower than the preset,
+     * so one table reads as columns in a wide dialog and stacks on a phone.
+     */
+    stackBelow?: ValueTableStackBelow;
     className?: string;
-    children: SafeHtml | readonly SafeHtml[];
+    children: KerfUiContent;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function ValueTable({ label, className, children }: ValueTableProps): SafeHtml;
+declare function ValueTable({ label, density, labelWidth, presentation, stackBelow, className, children, slot, }: ValueTableProps): kerfjs.SafeHtml;
 
-export { ValueTable, type ValueTableProps, ValueTableRow, type ValueTableRowProps };
+export { ValueTable, type ValueTablePresentation, type ValueTableProps, ValueTableRow, type ValueTableRowProps, type ValueTableStackBelow };

package/dist/value-table.js

@@ -1,4 +1,5 @@
-export { ValueTable, ValueTableRow } from './chunk-37T3VNIZ.js';
+export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
+
 
 
 //# sourceMappingURL=value-table.js.map

package/dist/webawesome.d.ts

@@ -23,7 +23,11 @@ declare module 'kerfjs/jsx-runtime' {
                 'aria-label'?: string;
                 value?: string;
                 placeholder?: string;
+                hint?: string;
                 disabled?: boolean;
+                size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+                appearance?: 'filled' | 'outlined' | 'filled-outlined';
+                placement?: 'top' | 'bottom';
             };
             'wa-option': KerfCustomElement & {
                 value?: string;
@@ -39,7 +43,9 @@ declare module 'kerfjs/jsx-runtime' {
             'wa-comparison': KerfCustomElement;
             'wa-copy-button': KerfCustomElement;
             'wa-details': KerfCustomElement;
-            'wa-divider': KerfCustomElement;
+            'wa-divider': KerfCustomElement & {
+                orientation?: 'horizontal' | 'vertical';
+            };
             'wa-dialog': KerfCustomElement;
             'wa-drawer': KerfCustomElement;
             'wa-button': KerfCustomElement & {
@@ -50,6 +56,7 @@ declare module 'kerfjs/jsx-runtime' {
             };
             'wa-dropdown': KerfCustomElement & {
                 placement?: string;
+                size?: 'xs' | 's' | 'm' | 'l' | 'xl';
             };
             'wa-dropdown-item': KerfCustomElement;
             'wa-format-bytes': KerfCustomElement;
@@ -82,11 +89,14 @@ declare module 'kerfjs/jsx-runtime' {
             'wa-slider': KerfCustomElement;
             'wa-spinner': KerfCustomElement;
             'wa-split-panel': KerfCustomElement;
+            'wa-step': KerfCustomElement;
+            'wa-stepper': KerfCustomElement;
             'wa-switch': KerfCustomElement;
             'wa-tab': KerfCustomElement;
             'wa-tab-group': KerfCustomElement;
             'wa-tab-panel': KerfCustomElement;
             'wa-tag': KerfCustomElement;
+            'wa-tag-input': KerfCustomElement;
             'wa-textarea': KerfCustomElement;
             'wa-time-input': KerfCustomElement;
             'wa-toast': KerfCustomElement;