@dillingerstaffing/strand-ui 0.1.1 → 0.2.1

package/src/components/DataReadout/DataReadout.test.tsx

@@ -93,6 +93,42 @@ describe("DataReadout", () => {
     expect(readout?.className).toContain("custom");
   });
 
+  // ── Size variants ──
+
+  it("applies sm size modifier class", () => {
+    const { container } = render(
+      <DataReadout label="Users" value="12.8K" size="sm" />,
+    );
+    const readout = container.querySelector(".strand-data-readout");
+    expect(readout?.className).toContain("strand-data-readout--sm");
+  });
+
+  it("applies lg size modifier class", () => {
+    const { container } = render(
+      <DataReadout label="Revenue" value="$1.2M" size="lg" />,
+    );
+    const readout = container.querySelector(".strand-data-readout");
+    expect(readout?.className).toContain("strand-data-readout--lg");
+  });
+
+  it("does not apply size modifier for md (default)", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" size="md" />,
+    );
+    const readout = container.querySelector(".strand-data-readout");
+    expect(readout?.className).not.toContain("strand-data-readout--md");
+    expect(readout?.className).not.toContain("strand-data-readout--sm");
+    expect(readout?.className).not.toContain("strand-data-readout--lg");
+  });
+
+  it("does not apply size modifier when size is omitted", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" />,
+    );
+    const readout = container.querySelector(".strand-data-readout");
+    expect(readout?.className).toBe("strand-data-readout");
+  });
+
   // ── Forwarded props ──
 
   it("forwards additional props", () => {

package/src/components/DataReadout/DataReadout.tsx

@@ -9,11 +9,17 @@ export interface DataReadoutProps
   label: string;
   /** The large displayed value */
   value: string | number;
+  /** Size variant: sm (compact), md (default), lg (hero) */
+  size?: "sm" | "md" | "lg";
 }
 
 export const DataReadout = forwardRef<HTMLDivElement, DataReadoutProps>(
-  ({ label, value, className = "", ...rest }, ref) => {
-    const classes = ["strand-data-readout", className]
+  ({ label, value, size, className = "", ...rest }, ref) => {
+    const classes = [
+      "strand-data-readout",
+      size && size !== "md" ? `strand-data-readout--${size}` : "",
+      className,
+    ]
       .filter(Boolean)
       .join(" ");
 

package/src/components/Dialog/Dialog.css

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(15, 23, 42, 0.5);
+  background: var(--strand-backdrop);
 }
 
 /* ── Panel ── */
@@ -17,7 +17,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);
@@ -43,8 +43,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;
@@ -57,8 +57,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 {
@@ -68,6 +68,7 @@
 
 /* ── Body ── */
 .strand-dialog__body {
+  padding-top: var(--strand-space-6);
   color: var(--strand-gray-600);
   font-size: var(--strand-text-sm);
 }

package/src/components/FormField/FormField.css

@@ -4,7 +4,7 @@
 .strand-form-field {
   display: flex;
   flex-direction: column;
-  gap: var(--strand-space-1);
+  gap: var(--strand-space-2);
 }
 
 /* ── Label ── */

package/src/components/Grid/Grid.css

@@ -3,4 +3,25 @@
 /* ── 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); }

package/src/components/Input/Input.css

@@ -8,13 +8,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 ── */
@@ -66,7 +66,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 ── */
@@ -78,3 +78,10 @@
 .strand-input--disabled .strand-input__field {
   cursor: not-allowed;
 }
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-input {
+    transition: none;
+  }
+}

package/src/components/Link/Link.css

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

package/src/components/Nav/Nav.css

@@ -40,13 +40,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);
@@ -74,13 +79,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;
@@ -124,7 +134,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 {

package/src/components/Progress/Progress.css

@@ -26,13 +26,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 {
@@ -61,7 +61,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 ── */

package/src/components/Radio/Radio.css

@@ -38,9 +38,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 {
@@ -55,7 +55,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 ── */

package/src/components/Select/Select.css

@@ -9,13 +9,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 ── */
@@ -54,7 +54,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 ── */
@@ -66,3 +66,10 @@
 .strand-select--disabled .strand-select__field {
   cursor: not-allowed;
 }
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-select {
+    transition: none;
+  }
+}

package/src/components/Skeleton/Skeleton.css

@@ -15,7 +15,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 {
@@ -30,7 +30,7 @@
 /* ── Text variant ── */
 .strand-skeleton--text {
   height: 1em;
-  border-radius: 4px;
+  border-radius: var(--strand-radius-sm);
 }
 
 /* ── Rectangle variant ── */

package/src/components/Slider/Slider.css

@@ -17,7 +17,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 ── */
@@ -31,7 +31,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);
 }
 
@@ -55,7 +55,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);
 }
 
@@ -78,11 +78,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 ── */

package/src/components/Stack/Stack.css

@@ -3,6 +3,12 @@
 /* ── Base ── */
 .strand-stack {
   display: flex;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.strand-stack > * {
+  min-width: 0;
 }
 
 /* ── Direction ── */
@@ -54,3 +60,12 @@
 .strand-stack--wrap {
   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); }

package/src/components/Switch/Switch.css

@@ -27,14 +27,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;
 }
 

package/src/components/Table/Table.css

@@ -47,6 +47,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;
@@ -63,7 +68,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 {

package/src/components/Tabs/Tabs.css

@@ -20,14 +20,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);

package/src/components/Tag/Tag.css

@@ -23,7 +23,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 {
@@ -33,12 +33,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 ── */
@@ -53,7 +53,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 {
@@ -63,12 +63,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 ── */
@@ -83,7 +83,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 {

package/src/components/Textarea/Textarea.css

@@ -9,13 +9,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 ── */
@@ -59,7 +59,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 ── */
@@ -71,3 +71,10 @@
 .strand-textarea--disabled .strand-textarea__field {
   cursor: not-allowed;
 }
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-textarea {
+    transition: none;
+  }
+}

package/src/components/Toast/Toast.css

@@ -19,7 +19,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;
@@ -70,8 +70,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 {

package/src/components/Tooltip/Tooltip.css

@@ -12,14 +12,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 {

package/src/index.ts

@@ -1,4 +1,4 @@
-/*! Strand UI v0.1.0 | MIT License | dillingerstaffing.com */
+/*! Strand UI v0.2.0 | MIT License | dillingerstaffing.com */
 
 // Input components
 export { Button } from "./components/Button/index.js";

package/src/static.css

@@ -0,0 +1,47 @@
+/*! 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);
+}