@smwb/ui-styles 2.1.0 → 2.3.0

package/README.md

@@ -101,6 +101,16 @@ tokens on its own root, so a value set on `:root` or a wrapper does not reach it
 the matching `--smui-*Color` token (`default` is `--smui-onSurfaceVariant`). Its sizes are `@statusDotSizeSm`
 (8px), `@statusDotSizeMd` (12px) and `@statusDotRing` (2px, the ring of `unknown`) in `theme.config`.
 
+`shape="diamond"` reuses every one of those tokens: the colour and the ring are unchanged, and only the box is
+derived. A square turned 45deg spans side × √2, so the diamond's side is the size over `@statusDotDiamondRatio`
+(√2) — 8.4853px at `md`, 5.6569px at `sm` — which lands its bounding box back on the dot's 12px and 8px. A transform leaves the layout box at the unturned
+side, so the rule adds a `margin` of half of (size − side) from the same tokens, and a label beside the diamond
+stays where it is beside the dot. The turn
+is `@statusDotDiamondRotation` (45deg) and the corners `@statusDotDiamondRadius` (`@smui-radius-none`), because the
+dot's `border-radius: 50%` would otherwise survive the turn as a circle. Turning the box rather than clipping a
+full-size one is what keeps `unknown` a real `@statusDotRing` border and lets the pulse's `::after` turn with its
+parent. None of the three is a `--smui-*` runtime token, matching the dot's own sizes, which are compile-time too.
+
 Against `--smui-surfaceBackground` and `--smui-pageBackground`, the default theme's status colours measure
 at least 3:1 in both modes (the lowest is `attention` on the light surface, 3.04:1). The semantic colours are one
 value for both modes, so a theme that makes `@warningColor` lighter, or any of them darker for the dark theme,
@@ -122,16 +132,18 @@ it, and the quiet zone keeps the modules clear of the rounding.
 The dependency graph (`DagView` in `@smwb/ui-solid` and `@smwb/ui-react`) takes its colours from theme variables that default to the
 runtime tokens, so the dark theme follows without extra settings:
 
-| Variable (`theme.config`)                      | Runtime property on `.smwb-dag-view`       | Default                                                                   |
-| ---------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------- |
-| `@dagViewNodeBg`                               | `--smwb-dag-view-node-bg`                  | `var(--smui-surfaceBackground)`                                           |
-| `@dagViewNodeBorder`                           | `--smwb-dag-view-node-border`              | `var(--smui-outlineColor)`                                                |
-| `@dagViewEdgeColor`                            | `--smwb-dag-view-edge-color`               | `var(--smui-outlineColor)`                                                |
-| `@dagViewEdgeActiveColor`                      | `--smwb-dag-view-edge-active-color`        | `var(--smui-primaryColor)`                                                |
-| `@dagViewSelectedRing`                         | `--smwb-dag-view-selected-ring`            | `var(--smui-primaryColor)`                                                |
-| `@dagViewStatusIdle` … `@dagViewStatusSkipped` | `--smwb-dag-view-status-idle` … `-skipped` | outline, on-surface variant, info, success, warning, error, disabled text |
-| `@dagViewDimOpacity`                           | `--smwb-dag-view-dim-opacity`              | `0.35`                                                                    |
-| `@dagViewHeight`                               | — (the graph's `height`)                   | `480px`                                                                   |
+| Variable (`theme.config`)                      | Runtime property on `.smwb-dag-view`                                    | Default                                                                   |
+| ---------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| `@dagViewNodeBg`                               | `--smwb-dag-view-node-bg`                                               | `var(--smui-surfaceBackground)`                                           |
+| `@dagViewNodeBorder`                           | `--smwb-dag-view-node-border`                                           | `var(--smui-outlineColor)`                                                |
+| `@dagViewNodeBorderStyle`                      | `--smwb-dag-view-node-border-style`                                     | `solid`                                                                   |
+| `@dagViewStatusPendingBorderStyle` … `Skipped` | `--smwb-dag-view-status-pending-border-style` … `-skipped-border-style` | `false`: the node border style                                            |
+| `@dagViewEdgeColor`                            | `--smwb-dag-view-edge-color`                                            | `var(--smui-outlineColor)`                                                |
+| `@dagViewEdgeActiveColor`                      | `--smwb-dag-view-edge-active-color`                                     | `var(--smui-primaryColor)`                                                |
+| `@dagViewSelectedRing`                         | `--smwb-dag-view-selected-ring`                                         | `var(--smui-primaryColor)`                                                |
+| `@dagViewStatusIdle` … `@dagViewStatusSkipped` | `--smwb-dag-view-status-idle` … `-skipped`                              | outline, on-surface variant, info, success, warning, error, disabled text |
+| `@dagViewDimOpacity`                           | `--smwb-dag-view-dim-opacity`                                           | `0.35`                                                                    |
+| `@dagViewHeight`                               | — (the graph's `height`)                                                | `480px`                                                                   |
 
 The statuses are `idle`, `pending`, `running`, `success`, `warning`, `error` and `skipped`; a node with any other
 status is drawn as `idle`. Each colour variable has a `…Dark` twin (e.g. `@dagViewStatusSuccessDark`), `false` by
@@ -144,6 +156,13 @@ node's accent comes from `--smwb-dag-view-accent`. For a status of your own, set
 The graph's default height, `@dagViewHeight`, is set by the stylesheet, so its `height` prop or a height in its
 `style` wins over it.
 
+The node frame's line style is `@dagViewNodeBorderStyle` (`solid`): a theme that sets it to `dashed` dashes every
+node. To dash only some nodes, set `@dagViewStatusWarningBorderStyle: dashed` (a status variable per built-in status
+except `idle`; `false`, the default, follows the theme-wide style), or give a node `variant: "dashed"` (`"solid"`
+keeps it solid under a dashed theme): the node's own variant outranks its status, and the status outranks the theme.
+One `border-style` draws all four sides, so the status stripe on the left dashes too and the node reads as one
+frame, not a frame inside a frame. The border style has no `…Dark` twin: it is not a colour.
+
 #### Swimlanes
 
 `Swimlanes` (in `@smwb/ui-react` and `@smwb/ui-solid`) reads only runtime tokens, so the dark theme follows without

package/less/components/appBar/appBar.less

@@ -123,35 +123,57 @@
         calc(@appBarPaddingX + var(--smwb-appbar-wc-left));
     }
   }
+  // The bar is a flex row itself: without `min-width: 0` the inner row would not shrink below its content
+  // and a long title would push the right group past the bar's edge.
   &__inner {
     display: flex;
     align-items: center;
     width: 100%;
+    min-width: 0;
     justify-content: space-between;
     flex-wrap: nowrap;
   }
+  // Room is given out in this order: the right group keeps its content size, the middle takes what is
+  // left over (and is the first to give it up), and only when even that is gone the title gives way.
   &__left {
     display: flex;
     align-items: center;
     gap: @appBarActionsGap;
     white-space: nowrap;
+    flex: 0 1 auto;
+    min-width: 0;
   }
   // The title may be a heading (`titleAs`): drop the UA margins and font so it
-  // looks the same as the div.
+  // looks the same as the div. When the bar is too narrow for it, it is cut with an ellipsis.
+  // clip with a margin, not hidden: a control in the title (a link, a button) keeps its focus ring, which
+  // paints outside the box. `hidden` stays first for engines that know no `overflow: clip`.
   &__left__title {
     margin: 0;
     font: inherit;
+    min-width: 0;
+    overflow: hidden;
+    overflow: clip;
+    overflow-clip-margin: @appBarClipMargin;
+    text-overflow: ellipsis;
   }
   &__right {
     white-space: nowrap;
+    flex: 0 0 auto;
   }
+  // The basis is 0, not `auto` with `width: 100%`: the middle grows into the free space instead of
+  // claiming the whole bar as its basis and taking its share of a shortfall from the title and the right group.
   &__mid {
-    width: 100%;
     display: flex;
-    flex: 1 1 auto;
+    flex: 1 1 0;
+    min-width: 0;
     flex-direction: column;
     flex-wrap: nowrap;
 
+    // A field wider than the room left to the middle narrows with it instead of running under the right group.
+    > * {
+      max-width: 100%;
+    }
+
     &.smwb-middle {
       align-items: center;
     }

package/less/components/avatar/avatar.less

@@ -37,6 +37,13 @@
     border-radius: 0;
   }
 
+  // An image is drawn on the page, not on the fill: a transparent PNG/SVG shows
+  // what is behind the avatar. The fill stays under the fallback (initials, an
+  // icon), also after the image failed to load: the class goes with the image.
+  &_image {
+    background-color: transparent;
+  }
+
   &__img {
     width: 100%;
     height: 100%;

package/less/components/breadcrumbs/breadcrumbs.less

@@ -54,4 +54,65 @@
       background-color: var(--smui-onSurfaceActive);
     }
   }
+
+  // One line: the list never wraps, the crumbs shrink and cut their text with an
+  // ellipsis, the leading ones first and down to a floor, and the trailing crumb
+  // (the page's own title) only after them. Below the sum of the floors the trail
+  // keeps them and runs past its box instead of squeezing a crumb to nothing.
+  &--no-wrap {
+    min-width: 0;
+
+    .smwb-breadcrumbs__list {
+      flex-wrap: nowrap;
+    }
+
+    // `text-overflow` reaches only the inline text of the box it sits on, so a block child (a
+    // heading, Typography) is cut by its own rule, and the crumb's own cuts what is inline in it.
+    // Clip with a margin, not hidden: a link or the expand button keeps its focus ring, which
+    // paints outside the box. `hidden` stays first for engines that know no `overflow: clip`.
+    .smwb-breadcrumbs__item,
+    .smwb-breadcrumbs__item > * {
+      min-width: 0;
+      overflow: hidden;
+      overflow: clip;
+      overflow-clip-margin: @breadcrumbsClipMargin;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .smwb-breadcrumbs__item {
+      display: block;
+      flex: 0 1 auto;
+    }
+
+    .smwb-breadcrumbs__item > * {
+      max-width: 100%;
+    }
+
+    // A link is a box of its own, so it is cut there and its focus ring wraps what is shown
+    // instead of the whole text running out of the crumb.
+    .smwb-breadcrumbs__item > a {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .smwb-breadcrumbs__item:not(:last-child) {
+      flex-shrink: @breadcrumbsLeadingShrink;
+      min-width: @breadcrumbsLeadingMinWidth;
+    }
+
+    .smwb-breadcrumbs__item:last-child {
+      min-width: @breadcrumbsLastMinWidth;
+    }
+
+    // The expand button is not text: it keeps its size instead of taking the floor.
+    .smwb-breadcrumbs__item:has(> .smwb-breadcrumbs__expand) {
+      flex: none;
+      min-width: 0;
+    }
+
+    .smwb-breadcrumbs__separator {
+      flex: none;
+    }
+  }
 }

package/less/components/button/button.less

@@ -46,6 +46,36 @@
     min-height: var(--smui-control-h-lg, @smui-control-h-lg);
   }
 
+  // Icon-only: a square of the size's control height. The width and the height both come from the
+  // same token, the padding is gone and min-width with it, so the icon sits in the middle and
+  // the box is the same for every variant and for a link. It wins over full-width on purpose.
+  // border-box: a <button> has it from the user agent, an <a> only from a reset, and the outlined
+  // border would otherwise add 2px to the link. The corners keep the button's own radius, capped
+  // by @buttonIconOnlyMaxBorderRadius so a pill button does not turn into a circle unless the theme asks.
+  &.smwb-button_icon-only {
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 0;
+    flex: none;
+    border-radius: min(@buttonBorderRadius, @buttonIconOnlyMaxBorderRadius);
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+    &.smwb-small {
+      width: var(--smui-control-h-sm, @smui-control-h-sm);
+      height: var(--smui-control-h-sm, @smui-control-h-sm);
+    }
+    &.smwb-medium {
+      width: var(--smui-control-h-md, @smui-control-h-md);
+      height: var(--smui-control-h-md, @smui-control-h-md);
+    }
+    &.smwb-large {
+      width: var(--smui-control-h-lg, @smui-control-h-lg);
+      height: var(--smui-control-h-lg, @smui-control-h-lg);
+    }
+  }
+
   &.smwb-contained {
     color: var(--smui-onPrimaryColor);
     .smui-elevation(2);

package/less/components/buttonGroup/buttonGroup.less

@@ -22,7 +22,8 @@
       box-shadow: none;
     }
 
-    .smwb-horizontal & {
+    // Bound to the group itself: ScreenDivider also puts a bare orientation class on its wrapper and panes.
+    .smwb-button-group.smwb-horizontal > & {
       &:not(:first-of-type) {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
@@ -57,7 +58,7 @@
       }
     }
 
-    .smwb-vertical & {
+    .smwb-button-group.smwb-vertical > & {
       &:not(:first-of-type) {
         border-top-right-radius: 0;
         border-top-left-radius: 0;

package/less/components/chip/chip.less

@@ -134,6 +134,17 @@
     min-height: 24px;
     padding: 0 @smui-space-sm;
     font-size: 0.75rem;
+
+    // On a coarse pointer a small chip that is a button or a link is as tall as the sm step
+    // (44px there): its content is the button (the link is the box itself), and the box is
+    // what a finger has to hit. A small chip that only labels, or only deletes, stays 24px.
+    @media (pointer: coarse) {
+      &:is(a[href]),
+      &:has(> .smwb-chip__content[role="button"]) {
+        height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        min-height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      }
+    }
   }
 
   // A color repaints the neutral filled/outlined rules above. The guard mirrors

package/less/components/dagView/dagView.less

@@ -22,11 +22,24 @@
   .smwb-dag-view-token(status-error; StatusError; @suffix);
   .smwb-dag-view-token(status-skipped; StatusSkipped; @suffix);
 }
-// A built-in status: its accent, unless the node sets its own.
+// The line style of the node frame, theme-wide and per built-in status. The status
+// ones are `false` by default: they emit nothing, so the node falls back to the
+// theme-wide one.
+.smwb-dag-view-border-style(@status; @var) {
+  @full: ~"dagViewStatus@{var}BorderStyle";
+  .smwb-dag-view-border-style-value(@status; @@full);
+}
+.smwb-dag-view-border-style-value(@status; @value) when not (@value = false) {
+  --smwb-dag-view-status-@{status}-border-style: @value;
+}
+// A built-in status: its accent, unless the node sets its own, and its frame line
+// style, unless the theme gives it none.
 .smwb-dag-view-status(@status) {
   @accent: ~"var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-@{status}))";
+  @style: ~"var(--smwb-dag-view-status-@{status}-border-style, var(--smwb-dag-view-node-border-style))";
   &[data-status="@{status}"] {
     --smwb-dag-view-accent: @accent;
+    --smwb-dag-view-border-style: @style;
   }
 }
 
@@ -35,6 +48,13 @@
 .smwb-dag-view {
   .smwb-dag-view-tokens("");
   --smwb-dag-view-dim-opacity: @dagViewDimOpacity;
+  --smwb-dag-view-node-border-style: @dagViewNodeBorderStyle;
+  .smwb-dag-view-border-style(pending; Pending);
+  .smwb-dag-view-border-style(running; Running);
+  .smwb-dag-view-border-style(success; Success);
+  .smwb-dag-view-border-style(warning; Warning);
+  .smwb-dag-view-border-style(error; Error);
+  .smwb-dag-view-border-style(skipped; Skipped);
 
   position: relative;
   width: 100%;
@@ -120,6 +140,10 @@
     .smwb-dag-view-status(warning);
     .smwb-dag-view-status(error);
     .smwb-dag-view-status(skipped);
+    // The frame's line style; a node's own `variant` outranks the status and the theme.
+    // One `border-style` draws all four sides, the stripe included, so a dashed node
+    // is one frame, not a frame inside a frame.
+    --smwb-dag-view-border-style: var(--smwb-dag-view-node-border-style);
 
     position: absolute;
     box-sizing: border-box;
@@ -130,6 +154,7 @@
     border: 1px solid var(--smwb-dag-view-node-border);
     // The status stripe.
     border-left: 4px solid var(--smwb-dag-view-accent);
+    border-style: var(--smwb-dag-view-border-style);
     border-radius: @smui-radius-md;
     background-color: var(--smwb-dag-view-node-bg);
     color: var(--smui-onSurfaceColor);
@@ -143,6 +168,14 @@
       border-color 0.12s,
       opacity 0.12s;
 
+    &[data-variant="solid"] {
+      --smwb-dag-view-border-style: solid;
+    }
+
+    &[data-variant="dashed"] {
+      --smwb-dag-view-border-style: dashed;
+    }
+
     &:hover {
       border-color: color-mix(in srgb, var(--smwb-dag-view-edge-active-color) 45%, var(--smwb-dag-view-node-border));
       border-left-color: var(--smwb-dag-view-accent);

package/less/components/list/list.less

@@ -62,6 +62,9 @@
       min-height: 36px;
       padding-top: @smui-space-xs;
       padding-bottom: @smui-space-xs;
+      @media (pointer: coarse) {
+        min-height: max(36px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+      }
     }
 
     &_divider {
@@ -73,6 +76,10 @@
     min-height: 36px;
     padding-top: @smui-space-xs;
     padding-bottom: @smui-space-xs;
+    // On a coarse pointer a dense row is the sm step (44px there) at least.
+    @media (pointer: coarse) {
+      min-height: max(36px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    }
   }
 
   // A row that is a link: the anchor takes the padding, so the whole row is the link.

package/less/components/menu/menu.less

@@ -50,6 +50,11 @@
 
     &--dense {
       height: 32px;
+
+      // On a coarse pointer a dense item is the sm step (44px there) at least.
+      @media (pointer: coarse) {
+        height: max(32px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+      }
     }
 
     &--disabled {

package/less/components/meter/meter.less

@@ -40,10 +40,44 @@
     color: var(--smui-onSurfaceVariant);
   }
 
+  // The text before the bar: it takes the first column, the bar the flexible one.
+  &_text-before {
+    grid-template-columns: auto minmax(@meterMinBarWidth, 1fr);
+
+    .smwb-meter__text {
+      order: -1;
+    }
+  }
+
+  // Compact: a fixed-width bar and small secondary text; the block shrinks to its
+  // content instead of filling the parent.
+  &_compact {
+    grid-template-columns: @meterCompactBarWidth auto;
+    width: fit-content;
+    max-width: 100%;
+    font-size: 0.75rem;
+
+    .smwb-meter__track {
+      height: @meterCompactHeight;
+    }
+
+    .smwb-meter__text {
+      color: var(--smui-onSurfaceVariant);
+    }
+  }
+
+  &_compact&_text-before {
+    grid-template-columns: auto @meterCompactBarWidth;
+  }
+
   &_bar-only {
     grid-template-columns: minmax(@meterMinBarWidth, 1fr);
   }
 
+  &_compact&_bar-only {
+    grid-template-columns: @meterCompactBarWidth;
+  }
+
   &_color-neutral {
     --smwb-meter-color: var(--smui-onSurfaceVariant);
   }

package/less/components/screenDivider/screenDivider.less

@@ -6,7 +6,8 @@
     overflow: hidden;
     &.smwb-vertical {
       flex-direction: column;
-      .smwb-screen-divider__resizer {
+      // A child, not a descendant: a divider nested in a pane keeps its own orientation's resizer.
+      > .smwb-screen-divider__resizer {
         border-top: thin solid var(--smui-primaryColor);
         border-bottom: thin solid var(--smui-primaryColor);
         border-left: none;
@@ -42,15 +43,22 @@
       content: "......";
       text-align: center;
     }
+    // A collapsed divider has no bar to see or drag: the other pane takes the whole wrapper.
+    &[hidden] {
+      display: none;
+    }
   }
-  &__first {
-    min-height: 5px;
-    min-width: 5px;
-    flex-shrink: 1;
-  }
+  &__first,
   &__second {
     min-height: 5px;
     min-width: 5px;
     flex-shrink: 1;
+    // A folded pane stays mounted but has no size, shows nothing and takes no focus.
+    &.smwb-collapsed {
+      min-height: 0;
+      min-width: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
   }
 }

package/less/components/sheet/sheet.less

@@ -1,4 +1,9 @@
 .smwb-sheet {
+  // Gap between the top edge of the window and the top of the sheet and of its modal scrim. `Sheet`
+  // sets it from its `offsetTop` prop and `AppLayout` publishes its sticky header's height as the
+  // page default, so a panel starts below the header; with neither it is 0 and nothing moves.
+  @sheetOffsetTop: var(--smui-sheet-offset-top, 0px);
+
   background-color: var(--smui-surfaceBackground);
   position: fixed;
   opacity: 0;
@@ -129,10 +134,12 @@
 
   &.smwb-top {
     border-radius: 0 0 @sheetBorderRadius @sheetBorderRadius;
-    top: 0;
+    top: @sheetOffsetTop;
     left: 0;
     width: 100%;
     height: var(--sizeProp);
+    // A tall panel stops at the bottom of the window instead of running past it by the offset.
+    max-height: calc(100% - @sheetOffsetTop);
     transform: translateY(-100%);
     flex-direction: column;
     .smwb-sheet__header {
@@ -142,9 +149,9 @@
 
   &.smwb-left {
     border-radius: 0 @sheetBorderRadius @sheetBorderRadius 0;
-    top: 0;
+    top: @sheetOffsetTop;
     left: 0;
-    height: 100%;
+    height: calc(100% - @sheetOffsetTop);
     width: var(--sizeProp);
     transform: translateX(-100%);
     flex-direction: row-reverse;
@@ -157,9 +164,9 @@
 
   &.smwb-right {
     border-radius: @sheetBorderRadius 0 0 @sheetBorderRadius;
-    top: 0;
+    top: @sheetOffsetTop;
     right: 0;
-    height: 100%;
+    height: calc(100% - @sheetOffsetTop);
     width: var(--sizeProp);
     transform: translateX(100%);
     .smwb-sheet__header {
@@ -170,15 +177,18 @@
 
   &__overlay {
     position: fixed;
-    top: 0;
+    top: @sheetOffsetTop;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: calc(100% - @sheetOffsetTop);
     display: flex;
     flex-direction: column;
     z-index: 100;
     opacity: 0;
     transition: all 0.25s ease-in-out;
+    // The panel slides in from beyond an edge of the scrim; clipped to the scrim, a panel sliding down from the top
+    // does not cross the header above it.
+    clip-path: inset(0);
     &.smwb-entered {
       opacity: 1;
     }

package/less/components/statusDot/statusDot.less

@@ -18,6 +18,31 @@
     height: @statusDotSizeSm;
   }
 
+  // A diamond is the same marker turned corner-up. Its side is the dot's size over
+  // sqrt(2), so the turned square spans exactly the dot's box and the two shapes sit in
+  // one another's place. Turning the box, rather than clipping a full-size one, is what
+  // keeps the statuses readable: the `unknown` ring stays a real border of
+  // @statusDotRing, and the pulse's ::after turns with its parent and grows as a diamond.
+  // A clip-path would cut that border into four corner slivers and would need a second
+  // element to draw the ring, which this empty <span> does not have.
+  // A transform does not change layout, so the smaller square alone would leave a row
+  // short of the dot's size: the margin gives the layout box the difference back, half on
+  // each side, so a label beside the diamond sits where it sits beside the dot.
+  &_shape-diamond {
+    @side: round((@statusDotSizeMd / @statusDotDiamondRatio), @statusDotDiamondPrecision);
+    width: @side;
+    height: @side;
+    margin: round(((@statusDotSizeMd - @side) / 2), @statusDotDiamondPrecision);
+    border-radius: @statusDotDiamondRadius;
+    transform: rotate(@statusDotDiamondRotation);
+  }
+  &_shape-diamond&_size-sm {
+    @side: round((@statusDotSizeSm / @statusDotDiamondRatio), @statusDotDiamondPrecision);
+    width: @side;
+    height: @side;
+    margin: round(((@statusDotSizeSm - @side) / 2), @statusDotDiamondPrecision);
+  }
+
   &_status-active {
     --smwb-status-dot-color: var(--smui-infoColor);
   }

package/less/components/tabGroups/tabGroups.less

@@ -29,24 +29,77 @@
     box-shadow: inset 0 @tabGroupsActiveLineWidth 0 0 var(--smui-primaryColor);
   }
 
+  // From a basis of 0 the tabs take only what the header has left: they give way and scroll first,
+  // and the strip content shrinks only once they are gone.
   &__tabs {
-    flex: 1 1 auto;
+    flex: 1 1 0;
     min-width: 0;
   }
 
-  // The group's actions button: the box of Tabs' overflow trigger, which it sits beside.
+  // What the app puts at the end of the tab row (`stripActions`). It keeps its size while the tabs
+  // can give way, then is clipped at its end, so the group's actions button never leaves the row.
+  &__strip-actions {
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    gap: @tabGroupsStripActionsGap;
+    padding: 0 @tabGroupsStripActionsPaddingX;
+
+    // A component that renders nothing leaves the wrapper empty (React cannot tell it from
+    // outside): no padding, no box.
+    &:empty {
+      display: none;
+    }
+  }
+
+  // Centred on the row whatever `align-self` a control carries: `Button` sets `flex-start`, so that
+  // it does not stretch in a column, and would sit on the row's top edge. Through the header, to
+  // outrank that rule whichever stylesheet comes first.
+  &__header &__strip-actions > * {
+    align-self: center;
+  }
+
+  // The group's actions button is an icon-only control: it carries the `smwb-button_icon-only` marker
+  // that `Button` writes for `iconOnly`, and its box is a square of the row's control height - the
+  // height the tabs beside it are. The side is a component variable, not Tabs' fixed 40px trigger
+  // width: that width, stretched over a dense row, drew a 40x36 rectangle where the mockups draw a
+  // square. A dense row is `@tabDenseHeight`, off the `--smui-control-h-*` grid, and marks itself.
+  // `min-width` and the horizontal padding are gone with it, so the icon sits in the middle.
   &__actions-trigger {
+    --smwb-tab-groups-actions-size: var(--smui-control-h-lg, @smui-control-h-lg);
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
     flex: 0 0 auto;
-    width: @tabsOverflowTriggerWidth;
+    // Its own height is the square now, not the row's stretch, so a row that grows past it (a tab
+    // with a two-line label) still keeps the button in the middle of the row.
+    align-self: center;
+    min-width: 0;
+    width: var(--smwb-tab-groups-actions-size);
+    height: var(--smwb-tab-groups-actions-size);
     padding: 0;
     border: none;
     background: none;
     color: var(--smui-onSurfaceVariant);
     cursor: pointer;
 
+    // Compact tab rows (`TabGroups` `dense`): the square follows the shorter row.
+    &--dense {
+      --smwb-tab-groups-actions-size: var(--smui-tabDenseHeight, @tabDenseHeight);
+
+      // The tabs beside it are the sm step (44px) at least on a coarse pointer, so it is too.
+      @media (pointer: coarse) {
+        --smwb-tab-groups-actions-size: max(
+          var(--smui-tabDenseHeight, @tabDenseHeight),
+          var(--smui-control-h-sm, @smui-control-h-sm-coarse)
+        );
+      }
+    }
+
     &:hover:not(:disabled) {
       background-color: var(--smui-onSurfaceHover);
     }