@dillingerstaffing/strand-ui 0.11.0 → 0.12.0

package/dist/css/strand-ui.css

@@ -1140,6 +1140,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 {
@@ -1551,11 +1577,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;
   }
 }
 
@@ -1590,6 +1640,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 */
@@ -2829,4 +2884,44 @@
   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);
+}
+
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Strand UI - Preact/React component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -60,7 +60,7 @@
     }
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.11.0"
+    "@dillingerstaffing/strand": "^0.12.0"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",

package/src/components/Link/Link.css

@@ -22,6 +22,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 {

package/src/components/ScrollReveal/ScrollReveal.css

@@ -20,10 +20,34 @@
 .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;
   }
 }

package/src/components/Section/Section.css

@@ -26,3 +26,8 @@
 .strand-section--bg-recessed {
   background-color: var(--strand-surface-recessed);
 }
+
+/* ── Border variant ── */
+.strand-section--border-top {
+  border-top: 1px solid var(--strand-gray-200);
+}

package/src/static.css

@@ -255,3 +255,43 @@
   text-transform: uppercase;
   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);
+}