@kerfjs/ui 5.0.0-beta.61 → 5.0.0-beta.62

package/dist/pane.d.ts

@@ -22,6 +22,7 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-safe-area-inline-end'?: never;
     'data-chrome-placement'?: never;
     'data-chrome-dividers'?: never;
+    'data-appearance'?: never;
 }>;
 /** How a Pane's header and footer relate to its scrolling content. */
 type PaneChromePlacement = 'fixed' | 'auto';
@@ -31,6 +32,8 @@ type PaneChromePlacement = 'fixed' | 'auto';
  * chrome, as `wireScrollDividers` reports; `always`; or `none`.
  */
 type PaneChromeDividers = 'scroll' | 'always' | 'none';
+/** Background treatment of the Pane's scrolling work surface. */
+type PaneAppearance = 'default' | 'sunken';
 interface PaneProps {
     /** Optional fixed chrome above the scrolling content, arranged vertically. */
     header?: KerfUiContent;
@@ -56,6 +59,8 @@ interface PaneProps {
      * The line is drawn inside the chrome, so no state moves the content.
      */
     chromeDividers?: PaneChromeDividers;
+    /** Paint the scrolling work surface with the shared lowered-surface color. */
+    appearance?: PaneAppearance;
     /** Root semantics. Defaults to `div`. */
     element?: PaneElement;
     /** Scrolling content semantics. Defaults to `div`. */
@@ -90,13 +95,13 @@ interface PaneProps {
  * or a CollapsiblePanel) forwards, so the app configures that pane instead of
  * styling it. An omitted or `undefined` field keeps the composite's default.
  */
-type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers'>;
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'appearance'>;
 /**
  * An unpadded application column with optional fixed header/footer slots and one
  * scrolling vertical content owner. Separator lines are independently opt-in on
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, chromePlacement, chromeDividers, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, appearance, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -1,4 +1,4 @@
-export { Pane } from './chunk-EZVNC4J6.js';
+export { Pane } from './chunk-OD2VXAPL.js';
 
 
 //# sourceMappingURL=pane.js.map

package/dist/select.d.ts

@@ -58,6 +58,8 @@ interface SelectBaseProps<Value extends string = string> {
     size?: SelectSize;
     /** Closed trigger width; omit to keep the presentation's default. */
     triggerWidth?: SelectTriggerWidth;
+    /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */
+    caret?: boolean;
     /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */
     focusRingOwner?: SelectFocusRingOwner;
     /** Maximum closed-control label width in CSS pixels before ellipsis. */

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-TEYARRAK.js';
+export { Select } from './chunk-4MG3KXJM.js';
 
 
 

package/dist/split-view.d.ts

@@ -2,8 +2,8 @@ import * as kerfjs from 'kerfjs';
 import { NavStackProps, NavStackView } from './nav-stack.js';
 import { ResizableRegionProps } from './resizable-region.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import './toolbar.js';
 import './pane.js';
+import './toolbar.js';
 import './sides-BPSWde0A.js';
 import './toolbar-text.js';
 import './css-values.js';

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-5PESG2VP.js';
+import { NavStack } from './chunk-KYDDCJXU.js';
 import { ResizableRegion } from './chunk-KLJKU6ZL.js';
 
 

package/dist/styles/app-tab.css

@@ -162,6 +162,90 @@
   width: 2rem;
   min-width: 2rem;
 }
+/* TabBar owns the tablist width query; AppTab owns its own responsive
+   geometry and visually hidden name. The name remains in the accessibility
+   tree, so the tab keeps its accessible name without a rerender. */
+@container kui-tab-bar-tabs (max-width: 52rem) {
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@container kui-tab-bar-tabs (max-width: 44rem) {
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@container kui-tab-bar-tabs (max-width: 28rem) {
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
 /* In a TabBar, the tab styles itself in the context of its parent strip. A
    segmented strip's outer ends follow the pill track: the first tab's leading
    corners, and a filled strip's last tab's trailing corners, are pill-rounded

package/dist/styles/nav-stack.css

@@ -100,6 +100,13 @@
   inset: 0;
 }
 
+.kui-nav-stack__view[data-appearance="sunken"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
 /* Each view is its region's scroll owner: block insets become padding inside
    the scroller so content scrolls under an unsafe edge but can always be
    scrolled clear. A view whose only child is a Pane or layout lets that child
@@ -217,4 +224,10 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="nav-stack"]:only-child {
   height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }

package/dist/styles/pane.css

@@ -22,6 +22,33 @@
   grid-template-rows: auto minmax(0, 1fr) auto;
 }
 
+/* Paint the active scroll owner once, so alpha lowered colors do not stack.
+   Fixed chrome leaves the content slot scrolling; auto chrome lets the Pane
+   root scroll in its short mode, while its content remains transparent. */
+.kui-pane[data-appearance="sunken"] > .kui-pane__content {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
+.kui-pane[data-appearance="sunken"][data-chrome-placement="auto"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
+.kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
+  > .kui-pane__content {
+  background: transparent;
+}
+
+.kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
+  > :is(.kui-pane__header, .kui-pane__footer) {
+  background: var(--kui-pane-chrome-background, var(--kui-color-surface));
+}
+
 /* Safe areas. The pane root never pads, so its background and separators paint
    through an unsafe area; its slots compensate on the edges the pane still
    touches. The inherited `--kui-edge-inset-*` context says how far each edge
@@ -217,6 +244,12 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="pane"]:only-child {
   height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }
 
 /* As the only child of a NavStack view or a TabScaffold scene, a Pane fills

package/dist/styles/resizable-region.css

@@ -73,6 +73,15 @@
   > .kui-resizable-region__content {
   overflow: visible;
 }
+/* An open Web Awesome dropdown (including PopupMenu) releases both clipping
+   ancestors without rerendering the region during the dropdown lifecycle. */
+.kui-resizable-region:has(wa-dropdown[open]) {
+  z-index: var(--kui-resizable-region-popup-z, 5);
+  overflow: visible;
+}
+.kui-resizable-region:has(wa-dropdown[open]) > .kui-resizable-region__content {
+  overflow: visible;
+}
 .kui-resizable-region[data-separator="hidden"] {
   --kui-resizable-region-separator-color: transparent;
 }

package/dist/styles/select.css

@@ -108,6 +108,21 @@
   margin-inline-start: 0.75rem;
   transform: scale(0.875);
 }
+.kui-select[data-caret="false"]::part(expand-icon) {
+  display: none;
+}
+.kui-select[data-selected-presentation="icon-only"][data-caret="false"]::part(
+    combobox
+  ) {
+  width: var(
+    --_kui-toolbar-control-group-slot-height,
+    var(--_kui-select-height)
+  );
+  justify-content: center;
+}
+.kui-select[data-caret="false"] .kui-select__placeholder-chevron {
+  display: none;
+}
 .kui-select[data-selected-presentation="icon-only"]::part(display-input) {
   position: absolute;
   width: 1px;

package/dist/styles/split-view.css

@@ -137,4 +137,10 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="split-view"]:only-child {
   height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }

package/dist/styles/tab-bar.css

@@ -45,6 +45,9 @@
   scroll-padding-inline: var(--kui-tab-bar-strip-scroll-padding-inline, 0);
   overscroll-behavior-inline: contain;
 }
+.kui-tab-bar[data-icon-only-at] .kui-tab-bar__tabs {
+  container: kui-tab-bar-tabs / inline-size;
+}
 .kui-tab-bar[data-presentation="segmented"],
 .kui-tab-bar[data-presentation="inspector"] {
   --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);

package/dist/styles/tab-scaffold.css

@@ -46,6 +46,13 @@
   inset: 0;
 }
 
+.kui-tab-scaffold__scene[data-appearance="sunken"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
 /* A scene is its region's scroll owner, so its top inset is padding inside
    the scroller. A scene whose only child is a Pane or layout (usually a
    NavStack) lets that child own the insets instead. */
@@ -191,4 +198,10 @@
 :is([data-workbench-main], [data-workbench-panel-content])
   > [data-component="tab-scaffold"]:only-child {
   height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
 }

package/dist/styles/toolbar-text.css

@@ -47,17 +47,23 @@
   text-overflow: ellipsis;
 }
 
-.kui-toolbar-text[data-size="xlarge"] {
-  /* 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). */
+.kui-toolbar-text:is([data-size="xlarge"], [data-size="xlarge-fixed"]) {
+  /* Both title sizes keep page/panel title color and geometry. Height grows to
+     their text instead of clipping ascenders in the default 40px box. */
   height: auto;
   min-height: 2.75rem;
   color: var(--kui-color-text);
-  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
   letter-spacing: -0.025em;
 }
 
+.kui-toolbar-text[data-size="xlarge"] {
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+}
+
+.kui-toolbar-text[data-size="xlarge-fixed"] {
+  font-size: var(--kui-font-l);
+}
+
 .kui-toolbar-text[data-size="large"] {
   font-size: var(--kui-font-m);
   letter-spacing: -0.015em;
@@ -93,7 +99,10 @@
   min-height: 2.5rem;
 }
 
-.kui-toolbar-text[data-size="xlarge"][data-wrap="true"] {
+.kui-toolbar-text:is(
+    [data-size="xlarge"],
+    [data-size="xlarge-fixed"]
+  )[data-wrap="true"] {
   min-height: 2.75rem;
 }
 

package/dist/styles/toolbar.css

@@ -95,6 +95,13 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
+/* Equal side tracks center the middle zone on the toolbar's content box even
+   when one side has no controls. Side content still shrinks or wraps within
+   its own track, and responsive policies below may move a zone to a new row. */
+.kui-toolbar[data-center-align="balanced"][data-has-center="true"] {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
 .kui-toolbar[data-responsive="trailing-priority"][data-has-center="false"]:has(
     > .kui-toolbar__trailing [data-expanded="true"]
   ) {