@crewlethq/ui 0.76.0 → 0.76.1

package/README.md

@@ -205,6 +205,12 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.76.1
+
+**`SetupWizard`'s row of steps on a phone has a name of its own.** While the row hides steps it takes the keyboard to scroll, as a group named by the new `labels.stepsRow` ("All steps, scrolls sideways"), rather than by `stepsLabel` again, which already names the navigation around it and the list inside it.
+
+**The row's edge fade never dims a focus ring.** The row's ring is drawn by a frame around it (`crewlet-setup-wizard__steps-frame`), which the fade does not reach, and a step that takes focus is scrolled clear of the faded edges, by the fade's width (the row's `scroll-padding-inline`), in either direction.
+
 ## Changes in 0.76.0
 
 **`ChoiceCards`, choices a person compares.** One answer from a few, each a card of the same lines: a picture (`media`), the choice's name (`label`) and its `tag`; one line of `description`; and a few `facts`, one to a line, each a name and a value, with an optional `tone` drawn as a `StatusDot` beside words that say the state. Cards side by side share every line on a CSS subgrid, so their facts stand level; where subgrid is not supported each card is a plain column. A description row is held only when some card has one, and a card without one keeps it empty. `minCardWidth` is the narrowest a card stands (`md`, 20rem, the default, or `lg`, 24rem), which decides how many share a row. The radios are native, so the arrow keys move the choice; each is named by its choice and tag alone and described by the rest of the card. A card that cannot be chosen (`disabled`) stands on the page's ground with a quiet radio and a muted picture, and says why in `disabledReason`, on its last line or, with `disabledReasonAt`, in place of a fact's value, read with the fact's name. A chosen card lays the selected tint over its raised surface inside an edge in the accent's ink. Under forced colours the radio is the platform's own, the chosen card's edge the system's selection colour and an unavailable card the system's disabled ink. The types are `ChoiceCardsProps`, `ChoiceCardOption`, `ChoiceCardFact` and `ChoiceCardsMinWidth`.

package/dist/SetupWizard/SetupWizard.d.ts

@@ -6,6 +6,13 @@ export interface SetupWizardLabels {
     progress: (position: number, total: number) => string;
     /** The disclosure the aside folds into on a phone: "Preview". */
     asideToggle: string;
+    /**
+     * The phone's row of steps while it hides some and takes the keyboard to
+     * scroll: what that stop is, in words of its own. The navigation around it
+     * is already named by `stepsLabel`, and the list inside it too, so the row
+     * repeating that name was the same words three times over.
+     */
+    stepsRow?: string;
 }
 export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'> {
     /** What is being set up: "Set up your brand". The page's heading. */

package/dist/SetupWizard/index.js

@@ -1,4 +1,4 @@
-export { SetupWizard } from '../chunk-X5FKORDM.js';
+export { SetupWizard } from '../chunk-5EFLA6BW.js';
 import '../chunk-RJWO2PC5.js';
 import '../chunk-FPDIHEM4.js';
 import '../chunk-CYQBDZ6M.js';

package/dist/{SetupWizard-2SUMQEWU.css → SetupWizard-Y2PFPBCZ.css}

@@ -309,14 +309,27 @@
    * THE SCROLLER SAYS IT SCROLLS: with its bar hidden, an edge that hides
    * steps fades out, at whichever side has steps beyond it, so a row cut at
    * the screen's edge reads as more to come rather than as the last step.
+   *
+   * THE FADE NEVER DIMS A FOCUS RING. A mask fades everything the element
+   * paints, its own outline included, so the scroller's ring is drawn by the
+   * frame around it, which is not masked. And a pill that takes focus is
+   * scrolled clear of the faded edges, so its ring is never in the fade
+   * either: `scroll-padding-inline` is the fade's own width, which the wizard
+   * reads to place it (SetupWizard.tsx, `clearOfFade`).
    */
-  .crewlet-setup-wizard__steps {
+  .crewlet-setup-wizard__steps-frame {
     --crewlet-setup-wizard-fade: var(--spacing-6);
+
+    min-width: 0;
+  }
+
+  .crewlet-setup-wizard__steps {
     --crewlet-setup-wizard-fade-left: 0px;
     --crewlet-setup-wizard-fade-right: 0px;
 
     min-width: 0;
     overflow-x: auto;
+    scroll-padding-inline: var(--crewlet-setup-wizard-fade);
     overscroll-behavior-x: contain;
     scrollbar-width: none;
     -webkit-mask-image: linear-gradient(
@@ -347,8 +360,20 @@
     --crewlet-setup-wizard-fade-right: var(--crewlet-setup-wizard-fade);
   }
 
-  /* A row that overflows takes the keyboard, so it can be scrolled without a pointer; it draws no edge, so the ring sits inside it. */
+  /*
+   * A row that overflows takes the keyboard, so it can be scrolled without a
+   * pointer. Its ring is the frame's, unmasked, inside the frame's edge, and
+   * the frame's ring is the one that carries the focus in a forced-colours
+   * mode too. The scroller's own outline is transparent only to turn off the
+   * browser's default ring, which would sit under the mask, dimmed, beside
+   * the frame's (transparent rather than none, as the kit's focus check asks
+   * of every focus style).
+   */
   .crewlet-setup-wizard__steps:focus-visible {
+    outline: 2px solid transparent;
+  }
+
+  .crewlet-setup-wizard__steps-frame:has(> .crewlet-setup-wizard__steps:focus-visible) {
     outline: 2px solid var(--color-focus);
     outline-offset: var(--size-focus-ring-inset-offset);
   }

package/dist/{chunk-X5FKORDM.js → chunk-5EFLA6BW.js}

@@ -4,14 +4,15 @@ import { Disclosure } from './chunk-222VILSP.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SetupWizard-2SUMQEWU.css';
+import './SetupWizard-Y2PFPBCZ.css';
 import { useId, useRef, useState, useEffect, useCallback, createElement } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var LABELS = {
   progress: (position, total) => `Step ${position} of ${total}`,
-  asideToggle: "Preview"
+  asideToggle: "Preview",
+  stepsRow: "All steps, scrolls sideways"
 };
 var PHONE = `(width < ${breakpoint.phone})`;
 var STILL_ROW = { overflows: false, left: false, right: false };
@@ -24,6 +25,15 @@ function stepRowOf(scroller) {
   const right = Math.max(...boxes.map((r) => r.right)) > box.right + 0.5;
   return { overflows: scroller.scrollWidth > scroller.clientWidth + 0.5 || left || right, left, right };
 }
+function clearOfFade(scroller, step) {
+  const fade = Number.parseFloat(getComputedStyle(scroller).scrollPaddingInlineStart) || 0;
+  const box = scroller.getBoundingClientRect();
+  const drawn = step.getBoundingClientRect();
+  const pastRight = drawn.right - (box.right - fade);
+  const pastLeft = box.left + fade - drawn.left;
+  if (pastRight > 0) scroller.scrollLeft += pastRight;
+  else if (pastLeft > 0) scroller.scrollLeft -= pastLeft;
+}
 function SetupWizard({
   title,
   headingLevel,
@@ -147,8 +157,10 @@ function SetupWizard({
           phone ? (
             // A ROW THAT OVERFLOWS IS A SCROLLER THE KEYBOARD CAN REACH: it
             // takes focus and a name only while it hides steps, since a pill
-            // that only labels its step takes no focus of its own.
-            /* @__PURE__ */ jsx(
+            // that only labels its step takes no focus of its own. Its focus
+            // ring is drawn by the frame around it, which the edge fade does
+            // not reach (SetupWizard.css).
+            /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__steps-frame", children: /* @__PURE__ */ jsx(
               "div",
               {
                 ref: stepsRef,
@@ -156,10 +168,16 @@ function SetupWizard({
                 "data-fade-left": row.left ? "" : void 0,
                 "data-fade-right": row.right ? "" : void 0,
                 onScroll: measure,
-                ...row.overflows ? { tabIndex: 0, role: "group", "aria-label": stepsLabel } : {},
+                onFocus: (event) => {
+                  const step2 = event.target.closest("li");
+                  if (event.target === event.currentTarget || !step2 || !event.currentTarget.contains(step2)) return;
+                  clearOfFade(event.currentTarget, step2);
+                  measure();
+                },
+                ...row.overflows ? { tabIndex: 0, role: "group", "aria-label": text.stepsRow } : {},
                 children: stepper
               }
-            )
+            ) })
           ) : stepper
         ] }),
         /* @__PURE__ */ jsxs("section", { className: "crewlet-setup-wizard__content", "aria-labelledby": headingId, children: [

package/dist/generated/index.js

@@ -31,13 +31,11 @@ export { TagGroup } from '../chunk-UEOEBOBR.js';
 export { matchesShortcut, useShortcut } from '../chunk-AYHIF6DH.js';
 import '../chunk-73GUXYYE.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-DV5L2GRY.js';
-export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-G4CGDUCP.js';
-export { NavGroup, NavItem, SidebarNav } from '../chunk-WCDPFTJZ.js';
 export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
 export { SelectionBar } from '../chunk-L4HHWG4V.js';
 export { SEND_BUTTON_LABELS, SendButton } from '../chunk-T2GC7UAP.js';
 export { SettingsTable, SettingsTableRow } from '../chunk-WL4TC4YZ.js';
-export { SetupWizard } from '../chunk-X5FKORDM.js';
+export { SetupWizard } from '../chunk-5EFLA6BW.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-Q2T4L6ML.js';
 export { Select } from '../chunk-VK45YJLH.js';
 export { ReviewList } from '../chunk-NKBKQEKS.js';
@@ -48,6 +46,8 @@ import '../chunk-7CSTEH5I.js';
 export { RUN_STATES, RunChip } from '../chunk-GPFYITOF.js';
 export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-DGSK4LLS.js';
 export { SearchTrigger } from '../chunk-ERNT3UTB.js';
+export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-G4CGDUCP.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-WCDPFTJZ.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-Q7N2ATMC.js';
 export { RecordChip, RecordChipList } from '../chunk-BFM5G2Z6.js';
 export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-UYF2B2TH.js';
@@ -232,6 +232,7 @@ export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-QTMUKRTN.js';
 export { EmptyState } from '../chunk-PPUR46MK.js';
 export { Accordion, AccordionItem } from '../chunk-5NJMSYDZ.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-CVKANYHD.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-57AKYFML.js';
 export { Timeline, TimelineItem } from '../chunk-4MJN2KN6.js';
 export { Section } from '../chunk-WFCWPXJN.js';
@@ -245,7 +246,6 @@ export { CHARACTER_COUNT_LABELS, CHARACTER_COUNT_NEAR, CharacterCount, character
 export { DisclosureAnatomy } from '../chunk-IVTQWOXV.js';
 export { Count } from '../chunk-MLDTLZAO.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
-export { ADD_PILL_MS, AddPill } from '../chunk-CVKANYHD.js';
 export { Announcer, announce, useAnnouncer } from '../chunk-2G355KDJ.js';
 export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-UY3FWQWG.js';
 export { useMediaMatch } from '../chunk-RTPQDNW3.js';

package/dist/index.js

@@ -31,13 +31,11 @@ export { TagGroup } from './chunk-UEOEBOBR.js';
 export { matchesShortcut, useShortcut } from './chunk-AYHIF6DH.js';
 import './chunk-73GUXYYE.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-DV5L2GRY.js';
-export { SectionFrame, SectionFrameBody, SectionFrameNav } from './chunk-G4CGDUCP.js';
-export { NavGroup, NavItem, SidebarNav } from './chunk-WCDPFTJZ.js';
 export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { SelectionBar } from './chunk-L4HHWG4V.js';
 export { SEND_BUTTON_LABELS, SendButton } from './chunk-T2GC7UAP.js';
 export { SettingsTable, SettingsTableRow } from './chunk-WL4TC4YZ.js';
-export { SetupWizard } from './chunk-X5FKORDM.js';
+export { SetupWizard } from './chunk-5EFLA6BW.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from './chunk-Q2T4L6ML.js';
 export { Select } from './chunk-VK45YJLH.js';
 export { ReviewList } from './chunk-NKBKQEKS.js';
@@ -48,6 +46,8 @@ import './chunk-7CSTEH5I.js';
 export { RUN_STATES, RunChip } from './chunk-GPFYITOF.js';
 export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from './chunk-DGSK4LLS.js';
 export { SearchTrigger } from './chunk-ERNT3UTB.js';
+export { SectionFrame, SectionFrameBody, SectionFrameNav } from './chunk-G4CGDUCP.js';
+export { NavGroup, NavItem, SidebarNav } from './chunk-WCDPFTJZ.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-Q7N2ATMC.js';
 export { RecordChip, RecordChipList } from './chunk-BFM5G2Z6.js';
 export { REFUSAL_CARD_LABELS, RefusalCard } from './chunk-UYF2B2TH.js';
@@ -232,6 +232,7 @@ export { ARTIFACT_KINDS, ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from './chunk-QTMUKRTN.js';
 export { EmptyState } from './chunk-PPUR46MK.js';
 export { Accordion, AccordionItem } from './chunk-5NJMSYDZ.js';
+export { ADD_PILL_MS, AddPill } from './chunk-CVKANYHD.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from './chunk-57AKYFML.js';
 export { Timeline, TimelineItem } from './chunk-4MJN2KN6.js';
 export { Section } from './chunk-WFCWPXJN.js';
@@ -245,7 +246,6 @@ export { CHARACTER_COUNT_LABELS, CHARACTER_COUNT_NEAR, CharacterCount, character
 export { DisclosureAnatomy } from './chunk-IVTQWOXV.js';
 export { Count } from './chunk-MLDTLZAO.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
-export { ADD_PILL_MS, AddPill } from './chunk-CVKANYHD.js';
 export { Announcer, announce, useAnnouncer } from './chunk-2G355KDJ.js';
 export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from './chunk-UY3FWQWG.js';
 export { useMediaMatch } from './chunk-RTPQDNW3.js';

package/dist/styles.css

@@ -31431,7 +31431,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SetupWizard-2SUMQEWU.css */
+/* SetupWizard-Y2PFPBCZ.css */
 /*
  * SetupWizard: a setup walked step by step on a page of its own
  * (SetupWizard.tsx).
@@ -31743,14 +31743,27 @@ svg.crewlet-select__chevron {
    * THE SCROLLER SAYS IT SCROLLS: with its bar hidden, an edge that hides
    * steps fades out, at whichever side has steps beyond it, so a row cut at
    * the screen's edge reads as more to come rather than as the last step.
+   *
+   * THE FADE NEVER DIMS A FOCUS RING. A mask fades everything the element
+   * paints, its own outline included, so the scroller's ring is drawn by the
+   * frame around it, which is not masked. And a pill that takes focus is
+   * scrolled clear of the faded edges, so its ring is never in the fade
+   * either: `scroll-padding-inline` is the fade's own width, which the wizard
+   * reads to place it (SetupWizard.tsx, `clearOfFade`).
    */
-  .crewlet-setup-wizard__steps {
+  .crewlet-setup-wizard__steps-frame {
     --crewlet-setup-wizard-fade: var(--spacing-6);
+
+    min-width: 0;
+  }
+
+  .crewlet-setup-wizard__steps {
     --crewlet-setup-wizard-fade-left: 0px;
     --crewlet-setup-wizard-fade-right: 0px;
 
     min-width: 0;
     overflow-x: auto;
+    scroll-padding-inline: var(--crewlet-setup-wizard-fade);
     overscroll-behavior-x: contain;
     scrollbar-width: none;
     -webkit-mask-image: linear-gradient(
@@ -31781,8 +31794,20 @@ svg.crewlet-select__chevron {
     --crewlet-setup-wizard-fade-right: var(--crewlet-setup-wizard-fade);
   }
 
-  /* A row that overflows takes the keyboard, so it can be scrolled without a pointer; it draws no edge, so the ring sits inside it. */
+  /*
+   * A row that overflows takes the keyboard, so it can be scrolled without a
+   * pointer. Its ring is the frame's, unmasked, inside the frame's edge, and
+   * the frame's ring is the one that carries the focus in a forced-colours
+   * mode too. The scroller's own outline is transparent only to turn off the
+   * browser's default ring, which would sit under the mask, dimmed, beside
+   * the frame's (transparent rather than none, as the kit's focus check asks
+   * of every focus style).
+   */
   .crewlet-setup-wizard__steps:focus-visible {
+    outline: 2px solid transparent;
+  }
+
+  .crewlet-setup-wizard__steps-frame:has(> .crewlet-setup-wizard__steps:focus-visible) {
     outline: 2px solid var(--color-focus);
     outline-offset: var(--size-focus-ring-inset-offset);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.76.0",
+  "version": "0.76.1",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.76.0",
-    "@crewlethq/tokens": "0.76.0",
+    "@crewlethq/icons": "0.76.1",
+    "@crewlethq/tokens": "0.76.1",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",