@dillingerstaffing/strand-ui 0.1.1 → 0.2.0

package/dist/css/strand-ui.css

@@ -1,4 +1,4 @@
-/*! Strand UI v0.1.1 | MIT License | dillingerstaffing.com */
+/*! Strand UI v0.2.0 | MIT License | dillingerstaffing.com */
 
 /* Alert */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -10,7 +10,8 @@
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
-  padding: var(--strand-space-4);
+  padding: var(--strand-space-6);
+  padding-left: var(--strand-space-5);
   border-radius: var(--strand-radius-md);
   border-left: 4px solid transparent;
   font-family: var(--strand-font-sans);
@@ -60,8 +61,8 @@
   color: var(--strand-gray-500);
   font-size: var(--strand-text-base);
   cursor: pointer;
-  transition: background var(--strand-duration-fast) ease,
-    color var(--strand-duration-fast) ease;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-alert__dismiss:hover {
@@ -69,6 +70,13 @@
   color: var(--strand-gray-600);
 }
 
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-alert__dismiss {
+    transition: none;
+  }
+}
+
 
 /* Avatar */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -149,7 +157,7 @@
   justify-content: center;
   font-family: var(--strand-font-sans);
   font-weight: var(--strand-weight-semibold);
-  color: #fff;
+  color: var(--strand-on-blue-primary);
 }
 
 /* Position at top-right when wrapping children */
@@ -231,13 +239,18 @@
 .strand-breadcrumb__link {
   color: var(--strand-gray-500);
   text-decoration: none;
-  transition: color var(--strand-duration-fast) ease;
+  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-breadcrumb__link:hover {
   color: var(--strand-gray-600);
 }
 
+.strand-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 .strand-breadcrumb__current {
   color: var(--strand-gray-600);
   font-weight: var(--strand-weight-medium);
@@ -270,11 +283,11 @@
   cursor: pointer;
   user-select: none;
   transition:
-    background var(--strand-duration-fast) ease,
-    border-color var(--strand-duration-fast) ease,
-    color var(--strand-duration-fast) ease,
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart),
     transform var(--strand-duration-fast) var(--strand-ease-out-expo),
-    box-shadow var(--strand-duration-fast) ease;
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-btn:active:not(:disabled) {
@@ -336,7 +349,7 @@
 .strand-btn--primary:hover:not(:disabled) {
   background: var(--strand-blue-vivid);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
+  box-shadow: var(--strand-hover-shadow-primary);
 }
 
 .strand-btn--primary:active:not(:disabled) {
@@ -369,6 +382,7 @@
 
 .strand-btn--ghost:hover:not(:disabled) {
   background: var(--strand-blue-glow);
+  transform: translateY(-1px);
 }
 
 .strand-btn--ghost:active:not(:disabled) {
@@ -382,13 +396,13 @@
 }
 
 .strand-btn--danger:hover:not(:disabled) {
-  background: #DC2626;
+  background: var(--strand-red-alert-vivid);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
+  box-shadow: var(--strand-hover-shadow-danger);
 }
 
 .strand-btn--danger:active:not(:disabled) {
-  background: #B91C1C;
+  background: var(--strand-red-alert-deep);
 }
 
 /* ── Loading state ── */
@@ -425,6 +439,12 @@
   gap: var(--strand-space-2);
 }
 
+/* ── Focus ring (Part XII: Accessibility Ring) ── */
+.strand-btn:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   .strand-btn {
@@ -450,6 +470,9 @@
   border-radius: var(--strand-radius-lg);
   background: var(--strand-surface-elevated);
   font-family: var(--strand-font-sans);
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 100%;
 }
 
 /* ── Variants ── */
@@ -481,15 +504,21 @@
 }
 
 .strand-card--pad-sm {
-  padding: var(--strand-space-3);
+  padding: var(--strand-space-4);
 }
 
 .strand-card--pad-md {
-  padding: var(--strand-space-5);
+  padding: var(--strand-space-6);
 }
 
 .strand-card--pad-lg {
-  padding: var(--strand-space-8);
+  padding: var(--strand-space-10);
+}
+
+/* ── Focus ring (interactive cards) ── */
+.strand-card--interactive:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
 }
 
 /* ── Reduced motion ── */
@@ -546,9 +575,9 @@
   color: var(--strand-on-blue-primary);
   flex-shrink: 0;
   transition:
-    background var(--strand-duration-fast) ease,
-    border-color var(--strand-duration-fast) ease,
-    box-shadow var(--strand-duration-fast) ease;
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-checkbox__icon {
@@ -559,7 +588,7 @@
 /* ── Focus ring ── */
 .strand-checkbox__native:focus-visible ~ .strand-checkbox__control {
   border-color: var(--strand-blue-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
 }
 
 /* ── Checked ── */
@@ -676,7 +705,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(15, 23, 42, 0.5);
+  background: var(--strand-backdrop);
 }
 
 /* ── Panel ── */
@@ -685,7 +714,7 @@
   width: 100%;
   max-width: 560px;
   margin: var(--strand-space-4);
-  padding: var(--strand-space-6);
+  padding: var(--strand-space-8);
   background: var(--strand-surface-elevated);
   border-radius: var(--strand-radius-xl);
   box-shadow: var(--strand-elevation-4);
@@ -711,8 +740,8 @@
 /* ── Close button ── */
 .strand-dialog__close {
   position: absolute;
-  top: var(--strand-space-4);
-  right: var(--strand-space-4);
+  top: var(--strand-space-6);
+  right: var(--strand-space-6);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -725,8 +754,8 @@
   color: var(--strand-gray-500);
   font-size: var(--strand-text-lg);
   cursor: pointer;
-  transition: background var(--strand-duration-fast) ease,
-    color var(--strand-duration-fast) ease;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-dialog__close:hover {
@@ -736,6 +765,7 @@
 
 /* ── Body ── */
 .strand-dialog__body {
+  padding-top: var(--strand-space-6);
   color: var(--strand-gray-600);
   font-size: var(--strand-text-sm);
 }
@@ -802,7 +832,7 @@
 .strand-form-field {
   display: flex;
   flex-direction: column;
-  gap: var(--strand-space-1);
+  gap: var(--strand-space-2);
 }
 
 /* ── Label ── */
@@ -851,8 +881,29 @@
 /* ── Base ── */
 .strand-grid {
   display: grid;
+  overflow: hidden;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.strand-grid > * {
+  min-width: 0;
 }
 
+/* ── Column utilities ── */
+.strand-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
+.strand-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.strand-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+/* ── Gap utilities ── */
+.strand-grid--gap-1 { gap: var(--strand-space-1); }
+.strand-grid--gap-2 { gap: var(--strand-space-2); }
+.strand-grid--gap-3 { gap: var(--strand-space-3); }
+.strand-grid--gap-4 { gap: var(--strand-space-4); }
+.strand-grid--gap-5 { gap: var(--strand-space-5); }
+.strand-grid--gap-6 { gap: var(--strand-space-6); }
+.strand-grid--gap-8 { gap: var(--strand-space-8); }
+
 
 /* Input */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -865,13 +916,13 @@
   border: 1px solid var(--strand-gray-200);
   border-radius: var(--strand-radius-md);
   transition:
-    border-color var(--strand-duration-fast) ease,
-    box-shadow var(--strand-duration-fast) ease;
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-input:focus-within {
   border-color: var(--strand-blue-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
 }
 
 /* ── Field ── */
@@ -923,7 +974,7 @@
 
 .strand-input--error:focus-within {
   border-color: var(--strand-red-alert);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  box-shadow: var(--strand-focus-ring-error);
 }
 
 /* ── Disabled ── */
@@ -936,6 +987,13 @@
   cursor: not-allowed;
 }
 
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-input {
+    transition: none;
+  }
+}
+
 
 /* Link */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -956,6 +1014,12 @@
   background-size: 100% 1px;
 }
 
+/* ── Focus ring ── */
+.strand-link:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   .strand-link {
@@ -1007,13 +1071,18 @@
   text-decoration: none;
   font-size: var(--strand-text-sm);
   font-weight: var(--strand-weight-medium);
-  transition: color var(--strand-duration-fast) ease;
+  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-nav__link:hover {
   color: var(--strand-gray-900);
 }
 
+.strand-nav__link:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 .strand-nav__link--active {
   color: var(--strand-blue-primary);
   font-weight: var(--strand-weight-medium);
@@ -1041,13 +1110,18 @@
   background: transparent;
   color: var(--strand-gray-600);
   cursor: pointer;
-  transition: background var(--strand-duration-fast) ease;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-nav__hamburger:hover {
   background: var(--strand-gray-200);
 }
 
+.strand-nav__hamburger:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 .strand-nav__hamburger-icon {
   display: block;
   width: 20px;
@@ -1091,7 +1165,7 @@
   text-decoration: none;
   font-size: var(--strand-text-sm);
   font-weight: var(--strand-weight-medium);
-  transition: color var(--strand-duration-fast) ease;
+  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-nav__mobile-link:hover {
@@ -1165,13 +1239,13 @@
   height: 100%;
   background: var(--strand-blue-primary);
   border-radius: var(--strand-radius-full);
-  transition: width var(--strand-duration-normal) ease;
+  transition: width var(--strand-duration-normal) var(--strand-ease-out-quart);
 }
 
 /* ── Bar indeterminate ── */
 .strand-progress--bar.strand-progress--indeterminate .strand-progress__fill {
   width: 40%;
-  animation: strand-progress-shimmer 1.5s ease-in-out infinite;
+  animation: strand-progress-shimmer 1.5s var(--strand-ease-in-out-sine) infinite;
 }
 
 @keyframes strand-progress-shimmer {
@@ -1200,7 +1274,7 @@
 }
 
 .strand-progress--ring .strand-progress__ring {
-  transition: stroke-dashoffset var(--strand-duration-normal) ease;
+  transition: stroke-dashoffset var(--strand-duration-normal) var(--strand-ease-out-quart);
 }
 
 /* ── Ring indeterminate ── */
@@ -1273,9 +1347,9 @@
   background: var(--strand-surface-elevated);
   flex-shrink: 0;
   transition:
-    background var(--strand-duration-fast) ease,
-    border-color var(--strand-duration-fast) ease,
-    box-shadow var(--strand-duration-fast) ease;
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-radio__dot {
@@ -1290,7 +1364,7 @@
 /* ── Focus ring ── */
 .strand-radio__native:focus-visible ~ .strand-radio__control {
   border-color: var(--strand-blue-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
 }
 
 /* ── Checked ── */
@@ -1376,13 +1450,13 @@
   border: 1px solid var(--strand-gray-200);
   border-radius: var(--strand-radius-md);
   transition:
-    border-color var(--strand-duration-fast) ease,
-    box-shadow var(--strand-duration-fast) ease;
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-select:focus-within {
   border-color: var(--strand-blue-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
 }
 
 /* ── Field ── */
@@ -1421,7 +1495,7 @@
 
 .strand-select--error:focus-within {
   border-color: var(--strand-red-alert);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  box-shadow: var(--strand-focus-ring-error);
 }
 
 /* ── Disabled ── */
@@ -1434,6 +1508,13 @@
   cursor: not-allowed;
 }
 
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-select {
+    transition: none;
+  }
+}
+
 
 /* Skeleton */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -1453,7 +1534,7 @@
     var(--strand-gray-100) 75%
   );
   background-size: 200% 100%;
-  animation: strand-skeleton-shimmer 1.8s ease-in-out infinite;
+  animation: strand-skeleton-shimmer 1.8s var(--strand-ease-in-out-sine) infinite;
 }
 
 @keyframes strand-skeleton-shimmer {
@@ -1468,7 +1549,7 @@
 /* ── Text variant ── */
 .strand-skeleton--text {
   height: 1em;
-  border-radius: 4px;
+  border-radius: var(--strand-radius-sm);
 }
 
 /* ── Rectangle variant ── */
@@ -1510,7 +1591,7 @@
   border-radius: var(--strand-radius-full);
   outline: none;
   cursor: pointer;
-  transition: background var(--strand-duration-fast) ease;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 /* ── Thumb: Webkit ── */
@@ -1524,7 +1605,7 @@
   cursor: pointer;
   box-shadow: var(--strand-elevation-1);
   transition:
-    background var(--strand-duration-fast) ease,
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
     transform var(--strand-duration-fast) var(--strand-ease-out-expo);
 }
 
@@ -1548,7 +1629,7 @@
   cursor: pointer;
   box-shadow: var(--strand-elevation-1);
   transition:
-    background var(--strand-duration-fast) ease,
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
     transform var(--strand-duration-fast) var(--strand-ease-out-expo);
 }
 
@@ -1571,11 +1652,11 @@
 
 /* ── Focus ── */
 .strand-slider__field:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
 }
 
 .strand-slider__field:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
 }
 
 /* ── Disabled ── */
@@ -1670,6 +1751,12 @@
 /* ── Base ── */
 .strand-stack {
   display: flex;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.strand-stack > * {
+  min-width: 0;
 }
 
 /* ── Direction ── */
@@ -1722,6 +1809,15 @@
   flex-wrap: wrap;
 }
 
+/* ── Gap utilities ── */
+.strand-stack--gap-1 { gap: var(--strand-space-1); }
+.strand-stack--gap-2 { gap: var(--strand-space-2); }
+.strand-stack--gap-3 { gap: var(--strand-space-3); }
+.strand-stack--gap-4 { gap: var(--strand-space-4); }
+.strand-stack--gap-5 { gap: var(--strand-space-5); }
+.strand-stack--gap-6 { gap: var(--strand-space-6); }
+.strand-stack--gap-8 { gap: var(--strand-space-8); }
+
 
 /* Switch */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -1753,14 +1849,14 @@
   cursor: pointer;
   flex-shrink: 0;
   transition:
-    background var(--strand-duration-fast) ease,
-    border-color var(--strand-duration-fast) ease,
-    box-shadow var(--strand-duration-fast) ease;
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-switch__track:focus-visible {
   border-color: var(--strand-blue-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
   outline: none;
 }
 
@@ -1870,6 +1966,11 @@
   color: var(--strand-gray-600);
 }
 
+.strand-table__sort-btn:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 .strand-table__sort-indicator {
   font-size: var(--strand-text-xs);
   opacity: 0.6;
@@ -1886,7 +1987,7 @@
 
 /* ── Row hover ── */
 .strand-table__row {
-  transition: background var(--strand-duration-fast) ease;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-table__row:hover {
@@ -1924,14 +2025,19 @@
   color: var(--strand-gray-500);
   cursor: pointer;
   transition:
-    color var(--strand-duration-fast) ease,
-    border-color var(--strand-duration-normal) var(--strand-ease-out-expo);
+    color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-expo);
 }
 
 .strand-tabs__tab:hover {
   color: var(--strand-gray-600);
 }
 
+.strand-tabs__tab:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 .strand-tabs__tab--active {
   color: var(--strand-blue-primary);
   border-bottom-color: var(--strand-blue-primary);
@@ -1976,7 +2082,7 @@
 
 .strand-tag--solid.strand-tag--teal {
   background: rgba(20, 184, 166, 0.1);
-  color: #0D7377;
+  color: var(--strand-on-teal-tint);
 }
 
 .strand-tag--solid.strand-tag--blue {
@@ -1986,12 +2092,12 @@
 
 .strand-tag--solid.strand-tag--amber {
   background: rgba(245, 158, 11, 0.1);
-  color: #92400E;
+  color: var(--strand-on-amber-tint);
 }
 
 .strand-tag--solid.strand-tag--red {
   background: rgba(239, 68, 68, 0.1);
-  color: #991B1B;
+  color: var(--strand-on-red-tint);
 }
 
 /* ── Outlined variant ── */
@@ -2006,7 +2112,7 @@
 
 .strand-tag--outlined.strand-tag--teal {
   border-color: var(--strand-teal-vital);
-  color: #0D7377;
+  color: var(--strand-on-teal-tint);
 }
 
 .strand-tag--outlined.strand-tag--blue {
@@ -2016,12 +2122,12 @@
 
 .strand-tag--outlined.strand-tag--amber {
   border-color: var(--strand-amber-caution);
-  color: #92400E;
+  color: var(--strand-on-amber-tint);
 }
 
 .strand-tag--outlined.strand-tag--red {
   border-color: var(--strand-red-alert);
-  color: #991B1B;
+  color: var(--strand-on-red-tint);
 }
 
 /* ── Remove button ── */
@@ -2036,7 +2142,7 @@
   opacity: 0.6;
   cursor: pointer;
   border-radius: var(--strand-radius-sm);
-  transition: opacity var(--strand-duration-fast) ease;
+  transition: opacity var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-tag__remove:hover {
@@ -2063,13 +2169,13 @@
   border: 1px solid var(--strand-gray-200);
   border-radius: var(--strand-radius-md);
   transition:
-    border-color var(--strand-duration-fast) ease,
-    box-shadow var(--strand-duration-fast) ease;
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-textarea:focus-within {
   border-color: var(--strand-blue-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
 }
 
 /* ── Field ── */
@@ -2113,7 +2219,7 @@
 
 .strand-textarea--error:focus-within {
   border-color: var(--strand-red-alert);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  box-shadow: var(--strand-focus-ring-error);
 }
 
 /* ── Disabled ── */
@@ -2126,6 +2232,13 @@
   cursor: not-allowed;
 }
 
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-textarea {
+    transition: none;
+  }
+}
+
 
 /* Toast */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -2149,7 +2262,7 @@
   justify-content: space-between;
   min-width: 280px;
   max-width: 420px;
-  padding: var(--strand-space-4);
+  padding: var(--strand-space-4) var(--strand-space-5);
   background: var(--strand-surface-elevated);
   border-radius: var(--strand-radius-lg);
   border-left: 4px solid transparent;
@@ -2200,8 +2313,8 @@
   color: var(--strand-gray-500);
   font-size: var(--strand-text-base);
   cursor: pointer;
-  transition: background var(--strand-duration-fast) ease,
-    color var(--strand-duration-fast) ease;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-toast__dismiss:hover {
@@ -2248,14 +2361,14 @@
   z-index: 1200;
   padding: var(--strand-space-1) var(--strand-space-2);
   background: var(--strand-gray-900);
-  color: #fff;
+  color: var(--strand-on-blue-primary);
   font-family: var(--strand-font-sans);
   font-size: var(--strand-text-xs);
   border-radius: var(--strand-radius-md);
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
-  transition: opacity var(--strand-duration-fast) ease;
+  transition: opacity var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-tooltip--visible {
@@ -2299,3 +2412,53 @@
 }
 
 
+/* Static */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Presentation mode ──
+   Add .strand-static to a parent element to render components
+   at full visual fidelity without interaction.
+   Use for documentation, showcases, and screenshots. */
+
+.strand-static {
+  pointer-events: none;
+}
+
+.strand-static [disabled],
+.strand-static [aria-disabled="true"] {
+  opacity: 1;
+  cursor: default;
+}
+
+.strand-static .strand-btn:disabled {
+  opacity: 1;
+  cursor: default;
+}
+
+.strand-static .strand-toast {
+  position: static;
+}
+
+.strand-static .strand-tooltip {
+  position: static;
+}
+
+.strand-static *,
+.strand-static *::before,
+.strand-static *::after {
+  transition: none !important;
+  animation: none !important;
+}
+
+/* ── Recessed viewport ──
+   The instrument viewport sits below the card surface.
+   Use for component previews, showcases, and documentation. */
+
+.strand-viewport {
+  background: var(--strand-surface-recessed);
+  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  border-radius: var(--strand-radius-lg);
+  padding: var(--strand-space-6);
+}
+
+