@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

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

@@ -0,0 +1,197 @@
+.kui-tab-bar {
+  --kui-tab-bar-background: transparent;
+  --kui-tab-bar-border: transparent;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem))
+  );
+  padding: var(--kui-toolbar-gap, 0.5rem);
+  box-sizing: border-box;
+  background: transparent;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+}
+
+.kui-tab-bar__tabs {
+  display: flex;
+  min-width: 0;
+  min-height: var(
+    --kui-tab-bar-strip-min-height,
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+  );
+  margin-block: var(--kui-tab-bar-strip-margin-block, 0);
+  padding: var(--kui-tab-bar-strip-padding, 1px);
+  /* Scroll along the strip only: overflow-x alone computes overflow-y to auto,
+     so any vertical excess would let the strip scroll vertically on touch. */
+  overflow: auto var(--kui-tab-bar-strip-overflow-block, hidden);
+  box-sizing: border-box;
+  border: var(--kui-tab-bar-strip-border-width, 1px) solid
+    var(--kui-tab-bar-border);
+  border-radius: var(
+    --kui-tab-bar-strip-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  background: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-tab-bar-background)
+  );
+  scrollbar-width: none;
+  align-items: center;
+  flex: var(--kui-tab-bar-strip-flex, 1 1 auto);
+  gap: var(--kui-tab-bar-strip-gap, 0);
+  scroll-padding-inline: var(--kui-tab-bar-strip-scroll-padding-inline, 0);
+  overscroll-behavior-inline: contain;
+}
+.kui-tab-bar__tabs[data-snap-tabs="true"] {
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline-start: var(--kui-tab-bar-snap-inset, 0px);
+}
+/* The snap end room is scrollable content after the last tab, not padding on
+   the strip: padding is part of the strip's box, which a flex item cannot
+   shrink below, so a room measured at one width would hold the strip open
+   past its allocation when it narrows and push the trailing and end zones out
+   of the bar. As content it lengthens only the scroll range, and the strip
+   still shrinks to its allocation. The start margin gives back the strip gap,
+   so an empty room adds no width. */
+.kui-tab-bar__tabs[data-snap-tabs="true"]::after {
+  content: "";
+  inline-size: var(--kui-tab-bar-snap-end-extra, 0px);
+  margin-inline-start: calc(-1 * var(--kui-tab-bar-strip-gap, 0px));
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
+}
+.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);
+  --kui-tab-bar-border: var(--kui-color-neutral-border-quiet);
+}
+/* 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. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs:has(> .kui-app-tab[data-size="compact"]) {
+  padding-inline: calc(
+    (var(--kui-toolbar-group-size, calc(2px + 2.625rem)) - 2rem) /
+      2 - 1px
+  );
+}
+.kui-tab-bar[data-presentation="inspector"] {
+  min-height: 2.125rem;
+  padding: 0;
+}
+.kui-tab-bar[data-presentation="inspector"] .kui-tab-bar__tabs {
+  min-height: var(--kui-tab-bar-strip-min-height, 2.125rem);
+  border-radius: var(
+    --kui-tab-bar-strip-radius,
+    var(--kui-layout-rounded-radius)
+  );
+}
+.kui-tab-bar[data-trailing-placement="adjacent"] .kui-tab-bar__tabs {
+  flex: 0 1 auto;
+}
+
+.kui-tab-bar__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.kui-tab-bar__leading,
+.kui-tab-bar__trailing,
+.kui-tab-bar__end {
+  display: flex;
+  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  align-items: center;
+  flex: none;
+}
+.kui-tab-bar__trailing {
+  flex: var(--kui-tab-bar-trailing-flex, none);
+}
+
+.kui-tab-bar__end {
+  margin-inline-start: auto;
+}
+
+/* Overflow dividers: a line on each side of the tab strip beyond which tabs
+   are scrolled out of view, as `wireScrollDividers` reports through the
+   strip's `data-scroll-overflow` (physical sides). A rail strip has no
+   visible track, so the bar draws the line with its own pseudo-elements,
+   ordered onto the strip's edges: `::before` between the leading zone and the
+   strip, `::after` between the strip and the trailing zone. Each is 1px wide
+   and gives back its width and one gap through a negative margin, so it
+   overlaps the strip's edge and never moves a tab or an action; hidden, it is
+   transparent. A segmented or inspector strip already draws a bordered track,
+   so its overflowing side takes the divider color on that border instead of
+   a straight line across its rounded end. */
+.kui-tab-bar > .kui-tab-bar__leading {
+  order: -2;
+}
+
+.kui-tab-bar > :is(.kui-tab-bar__trailing, .kui-tab-bar__end) {
+  order: 1;
+}
+
+.kui-tab-bar::before,
+.kui-tab-bar::after {
+  content: "";
+  position: relative;
+  z-index: 1;
+  width: 1px;
+  background: transparent;
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
+}
+
+.kui-tab-bar::before {
+  order: -1;
+  margin-inline-end: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar::after {
+  margin-inline-start: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.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[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[data-scroll-overflow*="r"])::before,
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
+  )::after,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="l"]
+  )::after {
+  background: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.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"])
+  ) {
+  border-left-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.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"])
+  ) {
+  border-right-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}

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

@@ -0,0 +1,443 @@
+.kui-tab-scaffold {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--_kui-tab-scaffold-background, var(--kui-color-surface));
+  /* Safe areas: the scenes and the bar paint through unsafe areas; the bar
+     compensates for the bottom and inline edges, and the scenes for the top
+     and inline edges (see pane.css for the `--kui-edge-inset-*` context). */
+  --_kui-tab-scaffold-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-tab-scaffold-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-tab-scaffold-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-tab-scaffold-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.kui-tab-scaffold__scenes {
+  --kui-edge-inset-block-start: var(--_kui-tab-scaffold-safe-block-start);
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: var(--_kui-tab-scaffold-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-tab-scaffold-safe-inline-end);
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Every tab stays mounted (its NavStack keeps its stack and scroll); only the
+   active scene is shown. */
+.kui-tab-scaffold__scene {
+  position: absolute;
+  overflow: auto;
+  inset: 0;
+}
+
+.kui-tab-scaffold__scene:is(:focus-visible, [data-outlined="true"]) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-tab-scaffold__scene[data-appearance="sunken"] {
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+}
+
+/* `background`: the navigator's color paints the root and a docked bar (the
+   overlay bar keeps the chrome material); a tab's own color paints its scene
+   and replaces its appearance's fill. A nested navigator never inherits the
+   color. Forced colors paint the system surface. */
+.kui-tab-scaffold:not([data-background]) {
+  --_kui-tab-scaffold-background: initial;
+}
+
+.kui-tab-scaffold__scene[data-kui-tint]:not([data-background]) {
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__scene[data-background] {
+  background: var(--_kui-tab-scaffold-scene-background);
+}
+
+@media (forced-colors: active) {
+  .kui-tab-scaffold[data-background],
+  .kui-tab-scaffold[data-background]:not([data-bar-presentation="overlay"])
+    > .kui-tab-scaffold__bar,
+  .kui-tab-scaffold__scene[data-background] {
+    background: Canvas;
+  }
+}
+
+/* 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. */
+.kui-tab-scaffold__scene:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+) {
+  padding-block: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
+  padding-inline: var(--kui-edge-inset-inline-start)
+    var(--kui-edge-inset-inline-end);
+  scroll-padding-block: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
+}
+
+/* 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-block-start: calc(
+    var(--kui-edge-inset-block-start) + var(--kui-space-xs)
+  );
+  padding-block-end: calc(
+    var(--kui-edge-inset-block-end) + var(--kui-space-xs)
+  );
+  padding-inline: calc(var(--kui-edge-inset-inline-start) + var(--kui-space-xs))
+    calc(var(--kui-edge-inset-inline-end) + var(--kui-space-xs));
+  scroll-padding-block: calc(
+      var(--kui-edge-inset-block-start) + var(--kui-space-xs)
+    )
+    calc(var(--kui-edge-inset-block-end) + var(--kui-space-xs));
+}
+
+.kui-tab-scaffold__scene
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
+.kui-tab-scaffold__scene[data-active="false"] {
+  visibility: hidden;
+}
+
+.kui-tab-scaffold__bar {
+  display: flex;
+  flex: 0 0 auto;
+  padding-block-start: var(--kui-space-2xs);
+  /* Respect the home-indicator safe area on iOS-class devices. */
+  padding-block-end: calc(
+    var(--kui-space-2xs) + var(--_kui-tab-scaffold-safe-block-end)
+  );
+  padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
+    var(--_kui-tab-scaffold-safe-inline-end);
+  /* The reserved 1px edge serves both the sunken-surface separator and the
+     scroll divider. Changing its color never moves the bar or a tab. */
+  border-block-start: 1px solid
+    var(--_kui-tab-scaffold-bar-divider, transparent);
+  background: var(--_kui-tab-scaffold-background, var(--kui-color-surface));
+}
+
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]:only-child
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="nav-stack"]:only-child
+      > [data-nav-stack-viewport]
+      > [data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:not(
+    [data-chrome-dividers],
+    [data-bar-material="clear"]
+  )
+  > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
+.kui-tab-scaffold[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-tab-scaffold__bar {
+  --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
+}
+
+/* `barPresentation="overlay"`: the bar paints the translucent chrome
+   material. Once `wireTabNavigator` has measured the live bar
+   (`data-bar-overlay="measured"`, with its border-box block size, bottom safe
+   area and 1px top edge included, published on this root), the bar lies over
+   the scenes' bottom edge and the scenes hand that size to their content as
+   the block-end edge context (outranking the docked 0px above): a plain scene
+   pads and scroll-pads by it, and a sole Pane or layout (a NavStack, whose own
+   bottom toolbar then sits just above the bar) clears it itself. Content
+   scrolls visibly beneath the bar while its last item rests clear of it.
+   Unwired, the bar stays docked. */
+.kui-tab-scaffold[data-bar-presentation="overlay"] > .kui-tab-scaffold__bar {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"] {
+  position: relative;
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"]
+  > .kui-tab-scaffold__bar {
+  position: absolute;
+  z-index: 2;
+  inset-block-end: 0;
+  /* Like the NavStack overlay bars, it ends where a classic scrollbar's
+     track begins, so the thumb and buttons stay visible and usable. */
+  inset-inline: 0 var(--_kui-tab-scaffold-bar-scrollbar-inline-size, 0px);
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"]
+  > .kui-tab-scaffold__scenes {
+  --kui-edge-inset-block-end: var(--_kui-tab-scaffold-bar-block-size, 0px);
+}
+
+@media (forced-colors: active) {
+  /* Its always-present 1px top border becomes the visible edge. */
+  .kui-tab-scaffold[data-bar-presentation="overlay"] > .kui-tab-scaffold__bar {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+}
+
+/* `barPresentation="clear"`: an overlay bar (the same measuring and edge
+   inset as above) that is fully transparent, for a bar over imagery. With
+   `scrollEdge="material"` a pseudo-element carrying the chrome material
+   fades in (opacity only) while the active scene continues beneath the bar,
+   and out once it is scrolled to its end. A clear bar draws no scroll
+   divider. */
+.kui-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+}
+
+:where(.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge])
+  > .kui-tab-scaffold__bar {
+  position: relative;
+  isolation: isolate;
+}
+
+/* The scroll edge fades in as content scrolls beneath the bar: the wiring
+   publishes `--kui-scroll-edge-progress` (0 at rest, 1 once content lies
+   `scrollEdgeDistance` beyond the bar) and only the layer's opacity follows
+   it; the filter never animates. Unwired, it stays clear. */
+.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  inset: 0;
+  opacity: var(--kui-scroll-edge-progress, 0);
+  pointer-events: none;
+}
+
+.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge="material"]
+  > .kui-tab-scaffold__bar::before {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge="surface"]
+  > .kui-tab-scaffold__bar::before {
+  background: var(--kui-color-surface);
+}
+
+/* Static effects and slow displays snap the edge on while content lies
+   beneath the bar instead of tracking the scroll. */
+:root[data-kui-effects="static"]
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar::before {
+  opacity: 0;
+}
+
+:root[data-kui-effects="static"]
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar[data-scroll-divider*="t"]::before {
+  opacity: 1;
+}
+
+@media (update: slow) {
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar::before {
+    opacity: 0;
+  }
+
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar[data-scroll-divider*="t"]::before {
+    opacity: 1;
+  }
+}
+
+/* Clear chrome turns opaque where transparency would hurt, like the
+   material itself. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .kui-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+    background: var(--kui-chrome-material);
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar::before {
+    content: none;
+  }
+}
+
+.kui-tab-scaffold__tab {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: var(--kui-space-2xs) var(--kui-space-xs);
+  border: 0;
+  color: var(--kui-color-text-quiet);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.kui-tab-scaffold__tab[aria-selected="true"] {
+  color: var(--kui-color-brand-on-quiet);
+}
+
+/* Over the material, content of any color passes beneath the bar. Both label
+   colors fall below AA over the worst case (the material over black in light,
+   white in dark): the quiet unselected color, and in light the brand selected
+   color (about 3.2:1). An unselected tab lifts halfway toward the normal text
+   color, as an overlaid ToolbarText description does, and the selected tab
+   mixes 40% of it into the brand color, staying plainly the brand hue. */
+.kui-tab-scaffold[data-bar-presentation="overlay"]
+  > .kui-tab-scaffold__bar
+  > .kui-tab-scaffold__tab:not([aria-selected="true"]) {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-text-quiet),
+    var(--kui-color-text) 50%
+  );
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"]
+  > .kui-tab-scaffold__bar
+  > .kui-tab-scaffold__tab[aria-selected="true"] {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-brand-on-quiet),
+    var(--kui-color-text) 40%
+  );
+}
+
+.kui-tab-scaffold__tab:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
+.kui-tab-scaffold__tab-icon {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+/* The iOS tab-bar badge: over the icon's top-trailing corner, its leading
+   edge just past the icon's center line so a longer count grows outward. The
+   Badge keeps its own geometry; only this anchor is positioned. Without an
+   icon the badge stays in flow above the label. */
+.kui-tab-scaffold__tab-badge {
+  display: flex;
+  pointer-events: none;
+}
+
+.kui-tab-scaffold__tab-icon > .kui-tab-scaffold__tab-badge {
+  position: absolute;
+  inset-block-start: -0.4375rem;
+  inset-inline-start: calc(50% + 0.1875rem);
+}
+
+/* The text-free dot never grows, so it centers on the icon's top-trailing
+   corner instead: half over the glyph, half outside it. */
+.kui-tab-scaffold__tab-icon
+  > .kui-tab-scaffold__tab-badge[data-badge-kind="dot"] {
+  inset-block-start: -0.125rem;
+  inset-inline-start: calc(100% - 0.3125rem);
+}
+
+.kui-tab-scaffold__tab-icon svg {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+.kui-tab-scaffold__tab-label {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  font-size: var(--kui-font-2xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 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 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])
+  > [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);
+}