@dillingerstaffing/strand-ui 0.5.0 → 0.6.0

package/HTML_REFERENCE.md

@@ -8,9 +8,20 @@
 
 ## Required CSS
 
+**CDN (no install):**
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dillingerstaffing/strand@0.5/css/tokens.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dillingerstaffing/strand@0.5/css/reset.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dillingerstaffing/strand@0.5/css/base.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dillingerstaffing/strand-ui@0.5/dist/css/strand-ui.css">
+```
+
+**npm:**
+
 ```html
-<link rel="stylesheet" href="path/to/@dillingerstaffing/strand/css/tokens.css">
-<link rel="stylesheet" href="path/to/@dillingerstaffing/strand-ui/dist/css/strand-ui.css">
+<link rel="stylesheet" href="node_modules/@dillingerstaffing/strand/css/tokens.css">
+<link rel="stylesheet" href="node_modules/@dillingerstaffing/strand-ui/dist/css/strand-ui.css">
 ```
 
 > **Token roles:** Don't guess which token to use. See [DESIGN_LANGUAGE.md 3.8: Color Roles (L290-L311)](./DESIGN_LANGUAGE.md#L290) for which color in which context, and [Appendix B: Token Quick Reference (L1372-L1431)](./DESIGN_LANGUAGE.md#L1372) for the full lookup table.
@@ -608,6 +619,7 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 
 ```html
 <div class="strand-toast strand-toast--info" role="status" aria-live="polite">
+  <span class="strand-toast__status">INFO</span>
   <span class="strand-toast__message">Changes saved successfully.</span>
   <button type="button" class="strand-toast__dismiss" aria-label="Dismiss">&times;</button>
 </div>
@@ -630,6 +642,7 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 
 ```html
 <div class="strand-alert strand-alert--info" role="status">
+  <span class="strand-alert__status">INFO</span>
   <div class="strand-alert__content">This is an informational message.</div>
 </div>
 ```

package/README.md

@@ -0,0 +1,49 @@
+# @dillingerstaffing/strand-ui
+
+Preact/React component library built on the [Strand Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md). 32 components. Zero-runtime CSS. WCAG 2.2 AA.
+
+## Install
+
+```bash
+npm install @dillingerstaffing/strand @dillingerstaffing/strand-ui
+```
+
+Import CSS in your app entry point:
+
+```css
+@import '@dillingerstaffing/strand/css/reset.css';
+@import '@dillingerstaffing/strand/css/tokens.css';
+@import '@dillingerstaffing/strand/css/base.css';
+@import '@dillingerstaffing/strand-ui/css/strand-ui.css';
+```
+
+Use components:
+
+```jsx
+import { Button, Card, Stack, Input } from '@dillingerstaffing/strand-ui';
+
+function App() {
+  return (
+    <Card variant="elevated" padding="lg">
+      <Stack gap={4}>
+        <Input placeholder="Enter your email" />
+        <Button>Get Started</Button>
+      </Stack>
+    </Card>
+  );
+}
+```
+
+## Also Available
+
+- **Vue 3:** [@dillingerstaffing/strand-vue](https://www.npmjs.com/package/@dillingerstaffing/strand-vue)
+- **Svelte:** [@dillingerstaffing/strand-svelte](https://www.npmjs.com/package/@dillingerstaffing/strand-svelte)
+- **CSS Only:** Use classes directly per [HTML_REFERENCE.md](https://github.com/dillingerstaffing/strand/blob/main/HTML_REFERENCE.md)
+
+## Links
+
+- [GitHub](https://github.com/dillingerstaffing/strand)
+- [Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md)
+- [Documentation](https://dillingerstaffing.com/labs/strand)
+
+Created by [Dillinger Staffing](https://dillingerstaffing.com)

package/dist/components/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAGrD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1D,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,KAAK;;EAuCjB,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAGrD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1D,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,KAAK;;EA2CjB,CAAC"}

package/dist/components/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAOD,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACxC;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa;8BAAkC,kBAAkB;;CAqC7E,CAAC;AAoDF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1D,oBAAoB;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,KAAK;;EAkCjB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAOD,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACxC;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa;8BAAkC,kBAAkB;;CAqC7E,CAAC;AAwDF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1D,oBAAoB;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,KAAK;;EAsCjB,CAAC"}

package/dist/css/strand-ui.css

@@ -11,34 +11,45 @@
   justify-content: space-between;
   width: 100%;
   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);
   font-size: var(--strand-text-sm);
+  background: var(--strand-surface-recessed);
 }
 
-/* ── Status variants ── */
+/* ── Status variants (neutral background, status color on prefix only) ── */
 .strand-alert--info {
-  background: var(--strand-blue-glow);
-  border-left-color: var(--strand-blue-primary);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--success {
-  background: rgba(34, 197, 94, 0.08);
-  border-left-color: var(--strand-green-positive);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--warning {
-  background: rgba(245, 158, 11, 0.08);
-  border-left-color: var(--strand-amber-caution);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--error {
-  background: rgba(239, 68, 68, 0.08);
-  border-left-color: var(--strand-red-alert);
+  background: var(--strand-surface-recessed);
+}
+
+/* ── Status prefix ── */
+.strand-alert__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-alert--info .strand-alert__status { color: var(--strand-blue-primary); }
+.strand-alert--success .strand-alert__status { color: var(--strand-teal-vital); }
+.strand-alert--warning .strand-alert__status { color: var(--strand-amber-caution); }
+.strand-alert--error .strand-alert__status { color: var(--strand-red-alert); }
+
 /* ── Content ── */
 .strand-alert__content {
   flex: 1;
@@ -51,8 +62,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-4);
   padding: 0;
   border: none;
@@ -660,7 +671,7 @@
   line-height: var(--strand-leading-relaxed);
   color: var(--strand-blue-midnight);
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;
@@ -893,10 +904,12 @@
 
 /* ── Label ── */
 .strand-form-field__label {
-  font-family: var(--strand-font-sans);
-  font-size: var(--strand-text-sm);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
   font-weight: var(--strand-weight-medium);
-  color: var(--strand-gray-700);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
   line-height: var(--strand-leading-snug);
 }
 
@@ -2065,7 +2078,7 @@
 .strand-tabs [role="tablist"] {
   display: flex;
   gap: var(--strand-space-1);
-  border-bottom: 1px solid var(--strand-gray-400);
+  border-bottom: 1px solid var(--strand-gray-200);
 }
 
 /* ── Tab button ── */
@@ -2137,7 +2150,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);
 }
 
@@ -2147,12 +2160,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);
 }
 
@@ -2321,7 +2334,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);
@@ -2329,22 +2341,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 {
@@ -2359,8 +2370,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/dist/index.js

@@ -1,8 +1,8 @@
 import { jsxs as _, jsx as s } from "preact/jsx-runtime";
 import { forwardRef as p } from "preact/compat";
-import { useRef as k, useCallback as v, useEffect as x, useState as B, useContext as R } from "preact/hooks";
-import { createContext as I } from "preact";
-const E = p(
+import { useRef as k, useCallback as v, useEffect as C, useState as B, useContext as E } from "preact/hooks";
+import { createContext as R } from "preact";
+const I = p(
   ({
     variant: a = "primary",
     size: t = "md",
@@ -51,8 +51,8 @@ const E = p(
     );
   }
 );
-E.displayName = "Button";
-const K = p(
+I.displayName = "Button";
+const L = p(
   ({
     type: a = "text",
     error: t = !1,
@@ -87,8 +87,8 @@ const K = p(
     ] });
   }
 );
-K.displayName = "Input";
-const A = p(
+L.displayName = "Input";
+const K = p(
   ({
     autoResize: a = !1,
     showCount: t = !1,
@@ -139,8 +139,8 @@ const A = p(
     ] });
   }
 );
-A.displayName = "Textarea";
-const L = p(
+K.displayName = "Textarea";
+const M = p(
   ({
     options: a,
     value: t,
@@ -178,8 +178,8 @@ const L = p(
     ] });
   }
 );
-L.displayName = "Select";
-const M = p(
+M.displayName = "Select";
+const A = p(
   ({
     checked: a = !1,
     indeterminate: t = !1,
@@ -190,7 +190,7 @@ const M = p(
     ...r
   }, i) => {
     const c = k(null);
-    x(() => {
+    C(() => {
       const f = typeof i == "function" ? c.current : (i == null ? void 0 : i.current) ?? c.current;
       f && (f.indeterminate = t);
     }, [t, i]);
@@ -272,7 +272,7 @@ const M = p(
     );
   }
 );
-M.displayName = "Checkbox";
+A.displayName = "Checkbox";
 const P = p(
   ({
     checked: a = !1,
@@ -351,7 +351,7 @@ const F = p(
   }
 );
 F.displayName = "Switch";
-const q = p(
+const U = p(
   ({
     min: a = 0,
     max: t = 100,
@@ -387,8 +387,8 @@ const q = p(
     ) });
   }
 );
-q.displayName = "Slider";
-const G = p(
+U.displayName = "Slider";
+const q = p(
   ({
     label: a,
     htmlFor: t,
@@ -421,8 +421,8 @@ const G = p(
     ] });
   }
 );
-G.displayName = "FormField";
-const H = p(
+q.displayName = "FormField";
+const O = p(
   ({
     variant: a = "elevated",
     padding: t = "md",
@@ -439,8 +439,8 @@ const H = p(
     return /* @__PURE__ */ s("div", { ref: o, className: r, ...l, children: n });
   }
 );
-H.displayName = "Card";
-const U = p(
+O.displayName = "Card";
+const G = p(
   ({
     variant: a = "count",
     status: t = "default",
@@ -470,8 +470,8 @@ const U = p(
     ] });
   }
 );
-U.displayName = "Badge";
-const V = p(
+G.displayName = "Badge";
+const H = p(
   ({
     src: a,
     alt: t = "",
@@ -498,8 +498,8 @@ const V = p(
     ) : /* @__PURE__ */ s("span", { className: "strand-avatar__initials", "aria-hidden": "true", children: h }) });
   }
 );
-V.displayName = "Avatar";
-const O = p(
+H.displayName = "Avatar";
+const V = p(
   ({
     variant: a = "solid",
     status: t = "default",
@@ -548,7 +548,7 @@ const O = p(
     ] });
   }
 );
-O.displayName = "Tag";
+V.displayName = "Tag";
 const z = p(
   ({ columns: a, data: t, onSort: e, className: n = "", ...l }, o) => {
     const [r, i] = B(null), [c, u] = B("asc"), d = v(
@@ -950,9 +950,9 @@ const na = p(
   }
 );
 na.displayName = "Nav";
-const S = I(null);
+const S = R(null);
 function ga() {
-  const a = R(S);
+  const a = E(S);
   if (!a)
     throw new Error("useToast must be used within a ToastProvider");
   return a;
@@ -985,10 +985,10 @@ const la = ({ children: a, className: t = "" }) => {
 la.displayName = "ToastProvider";
 function ia({ entry: a, onDismiss: t }) {
   const e = k(null);
-  x(() => (a.duration > 0 && (e.current = setTimeout(t, a.duration)), () => {
+  C(() => (a.duration > 0 && (e.current = setTimeout(t, a.duration)), () => {
     e.current !== null && clearTimeout(e.current);
   }), [a.duration, t]);
-  const n = a.status === "error" || a.status === "warning", l = ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ");
+  const n = a.status === "error" || a.status === "warning", l = ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" "), o = a.status === "success" ? "COMPLETE" : a.status.toUpperCase();
   return /* @__PURE__ */ _(
     "div",
     {
@@ -996,6 +996,7 @@ function ia({ entry: a, onDismiss: t }) {
       role: "status",
       "aria-live": n ? "assertive" : "polite",
       children: [
+        /* @__PURE__ */ s("span", { className: "strand-toast__status", children: o }),
         /* @__PURE__ */ s("span", { className: "strand-toast__message", children: a.message }),
         /* @__PURE__ */ s(
           "button",
@@ -1017,7 +1018,7 @@ const oa = p(
       "strand-toast",
       `strand-toast--${a}`,
       n
-    ].filter(Boolean).join(" ");
+    ].filter(Boolean).join(" "), c = a === "success" ? "COMPLETE" : a.toUpperCase();
     return /* @__PURE__ */ _(
       "div",
       {
@@ -1027,6 +1028,7 @@ const oa = p(
         "aria-live": r ? "assertive" : "polite",
         ...l,
         children: [
+          /* @__PURE__ */ s("span", { className: "strand-toast__status", children: c }),
           /* @__PURE__ */ s("span", { className: "strand-toast__message", children: t }),
           e && /* @__PURE__ */ s(
             "button",
@@ -1057,8 +1059,9 @@ const da = p(
       "strand-alert",
       `strand-alert--${a}`,
       n
-    ].filter(Boolean).join(" ");
+    ].filter(Boolean).join(" "), u = a === "success" ? "COMPLETE" : a.toUpperCase();
     return /* @__PURE__ */ _("div", { ref: r, className: c, role: i, ...o, children: [
+      /* @__PURE__ */ s("span", { className: "strand-alert__status", children: u }),
       /* @__PURE__ */ s("div", { className: "strand-alert__content", children: l }),
       t && /* @__PURE__ */ s(
         "button",
@@ -1088,7 +1091,7 @@ const ua = p(
     ...i
   }, c) => {
     const u = k(null), d = k(null), m = k(`strand-dialog-title-${++ca}`).current;
-    x(() => {
+    C(() => {
       if (!a) return;
       d.current = document.activeElement;
       const b = requestAnimationFrame(() => {
@@ -1102,7 +1105,7 @@ const ua = p(
         const y = d.current;
         y && y instanceof HTMLElement && y.focus();
       };
-    }, [a]), x(() => {
+    }, [a]), C(() => {
       if (!a) return;
       const b = document.body.style.overflow;
       return document.body.style.overflow = "hidden", () => {
@@ -1224,7 +1227,7 @@ const ha = p(
   }
 );
 ha.displayName = "Tooltip";
-const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
+const D = { sm: 24, md: 40, lg: 56 }, x = 3, pa = p(
   ({
     variant: a = "bar",
     value: t,
@@ -1244,7 +1247,7 @@ const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
       "aria-valuemax": 100
     };
     if (r && (c["aria-valuenow"] = t), a === "ring") {
-      const u = D[e] ?? D.md, d = (u - C) / 2, h = 2 * Math.PI * d, m = r ? h - h * t / 100 : 0;
+      const u = D[e] ?? D.md, d = (u - x) / 2, h = 2 * Math.PI * d, m = r ? h - h * t / 100 : 0;
       return /* @__PURE__ */ s("div", { ref: o, className: i, ...c, ...l, children: /* @__PURE__ */ _(
         "svg",
         {
@@ -1260,7 +1263,7 @@ const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
                 cy: u / 2,
                 r: d,
                 fill: "none",
-                "stroke-width": C,
+                "stroke-width": x,
                 className: "strand-progress__track"
               }
             ),
@@ -1271,7 +1274,7 @@ const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
                 cy: u / 2,
                 r: d,
                 fill: "none",
-                "stroke-width": C,
+                "stroke-width": x,
                 "stroke-dasharray": h,
                 "stroke-dashoffset": r ? m : void 0,
                 "stroke-linecap": "round",
@@ -1343,35 +1346,35 @@ const _a = p(
 _a.displayName = "Skeleton";
 export {
   da as Alert,
-  V as Avatar,
-  U as Badge,
+  H as Avatar,
+  G as Badge,
   ta as Breadcrumb,
-  E as Button,
-  H as Card,
-  M as Checkbox,
+  I as Button,
+  O as Card,
+  A as Checkbox,
   Z as CodeBlock,
   X as Container,
   W as DataReadout,
   ua as Dialog,
   Y as Divider,
-  G as FormField,
+  q as FormField,
   Q as Grid,
-  K as Input,
+  L as Input,
   ea as Link,
   na as Nav,
   pa as Progress,
   P as Radio,
   aa as Section,
-  L as Select,
+  M as Select,
   _a as Skeleton,
-  q as Slider,
+  U as Slider,
   fa as Spinner,
   J as Stack,
   F as Switch,
   z as Table,
   sa as Tabs,
-  O as Tag,
-  A as Textarea,
+  V as Tag,
+  K as Textarea,
   oa as Toast,
   la as ToastProvider,
   ha as Tooltip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.5.0",
+  "version": "0.6.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.5.0"
+    "@dillingerstaffing/strand": "^0.6.0"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",

package/src/components/Alert/Alert.css

@@ -8,34 +8,45 @@
   justify-content: space-between;
   width: 100%;
   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);
   font-size: var(--strand-text-sm);
+  background: var(--strand-surface-recessed);
 }
 
-/* ── Status variants ── */
+/* ── Status variants (neutral background, status color on prefix only) ── */
 .strand-alert--info {
-  background: var(--strand-blue-glow);
-  border-left-color: var(--strand-blue-primary);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--success {
-  background: rgba(34, 197, 94, 0.08);
-  border-left-color: var(--strand-green-positive);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--warning {
-  background: rgba(245, 158, 11, 0.08);
-  border-left-color: var(--strand-amber-caution);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--error {
-  background: rgba(239, 68, 68, 0.08);
-  border-left-color: var(--strand-red-alert);
+  background: var(--strand-surface-recessed);
 }
 
+/* ── Status prefix ── */
+.strand-alert__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-alert--info .strand-alert__status { color: var(--strand-blue-primary); }
+.strand-alert--success .strand-alert__status { color: var(--strand-teal-vital); }
+.strand-alert--warning .strand-alert__status { color: var(--strand-amber-caution); }
+.strand-alert--error .strand-alert__status { color: var(--strand-red-alert); }
+
 /* ── Content ── */
 .strand-alert__content {
   flex: 1;
@@ -48,8 +59,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-4);
   padding: 0;
   border: none;

package/src/components/Alert/Alert.test.tsx

@@ -79,6 +79,36 @@ describe("Alert", () => {
     expect(queryByLabelText("Dismiss")).toBeNull();
   });
 
+  // ── Status prefix ──
+
+  it("renders status prefix for info", () => {
+    const { container } = render(<Alert status="info">Info</Alert>);
+    const status = container.querySelector(".strand-alert__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("INFO");
+  });
+
+  it("renders status prefix for success as COMPLETE", () => {
+    const { container } = render(<Alert status="success">OK</Alert>);
+    const status = container.querySelector(".strand-alert__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("COMPLETE");
+  });
+
+  it("renders status prefix for warning", () => {
+    const { container } = render(<Alert status="warning">Warn</Alert>);
+    const status = container.querySelector(".strand-alert__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("WARNING");
+  });
+
+  it("renders status prefix for error", () => {
+    const { container } = render(<Alert status="error">Fail</Alert>);
+    const status = container.querySelector(".strand-alert__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("ERROR");
+  });
+
   // ── Custom className ──
 
   it("merges custom className", () => {

package/src/components/Alert/Alert.tsx

@@ -38,8 +38,12 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       .filter(Boolean)
       .join(" ");
 
+    const statusLabel =
+      status === "success" ? "COMPLETE" : status.toUpperCase();
+
     return (
       <div ref={ref} className={classes} role={role} {...rest}>
+        <span className="strand-alert__status">{statusLabel}</span>
         <div className="strand-alert__content">{children}</div>
         {dismissible && (
           <button

package/src/components/CodeBlock/CodeBlock.css

@@ -24,7 +24,7 @@
   line-height: var(--strand-leading-relaxed);
   color: var(--strand-blue-midnight);
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;

package/src/components/FormField/FormField.css

@@ -9,10 +9,12 @@
 
 /* ── Label ── */
 .strand-form-field__label {
-  font-family: var(--strand-font-sans);
-  font-size: var(--strand-text-sm);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
   font-weight: var(--strand-weight-medium);
-  color: var(--strand-gray-700);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
   line-height: var(--strand-leading-snug);
 }
 

package/src/components/Tabs/Tabs.css

@@ -4,7 +4,7 @@
 .strand-tabs [role="tablist"] {
   display: flex;
   gap: var(--strand-space-1);
-  border-bottom: 1px solid var(--strand-gray-400);
+  border-bottom: 1px solid var(--strand-gray-200);
 }
 
 /* ── Tab button ── */

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