@dillingerstaffing/strand-svelte 0.10.0 → 0.12.0

package/dist/css/strand-ui.css

@@ -783,6 +783,10 @@
   font-size: var(--strand-text-4xl);
 }
 
+.strand-data-readout--xl .strand-data-readout__value {
+  font-size: clamp(4.5rem, 10vw, 7rem);
+}
+
 
 /* Dialog */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -1170,6 +1174,32 @@
   outline-offset: 2px;
 }
 
+/* ── CTA link variant ── */
+.strand-link--cta {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--strand-touch-target);
+  padding-block: var(--strand-space-2);
+  font-size: var(--strand-text-sm);
+}
+
+.strand-link--cta:hover {
+  color: var(--strand-blue-vivid);
+}
+
+/* ── Monospace link variant (footer, overline-style) ── */
+.strand-link--mono {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  letter-spacing: var(--strand-tracking-wider);
+  color: var(--strand-gray-400);
+  background-image: none;
+}
+
+.strand-link--mono:hover {
+  color: var(--strand-blue-primary);
+}
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   .strand-link {
@@ -1589,11 +1619,35 @@
 .strand-reveal-group > .strand-reveal:nth-child(5) { transition-delay: calc(var(--strand-stagger-delay) * 4); }
 .strand-reveal-group > .strand-reveal:nth-child(6) { transition-delay: var(--strand-duration-slow); }
 
+/* ── CSS-only scroll-driven animation (no JS required) ── */
+@supports (animation-timeline: view()) {
+  .strand-reveal {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: none;
+    animation: strand-reveal-up linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 100%;
+  }
+
+  .strand-reveal-group > .strand-reveal {
+    animation: strand-reveal-up linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 100%;
+  }
+
+  @keyframes strand-reveal-up {
+    from { opacity: 0; transform: translateY(24px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .strand-reveal {
     opacity: 1;
     transform: none;
     transition: none;
+    animation: none;
   }
 }
 
@@ -1630,6 +1684,11 @@
   background-color: var(--strand-surface-recessed);
 }
 
+/* ── Border variant ── */
+.strand-section--border-top {
+  border-top: 1px solid var(--strand-gray-200);
+}
+
 
 /* Select */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -2755,6 +2814,9 @@
    Derivation: section-boundary production (DL 11.10).
    OVERLINE + border-bottom + margin-bottom + padding-bottom */
 .strand-card-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: var(--strand-space-3);
   padding-bottom: var(--strand-space-2);
   border-bottom: 1px solid var(--strand-gray-200);
@@ -2890,3 +2952,43 @@
   color: var(--strand-gray-400);
 }
 
+/* ══════════════════════════════════════════════════
+   UTILITIES
+   ══════════════════════════════════════════════════ */
+
+/* ── Screen reader only ── */
+.strand-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Section header ──
+   Derivation: section-boundary production (DL 11.10).
+   Centered heading group with bottom margin. */
+.strand-section-header {
+  margin-bottom: clamp(2rem, 4vw, 4rem);
+}
+
+/* ── Step indicator ──
+   Numbered position indicator for sequential steps. */
+.strand-step-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--strand-space-8);
+  height: var(--strand-space-8);
+  border-radius: var(--strand-radius-full);
+  background: var(--strand-blue-glow);
+  color: var(--strand-blue-primary);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-sm);
+  font-weight: var(--strand-weight-semibold);
+}
+