@smwb/ui-styles 2.1.0 → 2.2.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/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/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,11 +29,38 @@
     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;
   }
 
+  // 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: the box of Tabs' overflow trigger, which it sits beside.
   &__actions-trigger {
     display: inline-flex;

package/less/components/tabs/tab/tab.less

@@ -213,6 +213,47 @@
   text-transform: none;
 }
 
+// Content-width tabs (Tabs `fit`): a tab is as wide as what it holds — marker, label, close button —
+// and the row no longer shares itself out between its tabs, so what is left of the row stays empty.
+// The width stays between two tokens: a short label does not shrink the tab to a sliver, a long one
+// is cut with an ellipsis at the maximum (the full text is the tab's `title`). The limits belong to
+// the row's flex child: the item when the tab has a close button or actions, the tab otherwise. In
+// an item the tab gives way to its controls, which keep their size, and fills the minimum.
+.smwb-tabs--fit {
+  // How far a cut label's box reaches past its line box, so that overflow: hidden, which text-overflow
+  // needs, does not clip the descenders and accents that line-height: 1 leaves outside it.
+  @tabFitLabelOverhang: 0.25em;
+
+  .smwb-tab,
+  .smwb-tab-item {
+    flex: 0 0 auto;
+    min-width: var(--smui-tabFitMinWidth, @tabFitMinWidth);
+    max-width: var(--smui-tabFitMaxWidth, @tabFitMaxWidth);
+  }
+
+  .smwb-tab-item > .smwb-tab {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .smwb-tab__content {
+    min-width: 0;
+  }
+
+  .smwb-tab__icon {
+    flex: 0 0 auto;
+  }
+
+  .smwb-tab__text-label {
+    min-width: 0;
+    padding-block: @tabFitLabelOverhang;
+    margin-block: -@tabFitLabelOverhang;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 // The close button shows when it is reachable: the item is hovered (item not disabled),
 // the item is the active tab, or focus is inside the item. The disabled button stays
 // hidden; the reveal restores what the hidden defaults below took away. Hidden means

package/less/components/toggle/toggle.less

@@ -41,6 +41,30 @@
     min-height: var(--smui-control-h-lg, @smui-control-h-lg);
     justify-content: center;
   }
+  // The compact look, for a status row or a toolbar: the label shares the line with
+  // the switch (placement "top", the default, counts as "left"; "right" keeps its
+  // order) and the row is the small control height, capped at the compact maximum, in
+  // place of the size rule's. The :has() rules above weigh the same, so this one
+  // follows them. The switch gives up height to fit the row; its width and thumb
+  // stay, and the thumb centres itself on the track. Nothing here clips: the focus
+  // ring and the thumb halo draw outside the row.
+  @compact-height: min(var(--smui-control-h-sm, @smui-control-h-sm), @toggleCompactMaxHeight);
+  &__wrapper_compact:has(.smwb-toggle) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: @compact-height;
+    height: @compact-height;
+    .smwb-toggle {
+      height: min(@toggleTrackHeight, 100%);
+    }
+    .smwb-toggle__label {
+      white-space: nowrap;
+    }
+  }
+  &__wrapper_compact.smwb-toggle__wrapper_label-right:has(.smwb-toggle) {
+    flex-direction: row-reverse;
+  }
   &.smwb-disabled {
     opacity: 0.35;
     pointer-events: none;

package/less/components/treeView/treeView.less

@@ -1,31 +1,54 @@
 .smwb-tree {
-  &__wrapper {
-    .smwb-tree__node {
-      &:first-child {
-        border-left: 0;
-        &::before {
-          opacity: 0;
-        }
-      }
+  // The row height, the node's left padding and the corner's horizontal arm are custom properties of the tree,
+  // so the guide corner (drawn by each node's ::before) follows the row: it is half the row height deep, which
+  // puts its arm at the middle of a row of any height. The dense look swaps in the small control height and a
+  // tighter indent; a caller can set any of the three on the tree itself (the `style` prop).
+  --smwb-tree-row-h: var(--smui-control-h-md, @smui-control-h-md);
+  --smwb-tree-indent: @treeViewIndent;
+  --smwb-tree-arm: @treeViewGuideArm;
+
+  &_dense {
+    --smwb-tree-row-h: var(--smui-control-h-sm, @smui-control-h-sm);
+    --smwb-tree-indent: @treeViewIndentDense;
+    --smwb-tree-arm: @treeViewGuideArmDense;
+  }
+
+  // A root node sits alone in its wrapper, so it is the wrapper's first child: that is the one to leave without
+  // a connector. Matched through the child combinator, the rule does not reach the first child of a nested level.
+  &__wrapper > .smwb-tree__node:first-child {
+    border-left: 0;
+    &::before {
+      opacity: 0;
     }
   }
+
+  // Without guides a nested node swaps its 1px line for the same width of padding, so the levels keep their step.
+  &_no-guides &__node &__node {
+    border-left-width: 0;
+    padding-left: calc(var(--smwb-tree-indent) + @treeViewGuideWidth);
+
+    &::before {
+      display: none;
+    }
+  }
+
   &__node {
     &:last-child {
       border-left-color: transparent;
     }
-    padding-left: @treeViewIndent;
-    margin-left: 9px;
+    padding-left: var(--smwb-tree-indent);
+    margin-left: @treeViewNodeMargin;
     position: relative;
-    border-left: 1px solid var(--smui-primaryColor);
+    border-left: @treeViewGuideWidth solid var(--smui-primaryColor);
 
     &::before {
       position: absolute;
       top: 0;
-      left: -1px;
-      height: 20px;
-      width: 25px;
-      border-bottom: 1px solid var(--smui-primaryColor);
-      border-left: 1px solid var(--smui-primaryColor);
+      left: -@treeViewGuideWidth;
+      height: calc(var(--smwb-tree-row-h) / 2);
+      width: var(--smwb-tree-arm);
+      border-bottom: @treeViewGuideWidth solid var(--smui-primaryColor);
+      border-left: @treeViewGuideWidth solid var(--smui-primaryColor);
       content: "";
       font-weight: 600;
       font-size: 14px;
@@ -54,7 +77,7 @@
       gap: @treeViewItemGap;
       // min-height, not height: a fixed row height let a wrapped two-line label
       // overflow the node and overlap the next one.
-      min-height: 40px;
+      min-height: var(--smwb-tree-row-h);
     }
 
     &__toggle {

package/less/default/globals/default.variables.less

@@ -97,6 +97,14 @@
 @avatarGroupMaxStacked: 12; // children laid each over the next; any past these overlap the other way
 
 @breadcrumbsGap: @smui-space-sm;
+// Single-line trail: the leading crumbs give way first (this many times as fast as the last one), down to
+// a floor, so the last crumb is cut only once they are.
+@breadcrumbsLeadingShrink: 100;
+@breadcrumbsLeadingMinWidth: 3em;
+// The last crumb never gets narrower than this, so a very narrow box still shows the start of the page title.
+@breadcrumbsLastMinWidth: 4em;
+// How far a clipped crumb still paints outside its box: a 2px focus ring at a 2px offset.
+@breadcrumbsClipMargin: @smui-space-xs;
 
 @dividerSpacing: @smui-space-sm;
 @dividerTextGap: @smui-space-md;
@@ -120,6 +128,8 @@
 @appBarPaddingX: @smui-space-lg;
 @appBarActionPadding: @smui-space-md;
 @appBarActionsGap: 10px; // off-grid
+// How far a clipped title still paints outside its box: a 2px focus ring at a 2px offset.
+@appBarClipMargin: @smui-space-xs;
 // Width reserved for the OS window buttons in `AppBar variant="window"`: the macOS traffic lights of Electron's
 // `hiddenInset` end around 70-78px, so with @appBarPaddingX the content starts at 80px; Windows/Linux draw three
 // 46px caption buttons. Not theme tokens — an app overrides both sides with --smui-appBarWindowControlsWidth.
@@ -177,9 +187,18 @@
 @progressDotMargin: @smui-space-xs;
 @meterHeight: 6px;
 @meterMinBarWidth: 3.5rem; // the bar keeps at least this much beside its text
+@meterCompactHeight: 4px; // off-grid
+@meterCompactBarWidth: 64px; // the compact meter's bar is this wide, not flexible
 @statusDotSizeSm: 8px; // @smui-space-2
 @statusDotSizeMd: 12px; // @smui-space-3
 @statusDotRing: 2px; // the unknown status is a ring this thick
+// A square turned 45deg spans side * sqrt(2), so the diamond's side is the dot's size
+// divided by this: the two shapes then share one bounding box, and a margin makes up
+// the layout box, which a transform leaves at the unturned side.
+@statusDotDiamondRatio: sqrt(2);
+@statusDotDiamondPrecision: 4; // decimals kept in the diamond's side and margin
+@statusDotDiamondRotation: 45deg; // corner-up, the diamond of the onreel thread marker
+@statusDotDiamondRadius: @smui-radius-none; // sharp corners; the dot's are a circle
 
 // A QR code is always dark modules on a white square — never theme tokens, so no
 // theme (or forced-colours mode, see the component's print/forced-color-adjust) can
@@ -261,6 +280,8 @@
 @tabLabelPaddingLeft: @smui-space-sm;
 @tabDensePaddingX: @smui-space-md;
 @tabDenseHeight: 36px; // off-grid; the row height of Tabs dense, the height of the compact onreel strips
+@tabFitMinWidth: (@smui-space-10 * 2); // Tabs `fit`: a short label does not shrink the tab below this
+@tabFitMaxWidth: (@smui-space-16 * 4); // Tabs `fit`: a longer label is cut with an ellipsis at this width
 @tabCloseSize: @smui-space-6; // the close button of a closable tab
 @tabControlsGap: @smui-space-xs; // between a tab's close button, its actions and the row's next tab
 @tabsFadeWidth: 2.5rem; // scrollable row: the fading edge beyond which tabs are hidden
@@ -273,6 +294,8 @@
 @tabGroupsSeparatorHitArea: 8px; // off-grid; the invisible grip around that track
 @tabGroupsDropTintOpacity: 0.16; // how much primary the zone a dragged tab would land in shows
 @tabGroupsActiveLineWidth: 2px; // off-grid; the line over the header of the group in use
+@tabGroupsStripActionsGap: @smui-space-xs; // between the controls the app puts at the end of a group's tab row
+@tabGroupsStripActionsPaddingX: @smui-space-xs; // that content's distance from the tabs and from the group's actions button
 
 @tableCellPaddingX: @smui-space-lg;
 @tableToolbarMarginBottom: 10px; // off-grid
@@ -295,11 +318,20 @@
 @textFieldAdornmentFilledMarginTop: @smui-space-md;
 
 @toggleGap: @smui-space-sm;
+// The compact Toggle's row is the small control height, but never taller than this.
+@toggleCompactMaxHeight: 28px;
 
 @tooltipPaddingX: @smui-space-sm;
 
 @treeViewIndent: 30px; // off-grid
 @treeViewItemGap: 10px; // off-grid
+@treeViewGuideWidth: 1px;
+@treeViewNodeMargin: 9px; // off-grid
+@treeViewGuideArm: 25px; // off-grid
+// The dense look. A node's indent is its padding; with @treeViewNodeMargin (9px) and @treeViewGuideWidth (1px) the step from a row to its
+// children's is 16px (6 + 9 + 1), the arm ends at the child's row, and the row height is @smui-control-h-sm.
+@treeViewIndentDense: 6px; // off-grid
+@treeViewGuideArmDense: 6px; // off-grid
 
 /*-------------------
      Text Field
@@ -367,6 +399,9 @@
     Button
 --------------------*/
 @buttonBorderRadius: 24px;
+// The most an icon-only button rounds its corners: the smaller of this and @buttonBorderRadius.
+// A pill radius would make the square a circle; set @smui-radius-pill here to get one.
+@buttonIconOnlyMaxBorderRadius: @smui-radius-md;
 @smallButtonFontSize: 13px;
 @mediumButtonFontSize: 14px;
 @largeButtonFontSize: 15px;
@@ -529,6 +564,7 @@
 // are the theme's runtime tokens, so the dark theme follows on its own.
 @dagViewNodeBg: ~"var(--smui-surfaceBackground)";
 @dagViewNodeBorder: ~"var(--smui-outlineColor)";
+@dagViewNodeBorderStyle: solid;
 @dagViewEdgeColor: ~"var(--smui-outlineColor)";
 @dagViewEdgeActiveColor: ~"var(--smui-primaryColor)";
 @dagViewSelectedRing: ~"var(--smui-primaryColor)";
@@ -540,6 +576,13 @@
 @dagViewStatusWarning: ~"var(--smui-warningColor)";
 @dagViewStatusError: ~"var(--smui-errorColor)";
 @dagViewStatusSkipped: ~"var(--smui-disabledTextColor)";
+// The line style of a status's node frame; `false`: the theme-wide @dagViewNodeBorderStyle.
+@dagViewStatusPendingBorderStyle: false;
+@dagViewStatusRunningBorderStyle: false;
+@dagViewStatusSuccessBorderStyle: false;
+@dagViewStatusWarningBorderStyle: false;
+@dagViewStatusErrorBorderStyle: false;
+@dagViewStatusSkippedBorderStyle: false;
 // How far the nodes and edges away from the selection fade, with dimUnrelated.
 @dagViewDimOpacity: 0.35;
 // The graph's height when the app sets none (its `height` prop or `style`).

package/less/variables.less

@@ -93,6 +93,8 @@
   --smui-tabIconColor: @tabIconColor;
   --smui-tabColorDefault: @tabColorDefault;
   --smui-tabDenseHeight: @tabDenseHeight;
+  --smui-tabFitMinWidth: @tabFitMinWidth;
+  --smui-tabFitMaxWidth: @tabFitMaxWidth;
 
   --smui-sliderColor: @sliderColor;
   --smui-sliderDisabledColor: @sliderDisabledColor;

package/normalize.css

@@ -25,12 +25,11 @@ main {
 }
 
 /**
-   * Correct the font size and margin on `h1` elements within `section` and
-   * `article` contexts in Chrome, Firefox, and Safari.
+   * Correct the margin on `h1` elements. The font size is set with the other
+   * heading sizes at the end of this file, behind `:where()`.
    */
 
 h1 {
-  font-size: 2em;
   margin: 0.67em 0;
 }
 
@@ -74,7 +73,7 @@ a {
    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    */
 
-abbr[title] {
+:where(abbr[title]) {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
@@ -186,10 +185,7 @@ select {
    * Correct the inability to style clickable types in iOS and Safari.
    */
 
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+:where(button, [type="button"], [type="reset"], [type="submit"]) {
   -webkit-appearance: button;
 }
 
@@ -197,25 +193,11 @@ button,
    * Remove the inner border and padding in Firefox.
    */
 
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+:where(button, [type="button"], [type="reset"], [type="submit"])::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-/**
-   * Restore the focus styles unset by the previous rule.
-   */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
    * Correct the padding in Firefox.
    */
@@ -261,8 +243,7 @@ textarea {
    * 2. Remove the padding in IE 10.
    */
 
-[type="checkbox"],
-[type="radio"] {
+:where([type="checkbox"], [type="radio"]) {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -271,8 +252,8 @@ textarea {
    * Correct the cursor style of increment and decrement buttons in Chrome.
    */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+:where([type="number"])::-webkit-inner-spin-button,
+:where([type="number"])::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -281,7 +262,7 @@ textarea {
    * 2. Correct the outline style in Safari.
    */
 
-[type="search"] {
+:where([type="search"]) {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -290,7 +271,7 @@ textarea {
    * Remove the inner padding in Chrome and Safari on macOS.
    */
 
-[type="search"]::-webkit-search-decoration {
+:where([type="search"])::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
@@ -353,13 +334,20 @@ template {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-:focus,
-:active {
+:where(:focus, :active) {
   outline: none;
 }
-a:focus,
-a:active {
-  outline: none;
+/**
+ * Restore the focus styles unset by the rule above. Declared after it: both have zero
+ * specificity, so the later one wins, and a component's own :focus-visible ring beats both.
+ */
+:where(
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring
+) {
+  outline: 1px dotted ButtonText;
 }
 nav,
 footer,
@@ -392,11 +380,7 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-a,
-a:visited {
-  text-decoration: none;
-}
-a:hover {
+a {
   text-decoration: none;
 }
 ul li {
@@ -406,72 +390,78 @@ img {
   vertical-align: top;
 }
 
-/* heading elements */
-h1 {
+/*
+ * heading elements
+ *
+ * All behind :where(), so these have zero specificity and any component class (the
+ * font size and weight of Typography, say) wins, in or out of article, aside, nav and
+ * section. Among themselves they cascade in source order, as before.
+ *
+ * The section rules keep `:-webkit-any()`, which Firefox does not know: :where() takes a
+ * forgiving list, so there the branch matches nothing and a bare h1 stays 2em, as it
+ * always did. Do not turn it into :is(), that would resize Firefox's headings.
+ */
+:where(h1, h2, h3, h4, h5, h6) {
   display: block;
-  font-size: 2em;
   font-weight: bold;
 }
 
-:-webkit-any(article, aside, nav, section) h1 {
+:where(h1) {
+  font-size: 2em;
+}
+
+:where(:-webkit-any(article, aside, nav, section) h1) {
   font-size: 1.5em;
 }
 
-:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
+:where(:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1) {
   font-size: 1.17em;
 }
 
-:-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
+:where(
   :-webkit-any(article, aside, nav, section)
-  h1 {
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    h1
+) {
   font-size: 1em;
 }
 
-:-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
+:where(
   :-webkit-any(article, aside, nav, section)
-  h1 {
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    h1
+) {
   font-size: 0.83em;
 }
 
-:-webkit-any(article, aside, nav, section)
+:where(
   :-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
-  :-webkit-any(article, aside, nav, section)
-  h1 {
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    :-webkit-any(article, aside, nav, section)
+    h1
+) {
   font-size: 0.67em;
 }
 
-h2 {
-  display: block;
+:where(h2) {
   font-size: 1.5em;
-  font-weight: bold;
 }
 
-h3 {
-  display: block;
+:where(h3) {
   font-size: 1.17em;
-  font-weight: bold;
-}
-
-h4 {
-  display: block;
-  font-weight: bold;
 }
 
-h5 {
-  display: block;
+:where(h5) {
   font-size: 0.83em;
-  font-weight: bold;
 }
 
-h6 {
-  display: block;
+:where(h6) {
   font-size: 0.67em;
-  font-weight: bold;
 }
 
 body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Framework-agnostic LESS design tokens and component styles (smwb-*) shared by the @smwb UI libraries. Prebuilt aggregate CSS lives in @smwb/ui-css.",
   "license": "MIT",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs && node scripts/check-control-heights.mjs && node scripts/check-typography-case.mjs && node scripts/check-chart-series.mjs"
+    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs && node scripts/check-control-heights.mjs && node scripts/check-typography-case.mjs && node scripts/check-chart-series.mjs && node scripts/check-normalize-specificity.mjs"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",
   "repository": {