@dillingerstaffing/strand-vue 0.11.0 → 0.13.0

package/dist/css/strand-ui.css

@@ -1174,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 {
@@ -1356,6 +1382,21 @@
   }
 }
 
+/* ── Glassmorphic variant (DL 11.5: "white or glassmorphic") ── */
+.strand-nav--glass {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: auto;
+  padding: var(--strand-space-4) 0;
+  background: rgba(250, 252, 254, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   .strand-nav__link,
@@ -1593,11 +1634,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;
   }
 }
 
@@ -1634,6 +1699,16 @@
   background-color: var(--strand-surface-recessed);
 }
 
+/* ── Compact variant ── */
+.strand-section--compact {
+  padding-block: var(--strand-space-12);
+}
+
+/* ── Border variant ── */
+.strand-section--border-top {
+  border-top: 1px solid var(--strand-gray-200);
+}
+
 
 /* Select */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -2897,3 +2972,81 @@
   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);
+  margin-bottom: var(--strand-space-3);
+}
+
+/* ── Text center ── */
+.strand-text-center {
+  text-align: center;
+}
+
+/* ── Code name (mono identifier heading) ── */
+.strand-code-name {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-base);
+  font-weight: var(--strand-weight-semibold);
+  color: var(--strand-blue-midnight);
+  margin: 0;
+}
+
+/* ── Heading small (section heading inside cards) ── */
+.strand-heading--sm {
+  font-size: var(--strand-text-lg);
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-gray-800);
+  margin: 0;
+}
+
+/* ── Viewport flex modifiers (component showcase layout) ── */
+.strand-viewport--flex {
+  display: flex;
+  align-items: center;
+  gap: var(--strand-space-4);
+  flex-wrap: wrap;
+}
+
+.strand-viewport--flex-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--strand-space-4);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-vue",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Strand UI - Vue 3 component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.11.0"
+    "@dillingerstaffing/strand": "^0.13.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.0",