@kerfjs/ui 5.0.0-beta.23 → 5.0.0-beta.25

package/dist/styles/toolbar-control-group.css

@@ -55,6 +55,58 @@
     transparent
   );
 }
+.kui-toolbar-control-group[data-size="compact"] {
+  --kui-toolbar-group-size: 2.125rem;
+}
+.kui-toolbar-control-group[data-density="tight"] {
+  --kui-layout-item-padding: 0.3125rem;
+}
+.kui-toolbar-control-group[data-content="text"] > :is(button, wa-button),
+.kui-toolbar-control-group[data-content="mixed"] > :is(button, wa-button) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"] > button {
+  display: flex;
+  gap: var(--kui-space-xs);
+}
+.kui-toolbar-control-group[data-content="mixed"] {
+  gap: 0.5rem;
+}
+.kui-toolbar-control-group[data-content="mixed"] > wa-dropdown {
+  padding-inline-start: 0.375rem;
+  border-inline-start: 1px solid var(--kui-toolbar-control-border);
+}
+.kui-toolbar-control-group[data-content="avatar"] img {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--kui-radius-pill);
+  object-fit: cover;
+}
+.kui-toolbar-control-group[data-content="avatar"][data-scrim="true"] {
+  --kui-toolbar-control-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-loud) 64%,
+    transparent
+  );
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+}
+.kui-toolbar-control-group[data-selected-tone="neutral"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-neutral-on-normal);
+  --kui-toolbar-control-selected-background: var(
+    --kui-color-neutral-fill-normal
+  );
+}
+.kui-toolbar-control-group[data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-border: transparent;
+  --kui-toolbar-control-selected-background: var(--kui-color-brand-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-brand-on-normal);
+}
+.kui-toolbar-control-group[data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-background: transparent;
+  --kui-toolbar-control-selected-border: var(--kui-color-brand-border-normal);
+}
 
 .kui-toolbar-control-group[data-appearance="borderless"] {
   /* A borderless group has no base fill to lift from, so the default
@@ -72,6 +124,9 @@
 .kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
   flex: 0 0 auto;
 }
+.kui-toolbar-control-group > wa-dropdown {
+  display: inline-flex;
+}
 
 .kui-toolbar-control-group > button {
   appearance: none;
@@ -111,6 +166,23 @@
   min-width: 2.5rem;
   height: 2.5rem;
 }
+.kui-toolbar-control-group[data-size="compact"] > button,
+.kui-toolbar-control-group[data-size="compact"] > wa-button,
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown,
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
 
 .kui-toolbar-control-group[data-single="true"] > wa-dropdown,
 .kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button,
@@ -161,7 +233,7 @@
 
 /* A group holding exactly one control behaves like `single` even without the
    flag: the whole group background changes on hover instead of highlighting an
-   inner layer inset from the border (KF-J9P1ZD — a PanelHeader's lone Close/
+   inner layer inset from the border (KF-J9P1ZD — a heading toolbar's lone Close/
    Done action). */
 .kui-toolbar-control-group:not([data-single="true"]):has(
     > :is(button, wa-button):only-child

package/dist/styles/toolbar-text.css

@@ -23,7 +23,7 @@
 }
 
 .kui-toolbar-text[data-size="xlarge"] {
-  /* Matches the page/panel title: the same responsive clamp so a PanelHeader
+  /* Matches page/panel titles: the same responsive clamp so a heading toolbar
      title reads at the page-title scale without a bespoke override. Height grows
      to the larger text (the fixed 40px would clip its ascenders). */
   height: auto;

package/dist/styles/toolbar.css

@@ -20,8 +20,44 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
-.kui-toolbar[data-divider="true"] {
-  box-shadow: inset 0 -1px var(--kui-color-border);
+.kui-toolbar {
+  --_kui-toolbar-divider-top: transparent;
+  --_kui-toolbar-divider-right: transparent;
+  --_kui-toolbar-divider-bottom: transparent;
+  --_kui-toolbar-divider-left: transparent;
+  box-shadow:
+    inset 0 1px var(--_kui-toolbar-divider-top),
+    inset -1px 0 var(--_kui-toolbar-divider-right),
+    inset 0 -1px var(--_kui-toolbar-divider-bottom),
+    inset 1px 0 var(--_kui-toolbar-divider-left);
+}
+
+.kui-toolbar[divider-sides*="t"] {
+  --_kui-toolbar-divider-top: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="r"] {
+  --_kui-toolbar-divider-right: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="b"] {
+  --_kui-toolbar-divider-bottom: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="l"] {
+  --_kui-toolbar-divider-left: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
 }
 
 .kui-toolbar__leading,

package/dist/styles/webawesome.css

@@ -290,6 +290,18 @@
     padding: var(--kui-wa-surface-inset);
   }
 
+  /* Dialog content follows the compact surface inset, while its action region
+     retains the roomier homogeneous-group step. Keep these independent of
+     Web Awesome's shared --spacing property so applications can tune the
+     header without accidentally moving body or footer content. */
+  wa-dialog::part(body) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-dialog::part(footer) {
+    padding: var(--kui-wa-container-inset);
+  }
+
   wa-callout {
     padding: var(--kui-wa-surface-inset) !important;
   }

package/dist/styles/workbench.css

@@ -1,4 +1,5 @@
 .kui-workbench {
+  position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
@@ -30,6 +31,11 @@
   border-inline: 0;
 }
 
+.kui-workbench__rail[data-separator="hidden"],
+.kui-workbench__drawer[data-separator="hidden"] {
+  border-color: transparent;
+}
+
 .kui-workbench__center {
   display: flex;
   flex: 1;
@@ -59,6 +65,17 @@
   border-block-start: 0;
 }
 
+.kui-workbench__rail[data-content-overflow="auto"],
+.kui-workbench__drawer[data-content-overflow="auto"] {
+  overflow: auto;
+}
+
+.kui-workbench__rail[data-content-overflow="visible"],
+.kui-workbench__drawer[data-content-overflow="visible"] {
+  z-index: var(--kui-workbench-popup-z, 5);
+  overflow: visible;
+}
+
 /* The fixed-size sliding content. The rail/drawer keeps a definite size on its
    content so the transform reads as a slide, not a squeeze. */
 .kui-workbench__rail .kui-workbench__panel-content {
@@ -73,6 +90,19 @@
   transition: transform 200ms ease;
 }
 
+.kui-workbench__rail[data-collapse-motion="none"] .kui-workbench__panel-content,
+.kui-workbench__drawer[data-collapse-motion="none"]
+  .kui-workbench__panel-content {
+  transition: none;
+}
+
+.kui-workbench__rail[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  .kui-workbench__panel-content,
+.kui-workbench__drawer[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  .kui-workbench__panel-content {
+  opacity: 0;
+}
+
 .kui-workbench__rail--left[data-collapsed="true"]
   .kui-workbench__panel-content {
   transform: translateX(-100%);
@@ -87,6 +117,65 @@
   transform: translateY(100%);
 }
 
+.kui-workbench__rail[data-presentation="overlay"],
+.kui-workbench__drawer[data-presentation="overlay"] {
+  position: absolute;
+  z-index: var(--kui-workbench-overlay-z, 41);
+  max-width: var(--kui-workbench-overlay-max-width, 85vw);
+  max-height: var(--kui-workbench-overlay-max-height, 85vh);
+  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+}
+
+.kui-workbench__rail[data-presentation="overlay"] {
+  inset-block: 0;
+}
+
+.kui-workbench__rail--left[data-presentation="overlay"] {
+  inset-inline-start: 0;
+}
+
+.kui-workbench__rail--right[data-presentation="overlay"] {
+  inset-inline-end: 0;
+}
+
+.kui-workbench__drawer[data-presentation="overlay"] {
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+
+.kui-workbench__rail[data-presentation="overlay"][data-collapsed="true"],
+.kui-workbench__drawer[data-presentation="overlay"][data-collapsed="true"] {
+  pointer-events: none;
+}
+
+.kui-workbench__rail[data-presentation="hidden"],
+.kui-workbench__drawer[data-presentation="hidden"] {
+  display: none;
+}
+
+.kui-workbench__restore {
+  position: fixed;
+  z-index: var(--kui-workbench-restore-z, 42);
+  inset-block-end: calc(
+    var(--kui-workbench-restore-inset, 1rem) +
+      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+}
+
+.kui-workbench__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--kui-workbench-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+}
+
+.kui-workbench__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--kui-workbench-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-workbench__panel-content {
     transition: none;

package/dist/sunken-panel.d.ts

@@ -1,9 +1,12 @@
 import { SafeHtml } from 'kerfjs';
 
+type SunkenPanelShape = 'rounded' | 'square';
 interface SunkenPanelProps {
     children?: SafeHtml | readonly SafeHtml[];
     /** Optional accessible landmark name for a distinct application region. */
     ariaLabel?: string;
+    /** Corner shape: a rounded rectangle (default) or square corners. */
+    shape?: SunkenPanelShape;
     className?: string;
 }
 /**
@@ -11,6 +14,6 @@ interface SunkenPanelProps {
  * stack. The panel owns its background and padding; children own their own
  * borders and internal geometry.
  */
-declare function SunkenPanel({ children, ariaLabel, className, }: SunkenPanelProps): SafeHtml;
+declare function SunkenPanel({ children, ariaLabel, shape, className, }: SunkenPanelProps): SafeHtml;
 
-export { SunkenPanel, type SunkenPanelProps };
+export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };

package/dist/sunken-panel.js

@@ -1,3 +1,3 @@
-export { SunkenPanel } from './chunk-W4CXQYSG.js';
+export { SunkenPanel } from './chunk-TB6DY7H5.js';
 
 //# sourceMappingURL=sunken-panel.js.map

package/dist/surface-scaffold.d.ts

@@ -0,0 +1,25 @@
+import { SafeHtml } from 'kerfjs';
+
+type DialogSurfaceSize = 'small' | 'medium' | 'large';
+type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';
+type SurfaceInset = 'none' | 'compact' | 'comfortable';
+interface DialogSurfaceProps {
+    children: SafeHtml | readonly SafeHtml[];
+    size?: DialogSurfaceSize;
+    presentation?: DialogSurfacePresentation;
+    bodyInset?: SurfaceInset;
+    footerInset?: SurfaceInset;
+    className?: string;
+}
+/** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
+declare function DialogSurface({ children, size, presentation, bodyInset, footerInset, className, }: DialogSurfaceProps): SafeHtml;
+type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
+interface PopupSurfaceProps {
+    children: SafeHtml | readonly SafeHtml[];
+    inset?: PopupSurfaceInset;
+    className?: string;
+}
+/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
+declare function PopupSurface({ children, inset, className, }: PopupSurfaceProps): SafeHtml;
+
+export { DialogSurface, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceSize, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };

package/dist/surface-scaffold.js

@@ -0,0 +1,3 @@
+export { DialogSurface, PopupSurface } from './chunk-OBLTAKSX.js';
+
+//# sourceMappingURL=surface-scaffold.js.map

package/dist/surface-scaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"surface-scaffold.js"}

package/dist/tab-bar.d.ts

@@ -1,6 +1,9 @@
 import { SafeHtml } from 'kerfjs';
 
 type TabActivation = 'automatic' | 'manual';
+type TabBarAllocation = 'intrinsic' | 'fill';
+type TabBarPresentation = 'rail' | 'segmented' | 'inspector';
+type TabBarTrailingPlacement = 'separate' | 'adjacent';
 interface TabBarProps {
     id: string;
     label: string;
@@ -15,8 +18,14 @@ interface TabBarProps {
      * selects with Enter / Space / click — use it when selecting a tab is a heavy action.
      */
     activation?: TabActivation;
+    /** How available strip width is allocated across child AppTabs. */
+    allocation?: TabBarAllocation;
+    /** Named strip chrome for application rails, segmented tabs, or inspectors. */
+    presentation?: TabBarPresentation;
+    /** Keep a trailing action beside the final tab or at the far edge of the bar. */
+    trailingPlacement?: TabBarTrailingPlacement;
 }
 /** Render a controlled tab strip. The application owns selection, order, and persistence. */
-declare function TabBar({ id, label, children, leading, trailing, className, activation, }: TabBarProps): SafeHtml;
+declare function TabBar({ id, label, children, leading, trailing, className, activation, allocation, presentation, trailingPlacement, }: TabBarProps): SafeHtml;
 
-export { type TabActivation, TabBar, type TabBarProps };
+export { type TabActivation, TabBar, type TabBarAllocation, type TabBarPresentation, type TabBarProps, type TabBarTrailingPlacement };

package/dist/tab-bar.js

@@ -1,3 +1,3 @@
-export { TabBar } from './chunk-M7JBER5U.js';
+export { TabBar } from './chunk-X2U3QJCJ.js';
 
 //# sourceMappingURL=tab-bar.js.map

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

@@ -4,6 +4,11 @@ type ToolbarControlGroupAppearance = 'contained' | 'borderless';
 type ToolbarControlGroupTone = 'default' | 'dark';
 type ToolbarControlGroupButtonAppearance = 'plain' | 'push';
 type ToolbarControlGroupShape = 'pill' | 'rounded';
+type ToolbarControlGroupSize = 'default' | 'compact';
+type ToolbarControlGroupDensity = 'comfortable' | 'tight';
+type ToolbarControlGroupContent = 'icon' | 'text' | 'mixed' | 'avatar';
+type ToolbarControlGroupSelectedChrome = 'raised' | 'filled' | 'outline';
+type ToolbarControlGroupSelectedTone = 'brand' | 'neutral';
 interface ToolbarControlGroupProps {
     children: SafeHtml | SafeHtml[];
     label?: string;
@@ -15,7 +20,16 @@ interface ToolbarControlGroupProps {
     buttonAppearance?: ToolbarControlGroupButtonAppearance;
     /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */
     shape?: ToolbarControlGroupShape;
+    size?: ToolbarControlGroupSize;
+    density?: ToolbarControlGroupDensity;
+    content?: ToolbarControlGroupContent;
+    selectedChrome?: ToolbarControlGroupSelectedChrome;
+    selectedTone?: ToolbarControlGroupSelectedTone;
+    /** Size a nested Web Awesome dropdown trigger as part of this group. */
+    nestedDropdown?: boolean;
+    /** Add contrast behind photo-backed avatar content. */
+    scrim?: boolean;
 }
-declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape, }: ToolbarControlGroupProps): SafeHtml;
+declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape, size, density, content, selectedChrome, selectedTone, nestedDropdown, scrim, }: ToolbarControlGroupProps): SafeHtml;
 
-export { ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupProps, type ToolbarControlGroupShape, type ToolbarControlGroupTone };
+export { ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupContent, type ToolbarControlGroupDensity, type ToolbarControlGroupProps, type ToolbarControlGroupSelectedChrome, type ToolbarControlGroupSelectedTone, type ToolbarControlGroupShape, type ToolbarControlGroupSize, type ToolbarControlGroupTone };

package/dist/toolbar-control-group.js

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

package/dist/toolbar-text.js

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

package/dist/toolbar.d.ts

@@ -1,13 +1,15 @@
 import { SafeHtml } from 'kerfjs';
+import { D as DividerSides } from './divider-sides-267FA7sY.js';
 
 interface ToolbarProps {
     leading?: SafeHtml;
     center?: SafeHtml;
     trailing?: SafeHtml;
     label?: string;
-    divider?: boolean;
+    /** Physical divider edges in canonical top/right/bottom/left order. Defaults to bottom. */
+    dividerSides?: DividerSides;
     className?: string;
 }
-declare function Toolbar({ leading, center, trailing, label, divider, className, }: ToolbarProps): SafeHtml;
+declare function Toolbar({ leading, center, trailing, label, dividerSides, className, }: ToolbarProps): SafeHtml;
 
-export { Toolbar, type ToolbarProps };
+export { DividerSides, Toolbar, type ToolbarProps };

package/dist/toolbar.js

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

package/dist/value-table.js

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

package/dist/webawesome.d.ts

@@ -23,6 +23,7 @@ declare module 'kerfjs/jsx-runtime' {
                 'aria-label'?: string;
                 value?: string;
                 placeholder?: string;
+                hint?: string;
                 disabled?: boolean;
             };
             'wa-option': KerfCustomElement & {

package/dist/wire-catalog.d.ts

@@ -39,8 +39,10 @@ interface CatalogRevealOptions {
 declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
 /**
  * Keep a Catalog's opt-in geometry overlay synchronized with its preview.
- * Transparent specimens receive a dashed outer bound and positive margins use
- * devtools-style orange bands. Returns a disposer.
+ * Specimens receive computed border highlights (or a dashed bound when they
+ * have no border and are transparent), while positive computed margins use
+ * devtools-style orange bands. CSS/stylesheet-only changes are observed too.
+ * Returns a disposer.
  */
 declare function wireCatalogGeometryOverlay(root: HTMLElement): () => void;
 /**