@setsquare/ui 0.2.4 → 0.5.0

package/dist/styles/theme.css

@@ -38,6 +38,10 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-edge: var(--edge);
+  --color-edge-selected: var(--edge-selected);
+  --color-canvas-mark: var(--canvas-mark);
+  --color-canvas-mark-halo: var(--canvas-mark-halo);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-destructive-subtle: var(--destructive-subtle);
@@ -164,6 +168,20 @@
   --site-gutter: clamp(20px, calc(3.2 * var(--site-vw, 1vw)), 44px);
   --section-y: clamp(56px, calc(7 * var(--site-vw, 1vw)), 112px);
   --section-y-tight: clamp(40px, calc(5 * var(--site-vw, 1vw)), 80px);
+  /* A preview isn't the page, so its shell leaves the page's view-transition names (site-header) to the page's
+     own. A name may be on one element only: two, and the browser abandons every page transition. Important,
+     to win over the name the header sets inline. */
+  & * {
+    view-transition-name: none !important;
+  }
+}
+
+/* The same for a dashboard shell, or a part of one, shown inside a page that has its own, such as a documentation
+   site: its header, sidebar and right panel leave shell-header, shell-sidebar and shell-panel to the page's. */
+@utility shell-preview {
+  & * {
+    view-transition-name: none !important;
+  }
 }
 
 /* The content width of a public page, centred, with the gutter either side. */
@@ -259,6 +277,7 @@
   }
 }
 @utility card-surface {
+  --tabs-surface: var(--card);
   position: relative;
   padding: var(--space-6);
   border: 1px solid var(--border);
@@ -482,6 +501,537 @@
   @media (prefers-reduced-motion: reduce) { animation: none; }
 }
 
+/* ---------- Tabs: icons, and the selected tab opens to show its name ----------
+   Tab (the target) > tabs-paint (the pill) > tabs-icon and tabs-name. The paint's data-display says what a closed
+   tab shows: expanding (the name opens when selected), text, or icon. Widths and heights animate at AA only; at
+   AAA the name still fades in (opacity is not motion), and under reduced motion nothing animates. */
+@keyframes setsquare-tab-pop { 0% { scale: 0.82; } 60% { scale: 1.08; } 100% { scale: 1; } }
+@keyframes setsquare-badge-beat { 0%, 40%, 100% { scale: 1; } 15% { scale: 1.15; } }
+@keyframes setsquare-badge-halo { 0% { scale: 0.5; opacity: 0.6; } 100% { scale: 1; opacity: 0; } }
+@keyframes setsquare-badge-glow { 0%, 100% { opacity: 0; } 50% { opacity: 0.45; } }
+@keyframes setsquare-badge-out { to { opacity: 0; } }
+@keyframes setsquare-tip-below { from { opacity: 0; translate: -50% calc(var(--motion-distance) * -0.5); } }
+@keyframes setsquare-tip-beside { from { opacity: 0; translate: calc(var(--motion-distance) * -0.5) -50%; } }
+@keyframes setsquare-panel-in { from { opacity: 0; translate: var(--tabs-from, 0 0); } }
+@utility tabs-list {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  /* The rail: 104px of icon tiles, so it never changes width; the selected tile grows downwards. */
+  &[data-orientation='vertical'] {
+    flex: none;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    width: 104px;
+  }
+}
+@utility tabs-paint {
+  /* The badge's cut-out is the tab's own surface: the page (or --tabs-surface), the hover ground, the fill. */
+  --tabs-cut: var(--tabs-surface, var(--background));
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 20px 0fr;
+  align-items: center;
+  column-gap: 0;
+  height: var(--control-height);
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  white-space: nowrap;
+  transition: grid-template-columns 280ms var(--ease-standard), column-gap 280ms var(--ease-standard),
+    padding 280ms var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+  [data-hovered] > & {
+    --tabs-cut: var(--accent);
+    background-color: var(--accent);
+    color: var(--foreground);
+  }
+  [data-selected] > & {
+    --tabs-cut: var(--brand-subtle);
+    grid-template-columns: 20px 1fr;
+    column-gap: 8px;
+    padding: 0 14px 0 10px;
+    background-color: var(--brand-subtle);
+    color: var(--foreground);
+  }
+  /* Text has no icon column: the name is the only one. */
+  &[data-display='text'] {
+    grid-template-columns: 1fr;
+    column-gap: 0;
+    padding: 0 14px;
+  }
+  [data-selected] > &[data-display='icon'] {
+    grid-template-columns: 20px 0fr;
+    column-gap: 0;
+    padding: 0 8px;
+  }
+  /* Where the name doesn't open to mark the selected tab, a brand marker does: selection never rests on the fill
+     alone (1.4.1, 1.4.11). */
+  [data-selected] > &:is([data-display='text'], [data-display='icon'])::after {
+    content: '';
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    bottom: 3px;
+    height: 3px;
+    border-radius: 2px;
+    background-color: var(--brand);
+  }
+  @variant aaa {
+    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+  }
+  [role='tablist'][data-orientation='vertical'] & {
+    display: grid;
+    grid-template-columns: none;
+    grid-template-rows: 20px 0fr;
+    justify-items: center;
+    row-gap: 0;
+    width: 100%;
+    height: auto;
+    min-height: var(--control-height);
+    padding: 8px 4px;
+    border-radius: var(--radius-lg);
+    white-space: normal;
+    transition: grid-template-rows 280ms var(--ease-standard), row-gap 280ms var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    @variant aaa {
+      transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    }
+  }
+  [role='tablist'][data-orientation='vertical'] [data-selected] > & {
+    grid-template-rows: 20px 1fr;
+    row-gap: 6px;
+  }
+  [role='tablist'][data-orientation='vertical'] &[data-display='text'] {
+    grid-template-rows: 1fr;
+    row-gap: 0;
+  }
+  [role='tablist'][data-orientation='vertical'] [data-selected] > &[data-display='icon'] {
+    grid-template-rows: 20px 0fr;
+    row-gap: 0;
+  }
+  [role='tablist'][data-orientation='vertical'] [data-selected] > &:is([data-display='text'], [data-display='icon'])::after {
+    left: 3px;
+    right: auto;
+    top: 10px;
+    bottom: 10px;
+    width: 3px;
+    height: auto;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+  }
+}
+@utility tabs-icon {
+  position: relative;
+  display: block;
+  width: 20px;
+  height: 20px;
+  & > :not(.tabs-badge) {
+    display: block;
+  }
+  /* The selected tab's icon turns brand and pops (at AA). */
+  [data-selected] & > :not(.tabs-badge) {
+    color: var(--brand);
+    animation: setsquare-tab-pop 300ms var(--ease-standard);
+    @variant aaa {
+      animation: none;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}
+@utility tabs-name {
+  min-width: 0;
+  /* Clipped sideways only, so an important badge's ring after the name isn't cut off above or below. */
+  overflow-x: clip;
+  overflow-y: visible;
+  opacity: 0;
+  transition: opacity 160ms var(--ease-standard);
+  [data-selected] & {
+    opacity: 1;
+    transition-delay: 80ms;
+  }
+  [data-display='text'] > & {
+    opacity: 1;
+  }
+  [data-selected] [data-display='icon'] > & {
+    opacity: 0;
+  }
+  /* In the rail it fills its row, which opens from nothing, so a closing name is clipped below the icon rather
+     than spilling up over it. */
+  [role='tablist'][data-orientation='vertical'] & {
+    align-self: stretch;
+    width: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+  [role='tablist'][data-orientation='vertical'] [data-display='text'] > & {
+    overflow: visible;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+  }
+}
+@utility tabs-name-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  /* In the rail, names wrap and hyphenate inside the tile (1.4.12). */
+  [role='tablist'][data-orientation='vertical'] & {
+    display: block;
+    text-align: center;
+    font-size: 13px;
+    line-height: 16px;
+    hyphens: auto;
+    overflow-wrap: anywhere;
+  }
+}
+/* The name, over a hidden bold copy that holds the bold width from the start. */
+@utility tabs-name-text {
+  display: inline-grid;
+  & > * {
+    grid-area: 1 / 1;
+  }
+  & > :last-child {
+    font-weight: 700;
+    visibility: hidden;
+  }
+  [data-selected] & > :first-child {
+    font-weight: 700;
+  }
+}
+@utility tabs-count {
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+  [role='tablist'][data-orientation='vertical'] & {
+    display: none;
+  }
+}
+/* A badge: pinned to the icon's top-right while the tab is closed, anchored by its right edge so a wide count
+   grows back over its own icon and never reaches the next tab, with a 2px cut-out in the tab's own surface. After
+   the name when the name shows beside the icon, so it never sits over text. */
+@utility tabs-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background-color: var(--foreground);
+  color: var(--background);
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  box-shadow: 0 0 0 2px var(--tabs-cut, var(--background));
+  pointer-events: none;
+  &[data-dot] {
+    top: -3px;
+    right: -4px;
+    min-width: 10px;
+    width: 10px;
+    height: 10px;
+    padding: 0;
+  }
+  &[data-place='inline'] {
+    position: relative;
+    top: auto;
+    right: auto;
+    box-shadow: none;
+  }
+  [role='tablist'][data-orientation='vertical'] &[data-place='inline'] {
+    margin-left: 6px;
+    vertical-align: middle;
+  }
+  /* Important: the destructive fill and a ring that stays, so importance never rests on colour or motion alone. */
+  &[data-important] {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+  }
+  &[data-important]::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border: 2px solid var(--destructive);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  /* The halo the pulse swells: 8px past the badge and no further, so it stays off the next tab and any text. */
+  &[data-important]::before {
+    content: '';
+    position: absolute;
+    inset: -8px;
+    z-index: -1;
+    border-radius: 999px;
+    background-color: var(--destructive);
+    opacity: 0;
+    pointer-events: none;
+  }
+  /* After a name: 10px from the text, a 5px halo and 6px of room on its right. */
+  &[data-important][data-place='inline'] {
+    margin: 0 6px 0 4px;
+  }
+  [role='tablist'][data-orientation='vertical'] &[data-important][data-place='inline'] {
+    margin-left: 10px;
+  }
+  &[data-important][data-place='inline']::after {
+    inset: -3px;
+  }
+  &[data-important][data-place='inline']::before {
+    inset: -5px;
+  }
+  /* The pulse: three times in 4.5s, so it stops by itself inside the 5 seconds 2.2.2 allows. At AAA nothing
+     grows: the halo glows in and out at its full size. */
+  &[data-pulse] {
+    animation: setsquare-badge-beat 1500ms var(--ease-standard) 3;
+  }
+  &[data-pulse]::before {
+    animation: setsquare-badge-halo 1500ms cubic-bezier(0, 0, 0.2, 1) 3;
+  }
+  @variant aaa {
+    &[data-pulse] {
+      animation: none;
+    }
+    &[data-pulse]::before {
+      animation: setsquare-badge-glow 1500ms ease-in-out 3;
+    }
+  }
+  /* Back on the icon as its tab closes: it waits for the name to fade, so it never lands on the text. */
+  &[data-returning] {
+    animation: setsquare-fade var(--duration-fast) var(--ease-standard) 200ms both;
+  }
+  &[data-clearing] {
+    animation: setsquare-badge-out 300ms var(--ease-standard) 700ms both;
+  }
+  /* Clearing and its tab closed before it went: it doesn't come back to the icon just to leave. */
+  &[data-clearing][data-returning] {
+    opacity: 0;
+    animation: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    &, &::before {
+      animation: none !important;
+    }
+  }
+}
+/* A tooltip for a tab whose name isn't showing. It sits inside the tab, so the pointer can move onto it across an
+   8px bridge without leaving. Hidden from assistive tech: the name is the tab's own. */
+@utility tabs-tip {
+  position: absolute;
+  z-index: var(--z-popover);
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  background-color: var(--foreground);
+  color: var(--background);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  white-space: nowrap;
+  box-shadow: var(--shadow-lg);
+  &::before {
+    content: '';
+    position: absolute;
+  }
+  &[data-side='bottom'] {
+    top: calc(100% + 6px);
+    left: 50%;
+    translate: -50% 0;
+    animation: setsquare-tip-below var(--duration-fast) var(--ease-standard) both;
+  }
+  &[data-side='bottom']::before {
+    left: 0;
+    right: 0;
+    top: -8px;
+    height: 8px;
+  }
+  &[data-side='right'] {
+    left: calc(100% + 6px);
+    top: 50%;
+    translate: 0 -50%;
+    animation: setsquare-tip-beside var(--duration-fast) var(--ease-standard) both;
+  }
+  &[data-side='right']::before {
+    top: 0;
+    bottom: 0;
+    left: -8px;
+    width: 8px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+/* A panel comes in from the side the selection moved towards: --motion-distance and a fade, a fade alone at AAA. */
+@utility tabs-panel {
+  &[data-travel] {
+    animation: setsquare-panel-in var(--duration-enter) var(--ease-standard) both;
+  }
+  &[data-travel='forward'] {
+    --tabs-from: var(--motion-distance) 0;
+  }
+  &[data-travel='back'] {
+    --tabs-from: calc(var(--motion-distance) * -1) 0;
+  }
+  [data-orientation='vertical'] > &[data-travel='forward'] {
+    --tabs-from: 0 var(--motion-distance);
+  }
+  [data-orientation='vertical'] > &[data-travel='back'] {
+    --tabs-from: 0 calc(var(--motion-distance) * -1);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+
+/* ---------- Pagination: the results footer ----------
+   The page links' paint (Layer 2), the range's figures coming in from the way you paged, the Go button arriving,
+   and the mark on a control whose page is slow to come. At AAA all of it fades; under reduced motion none of it
+   moves, and the pending mark holds still. */
+@keyframes setsquare-current-pop { 0% { scale: 0.86; } 60% { scale: 1.04; } 100% { scale: 1; } }
+@keyframes setsquare-roll-in { from { opacity: 0; translate: 0 var(--pagination-from, 0); } }
+@keyframes setsquare-go-in { from { opacity: 0; translate: calc(var(--motion-distance) * -0.75) 0; } }
+@keyframes setsquare-pending { 0%, 100% { opacity: 0.2; scale: 0.4 1; } 50% { opacity: 1; scale: 1 1; } }
+@keyframes setsquare-pending-fade { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
+@keyframes setsquare-pending-hold { to { opacity: 0.6; scale: 1 1; } }
+@utility pagination-paint {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: var(--control-height);
+  min-width: var(--control-height);
+  padding: 0 8px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--foreground);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+  [data-hovered] > & {
+    background-color: var(--accent);
+  }
+  [aria-current='page'] > & {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    font-weight: 700;
+  }
+  /* The new current page pops, at AA, once the page has changed. */
+  [data-moved] [aria-current='page'] > & {
+    animation: setsquare-current-pop 240ms var(--ease-standard);
+  }
+  [data-pending] > &::after {
+    content: '';
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 4px;
+    height: 2px;
+    border-radius: 2px;
+    background-color: currentColor;
+    opacity: 0;
+    /* Five beats, then it holds still: it stops by itself inside the five seconds 2.2.2 allows. */
+    animation:
+      setsquare-pending 900ms var(--ease-standard) var(--duration-loading-delay) 5,
+      setsquare-pending-hold 0s calc(var(--duration-loading-delay) + 4500ms) forwards;
+  }
+  @variant aaa {
+    [data-moved] [aria-current='page'] > & {
+      animation: none;
+    }
+    [data-pending] > &::after {
+      animation-name: setsquare-pending-fade, setsquare-pending-hold;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    [data-moved] [aria-current='page'] > & {
+      animation: none;
+    }
+    [data-pending] > &::after {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+}
+/* The page field's mark when its page is slow: the same underline, under the number. */
+@utility pagination-field-pending {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: calc(var(--control-pad-x) + 2px);
+    right: calc(var(--control-pad-x) + 2px);
+    bottom: calc(var(--field-band, 0px) + 4px);
+    height: 2px;
+    border-radius: 2px;
+    background-color: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    animation:
+      setsquare-pending 900ms var(--ease-standard) var(--duration-loading-delay) 5,
+      setsquare-pending-hold 0s calc(var(--duration-loading-delay) + 4500ms) forwards;
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+  @variant aaa {
+    &::after {
+      animation-name: setsquare-pending-fade, setsquare-pending-hold;
+    }
+  }
+}
+/* The range's figures come in from the way you paged: up for later pages, down for earlier ones. */
+@utility pagination-roll {
+  display: inline-block;
+  &[data-direction] {
+    animation: setsquare-roll-in 220ms var(--ease-standard);
+  }
+  &[data-direction='forward'] {
+    --pagination-from: calc(var(--motion-distance) * 0.75);
+  }
+  &[data-direction='back'] {
+    --pagination-from: calc(var(--motion-distance) * -0.75);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+@utility pagination-go {
+  animation: setsquare-go-in 180ms var(--ease-standard) both;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+/* A new page's rows fade in (no movement, at every level). Key the rows by page so they are new elements. */
+@utility rows-arrive {
+  & > * {
+    animation: setsquare-fade 200ms var(--ease-standard);
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}
+
 /* ---------- FeatureCard's ground: dots fading out from the icon, and one ripple across them ----------
    The dots sit behind the title and the muted text, so they are light enough for that text to keep 4.5:1 on a
    dot as well as on the card (scripts/lib/contrast.mjs measures it on the darkest dot). At AAA there are none:

package/dist/styles/tokens.css

@@ -54,6 +54,7 @@
   --sidebar-width-aaa: 256px;
   --sidebar-width-collapsed-aa: 56px;
   --sidebar-width-collapsed-aaa: 72px;
+  --tree-indent: 16px;
   --rail-width-aa: 72px;
   --rail-width-aaa: 88px;
   --subnav-width-aa: 224px;
@@ -152,6 +153,10 @@
   --border: #e0e4e9;
   --input: #7a838e;
   --ring: var(--brand);
+  --edge: var(--input);
+  --edge-selected: var(--brand);
+  --canvas-mark: #22369f;
+  --canvas-mark-halo: #ffffff;
   --destructive: #bf2a2a;
   --destructive-foreground: #ffffff;
   --destructive-subtle: #fdecec;
@@ -193,6 +198,10 @@
   --border: #28303a;
   --input: #6b7582;
   --ring: var(--brand);
+  --edge: var(--input);
+  --edge-selected: var(--brand);
+  --canvas-mark: #22369f;
+  --canvas-mark-halo: #ffffff;
   --destructive: #f47a70;
   --destructive-foreground: #0e1116;
   --destructive-subtle: #3a1616;
@@ -234,6 +243,10 @@
   --border: #7f8792;
   --input: #5d6570;
   --ring: var(--brand);
+  --edge: var(--input);
+  --edge-selected: var(--brand);
+  --canvas-mark: #22369f;
+  --canvas-mark-halo: #ffffff;
   --destructive: #8c1818;
   --destructive-foreground: #ffffff;
   --destructive-subtle: #fbe7e7;
@@ -275,6 +288,10 @@
   --border: #6c7580;
   --input: #8c96a3;
   --ring: var(--brand);
+  --edge: var(--input);
+  --edge-selected: var(--brand);
+  --canvas-mark: #22369f;
+  --canvas-mark-halo: #ffffff;
   --destructive: #ffa39b;
   --destructive-foreground: #07090c;
   --destructive-subtle: #3a1313;

package/dist/testing/index.d.ts

@@ -126,6 +126,7 @@ export interface ScreenshotPage extends Evaluates {
         };
         animations?: 'disabled' | 'allow';
         caret?: 'hide' | 'initial';
+        scale?: 'css' | 'device';
     }): Promise<Uint8Array>;
 }
 export interface InvisibleFocus {
@@ -157,6 +158,59 @@ export interface FocusVisibleOptions {
 export declare function findInvisibleFocus(page: ScreenshotPage, options?: FocusVisibleOptions): Promise<InvisibleFocus[]>;
 /** Throws, listing every control whose focus cannot be seen, unless there are none. `trapped` ones are skipped. */
 export declare function expectFocusVisible(page: ScreenshotPage, options?: FocusVisibleOptions): Promise<void>;
+export interface WeakFocus {
+    element: string;
+    /** CSS px² of the indicator whose colour changed by at least 3:1 when the control took focus. */
+    area: number;
+    /**
+     * CSS px² the indicator needs: a 2 CSS px thick perimeter of the unfocused component, 4h + 4w − (16 − 4π)r for a
+     * rectangle with corner radius r (W3C's Understanding 2.4.13, read on 9 October 2026).
+     */
+    needed: number;
+}
+/**
+ * Focus appearance (WCAG 2.4.13, AAA): for every control a keyboard can reach, the pixels that change colour by at
+ * least 3:1 when it takes focus must cover at least the area of a 2 CSS px thick perimeter of the unfocused
+ * component: 4h + 4w − (16 − 4π)r CSS px² for a rectangle with corner radius r (W3C's formulas, read on 9 October
+ * 2026). The component is its visible presentation, which W3C gauges by the indicator itself: the part whose outline
+ * or box shadow changes on focus (a three-layer control's paint), or the control when none does. Screenshots are
+ * taken at CSS scale, with
+ * focus away and then on the control, as `findInvisibleFocus` takes them. Controls the browser draws the indicator
+ * for and the author hasn't touched are exempt in WCAG, and aren't told apart here.
+ */
+export declare function findWeakFocusIndicators(page: ScreenshotPage, options?: FocusVisibleOptions): Promise<WeakFocus[]>;
+/** Throws, listing every control whose focus indicator is too small or too faint for 2.4.13, unless there are none. */
+export declare function expectFocusAppearance(page: ScreenshotPage, options?: FocusVisibleOptions): Promise<void>;
+export interface ObscuredFocus {
+    element: string;
+    /** How much of it other content covered, of the points sampled across it: 1 is all of it. */
+    covered: number;
+}
+export interface FocusObscuredOptions {
+    /** `aa`: fails a control that's entirely hidden (2.4.11). `aaa`: fails one that's hidden at all (2.4.12). */
+    level?: 'aa' | 'aaa';
+    /** How many Tab presses to follow. Default 80. */
+    stops?: number;
+}
+/**
+ * Focus not obscured (WCAG 2.4.11 at AA, 2.4.12 at AAA): presses Tab, and at each stop samples a grid of points
+ * across the focused control. A point is covered when what's on top there is neither the control, something inside
+ * it, nor something it's inside. At AA a control fails when every point is covered; at AAA when any is. A visually
+ * hidden input is measured by the control around it, and only the part of a control that's in view is sampled:
+ * what the window or a scroll container cuts off isn't covered by other content. Elements with
+ * `pointer-events: none` can't be seen by the sampling, so a covering layer that lets clicks through goes unnoticed.
+ */
+export declare function findObscuredFocus(page: Evaluates & {
+    keyboard: {
+        press(key: string): Promise<void>;
+    };
+}, options?: FocusObscuredOptions): Promise<ObscuredFocus[]>;
+/** Throws, listing every tab stop whose focused control is hidden by other content, unless there are none. */
+export declare function expectFocusNotObscured(page: Evaluates & {
+    keyboard: {
+        press(key: string): Promise<void>;
+    };
+}, options?: FocusObscuredOptions): Promise<void>;
 export interface LinkFinding {
     /** The link, described as `tag "text"`. */
     element: string;
@@ -285,8 +339,9 @@ export interface TextSpacingOptions {
  * reports every box whose content now runs out of it further than it did before. Measuring the difference
  * leaves alone anything that was already clipped on purpose (visually hidden text, a decorative bleed).
  * Scroll containers are left out too, since their content can still be scrolled to, and so is text that
- * spills from a box inside a scroller that scrolls that way (code in a code block). Only the innermost box
- * is reported. Takes the spacing off again before returning. Returns [] when everything still fits.
+ * spills from a box inside a scroller that scrolls that way (code in a code block), or inside a pane marked
+ * `data-setsquare-pannable`: one people move with pan controls instead of scrollbars, such as a React Flow
+ * diagram, which lays itself out again once its nodes have grown. Only the innermost box is reported. Takes the spacing off again before returning. Returns [] when everything still fits.
  */
 export declare function findClippedText(options?: TextSpacingOptions, root?: ParentNode): ClippedText[];
 /** Throws, listing every finding, unless all the text still fits with WCAG 1.4.12's spacing applied. */