@dillingerstaffing/strand-ui 0.5.1 → 0.7.0

package/src/components/Tag/Tag.css

@@ -22,7 +22,7 @@
 }
 
 .strand-tag--solid.strand-tag--teal {
-  background: rgba(20, 184, 166, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-teal-tint);
 }
 
@@ -32,12 +32,12 @@
 }
 
 .strand-tag--solid.strand-tag--amber {
-  background: rgba(245, 158, 11, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-amber-tint);
 }
 
 .strand-tag--solid.strand-tag--red {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-red-tint);
 }
 

package/src/components/Toast/Toast.css

@@ -22,7 +22,6 @@
   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;
   box-shadow: var(--strand-elevation-3);
   font-family: var(--strand-font-sans);
   font-size: var(--strand-text-sm);
@@ -30,22 +29,21 @@
   animation: strand-toast-in var(--strand-duration-normal) var(--strand-ease-out-expo);
 }
 
-/* ── Status accents ── */
-.strand-toast--info {
-  border-left-color: var(--strand-blue-primary);
-}
-
-.strand-toast--success {
-  border-left-color: var(--strand-green-positive);
-}
-
-.strand-toast--warning {
-  border-left-color: var(--strand-amber-caution);
+/* ── Status prefix ── */
+.strand-toast__status {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-semibold);
+  letter-spacing: var(--strand-tracking-wider);
+  text-transform: uppercase;
+  margin-right: var(--strand-space-3);
+  flex-shrink: 0;
 }
 
-.strand-toast--error {
-  border-left-color: var(--strand-red-alert);
-}
+.strand-toast--info .strand-toast__status { color: var(--strand-blue-primary); }
+.strand-toast--success .strand-toast__status { color: var(--strand-teal-vital); }
+.strand-toast--warning .strand-toast__status { color: var(--strand-amber-caution); }
+.strand-toast--error .strand-toast__status { color: var(--strand-red-alert); }
 
 /* ── Message ── */
 .strand-toast__message {
@@ -60,8 +58,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--strand-space-6);
+  height: var(--strand-space-6);
   margin-left: var(--strand-space-3);
   padding: 0;
   border: none;

package/src/components/Toast/Toast.test.tsx

@@ -87,6 +87,34 @@ describe("Toast", () => {
       container.querySelector(".strand-toast--info"),
     ).toBeTruthy();
   });
+
+  it("renders status prefix for info", () => {
+    const { container } = render(<Toast message="Note" status="info" />);
+    const status = container.querySelector(".strand-toast__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("INFO");
+  });
+
+  it("renders status prefix for success as COMPLETE", () => {
+    const { container } = render(<Toast message="OK" status="success" />);
+    const status = container.querySelector(".strand-toast__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("COMPLETE");
+  });
+
+  it("renders status prefix for warning", () => {
+    const { container } = render(<Toast message="Warn" status="warning" />);
+    const status = container.querySelector(".strand-toast__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("WARNING");
+  });
+
+  it("renders status prefix for error", () => {
+    const { container } = render(<Toast message="Fail" status="error" />);
+    const status = container.querySelector(".strand-toast__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("ERROR");
+  });
 });
 
 describe("ToastProvider + useToast", () => {

package/src/components/Toast/Toast.tsx

@@ -107,12 +107,16 @@ function ToastItem({ entry, onDismiss }: ToastItemProps) {
     .filter(Boolean)
     .join(" ");
 
+  const statusLabel =
+    entry.status === "success" ? "COMPLETE" : entry.status.toUpperCase();
+
   return (
     <div
       className={classes}
       role="status"
       aria-live={isUrgent ? "assertive" : "polite"}
     >
+      <span className="strand-toast__status">{statusLabel}</span>
       <span className="strand-toast__message">{entry.message}</span>
       <button
         type="button"
@@ -150,6 +154,9 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
       .filter(Boolean)
       .join(" ");
 
+    const statusLabel =
+      status === "success" ? "COMPLETE" : status.toUpperCase();
+
     return (
       <div
         ref={ref}
@@ -158,6 +165,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
         aria-live={isUrgent ? "assertive" : "polite"}
         {...rest}
       >
+        <span className="strand-toast__status">{statusLabel}</span>
         <span className="strand-toast__message">{message}</span>
         {onDismiss && (
           <button

package/src/index.ts

@@ -100,3 +100,11 @@ export type { SpinnerProps } from "./components/Spinner/index.js";
 
 export { Skeleton } from "./components/Skeleton/index.js";
 export type { SkeletonProps } from "./components/Skeleton/index.js";
+
+// Surfaces
+export { InstrumentViewport } from "./components/InstrumentViewport/index.js";
+export type { InstrumentViewportProps } from "./components/InstrumentViewport/index.js";
+
+// Animation
+export { ScrollReveal } from "./components/ScrollReveal/index.js";
+export type { ScrollRevealProps } from "./components/ScrollReveal/index.js";