@dillingerstaffing/strand-vue 0.16.0 → 0.17.0

package/dist/css/strand-ui.css

@@ -735,13 +735,56 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
   outline-offset: 2px;
 }
 
+/* ── Card section (BEM element, stacked rows inside a card) ──
+   A horizontal row inside a composed card. Use multiple
+   .strand-card__section children inside a .strand-card--pad-none
+   to stack header / body / cta rows separated by horizontal rules.
+   First child renders without the top border so the top edge of
+   the card is clean. The --header modifier turns a section into a
+   top-row header with baseline space-between layout for title
+   plus trailing chrome (e.g., overline + chip). This is distinct
+   from the standalone .strand-card-section molecule (DL 11.10
+   section-boundary production), which is a same-named BEM block
+   used outside cards. */
+.strand-card__section {
+  display: block;
+  padding: var(--strand-space-5) var(--strand-space-6);
+  border-top: 1px solid var(--strand-gray-200);
+}
+
+.strand-card__section:first-child {
+  border-top: 0;
+}
+
+.strand-card__section--header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--strand-space-4);
+}
+
 /* ── Channel grid helpers ──
-   Layout helpers for a content-sized card grid with an inline
-   next-event preview row. Useful for membership grids, channel
-   listings, and similar layouts where cards must size to their
-   content rather than fill a fixed cell. */
+   Equal-height card row with a natural top-to-bottom stack inside each
+   card and the final horizontal row (the CTA) anchored to the card's
+   bottom edge. Cards in the same row align to the tallest card's
+   height; an uneven content mix never produces the ragged-bottom look
+   where some cards end tall and others stop short. Useful for channel
+   listings, membership grids, and any layout where cards carry a
+   primary CTA that must read as the shared affordance across the row. */
 .strand-channel-grid {
-  align-items: start;
+  align-items: stretch;
+}
+.strand-channel-grid > .strand-card {
+  display: flex;
+  flex-direction: column;
+}
+.strand-channel-grid > .strand-card > .strand-stack--vertical {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.strand-channel-grid > .strand-card > .strand-stack--vertical > .strand-stack--horizontal:last-child {
+  margin-top: auto;
 }
 
 .strand-channel-title {
@@ -1124,6 +1167,91 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
 }
 
 
+/* ContainerScale */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   CONTAINER SCALE (width visualizer)
+   ══════════════════════════════════════════════════
+   A stacked set of horizontal bars demonstrating container
+   widths (narrow / default / wide / full). Each bar's width
+   is set inline per row via its consumer. */
+
+.strand-container-scale {
+  display: flex;
+  flex-direction: column;
+  gap: var(--strand-space-4);
+}
+
+.strand-container-scale__row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.strand-container-scale__label {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 11px;
+}
+
+.strand-container-scale__label code {
+  font-family: var(--strand-font-mono);
+  font-size: 11px;
+  color: var(--strand-blue-primary);
+  font-weight: var(--strand-weight-medium);
+  background: transparent;
+  padding: 0;
+}
+
+.strand-container-scale__caption {
+  color: var(--strand-gray-500);
+}
+
+.strand-container-scale__track {
+  height: 22px;
+  background: var(--strand-surface-recessed);
+  border-radius: var(--strand-radius-sm);
+  position: relative;
+  border: 1px solid var(--strand-gray-200);
+}
+
+.strand-container-scale__bar {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(37, 99, 235, 0.14),
+    rgba(37, 99, 235, 0.22)
+  );
+  border-right: 2px solid var(--strand-blue-primary);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: var(--strand-space-2);
+  transition: width 300ms var(--strand-ease-out-expo);
+}
+
+.strand-container-scale__px {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-blue-primary);
+}
+
+.strand-container-scale__axis {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--strand-space-1);
+  font-family: var(--strand-font-mono);
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  color: var(--strand-gray-400);
+}
+
+
 /* DataReadout */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 
@@ -1547,6 +1675,26 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
 .strand-instrument-viewport .strand-kv__label { color: var(--strand-gray-400); }
 .strand-instrument-viewport .strand-kv__value { color: var(--strand-gray-200); }
 
+/* Dark-surface cascades for status chips and ghost buttons.
+   The light-surface defaults of .strand-status-chip--neutral and
+   .strand-btn--ghost lose contrast when placed on the dark
+   instrument viewport (full-bleed body or recessed panel). Apply
+   matching on-dark treatments so consumers never need inline
+   style overrides. Scoped to both .strand-body--instrument (full
+   page mode) and .strand-instrument-viewport (recessed panel). */
+.strand-body--instrument .strand-status-chip--neutral,
+.strand-instrument-viewport .strand-status-chip--neutral {
+  background: color-mix(in srgb, var(--strand-gray-400) 12%, transparent);
+  color: var(--strand-gray-300);
+  border: 1px solid color-mix(in srgb, var(--strand-gray-400) 20%, transparent);
+}
+
+.strand-body--instrument .strand-btn--ghost,
+.strand-instrument-viewport .strand-btn--ghost {
+  color: var(--strand-on-blue-primary);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
 .strand-instrument-viewport__label {
   color: var(--strand-gray-400);
   font-family: var(--strand-font-mono);
@@ -2800,108 +2948,962 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
     margin-bottom: var(--strand-space-4);
   }
 
-  .strand-detail-panel__close:hover {
-    background: var(--strand-blue-glow);
-  }
+  .strand-detail-panel__close:hover {
+    background: var(--strand-blue-glow);
+  }
+
+  .strand-detail-panel__close-icon {
+    display: none;
+  }
+
+  .strand-detail-panel__close-text {
+    display: inline;
+  }
+
+  .strand-detail-panel > .strand-overline {
+    margin-bottom: var(--strand-space-2);
+  }
+
+  .strand-map-legend,
+  .strand-coord-readout {
+    display: none;
+  }
+
+  .strand-search-bar__input {
+    font-size: 16px;
+  }
+}
+
+/* ──────────────────────────────────────────────
+   REDUCED MOTION
+   ──────────────────────────────────────────────
+   Strip every animation and transition from the FUI primitives
+   when the user has prefers-reduced-motion. The instrument is
+   still readable, just static. */
+
+@media (prefers-reduced-motion: reduce) {
+  .strand-scanline,
+  .strand-scanline--ambient {
+    display: none;
+  }
+
+  .strand-instrument-viewport--full-bleed::after {
+    animation: none;
+  }
+
+  .strand-map-pin {
+    animation: none;
+  }
+
+  .strand-map-pin::before,
+  .strand-map-pin::after {
+    animation: none;
+  }
+
+  .strand-map-pin:hover {
+    animation: none;
+  }
+
+  .strand-map-pin:hover::before,
+  .strand-map-pin:hover::after {
+    animation: none;
+  }
+
+  .strand-detail-panel {
+    transition: none;
+  }
+
+  .strand-detail-panel.is-open > .strand-overline,
+  .strand-detail-panel--open > .strand-overline,
+  .strand-detail-panel.open > .strand-overline,
+  .strand-detail-panel.is-open .strand-detail-panel__title,
+  .strand-detail-panel--open .strand-detail-panel__title,
+  .strand-detail-panel.open .strand-detail-panel__title,
+  .strand-detail-panel.is-open .strand-detail-panel__meta,
+  .strand-detail-panel--open .strand-detail-panel__meta,
+  .strand-detail-panel.open .strand-detail-panel__meta,
+  .strand-detail-panel.is-open .strand-detail-panel__salary,
+  .strand-detail-panel--open .strand-detail-panel__salary,
+  .strand-detail-panel.open .strand-detail-panel__salary,
+  .strand-detail-panel.is-open .strand-detail-panel__cta,
+  .strand-detail-panel--open .strand-detail-panel__cta,
+  .strand-detail-panel.open .strand-detail-panel__cta,
+  .strand-detail-panel.is-open .strand-detail-panel__source,
+  .strand-detail-panel--open .strand-detail-panel__source,
+  .strand-detail-panel.open .strand-detail-panel__source {
+    animation: none;
+  }
+
+  .strand-map-legend__title::before {
+    animation: none;
+  }
+
+  .strand-coord-readout::before {
+    animation: none;
+  }
+
+  .strand-map-loading__spinner {
+    animation: none;
+    border-color: rgba(59, 142, 246, 0.4);
+  }
+
+  .strand-search-bar__action--locating {
+    animation: none;
+  }
+}
+
+
+/* LabFrame */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   LAB FRAME (fake in-page window hosting a modal demo)
+   ══════════════════════════════════════════════════
+   Doc-specific framing primitive. Real Strand Dialog steals
+   the whole viewport; this frame hosts a dialog-style demo
+   inline so docs can show the open state without replacing
+   the page. Uses macOS-style traffic-light chrome with dot
+   colors set inline per dot. */
+
+.strand-ref-frame {
+  background: var(--strand-surface-recessed);
+  border-radius: var(--strand-radius-lg);
+  overflow: hidden;
+}
+
+.strand-ref-frame__chrome {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 14px;
+  background: var(--strand-surface-subtle);
+  border-bottom: 1px solid var(--strand-gray-200);
+}
+
+.strand-ref-frame__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+  flex: none;
+}
+
+.strand-ref-frame__title {
+  margin-left: var(--strand-space-3);
+  font-family: var(--strand-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--strand-gray-600);
+}
+
+.strand-ref-frame__body {
+  position: relative;
+  min-height: 280px;
+  background: var(--strand-surface-elevated);
+}
+
+.strand-ref-frame__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--strand-space-5);
+  padding: var(--strand-space-8) 36px;
+  transition: filter 180ms var(--strand-ease-out-quart),
+    opacity 180ms var(--strand-ease-out-quart);
+}
+
+.strand-ref-frame__content[aria-hidden="true"] {
+  filter: blur(2px);
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.strand-ref-frame__content-head {
+  /* container for overline + heading; no explicit styles */
+}
+
+.strand-ref-frame__actions {
+  display: flex;
+  gap: 10px;
+}
+
+.strand-ref-frame__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 25, 42, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: strand-ref-frame-overlay-in 160ms var(--strand-ease-out-quart) forwards;
+  padding: var(--strand-space-6);
+}
+
+@keyframes strand-ref-frame-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.strand-ref-frame__panel {
+  background: var(--strand-surface-elevated);
+  border-radius: var(--strand-radius-lg);
+  box-shadow: 0 20px 50px rgba(15, 25, 42, 0.25),
+    0 2px 6px rgba(15, 25, 42, 0.12);
+  width: min(440px, 100%);
+  overflow: hidden;
+  animation: strand-ref-frame-panel-in 180ms var(--strand-ease-out-expo) forwards;
+  transform-origin: center;
+}
+
+@keyframes strand-ref-frame-panel-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.strand-ref-frame__panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--strand-space-5) 22px 14px;
+  gap: var(--strand-space-4);
+}
+
+.strand-ref-frame__panel-title {
+  margin: 4px 0 0;
+  font-family: var(--strand-font-sans);
+  font-size: 18px;
+  font-weight: var(--strand-weight-medium);
+  line-height: 1.3;
+  color: var(--strand-blue-midnight);
+  letter-spacing: -0.01em;
+}
+
+.strand-ref-frame__panel-close {
+  background: transparent;
+  border: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--strand-radius-md);
+  display: grid;
+  place-items: center;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--strand-gray-500);
+  cursor: pointer;
+  flex: none;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-ref-frame__panel-close:hover {
+  background: var(--strand-surface-recessed);
+  color: var(--strand-blue-midnight);
+}
+
+.strand-ref-frame__panel-close:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+.strand-ref-frame__panel-body {
+  padding: 0 22px var(--strand-space-5);
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--strand-gray-700);
+}
+
+.strand-ref-frame__panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: var(--strand-space-4) 22px var(--strand-space-5);
+  border-top: 1px solid var(--strand-gray-100);
+  background: var(--strand-surface-recessed);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .strand-ref-frame__overlay,
+  .strand-ref-frame__panel {
+    animation: none;
+  }
+
+  .strand-ref-frame__content {
+    transition: none;
+  }
+}
+
+
+/* LabGlassStage */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   LAB GLASS STAGE (frosted-glass specimen container)
+   ══════════════════════════════════════════════════
+   A layered blue-gradient backdrop with an embedded glass
+   panel on top, used by docs pages to demonstrate frosted
+   glass surfaces against a cinematic backdrop. */
+
+.strand-ref-glass-stage {
+  position: relative;
+  padding: var(--strand-space-10) var(--strand-space-8);
+  border-radius: var(--strand-radius-lg);
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 20% 30%, rgba(59, 142, 246, 0.45) 0%, transparent 55%),
+    radial-gradient(circle at 80% 70%, rgba(20, 184, 166, 0.35) 0%, transparent 55%),
+    linear-gradient(135deg, var(--strand-blue-midnight) 0%, var(--strand-blue-abyss) 100%);
+}
+
+.strand-ref-glass-panel {
+  position: relative;
+  padding: 22px var(--strand-space-6);
+  border-radius: var(--strand-radius-lg);
+  background: rgba(15, 25, 42, 0.42);
+  -webkit-backdrop-filter: blur(14px) saturate(1.2);
+  backdrop-filter: blur(14px) saturate(1.2);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+  color: var(--strand-on-blue-primary);
+}
+
+
+/* LabRevealStage */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   LAB REVEAL STAGE (staggered entry animation specimen)
+   ══════════════════════════════════════════════════
+   Demonstrates the Principle 7 alive-signal staggered reveal
+   pattern. Four lines animate in at 0 / 180 / 360 / 540 ms.
+   Consumers remount the stage (via a key/ref) to replay. */
+
+.strand-ref-reveal-stage {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: var(--strand-space-5) 0;
+}
+
+.strand-ref-reveal-line {
+  opacity: 0;
+  transform: translateY(8px);
+  animation: strand-ref-reveal-in 2400ms var(--strand-ease-out-quart) forwards;
+  font-family: var(--strand-font-mono);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--strand-blue-midnight);
+  padding: 10px 14px;
+  background: var(--strand-surface-elevated);
+  border-left: 2px solid var(--strand-blue-primary);
+}
+
+.strand-ref-reveal-line:nth-child(1) { animation-delay: 0ms; }
+.strand-ref-reveal-line:nth-child(2) { animation-delay: 180ms; }
+.strand-ref-reveal-line:nth-child(3) { animation-delay: 360ms; }
+.strand-ref-reveal-line:nth-child(4) { animation-delay: 540ms; }
+
+@keyframes strand-ref-reveal-in {
+  0%   { opacity: 0; transform: translateY(8px); }
+  25%  { opacity: 1; transform: translateY(0); }
+  85%  { opacity: 1; transform: translateY(0); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .strand-ref-reveal-line {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+
+
+/* LabShell */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   LAB SHELL / COMPONENT-REFERENCE PAGE CHROME
+   ══════════════════════════════════════════════════
+   A named primitive family for a component-reference page
+   layout: sticky sidebar + scrollable main + header + section
+   + example. Used by the Strand docs site itself, by any
+   consumer building a component showcase, and by the DS Strand
+   lab. 40+ classes map 1:1 to the handoff's showcase-* chrome.
+
+   Computed styles match the baseline at viewport 1440 per
+   `.strand-handoff-render/ledger/focused.json`.
+
+   The sidebar sticky-top offset is set via the CSS custom
+   property `--strand-ref-sticky-top` (default 0) so consumers
+   can push the sidebar below fixed page chrome (e.g. a glass
+   nav) without hardcoding any DS-specific value. Set on the
+   shell root: `<div class="strand-ref-shell"
+   style="--strand-ref-sticky-top: var(--strand-nav-height);">`.
+   ══════════════════════════════════════════════════ */
+
+/* Shell root: two-column grid, sidebar left, main right. */
+.strand-ref-shell {
+  display: grid;
+  grid-template-columns: 256px 1fr;
+  min-height: 100vh;
+}
+
+/* Sidebar: sticky column, full viewport height, hairline right border. */
+.strand-ref-shell__sidebar {
+  position: sticky;
+  top: var(--strand-ref-sticky-top, 0);
+  height: 100vh;
+  background: var(--strand-surface-elevated);
+  border-right: 1px solid var(--strand-gray-200);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Sidebar head: fixed top block with brand and hairline bottom. */
+.strand-ref-shell__sidebar-head {
+  padding: var(--strand-space-6) var(--strand-space-5) 18px;
+  border-bottom: 1px solid var(--strand-gray-100);
+  flex: none;
+  background: var(--strand-surface-elevated);
+}
+
+/* Sidebar scroll region: groups of nav links, overflow-y auto. */
+.strand-ref-shell__sidebar-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+  padding: var(--strand-space-4) var(--strand-space-5) var(--strand-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* Brand row: mark + title + sub stacked horizontally. */
+.strand-ref-shell__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--strand-space-3);
+}
+
+.strand-ref-shell__brand-mark {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--strand-radius-md);
+  background: var(--strand-blue-midnight);
+  color: var(--strand-on-blue-primary);
+  display: grid;
+  place-items: center;
+  font-family: var(--strand-font-mono);
+  font-weight: var(--strand-weight-semibold);
+  font-size: 13px;
+  letter-spacing: 0.04em;
+}
+
+.strand-ref-shell__brand-title {
+  font-family: var(--strand-font-mono);
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-blue-midnight);
+  font-size: 15px;
+}
+
+.strand-ref-shell__brand-sub {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: var(--strand-tracking-ultra);
+  color: var(--strand-gray-500);
+}
+
+/* Sidebar nav group: divider between groups, label + list. */
+.strand-ref-shell__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--strand-space-1);
+  padding-top: 10px;
+  border-top: 1px solid var(--strand-gray-100);
+}
+
+.strand-ref-shell__group:first-of-type {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.strand-ref-shell__group-label {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--strand-blue-midnight);
+  font-weight: var(--strand-weight-semibold);
+  padding: 6px 10px 8px;
+}
+
+.strand-ref-shell__group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.strand-ref-shell__group-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 10px;
+  border-radius: var(--strand-radius-md);
+  font-family: var(--strand-font-sans);
+  font-size: 13px;
+  color: var(--strand-gray-700);
+  text-decoration: none;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-ref-shell__group-link:hover {
+  background: var(--strand-surface-recessed);
+  color: var(--strand-blue-midnight);
+}
+
+.strand-ref-shell__group-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--strand-gray-300);
+  flex: none;
+}
+
+.strand-ref-shell__group-link:hover .strand-ref-shell__group-dot {
+  background: var(--strand-blue-primary);
+}
+
+/* Main: scrolling column, padding 56px 64px 96px, clamped width. */
+.strand-ref-shell__main {
+  padding: 56px var(--strand-space-16) 96px;
+  max-width: 1120px;
+}
+
+/* Header: h1 + lead + metrics row, bottom hairline. */
+.strand-ref-header {
+  padding-bottom: var(--strand-space-10);
+  border-bottom: 1px solid var(--strand-gray-200);
+  margin-bottom: var(--strand-space-8);
+}
+
+.strand-ref-header__title {
+  font-family: var(--strand-font-sans);
+  font-weight: var(--strand-weight-light);
+  letter-spacing: var(--strand-tracking-tight);
+  color: var(--strand-blue-midnight);
+  font-size: 40px;
+  margin: var(--strand-space-3) 0 0;
+}
+
+.strand-ref-header__lead {
+  max-width: 620px;
+  margin: var(--strand-space-4) 0 0;
+  font-family: var(--strand-font-sans);
+  font-size: 20px;
+  color: var(--strand-gray-500);
+  line-height: 1.5;
+}
+
+.strand-ref-header__meta {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, auto));
+  gap: 48px;
+  margin: var(--strand-space-8) 0 0;
+  justify-content: start;
+}
+
+.strand-ref-header__meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--strand-space-2);
+  margin: 0;
+}
+
+.strand-ref-header__meta-label {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+  margin: 0;
+}
+
+.strand-ref-header__meta-value {
+  font-family: var(--strand-font-sans);
+  font-size: 22px;
+  font-weight: var(--strand-weight-light);
+  letter-spacing: -0.01em;
+  color: var(--strand-blue-midnight);
+  margin: 0;
+  line-height: 1.2;
+}
+
+/* Taxonomy explainer block: overline + definition list of terms. */
+.strand-ref-taxonomy {
+  margin-top: var(--strand-space-6);
+  padding: var(--strand-space-5) 22px;
+  background: var(--strand-surface-recessed);
+  border: 1px solid var(--strand-gray-200);
+  border-radius: var(--strand-radius-lg);
+  max-width: 720px;
+}
+
+.strand-ref-taxonomy__title {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--strand-blue-midnight);
+  font-weight: var(--strand-weight-semibold);
+  margin-bottom: 10px;
+}
+
+.strand-ref-taxonomy__list {
+  margin: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--strand-space-2);
+}
+
+.strand-ref-taxonomy__list > div {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 14px;
+  align-items: baseline;
+}
+
+.strand-ref-taxonomy__list dt {
+  font-family: var(--strand-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--strand-blue-primary);
+  font-weight: var(--strand-weight-semibold);
+  margin: 0;
+}
+
+.strand-ref-taxonomy__list dd {
+  margin: 0;
+  font-size: 13px;
+  color: var(--strand-gray-700);
+  line-height: 1.5;
+}
+
+.strand-ref-taxonomy__list em {
+  font-style: italic;
+  color: var(--strand-blue-midnight);
+}
+
+/* Section: vertical block with hairline bottom. */
+.strand-ref-section {
+  padding: var(--strand-space-12) 0;
+  border-bottom: 1px solid var(--strand-gray-200);
+  scroll-margin-top: var(--strand-space-4);
+}
+
+.strand-ref-section:last-child {
+  border-bottom: 0;
+}
+
+.strand-ref-section__head {
+  margin-bottom: var(--strand-space-8);
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--strand-space-6);
+  flex-wrap: wrap;
+}
+
+.strand-ref-section__head h2 {
+  margin: var(--strand-space-2) 0 0;
+  font-weight: var(--strand-weight-light);
+  letter-spacing: var(--strand-tracking-tight);
+  color: var(--strand-blue-midnight);
+  font-size: 28px;
+}
+
+.strand-ref-section__head-note {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: var(--strand-tracking-ultra);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+}
+
+.strand-ref-section__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--strand-space-8);
+}
+
+/* Example: a single component specimen with meta column + demo panel. */
+.strand-ref-example {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 28px;
+  align-items: start;
+}
+
+.strand-ref-example__meta {
+  padding-top: 6px;
+}
+
+.strand-ref-example__label {
+  font-family: var(--strand-font-sans);
+  font-size: 13px;
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-blue-midnight);
+  margin-bottom: 6px;
+}
+
+.strand-ref-example__code {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: var(--strand-gray-500);
+  display: block;
+  line-height: 1.5;
+}
+
+.strand-ref-example__demo {
+  background: var(--strand-surface-elevated);
+  border: 1px solid var(--strand-gray-200);
+  border-radius: var(--strand-radius-lg);
+  /* 24px 28px: token 24px (space-6) + literal 28px chrome value (no token match) */
+  padding: var(--strand-space-6) 28px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+}
+
+.strand-ref-example__demo--pad-none {
+  padding: 0;
+  overflow: hidden;
+}
+
+.strand-ref-example__demo--recessed {
+  background: var(--strand-surface-recessed);
+}
+
+.strand-ref-example__caption {
+  margin-top: var(--strand-space-2);
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--strand-gray-500);
+  max-width: 560px;
+}
+
+/* Responsive: collapse to single column at 1040, further adjust at 560. */
+@media (max-width: 1040px) {
+  .strand-ref-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .strand-ref-shell__sidebar {
+    position: static;
+    height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--strand-gray-200);
+  }
+
+  .strand-ref-shell__main {
+    padding: var(--strand-space-8) var(--strand-space-6) var(--strand-space-16);
+  }
+
+  .strand-ref-example {
+    grid-template-columns: 1fr;
+  }
+
+  .strand-ref-header__meta {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--strand-space-6) var(--strand-space-8);
+  }
+}
+
+@media (max-width: 560px) {
+  .strand-ref-header__meta {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+}
+
+
+/* LabTip */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   LAB TIP (pure-CSS tooltip specimen)
+   ══════════════════════════════════════════════════
+   A hover/focus-driven tooltip for QA specimens on docs
+   pages. This is NOT the production Strand Tooltip (which is
+   JS-driven with collision detection); it is a static
+   specimen showing four fixed positions simultaneously.
+
+   Use the --pinned modifier to show the bubble without
+   hover/focus (useful for before/after screenshots). */
+
+.strand-ref-tip {
+  position: relative;
+  display: inline-flex;
+}
+
+.strand-ref-tip__bubble {
+  position: absolute;
+  z-index: 2;
+  padding: 6px 10px;
+  border-radius: var(--strand-radius-sm);
+  background: var(--strand-blue-midnight);
+  color: var(--strand-on-blue-primary);
+  font-family: var(--strand-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--strand-duration-fast) var(--strand-ease-out-quart),
+    transform var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-ref-tip:hover .strand-ref-tip__bubble,
+.strand-ref-tip:focus-within .strand-ref-tip__bubble,
+.strand-ref-tip--pinned .strand-ref-tip__bubble {
+  opacity: 1;
+}
 
-  .strand-detail-panel__close-icon {
-    display: none;
-  }
+.strand-ref-tip__bubble--top {
+  left: 50%;
+  bottom: calc(100% + 8px);
+  transform: translateX(-50%) translateY(4px);
+}
 
-  .strand-detail-panel__close-text {
-    display: inline;
-  }
+.strand-ref-tip__bubble--bottom {
+  left: 50%;
+  top: calc(100% + 8px);
+  transform: translateX(-50%) translateY(-4px);
+}
 
-  .strand-detail-panel > .strand-overline {
-    margin-bottom: var(--strand-space-2);
-  }
+.strand-ref-tip__bubble--left {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateX(4px) translateY(-50%);
+}
 
-  .strand-map-legend,
-  .strand-coord-readout {
-    display: none;
-  }
+.strand-ref-tip__bubble--right {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateX(-4px) translateY(-50%);
+}
 
-  .strand-search-bar__input {
-    font-size: 16px;
-  }
+.strand-ref-tip:hover .strand-ref-tip__bubble--top,
+.strand-ref-tip--pinned .strand-ref-tip__bubble--top,
+.strand-ref-tip:focus-within .strand-ref-tip__bubble--top {
+  transform: translateX(-50%) translateY(0);
 }
 
-/* ──────────────────────────────────────────────
-   REDUCED MOTION
-   ──────────────────────────────────────────────
-   Strip every animation and transition from the FUI primitives
-   when the user has prefers-reduced-motion. The instrument is
-   still readable, just static. */
+.strand-ref-tip:hover .strand-ref-tip__bubble--bottom,
+.strand-ref-tip--pinned .strand-ref-tip__bubble--bottom,
+.strand-ref-tip:focus-within .strand-ref-tip__bubble--bottom {
+  transform: translateX(-50%) translateY(0);
+}
 
-@media (prefers-reduced-motion: reduce) {
-  .strand-scanline,
-  .strand-scanline--ambient {
-    display: none;
-  }
+.strand-ref-tip:hover .strand-ref-tip__bubble--left,
+.strand-ref-tip--pinned .strand-ref-tip__bubble--left,
+.strand-ref-tip:focus-within .strand-ref-tip__bubble--left {
+  transform: translateX(0) translateY(-50%);
+}
 
-  .strand-instrument-viewport--full-bleed::after {
-    animation: none;
-  }
+.strand-ref-tip:hover .strand-ref-tip__bubble--right,
+.strand-ref-tip--pinned .strand-ref-tip__bubble--right,
+.strand-ref-tip:focus-within .strand-ref-tip__bubble--right {
+  transform: translateX(0) translateY(-50%);
+}
 
-  .strand-map-pin {
-    animation: none;
+@media (prefers-reduced-motion: reduce) {
+  .strand-ref-tip__bubble {
+    transition: none;
   }
+}
 
-  .strand-map-pin::before,
-  .strand-map-pin::after {
-    animation: none;
-  }
 
-  .strand-map-pin:hover {
-    animation: none;
-  }
+/* LabUtilCell */
+/*! Strand UI | MIT License | dillingerstaffing.com */
 
-  .strand-map-pin:hover::before,
-  .strand-map-pin:hover::after {
-    animation: none;
-  }
+/*! Strand UI | MIT License | dillingerstaffing.com */
 
-  .strand-detail-panel {
-    transition: none;
-  }
+/* ══════════════════════════════════════════════════
+   LAB UTIL CELL (utility-class demo tile)
+   ══════════════════════════════════════════════════
+   Demo tile that shows a single utility class in action
+   (e.g. .strand-mt-4, .strand-mx-auto). The row container
+   arranges cells horizontally; each cell has a code label
+   + demo area + optional caption. */
 
-  .strand-detail-panel.is-open > .strand-overline,
-  .strand-detail-panel--open > .strand-overline,
-  .strand-detail-panel.open > .strand-overline,
-  .strand-detail-panel.is-open .strand-detail-panel__title,
-  .strand-detail-panel--open .strand-detail-panel__title,
-  .strand-detail-panel.open .strand-detail-panel__title,
-  .strand-detail-panel.is-open .strand-detail-panel__meta,
-  .strand-detail-panel--open .strand-detail-panel__meta,
-  .strand-detail-panel.open .strand-detail-panel__meta,
-  .strand-detail-panel.is-open .strand-detail-panel__salary,
-  .strand-detail-panel--open .strand-detail-panel__salary,
-  .strand-detail-panel.open .strand-detail-panel__salary,
-  .strand-detail-panel.is-open .strand-detail-panel__cta,
-  .strand-detail-panel--open .strand-detail-panel__cta,
-  .strand-detail-panel.open .strand-detail-panel__cta,
-  .strand-detail-panel.is-open .strand-detail-panel__source,
-  .strand-detail-panel--open .strand-detail-panel__source,
-  .strand-detail-panel.open .strand-detail-panel__source {
-    animation: none;
-  }
+.strand-ref-util-row {
+  display: flex;
+  align-items: stretch;
+  gap: 18px;
+  flex-wrap: wrap;
+}
 
-  .strand-map-legend__title::before {
-    animation: none;
-  }
+.strand-ref-util-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  /* 14px 16px: specimen chrome literal, no token match for 14px */
+  padding: 14px var(--strand-space-4);
+  background: var(--strand-surface-recessed);
+  border: 1px solid var(--strand-gray-200);
+  border-radius: var(--strand-radius-md);
+  min-width: 180px;
+  flex: 1;
+}
 
-  .strand-coord-readout::before {
-    animation: none;
-  }
+.strand-ref-util-cell__code {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: var(--strand-blue-primary);
+  font-weight: var(--strand-weight-medium);
+}
 
-  .strand-map-loading__spinner {
-    animation: none;
-    border-color: rgba(59, 142, 246, 0.4);
-  }
+.strand-ref-util-cell__caption {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: var(--strand-gray-500);
+}
 
-  .strand-search-bar__action--locating {
-    animation: none;
-  }
+.strand-ref-util-cell__demo {
+  background: var(--strand-surface-elevated);
+  border: 1px dashed var(--strand-gray-300);
+  border-radius: var(--strand-radius-sm);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.strand-ref-util-cell__block {
+  background: var(--strand-blue-midnight);
+  color: var(--strand-on-blue-primary);
+  padding: 6px 10px;
+  font-family: var(--strand-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  display: inline-block;
+  align-self: flex-start;
 }
 
 
@@ -4172,6 +5174,53 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
 }
 
 
+/* Swatch */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   SWATCH (color specimen for docs surfaces)
+   ══════════════════════════════════════════════════
+   A single color tile rendered in a grid of swatches on a
+   design-token documentation page. Background and text colors
+   are applied inline via the consumer (because tone varies per
+   swatch). Base chrome (border, min-height, internal layout)
+   is CSS-driven. Grid container is a sibling primitive. */
+
+.strand-swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 10px;
+}
+
+.strand-swatch {
+  display: flex;
+  flex-direction: column;
+  gap: var(--strand-space-1);
+  /* 14px 14px 12px: specimen chrome literal, no token scale match */
+  padding: 14px 14px 12px;
+  border-radius: var(--strand-radius-md);
+  border: 1px solid var(--strand-gray-200);
+  min-height: 92px;
+}
+
+.strand-swatch__name {
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  font-weight: var(--strand-weight-medium);
+}
+
+.strand-swatch__hex {
+  font-family: var(--strand-font-mono);
+  font-size: 11px;
+  opacity: 0.75;
+  margin-top: auto;
+}
+
+
 /* Switch */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 
@@ -4836,6 +5885,67 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
 }
 
 
+/* TokenSpecimen */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   TOKEN SPECIMEN (spacing / radius / shadow tiles)
+   ══════════════════════════════════════════════════
+   Each specimen pairs a visual (spacer bar, radius box, or
+   shadow tile) with a mono label and value. Visuals set their
+   pixel dimensions and shadow/radius inline (per-token variance
+   is the whole point of the spec). */
+
+.strand-token-specimen-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  gap: var(--strand-space-5);
+}
+
+.strand-token-specimen {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-start;
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: var(--strand-gray-500);
+  line-height: 1.5;
+}
+
+.strand-token-specimen b {
+  display: block;
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-blue-midnight);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-size: 10px;
+}
+
+.strand-token-specimen > span {
+  display: block;
+  line-height: 1.5;
+}
+
+.strand-token-specimen__spacer {
+  display: block;
+  height: 16px;
+  background: var(--strand-blue-primary);
+  border-radius: var(--strand-radius-sm);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.strand-token-specimen__box {
+  width: 64px;
+  height: 64px;
+  background: var(--strand-surface-elevated);
+  border: 1px solid var(--strand-gray-200);
+}
+
+
 /* Tooltip */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 
@@ -4914,6 +6024,46 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
 }
 
 
+/* TypeSpecimen */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ══════════════════════════════════════════════════
+   TYPE SPECIMEN (docs-site typography tile)
+   ══════════════════════════════════════════════════
+   A stacked specimen: large display text on top, mono meta
+   line below. Use inside a section body on a typography
+   documentation page. Dashed divider between siblings. */
+
+.strand-type-specimen {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--strand-space-3);
+  padding: var(--strand-space-5) 0;
+  border-top: 1px dashed var(--strand-gray-200);
+}
+
+.strand-type-specimen:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.strand-type-specimen__meta {
+  display: block;
+  font-family: var(--strand-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: var(--strand-gray-500);
+  line-height: 1.5;
+}
+
+.strand-type-specimen__meta b {
+  color: var(--strand-blue-primary);
+  font-weight: var(--strand-weight-medium);
+}
+
+
 /* Static & Utilities */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 
@@ -5222,6 +6372,37 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
   color: var(--strand-teal-vital);
 }
 
+/* ── Key-Value Row: editorial modifier ──
+   Additive modifier on .strand-kv for card-metadata contexts
+   (composed cards, editorial specimens) where values should
+   read as soft sans-serif Blue-midnight rather than the default
+   mono-gray instrument readout. Dashed divider between rows.
+   Use inside .strand-card__section content blocks. The base
+   .strand-kv default stays mono-tabular for instrument surfaces. */
+.strand-kv--editorial {
+  padding: 6px 0;
+  font-size: var(--strand-text-sm);
+  line-height: 1.4;
+}
+
+.strand-kv--editorial + .strand-kv--editorial {
+  border-top: 1px dashed var(--strand-gray-200);
+}
+
+.strand-kv--editorial .strand-kv__label {
+  letter-spacing: var(--strand-tracking-ultra);
+  flex: none;
+  white-space: nowrap;
+}
+
+.strand-kv--editorial .strand-kv__value {
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  color: var(--strand-blue-midnight);
+  font-weight: var(--strand-weight-medium);
+  font-variant-numeric: normal;
+}
+
 /* ── Diagnostic Log Entry ──
    Derivation: inline-sequence + ranked-sequence (DL 11.10).
    time(OVERLINE) + status(OVERLINE+COLOR_SEMANTIC) + text(SECONDARY) + RANK_BORDER */