@reliability-design/web 1.4.10 → 1.4.11

package/CHANGELOG.md

@@ -35,10 +35,11 @@ Paired releases: `@reliability-design/angular` 1.5.0, which now requires web `^1
 - **`rel-tab` `orientation="vertical"`** — the tab list sits in a column beside the panel (`--rel-tab-list-width`), with `aria-orientation="vertical"`, tabs 24px apart along a rule on the list's inline-start edge with the active bar on that edge, and Up / Down instead of Left / Right. Long labels wrap; no built-in breakpoint (switch to horizontal on small screens).
 - **`rel-tab` `icon-placement="top"`** — stacks each tab's icon above its label, with the badge beside the label; stacked tabs are 76 / 64 / 52px tall at large / medium / small. Works in both orientations.
 - **`rel-signature-pad`** (new, status stable) — captures a handwritten signature with a mouse, pen or finger on a 160px pad that fills its container (`--rel-signature-pad-height`; focus, drawing and error draw a 2px border inside the pad edge, and focus in error adds a 2px danger ring outside), or a typed name: the "Type your name instead" link switches to `mode="type"` (Poppins italic), the keyboard alternative to drawing (WCAG 2.2 SC 2.5.7). `value` is a trimmed PNG data URL (2×, black ink in every theme) and the **form value**: the pad is form-associated and submits it under `name`, is invalid (`valueMissing`) when `required` and empty, empties on form reset and comes back on state restore (decision 0006; switch, checkbox and radio still set no form value). Also `strokes` (the vector record), `signedAt`, `typed-name`, `toDataURL(type)`, `toSVG()`, `isEmpty()`, `undo()` / `clear()`. Undo is stroke level and also reverses Clear, so Clear asks no confirmation; Ctrl/Cmd+Z undoes inside the field; the helper row shows "Signed {date, time, time zone}". Label, `helper-text`, `error` / `error-message`, `disabled` and `readonly` work as on `rel-textfield`. `rel-change` (`{ value, strokes, signedAt, mode }`, user actions only) and `rel-begin` / `rel-end`.
-- **`rel-split-button`** (new, status stable) — the Combo Button: a main action and a chevron that opens a `rel-menu` of `items` (`{ value, label, icon?, disabled? }`) below the pill, end-aligned and at least as wide. Both segments are drawn with `rel-button`'s own styles, so `variant` (primary | secondary, the default | ghost | static), `tone` (neutral | brand | destructive) and `size` (32 / 40 / 48px) match `rel-button` exactly, including hover, pressed, focus and disabled; outer corners keep the pill radius and the seam is square. While the menu is open the chevron keeps its pressed look. Also `disabled`, `loading` (a spinner only on the main action, which keeps its accessible name; the chevron is disabled), `icon-only` with `aria-label` (the main action is a square too), `icon`, `menu-label` (the chevron's name, default "More options") and `open`. The host's `click` is the main action; `rel-select` (`{ value, item }`) and `rel-open-change` (`{ open }`). WAI-ARIA menu button: two Tab stops; Enter, Space or Down opens on the first entry and Up on the last; Escape or a choice returns focus to the chevron; Tab closes; a mouse open shows no ring. Divider: its own 1px column, in the outline border (secondary; the hover colour while the main action is hovered or pressed), the label colour (primary), white (static) or `--rel-border-subtle` (ghost).
+- **`rel-split-button`** (new, status stable) — the Combo Button: a main action and a chevron that opens a `rel-menu` of `items` (`{ value, label, icon?, disabled? }`) below the pill, end-aligned and at least as wide. Both segments are drawn with `rel-button`'s own styles, so `variant` (primary | secondary, the default | ghost | static), `tone` (neutral | brand | destructive) and `size` (32 / 40 / 48px) match `rel-button` exactly, including hover, pressed, focus and disabled; outer corners keep the pill radius and the seam is square. While the menu is open the chevron keeps its pressed look. Also `disabled`, `loading` (a spinner only on the main action, which keeps its accessible name; the chevron is disabled), `icon-only` with `aria-label` (the main action is a square too), `icon`, `menu-label` (the chevron's name, default "More options") and `open`. The host's `click` is the main action; `rel-select` (`{ value, item }`) and `rel-open-change` (`{ open }`). WAI-ARIA menu button: two Tab stops; Enter, Space or Down opens on the first entry and Up on the last; Escape or a choice returns focus to the chevron; Tab closes; a mouse open shows no ring. Divider: its own 1px column, in the outline border (secondary; the hover colour while either segment is hovered or pressed, or the menu is open), the label colour (primary), white (static) or `--rel-border-subtle` (ghost).
 - **`rel-popover` `has-popup`** (property `hasPopup`) — the value written to the trigger's `aria-haspopup`: `dialog` (default, unchanged), or `menu` for a panel holding a `rel-menu` (also `listbox`, `tree`, `grid`, `true`).
 - **`rel-menu` item icons and `focusItem(index)`** — `MenuItem.icon` draws a `rel-icon` before the label on `list` and `arrow` rows (20 / 18 / 16px by size, hidden from screen readers); `focusItem()` moves the virtual focus (`aria-activedescendant`), clamped, a negative index counting from the end, for menu buttons that open on the last row.
 - **`createGridNavigation(grid, options)`** (a utility, exported from the main entry) — the WAI-ARIA grid keyboard for plain markup (`[role="row"]` > `[role="gridcell"]`): a roving Tab stop, arrows, Home / End, Ctrl+Home / Ctrl+End, PageUp / PageDown with `pageSize`, right-to-left, `disabledCells` (`"focus"`, the default, or `"skip"`), `wrap`, `onActivate` (Enter, Space, click), `onMove`, a custom `resolve` key map, and a handle with `active`, `focusCell()`, `refresh()` and `destroy()`. Framework-free, so recipes can use it; the Rate Calendar recipe does.
+- **`@reliability-design/web/ag-grid.css`** — an AG Grid theme (v33+ with the Theming API; 32.2–32.3 when the app passes `theme: themeQuartz`) that maps AG Grid's theme params to our tokens, light and dark. Scope it with a `.rel-data-table` wrapper; set `data-density` to `dense` (40px rows) or `comfortable` (64px) on it (default 56px, header 48px). Row-state classes for `rowClassRules`: `rel-data-table__row--error` (wins over selected) and `rel-data-table__row--disabled`. Sortable headers show the unsorted icon at rest, as `unSortIcon: true` would. AG Grid itself is not a dependency. Docs: the Data Table recipe.
 
 ### Changed
 
@@ -119,6 +120,11 @@ Paired releases: `@reliability-design/angular` 1.5.0, which now requires web `^1
 - **`rel-popover` panel sat at a stale spot until the next frame:** it is now placed in the same task that opens it. Before, for one frame it stayed at its previous position, or at 0,0 on a first open; nothing painted there, but a quick pointer release could land on the unplaced panel instead of the trigger.
 - **`rel-button` `variant="static" icon-only` was not square:** the static style's 40 / 50 / 60px minimum width outranked the icon-only reset, so a static icon-only button was 40 / 50 / 60 wide instead of a 32 / 40 / 48 square. Static label buttons keep their minimum width; no other style changes.
 - **`rel-popover` panel text followed the `align` attribute:** Chromium maps an element's `align` attribute to `text-align`, and rel-popover reflects `align` (default `center`), so every popover centred its panel text (and its trigger's inline content) and `align="end"` right-aligned it. The host now takes its parent's alignment, as if the attribute were not there. If you relied on the centring, set `text-align` on your panel content.
+- **`rel-pagination` `type="page-select"`: the dropdown squeezed its rows.** The panel was as narrow as the 72px trigger, so the search box shrank to its icon and, with a classic scrollbar, the selected row showed only its check, not the number. The page list now has no search box (typing a page number still jumps to it) and is at least as wide as the longest number, the check and a scrollbar need. The rows-per-page dropdown had the same squeeze (the selected "20" showed as "2…") and gets the same floor. The width comes from a new opt-in hook on `rel-select`, **`--rel-select-panel-min-width`** (unset by default: the panel still matches the trigger).
+- **`rel-select` / `rel-autocomplete` multi-select logged a deprecation notice the app never caused:** their option checkboxes used the deprecated `supportingtext` attribute spelling, so every multi-select logged `[rel-checkbox] "supportingtext" is deprecated`. They now set the property.
+- **`rel-signature-pad` focused in error drew seams:** the 2px danger edge inside the pad was a border plus a clipped pseudo element, and focus added an outline outside, so light gaps showed between three red bands (clearest when the browser is zoomed). The edge is now one outline, 2px inside at rest and 2px inside plus 2px outside when focused. Same look, no seams.
+- **`rel-split-button` secondary: the chevron showed three dark sides.** Hovered, pressed or open, the chevron's border darkened but the divider beside it didn't, while the main action's hover darkens the divider too. The divider now follows either segment, and the open menu.
+- **`rel-pagination` extended layout lost its ellipsis between 480 and 768px.** In that width it keeps only the first, last and current ±1 pages but also hid every "…", so 5 pages on page 1 read "1 2 5" with nothing between 2 and 5 (and 20 pages on page 10 read "1 9 10 11 20"). A "…" now marks each gap that width opens; a gap of a single page shows that page instead.
 
 ### Known issues
 

package/custom-elements.json

@@ -8664,7 +8664,7 @@
                 },
                 {
                   "keys": "Typing (page dropdown open)",
-                  "action": "Filters the page list; the first match is highlighted"
+                  "action": "Moves the highlight to the next page that starts with the digits typed within half a second (2 then 5 for page 25); Enter picks it"
                 }
               ],
               "source": "src/components/rel-pagination/README.md#accessibility"
@@ -11259,6 +11259,10 @@
               "description": "Panel box-shadow",
               "name": "--rel-select-menu-shadow"
             },
+            {
+              "description": "Smallest width of the dropdown panel. The panel is as wide as the trigger; set this when the trigger is narrower than its options need (a scrollbar included), and the panel grows past the trigger's right edge instead of squeezing them. Unset by default, so the panel matches the trigger. New in 1.5.0.",
+              "name": "--rel-select-panel-min-width"
+            },
             {
               "description": "Border colour of the search field inside the panel",
               "name": "--rel-select-search-border"

package/dist/components/rel-pagination/README.md

@@ -123,7 +123,7 @@ Without `show-rows-per-page` there is no rows-per-page selector, and every type
 | `Tab` / `Shift+Tab` | Move between the prev button, page chips (or the page dropdown) and next button, then the rows-per-page dropdown |
 | `Enter` / `Space` | Activate the focused button (native behaviour); on a dropdown, open it |
 | `ArrowDown` / `ArrowUp`, `Enter`, `Escape` (dropdown open) | Move the highlight, pick the highlighted value, close without picking (rel-select's keyboard model) |
-| Typing (page dropdown open) | Filters the page list; the first match is highlighted |
+| Typing (page dropdown open) | Moves the highlight to the next page that starts with the digits typed within half a second (2 then 5 for page 25); Enter picks it |
 
 The page chips and nav buttons have no arrow-key navigation; they are regular tab stops.
 
@@ -133,7 +133,7 @@ The page chips and nav buttons have no arrow-key navigation; they are regular ta
 - **Page count.** `totalPages` wins when greater than `0`; otherwise the count is `ceil(totalItems / perPage)`. With neither set the element renders no page chips and both nav buttons disabled.
 - **Controlled vs uncontrolled.** With `page` unset the element tracks the current page itself starting at `defaultPage`. Once `page` is set it stays on that page until the parent changes it — clicking only emits `rel-change`.
 - **Ellipsis window.** Up to 7 pages render in full. Beyond that: the first 5 + last near the start, first + last 5 near the end, otherwise first, current ±1 and last, with `…` between. Far first/last chips abbreviate large numbers (`10000` → `10k`, `2500000` → `2.5M`); chips inside the window are never abbreviated.
-- **Responsive.** `extended` uses a container query on the host: between 480px and 768px only first, last and current ±1 stay visible; under 480px the whole control swaps to the compact layout (media-query fallback for browsers without container queries). The `label` part belongs to the `count-text` layout, not to the "Viewing page" caption.
+- **Responsive.** `extended` uses a container query on the host: between 480px and 768px only first, last and current ±1 stay visible, with `…` wherever that hides two or more pages (a single hidden page stays visible instead); under 480px the whole control swaps to the compact layout (media-query fallback for browsers without container queries). The `label` part belongs to the `count-text` layout, not to the "Viewing page" caption.
 - **`hrefTemplate`** is accepted but currently unused — chips are always buttons, not links. Perform navigation in the `rel-change` handler.
 - **`rel-change` is not fired** for the current page, out-of-range pages, or while `disabled`.
 - **Page select.** The dropdown lists every page. Above 1,000 pages it lists a window of 1,000 around the current page plus the first and last, so the list stays fast. In controlled mode the dropdown snaps back to `page` until the parent commits the new one.

package/dist/components/rel-select/README.md

@@ -139,6 +139,7 @@ Set these on the host (or an ancestor) to customise the element without touching
 | `--rel-select-menu-shadow` | `var(--rel-shadows-md)` | Panel box-shadow |
 | `--rel-select-option-hover` | `var(--rel-action-overlay-hover)` | Background of the hovered / keyboard-highlighted / selected option and Select-all row |
 | `--rel-select-option-pressed` | `var(--rel-action-overlay-pressed)` | Background of an option row while it is being pressed |
+| `--rel-select-panel-min-width` | `0px` | Smallest width of the dropdown panel. The panel is as wide as the trigger; set this when the trigger is narrower than its options need (a scrollbar included), and the panel grows past the trigger's right edge instead of squeezing them. Unset by default, so the panel matches the trigger. New in 1.5.0. |
 | `--rel-select-placeholder-color` | `var(--rel-text-placeholder)` | Placeholder colour (trigger, resting floating label, search field, empty-list message) |
 | `--rel-select-placeholder-disabled-color` | `var(--rel-text-caption)` | Placeholder colour when disabled |
 | `--rel-select-radius` | `var(--rel-border-radius-xs)` | Trigger corner radius when `border="rounded"` |

package/dist/index.d.mts

@@ -2540,6 +2540,7 @@ type SelectOption = string | SelectOptionObject;
  * @cssprop --rel-select-menu-border - Panel border colour. The panel is borderless by design and only draws this on dark surfaces, where its shadow alone can't separate it from the page.
  * @cssprop --rel-select-menu-radius - Panel corner radius
  * @cssprop --rel-select-menu-shadow - Panel box-shadow
+ * @cssprop --rel-select-panel-min-width - Smallest width of the dropdown panel. The panel is as wide as the trigger; set this when the trigger is narrower than its options need (a scrollbar included), and the panel grows past the trigger's right edge instead of squeezing them. Unset by default, so the panel matches the trigger. New in 1.5.0.
  * @cssprop --rel-select-search-border - Border colour of the search field inside the panel
  * @cssprop --rel-select-divider - Hairline under the search field, the Select-all row and every option row
  * @cssprop --rel-select-option-hover - Background of the hovered / keyboard-highlighted / selected option and Select-all row
@@ -2802,6 +2803,11 @@ declare class RelPagination extends RelElement {
     /** Pages offered by the page-select dropdown: every page, or for very long
         ranges a window around the current page plus the first and last. */
     private pageOptions;
+    /** Both dropdowns' panels may be wider than their 72px trigger: the longest
+        value (`largest`), the row's 12px side padding, the 16px gap, the 18px
+        check and 20px kept for a classic scrollbar (the page list scrolls past
+        9 pages). */
+    private panelMinWidth;
     private stopInner;
     private onPageSelect;
     private onRowsPerPage;

package/dist/index.d.ts

@@ -2540,6 +2540,7 @@ type SelectOption = string | SelectOptionObject;
  * @cssprop --rel-select-menu-border - Panel border colour. The panel is borderless by design and only draws this on dark surfaces, where its shadow alone can't separate it from the page.
  * @cssprop --rel-select-menu-radius - Panel corner radius
  * @cssprop --rel-select-menu-shadow - Panel box-shadow
+ * @cssprop --rel-select-panel-min-width - Smallest width of the dropdown panel. The panel is as wide as the trigger; set this when the trigger is narrower than its options need (a scrollbar included), and the panel grows past the trigger's right edge instead of squeezing them. Unset by default, so the panel matches the trigger. New in 1.5.0.
  * @cssprop --rel-select-search-border - Border colour of the search field inside the panel
  * @cssprop --rel-select-divider - Hairline under the search field, the Select-all row and every option row
  * @cssprop --rel-select-option-hover - Background of the hovered / keyboard-highlighted / selected option and Select-all row
@@ -2802,6 +2803,11 @@ declare class RelPagination extends RelElement {
     /** Pages offered by the page-select dropdown: every page, or for very long
         ranges a window around the current page plus the first and last. */
     private pageOptions;
+    /** Both dropdowns' panels may be wider than their 72px trigger: the longest
+        value (`largest`), the row's 12px side padding, the 16px gap, the 18px
+        check and 20px kept for a classic scrollbar (the page list scrolls past
+        9 pages). */
+    private panelMinWidth;
     private stopInner;
     private onPageSelect;
     private onRowsPerPage;

package/dist/index.js

@@ -5112,7 +5112,7 @@ ${item.supportingText}` : import_lit9.nothing;
                           size="${this.optionCheckboxSize}"
                           label="${item.label}"
                           icon="${item.icon}"
-                          supportingtext="${item.supportingText}"
+                          .supportingText="${item.supportingText ?? ""}"
                           status="${this.selectedValues.includes(item.value) ? "checked" : "unchecked"}"
                         ></rel-checkbox>
                       </div>` : import_lit9.html`
@@ -17328,13 +17328,14 @@ var RelSelect = class extends RelElement {
       if (top + c.height > window.innerHeight - 8) {
         top = Math.max(8, t.top - c.height - 8);
       }
+      this.listboxEl.style.width = `${t.width}px`;
+      const w = Math.max(t.width, this.listboxEl.getBoundingClientRect().width);
       let left = t.left;
-      if (left + t.width > window.innerWidth - 8) {
-        left = Math.max(8, window.innerWidth - t.width - 8);
+      if (left + w > window.innerWidth - 8) {
+        left = Math.max(8, window.innerWidth - w - 8);
       }
       this.listboxEl.style.top = `${top}px`;
       this.listboxEl.style.left = `${left}px`;
-      this.listboxEl.style.width = `${t.width}px`;
       const applied = this.listboxEl.getBoundingClientRect();
       top -= applied.top - top;
       left -= applied.left - left;
@@ -18018,7 +18019,7 @@ ${option.supportingText}` : import_lit31.nothing;
                         size="${this.optionCheckboxSize}"
                         label="${option.label}"
                         icon="${option.icon}"
-                        supportingtext="${option.supportingText}"
+                        .supportingText="${option.supportingText ?? ""}"
                         status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
                       ></rel-checkbox>
                     </div>
@@ -18650,6 +18651,8 @@ RelSelect.styles = import_lit31.css`
       margin: 0;
       padding: 0;
       width: auto;
+      /* Opt-in floor under the trigger-width panel (unset: 0, no change). */
+      min-width: var(--rel-select-panel-min-width, 0px);
       height: auto;
       color: inherit;
       box-sizing: border-box;
@@ -19281,19 +19284,34 @@ var RelPagination = class extends RelElement {
     const pages = this.generatePageNumbers();
     const current = this.activePage;
     const total = this.computedTotalPages;
+    const narrowShown = (p) => p !== -1 && (p === 1 || p === total || Math.abs(p - current) <= 1);
+    const narrowGapAt = /* @__PURE__ */ new Set();
+    const narrowKeep = /* @__PURE__ */ new Set();
+    for (let i = 0; i < pages.length; ) {
+      if (narrowShown(pages[i])) {
+        i++;
+        continue;
+      }
+      let end = i;
+      while (end < pages.length && !narrowShown(pages[end])) end++;
+      if (end - i === 1 && pages[i] !== -1) narrowKeep.add(pages[i]);
+      else narrowGapAt.add(i);
+      i = end;
+    }
     return import_lit32.html`
       <div part="base" class="pag-root" role="navigation" aria-label="${this.ariaLabel}">
         <div class="pag-stack">
           ${this.renderNavBtn("prev")}
           <div class="pag-numbers">
-            ${pages.map((p) => {
-      if (p === -1) return import_lit32.html`<span class="pag-ellipsis">...</span>`;
+            ${pages.map((p, i) => {
+      const gap = narrowGapAt.has(i) ? import_lit32.html`<span class="pag-ellipsis pag-ellipsis-narrow">...</span>` : import_lit32.nothing;
+      if (p === -1) return import_lit32.html`${gap}<span class="pag-ellipsis">...</span>`;
       const isNear = Math.abs(p - current) <= 1;
       const isEdge = p === 1 || p === total;
       const label = isEdge && !isNear ? this.formatPageLabel(p) : String(p);
-      return import_lit32.html`<button
+      return import_lit32.html`${gap}<button
                 type="button"
-                class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
+                class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""} ${narrowKeep.has(p) ? "keep" : ""}"
                 aria-label="Page ${p}"
                 title="${label === String(p) ? import_lit32.nothing : `Page ${p}`}"
                 aria-current="${p === current ? "page" : "false"}"
@@ -19352,6 +19370,13 @@ var RelPagination = class extends RelElement {
     if (to < total) pages.push(total);
     return pages.map(String);
   }
+  /** Both dropdowns' panels may be wider than their 72px trigger: the longest
+      value (`largest`), the row's 12px side padding, the 16px gap, the 18px
+      check and 20px kept for a classic scrollbar (the page list scrolls past
+      9 pages). */
+  panelMinWidth(largest) {
+    return `--rel-select-panel-min-width: calc(${String(Math.max(1, largest)).length}ch + 2 * var(--rel-spacing-sm) + var(--rel-spacing-md) + 38px)`;
+  }
   /* The inner rel-select fires its own composed `changed` / `rel-change`
      ({ value }). They must not reach the page as if the pagination had fired
      them, so they stop at the select. */
@@ -19389,7 +19414,8 @@ var RelPagination = class extends RelElement {
           size="medium"
           label-style="none"
           field-aria-label="Page (of ${total})"
-          search-placeholder="Go to page"
+          no-search
+          style=${this.panelMinWidth(total)}
           .options=${this.pageOptions(total, current)}
           .selected=${(0, import_live3.live)(String(current))}
           .state=${this.disabled ? "disabled" : "default"}
@@ -19412,6 +19438,7 @@ var RelPagination = class extends RelElement {
           label-style="none"
           field-aria-label="${this.rowsPerPageLabel}"
           no-search
+          style=${this.panelMinWidth(Math.max(0, ...values.map(Number)))}
           .options=${values}
           .selected=${(0, import_live3.live)(String(this.perPage))}
           .state=${this.disabled ? "disabled" : "default"}
@@ -19739,12 +19766,22 @@ RelPagination.styles = import_lit32.css`
       }
     }
 
-    /* 480–768px: shrink the number window to current ±1 plus first/last */
+    /* The ellipsis that marks a gap only the 480–768px window opens. */
+    .pag-ellipsis.pag-ellipsis-narrow {
+      display: none;
+    }
+
+    /* 480–768px: shrink the number window to current ±1 plus first/last, with
+       an ellipsis wherever that hides more than one page */
     @container (min-width: 480px) and (max-width: 768px) {
-      .pag-page-btn:not(.near):not(.edge):not([aria-current="page"]),
+      .pag-page-btn:not(.near):not(.edge):not(.keep):not([aria-current="page"]),
       .pag-ellipsis {
         display: none;
       }
+
+      .pag-numbers .pag-ellipsis.pag-ellipsis-narrow {
+        display: inline-flex;
+      }
     }
 
     /* <480px: swap to the compact layout automatically */
@@ -19768,10 +19805,14 @@ RelPagination.styles = import_lit32.css`
       }
 
       @media (min-width: 480px) and (max-width: 768px) {
-        .pag-page-btn:not(.near):not(.edge):not([aria-current="page"]),
+        .pag-page-btn:not(.near):not(.edge):not(.keep):not([aria-current="page"]),
         .pag-ellipsis {
           display: none;
         }
+
+        .pag-numbers .pag-ellipsis.pag-ellipsis-narrow {
+          display: inline-flex;
+        }
       }
 
       @media (max-width: 479px) {
@@ -23360,27 +23401,23 @@ RelSignaturePad.styles = import_lit42.css`
       border-color: var(--rel-border-strong);
     }
 
-    /* Error: the 2px danger border inside, at rest too, drawn by a pseudo
-       element's border (borders paint in forced colours) so the outline stays
-       free for focus: focused in error adds a 2px danger ring outside, so
-       focus stays visible (WCAG 2.4.7). */
+    /* Error: the 2px danger border inside, at rest too, drawn as ONE outline
+       pulled 2px in like focus (outlines paint in forced colours). Focused in
+       error, the same outline widens to 4px from 2px inside: a 2px danger
+       ring outside on top of the inside edge, so focus stays visible
+       (WCAG 2.4.7). One layer, so no seams between rings at any zoom (a
+       border plus a pseudo element clipped by the pad's overflow plus an
+       outline drew three bands with light gaps between them). */
     .field.error .pad {
       border-color: var(--rel-border-danger);
-    }
-
-    .field.error .pad::after {
-      content: "";
-      position: absolute;
-      inset: -1px;
-      border: 2px solid var(--rel-border-danger);
-      border-radius: inherit;
-      pointer-events: none;
+      outline: 2px solid var(--rel-border-danger);
+      outline-offset: -2px;
     }
 
     .field.error .pad:focus,
     .field.error.typing .pad:focus-within {
-      outline-color: var(--rel-border-danger);
-      outline-offset: 0;
+      outline: 4px solid var(--rel-border-danger);
+      outline-offset: -2px;
     }
 
     /* Read-only: the edge on the page colour, one step fainter than subtle. */
@@ -25020,7 +25057,8 @@ RelSplitButton.styles = [RelButton.styles, import_lit45.css`
        between the segments, so the pill is action + 1 + trigger wide. The
        outlined segments drop their inner borders. Colours:
        - secondary: the tone's outline border, and the outline's hover colour
-         while the main action is hovered or pressed (decision Combo-G);
+         while either segment is hovered or pressed, or the menu is open
+         (decision Combo-G, extended to the chevron 2026-10-27);
        - primary: the segment's label colour at full strength (Combo-B);
        - static: the static label colour (white);
        - ghost (no counterpart in the sandbox): --rel-border-subtle. */
@@ -25055,6 +25093,17 @@ RelSplitButton.styles = [RelButton.styles, import_lit45.css`
       background: var(--rel-action-danger-border-outline-hover);
     }
 
+    /* The same for the chevron (Combo-G extended to the trigger, user
+       2026-10-27): hovered, pressed or open, the divider takes its border
+       colour, so the chevron shows four dark sides like the main action. */
+    :host([variant="secondary"]) .divider:has(+ rel-popover button.toggle:is(:hover, :active, .is-open):not(:disabled)) {
+      background: var(--rel-action-neutral-border-outline-hover);
+    }
+
+    :host([variant="secondary"][tone="destructive"]) .divider:has(+ rel-popover button.toggle:is(:hover, :active, .is-open):not(:disabled)) {
+      background: var(--rel-action-danger-border-outline-hover);
+    }
+
     :host([variant="primary"]) .divider {
       background: var(--rel-action-neutral-label-icons-fill-inverse);
     }