@tensor_1/tokens 2.47.0 → 2.49.0

package/styles/components/peek.css

@@ -6,21 +6,22 @@
     border: 0; border-left: 1px solid var(--uix-border); border-radius: 0;
     background: var(--uix-surface); box-shadow: var(--uix-shadow-overlay);
     transform: translateX(100%);
-    transition: transform var(--uix-dur-slow) var(--uix-ease-out),
-                overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    /* the closed state's durations are the exit's (--uix-dur-exit-slow); [open] carries the enter */
+    transition: transform var(--uix-dur-exit-slow) var(--uix-ease-out),
+                overlay var(--uix-dur-exit-slow) allow-discrete, display var(--uix-dur-exit-slow) allow-discrete;
     /* Author display values for BOTH states are required for the slide-in to animate: the
        allow-discrete `display` transition only engages with author values, and that gating also
        lets the @starting-style entrance fire. With only the UA dialog display, the panel stays
        parked at translateX(100%). Closed = none; open = flex. */
     display: none;
   }
-  .uix-peek[open] { transform: none; display: flex; flex-direction: column; }
+  .uix-peek[open] { transform: none; display: flex; flex-direction: column; transition-duration: var(--uix-dur-slow); }
   @starting-style { .uix-peek[open] { transform: translateX(100%); } }
   .uix-peek::backdrop {
     background: var(--uix-scrim); opacity: 0;
-    transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    transition: opacity var(--uix-dur-exit-slow) var(--uix-ease-out), overlay var(--uix-dur-exit-slow) allow-discrete, display var(--uix-dur-exit-slow) allow-discrete;
   }
-  .uix-peek[open]::backdrop { opacity: 1; }
+  .uix-peek[open]::backdrop { opacity: 1; transition-duration: var(--uix-dur-slow); }
   @starting-style { .uix-peek[open]::backdrop { opacity: 0; } }
 
   .uix-peek__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }

package/styles/components/popover.css

@@ -1,18 +1,18 @@
 /* uix popover — generic anchored surface via the native Popover API; animated with @starting-style.
-   Enter/exit: fade + --uix-lift slide, always away from the anchor (the React Popover sets
-   data-placement, and data-uix-placing holds the first frame until it is placed). */
+   Enter: fade + scale(.95 → 1) growing out of the trigger — useAnchoredPosition writes the anchor
+   point as --uix-anchor-origin — at --uix-dur-fast. Exit: the same, back in, at --uix-dur-exit-fast
+   (faster than the enter, still ease-out). data-uix-placing holds the first frame until it is placed;
+   a popover opened from the keyboard carries [data-uix-key-opened] and does not animate (motion.css). */
 @layer uix.components {
   .uix-popover { margin: 0; padding: var(--uix-space-2); background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover); color: var(--uix-text); }
   [popover].uix-popover {
-    --popover-from: translateY(calc(-1 * var(--uix-lift)));
-    opacity: 0; transform: var(--popover-from);
-    transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out),
-                overlay var(--uix-dur-fast) allow-discrete, display var(--uix-dur-fast) allow-discrete;
+    --popover-from: scale(.95);
+    opacity: 0; transform: var(--popover-from); transform-origin: var(--uix-anchor-origin, top left);
+    /* the closed state's durations are the exit's */
+    transition: opacity var(--uix-dur-exit-fast) var(--uix-ease-out), transform var(--uix-dur-exit-fast) var(--uix-ease-out),
+                overlay var(--uix-dur-exit-fast) allow-discrete, display var(--uix-dur-exit-fast) allow-discrete;
   }
-  [popover].uix-popover[data-placement^="top"] { --popover-from: translateY(var(--uix-lift)); }
-  [popover].uix-popover[data-placement^="left"] { --popover-from: translateX(var(--uix-lift)); }
-  [popover].uix-popover[data-placement^="right"] { --popover-from: translateX(calc(-1 * var(--uix-lift))); }
-  [popover].uix-popover:popover-open { opacity: 1; transform: none; }
+  [popover].uix-popover:popover-open { opacity: 1; transform: none; transition-duration: var(--uix-dur-fast); }
   /* A closed popover is display:none by the UA stylesheet only, so a component that sets its
      own display (.uix-popconfirm, .uix-filter-popover: grid) stayed laid out while closed: an
      invisible fixed box at the viewport's top-left that took clicks (HAR-2029). The display
@@ -27,5 +27,9 @@
   .uix-popconfirm { display: grid; gap: var(--uix-space-2); width: max-content; max-width: min(20rem, calc(100vw - 2 * var(--uix-space-4))); padding: var(--uix-space-3); }
   .uix-popconfirm__title { font-weight: 600; color: var(--uix-text); }
   .uix-popconfirm__body { display: grid; gap: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
+  /* content of its own, e.g. a required reason field (HAR-1831): the step takes its full width
+     so the field is not squeezed to the text's max-content */
+  .uix-popconfirm--content { width: min(20rem, calc(100vw - 2 * var(--uix-space-4))); }
+  .uix-popconfirm__content { display: grid; gap: var(--uix-space-2); min-width: 0; }
   .uix-popconfirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--uix-space-2); margin-top: var(--uix-space-1); }
 }

package/styles/components/print-layout.css

@@ -0,0 +1,177 @@
+/* uix print layout (HAR-986, HAR-1252) — React PrintLayout, PrintSignature, PrintPageBreak.
+   A document frame for the browser's own print: A4 or A5 named pages with the paper's margins,
+   a header and a footer that repeat on every page (a CSS table's header and footer groups, which
+   the browser repeats per page and which take their own room, so they never sit on the content),
+   "page / pages" in the bottom-right page margin, and black-on-white tokens inside the frame.
+
+   On screen the frame is a paper preview: the page at its true width and its print type size,
+   scaled as a whole (zoom, measured by PrintLayout) to the room it has, ink on paper in both
+   themes — what you see, and what fits on one page, is what prints.
+   Units: mm and pt are the paper's own units; they are not --uix-* scale values. */
+@layer uix.components {
+  /* ── the paper ─────────────────────────────────────────────────────────────── */
+  @page uix-print-a4 { size: A4 portrait; margin: 16mm 16mm 18mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 8pt; color: var(--uix-print-ink-quiet); } }
+  @page uix-print-a4-landscape { size: A4 landscape; margin: 14mm 16mm 16mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 8pt; color: var(--uix-print-ink-quiet); } }
+  @page uix-print-a5 { size: A5 portrait; margin: 10mm 10mm 12mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 7pt; color: var(--uix-print-ink-quiet); } }
+  @page uix-print-a5-landscape { size: A5 landscape; margin: 10mm 12mm 12mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 7pt; color: var(--uix-print-ink-quiet); } }
+  @page uix-print-a4-plain { size: A4 portrait; margin: 16mm 16mm 18mm; }
+  @page uix-print-a4-landscape-plain { size: A4 landscape; margin: 14mm 16mm 16mm; }
+  @page uix-print-a5-plain { size: A5 portrait; margin: 10mm 10mm 12mm; }
+  @page uix-print-a5-landscape-plain { size: A5 landscape; margin: 10mm 12mm 12mm; }
+
+  .uix-print-layout {
+    /* the page box and its margins, for the screen preview (the same as the @page rules) */
+    --print-width: 210mm; --print-height: 297mm; --print-margin: 16mm 16mm 18mm;
+    /* everything inside reads ink on paper, in both themes, on screen and on paper */
+    --uix-text: var(--uix-print-ink);
+    --uix-text-muted: var(--uix-print-ink-quiet);
+    --uix-text-hushed: var(--uix-print-ink-quiet);
+    --uix-surface: var(--uix-print-paper);
+    --uix-surface-2: var(--uix-print-paper);
+    --uix-surface-3: var(--uix-print-paper-quiet);
+    --uix-bg-app: var(--uix-print-paper);
+    --uix-bg-subtle: var(--uix-print-paper-quiet);
+    --uix-bg-hover: var(--uix-print-paper-quiet);
+    --uix-border: var(--uix-print-line);
+    --uix-border-strong: var(--uix-print-ink-quiet);
+    --uix-link: var(--uix-print-ink);
+    --uix-accent-text: var(--uix-print-ink);
+    --uix-row: var(--uix-print-paper);
+    --uix-row-alt: var(--uix-print-paper-quiet);
+    --uix-row-selected-bg: var(--uix-print-paper-quiet);
+    --uix-row-pinned-bg: var(--uix-print-paper-quiet);
+    color-scheme: light;
+    box-sizing: border-box;
+    width: var(--print-width);
+    margin-inline: auto;
+    /* the type and the rows of the paper, on screen too */
+    font-size: 10pt;
+    line-height: 1.45;
+    --uix-row-h: var(--uix-row-h-compact);
+    background: var(--uix-print-paper);
+    color: var(--uix-print-ink);
+    box-shadow: var(--uix-shadow-md);
+    border: 1px solid var(--uix-print-line);
+  }
+  /* The dark theme's tints are dark: on the paper they read as quiet paper with ink text, so a
+     pill or a callout inside the document prints in black and white instead of a dark slab. */
+  :root:where(.dark,[data-theme="dark"]) .uix-print-layout {
+    --uix-brand-muted: var(--uix-print-paper-quiet);
+    --uix-neutral-bg: var(--uix-print-paper-quiet); --uix-neutral-text: var(--uix-print-ink); --uix-neutral-border: var(--uix-print-line);
+    --uix-info-bg: var(--uix-print-paper-quiet); --uix-info-text: var(--uix-print-ink);
+    --uix-success-bg: var(--uix-print-paper-quiet); --uix-success-text: var(--uix-print-ink);
+    --uix-warning-bg: var(--uix-print-paper-quiet); --uix-warning-text: var(--uix-print-ink); --uix-warning-border: var(--uix-print-line);
+    --uix-danger-bg: var(--uix-print-paper-quiet); --uix-danger-text: var(--uix-print-danger); --uix-danger-border: var(--uix-print-danger);
+    --uix-attention-bg: var(--uix-print-paper-quiet); --uix-attention-text: var(--uix-print-ink);
+    --uix-amber-bg: var(--uix-print-paper-quiet); --uix-amber-text: var(--uix-print-ink);
+    --uix-overdue-bg: var(--uix-print-paper-quiet); --uix-overdue-text: var(--uix-print-ink);
+    --uix-sev-4-bg: var(--uix-print-paper-quiet); --uix-sev-4-text: var(--uix-print-ink);
+    --uix-sev-5-bg: var(--uix-print-paper-quiet); --uix-sev-5-text: var(--uix-print-ink);
+  }
+  .uix-print-layout[data-size="A4"][data-orientation="landscape"] { --print-width: 297mm; --print-height: 210mm; --print-margin: 14mm 16mm 16mm; }
+  .uix-print-layout[data-size="A5"] { --print-width: 148mm; --print-height: 210mm; --print-margin: 10mm 10mm 12mm; font-size: 9pt; }
+  @media screen { .uix-print-layout { zoom: var(--uix-print-preview-scale, 1); } }
+  .uix-print-layout[data-size="A5"][data-orientation="landscape"] { --print-width: 210mm; --print-height: 148mm; --print-margin: 10mm 12mm 12mm; }
+  /* The preview box: the paper's width (set inline by PrintLayout), or its container's when that
+     is narrower; the page inside is scaled to it. */
+  .uix-print-preview { box-sizing: border-box; max-inline-size: 100%; margin-inline: auto; }
+  .uix-print-preview + .uix-print-preview { margin-top: var(--uix-space-6); }
+
+  /* The page is a <table> for print's sake (a repeated thead and tfoot); on screen it is a column. */
+  .uix-print-layout__page {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--uix-space-4);
+    width: 100%;
+    min-height: var(--print-height);
+    padding: var(--print-margin);
+    border-spacing: 0;
+    font-size: inherit;
+    text-align: start;
+    overflow-wrap: anywhere;
+  }
+  /* zero specificity, so the part classes below (and the print rules) win over this reset */
+  :where(.uix-print-layout__page > thead, .uix-print-layout__page > tbody, .uix-print-layout__page > tfoot, .uix-print-layout__page > * > tr, .uix-print-layout__page > * > tr > td) { display: block; padding: 0; }
+  .uix-print-layout__main { flex: 1 0 auto; }
+  .uix-print-layout__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--uix-space-2) var(--uix-space-4); }
+  .uix-print-layout__header .uix-print-layout__bar { padding-bottom: var(--uix-space-3); border-bottom: 1px solid var(--uix-print-ink); }
+  .uix-print-layout__body { display: flex; flex-direction: column; gap: var(--uix-space-4); min-width: 0; }
+  .uix-print-layout__footer { color: var(--uix-print-ink-quiet); font-size: var(--uix-text-meta); }
+  .uix-print-layout__footer .uix-print-layout__bar { padding-top: var(--uix-space-2); border-top: 1px solid var(--uix-print-line); }
+
+  /* one page and no more: the preview is one page tall; content that does not fit is outlined */
+  .uix-print-layout[data-single-page] .uix-print-layout__page { height: var(--print-height); overflow: hidden; }
+  .uix-print-layout[data-overflowing] { outline: 2px dashed var(--uix-danger); outline-offset: 2px; }
+
+  /* ── signature ─────────────────────────────────────────────────────────────── */
+  .uix-print-signature { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: var(--uix-space-4) var(--uix-space-6); margin-top: var(--uix-space-6); break-inside: avoid; }
+  .uix-print-signature__place { margin-right: auto; }
+  .uix-print-signature__field { display: grid; gap: var(--uix-space-1); width: min(70mm, 100%); text-align: center; }
+  .uix-print-signature__line { height: 14mm; border-bottom: 1px solid var(--uix-print-ink); }
+  .uix-print-signature__caption { color: var(--uix-print-ink-quiet); font-size: var(--uix-text-meta); }
+  .uix-print-signature__name { font-weight: 600; }
+  .uix-print-signature__stamp { display: grid; place-items: center; width: 34mm; height: 34mm; border: 1px dashed var(--uix-print-line); border-radius: 50%; color: var(--uix-print-ink-quiet); font-size: var(--uix-text-meta); }
+
+  /* ── page breaks and helpers ───────────────────────────────────────────────── */
+  .uix-print-break { height: 0; margin-block: var(--uix-space-3); border-top: 1px dashed var(--uix-print-line); }
+  .uix-print-keep { break-inside: avoid; }
+  .uix-print-only { display: none; }
+
+  @media print {
+    .uix-print-hide { display: none !important; }
+    .uix-print-only { display: revert; }
+
+    /* Only the documents print: every element that neither is nor holds a print layout goes,
+       and the ones that hold it (the app shell, its scrolling main) become plain flow, so a
+       scroll box cannot cut the document to one page. */
+    :root:has(.uix-print-layout[data-isolate]) body :not(:has(.uix-print-layout[data-isolate]), .uix-print-layout[data-isolate], .uix-print-layout[data-isolate] *) { display: none !important; }
+    :root:has(.uix-print-layout[data-isolate]) body :has(.uix-print-layout[data-isolate]) {
+      display: block !important; position: static !important; overflow: visible !important;
+      height: auto !important; min-height: 0 !important; max-height: none !important;
+      margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
+      box-shadow: none !important; transform: none !important;
+    }
+    /* the sheet is paper whatever the screen theme was, also with background graphics on */
+    :root:has(.uix-print-layout[data-isolate]) { color-scheme: light; background: var(--uix-print-paper) !important; }
+    :root:has(.uix-print-layout[data-isolate]) body { margin: 0; padding: 0; background: none !important; }
+
+    .uix-print-layout {
+      display: block; width: 100%; max-width: none; margin: 0;
+      border: 0; box-shadow: none; outline: none;
+      -webkit-print-color-adjust: exact; print-color-adjust: exact;
+    }
+    .uix-print-preview { inline-size: auto !important; max-inline-size: none; }
+    .uix-print-preview + .uix-print-preview { margin: 0; break-before: page; }
+    .uix-print-layout[data-page="uix-print-a4"] { page: uix-print-a4; }
+    .uix-print-layout[data-page="uix-print-a4-landscape"] { page: uix-print-a4-landscape; }
+    .uix-print-layout[data-page="uix-print-a5"] { page: uix-print-a5; }
+    .uix-print-layout[data-page="uix-print-a5-landscape"] { page: uix-print-a5-landscape; }
+    .uix-print-layout[data-page="uix-print-a4-plain"] { page: uix-print-a4-plain; }
+    .uix-print-layout[data-page="uix-print-a4-landscape-plain"] { page: uix-print-a4-landscape-plain; }
+    .uix-print-layout[data-page="uix-print-a5-plain"] { page: uix-print-a5-plain; }
+    .uix-print-layout[data-page="uix-print-a5-landscape-plain"] { page: uix-print-a5-landscape-plain; }
+
+    /* the page is a table again, and the browser repeats its thead and tfoot on every page */
+    .uix-print-layout__page { display: table; table-layout: fixed; min-height: 0; padding: 0; }
+    :where(.uix-print-layout__page > thead, .uix-print-layout__page > tbody, .uix-print-layout__page > tfoot, .uix-print-layout__page > * > tr, .uix-print-layout__page > * > tr > td) { display: revert; }
+    .uix-print-layout__body { display: table-cell; }
+    .uix-print-layout__body > * + * { margin-top: var(--uix-space-4); }
+    /* space between the bars and the body, on every page */
+    .uix-print-layout__header .uix-print-layout__bar { margin-bottom: 5mm; }
+    .uix-print-layout__footer .uix-print-layout__bar { margin-top: 5mm; }
+
+    /* one page: nothing repeats, nothing is cut, the frame stays in one piece */
+    .uix-print-layout[data-single-page] { display: block; break-inside: avoid; }
+    .uix-print-layout[data-single-page] .uix-print-layout__page { display: flex; height: auto; overflow: visible; }
+    .uix-print-layout[data-single-page] :where(.uix-print-layout__page > thead, .uix-print-layout__page > tbody, .uix-print-layout__page > tfoot, .uix-print-layout__page > * > tr, .uix-print-layout__page > * > tr > td) { display: block; }
+    .uix-print-layout[data-single-page] .uix-print-layout__body { display: flex; }
+    .uix-print-layout[data-single-page] .uix-print-layout__body > * + * { margin-top: 0; }
+
+    /* tables, lists and figures inside keep their rows whole; focus rings belong to the screen */
+    .uix-print-layout__body :is(tr, li, figure, .uix-card) { break-inside: avoid; }
+    .uix-print-layout__body thead { display: table-header-group; }
+    .uix-print-layout :focus, .uix-print-layout :focus-visible { outline: none; }
+    .uix-print-break { height: 0; margin: 0; border: 0; break-after: page; }
+  }
+}

package/styles/components/progress.css

@@ -16,3 +16,10 @@
     background: conic-gradient(var(--uix-accent) calc(var(--val, .66) * 360deg), var(--uix-bg-active) 0); }
   .uix-ring__inner { width: 32px; height: 32px; border-radius: 50%; background: var(--uix-surface); display: grid; place-items: center; font-size: var(--uix-text-meta); font-weight: 600; }
 }
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same rule */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] .uix-progress--indeterminate .uix-progress__bar { width: 100%; animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
+  }
+}

package/styles/components/qr-code.css

@@ -0,0 +1,30 @@
+/* uix QR code (HAR-1251) — React QrCode renders an <svg class="uix-qr-code"> with a paper rect
+   and one path of dark modules; the four-module quiet zone is inside the viewBox.
+   Scanners read dark on light, so the symbol never follows the theme: it is print ink on print
+   paper in light, dark, print and forced colours alike, and it is printed as drawn. */
+@layer uix.components {
+  .uix-qr-code {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+    border-radius: var(--uix-radius-sm);
+    forced-color-adjust: none;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  .uix-qr-code__paper { fill: var(--uix-print-paper); }
+  .uix-qr-code__ink { fill: var(--uix-print-ink); }
+
+  /* value too long for a QR code: a square that says so, never a broken symbol */
+  .uix-qr-code--error {
+    display: grid;
+    place-items: center;
+    padding: var(--uix-space-3);
+    border: 1px dashed var(--uix-border-strong);
+    background: var(--uix-bg-subtle);
+    color: var(--uix-text-muted);
+    font-size: var(--uix-text-meta);
+    text-align: center;
+  }
+}

package/styles/components/qr-scanner.css

@@ -0,0 +1,61 @@
+/* uix QR scanner (HAR-1254) — React QrScanner: a camera viewfinder with an explainer before the
+   browser's prompt, plain states for blocked / unsupported / no camera / no picture, and the
+   manual entry always below it. The frame is 4:3 while the camera runs; in every other state it
+   is a padded panel that grows with its text, so nothing is cut at 320 px.
+   No decorative scanning line: the target is still, and a read is answered once (the target
+   turns to the success colour for a moment; a status message says what was read). */
+@layer uix.components {
+  .uix-qr-scanner { display: grid; gap: var(--uix-space-3); width: 100%; max-width: 32rem; min-width: 0; }
+
+  .uix-qr-scanner__frame {
+    position: relative;
+    display: grid;
+    place-items: center;
+    min-height: 12rem;
+    overflow: hidden;
+    border: 1px solid var(--uix-border);
+    border-radius: var(--uix-radius-lg);
+    background: var(--uix-bg-subtle);
+  }
+  .uix-qr-scanner[data-status="scanning"] .uix-qr-scanner__frame { aspect-ratio: 4 / 3; min-height: 0; background: var(--uix-print-ink); border-color: transparent; }
+  .uix-qr-scanner__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .uix-qr-scanner__video[hidden] { display: none; }
+
+  /* the aiming square: four corners, still */
+  .uix-qr-scanner__target {
+    --target-ink: var(--uix-print-paper);
+    position: relative;
+    width: min(62%, 16rem);
+    aspect-ratio: 1;
+    border-radius: var(--uix-radius-md);
+    background:
+      linear-gradient(var(--target-ink), var(--target-ink)) top left / 24px 3px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) top left / 3px 24px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) top right / 24px 3px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) top right / 3px 24px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) bottom left / 24px 3px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) bottom left / 3px 24px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) bottom right / 24px 3px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) bottom right / 3px 24px no-repeat;
+    box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--uix-print-ink) 35%, transparent);
+    transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  /* did it work: the corners turn green and settle in, once */
+  .uix-qr-scanner__frame[data-read] .uix-qr-scanner__target { --target-ink: var(--uix-success-solid); transform: scale(.96); }
+
+  .uix-qr-scanner__panel { display: grid; justify-items: start; gap: var(--uix-space-3); width: 100%; padding: var(--uix-space-5); }
+  .uix-qr-scanner__title { margin: 0; font-weight: 600; font-size: var(--uix-text-h3); }
+  .uix-qr-scanner__body { margin: 0; color: var(--uix-text-muted); }
+  .uix-qr-scanner[data-status="denied"] .uix-qr-scanner__title { color: var(--uix-danger-text); }
+  .uix-qr-scanner__explainer { color: var(--uix-text); max-width: 60ch; }
+
+  .uix-qr-scanner__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); }
+  .uix-qr-scanner__message { flex: 1 1 12rem; margin: 0; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-qr-scanner__message[data-hint] { color: var(--uix-warning-text); }
+  .uix-qr-scanner__manual { padding-top: var(--uix-space-3); border-top: 1px solid var(--uix-border); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .uix-qr-scanner__target { transition: none; }
+    .uix-qr-scanner__frame[data-read] .uix-qr-scanner__target { transform: none; }
+  }
+}

package/styles/components/relationship-graph.css

@@ -9,34 +9,64 @@
   /* Node fills must be opaque: edges run to node centres, so a translucent tint lets them strike through the label. */
   .uix-relationship-graph__node[data-selected] rect,.uix-relationship-graph__node[data-highlighted] rect { fill:color-mix(in srgb, var(--uix-accent) 16%, var(--uix-surface)); stroke:var(--uix-accent); stroke-width:3; } .uix-relationship-graph__node[data-conflicted] rect { fill:color-mix(in srgb, var(--uix-danger) 20%, var(--uix-surface)); stroke:var(--uix-danger); stroke-dasharray:4 2; }
   .uix-relationship-graph__node:focus-visible rect { stroke:var(--uix-ring); stroke-width:4; }
-  .uix-relationship-graph__legend { display:flex; gap:var(--uix-space-4); flex-wrap:wrap; margin:0; padding:0; list-style:none; color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
-  .uix-relationship-graph__legend li::before { content:""; display:inline-block; width:.8rem; height:.8rem; margin-right:var(--uix-space-1); border:2px solid var(--uix-graph-type-color, var(--uix-chart-1)); border-radius:var(--uix-radius-pill); vertical-align:middle; }
+  /* One row per item, symbol and words centred on each other (operator review 2026-10-23: the dashed
+     samples and swatches sat off the text's middle). Items wrap whole on a narrow screen. */
+  .uix-relationship-graph__legend { display:flex; flex-wrap:wrap; align-items:center; gap:var(--uix-space-2) var(--uix-space-4); margin:0; padding:0; list-style:none; color:var(--uix-text-muted); font-size:var(--uix-text-meta); line-height:1.4; }
+  .uix-relationship-graph__legend li { display:inline-flex; align-items:center; gap:var(--uix-space-2); min-width:0; }
+  .uix-relationship-graph__legend-mark { flex:none; box-sizing:border-box; width:.8rem; height:.8rem; border:2px solid var(--uix-graph-type-color, var(--uix-chart-1)); border-radius:var(--uix-radius-pill); }
   /* TENSOR RX-125 (UIX-14): an edge whose type is in the legend draws that type's colour. */
   .uix-relationship-graph__edge[data-typed] { stroke:var(--uix-graph-type-color, var(--uix-border-strong)); }
   .uix-relationship-graph__list { padding:var(--uix-space-3); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); }
   .uix-relationship-graph__list>ul { display:grid; gap:var(--uix-space-2); margin:var(--uix-space-2) 0 0; padding:0; list-style:none; }
-  .uix-relationship-graph__list li { display:flex; justify-content:space-between; gap:var(--uix-space-2); padding:var(--uix-space-2); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
-  .uix-relationship-graph__list li>button:first-child { display:grid; gap:var(--uix-space-1); flex:1; border:0; background:transparent; color:var(--uix-text); text-align:left; } .uix-relationship-graph__list li>button span { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__list>ul>li { display:flex; justify-content:space-between; gap:var(--uix-space-2); padding:var(--uix-space-2); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
+  /* A row: the node's button (its name only), then its neighbours as a list of their own (HAR-1387). */
+  .uix-relationship-graph__list-main { display:grid; flex:1; gap:var(--uix-space-1); min-width:0; }
+  .uix-relationship-graph__list-main>button { display:grid; justify-items:start; gap:var(--uix-space-1); padding:0; border:0; background:transparent; color:var(--uix-text); font:inherit; text-align:left; cursor:pointer; }
+  .uix-relationship-graph__list-main>button span,.uix-relationship-graph__list-relations,.uix-relationship-graph__list-none { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__list-none { margin:0; }
+  /* "Connected to", then the names wrapping beside it, comma after comma, then "Show all N" */
+  .uix-relationship-graph__list-relations { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--uix-space-1); }
+  .uix-relationship-graph__list-relations ul { display:flex; flex:1 1 12rem; flex-wrap:wrap; gap:0 var(--uix-space-1); min-width:0; margin:0; padding:0; list-style:none; }
+  .uix-relationship-graph__list-relations li { min-width:0; overflow-wrap:anywhere; }
+  .uix-relationship-graph__list-relations li:not(:last-child)::after { content:","; }
+  .uix-relationship-graph__list-more { font-size:inherit; }
   .uix-relationship-graph__list-actions { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); }
   .uix-relationship-graph--compact .uix-relationship-graph__visual,.uix-relationship-graph--compact .uix-relationship-graph__visual svg { min-height:16rem; height:16rem; }
   .uix-relationship-graph--state { padding:var(--uix-space-8); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); }
-  @media (max-width:640px) { .uix-relationship-graph__list li { display:grid; } }
+  @media (max-width:640px) { .uix-relationship-graph__list>ul>li { display:grid; } }
 
   /* Layered mode (ADR-0002): HTML node buttons over an SVG edge layer, one transformed stage. */
   .uix-relationship-graph--layered .uix-relationship-graph__toolbar button:disabled { opacity:.5; cursor:not-allowed; }
   .uix-relationship-graph__viewport { position:relative; height:var(--uix-relationship-graph-height, 22rem); overflow:hidden; border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-bg-subtle); cursor:grab; touch-action:pan-y; }
   .uix-relationship-graph__viewport:active { cursor:grabbing; }
+  /* The map is a pan surface: a press starts a pan, never a text selection or a native drag of the
+     words (operator review 2026-10-23: a ghost of the labels followed the pointer). The list below
+     stays selectable; screen readers read the names as before. */
+  .uix-relationship-graph__viewport { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
+  .uix-relationship-graph__viewport :is(img, svg, a) { -webkit-user-drag:none; }
   .uix-relationship-graph__stage { position:absolute; top:0; left:0; transform-origin:0 0; }
   .uix-relationship-graph__stage[data-animate] { transition:transform var(--uix-dur) var(--uix-ease-out); }
   .uix-relationship-graph__edges { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
-  .uix-relationship-graph__link path { fill:none; stroke:color-mix(in srgb, var(--uix-text) 28%, transparent); stroke-width:1.5px; }
-  .uix-relationship-graph__link polygon { fill:color-mix(in srgb, var(--uix-text) 45%, transparent); }
-  .uix-relationship-graph__link text { fill:var(--uix-text-muted); font-family:var(--uix-font-sans); font-size:var(--uix-text-eyebrow); paint-order:stroke; stroke:var(--uix-bg-subtle); stroke-width:4px; stroke-linejoin:round; }
+  /* Opaque, mixed into the map's own surface: fifty edges sharing a bus trunk stay one grey line
+     instead of stacking a translucent stroke to black (HAR-1387). */
+  .uix-relationship-graph__link path { fill:none; stroke:color-mix(in srgb, var(--uix-text) 28%, var(--uix-bg-subtle)); stroke-width:1.5px; }
+  .uix-relationship-graph__link polygon { fill:color-mix(in srgb, var(--uix-text) 45%, var(--uix-bg-subtle)); }
+  /* Edge labels: drawn after every line, each on a chip of the map's surface, in the kit's small
+     text at >= 4.5:1 on the chip; a tone is the chip's border, never the words' colour. */
+  /* zoomed out, a label keeps its on-screen size: scaled by 1 / zoom about its own centre (React
+     sets --uix-graph-label-scale on the stage and places the labels at that size) */
+  .uix-relationship-graph__edge-labels { pointer-events:none; }
+  .uix-relationship-graph__edge-label { transform-box:fill-box; transform-origin:center; transform:scale(var(--uix-graph-label-scale, 1)); }
+  .uix-relationship-graph__edge-label rect { fill:var(--uix-bg-subtle); stroke:var(--uix-border-strong); stroke-width:1px; }
+  .uix-relationship-graph__edge-label[data-tone] rect { stroke:var(--uix-graph-tone); }
+  .uix-relationship-graph__edge-label text { fill:var(--uix-text-muted); font-family:var(--uix-font-sans); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__edge-label[data-active] rect { stroke:var(--uix-accent); }
+  .uix-relationship-graph__edge-label[data-active] text { fill:var(--uix-text); }
+  .uix-relationship-graph__edge-label[data-dimmed] { opacity:.35; }
   .uix-relationship-graph__link[data-kind="lateral"] path, .uix-relationship-graph__link[data-kind="cycle"] path { stroke-dasharray:5 4; }
-  .uix-relationship-graph__link[data-emphasis] path { stroke:color-mix(in srgb, var(--uix-text) 55%, transparent); }
+  .uix-relationship-graph__link[data-emphasis] path { stroke:color-mix(in srgb, var(--uix-text) 55%, var(--uix-bg-subtle)); }
   .uix-relationship-graph__link[data-active] path { stroke:var(--uix-accent); stroke-width:2.5px; }
   .uix-relationship-graph__link[data-active] polygon { fill:var(--uix-accent); }
-  .uix-relationship-graph__link[data-active] text { fill:var(--uix-text); }
   .uix-relationship-graph__link[data-conflicted] path { stroke:var(--uix-danger); }
   .uix-relationship-graph__link[data-dimmed] { opacity:.35; }
   .uix-relationship-graph__column { position:absolute; top:var(--uix-space-4); overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; text-transform:uppercase; letter-spacing:.04em; pointer-events:none; }
@@ -50,6 +80,8 @@
   .uix-relationship-graph__item[data-kind="cluster"] { border-style:dashed; background:var(--uix-surface-2); }
   .uix-relationship-graph__item-label { min-width:0; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; font-size:var(--uix-text-body); line-height:1.25; }
   .uix-relationship-graph__item-meta { min-width:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
+  /* The flag sits on the item's top-right border: the first line of the name keeps clear of it. */
+  .uix-relationship-graph__item[data-flag] .uix-relationship-graph__item-label { padding-right:3.25rem; }
   .uix-relationship-graph__item-flag { position:absolute; top:-9px; right:var(--uix-space-2); padding:0 var(--uix-space-1); border:1px solid var(--uix-border); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); line-height:1.4; }
   .uix-relationship-graph__collapse { position:absolute; height:22px; padding:0 var(--uix-space-2); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); cursor:pointer; }
   .uix-relationship-graph__collapse:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
@@ -60,8 +92,11 @@
   /* The hint, the zoom level and the cluster share one row along the map's bottom edge (TENSOR
      HAR-2512: positioned apart, "Zoom 75 %" was drawn over the hint on a 500–600 px map). The hint
      takes only the room the controls leave: it ellipsises, then hides; then the zoom level gives
-     way; the cluster always stays. The row lets the pointer through to the map. */
-  .uix-relationship-graph__footer { position:absolute; right:var(--uix-space-3); bottom:var(--uix-space-3); left:var(--uix-space-3); z-index:var(--uix-z-raised, 1); display:flex; align-items:center; justify-content:flex-end; gap:var(--uix-space-3); container:uix-relationship-graph-footer / inline-size; pointer-events:none; }
+     way; the cluster always stays. The row lets the pointer through to the map.
+     The row is a band across the map's whole bottom edge, on the map's own background with a rule
+     above it: the map ends at the rule, so no node is ever half under a pill (PR #166 review:
+     "Application 83" and "Rack 27" were). Fit and the first view leave its height free. */
+  .uix-relationship-graph__footer { position:absolute; right:0; bottom:0; left:0; z-index:var(--uix-z-raised, 1); display:flex; align-items:center; justify-content:flex-end; gap:var(--uix-space-3); padding:var(--uix-space-2) var(--uix-space-3); border-top:1px solid var(--uix-border); background:var(--uix-bg-subtle); container:uix-relationship-graph-footer / inline-size; pointer-events:none; }
   .uix-relationship-graph__controls { display:flex; flex:0 1 auto; align-items:center; gap:var(--uix-space-2); min-width:0; pointer-events:auto; }
   .uix-relationship-graph__control-cluster { display:flex; flex:none; padding:var(--uix-space-1); border:1px solid var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-surface); box-shadow:var(--uix-shadow-sm); }
   .uix-relationship-graph__control { display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--uix-radius-sm); background:transparent; color:var(--uix-text-muted); cursor:pointer; }
@@ -69,8 +104,10 @@
   .uix-relationship-graph__control:focus-visible { outline:2px solid var(--uix-ring); outline-offset:1px; }
   .uix-relationship-graph__control:disabled { opacity:.45; cursor:not-allowed; }
   .uix-relationship-graph__control svg { width:16px; height:16px; }
-  .uix-relationship-graph__zoom-level { flex:0 1 auto; min-width:0; overflow:hidden; padding:0 var(--uix-space-1); border-radius:var(--uix-radius-sm); background:color-mix(in srgb, var(--uix-bg-subtle) 85%, transparent); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
-  .uix-relationship-graph__hint { flex:1 1 0; min-width:0; margin:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
+  /* The hint and the zoom level sit on a surface of their own: the map scrolls under them, and a
+     node's name must not show through the words (HAR-1387). */
+  .uix-relationship-graph__zoom-level { flex:0 1 auto; min-width:0; overflow:hidden; padding:var(--uix-space-1) var(--uix-space-2); border:1px solid var(--uix-border); border-radius:var(--uix-radius-sm); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
+  .uix-relationship-graph__hint { flex:0 1000 auto; min-width:0; margin:0 auto 0 0; overflow:hidden; padding:var(--uix-space-1) var(--uix-space-2); border:1px solid var(--uix-border); border-radius:var(--uix-radius-sm); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
   /* A hint cut to a few words says nothing, so it goes; on the narrowest map so does the zoom level. */
   @container uix-relationship-graph-footer (max-width:24rem) { .uix-relationship-graph__hint { display:none; } }
   @container uix-relationship-graph-footer (max-width:17rem) { .uix-relationship-graph__zoom-level { display:none; } }
@@ -78,5 +115,24 @@
   .uix-relationship-graph--fullscreen { position:fixed; inset:0; z-index:var(--uix-z-overlay, 1000); display:flex; flex-direction:column; padding:var(--uix-space-4); background:var(--uix-bg-app, var(--uix-surface)); }
   .uix-relationship-graph--fullscreen .uix-relationship-graph__viewport { flex:1; min-height:0; height:auto; }
   @media (max-width:640px) { .uix-relationship-graph__hint { display:none; } }
-  @media (forced-colors: active) { .uix-relationship-graph__link path { stroke:CanvasText; } .uix-relationship-graph__link polygon { fill:CanvasText; } .uix-relationship-graph__item { border-color:ButtonText; } }
+  /* ── Tones, variants and legends (HAR-1639) ────────────────────────────────────────────────
+     A tone is a colour a node or an edge shares with its legend item; it never stands alone (the
+     consumer says the same in text). A dashed edge is an expected relation that is missing. */
+  .uix-relationship-graph [data-tone="neutral"] { --uix-graph-tone:var(--uix-neutral-solid); }
+  .uix-relationship-graph [data-tone="info"] { --uix-graph-tone:var(--uix-info); }
+  .uix-relationship-graph [data-tone="success"] { --uix-graph-tone:var(--uix-success); }
+  .uix-relationship-graph [data-tone="warning"] { --uix-graph-tone:var(--uix-warning-text); }
+  .uix-relationship-graph [data-tone="danger"] { --uix-graph-tone:var(--uix-danger); }
+  .uix-relationship-graph [data-tone="accent"] { --uix-graph-tone:var(--uix-accent); }
+  .uix-relationship-graph__link[data-tone] path { stroke:var(--uix-graph-tone); stroke-width:2px; }
+  .uix-relationship-graph__link[data-tone] polygon { fill:var(--uix-graph-tone); }
+  .uix-relationship-graph__link[data-variant="dashed"] path,.uix-relationship-graph__edge[data-variant="dashed"] { stroke-dasharray:6 4; }
+  .uix-relationship-graph__edge[data-tone] { stroke:var(--uix-graph-tone); }
+  /* a toned node: its border and a bar on its leading edge */
+  .uix-relationship-graph__item[data-tone] { border-color:var(--uix-graph-tone); box-shadow:inset 4px 0 0 var(--uix-graph-tone); }
+  .uix-relationship-graph__legend li[data-tone] .uix-relationship-graph__legend-mark { border-color:var(--uix-graph-tone); }
+  .uix-relationship-graph__legend li:is([data-shape="edge"],[data-variant]):not([data-shape="node"]) .uix-relationship-graph__legend-mark { width:1.5rem; height:2px; border-width:2px 0 0; border-radius:0; }
+  .uix-relationship-graph__legend li[data-variant="dashed"] .uix-relationship-graph__legend-mark { border-top-style:dashed; }
+  .uix-relationship-graph__legend li[data-shape="node"] .uix-relationship-graph__legend-mark { width:1rem; height:.75rem; border-width:1px 1px 1px 4px; border-radius:var(--uix-radius-xs); }
+  @media (forced-colors: active) { .uix-relationship-graph__edge-label rect { fill:Canvas; stroke:CanvasText; } .uix-relationship-graph__edge-label text { fill:CanvasText; } .uix-relationship-graph__link path { stroke:CanvasText; } .uix-relationship-graph__link polygon { fill:CanvasText; } .uix-relationship-graph__item { border-color:ButtonText; } }
 }

package/styles/components/rule-builder.css

@@ -6,7 +6,8 @@
   /* a fixed combinator (HAR-1618): the Match choice as plain text, where the select was */
   .uix-rule-builder__match { font-size:var(--uix-text-meta); font-weight:400; color:var(--uix-text-muted); }
   .uix-rule-builder__rows { display:grid; gap:var(--uix-space-3); }
-  .uix-rule-builder__condition,.uix-rule-builder__action { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(9rem,1fr) minmax(10rem,1.4fr) auto; gap:var(--uix-space-2); align-items:start; padding:var(--uix-space-3); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
+  /* a choice column grows to the label it shows before the value takes the rest, so "is greater than" is not cut off (HAR-1575) */
+  .uix-rule-builder__condition,.uix-rule-builder__action { display:grid; grid-template-columns:minmax(9rem,max-content) minmax(9rem,max-content) minmax(10rem,1fr) auto; gap:var(--uix-space-2); align-items:start; padding:var(--uix-space-3); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
   .uix-rule-builder__nested { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--uix-space-2); align-items:start; }
   .uix-rule-builder__nested .uix-rule-builder__group { border-left:3px solid var(--uix-accent); }
   .uix-rule-builder__row-actions,.uix-rule-builder__add { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); }

package/styles/components/save-status.css

@@ -16,3 +16,8 @@
     .uix-save-status[data-state="saving"] .uix-save-status__icon { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
   }
 }
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same pulse */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) { :root[data-motion="reduce"] .uix-save-status[data-state="saving"] .uix-save-status__icon { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+}