@apliteni/apliteni-ui 0.124.0 → 0.124.2

package/guidelines/colour-and-theming.md

@@ -70,3 +70,15 @@
 **Except:** The sidebar rail's current row. Its mark may be neither an accent nor an edge — an outline there means focus — and in the page shell the rail is the card surface already. It takes the quiet fill a rung off its rail, label and all. Artur, r34 of [#475](https://github.com/apliteni/apliteni-ui/issues/475).
 
 **Except:** A status chip carries a soft fill. Where its tone reports no verdict it takes a light tint of muted ink that leaves the panel in one direction per theme, so the neutral tones read as the same family as the coloured ones.
+
+## Mark selection in forced colours
+
+<!-- rule: selected-forced-colours -->
+
+**Rule:** In forced colours, fill a selected item with the highlight colour and its label with the highlight text colour.
+
+**Why:** The mode replaces author backgrounds. A specimen cannot switch it on, so this rule draws no pair.
+
+**Do:** Ring a focused selected item in the page text colour.
+
+**Don't:** Mark selection with an outline.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.124.0",
+  "version": "0.124.2",
   "workspaces": [
     "react"
   ],

package/src/components/dropdown.js

@@ -637,7 +637,10 @@ function ddSizeHeight(dd, panel) {
 /** Fit a panel again where it now is, whichever placement it uses. */
 function ddPlace(dd) {
   const panel = dd.__ddPanel || ddPanelOf(dd);
-  if (dd.__ddPanel) positionPortalPanel(dd, dd.__ddPanel);
+  if (dd.__ddPanel) {
+    ddResolveDirection(dd, panel);
+    positionPortalPanel(dd, panel);
+  }
   else ddFitViewport(dd, ddPanelOf(dd));
   ddSizeHeight(dd, panel);
 }
@@ -700,16 +703,36 @@ function ddCancelClose(dd, panel) {
   else panel?.classList?.remove('is-closing');
 }
 
-// `auto` is the only direction the wiring decides; `up` and the default are the
-// panel's own class, set once at render. Flip only when below is too tight AND
-// above is roomier, so a panel that fits nowhere still opens the way it says.
+// Keep the configured side separate from the side resolved for this opening.
 function ddResolveDirection(dd, panel) {
-  if (dd.getAttribute('data-dropdown-direction') !== 'auto') return;
+  const auto = dd.getAttribute('data-dropdown-direction') === 'auto';
+  if (!auto && !dd.__ddPanel) return;
   const trigger = dd.querySelector('[data-dropdown-trigger]');
   if (!trigger || typeof trigger.getBoundingClientRect !== 'function') return;
   const t = trigger.getBoundingClientRect();
   const below = ddViewOf(panel).innerHeight - t.bottom;
-  panel.classList.toggle('is-up', below < panel.offsetHeight + ddGap(panel) && t.top > below);
+  if (auto) {
+    ddSetUp(panel, below < panel.offsetHeight + ddGap(panel) && t.top > below);
+    return;
+  }
+  const up = dd.__ddPreferredUp;
+  const room = (up ? t.top : below) - ddGap(panel);
+  const opposite = (up ? below : t.top) - ddGap(panel);
+  // Short content or a smaller consumer cap needs less than the usual floor.
+  const needed = Math.min(ddMin(panel), panel.offsetHeight);
+  ddSetUp(panel, room < needed && opposite > room ? !up : up);
+}
+
+/* Change the side without a transition: the shut panel's transform would otherwise
+ * be running when `is-open` arrives, and the open would retarget it from the wrong
+ * side. */
+function ddSetUp(panel, up) {
+  if (panel.classList.contains('is-up') === up) return;
+  const held = panel.style.transition;
+  panel.style.transition = 'none';
+  panel.classList.toggle('is-up', up);
+  ddViewOf(panel).getComputedStyle(panel).transform;
+  panel.style.transition = held;
 }
 
 /** The shift a panel is already carrying, the one ddFitViewport() wrote. Taken
@@ -1057,6 +1080,7 @@ export function wireDropdown(root = document) {
       sweepOrphanPanels(host);
       panel.setAttribute('data-dropdown-portal', '');
       panel.__ddOwner = dd;
+      dd.__ddPreferredUp = panel.classList.contains('is-up');
       dd.__ddPanel = panel;
       host.appendChild(panel);
       if (dd.classList.contains('open')) {

package/src/styles/command-palette.css

@@ -340,3 +340,20 @@
 @media (prefers-reduced-motion: reduce) {
   .ui-cmdk.is-open * { transition: none !important; }
 }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
+@media (forced-colors: active) {
+  .ui-cmdk__item.is-active { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; --ring: var(--ring-width) solid CanvasText; }
+  .ui-cmdk__item.is-active .ui-cmdk__label,
+  .ui-cmdk__item.is-active .ui-cmdk__ic,
+  .ui-cmdk__item.is-active .ui-cmdk__desc,
+  .ui-cmdk__item.is-danger.is-active .ui-cmdk__label,
+  .ui-cmdk__item.is-danger.is-active .ui-cmdk__ic { color: HighlightText; }
+  .ui-cmdk--roomy .ui-cmdk__item.is-active .ui-cmdk__ic { background: none; }
+  .ui-cmdk__item.is-active .ui-cmdk__badge { background: HighlightText; color: Highlight; }
+  /* Shortcut caps inherit the adjust, so they take the pair too: the item's ink on its fill, with an ink edge. */
+  .ui-cmdk__item.is-active .ui-cmdk__key { background: Highlight; color: HighlightText; border-color: HighlightText; }
+}

package/src/styles/layout.css

@@ -119,7 +119,7 @@
    resting step. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1706 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1708 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
@@ -708,3 +708,41 @@
 .ui-section-head { text-align: center; max-width: var(--panel-lg); margin: 0 auto clamp(40px, 6vh, 64px); }
 .ui-section-head h2 { color: var(--strong); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
 .ui-section-head p { color: var(--text); font-size: calc(var(--text-lg) - 1px); line-height: 1.6; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. The pair is
+   `!important` so the shell's danger ink and every hover or focus state yield to it. */
+@media (forced-colors: active) {
+  .ui-app__rail .ui-nav__item:is(.is-active, .is-current):not(.is-disabled) { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; --ring: var(--ring-width) solid CanvasText; }
+  .ui-app__rail .ui-nav__item:is(.is-active, .is-current).is-disabled { forced-color-adjust: none; background: GrayText !important; color: Canvas !important; /* muted-ink: state — unavailable control */ }
+  .ui-app__rail .ui-nav__item.is-active:not(.is-disabled)::before { background: Highlight; }
+  .ui-app__rail .ui-nav__item.is-active.is-disabled::before { background: GrayText; }
+  /* A folded row is only an icon strip: the plate carries the fill, so the row paints none. */
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%); /* motion: still — a mark on the current group, centred and not travelling */
+    z-index: -1;
+  }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current:not(.is-active):not(.is-disabled)::before { background: Highlight; }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current.is-disabled:not(.is-active)::before { background: GrayText; }
+  /* The floating name of a selected folded row inherits the row's adjust, so it is painted in system colours. */
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item:is(.is-active, .is-current):is(:hover, :focus-visible) > .ui-nav__label {
+    forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText;
+  }
+}
+@media (forced-colors: active) and (max-width: 720px) {
+  .ui-app .ui-app__rail .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-app .ui-app__rail .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%);
+    z-index: -1;
+  }
+  .ui-app .ui-app__rail .ui-nav__item.is-current:not(.is-active):not(.is-disabled)::before { background: Highlight; }
+  .ui-app .ui-app__rail .ui-nav__item.is-current.is-disabled:not(.is-active)::before { background: GrayText; }
+  .ui-app .ui-app__rail .ui-nav__item:is(.is-active, .is-current):is(:hover, :focus-visible) > .ui-nav__label {
+    forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText;
+  }
+}

package/src/styles/nav.css

@@ -365,3 +365,64 @@ a.ui-nav__crumb:hover { color: var(--strong); background: var(--surface); /* cod
 a.ui-nav__crumb:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-nav__crumb.is-current { color: var(--strong); font-weight: 500; }
 .ui-nav__crumb .ui-nav__ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it.
+   The pair is `!important` because it is the reader's palette: a danger wash, a hover
+   or a focus state must never repaint it. A child of the row inherits the adjust, so
+   each child that paints its own colour is repainted here as well. */
+@media (forced-colors: active) {
+  .ui-nav__item.is-active:not(.is-disabled),
+  .ui-nav__item.is-current:not(.is-disabled),
+  .ui-nav__tab.is-active:not(.is-disabled),
+  .ui-nav--tabs.is-pill .ui-nav__tab.is-active:not(.is-disabled),
+  .ui-nav__crumb.is-current {
+    forced-color-adjust: none;
+    background: Highlight !important;
+    color: HighlightText !important;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  .ui-nav__item.is-active:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__item.is-current:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__tab.is-active:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__crumb.is-current .ui-nav__ic svg { stroke: HighlightText; }
+  .ui-nav__item.is-active .ui-nav__caret,
+  .ui-nav__item.is-current .ui-nav__caret { border-color: currentColor; }
+  .ui-nav__item.is-active:not(.is-disabled) .ui-nav__badge,
+  .ui-nav__item.is-current:not(.is-disabled) .ui-nav__badge,
+  .ui-nav__tab.is-active:not(.is-disabled) .ui-nav__badge {
+    background: HighlightText !important;
+    color: Highlight !important;
+  }
+  /* A selected item that is unavailable must not look live, so it takes the disabled system pair. */
+  .ui-nav__item.is-active.is-disabled,
+  .ui-nav__item.is-current.is-disabled,
+  .ui-nav__tab.is-active.is-disabled {
+    forced-color-adjust: none;
+    background: GrayText !important;
+    color: Canvas !important; /* muted-ink: state — unavailable control */
+  }
+  .ui-nav__item.is-active.is-disabled .ui-nav__ic svg,
+  .ui-nav__item.is-current.is-disabled .ui-nav__ic svg,
+  .ui-nav__tab.is-active.is-disabled .ui-nav__ic svg { stroke: Canvas; }
+  .ui-nav__item.is-active.is-disabled .ui-nav__badge,
+  .ui-nav__item.is-current.is-disabled .ui-nav__badge,
+  .ui-nav__tab.is-active.is-disabled .ui-nav__badge {
+    background: Canvas !important;
+    color: GrayText !important; /* muted-ink: state — unavailable control */
+  }
+  /* A folded row is only an icon strip: the plate carries the fill, so the row paints none.
+     A current group takes the same plate as the current row it holds. */
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-nav--side.is-collapsed .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%); /* motion: still — a mark on the current group, centred and not travelling */
+    z-index: -1;
+  }
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current):not(.is-disabled)::before { background: Highlight; }
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current).is-disabled::before { background: GrayText; }
+  /* The fill is the one mark, so the underline bar, which would paint the accent inside it, is gone. */
+  .ui-nav--tabs.is-underline .ui-nav__tab.is-active::after { display: none; /* motion: still — the bar is not drawn while the fill marks the tab */ }
+}

package/src/styles/pagination.css

@@ -137,3 +137,22 @@ a.ui-pager__step,
 a.ui-pager__page { color: var(--text); }
 a.ui-pager__step:hover,
 a.ui-pager__page:hover { color: var(--strong); }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
+@media (forced-colors: active) {
+  .ui-pager__page.is-current:not([disabled]) {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  /* A busy pager must not look live, so its current page takes the disabled system colour. */
+  .ui-pager__page.is-current[disabled] {
+    forced-color-adjust: none;
+    background: GrayText;
+    color: Canvas; /* muted-ink: state — unavailable control */
+  }
+}

package/src/styles/segmented.css

@@ -153,11 +153,31 @@
 }
 .ui-seg--underline button.is-active::before,
 .ui-seg--underline button[aria-pressed="true"]::before { opacity: 1; transform: scaleX(1); }
-/* The mode repaints an author colour, so the bar comes back as the labels' own
-   ink. `Highlight` is kept where it is named: one mark the mode cannot flatten. */
+.ui-seg button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+.ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
 @media (forced-colors: active) {
+  .ui-seg button.is-active,
+  .ui-seg button[aria-pressed="true"],
+  .ui-seg button[aria-selected="true"] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  /* The fill is the one mark, so the underline bar, which would paint the accent inside it, is gone. */
   .ui-seg--underline button.is-active::before,
-  .ui-seg--underline button[aria-pressed="true"]::before { background: Highlight; }
+  .ui-seg--underline button[aria-pressed="true"]::before,
+  .ui-seg--underline button[aria-selected="true"]::before { display: none; /* motion: still — the bar is not drawn while the fill marks the choice */ }
+  /* A disabled selected choice must not look live, so it takes the disabled system colour. */
+  .ui-seg button.is-active:disabled,
+  .ui-seg button[aria-pressed="true"]:disabled,
+  .ui-seg button[aria-selected="true"]:disabled {
+    background: GrayText;
+    color: Canvas; /* muted-ink: state — unavailable choice */
+  }
 }
-.ui-seg button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
-.ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }

package/src/styles/topbar.css

@@ -209,7 +209,7 @@
    src/styles/dropdown.css:271 `.ui-dropdown__item:hover`.
    why: docs/foundations.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:1141
+/* The row is a keyboard stop: src/components/dropdown.js:1165
    `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */