@smwb/ui-styles 2.8.0 → 2.10.0

package/README.md

@@ -199,13 +199,16 @@ An edge the app marks `active` shows work flowing along it (`DagViewEdge.active`
 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
+the node glow are gated on markup only `@smwb/ui-solid` writes (`data-animate-running` and `data-animate-flow` 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.
+motion. `animateFlow={false}` (`data-animate-flow="false"` on the root) asks for that same still state on demand and
+keeps the light: the pulses are hidden, a running node's dot and frame hold still, the flowing edge stays lit in the
+full flow colour with its static glow, and the running node keeps its still glow. Those rules sit after the motion
+media query, which is what makes them win at equal specificity.
 
 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
@@ -336,6 +339,27 @@ holds the tab stop (`menuitemcheckbox`, `menuitemradio`, `treeitem`, `spinbutton
 `scrollbar`) are listed next to the focusable elements. A control the generic list cannot see opts out with
 `.smwb-appbar__no-drag` or `data-no-drag`.
 
+#### Overlay layers
+
+The surfaces the components portal to `<body>` sit in a z-index scale of Less variables, so an app puts them over its
+own header, sheets and windows from its theme, with no rule on the `.smwb-*` classes:
+
+| Variable    | Default | Layer                                                                                  |
+| ----------- | ------- | -------------------------------------------------------------------------------------- |
+| `@menuZ`    | 1300    | the floating `Menu` (`OverflowMenu`, `SelectField` options, submenus), above the modal |
+| `@tooltipZ` | 1400    | the `Tooltip` tip, above the menu and the dialogs it is raised from                    |
+
+The tip stays above the menu: a hint on a menu item, on a dialog's button or on a docked window's control must not hide
+under them. Keep that order if you change one value. The modal overlay (1001), the chat shell (1002), the floating
+window (`@floatingWindowZ`, 150) and the sheet (100) stay below both. `npm run lint` of this package renders the
+stylesheet and checks the order and that each variable reaches its rule.
+
+```less
+// theme.config: the host's own layers go up to 2000, the menus and tips stay over them
+@menuZ: 2100;
+@tooltipZ: 2200;
+```
+
 ## License
 
 [MIT](./LICENSE)

package/less/components/dagView/dagView.less

@@ -388,6 +388,25 @@
   }
 }
 
+// animateFlow={false}: the same still state reduced motion shows — the flow
+// stays lit in the full flow colour and the glows stay, nothing moves. The
+// block sits after the motion rules so its frame rule, of equal specificity
+// to theirs, wins.
+.smwb-dag-view[data-animate-flow="false"] {
+  .smwb-dag-view__edge--flowing {
+    stroke: var(--smwb-dag-view-edge-flow-color);
+  }
+  .smwb-dag-view__edge-pulse {
+    display: none;
+  }
+  .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
+    animation: none;
+  }
+  .smwb-dag-view__node[data-status="running"]::before {
+    animation: none;
+  }
+}
+
 @keyframes smwb-dag-view-pulse {
   50% {
     opacity: 0.35;

package/less/components/menu/menu.less

@@ -4,7 +4,7 @@
 
   &--floating {
     box-shadow: @menuBoxShadow;
-    z-index: 1300;
+    z-index: @menuZ;
     min-width: 112px;
     cursor: default;
   }

package/less/components/tooltip/tooltip.less

@@ -2,7 +2,7 @@
   border-radius: 4px;
   background-color: var(--smui-tooltipBg);
   color: var(--smui-tooltipTextColor);
-  z-index: 5;
+  z-index: @tooltipZ;
   font-size: 12px;
   padding: 0 @tooltipPaddingX;
   height: 24px;

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

@@ -559,6 +559,19 @@
 // stack. Hosts add their stacking index on top, leaving headroom before 200.
 @floatingWindowZ: 150;
 
+/*-------------------
+  Overlay layers
+--------------------*/
+// z-index of the surfaces the components portal to <body>. A theme overrides them by setting
+// the variable, with no rule on the `.smwb-*` classes; each must stay above whatever the host
+// app stacks under it (its header, sheets, windows, dialogs).
+// A floating Menu (OverflowMenu, SelectField options, submenus) sits above the modal (1001),
+// the chat shell (1002) and every surface that opens it. Off-grid.
+@menuZ: 1300;
+// A Tooltip sits above the menu and the dialogs it is raised from: a hint on a menu item,
+// a dialog's button or a docked window's control must not hide under them. Off-grid.
+@tooltipZ: 1400;
+
 /*-------------------
     Tooltip
 --------------------*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.8.0",
+  "version": "2.10.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 && node scripts/check-normalize-specificity.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-overlay-layers.mjs && node scripts/check-chart-series.mjs && node scripts/check-normalize-specificity.mjs"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",
   "repository": {