@smwb/ui-styles 2.4.0 → 2.6.0

package/README.md

@@ -143,8 +143,33 @@ runtime tokens, so the dark theme follows without extra settings:
 | `@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`                                                                    |
+| `@dagViewEdgeFlowColor`                        | `--smwb-dag-view-edge-flow-color`                                       | `var(--smwb-dag-view-status-running)`                                     |
+| `@dagViewEdgeFlowTrackColor`                   | `--smwb-dag-view-edge-flow-track-color`                                 | the flow colour mixed 45% with transparent                                |
+| `@dagViewNodeGlowColor`                        | `--smwb-dag-view-node-glow-color`                                       | `false`: the node's own accent                                            |
+| `@dagViewEdgeFlowWidth`                        | `--smwb-dag-view-edge-flow-width`                                       | `2.5px`                                                                   |
+| `@dagViewEdgeFlowDuration`                     | `--smwb-dag-view-edge-flow-duration`                                    | `0.6s` (one 24px dash period)                                             |
+| `@dagViewEdgeGlowOpacity`                      | `--smwb-dag-view-edge-glow-opacity`                                     | `0.25`                                                                    |
+| `@dagViewNodeGlowOpacity`                      | `--smwb-dag-view-node-glow-opacity`                                     | `0.6` (blur strength of the running node's inner glow)                    |
+| `@dagViewNodePulseDuration`                    | `--smwb-dag-view-node-pulse-duration`                                   | `1.4s` (the running node's dot and frame)                                 |
 | `@dagViewHeight`                               | — (the graph's `height`)                                                | `480px`                                                                   |
 
+The flow colours (`@dagViewEdgeFlowColor`, `@dagViewEdgeFlowTrackColor`, `@dagViewNodeGlowColor`) are colours and have
+`…Dark` twins, `false` by default; the width, durations and opacities are not colours and have none. The pulses' dash
+pattern (`@dagViewEdgeFlowDash` / `@dagViewEdgeFlowGap`, `6px` / `18px`) is compile time only: the flow keyframes move
+exactly one period, so `dash + gap` must stay the keyframe's stride.
+
+An edge the app marks `active` shows work flowing along it (`DagViewEdge.active`, `@smwb/ui-solid`): the edge lights in
+the flow colour over a paler track, a static glow lies under it and pulses run from `source` to `target`; a running
+node's frame glows and pulses with its dot. This `active` is not the selection highlight — the selected node's edges
+keep `@dagViewEdgeActiveColor`, and where both apply the flowing edge wins the colour and the arrow. All flow rules and
+the node glow are gated on markup only `@smwb/ui-solid` writes (`data-animate-running` on the root, the flowing
+classes on the edge paths), so the shared CSS is inert for `@smwb/ui-react` until its own issue lands; the only
+change React sees is the new custom properties on its root and the dot's duration read from
+`--smwb-dag-view-node-pulse-duration`, whose default is the 1.4 s of before. Motion is CSS only: with
+`prefers-reduced-motion: reduce` the pulses stay hidden, the flowing edge stays lit in the full flow colour, and a
+running node keeps a still glow; `animateRunning={false}` stops a running node's glow and dot pulse without reduced
+motion.
+
 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
 default: set it to give the dark theme its own value. At runtime, set the properties on the graph itself, since it

package/less/components/breadcrumbs/breadcrumbs.less

@@ -53,6 +53,13 @@
     &:hover {
       background-color: var(--smui-onSurfaceActive);
     }
+
+    // On a coarse pointer the "..." button is a square of the sm step (44px there): it is
+    // otherwise as tall as a line of text and as wide as its dots.
+    @media (pointer: coarse) {
+      min-width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      min-height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+    }
   }
 
   // One line: the list never wraps, the crumbs shrink and cut their text with an

package/less/components/chip/chip.less

@@ -179,4 +179,99 @@
   .smui-chip-color(success; var(--smui-successColor); var(--smui-onSuccessColor));
   .smui-chip-color(warning; var(--smui-warningColor); var(--smui-onWarningColor));
   .smui-chip-color(info; var(--smui-infoColor); var(--smui-onInfoColor));
+
+  // A custom color (Chip's customColor prop) repaints the chip like the palette
+  // colors above, from custom properties the component sets inline on the root
+  // (internal: apps neither set nor target them):
+  // - --smwb-chip-custom-color: the color to draw, any CSS color (a translucent
+  //   one the component parses comes composited over the page background);
+  // - --smwb-chip-custom-fill / --smwb-chip-custom-on-color: the same color and
+  //   its black-or-white label, for the colors the component could measure;
+  // - --smwb-chip-custom-text-color: the caller's label color, when given.
+  // The guard mirrors the palette mixin's: the color class outranks the neutral
+  // rules, a selected filled chip keeps its fill, and a disabled chip keeps the
+  // disabled look. An outlined chip keeps the theme's label color: an arbitrary
+  // color as text on the page fails contrast on one of the themes.
+  &.smwb-chip_custom-color:not(&.smwb-disabled) {
+    // Without relative color syntax (below) only measured colors are painted;
+    // the others draw as the plain chip rather than under a guessed label color.
+    // The fill stays put on hover / active: no filter, it would dim the label.
+    &.smwb-filled {
+      &,
+      &:hover,
+      &:active,
+      &.smwb-selected {
+        background-color: var(--smwb-chip-custom-fill, var(--smui-chipsBg));
+      }
+      color: var(--smwb-chip-custom-text-color, var(--smwb-chip-custom-on-color, var(--smui-primaryTextColor)));
+      // The delete control follows the label color, so it reads on any fill;
+      // hovered, it gets a round tint of that color.
+      .smwb-chip__delete-icon {
+        border-radius: 50%;
+        svg {
+          &,
+          &:hover {
+            fill: currentColor;
+          }
+        }
+        &:hover {
+          background-color: color-mix(in srgb, currentColor 16%, transparent);
+        }
+      }
+    }
+    &.smwb-outlined {
+      color: var(--smwb-chip-custom-text-color, var(--smui-primaryTextColor));
+      border-color: var(--smwb-chip-custom-color);
+      &:hover {
+        background-color: color-mix(in srgb, var(--smwb-chip-custom-color) 12%, transparent);
+      }
+      &:active,
+      &.smwb-selected {
+        background-color: color-mix(in srgb, var(--smwb-chip-custom-color) 20%, transparent);
+      }
+      // A caller's label color is the delete control's too.
+      .smwb-chip__delete-icon svg {
+        fill: var(--smwb-chip-custom-text-color, var(--smui-chipsIconColor));
+        &:hover {
+          fill: var(--smwb-chip-custom-text-color, var(--smui-chipsIconColorHover));
+        }
+      }
+    }
+  }
+
+  // With relative color syntax the stylesheet picks the label itself, from the
+  // color as the browser understands it, so any valid CSS color is painted:
+  // - solid: the color made opaque (a translucent one the component could not
+  //   parse is drawn opaque, so the label is picked against what is shown);
+  // - pick: white while the fill's WCAG relative luminance is <= 0.17913, where
+  //   black and white contrast equally, black above: >= 4.58:1 either way;
+  // - label: the caller's text color, or the pick;
+  // - away: the same pick made for the label, i.e. black for a light label and
+  //   white for a dark one. Hover / active mix it into the fill, which moves the
+  //   fill away from the label: the contrast only grows.
+  // A value the browser cannot read makes these invalid at computed-value time:
+  // the fill is then transparent and the label inherits the surrounding text
+  // color, a readable plain chip.
+  @supports (color: color(from red srgb r g b)) {
+    @pick-channel: ~"clamp(0, (0.17913 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)";
+    &.smwb-chip_custom-color:not(&.smwb-disabled) {
+      --smwb-chip-custom-solid: ~"color(from var(--smwb-chip-custom-color) srgb r g b / 1)";
+      --smwb-chip-custom-pick: ~"color(from var(--smwb-chip-custom-solid) srgb-linear @{pick-channel} @{pick-channel} @{pick-channel} / 1)";
+      --smwb-chip-custom-label: var(--smwb-chip-custom-text-color, var(--smwb-chip-custom-pick));
+      --smwb-chip-custom-away: ~"color(from var(--smwb-chip-custom-label) srgb-linear @{pick-channel} @{pick-channel} @{pick-channel} / 1)";
+      &.smwb-filled {
+        &,
+        &.smwb-selected {
+          background-color: var(--smwb-chip-custom-solid);
+        }
+        &:hover {
+          background-color: color-mix(in srgb, var(--smwb-chip-custom-solid), var(--smwb-chip-custom-away) 8%);
+        }
+        &:active {
+          background-color: color-mix(in srgb, var(--smwb-chip-custom-solid), var(--smwb-chip-custom-away) 14%);
+        }
+        color: var(--smwb-chip-custom-label);
+      }
+    }
+  }
 }

package/less/components/composer/composer.less

@@ -6,14 +6,14 @@
   box-sizing: border-box;
   margin: 0;
   border: 0;
-  padding: @composerFieldPaddingY @composerFieldPaddingX;
+  padding: var(--smwb-composer-field-padding-y, @composerFieldPaddingY) @composerFieldPaddingX;
   font: inherit;
   letter-spacing: inherit;
   line-height: @composerLineHeight;
   overflow-wrap: anywhere;
   // The height of N rows of text, with the text's own padding.
-  min-height: ~"calc(var(--smwb-composer-min-rows, 1) * @{composerLineHeight} + 2 * @{composerFieldPaddingY})";
-  max-height: ~"calc(var(--smwb-composer-max-rows, 8) * @{composerLineHeight} + 2 * @{composerFieldPaddingY})";
+  min-height: ~"calc(var(--smwb-composer-min-rows, 1) * @{composerLineHeight} + 2 * var(--smwb-composer-field-padding-y, @{composerFieldPaddingY}))";
+  max-height: ~"calc(var(--smwb-composer-max-rows, 8) * @{composerLineHeight} + 2 * var(--smwb-composer-field-padding-y, @{composerFieldPaddingY}))";
 }
 
 // A task input: a growing textarea with an attach button, a toolbar slot, a
@@ -36,6 +36,15 @@
   background-color: @composerBg;
   color: @composerText;
 
+  // Touch density: the icon buttons are the sm step (44px there) at least, and the one-line
+  // field grows with them (24px of text + 2 * padding = the button), so the row stays level.
+  // @composerIconButtonSize is a literal that composer.variables.less declares again after the
+  // theme, so the step is the way to raise it: @smui-control-h-sm-coarse.
+  @media (pointer: coarse) {
+    --smwb-composer-icon-button-size: max(@composerIconButtonSize, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    --smwb-composer-field-padding-y: calc((var(--smwb-composer-icon-button-size) - @composerLineHeight) / 2);
+  }
+
   &__attachments {
     grid-area: attachments;
     min-width: 0;
@@ -86,8 +95,8 @@
     justify-content: center;
     box-sizing: border-box;
     flex: none;
-    width: @composerIconButtonSize;
-    height: @composerIconButtonSize;
+    width: var(--smwb-composer-icon-button-size, @composerIconButtonSize);
+    height: var(--smwb-composer-icon-button-size, @composerIconButtonSize);
     margin: 0;
     padding: 0;
     border: 0;
@@ -244,7 +253,7 @@
     .smwb-composer__counter {
       // On the bottom row of text, level with the action.
       align-self: end;
-      padding-bottom: ~"calc((@{composerIconButtonSize} - 1rem) / 2)";
+      padding-bottom: ~"calc((var(--smwb-composer-icon-button-size, @{composerIconButtonSize}) - 1rem) / 2)";
     }
 
     .smwb-composer__attach ~ .smwb-composer__toolbar {

package/less/components/dagView/dagView.less

@@ -21,6 +21,9 @@
   .smwb-dag-view-token(status-warning; StatusWarning; @suffix);
   .smwb-dag-view-token(status-error; StatusError; @suffix);
   .smwb-dag-view-token(status-skipped; StatusSkipped; @suffix);
+  .smwb-dag-view-token(edge-flow-color; EdgeFlowColor; @suffix);
+  .smwb-dag-view-token(edge-flow-track-color; EdgeFlowTrackColor; @suffix);
+  .smwb-dag-view-token(node-glow-color; NodeGlowColor; @suffix);
 }
 // 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
@@ -48,6 +51,11 @@
 .smwb-dag-view {
   .smwb-dag-view-tokens("");
   --smwb-dag-view-dim-opacity: @dagViewDimOpacity;
+  --smwb-dag-view-edge-flow-width: @dagViewEdgeFlowWidth;
+  --smwb-dag-view-edge-flow-duration: @dagViewEdgeFlowDuration;
+  --smwb-dag-view-edge-glow-opacity: @dagViewEdgeGlowOpacity;
+  --smwb-dag-view-node-glow-opacity: @dagViewNodeGlowOpacity;
+  --smwb-dag-view-node-pulse-duration: @dagViewNodePulseDuration;
   --smwb-dag-view-node-border-style: @dagViewNodeBorderStyle;
   .smwb-dag-view-border-style(pending; Pending);
   .smwb-dag-view-border-style(running; Running);
@@ -132,6 +140,62 @@
     fill: var(--smwb-dag-view-edge-active-color);
   }
 
+  // An edge the app marks `active`: work flows along it. The track is lit, a
+  // static glow lies under it and pulses run over it from source to target
+  // (the pulses only move, and only show, without reduced motion: see the end).
+  &__edge--flowing {
+    stroke: var(--smwb-dag-view-edge-flow-color);
+    stroke-width: var(--smwb-dag-view-edge-flow-width);
+  }
+
+  &__arrow--flow {
+    fill: var(--smwb-dag-view-edge-flow-color);
+  }
+
+  &__edge-glow {
+    fill: none;
+    stroke: var(--smwb-dag-view-edge-flow-color);
+    stroke-width: calc(var(--smwb-dag-view-edge-flow-width) * 3);
+    stroke-linecap: round;
+    stroke-opacity: var(--smwb-dag-view-edge-glow-opacity);
+    transition: opacity 0.12s;
+  }
+
+  &__edge-pulse {
+    display: none;
+    fill: none;
+    stroke: var(--smwb-dag-view-edge-flow-color);
+    stroke-width: calc(var(--smwb-dag-view-edge-flow-width) + 1px);
+    stroke-linecap: round;
+    stroke-dasharray: @dagViewEdgeFlowDash @dagViewEdgeFlowGap;
+    transition: opacity 0.12s;
+  }
+
+  &__edge-glow--dimmed,
+  &__edge-pulse--dimmed {
+    opacity: var(--smwb-dag-view-dim-opacity);
+  }
+
+  // A running node's frame glows from inside, in its accent (the node clips its
+  // overflow, so the glow cannot go outside). Only where the graph asks for it:
+  // the attribute is written by @smwb/ui-solid.
+  &[data-animate-running="true"] &__node[data-status="running"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    @glow: ~"var(--smwb-dag-view-node-glow-color, var(--smwb-dag-view-accent))";
+    box-shadow:
+      inset 0 0 0 1px @glow,
+      inset 0 0 12px 2px ~"color-mix(in srgb, @{glow} calc(var(--smwb-dag-view-node-glow-opacity) * 100%), transparent)";
+  }
+
+  // animateRunning={false}: running nodes stay still, the dot too.
+  &[data-animate-running="false"] &__node[data-status="running"] &__dot {
+    animation: none;
+  }
+
   &__node {
     --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));
     .smwb-dag-view-status(pending);
@@ -267,6 +331,11 @@
     width: 32px;
     height: 32px;
     padding: 0;
+    // On a coarse pointer the buttons are the sm step (44px there) at least.
+    @media (pointer: coarse) {
+      width: max(32px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+      height: max(32px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    }
     border: 1px solid var(--smui-dividerColor);
     border-radius: @smui-radius-md;
     background-color: var(--smui-surfaceBackground);
@@ -299,10 +368,23 @@
   .smwb-dag-view-tokens("Dark");
 }
 
-// A running node's dot pulses, unless motion is reduced.
+// Motion only when the user has not asked for less: a running node's dot and
+// frame pulse, and pulses run along the active edges over a paler track.
+// With reduced motion the edges stay lit in the full flow colour and the
+// running node keeps a still glow.
 @media (prefers-reduced-motion: no-preference) {
   .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
-    animation: smwb-dag-view-pulse 1.4s ease-in-out infinite;
+    animation: smwb-dag-view-pulse var(--smwb-dag-view-node-pulse-duration) ease-in-out infinite;
+  }
+  .smwb-dag-view[data-animate-running="true"] .smwb-dag-view__node[data-status="running"]::before {
+    animation: smwb-dag-view-pulse var(--smwb-dag-view-node-pulse-duration) ease-in-out infinite;
+  }
+  .smwb-dag-view__edge--flowing {
+    stroke: var(--smwb-dag-view-edge-flow-track-color);
+  }
+  .smwb-dag-view__edge-pulse {
+    display: inline;
+    animation: smwb-dag-view-flow var(--smwb-dag-view-edge-flow-duration) linear infinite;
   }
 }
 
@@ -311,3 +393,12 @@
     opacity: 0.35;
   }
 }
+
+// One dash period along the path: a negative offset moves the dashes from the
+// path's start (the source) toward its end (the target).
+@dagViewEdgeFlowPeriod: (@dagViewEdgeFlowDash + @dagViewEdgeFlowGap);
+@keyframes smwb-dag-view-flow {
+  to {
+    stroke-dashoffset: -@dagViewEdgeFlowPeriod;
+  }
+}

package/less/components/datePicker/dataPicker.less

@@ -93,6 +93,19 @@
       padding: @datePickerYearPadding;
     }
 
+    // On a coarse pointer the TextField adornment button is a square of the sm step (44px there)
+    // at least, the icon in the middle; the 36px it was is padding around the 24px glyph. The
+    // popup's small month and year arrows keep their 34px.
+    @media (pointer: coarse) {
+      &:not(&--small) {
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        min-height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      }
+    }
+
     &--edge-start {
       margin-left: -12px;
     }

package/less/components/grid/grid.less

@@ -71,12 +71,22 @@
   width: 100%;
   box-sizing: border-box;
 
+  // The class display beats the UA `[hidden]` rule, so it is pinned explicitly.
+  &[hidden] {
+    display: none;
+  }
+
   &__row {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     box-sizing: border-box;
 
+    // Same as on the grid: `hidden` on the node wins without app CSS.
+    &[hidden] {
+      display: none;
+    }
+
     .generate-spacing-class-count(spacing);
 
     &--nowrap {

package/less/components/selectField/selectField.less

@@ -99,6 +99,40 @@
     cursor: pointer;
   }
 
+  // Touch density: on a coarse pointer the clear button and the delete button of a value chip
+  // answer a press from a square of the sm step (44px there), not the small icon they draw.
+  // The clear button is that square itself, in the actions row: its neighbours, the dropdown
+  // arrow and the control, keep their own boxes, so a press on the arrow opens the menu and
+  // never clears it. The negative margin keeps the height the icon gave the field; the row
+  // grows wider by what the square adds. A chip's delete button is laid over a bigger box by
+  // a pseudo-element (a chip must not grow): the box starts at the icon, so it never reaches
+  // back over the label, whose press opens the menu, and extends to the right, into the
+  // chip's padding; the next chip is positioned later and paints over it.
+  @media (pointer: coarse) {
+    &__clear {
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      margin: calc((16px - var(--smui-control-h-sm, @smui-control-h-sm-coarse)) / 2) 0;
+    }
+
+    .smwb-chip__delete-icon {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        transform: translateY(-50%);
+      }
+    }
+  }
+
   &__values {
     white-space: nowrap;
     font: inherit;

package/less/components/sheet/sheet.less

@@ -39,6 +39,12 @@
 
     .smwb-button {
       min-width: 0;
+
+      // On a coarse pointer the close and size buttons are as wide as they are tall (the sm
+      // step, 44px there); their padding made them 42px wide.
+      @media (pointer: coarse) {
+        min-width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      }
     }
   }
 

package/less/components/slider/slider.less

@@ -292,3 +292,29 @@
   white-space: nowrap;
   opacity: 0.7;
 }
+
+// Touch density: on a coarse pointer the zone that takes a press on the rail, the padding around
+// it, is the sm step (44px there) across, 30px otherwise, and so is the thumb's own zone. A mouse
+// keeps all of it. The mark labels hang from the marks, which are centred on the rail, so they follow it.
+@sliderTouchHit: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+@media (pointer: coarse) {
+  .smwb-slider {
+    padding-top: max(@sliderPaddingY, calc((@sliderTouchHit - 4px) / 2));
+    padding-bottom: max(@sliderPaddingY, calc((@sliderTouchHit - 4px) / 2));
+  }
+  .smwb-slider_size-small {
+    padding-top: max(@sliderPaddingY, calc((@sliderTouchHit - 2px) / 2));
+    padding-bottom: max(@sliderPaddingY, calc((@sliderTouchHit - 2px) / 2));
+  }
+  .smwb-slider_size-large {
+    padding-top: max(@sliderPaddingY, calc((@sliderTouchHit - 6px) / 2));
+    padding-bottom: max(@sliderPaddingY, calc((@sliderTouchHit - 6px) / 2));
+  }
+  .smwb-slider--vertical {
+    padding: 0 max(@sliderPaddingY, calc((@sliderTouchHit - 4px) / 2));
+  }
+  .smwb-slider__thumb:after {
+    width: max(42px, @sliderTouchHit);
+    height: max(42px, @sliderTouchHit);
+  }
+}

package/less/components/stack/stack.less

@@ -11,6 +11,16 @@
 }
 
 .smwb-stack {
+  // Display lives in the class, not the inline style: an inline display would
+  // beat the UA `[hidden]` rule and keep a mounted, hidden Stack visible.
+  display: flex;
+
+  // The UA `[hidden]` rule loses to the class display above, so it is pinned
+  // explicitly — `hidden` on the node wins with no app CSS and no !important.
+  &[hidden] {
+    display: none;
+  }
+
   // layout is driven by inline flex props; this hook is for overrides
   min-width: 0;
 

package/less/components/table/table.less

@@ -182,6 +182,14 @@
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 2px;
 }
+// On a coarse pointer the sort control is the sm step (44px there) at least, a line of text
+// tall otherwise. The header cell (56px) already has the room.
+@media (pointer: coarse) {
+  .smwb-head-cell_sortable .smwb-head-cell__content {
+    min-width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+  }
+}
 
 .smwb-table__row_selected {
   background-color: var(--smui-onSurfaceHover);

package/less/components/tooltip/tooltip.less

@@ -22,6 +22,11 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    // Let the target shrink below its content width inside a fixed-width parent,
+    // so noWrap content (Typography noWrap) is truncated with an ellipsis instead
+    // of overflowing the parent.
+    min-width: 0;
+    max-width: 100%;
   }
 
   &__wrapper {
@@ -29,6 +34,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    // Without it the inline-flex wrapper cannot shrink below the content width
+    // (the flex automatic minimum size), so a long noWrap label overflows a
+    // fixed-width parent instead of truncating.
+    min-width: 0;
+    max-width: 100%;
   }
 }
 

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

@@ -589,6 +589,21 @@
 @dagViewStatusSkippedBorderStyle: false;
 // How far the nodes and edges away from the selection fade, with dimUnrelated.
 @dagViewDimOpacity: 0.35;
+// An edge the app marks `active`: work flows along it. The flow colour defaults
+// to the running status colour, so the dark theme follows on its own.
+@dagViewEdgeFlowColor: ~"var(--smwb-dag-view-status-running)";
+// The flowing edge's track: the flow colour mixed 45% with transparent.
+@dagViewEdgeFlowTrackColor: ~"color-mix(in srgb, var(--smwb-dag-view-edge-flow-color) 45%, transparent)";
+// A running node's inner glow colour; `false`: the node's own accent.
+@dagViewNodeGlowColor: false;
+@dagViewEdgeFlowWidth: 2.5px;
+@dagViewEdgeFlowDuration: 0.6s;
+@dagViewEdgeGlowOpacity: 0.25;
+@dagViewNodeGlowOpacity: 0.6;
+@dagViewNodePulseDuration: 1.4s;
+// The pulses' dash pattern, compile time only: the flow keyframes move one period.
+@dagViewEdgeFlowDash: 6px;
+@dagViewEdgeFlowGap: 18px;
 // The graph's height when the app sets none (its `height` prop or `style`).
 @dagViewHeight: 480px;
 
@@ -817,3 +832,7 @@
 @dagViewStatusWarningDark: false;
 @dagViewStatusErrorDark: false;
 @dagViewStatusSkippedDark: false;
+// Dark-only values of the flow colours; `false` = not set: the light value (a runtime token) applies.
+@dagViewEdgeFlowColorDark: false;
+@dagViewEdgeFlowTrackColorDark: false;
+@dagViewNodeGlowColorDark: false;

package/less/foundation/sizing.less

@@ -50,7 +50,10 @@
 //  an `@media (pointer: coarse)` block, which is why most components need no
 //  rule of their own; only what sits off the scale has one (small clickable
 //  or link Chip, Tabs dense and its scroll buttons, TabGroups dense actions button,
-//  Menu dense items, List dense rows). A mouse keeps the sizes above.
+//  Menu dense items, List dense rows, and the targets the controls above do not
+//  cover: Composer icon buttons, Breadcrumbs "..." button, DagView zoom buttons,
+//  Slider rail and thumb zones, SelectField clear button and chip delete zones, Sheet
+//  header buttons, Table sort control, DatePicker adornment button). A mouse keeps the sizes above.
 //  Still exempt on touch: the --filled and --inline fields, the compact Toggle
 //  (capped at @toggleCompactMaxHeight) and a small Chip that is neither a button
 //  nor a link.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.4.0",
+  "version": "2.6.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": [