@smwb/ui-styles 1.5.1 → 2.0.0

package/README.md

@@ -19,18 +19,18 @@ npm install @smwb/ui-styles
 
 ## What's inside
 
-| Path | Purpose |
-| --- | --- |
-| `less/components.less` | Aggregate entry — `@import`s foundation + every component |
-| `less/foundation/*` | Tokens: palette, spacing, radius, elevation, breakpoints, sizing |
-| `less/default/globals/default.variables.less` | Semantic colors + per-component LESS variables |
-| `less/variables.less` | Declares the `--smui-*` tokens and emits them on `:root` (light) + `[data-theme="dark"]` |
-| `less/components/<name>/<name>.entry.less` | Per-component entry (component rules only, no tokens) |
-| `less/tokens.entry.less` | The `--smui-*` tokens at zero specificity (`:where(:root)`) for per-component CSS |
-| `less/headless-base.less` | Foundation + theme variables only (no component rules) |
-| `less/connects/rt/table.entry.less` | The React TanStack Table adapter's own rules (column resizer) |
-| `less/themes/*` | Built-in theme packs (`summer`, `material`) |
-| `normalize.css` | Optional CSS reset |
+| Path                                          | Purpose                                                                                  |
+| --------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `less/components.less`                        | Aggregate entry — `@import`s foundation + every component                                |
+| `less/foundation/*`                           | Tokens: palette, spacing, radius, elevation, breakpoints, sizing                         |
+| `less/default/globals/default.variables.less` | Semantic colors + per-component LESS variables                                           |
+| `less/variables.less`                         | Declares the `--smui-*` tokens and emits them on `:root` (light) + `[data-theme="dark"]` |
+| `less/components/<name>/<name>.entry.less`    | Per-component entry (component rules only, no tokens)                                    |
+| `less/tokens.entry.less`                      | The `--smui-*` tokens at zero specificity (`:where(:root)`) for per-component CSS        |
+| `less/headless-base.less`                     | Foundation + theme variables only (no component rules)                                   |
+| `less/connects/rt/table.entry.less`           | The React TanStack Table adapter's own rules (column resizer)                            |
+| `less/themes/*`                               | Built-in theme packs (`summer`, `material`)                                              |
+| `normalize.css`                               | Optional CSS reset                                                                       |
 
 ## Usage
 
@@ -57,6 +57,204 @@ 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.
+
+#### StatusDot colours
+
+`StatusDot` reads only runtime tokens, so the dark theme follows without extra settings: `active` takes
+`--smui-infoColor`, `attention` `--smui-warningColor`, `idle` `--smui-onSurfaceVariant`, `done`
+`--smui-successColor`, `error` `--smui-errorColor` and `unknown` `--smui-outlineColor` (as a ring); `color` takes
+the matching `--smui-*Color` token (`default` is `--smui-onSurfaceVariant`). Its sizes are `@statusDotSizeSm`
+(8px), `@statusDotSizeMd` (12px) and `@statusDotRing` (2px, the ring of `unknown`) in `theme.config`.
+
+Against `--smui-surfaceBackground` and `--smui-pageBackground`, the default theme's status colours measure
+at least 3:1 in both modes (the lowest is `attention` on the light surface, 3.04:1). The semantic colours are one
+value for both modes, so a theme that makes `@warningColor` lighter, or any of them darker for the dark theme,
+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.
+
+#### QrCode colours
+
+`QrCode` never reads theme tokens for the code itself: the modules are always `@qrCodeDarkColor`
+(`rgb(0 0 0)`) on `@qrCodeLightColor` (`rgb(255 255 255)`), including the quiet zone, so a phone camera
+reads the code in the dark theme, under forced colours and in print (`forced-color-adjust: none` and
+`print-color-adjust: exact` are set on the svg, and the same colours are written as SVG `fill` attributes,
+so a copied or printed svg scans without the library CSS). Only the caption is themed
+(`--smui-onSurfaceVariant`). The corner rounding is `@qrCodeRadius` (`@smui-radius-sm`); the svg clips to
+it, and the quiet zone keeps the modules clear of the rounding.
+
+#### DagView colours
+
+The dependency graph (`DagView` in `@smwb/ui-solid` and `@smwb/ui-react`) takes its colours from theme variables that default to the
+runtime tokens, so the dark theme follows without extra settings:
+
+| Variable (`theme.config`)                      | Runtime property on `.smwb-dag-view`       | Default                                                                   |
+| ---------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------- |
+| `@dagViewNodeBg`                               | `--smwb-dag-view-node-bg`                  | `var(--smui-surfaceBackground)`                                           |
+| `@dagViewNodeBorder`                           | `--smwb-dag-view-node-border`              | `var(--smui-outlineColor)`                                                |
+| `@dagViewEdgeColor`                            | `--smwb-dag-view-edge-color`               | `var(--smui-outlineColor)`                                                |
+| `@dagViewEdgeActiveColor`                      | `--smwb-dag-view-edge-active-color`        | `var(--smui-primaryColor)`                                                |
+| `@dagViewSelectedRing`                         | `--smwb-dag-view-selected-ring`            | `var(--smui-primaryColor)`                                                |
+| `@dagViewStatusIdle` … `@dagViewStatusSkipped` | `--smwb-dag-view-status-idle` … `-skipped` | outline, on-surface variant, info, success, warning, error, disabled text |
+| `@dagViewDimOpacity`                           | `--smwb-dag-view-dim-opacity`              | `0.35`                                                                    |
+| `@dagViewHeight`                               | — (the graph's `height`)                   | `480px`                                                                   |
+
+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.
+
+#### Swimlanes
+
+`Swimlanes` (in `@smwb/ui-react` and `@smwb/ui-solid`) reads only runtime tokens, so the dark theme follows without
+extra settings: the grid's surface and the sticky header's opaque background come from `--smui-surfaceBackground`,
+the row divider from `--smui-dividerColor`, the hover tint from `--smui-onSurfaceHover`, the selected tint, the
+selection stripe and the focus ring from `--smui-primaryColor`, and a disabled lane's text from
+`--smui-disabledTextColor`.
+
+| Variable (`theme.config`) | Runtime property on `.smwb-swimlanes`           | Default |
+| ------------------------- | ----------------------------------------------- | ------- |
+| `@swimlanesHeaderWidth`   | the fallback of `--smwb-swimlanes-header-width` | `240px` |
+| `@swimlanesHeight`        | — (the grid's `height`)                         | `480px` |
+
+Three custom properties drive the layout and the component writes them on its own root:
+`--smwb-swimlanes-row-height` (always, from `rowHeight`), `--smwb-swimlanes-header-width` (only with `headerWidth`)
+and `--smwb-swimlanes-content-min-width` (only with `contentMinWidth`). The last two are yours to set, through the
+props or at runtime on the grid itself (its `style`, which is merged last and wins). The row height is not: the
+virtual window's maths needs it in JS, so it goes through `rowHeight` alone, and a different value in `style` would
+resize the rows in CSS while the window still counts with `rowHeight`, leaving gaps or overlaps. A row's state is one
+internal property, `--smwb-swimlanes-tint`, set on each row and read by both cells so the lane reads as one band:
+`transparent`, `--smui-onSurfaceHover` on hover, and 12% of `--smui-primaryColor` when selected. It is declared on
+the row, so a value set on the grid never reaches the cells.
+
+`@swimlanesHeight` is set by the stylesheet, so the `height` prop or a height in `style` wins over it. A selected
+lane also gets a 3px primary stripe on its header, so the selection is not shown by tint alone; forced colours draw
+it as a `Highlight` outline on both cells instead. Cells clip, so content that needs more room needs a wider
+`contentMinWidth`.
+
+#### Composer
+
+`Composer` is the task input: a textarea that grows from `minRows` to `maxRows`, an optional attach button, a
+`toolbar` slot, a character counter and a send button that turns into Stop while the agent is busy. Its stylesheet is
+`components/composer/composer.less` (per-component entry: `composer.entry.less`). The root's children are flat, and CSS
+grid areas place them for each layout; the spacing is margins, so an absent child leaves no gap.
+
+| Class                                                           | Element                                                                                                                                                                     |
+| --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.smwb-composer`                                                | the root; `_stacked` (field on top, a bar under it: attach, toolbar, counter, action) or `_inline` (one row: attach, field, counter, action; the toolbar, if any, under it) |
+| `_focused`, `_disabled`, `_drag-active`, `_over-limit`, `_busy` | root states; `_focused` follows the textarea's focus, not `:focus-within`                                                                                                   |
+| `.smwb-composer__attachments`, `__toolbar`                      | slots above the field and in the bar                                                                                                                                        |
+| `.smwb-composer__field`                                         | the textarea's wrapper; its `data-value` mirrors the text, and `--smwb-composer-min-rows` / `--smwb-composer-max-rows` set the height range                                 |
+| `.smwb-composer__input`                                         | the textarea                                                                                                                                                                |
+| `.smwb-composer__icon-button`                                   | a round native button; with `__attach` and `__action` (`__action_stop` while busy)                                                                                          |
+| `.smwb-composer__counter` (`_error`)                            | the `n / max` text                                                                                                                                                          |
+| `.smwb-composer__status`                                        | the visually hidden live region for the counter                                                                                                                             |
+
+The textarea grows in CSS only: `.smwb-composer__field::after` repeats the text (`content: attr(data-value)`) in a
+hidden box that shares the textarea's font, padding and line height, and the textarea fills the grid cell that box
+sizes, up to `max-height`. Nothing is measured, so the height is right in server-rendered markup and follows a width
+change. The send button is not natively disabled while it is unavailable: `aria-disabled="true"` mutes it, so it keeps
+focus.
+
+The colours are theme variables that default to the runtime tokens, so the dark theme follows without extra settings:
+
+| Variable (`theme.config`)                                | Default                                                                                 |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `@composerBg`, `@composerBorder`, `@composerBorderFocus` | `var(--smui-surfaceBackground)`, `var(--smui-outlineColor)`, `var(--smui-primaryColor)` |
+| `@composerText`, `@composerPlaceholder`                  | `var(--smui-onSurfaceColor)`, `var(--smui-onSurfaceVariant)`                            |
+| `@composerCounter`, `@composerCounterError`              | `var(--smui-onSurfaceVariant)`, `var(--smui-errorColor)`                                |
+| `@composerActionBg`, `@composerActionColor`              | `var(--smui-primaryColor)`, `var(--smui-onPrimaryColor)`                                |
+| `@composerStopBg`, `@composerStopColor`                  | `var(--smui-onSurfaceColor)`, `var(--smui-surfaceBackground)`                           |
+| `@composerDragBg`                                        | `var(--smui-primaryContainer)`                                                          |
+
+Sizes live in `composer.variables.less`: `@composerPadding`, `@composerGap`, `@composerRadius`, `@composerLineHeight`
+(one text line, `1.5rem`), `@composerFieldPaddingY` / `@composerFieldPaddingX` and `@composerIconButtonSize`.
+
+#### DiffStat colours
+
+`DiffStat` draws its figures and cells in the theme's `--smui-successColor` and `--smui-errorColor`, each mixed toward
+`--smui-onSurfaceColor` so that the text keeps 4.5:1 contrast (the raw tokens measure about 3.9–4.3:1) and a cell
+keeps 3:1 against a neutral one, in the light and the dark theme alike. A cell nobody owns is an outline of the surface ink
+(60% of it, 3.69:1 or better against the page and the surface in every bundled theme, light and dark), not a fill:
+a fill light enough to sit quietly measured 1.08–1.29:1 against a light page and made "4 of 5" look like "5 of 5":
+
+| Variable (`theme.config`) | Runtime property on `.smwb-diff-stat` | Default                                                         |
+| ------------------------- | ------------------------------------- | --------------------------------------------------------------- |
+| `@diffStatColorMix`       | — (compiled into the two below)       | `55%` of the success or error token                             |
+| —                         | `--smwb-diff-stat-added`              | success token mixed toward the surface ink                      |
+| —                         | `--smwb-diff-stat-removed`            | error token mixed toward the surface ink                        |
+| `@diffStatNeutralMix`     | `--smwb-diff-stat-neutral`            | the surface ink at `60%`, the outline colour of an unowned cell |
+
+Sizes are `@diffStatFontSize`, `@diffStatCompactFontSize`, `@diffStatCellWidth`, `@diffStatCellHeight`,
+`@diffStatCompactCellHeight`, `@diffStatCellGap` and `@diffStatCellRadius`. At runtime, set the three properties on the
+`DiffStat` itself (its `style`, or a class that outranks `.smwb-diff-stat`).
+
+#### AppBar window controls
+
+`AppBar variant="window"` is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window
+Controls Overlay): the bar drags the window (`-webkit-app-region: drag`) and every control inside it is taken out of
+the drag region. The width reserved for the OS window buttons is `@appBarWindowControlsLeft` (64px, the macOS traffic
+lights) and `@appBarWindowControlsRight` (138px, three 46px Windows/Linux caption buttons). Both are read through one
+runtime property, so an app retunes them without recompiling:
+
+```css
+.smwb-appbar.smwb-appbar_variant-window {
+  --smui-appBarWindowControlsWidth: 84px;
+}
+```
+
+`--smui-appBarWindowControlsWidth` is deliberately **not** declared in `variables.less`: it is read with a fallback,
+so unset means the Less defaults above. With `windowControls="auto"` the insets come from the shell instead —
+`env(titlebar-area-x)` / `env(titlebar-area-width)` — and are 0 in a plain browser tab; `left`, `right` and `none`
+pin them with a class. The insets are `padding-left` / `padding-right` on the bar, added to `@appBarPaddingX`, and
+they survive `dense`. Overlays are `no-drag` globally — `[data-smwb-overlay-layer]`, `.smwb-menu`, `.smwb-tooltip`,
+`.smwb-snackbars` and the library's own full-screen portals (`.smwb-chat-attachment-image__overlay`,
+`.smwb-image-modal__overlay`, `.smwb-thumb-card__preview`, `.smwb-chat-shell`): Electron hit-tests drag regions by
+geometry, and those popups portal to `<body>`. Inside the bar, the roles that keep `tabindex="-1"` while the group
+holds the tab stop (`menuitemcheckbox`, `menuitemradio`, `treeitem`, `spinbutton`, `gridcell`, `listbox`,
+`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`.
+
 ## License
 
 [MIT](./LICENSE)

package/less/components/appBar/appBar.less

@@ -39,6 +39,90 @@
     padding: @appBarActionPadding;
     height: 48px;
   }
+  // `variant="window"`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA
+  // with Window Controls Overlay). Compound and ordered after `&.smwb-dense` above, so its side insets
+  // out-rank the dense `padding` shorthand instead of being wiped by it.
+  &.smwb-appbar_variant-window {
+    -webkit-app-region: drag;
+    app-region: drag;
+    // Dragging the window out of the title must not select the title text.
+    user-select: none;
+    // Width to keep clear of the OS window buttons on each side. With no class at all (`windowControls="auto"`)
+    // the area comes from the shell: `env(titlebar-area-*)` is exact under Window Controls Overlay, and in a
+    // plain browser tab the fallbacks make both insets 0, so the bar looks like `variant="default"`.
+    --smwb-appbar-wc-left: env(titlebar-area-x, 0px);
+    --smwb-appbar-wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
+    padding-left: calc(@appBarPaddingX + var(--smwb-appbar-wc-left));
+    padding-right: calc(@appBarPaddingX + var(--smwb-appbar-wc-right));
+    // `left`: the macOS traffic lights (`titleBarStyle: "hiddenInset"`), which Electron does not report
+    // through env() unless `titleBarOverlay` is on, hence the fixed width.
+    &.smwb-appbar_window-controls-left {
+      --smwb-appbar-wc-left: env(titlebar-area-x, var(--smui-appBarWindowControlsWidth, @appBarWindowControlsLeft));
+    }
+    // `right`: the caption buttons Windows/Linux draw at the right edge of the window. The fallback keeps
+    // their width clear by shortening the area the shell would have reported.
+    &.smwb-appbar_window-controls-right {
+      --smwb-appbar-wc-right: calc(
+        100vw - env(titlebar-area-x, 0px) -
+          env(titlebar-area-width, calc(100vw - var(--smui-appBarWindowControlsWidth, @appBarWindowControlsRight)))
+      );
+    }
+    &.smwb-appbar_window-controls-none {
+      --smwb-appbar-wc-left: 0px;
+      --smwb-appbar-wc-right: 0px;
+    }
+    // Electron delivers no mouse events at all inside a drag region, so every control in the bar has to opt
+    // out. Focusable and role-tagged elements are matched generically (the list is `:where()`, so an app's own
+    // selector still wins); a custom control that is neither takes `.smwb-appbar__no-drag` or `data-no-drag`.
+    :where(
+      a[href],
+      button,
+      input,
+      select,
+      textarea,
+      label,
+      summary,
+      iframe,
+      video[controls],
+      [contenteditable]:not([contenteditable="false"]),
+      [tabindex]:not([tabindex="-1"]),
+      [role="button"],
+      [role="link"],
+      [role="menuitem"],
+      [role="tab"],
+      [role="checkbox"],
+      [role="switch"],
+      [role="radio"],
+      [role="combobox"],
+      [role="textbox"],
+      [role="searchbox"],
+      [role="slider"],
+      [role="option"],
+      // Roving-tabindex widgets and the cells of composite widgets: while the group holds
+      // the tab stop their items carry `tabindex="-1"`, so `[tabindex]:not([tabindex="-1"])`
+      // above never matches them and only the role gets them out of the drag region.
+      [role="menuitemcheckbox"],
+      [role="menuitemradio"],
+      [role="treeitem"],
+      [role="spinbutton"],
+      [role="gridcell"],
+      [role="listbox"],
+      [role="scrollbar"],
+      .smwb-tooltip__wrapper,
+      .smwb-appbar__no-drag,
+      [data-no-drag]
+    ) {
+      -webkit-app-region: no-drag;
+      app-region: no-drag;
+    }
+    // Dense keeps the side insets and drops the vertical padding, which the 48px height has no room for.
+    // The insets are repeated here on purpose: `responsive.less` is imported after every component and resets
+    // `.smwb-appbar.smwb-dense` at phone widths, which would otherwise beat the two longhands above.
+    &.smwb-dense {
+      padding: 0 calc(@appBarPaddingX + var(--smwb-appbar-wc-right)) 0
+        calc(@appBarPaddingX + var(--smwb-appbar-wc-left));
+    }
+  }
   &__inner {
     display: flex;
     align-items: center;
@@ -52,6 +136,12 @@
     gap: @appBarActionsGap;
     white-space: nowrap;
   }
+  // The title may be a heading (`titleAs`): drop the UA margins and font so it
+  // looks the same as the div.
+  &__left__title {
+    margin: 0;
+    font: inherit;
+  }
   &__right {
     white-space: nowrap;
   }
@@ -74,6 +164,24 @@
   }
 }
 
+// Overlays opened from a `variant="window"` bar are portaled to `<body>`, outside the bar's own subtree, but
+// Electron hit-tests drag regions by geometry: a dropdown drawn over the bar would be unclickable. `no-drag`
+// is ignored outside app windows, so this is harmless for every other page. The library's own full-screen
+// portals are listed by class because they carry no `data-smwb-overlay-layer`: a lightbox opened over the top
+// of the bar would otherwise stay a drag region, so a backdrop click there would drag the window instead of
+// closing it.
+[data-smwb-overlay-layer],
+.smwb-menu,
+.smwb-tooltip,
+.smwb-snackbars,
+.smwb-chat-attachment-image__overlay,
+.smwb-image-modal__overlay,
+.smwb-thumb-card__preview,
+.smwb-chat-shell {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
 .smwb-appbar_color-primary {
   background-color: var(--smui-primaryColor);
   color: var(--smui-onPrimaryColor);

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

@@ -33,14 +33,17 @@
   &.smwb-small {
     font-size: @smallButtonFontSize;
     padding: @buttonPaddingSmall;
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm);
   }
   &.smwb-medium {
     font-size: @mediumButtonFontSize;
     padding: @buttonPaddingMedium;
+    min-height: var(--smui-control-h-md, @smui-control-h-md);
   }
   &.smwb-large {
     font-size: @largeButtonFontSize;
     padding: @buttonPaddingLarge;
+    min-height: var(--smui-control-h-lg, @smui-control-h-lg);
   }
 
   &.smwb-contained {
@@ -52,7 +55,10 @@
       }
       &:hover {
         background-color: var(--smui-buttonContainedHoverBg);
-        box-shadow: 0 4px 22px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        box-shadow:
+          0 4px 22px -2px rgba(0, 0, 0, 0.2),
+          0 2px 2px 0 rgba(0, 0, 0, 0.14),
+          0 1px 5px 0 rgba(0, 0, 0, 0.12);
       }
       &:disabled {
         background-color: var(--smui-buttonDisabledBg);

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

@@ -1,8 +1,12 @@
 .smwb-text-field-checkbox {
-    min-width: 0 !important;
+  min-width: 0 !important;
 }
 
 .smwb-checkbox {
+  // The box's size, which the native input takes too. The medium default is the
+  // selection token (18px), so the component's unstyled rendering is unchanged.
+  @box-size: @smui-selection-md;
+
   &__icon {
     opacity: 0;
     transition: all 0.1s ease-in-out;
@@ -11,8 +15,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;
@@ -23,6 +27,10 @@
     position: relative;
     transition: all 0.2s ease-in-out;
     &::before {
+      // The hover/active halo stays 40px at every size. It is already the box's
+      // own minimum touch target (40px >= the md row height) and scales from the
+      // box's center, so shrinking it for sm would buy nothing and drop the
+      // largest size's halo below the 22px box it is meant to surround.
       width: 40px;
       height: 40px;
       border-radius: @circleBorderRadius;
@@ -36,6 +44,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 +68,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);
@@ -106,4 +128,33 @@
       }
     }
   }
+
+  // The size prop maps the row onto the control-height scale and the box onto the
+  // selection scale. The size class rides the wrapper (the row), so min-height
+  // goes there; the box keeps a hard height, since a checkbox box must not stretch
+  // to fill the row. The hidden native input is resized with the box so its hit
+  // area stays coincident. medium is the component default and repeats today's
+  // 18px box exactly, so unstyled rendering does not change.
+  &_size-small {
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm);
+    .smwb-checkbox__btn,
+    .smwb-checkbox__input {
+      width: @smui-selection-sm;
+      height: @smui-selection-sm;
+    }
+  }
+  // The medium box stays on the base rule's @box-size: @smui-selection-md
+  // read — repeating it here would only raise specificity and break consumer
+  // overrides of the default checkbox.
+  &_size-medium {
+    min-height: var(--smui-control-h-md, @smui-control-h-md);
+  }
+  &_size-large {
+    min-height: var(--smui-control-h-lg, @smui-control-h-lg);
+    .smwb-checkbox__btn,
+    .smwb-checkbox__input {
+      width: @smui-selection-lg;
+      height: @smui-selection-lg;
+    }
+  }
 }