@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.106

package/dist/styles/components/layout/pane/pane.css

@@ -500,3 +500,257 @@
   > [data-component="pane"]:only-child {
   height: 100%;
 }
+
+/* Compact chrome (`compactChrome`): the pane declares a policy for its header
+   and footer, and applies it only where its container presents compactly — a
+   NavStack view, a TabNavigator scene, a full-screen dialog, or a Workbench at
+   its compact width (448px or less). Elsewhere the chrome stays docked. */
+
+/* `scroll`: the pane scrolls as one column. Scrolling chrome moves with
+     the content; a footer settles at the bottom of short content and
+     scrolls past long content. Fixed chrome stays stuck to its edge. */
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane:is([data-compact-header="scroll"], [data-compact-footer="scroll"]) {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  grid-template-rows: auto minmax(max-content, 1fr) auto;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane:is([data-compact-header="scroll"], [data-compact-footer="scroll"])
+  > .kui-pane__content {
+  overflow: visible;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="scroll"]:not([data-compact-header])
+  > .kui-pane__header,
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="scroll"]:not([data-compact-footer])
+  > .kui-pane__footer {
+  position: sticky;
+  z-index: 1;
+  background: var(--kui-pane-chrome-background, var(--kui-color-surface));
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="scroll"]:not([data-compact-header])
+  > .kui-pane__header {
+  inset-block-start: 0;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="scroll"]:not([data-compact-footer])
+  > .kui-pane__footer {
+  inset-block-end: 0;
+}
+
+/* `overlay`: the chrome lies over the content's edge on the chrome
+     material, out of the way until the app opens it. The content keeps the
+     whole pane. */
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="overlay"]
+  > .kui-pane__header,
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="overlay"]
+  > .kui-pane__footer {
+  position: absolute;
+  z-index: 2;
+  inset-inline: 0;
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+  transition:
+    translate 200ms ease,
+    visibility 0s 200ms;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="overlay"]
+  > .kui-pane__header {
+  inset-block-start: 0;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="overlay"]
+  > .kui-pane__footer {
+  inset-block-end: 0;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="overlay"]:not([data-compact-header-open])
+  > .kui-pane__header {
+  visibility: hidden;
+  translate: 0 -100%;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="overlay"]:not([data-compact-footer-open])
+  > .kui-pane__footer {
+  visibility: hidden;
+  translate: 0 100%;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header-open]
+  > .kui-pane__header,
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer-open]
+  > .kui-pane__footer {
+  transition: translate 200ms ease;
+}
+
+@container kui-workbench (max-width: 28rem) {
+  /* `scroll`: the pane scrolls as one column. Scrolling chrome moves with
+     the content; a footer settles at the bottom of short content and
+     scrolls past long content. Fixed chrome stays stuck to its edge. */
+  :where(.kui-workbench)
+    .kui-pane:is(
+      [data-compact-header="scroll"],
+      [data-compact-footer="scroll"]
+    ) {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    grid-template-rows: auto minmax(max-content, 1fr) auto;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane:is([data-compact-header="scroll"], [data-compact-footer="scroll"])
+    > .kui-pane__content {
+    overflow: visible;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="scroll"]:not([data-compact-header])
+    > .kui-pane__header,
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="scroll"]:not([data-compact-footer])
+    > .kui-pane__footer {
+    position: sticky;
+    z-index: 1;
+    background: var(--kui-pane-chrome-background, var(--kui-color-surface));
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="scroll"]:not([data-compact-header])
+    > .kui-pane__header {
+    inset-block-start: 0;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="scroll"]:not([data-compact-footer])
+    > .kui-pane__footer {
+    inset-block-end: 0;
+  }
+
+  /* `overlay`: the chrome lies over the content's edge on the chrome
+     material, out of the way until the app opens it. The content keeps the
+     whole pane. */
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="overlay"]
+    > .kui-pane__header,
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="overlay"]
+    > .kui-pane__footer {
+    position: absolute;
+    z-index: 2;
+    inset-inline: 0;
+    -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+    backdrop-filter: var(--kui-chrome-material-filter);
+    background: var(--kui-chrome-material);
+    transition:
+      translate 200ms ease,
+      visibility 0s 200ms;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="overlay"]
+    > .kui-pane__header {
+    inset-block-start: 0;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="overlay"]
+    > .kui-pane__footer {
+    inset-block-end: 0;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="overlay"]:not([data-compact-header-open])
+    > .kui-pane__header {
+    visibility: hidden;
+    translate: 0 -100%;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="overlay"]:not([data-compact-footer-open])
+    > .kui-pane__footer {
+    visibility: hidden;
+    translate: 0 100%;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header-open]
+    > .kui-pane__header,
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer-open]
+    > .kui-pane__footer {
+    transition: translate 200ms ease;
+  }
+}

package/dist/styles/components/layout/resizable-region/resizable-region.css

@@ -73,8 +73,9 @@
   > .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. */
+/* An open raw Web Awesome dropdown releases both clipping ancestors without
+   rerendering the region during the dropdown lifecycle. (A PopupMenu opens in
+   the top layer, which no ancestor clips.) */
 .kui-resizable-region:has(wa-dropdown[open]) {
   z-index: var(--kui-resizable-region-popup-z, 5);
   overflow: visible;

package/dist/styles/components/layout/row/row.css

@@ -75,7 +75,13 @@
   flex-wrap: wrap;
 }
 
+/* `center` gathers the children in the middle, keeping their gap;
+   `space-around` (`around`) spreads them. */
 .kui-row[data-h-align="center"] {
+  justify-content: center;
+}
+
+.kui-row[data-h-align="around"] {
   justify-content: space-around;
 }
 
@@ -93,6 +99,11 @@
 }
 
 .kui-row[data-v-align="middle"] {
+  align-items: center;
+  align-content: center;
+}
+
+.kui-row[data-v-align="around"] {
   align-items: center;
   align-content: space-around;
 }

package/dist/styles/components/layout/split-view/split-view.css

@@ -67,6 +67,31 @@
   --kui-edge-inset-inline-start: 0px;
 }
 
+/* A column whose only child is a Pane or layout gives that child its whole
+   height in one row, so the child's own footer pins to the column's end
+   instead of the child auto-placing into the column's header row. */
+.kui-split-view__list:has(
+  > :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+),
+.kui-split-view__detail:has(
+  > :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+) {
+  grid-template-areas: none;
+  grid-template-rows: minmax(0, 1fr);
+}
+
 /* Each pane pads for the edges it touches unless its only child is a Pane or
    layout, which then owns the insets. */
 .kui-split-view__list:not(

package/dist/styles/components/layout/workbench/workbench.css

@@ -641,12 +641,19 @@
    separator — below the Workbench's own container breakpoint (`narrow`: 704px
    or less, `compact`: 448px or less, as `ResizableRegion`'s
    `responsiveFillAt`), and inline above it. The Workbench becomes a named
-   inline-size container only when a panel opts in. The work area keeps its
+   inline-size container only when a panel opts in, or when a Pane inside it
+   declares `compactChrome` (which applies at its compact width). The work area keeps its
    safe-area inset under an overlay panel. */
 .kui-workbench[data-responsive-overlay="true"] {
   container: kui-workbench / inline-size;
 }
 
+.kui-workbench:has(
+  [data-component="pane"]:is([data-compact-header], [data-compact-footer])
+) {
+  container: kui-workbench / inline-size;
+}
+
 /* A numeric pixel threshold is measured by wireWorkbench and marked on the
    panel. Keep its overlay geometry and covered work area in step with that
    single mark, including when the app changes the threshold at render time. */
@@ -907,9 +914,10 @@
   }
 }
 
-/* Release the panel and its sliding/scrolling content while a PopupMenu or
-   Web Awesome dropdown is open. This comes after resize clipping and keeps
-   the popup in place through wa-show/wa-after-hide without a prop change. */
+/* Release the panel and its sliding/scrolling content while a raw Web
+   Awesome dropdown is open (a PopupMenu opens in the top layer, which no
+   ancestor clips). This comes after resize clipping and keeps the popup in
+   place through wa-show/wa-after-hide without a prop change. */
 .kui-workbench__rail:not([data-collapsed="true"]):has(wa-dropdown[open]),
 .kui-workbench__drawer:not([data-collapsed="true"]):has(wa-dropdown[open]) {
   overflow: visible;

package/dist/styles/components/navigation/disclosure-arrow/disclosure-arrow.css

@@ -16,6 +16,26 @@
   height: 100%;
 }
 
+/* In a Disclosure the native <details> owns the open state, so the arrow
+   follows its live [open] rather than the render-time rotation. */
+.kui-disclosure > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(0deg);
+}
+
+.kui-disclosure[open] > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(90deg);
+}
+
+.kui-disclosure:dir(rtl) > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(180deg);
+}
+
+.kui-disclosure[open]:dir(rtl)
+  > .kui-disclosure__summary
+  > .kui-disclosure-arrow {
+  transform: rotate(90deg);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-disclosure-arrow {
     transition-duration: 0s;

package/dist/styles/components/navigation/tab-bar/tab-bar.css

@@ -74,10 +74,10 @@
 }
 /* A segmented strip's outer ends follow the pill track: a compact tab is inset
    from the track's ends by the same distance as from its top and bottom, so
-   each end is concentric with the track. AppTab rounds its own outer corners
-   to match in this context (see app-tab.css); TabBar never styles AppTab. */
+   each end is concentric with the track. TabBarItem rounds its own outer corners
+   to match in this context (see tab-bar-item.css); TabBar never styles TabBarItem. */
 .kui-tab-bar[data-presentation="segmented"]
-  .kui-tab-bar__tabs:has(> .kui-app-tab[data-size="compact"]) {
+  .kui-tab-bar__tabs:has(> .kui-tab-bar-item[data-size="compact"]) {
   padding-inline: calc(
     (var(--kui-toolbar-group-size, calc(2px + 2.625rem)) - 2rem) /
       2 - 1px
@@ -159,10 +159,10 @@
 }
 
 .kui-tab-bar[data-presentation="rail"]:dir(ltr):not(
-    :has(> .kui-tab-bar__tabs > .kui-app-tab[data-pinned="true"])
+    :has(> .kui-tab-bar__tabs > .kui-tab-bar-item[data-pinned="true"])
   ):has(> .kui-tab-bar__tabs[data-scroll-overflow*="l"])::before,
 .kui-tab-bar[data-presentation="rail"]:dir(rtl):not(
-    :has(> .kui-tab-bar__tabs > .kui-app-tab[data-pinned="true"])
+    :has(> .kui-tab-bar__tabs > .kui-tab-bar-item[data-pinned="true"])
   ):has(> .kui-tab-bar__tabs[data-scroll-overflow*="r"])::before,
 .kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
     > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
@@ -178,7 +178,7 @@
 
 .kui-tab-bar:not([data-presentation="rail"])
   > .kui-tab-bar__tabs[data-scroll-overflow*="l"]:not(
-    :dir(ltr):has(> .kui-app-tab[data-pinned="true"])
+    :dir(ltr):has(> .kui-tab-bar-item[data-pinned="true"])
   ) {
   border-left-color: var(
     --kui-tab-bar-divider-color,
@@ -188,7 +188,7 @@
 
 .kui-tab-bar:not([data-presentation="rail"])
   > .kui-tab-bar__tabs[data-scroll-overflow*="r"]:not(
-    :dir(rtl):has(> .kui-app-tab[data-pinned="true"])
+    :dir(rtl):has(> .kui-tab-bar-item[data-pinned="true"])
   ) {
   border-right-color: var(
     --kui-tab-bar-divider-color,