@smwb/ui-styles 2.5.0 → 2.7.0

package/README.md

@@ -117,6 +117,23 @@ value for both modes, so a theme that makes `@warningColor` lighter, or any of t
 changes the numbers: re-check them there. `color="secondary"` is the one name that falls short in the default dark
 theme (2.65:1): use a status for state.
 
+#### IdentityBadge colours
+
+`IdentityBadge` is a frame with no fill, so its colour is a border, an icon and 11px of text. It reads one custom
+property, `--smwb-identity-badge-accent`, which the component sets from its `accent` prop; without it (or with an empty
+one) the badge resolves `--smwb-identity-badge-color` to `@identityBadgeColor`, `var(--smui-onSurfaceVariant)` —
+neutral, following the dark theme. No status token (`infoColor`, `successColor`, `warningColor`, `errorColor`) appears
+in the badge's rules: the marker must not read as a state the way `StatusDot` does. An accent is any CSS colour, so its
+contrast is the caller's problem: at `@identityBadgeFontSize` (11px) pick one that reaches 4.5:1 against the surface it
+sits on.
+
+The box comes from `@identityBadgeHeight` (18px), `@identityBadgePaddingX` (4px), `@identityBadgeGap` (2px, icon to
+text), `@identityBadgeIconSize` (12px), `@identityBadgeBorderWidth` and `@identityBadgeRadius`; the text from
+`@identityBadgeFontFamily` (a monospace stack), `@identityBadgeFontSize` and `@identityBadgeFontWeight`; the row of a
+group from `@identityBadgeGroupGap` (4px). All are `theme.config` variables, and the colour is the only one that reads a
+`--smui-*` runtime token. Under forced colours the frame and the text draw in `CanvasText`, and a clickable "+N" in
+`ButtonText`.
+
 #### QrCode colours
 
 `QrCode` never reads theme tokens for the code itself: the modules are always `@qrCodeDarkColor`
@@ -143,8 +160,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/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/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);
@@ -304,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;
   }
 }
 
@@ -316,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/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/identityBadge/identityBadge.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./identityBadge.less";

package/less/components/identityBadge/identityBadge.less

@@ -0,0 +1,110 @@
+// A compact identity marker: an outlined frame with no fill, a glyph on the left and a
+// short monospace text on the right. It must not read as a status, so its colour is the
+// caller's accent or the theme's neutral — never a status token — and the frame, not a
+// fill, carries it. One size, one look: no modifier classes.
+.smwb-identity-badge {
+  --smwb-identity-badge-color: var(--smwb-identity-badge-accent, @identityBadgeColor);
+  display: inline-flex;
+  align-items: center;
+  gap: @identityBadgeGap;
+  flex: none;
+  box-sizing: border-box;
+  height: @identityBadgeHeight;
+  padding: 0 @identityBadgePaddingX;
+  vertical-align: middle;
+  white-space: nowrap;
+  border: @identityBadgeBorderWidth solid var(--smwb-identity-badge-color);
+  border-radius: @identityBadgeRadius;
+  background-color: transparent;
+  color: var(--smwb-identity-badge-color);
+  font-family: @identityBadgeFontFamily;
+  font-size: @identityBadgeFontSize;
+  font-weight: @identityBadgeFontWeight;
+  line-height: 1;
+
+  &__icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: @identityBadgeIconSize;
+    height: @identityBadgeIconSize;
+    overflow: hidden;
+
+    // The caller picks the icon's own size, so the box clamps it: an <Icon size={20}> is scaled
+    // into the 12px slot instead of stretching the badge's fixed height. The Icon's wrapper
+    // takes the whole box, so that its glyph has a definite size to be clamped to.
+    > .smwb-icon__wrapper {
+      width: 100%;
+      height: 100%;
+    }
+
+    svg,
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+
+    // A font glyph sizes itself with an inline font-size, which only !important can take over.
+    .material-symbols-outlined {
+      font-size: @identityBadgeIconSize !important;
+    }
+  }
+}
+
+.smwb-identity-badge-group {
+  display: inline-flex;
+  align-items: center;
+  gap: @identityBadgeGroupGap;
+  vertical-align: middle;
+
+  // The children past `max` are drawn for hydration and hidden: a server that left them
+  // out would leave the browser without nodes to hydrate them from.
+  &__hidden {
+    display: none;
+  }
+
+  // A clickable "+N" is a real button, so a keyboard reaches it. normalize.css strips a
+  // button's looks and its outline, so both come back here.
+  button&__surplus {
+    position: relative; // holds the coarse-pointer hit area
+    margin: 0;
+    appearance: none;
+    background-color: transparent;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+
+    // A finger needs a 44px target and the badge must keep its 18px row, so the hit area
+    // hangs off a pseudo-element, centred over the button: the row does not grow
+    // (SelectField's chip-delete precedent).
+    @media (pointer: coarse) {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+
+// Forced colours drop the accent: draw the frame and the text in the text colour, and a
+// clickable "+N" in the button colour.
+@media (forced-colors: active) {
+  .smwb-identity-badge {
+    border-color: CanvasText;
+    color: CanvasText;
+  }
+
+  button.smwb-identity-badge-group__surplus {
+    border-color: ButtonText;
+    color: ButtonText;
+  }
+}

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/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/components.less

@@ -15,6 +15,7 @@
 @import "./components/meter/meter.less";
 @import "./components/diffStat/diffStat.less";
 @import "./components/statusDot/statusDot.less";
+@import "./components/identityBadge/identityBadge.less";
 @import "./components/qrCode/qrCode.less";
 @import "./components/radioButton/radioButton.less";
 @import "./components/sidebar/sidebar.less";

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

@@ -204,6 +204,20 @@
 @statusDotDiamondRotation: 45deg; // corner-up, the diamond of the onreel thread marker
 @statusDotDiamondRadius: @smui-radius-none; // sharp corners; the dot's are a circle
 
+// A compact identity marker sits inside a dense row, so its height is off-grid and below
+// the control scale on purpose: one 14px line at the DagView node's line-height 1.3.
+@identityBadgeHeight: 18px;
+@identityBadgePaddingX: @smui-space-xs; // 4px
+@identityBadgeGap: @smui-space-xxs; // 2px, icon to text
+@identityBadgeIconSize: 12px; // @smui-space-3
+@identityBadgeBorderWidth: 1px;
+@identityBadgeRadius: @smui-radius-sm;
+@identityBadgeFontFamily: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+@identityBadgeFontSize: 11px; // off-grid
+@identityBadgeFontWeight: 500;
+@identityBadgeColor: ~"var(--smui-onSurfaceVariant)"; // neutral, follows the dark theme; never a status token
+@identityBadgeGroupGap: @smui-space-xs; // 4px between badges
+
 // 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
 // invert it.
@@ -589,6 +603,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 +846,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

@@ -35,6 +35,8 @@
 //    - ProgressIndicator: indicator diameter (28px), not a control box
 //    - StatusDot: decorative dot (@statusDotSizeSm/Md); also uses the
 //      _size-sm suffix, a different class convention
+//    - IdentityBadge: compact identity marker (@identityBadgeHeight 18px),
+//      not a control — it must fit a dense TreeView row and a DagView node
 //    - Slider: size scales track thickness and thumb diameter, not a
 //      control height
 //    - Modal: size selects dialog width, not control height
@@ -53,7 +55,8 @@
 //  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.
+//  header buttons, Table sort control, DatePicker adornment button, IdentityBadgeGroup's
+//  clickable "+N"). 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.5.0",
+  "version": "2.7.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": [