@smwb/ui-styles 1.5.1 → 1.6.0

package/README.md

@@ -57,6 +57,69 @@ Override tokens at compile time via a `theme.config` (imported last, so your val
 runtime via the `--smui-*` CSS variables. Exports: `./components.less`, `./headless-base.less`,
 `./less/*`, `./normalize.css`.
 
+#### Typography: letter case and spacing
+
+Every `<Typography>` variant has a Less variable for its size, weight and line height
+(`@smui-font-<variant>-size`, `-weight`, `-lh`) and, in addition, for its letter case and spacing:
+`@smui-font-<variant>-transform` and `@smui-font-<variant>-letter-spacing`. The variants are `h1`–`h6`,
+`subtitle1`, `subtitle2`, `body1`, `body2`, `caption`, `overline` and `button`. The defaults are `auto`, a
+marker meaning the variant emits no `text-transform` or `letter-spacing` at all (as before, so consumer rules on
+the element keep winning), except `overline` and `button`, which stay `uppercase` with `0.06em`. Set them in `theme.config`:
+
+```less
+// theme.config: bold uppercase headings with wide tracking
+@smui-font-h1-transform: uppercase;
+@smui-font-h1-letter-spacing: 0.12em;
+@smui-font-h1-weight: 700;
+@smui-font-h2-transform: uppercase;
+@smui-font-h2-letter-spacing: 0.06em;
+@smui-font-h2-weight: 700;
+```
+
+A value that is set compiles to `text-transform: var(--smui-font-<variant>-transform, <value>)` (and the same for
+`letter-spacing`), so it can also be changed at runtime through the `--smui-font-<variant>-transform` and
+`--smui-font-<variant>-letter-spacing` custom properties; the token is not defined by the library, and a
+variant left at `auto` emits neither the declaration nor the token.
+
+#### Chart series colours
+
+Chart series colours are theme variables too: `@chartSeries1` … `@chartSeries12` (light) and
+`@chartSeries1Dark` … `@chartSeries12Dark` (dark) in `theme.config`, e.g.
+`@chartSeries1: #e4002b; @chartSeries1Dark: #ff6b81;`. They become `--smwb-chart-series-1` … `-12` on
+`.smwb-chart`, which the chart reads and redraws from on a theme switch; a colour in the chart's own
+`option.color` still wins. The defaults are the Okabe–Ito set (7 colours; slots 8–12 are `false` = not
+emitted). Fill slots in order: an unset slot is skipped, so the colours after it shift up (slot 9 without slot 8
+is drawn for the 8th series). Light and dark are separate sets, so set both when the brand colour must
+show in the dark theme. At runtime, set `--smwb-chart-series-N` on the chart itself (its `style`): the chart declares the
+tokens on its own root, so a value set on `:root` or a wrapper does not reach it.
+
+#### DagView colours
+
+The dependency graph (`DagView` in `@smwb/ui-solid`) 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` |
+
+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
+declares them on its own root: in its `style`, or with a class in a selector that outranks `.smwb-dag-view`, such as
+`.smwb-dag-view.my-graph` (a plain `.my-graph` ties with it, and the graph's stylesheet may load after yours). A
+node's accent comes from `--smwb-dag-view-accent`. For a status of your own, set it on the node and keep the node's
+`accent` prop in front, as the built-in statuses do:
+`.smwb-dag-view__node[data-status="queued"] { --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, teal) }`.
+The graph's default height, `@dagViewHeight`, is set by the stylesheet, so its `height` prop or a height in its
+`style` wins over it.
+
 ## License
 
 [MIT](./LICENSE)

package/less/components/avatar/avatar.less

@@ -58,6 +58,9 @@
   display: inline-flex;
   flex-direction: row;
   align-items: center;
+  // The children's z-indexes stay inside the group: they must not lift an
+  // avatar over the rest of the page (a sticky header, a menu).
+  isolation: isolate;
 
   // Direct children overlap, so an avatar wrapped in a link (a compact
   // PersonChip) tucks in like a bare one.
@@ -65,6 +68,16 @@
     margin-left: (-1 * @avatarGroupOverlap);
   }
 
+  // Drawn in source order, each child would lie over the previous one: a
+  // z-index by position puts each over the next instead.
+  .smwb-avatar-group-stack(1);
+
+  // A focused child comes up whole, focus ring and all.
+  > :focus-visible,
+  > :has(:focus-visible) {
+    z-index: (@avatarGroupMaxStacked + 1);
+  }
+
   .smwb-avatar {
     border: @avatarGroupBorder solid var(--smui-surfaceBackground);
     box-sizing: content-box;
@@ -80,3 +93,12 @@
     font-size: 0.8rem;
   }
 }
+
+// The first child highest. Past @avatarGroupMaxStacked children the rest keep
+// no z-index, so they overlap the other way.
+.smwb-avatar-group-stack(@n) when (@n <= @avatarGroupMaxStacked) {
+  > :nth-child(@{n}) {
+    z-index: (@avatarGroupMaxStacked + 1 - @n);
+  }
+  .smwb-avatar-group-stack(@n + 1);
+}

package/less/components/card/card.less

@@ -39,6 +39,16 @@
     pointer-events: none;
     opacity: 0.38;
   }
+  // The title and the children: the card's button when it has onClick. The
+  // footer follows it, beside the button, not inside it.
+  &__content {
+    display: flex;
+    flex-direction: column;
+    // The card draws the ring, below.
+    &:focus-visible {
+      outline: none;
+    }
+  }
   &__title {
     font-size: 1.25rem;
     font-weight: 500;
@@ -48,9 +58,10 @@
   }
   &_interactive {
     cursor: pointer;
-    &:focus-visible {
-      outline: 2px solid var(--smui-primaryColor);
-      outline-offset: 2px;
-    }
+  }
+  // Focus goes to the card's button; the ring goes around the whole card.
+  &:has(> &__content:focus-visible) {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: 2px;
   }
 }

package/less/components/chart/chart.less

@@ -1,15 +1,22 @@
+// Emits --smwb-chart-series-N from @chartSeriesN<suffix> (suffix "" or "Dark")
+// for N = 1 … 12. A slot that is `false` (the default of 8-12) emits nothing,
+// so an unset slot leaves no token and the chart draws only the colours set.
+.smwb-chart-series(@suffix; @i: 1) when (@i <= 12) {
+  @name: ~"chartSeries@{i}@{suffix}";
+  .smwb-chart-series-token(@i; @@name);
+  .smwb-chart-series(@suffix; @i + 1);
+}
+.smwb-chart-series-token(@i; @colour) when not (@colour = false) {
+  --smwb-chart-series-@{i}: @colour;
+}
+
 // A chart: ECharts draws into __canvas; until it does, a skeleton of the same
 // size stands in, so the page does not jump.
 .smwb-chart {
   // Series colours, in order (read up to 12). The set stays apart with
-  // colour-vision deficiencies (Okabe–Ito); a theme may set its own.
-  --smwb-chart-series-1: #0072b2;
-  --smwb-chart-series-2: #e69f00;
-  --smwb-chart-series-3: #009e73;
-  --smwb-chart-series-4: #cc79a7;
-  --smwb-chart-series-5: #56b4e9;
-  --smwb-chart-series-6: #d55e00;
-  --smwb-chart-series-7: #7a7a7a;
+  // colour-vision deficiencies (Okabe–Ito); a theme sets its own with
+  // @chartSeries1 … @chartSeries12 (and …Dark for the dark theme).
+  .smwb-chart-series("");
 
   position: relative;
   width: 100%;
@@ -41,11 +48,5 @@
 }
 
 :root[data-theme="dark"] .smwb-chart {
-  --smwb-chart-series-1: #5aa9e6;
-  --smwb-chart-series-2: #f0b43a;
-  --smwb-chart-series-3: #2fc59b;
-  --smwb-chart-series-4: #e08cc0;
-  --smwb-chart-series-5: #8fd0f5;
-  --smwb-chart-series-6: #f27c3c;
-  --smwb-chart-series-7: #a8b0bc;
+  .smwb-chart-series("Dark");
 }

package/less/components/checkbox/checkbox.less

@@ -3,6 +3,9 @@
 }
 
 .smwb-checkbox {
+  // The box's size, which the native input takes too.
+  @box-size: 18px;
+
   &__icon {
     opacity: 0;
     transition: all 0.1s ease-in-out;
@@ -11,8 +14,8 @@
   &__btn {
     user-select: none;
     flex-shrink: 0;
-    width: 18px;
-    height: 18px;
+    width: @box-size;
+    height: @box-size;
     border-radius: @checkboxBorderRadius;
     border: 2px solid var(--smui-checkboxBorderColor);
     background-color: transparent;
@@ -36,6 +39,8 @@
   }
 
   &__wrapper {
+    // Anchors the absolutely positioned input (below) to the control itself.
+    position: relative;
     color: var(--smui-primaryTextColor);
     display: flex;
     align-items: center;
@@ -58,7 +63,19 @@
   }
 
   &__input {
-    display: none;
+    // Visually hidden but rendered: with display: none the input would be out of
+    // the tab order and the accessibility tree. It lies under the box, which
+    // takes the pointer and passes clicks on through the label. With no insets
+    // of its own it sits where the box does: at the start, centered.
+    position: absolute;
+    width: @box-size;
+    height: @box-size;
+    margin: 0;
+    opacity: 0;
+    &:focus-visible ~ .smwb-checkbox__btn {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
     &:hover {
       & ~ .smwb-checkbox__btn::before {
         background-color: var(--smui-onSurfaceHover);

package/less/components/chip/chip.less

@@ -74,6 +74,39 @@
     justify-content: center;
   }
 
+  // The icon and the label: the chip's button when it has onClick. The delete
+  // button follows it, beside the button, not inside it.
+  &__content {
+    display: inline-flex;
+    align-items: center;
+    gap: @chipGap;
+    border-radius: inherit;
+
+    // The button's focus ring goes around the whole chip, as when the chip
+    // itself took focus: its own ring is pushed out of sight, and ::after, laid
+    // over the chip (the chip is its containing block), takes its outline.
+    // Whatever sets that outline still decides it: the browser's ring, an
+    // app's, or none under a reset that removes focus rings (normalize.css).
+    &:focus {
+      outline-offset: 9999px;
+    }
+    &:focus::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      outline: inherit;
+      pointer-events: none;
+    }
+  }
+  // An outlined chip's ring sits where the chip's own did: ::after takes the
+  // chip's box and a border as wide as its border, as the browser draws its
+  // ring over a border and an app's ring around it.
+  &.smwb-outlined > &__content:focus::after {
+    inset: -1px;
+    border: 1px solid transparent;
+  }
+
   // delete control is a <button> now — strip UA chrome (additive)
   &__delete-icon {
     background: transparent;

package/less/components/dagView/dagView.entry.less

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

package/less/components/dagView/dagView.less

@@ -0,0 +1,280 @@
+// Emits --smwb-dag-view-<name> from @dagView<Var><suffix> (suffix "" or "Dark").
+// A variable that is `false` (the dark defaults) emits nothing, so the light
+// value, a runtime token that follows the theme, stays in force.
+.smwb-dag-view-token(@name; @var; @suffix) {
+  @full: ~"dagView@{var}@{suffix}";
+  .smwb-dag-view-token-value(@name; @@full);
+}
+.smwb-dag-view-token-value(@name; @value) when not (@value = false) {
+  --smwb-dag-view-@{name}: @value;
+}
+.smwb-dag-view-tokens(@suffix) {
+  .smwb-dag-view-token(node-bg; NodeBg; @suffix);
+  .smwb-dag-view-token(node-border; NodeBorder; @suffix);
+  .smwb-dag-view-token(edge-color; EdgeColor; @suffix);
+  .smwb-dag-view-token(edge-active-color; EdgeActiveColor; @suffix);
+  .smwb-dag-view-token(selected-ring; SelectedRing; @suffix);
+  .smwb-dag-view-token(status-idle; StatusIdle; @suffix);
+  .smwb-dag-view-token(status-pending; StatusPending; @suffix);
+  .smwb-dag-view-token(status-running; StatusRunning; @suffix);
+  .smwb-dag-view-token(status-success; StatusSuccess; @suffix);
+  .smwb-dag-view-token(status-warning; StatusWarning; @suffix);
+  .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.
+.smwb-dag-view-status(@status) {
+  @accent: ~"var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-@{status}))";
+  &[data-status="@{status}"] {
+    --smwb-dag-view-accent: @accent;
+  }
+}
+
+// A dependency graph: a viewport that clips a "world" moved and scaled by one
+// transform; in the world, an SVG layer of edges under absolutely placed nodes.
+.smwb-dag-view {
+  .smwb-dag-view-tokens("");
+  --smwb-dag-view-dim-opacity: @dagViewDimOpacity;
+
+  position: relative;
+  width: 100%;
+  // The default height; the `height` prop or a height in `style` wins.
+  height: @dagViewHeight;
+  min-width: 0;
+  box-sizing: border-box;
+  // clip, not hidden: a focused node off screen must not scroll the viewport
+  // (the view moves by its transform), and a clipping box is no Tab stop.
+  overflow: hidden;
+  overflow: clip;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: @smui-radius-lg;
+  background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 2%, var(--smui-surfaceBackground));
+  color: var(--smui-onSurfaceColor);
+  // The graph takes every touch gesture, and a wheel turn does not reach the page.
+  touch-action: none;
+  overscroll-behavior: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
+
+  &[data-interacting] {
+    cursor: grabbing;
+  }
+
+  &__world {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+  }
+
+  // Only during a gesture: at rest it would blur the text.
+  &[data-interacting] &__world {
+    will-change: transform;
+  }
+
+  &__edges {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  &__edge {
+    fill: none;
+    stroke: var(--smwb-dag-view-edge-color);
+    stroke-width: 1.5px;
+    transition:
+      stroke 0.12s,
+      opacity 0.12s;
+  }
+
+  &__edge--active {
+    stroke: var(--smwb-dag-view-edge-active-color);
+    stroke-width: 2.5px;
+  }
+
+  // An edge that closes a cycle, drawn against the flow.
+  &__edge--reversed {
+    stroke-dasharray: 6 4;
+  }
+
+  &__edge--dimmed {
+    opacity: var(--smwb-dag-view-dim-opacity);
+  }
+
+  &__arrow {
+    fill: var(--smwb-dag-view-edge-color);
+  }
+
+  &__arrow--active {
+    fill: var(--smwb-dag-view-edge-active-color);
+  }
+
+  &__node {
+    --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));
+    .smwb-dag-view-status(pending);
+    .smwb-dag-view-status(running);
+    .smwb-dag-view-status(success);
+    .smwb-dag-view-status(warning);
+    .smwb-dag-view-status(error);
+    .smwb-dag-view-status(skipped);
+
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: @smui-space-sm;
+    padding: 0 @smui-space-md 0 10px;
+    border: 1px solid var(--smwb-dag-view-node-border);
+    // The status stripe.
+    border-left: 4px solid var(--smwb-dag-view-accent);
+    border-radius: @smui-radius-md;
+    background-color: var(--smwb-dag-view-node-bg);
+    color: var(--smui-onSurfaceColor);
+    font-size: 0.875rem;
+    line-height: 1.3;
+    overflow: hidden;
+    contain: layout paint;
+    cursor: pointer;
+    transition:
+      box-shadow 0.12s,
+      border-color 0.12s,
+      opacity 0.12s;
+
+    &: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);
+    }
+
+    // normalize.css takes the outline off :focus; the keyboard gets a ring here.
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
+  &__node--selected {
+    box-shadow: 0 0 0 2px var(--smwb-dag-view-selected-ring);
+  }
+
+  &__node--upstream,
+  &__node--downstream {
+    border-color: var(--smwb-dag-view-edge-active-color);
+    border-left-color: var(--smwb-dag-view-accent);
+  }
+
+  &__node--dimmed {
+    opacity: var(--smwb-dag-view-dim-opacity);
+  }
+
+  &__node--disabled {
+    cursor: default;
+    color: var(--smui-disabledTextColor);
+  }
+
+  &__dot {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--smwb-dag-view-accent);
+  }
+
+  &__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__status {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // Zoomed far out the status words (and any content marked __detail) give
+  // way, so the boxes stay readable.
+  &[data-zoom="far"] &__status,
+  &[data-zoom="far"] &__detail {
+    display: none;
+  }
+
+  // The graph in words, for screen readers only.
+  &__summary {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  &__controls {
+    position: absolute;
+    right: @smui-space-sm;
+    bottom: @smui-space-sm;
+    display: flex;
+    flex-direction: column;
+    gap: @smui-space-xs;
+    cursor: default;
+  }
+
+  &__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 1px solid var(--smui-dividerColor);
+    border-radius: @smui-radius-md;
+    background-color: var(--smui-surfaceBackground);
+    color: var(--smui-onSurfaceVariant);
+    cursor: pointer;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 8%, var(--smui-surfaceBackground));
+      color: var(--smui-onSurfaceColor);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+}
+
+:root[data-theme="dark"] .smwb-dag-view {
+  .smwb-dag-view-tokens("Dark");
+}
+
+// A running node's dot pulses, unless motion is reduced.
+@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;
+  }
+}
+
+@keyframes smwb-dag-view-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}

package/less/components/descriptionList/descriptionList.less

@@ -39,7 +39,13 @@
   }
 
   // auto: the list is its own query container, so its width — not the
-  // window's — decides when the pairs stack.
+  // window's — decides when the pairs stack. A container's content does not
+  // count toward its width, so where the parent takes its width from its
+  // content (a flex item that does not grow, a popover, a table cell) the list
+  // has none: it needs a width there, or "row" / "stacked". A fallback width
+  // (contain-intrinsic-inline-size) would also become the list's min-content
+  // width, and a card holding the list in a 1fr grid column or a flex: 1 item
+  // could no longer shrink below it.
   &_auto {
     container: smwb-description-list / inline-size;
   }

package/less/components/menu/menu.less

@@ -28,7 +28,9 @@
     white-space: nowrap;
     height: 48px;
 
-    &:not(&--selected):not(:active) {
+    // A select's option the keys are on (aria-activedescendant, no DOM focus) keeps
+    // the focus layer under the pointer too, as a focused item does.
+    &:not(&--selected):not(:active):not(:focus-visible):not(.smwb-select-field__option--active) {
       &:hover {
         &:before {
           opacity: @menuOpacityHover;
@@ -61,6 +63,23 @@
       }
     }
 
+    // Keyboard focus: the focus state layer, over hover and the selected shade, and the
+    // library's ring, inside the item so that neither the menu's edge nor a scrolling menu
+    // clips it. normalize.css removes the browser's own ring.
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+
+      &:before {
+        opacity: @menuOpacityFocus;
+      }
+    }
+
+    // An item with `href` takes focus a second time, on its link, which fills the item.
+    &:has(> &-inner:focus-visible):before {
+      opacity: @menuOpacityFocus;
+    }
+
     &:active {
       &:before {
         opacity: @menuOpacityActive;
@@ -75,6 +94,11 @@
     height: 100%;
     color: currentColor;
     gap: @menuItemGap;
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
   }
 
   &__text {

package/less/components/personChip/personChip.less

@@ -10,8 +10,10 @@
   color: inherit;
   text-decoration: none;
 
-  // The derived colours are mid-dark in both themes: white initials read on all of them.
-  &__avatar {
+  // The derived colours are mid-dark in both themes: white initials read on all
+  // of them. Two classes: the avatar's own colour rule (--smui-onPrimaryColor,
+  // dark in the dark theme) must not win on stylesheet order.
+  .smwb-avatar&__avatar {
     flex-shrink: 0;
     color: #fff;
   }

package/less/components/radioButton/radioButton.less

@@ -30,7 +30,20 @@
   }
 
   &__input {
-    display: none;
+    // Visually hidden but rendered: with display: none the input would be out of
+    // the tab order and the accessibility tree. It fills the wrapper, under the
+    // button, which takes the pointer and passes clicks on through the label.
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    &:focus-visible ~ .smwb-radio__btn {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
     &:active {
       & ~ .radio__btn:hover ~ .smwb-radio__bg {
         transform: translate(-50%, -50%) scale(1);

package/less/components/rating/rating.less

@@ -1,7 +1,8 @@
+// The control (the row of icons) with its helper text below it.
 .smwb-rating {
   display: inline-flex;
-  align-items: center;
-  gap: @ratingGap;
+  flex-direction: column;
+  align-items: flex-start;
   color: var(--smui-primaryColor);
 
   &_disabled {
@@ -9,6 +10,18 @@
     pointer-events: none;
   }
 
+  &__control {
+    display: inline-flex;
+    align-items: center;
+    gap: @ratingGap;
+
+    // normalize.css removes the browser's focus ring.
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
   &__item {
     position: relative;
     display: inline-flex;

package/less/components/selectField/selectField.less

@@ -44,6 +44,33 @@
     }
   }
 
+  // The control, the part of the field that is the button: the selected text
+  // and the search box. Chips sit before it and the clear button after it,
+  // outside, so it takes the room they leave.
+  &__control {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    align-self: stretch;
+    // The scrolling row the control sits in would cut its focus ring, so the
+    // ring goes around the whole field, as when the field was the control: the
+    // control's own is pushed out of sight, and ::after, laid over the field
+    // (the input holder is its containing block), takes its outline. Whatever
+    // sets that outline still decides it, e.g. a reset that removes focus rings
+    // (normalize.css) removes this one too.
+    &:focus {
+      outline-offset: 9999px;
+    }
+
+    &:focus::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      outline: inherit;
+      pointer-events: none;
+    }
+  }
+
   &__actions {
     display: flex;
     align-items: center;
@@ -51,6 +78,19 @@
     margin-right: -7px;
   }
 
+  // The clear button draws only its icon.
+  &__clear {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
   &__values {
     white-space: nowrap;
     font: inherit;
@@ -61,7 +101,10 @@
       margin-left: @selectFieldChipMarginLeft;
     }
 
-    & + span {
+    // The search box keeps its distance from the values: it follows the
+    // selected text in the control, or opens the control after the chips.
+    & + .smwb-select-field__search,
+    & + .smwb-select-field__control > .smwb-select-field__search {
       margin-left: @selectFieldChipMarginLeft;
     }
 
@@ -187,6 +230,28 @@
   color: var(--smui-primaryColor);
 }
 
+// The options: a listbox, and the groups in it, inside the menu's list.
+.smwb-select-field__listbox,
+.smwb-select-field__group-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+// The option the keyboard is on. The focus stays on the field, which points at
+// the option, so it is drawn as a menu item with the keyboard focus: the ring
+// inside it (an optionRenderer's option too) and the focus state layer.
+.smwb-select-field__option--active {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+
+// Inside the menu, so it outranks the selected shade (.smwb-menu__item--selected)
+// whichever stylesheet comes first; menu.less keeps hover off it.
+.smwb-menu .smwb-menu__item.smwb-select-field__option--active:before {
+  opacity: @menuOpacity-focus;
+}
+
 // size, as for TextField: the padding and the font follow the control scale, so
 // a small select stands as tall as a small text field or button in a toolbar.
 .smwb-text-field_size-small .smwb-select-field:not(.smwb-select-field--inline) {

package/less/components/table/table.less

@@ -64,6 +64,18 @@
           font-weight: 500;
         }
       }
+      // The column's controls (TableHeadCell actions) sit after the sort
+      // control, not in it: inside, their names and values would join its
+      // accessible name.
+      .smwb-head-cell__actions {
+        align-items: center;
+        display: inline-flex;
+        vertical-align: middle;
+        gap: @tableActionsGap;
+        margin-inline-start: @tableActionsGap;
+        // A sortable cell shows a pointer; the controls are not the sort control.
+        cursor: auto;
+      }
       &.smwb-align_left {
         text-align: left;
       }

package/less/components/thumbCard/thumbCard.less

@@ -1,10 +1,12 @@
+// The root is a box around the content (the image and the caption: the card's
+// button when it is selectable) and the corner slots, laid over the image
+// beside that button, not inside it.
 .smwb-thumb-card {
   position: relative;
   display: flex;
   flex-direction: column;
   border-radius: 8px;
   overflow: visible;
-  outline: none;
 
   &--interactive {
     cursor: pointer;
@@ -15,6 +17,13 @@
     pointer-events: none;
   }
 
+  // Takes focus; the ring is drawn on the image instead.
+  &__content {
+    display: flex;
+    flex-direction: column;
+    outline: none;
+  }
+
   &__media {
     position: relative;
     width: 100%;
@@ -29,11 +38,12 @@
     outline-offset: 1px;
   }
 
-  &--interactive:focus-visible &__media {
+  &__content:focus-visible &__media {
     outline: 2px solid var(--smui-primaryColor);
     outline-offset: 1px;
   }
 
+  // Positioned against the root, whose top-left corner is the image's.
   &__slot {
     position: absolute;
     top: 4px;

package/less/components/toggle/toggle.less

@@ -70,7 +70,20 @@
   }
 
   &__checkbox {
-    display: none;
+    // Visually hidden but rendered: with display: none the input would be out of
+    // the tab order and the accessibility tree. It fills the switch, under the
+    // track and thumb, which take the pointer and pass clicks on through the label.
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    &:focus-visible ~ .smwb-toggle__track {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
     &:checked {
       & ~ .smwb-toggle__track {
         background-color: var(--smui-toggleTrackActiveColor);

package/less/components/typography/typography.less

@@ -7,10 +7,23 @@
     @s: ~"smui-font-@{v}-size";
     @w: ~"smui-font-@{v}-weight";
     @l: ~"smui-font-@{v}-lh";
+    @t: ~"smui-font-@{v}-transform";
+    @ls: ~"smui-font-@{v}-letter-spacing";
     &_@{v} {
       font-size: @@s;
       font-weight: @@w;
       line-height: @@l;
+      // `auto` (the default) declares nothing, so consumer rules on the element keep winning.
+      // A set value is emitted behind a runtime token: override --smui-font-<variant>-transform
+      // / -letter-spacing in CSS, or leave the compiled value.
+      & when not (@@t = auto) {
+        @tv: @@t;
+        text-transform: ~"var(--@{t}, @{tv})";
+      }
+      & when not (@@ls = auto) {
+        @lsv: @@ls;
+        letter-spacing: ~"var(--@{ls}, @{lsv})";
+      }
     }
   }
   .smui-type(h1);
@@ -27,12 +40,6 @@
   .smui-type(overline);
   .smui-type(button);
 
-  &_overline,
-  &_button {
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-
   &_color-primary {
     color: var(--smui-primaryColor);
   }

package/less/components.less

@@ -64,6 +64,7 @@
 @import "./components/rating/rating.less";
 @import "./components/skeleton/skeleton.less";
 @import "./components/chart/chart.less";
+@import "./components/dagView/dagView.less";
 @import "./components/stepper/stepper.less";
 @import "./components/typography/typography.less";
 @import "./components/stack/stack.less";

package/less/connects/rt/table.less

@@ -15,11 +15,18 @@
   opacity: 1;
 }
 
+// The resizer is one of the head cell's actions. It sits on the cell's edge, out
+// of the flow, so alone it takes no room there: no gap after the sort control.
+.smwb-head-cell .smwb-head-cell__actions:has(> .smwb-rt-table--resizer:only-child) {
+  margin-inline-start: 0;
+}
+
 @media (hover: hover) {
   .smwb-rt-table--resizer {
     opacity: 0.5;
   }
 
+  .smwb-head-cell:hover .smwb-rt-table--resizer,
   *:hover > .smwb-rt-table--resizer {
     opacity: 1;
   }

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

@@ -94,6 +94,7 @@
 @avatarSizeLarge: 56px;
 @avatarGroupOverlap: @smui-space-sm;
 @avatarGroupBorder: 2px;
+@avatarGroupMaxStacked: 12; // children laid each over the next; any past these overlap the other way
 
 @breadcrumbsGap: @smui-space-sm;
 
@@ -373,7 +374,8 @@
 @menuDisabledTextColor: @disabledTextColor;
 @menuOpacityHover: 0.08;
 @menuOpacityActive: 0.12;
-@menuOpacity-focus: 0.12;
+@menuOpacityFocus: 0.12;
+@menuOpacity-focus: @menuOpacityFocus; // former name, kept so Less that reads it still compiles
 @menuOpacitySelected: 0.08;
 @menuDividerColor: @dividerColor;
 
@@ -456,6 +458,46 @@
 @messageBgLight: ~"color-mix(in srgb, @{primaryColor} 10%, transparent)";
 @messageBorderRadius: @smui-radius-xs;
 
+// ---- Chart ----
+// Series colours in order, up to 12 (--smwb-chart-series-N). `false` = not set:
+// the token is not emitted, and the chart draws only the colours that are set.
+// Fill slots in order: an unset slot is skipped, so later colours shift up
+// (slot 9 without slot 8 is drawn for the 8th series).
+// Okabe-Ito, apart under colour-vision deficiencies.
+@chartSeries1: #0072b2;
+@chartSeries2: #e69f00;
+@chartSeries3: #009e73;
+@chartSeries4: #cc79a7;
+@chartSeries5: #56b4e9;
+@chartSeries6: #d55e00;
+@chartSeries7: #7a7a7a;
+@chartSeries8: false;
+@chartSeries9: false;
+@chartSeries10: false;
+@chartSeries11: false;
+@chartSeries12: false;
+
+// ---- DagView ----
+// The graph's colours, as --smwb-dag-view-* on .smwb-dag-view. The defaults
+// are the theme's runtime tokens, so the dark theme follows on its own.
+@dagViewNodeBg: ~"var(--smui-surfaceBackground)";
+@dagViewNodeBorder: ~"var(--smui-outlineColor)";
+@dagViewEdgeColor: ~"var(--smui-outlineColor)";
+@dagViewEdgeActiveColor: ~"var(--smui-primaryColor)";
+@dagViewSelectedRing: ~"var(--smui-primaryColor)";
+// A node's accent (its stripe and dot) by status; any other status is drawn as idle.
+@dagViewStatusIdle: ~"var(--smui-outlineColor)";
+@dagViewStatusPending: ~"var(--smui-onSurfaceVariant)";
+@dagViewStatusRunning: ~"var(--smui-infoColor)";
+@dagViewStatusSuccess: ~"var(--smui-successColor)";
+@dagViewStatusWarning: ~"var(--smui-warningColor)";
+@dagViewStatusError: ~"var(--smui-errorColor)";
+@dagViewStatusSkipped: ~"var(--smui-disabledTextColor)";
+// 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`).
+@dagViewHeight: 480px;
+
 /*===================================================== DARK THEME =================================================*/
 /*-------------------
     Common
@@ -614,3 +656,33 @@
     Message
 --------------------*/
 @messageBgDark: #323232;
+
+// ---- Chart ----
+// Same rule as the light set: fill in order, an unset slot is skipped.
+@chartSeries1Dark: #5aa9e6;
+@chartSeries2Dark: #f0b43a;
+@chartSeries3Dark: #2fc59b;
+@chartSeries4Dark: #e08cc0;
+@chartSeries5Dark: #8fd0f5;
+@chartSeries6Dark: #f27c3c;
+@chartSeries7Dark: #a8b0bc;
+@chartSeries8Dark: false;
+@chartSeries9Dark: false;
+@chartSeries10Dark: false;
+@chartSeries11Dark: false;
+@chartSeries12Dark: false;
+
+// ---- DagView ----
+// Dark-only values; `false` = not set: the light value (a runtime token) applies.
+@dagViewNodeBgDark: false;
+@dagViewNodeBorderDark: false;
+@dagViewEdgeColorDark: false;
+@dagViewEdgeActiveColorDark: false;
+@dagViewSelectedRingDark: false;
+@dagViewStatusIdleDark: false;
+@dagViewStatusPendingDark: false;
+@dagViewStatusRunningDark: false;
+@dagViewStatusSuccessDark: false;
+@dagViewStatusWarningDark: false;
+@dagViewStatusErrorDark: false;
+@dagViewStatusSkippedDark: false;

package/less/foundation/typography.less

@@ -5,6 +5,13 @@
 //  <Typography> component (smwb-typography_<variant>) and reusable by
 //  any component. Override a step from theme.config, e.g.
 //      @smui-font-h1-size: 40px;
+// Letter case and spacing per variant are theme variables too; set them from
+// theme.config to, say, put the headings in capitals:
+//      @smui-font-h1-transform: uppercase; @smui-font-h1-letter-spacing: 0.06em;
+// The defaults are `auto`, a marker meaning the variant declares nothing of its
+// own, except overline and button, which have always been uppercase with 0.06em.
+// A set value is also readable at runtime as --smui-font-<variant>-transform /
+// -letter-spacing (the compiled value is the var() fallback).
 //=====================================================================
 
 @smui-font-family: var(--smui-fontFamily, inherit);
@@ -28,3 +35,17 @@
 @smui-font-caption-size: 12px; @smui-font-caption-weight: 400; @smui-font-caption-lh: 1.4;
 @smui-font-overline-size: 12px; @smui-font-overline-weight: 600; @smui-font-overline-lh: 1.4;
 @smui-font-button-size: 14px; @smui-font-button-weight: 500; @smui-font-button-lh: 1.75;
+
+@smui-font-h1-transform: auto; @smui-font-h1-letter-spacing: auto;
+@smui-font-h2-transform: auto; @smui-font-h2-letter-spacing: auto;
+@smui-font-h3-transform: auto; @smui-font-h3-letter-spacing: auto;
+@smui-font-h4-transform: auto; @smui-font-h4-letter-spacing: auto;
+@smui-font-h5-transform: auto; @smui-font-h5-letter-spacing: auto;
+@smui-font-h6-transform: auto; @smui-font-h6-letter-spacing: auto;
+@smui-font-subtitle1-transform: auto; @smui-font-subtitle1-letter-spacing: auto;
+@smui-font-subtitle2-transform: auto; @smui-font-subtitle2-letter-spacing: auto;
+@smui-font-body1-transform: auto; @smui-font-body1-letter-spacing: auto;
+@smui-font-body2-transform: auto; @smui-font-body2-letter-spacing: auto;
+@smui-font-caption-transform: auto; @smui-font-caption-letter-spacing: auto;
+@smui-font-overline-transform: uppercase; @smui-font-overline-letter-spacing: 0.06em;
+@smui-font-button-transform: uppercase; @smui-font-button-letter-spacing: 0.06em;

package/less/themes/material/variables.less

@@ -170,6 +170,7 @@
 @menuDisabledTextColor: @disabledTextColor;
 @menuOpacityHover: 0.08;
 @menuOpacityActive: 0.12;
+@menuOpacityFocus: 0.12;
 @menuOpacitySelected: 0.08;
 @menuDividerColor: rgba(0, 0, 0, 0.12);
 

package/less/themes/summer/variables.less

@@ -166,6 +166,7 @@
 @menuDisabledTextColor: @disabledTextColor;
 @menuOpacityHover: 0.08;
 @menuOpacityActive: 0.12;
+@menuOpacityFocus: 0.12;
 @menuOpacitySelected: 0.08;
 @menuDividerColor: rgba(0, 0, 0, 0.12);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "1.5.1",
+  "version": "1.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": [
@@ -19,7 +19,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs"
+    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs && node scripts/check-typography-case.mjs && node scripts/check-chart-series.mjs"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",
   "repository": {