@kerfjs/ui 5.0.0-beta.77 → 5.0.0-beta.79

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

@@ -142,6 +142,10 @@
    its first and last items can always be scrolled clear of it. A header or
    footer already owns that edge. */
 .kui-pane__content {
+  /* Descendants can use these resolved insets to bleed decoration to the
+     pane edge while keeping their own content aligned with ordinary items. */
+  --kui-pane-content-inset-inline-start: var(--_kui-pane-safe-inline-start);
+  --kui-pane-content-inset-inline-end: var(--_kui-pane-safe-inline-end);
   --_kui-pane-content-block-start: var(--_kui-pane-safe-block-start);
   --_kui-pane-content-block-end: var(--_kui-pane-safe-block-end);
   min-width: 0;
@@ -154,10 +158,23 @@
 }
 
 .kui-pane > .kui-pane__content {
+  padding-inline: var(--kui-pane-content-inset-inline-start)
+    var(--kui-pane-content-inset-inline-end);
   padding-block: var(--_kui-pane-content-block-start)
     var(--_kui-pane-content-block-end);
 }
 
+/* Add one outer gutter without changing the inherited item-margin token.
+   Nested Row, List, and Grid therefore keep their own default 8px insets. */
+.kui-pane[data-deep-inset="true"] > .kui-pane__content {
+  --kui-pane-content-inset-inline-start: calc(
+    var(--_kui-pane-safe-inline-start) + var(--kui-space-xs)
+  );
+  --kui-pane-content-inset-inline-end: calc(
+    var(--_kui-pane-safe-inline-end) + var(--kui-space-xs)
+  );
+}
+
 .kui-pane__header ~ .kui-pane__content {
   --_kui-pane-content-block-start: 0px;
 }
@@ -253,7 +270,7 @@
   --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
+/* As the only child of a NavStack view or a TabNavigator scene, a Pane fills
    it too, so its content owns the scroll and its header and footer stay
    pinned; the view or scene then never scrolls (it hands the Pane its
    safe-area edge context, which the Pane's slots apply). */

package/dist/styles/components/navigation/nav-stack/nav-stack.css

@@ -71,10 +71,6 @@
   background: var(--kui-color-surface);
 }
 
-.kui-nav-stack__header {
-  min-width: 0;
-}
-
 .kui-nav-stack__viewport {
   --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
   --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
@@ -106,11 +102,9 @@
   inset: 0;
 }
 
-.kui-nav-stack__view[data-appearance="sunken"] {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+.kui-nav-stack__view:has(> [data-component="pane"]) {
+  display: grid;
+  overflow: hidden;
 }
 
 /* Each view is its region's scroll owner: block insets become padding inside
@@ -180,9 +174,9 @@
 }
 
 .kui-nav-stack__bottom {
-  padding-block-end: var(--_kui-nav-stack-safe-block-end);
-  padding-inline: var(--_kui-nav-stack-safe-inline-start)
-    var(--_kui-nav-stack-safe-inline-end);
+  --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-nav-stack-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
   border-block-start: 1px solid
     var(--_kui-nav-stack-bottom-divider, transparent);
   background: var(--kui-color-surface);

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

@@ -73,6 +73,23 @@
   scroll-padding-block-start: var(--kui-edge-inset-block-start);
 }
 
+/* A plain scene adds one outer gutter; a sole Pane or layout keeps ownership
+   of its own content and may opt into deepInset there. */
+.kui-tab-scaffold__scene[data-deep-inset="true"]:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  ) {
+  padding-inline: calc(var(--kui-edge-inset-inline-start) + var(--kui-space-xs))
+    calc(var(--kui-edge-inset-inline-end) + var(--kui-space-xs));
+}
+
 .kui-tab-scaffold__scene
   > :not(
     :is(
@@ -192,7 +209,7 @@
 
 /* As the only child of a Workbench region (its main area or a panel's
    content, which the Workbench marks with `data-workbench-main` /
-   `data-workbench-panel-content`), a TabScaffold fills the region, so a
+   `data-workbench-panel-content`), a TabNavigator fills the region, so a
    composed toolbar's footer (or the app's own) sits at the region's bottom
    edge rather than under short content. */
 :is([data-workbench-main], [data-workbench-panel-content])

package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css

@@ -1,12 +1,67 @@
 .kui-dialog-surface > wa-dialog {
+  --_kui-dialog-surface-width: 35rem;
+  --_kui-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-dialog-surface-gutter, 1rem)
+  );
   --width: min(35rem, calc(100vw - 2rem));
 }
 .kui-dialog-surface[data-size="small"] > wa-dialog {
+  --_kui-dialog-surface-width: 25rem;
   --width: min(25rem, calc(100vw - 2rem));
 }
 .kui-dialog-surface[data-size="large"] > wa-dialog {
+  --_kui-dialog-surface-width: 50rem;
   --width: min(50rem, calc(100vw - 2rem));
 }
+.kui-dialog-surface[data-presentation="modal"][data-preferred-width]
+  > wa-dialog {
+  --width: min(
+    var(--_kui-dialog-surface-preferred-width),
+    calc(100vw - 2rem)
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog {
+  --width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+/* Web Awesome has a separate max-width clamp; setting --width alone cannot
+   provide an 8px phone gutter. Omitted props retain its legacy geometry. */
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog::part(dialog) {
+  max-width: max(
+    0px,
+    calc(
+      100vw - var(--_kui-dialog-surface-resolved-gutter) -
+        var(--_kui-dialog-surface-resolved-gutter)
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-max-height]
+  > wa-dialog::part(dialog) {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-max-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
 .kui-dialog-surface[data-body-inset="none"] > wa-dialog::part(body),
 .kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
   padding: 0;

package/dist/styles/nav-stack.css

@@ -71,10 +71,6 @@
   background: var(--kui-color-surface);
 }
 
-.kui-nav-stack__header {
-  min-width: 0;
-}
-
 .kui-nav-stack__viewport {
   --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
   --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
@@ -106,11 +102,9 @@
   inset: 0;
 }
 
-.kui-nav-stack__view[data-appearance="sunken"] {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+.kui-nav-stack__view:has(> [data-component="pane"]) {
+  display: grid;
+  overflow: hidden;
 }
 
 /* Each view is its region's scroll owner: block insets become padding inside
@@ -180,9 +174,9 @@
 }
 
 .kui-nav-stack__bottom {
-  padding-block-end: var(--_kui-nav-stack-safe-block-end);
-  padding-inline: var(--_kui-nav-stack-safe-inline-start)
-    var(--_kui-nav-stack-safe-inline-end);
+  --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-nav-stack-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
   border-block-start: 1px solid
     var(--_kui-nav-stack-bottom-divider, transparent);
   background: var(--kui-color-surface);

package/dist/styles/pane.css

@@ -142,6 +142,10 @@
    its first and last items can always be scrolled clear of it. A header or
    footer already owns that edge. */
 .kui-pane__content {
+  /* Descendants can use these resolved insets to bleed decoration to the
+     pane edge while keeping their own content aligned with ordinary items. */
+  --kui-pane-content-inset-inline-start: var(--_kui-pane-safe-inline-start);
+  --kui-pane-content-inset-inline-end: var(--_kui-pane-safe-inline-end);
   --_kui-pane-content-block-start: var(--_kui-pane-safe-block-start);
   --_kui-pane-content-block-end: var(--_kui-pane-safe-block-end);
   min-width: 0;
@@ -154,10 +158,23 @@
 }
 
 .kui-pane > .kui-pane__content {
+  padding-inline: var(--kui-pane-content-inset-inline-start)
+    var(--kui-pane-content-inset-inline-end);
   padding-block: var(--_kui-pane-content-block-start)
     var(--_kui-pane-content-block-end);
 }
 
+/* Add one outer gutter without changing the inherited item-margin token.
+   Nested Row, List, and Grid therefore keep their own default 8px insets. */
+.kui-pane[data-deep-inset="true"] > .kui-pane__content {
+  --kui-pane-content-inset-inline-start: calc(
+    var(--_kui-pane-safe-inline-start) + var(--kui-space-xs)
+  );
+  --kui-pane-content-inset-inline-end: calc(
+    var(--_kui-pane-safe-inline-end) + var(--kui-space-xs)
+  );
+}
+
 .kui-pane__header ~ .kui-pane__content {
   --_kui-pane-content-block-start: 0px;
 }
@@ -253,7 +270,7 @@
   --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
+/* As the only child of a NavStack view or a TabNavigator scene, a Pane fills
    it too, so its content owns the scroll and its header and footer stay
    pinned; the view or scene then never scrolls (it hands the Pane its
    safe-area edge context, which the Pane's slots apply). */

package/dist/styles/surface-scaffold.css

@@ -1,12 +1,67 @@
 .kui-dialog-surface > wa-dialog {
+  --_kui-dialog-surface-width: 35rem;
+  --_kui-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-dialog-surface-gutter, 1rem)
+  );
   --width: min(35rem, calc(100vw - 2rem));
 }
 .kui-dialog-surface[data-size="small"] > wa-dialog {
+  --_kui-dialog-surface-width: 25rem;
   --width: min(25rem, calc(100vw - 2rem));
 }
 .kui-dialog-surface[data-size="large"] > wa-dialog {
+  --_kui-dialog-surface-width: 50rem;
   --width: min(50rem, calc(100vw - 2rem));
 }
+.kui-dialog-surface[data-presentation="modal"][data-preferred-width]
+  > wa-dialog {
+  --width: min(
+    var(--_kui-dialog-surface-preferred-width),
+    calc(100vw - 2rem)
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog {
+  --width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+/* Web Awesome has a separate max-width clamp; setting --width alone cannot
+   provide an 8px phone gutter. Omitted props retain its legacy geometry. */
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog::part(dialog) {
+  max-width: max(
+    0px,
+    calc(
+      100vw - var(--_kui-dialog-surface-resolved-gutter) -
+        var(--_kui-dialog-surface-resolved-gutter)
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-max-height]
+  > wa-dialog::part(dialog) {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-max-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
 .kui-dialog-surface[data-body-inset="none"] > wa-dialog::part(body),
 .kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
   padding: 0;

package/dist/styles/{tab-scaffold.css → tab-navigator.css}

@@ -73,6 +73,23 @@
   scroll-padding-block-start: var(--kui-edge-inset-block-start);
 }
 
+/* A plain scene adds one outer gutter; a sole Pane or layout keeps ownership
+   of its own content and may opt into deepInset there. */
+.kui-tab-scaffold__scene[data-deep-inset="true"]:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  ) {
+  padding-inline: calc(var(--kui-edge-inset-inline-start) + var(--kui-space-xs))
+    calc(var(--kui-edge-inset-inline-end) + var(--kui-space-xs));
+}
+
 .kui-tab-scaffold__scene
   > :not(
     :is(
@@ -192,7 +209,7 @@
 
 /* As the only child of a Workbench region (its main area or a panel's
    content, which the Workbench marks with `data-workbench-main` /
-   `data-workbench-panel-content`), a TabScaffold fills the region, so a
+   `data-workbench-panel-content`), a TabNavigator fills the region, so a
    composed toolbar's footer (or the app's own) sits at the region's bottom
    edge rather than under short content. */
 :is([data-workbench-main], [data-workbench-panel-content])

package/dist/styles/token-search-field.css

@@ -82,6 +82,7 @@
 
 .kui-token-search__editor {
   grid-column: 2;
+  grid-row: 1;
   min-width: var(--kui-token-search-editor-min-width, 0px);
   min-height: var(--kui-token-search-line-size);
   padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
@@ -104,10 +105,20 @@
   }
 }
 
-.kui-token-search__editor:empty::before {
+.kui-token-search[data-placeholder-visible="true"]:has(
+    > .kui-token-search__editor
+  )::before {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+  padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
   color: var(--kui-color-text-quiet);
   content: attr(data-placeholder);
+  font-size: var(--kui-font-s);
+  line-height: 1.35;
+  overflow: hidden;
   pointer-events: none;
+  white-space: nowrap;
 }
 
 .kui-token-search__token {

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

@@ -80,6 +80,7 @@
    top margin, so it centers in the band by its own size. */
 :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
   > .kui-toolbar-control-group {
+  align-self: flex-start;
   margin-block-start: max(
     0px,
     calc(
@@ -610,17 +611,23 @@
         wa-button,
         .kui-select,
         .kui-toolbar-action-link
-      ):only-child
+      ):nth-child(1 of :where(:not([data-toolbar-visibility-state]))):where(
+        :nth-last-child(1 of :not([data-toolbar-visibility-state]))
+      )
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button, .kui-toolbar-action-link):only-child
+    > :is(button, wa-button, .kui-toolbar-action-link):nth-child(
+        1 of :where(:not([data-toolbar-visibility-state]))
+      ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
   )
   > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button):only-child
+    > :is(button, wa-button):nth-child(
+        1 of :where(:not([data-toolbar-visibility-state]))
+      ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
   )
   > wa-button:hover::part(base) {
   border-color: transparent;
@@ -758,6 +765,7 @@
    lone control belongs to the outer group surface; in a group of choices the
    image belongs only to the selected highlight. */
 .kui-toolbar-control-group[data-content="avatar"] {
+  background-origin: border-box;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -765,29 +773,46 @@
 
 .kui-toolbar-control-group[data-content="avatar"]:is(
     [data-single="true"],
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   ) {
   background-image: var(--kui-toolbar-avatar-image);
 }
 
 .kui-toolbar-control-group[data-content="avatar"]:is(
     [data-single="true"],
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > :is(button, wa-button) {
   color: transparent;
 }
 
 .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > button[aria-pressed="true"],
 .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > wa-button[aria-pressed="true"]::part(base) {
   color: transparent;
   background-image: var(--kui-toolbar-avatar-image);
+  background-origin: border-box;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -798,7 +823,10 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="neutral"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-neutral-fill-quiet);
   border-color: var(--kui-color-neutral-border-quiet);
   color: var(--kui-color-neutral-on-quiet);
@@ -806,7 +834,10 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="brand"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-brand-fill-quiet);
   border-color: var(--kui-color-brand-border-quiet);
   color: var(--kui-color-brand-on-quiet);
@@ -814,7 +845,10 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="success"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-success-fill-quiet);
   border-color: var(--kui-color-success-border-quiet);
   color: var(--kui-color-success-on-quiet);
@@ -822,7 +856,10 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="warning"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-warning-fill-quiet);
   border-color: var(--kui-color-warning-border-quiet);
   color: var(--kui-color-warning-on-quiet);
@@ -830,12 +867,25 @@
 
 .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="danger"]:has(
     > svg[aria-hidden="true"]
-  ):not(:has(> :not(svg[aria-hidden="true"])), :has(> svg ~ svg)) {
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
   background: var(--kui-color-danger-fill-quiet);
   border-color: var(--kui-color-danger-border-quiet);
   color: var(--kui-color-danger-on-quiet);
 }
 .kui-toolbar-control-group[data-toolbar-width-hidden="true"],
-.kui-toolbar-control-group__busy-status[data-toolbar-width-hidden="true"] {
+.kui-toolbar-control-group__busy-status[data-toolbar-width-hidden="true"],
+.kui-toolbar-control-group:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+),
+.kui-toolbar-control-group__busy-status:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-control-group > [data-toolbar-visibility-state],
+.kui-toolbar-control-group__busy-status > [data-toolbar-visibility-state] {
   display: none;
 }

package/dist/styles/toolbar-text.css

@@ -39,6 +39,7 @@ button.kui-toolbar-text:focus-visible {
    heights. */
 :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
   > .kui-toolbar-text {
+  align-self: flex-start;
   height: auto;
   min-height: var(--_kui-toolbar-band);
 }
@@ -159,6 +160,12 @@ button.kui-toolbar-text[data-tone="dark"]:hover {
   line-clamp: none;
   max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
 }
-.kui-toolbar-text[data-toolbar-width-hidden="true"] {
+.kui-toolbar-text[data-toolbar-width-hidden="true"],
+.kui-toolbar-text:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-text > [data-toolbar-visibility-state] {
   display: none;
 }

package/dist/styles/toolbar.css

@@ -150,19 +150,11 @@
   );
 }
 
-/* The control band. Every zone reserves one group-height row at the top of
-   the toolbar, and each item is centered in that band by its own size, not by
-   its siblings: a group or title shorter than the band takes half the
-   difference as a top margin, and anything taller (a wrapped title, a
-   multi-line search, a second trailing row) starts at the band's top and grows
-   down. A growing item therefore never moves the other items or its own top.
-   Centering the zones in the toolbar row instead dropped every control to the
-   middle of a two-line title. The band is resolved here, on the toolbar, so a
-   compact group's own smaller group size never redefines it.
-   `--_kui-toolbar-band` is context the toolbar provides: a ToolbarControlGroup
-   and a ToolbarText each center themselves in it from their own stylesheets
-   (toolbar-control-group.css, toolbar-text.css). A direct primary wa-button in
-   trailing is centered here without altering its Web Awesome chrome. */
+/* Every zone reserves a group-height control band. Direct custom content
+   centers against its zone's height by default. ToolbarText,
+   ToolbarControlGroup, and standalone wa-button keep their own first-band
+   placement, so taller siblings do not move their controls off that axis.
+   `--_kui-toolbar-band` is context those components use for that placement. */
 .kui-toolbar {
   --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
 }
@@ -175,7 +167,7 @@
   min-height: var(--_kui-toolbar-band);
   padding-inline: var(--kui-toolbar-zone-padding-inline, 0px);
   box-sizing: border-box;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
@@ -243,6 +235,7 @@
     0px,
     calc((var(--_kui-toolbar-band) - var(--wa-form-control-height)) / 2)
   );
+  align-self: flex-start;
   flex: 0 0 auto;
 }
 

package/dist/surface-scaffold-register.d.ts

@@ -0,0 +1,4 @@
+/** Importing this module registers wa-dialog and repairs wrapped native names. */
+declare const surfaceScaffoldElementsRegistered = true;
+
+export { surfaceScaffoldElementsRegistered };