@dashforge/tw 0.2.0-beta → 0.3.0-beta

package/dist/src/components/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAuCjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAG,kBAAkB,EACvD,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,kDAu4BlC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AA8FjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAG,kBAAkB,EACvD,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,kDAy5BlC"}

package/dist/src/components/Autocomplete/autocomplete.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/autocomplete.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA6G/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"autocomplete.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/autocomplete.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmH/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/src/components/Breadcrumbs/breadcrumbs.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/breadcrumbs.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAgC9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"breadcrumbs.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/breadcrumbs.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAqC9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/src/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,2GA8DjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,2GAyEjB,CAAC"}

package/dist/src/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA2BzD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kDAmK5C"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA0DzD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kDA8L5C"}

package/dist/src/components/LeftNav/leftNav.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leftNav.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/leftNav.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwE1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"leftNav.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/leftNav.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmF1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/src/components/NumberField/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAuC/D;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAsOlD"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAuC/D;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAkQlD"}

package/dist/src/components/RadioGroup/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,kDAyNhD"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,kDA+OhD"}

package/dist/src/components/Snackbar/snackbar.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/snackbar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwD3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"snackbar.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/snackbar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0D3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/src/components/Switch/switch.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/switch.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAiDzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"switch.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/switch.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAsDzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/src/components/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,kDAuL9C"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,kDAoN9C"}

package/dist/src/components/TextField/textField.types.d.ts

@@ -5,9 +5,27 @@ import type { TextFieldVariants } from './textField.variants.js';
 /**
  * Per-slot overrides for `<TextField>`.
  *
- * Each slot accepts `{ className: string }` so the override path is
- * extensible (style / aria-* / data-* can be added without a breaking
- * change). Mirrors the MUI-side `slotProps` shape.
+ * Each slot accepts `{ className: string }` (and, for `prefix` /
+ * `suffix`, a `children` node) so the override path is extensible —
+ * extra fields like `style`, `aria-*`, `data-*` can be added without
+ * a breaking change. Mirrors the MUI-side `slotProps` shape.
+ *
+ * **`prefix` / `suffix`** are inline adornments rendered INSIDE the
+ * `inputWrapper`, before / after the `<input>` element. Typical use:
+ * currency symbols, units, status icons. Passing only `className`
+ * (no `children`) is allowed but renders an empty slot — usually
+ * you'll always pair the two.
+ *
+ *   ```tsx
+ *   <TextField
+ *     name="price"
+ *     type="number"
+ *     slotProps={{
+ *       prefix: { children: '$' },
+ *       suffix: { children: 'USD' },
+ *     }}
+ *   />
+ *   ```
  */
 export interface TextFieldSlotProps {
     root?: {
@@ -31,6 +49,14 @@ export interface TextFieldSlotProps {
     errorText?: {
         className?: string;
     };
+    prefix?: {
+        children?: ReactNode;
+        className?: string;
+    };
+    suffix?: {
+        children?: ReactNode;
+        className?: string;
+    };
 }
 /**
  * Props for the Dashforge TW `<TextField>`.

package/dist/src/components/TextField/textField.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textField.types.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField/textField.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE;;;;;;GAMG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,EACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1D,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IAEb,qBAAqB;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C,mCAAmC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wBAAwB;IACxB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,2EAA2E;IAC3E,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC"}
+{"version":3,"file":"textField.types.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField/textField.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACvD;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,EACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1D,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IAEb,qBAAqB;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C,mCAAmC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wBAAwB;IACxB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,2EAA2E;IAC3E,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC"}

package/dist/src/components/TextField/textField.variants.d.ts

@@ -59,6 +59,8 @@ export declare const textFieldVariants: import("tailwind-variants").TVReturnType
     input: string[];
     helperText: string;
     errorText: string;
+    prefix: string[];
+    suffix: string[];
 }, undefined, {
     size: {
         sm: {
@@ -107,6 +109,8 @@ export declare const textFieldVariants: import("tailwind-variants").TVReturnType
     input: string[];
     helperText: string;
     errorText: string;
+    prefix: string[];
+    suffix: string[];
 }, import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -155,6 +159,8 @@ export declare const textFieldVariants: import("tailwind-variants").TVReturnType
     input: string[];
     helperText: string;
     errorText: string;
+    prefix: string[];
+    suffix: string[];
 }, undefined, unknown, unknown, undefined>>;
 export type TextFieldVariants = VariantProps<typeof textFieldVariants>;
 //# sourceMappingURL=textField.variants.d.ts.map

package/dist/src/components/TextField/textField.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textField.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField/textField.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAsE5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"textField.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField/textField.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwF5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/src/index.d.ts

@@ -100,5 +100,5 @@ export type { VariantProps } from 'tailwind-variants';
 /**
  * Package version (synced with `package.json` at publish time).
  */
-export declare const VERSION = "0.1.0-beta";
+export declare const VERSION = "0.3.0-beta";
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dashforge/tw",
-  "version": "0.2.0-beta",
+  "version": "0.3.0-beta",
   "private": false,
   "type": "module",
   "main": "./dist/index.esm.js",
@@ -26,8 +26,8 @@
     "tailwind-variants": "^3.1.1",
     "vitest": "*",
     "@dashforge/forms": "0.2.3-beta",
-    "@dashforge/rbac": "0.2.3-beta",
-    "@dashforge/ui-core": "0.2.3-beta"
+    "@dashforge/ui-core": "0.2.3-beta",
+    "@dashforge/rbac": "0.2.3-beta"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/AppShell/AppShell.tsx

@@ -1,8 +1,32 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
 import { appShellVariants } from './appShell.variants.js';
 import type { AppShellProps } from './appShell.types.js';
 
+/**
+ * Query selector for natively-focusable elements + anything with an
+ * explicit positive (or implicit `0`) tabindex. Used by the focus
+ * trap to enumerate the drawer's interactive content.
+ *
+ * Notes:
+ *  - Excludes `[tabindex="-1"]` (intentionally non-tabbable).
+ *  - Excludes `:disabled` — the browser already skips them in tab
+ *    order; including them here would route focus to dead elements.
+ *  - `details > summary` is the standard way to get a focusable
+ *    `<details>` toggle.
+ *
+ * @internal
+ */
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not(:disabled)',
+  'input:not(:disabled):not([type="hidden"])',
+  'select:not(:disabled)',
+  'textarea:not(:disabled)',
+  '[tabindex]:not([tabindex="-1"]):not(:disabled)',
+  'details > summary:first-of-type',
+].join(',');
+
 /**
  * Dashforge TW AppShell — top-level layout orchestrator.
  *
@@ -31,6 +55,20 @@ import type { AppShellProps } from './appShell.types.js';
  *   - The mobile drawer + backdrop participate in the standard
  *     "click outside to close" pattern — `Escape` closes the drawer
  *     too (added via global keydown).
+ *   - **Focus trap** (WCAG 2.4.3) — when the mobile drawer opens:
+ *       1. The previously-focused element is captured.
+ *       2. Focus moves to the first focusable element inside the drawer.
+ *       3. Tab / Shift+Tab wrap inside the drawer (cycle from
+ *          last → first and first → last) — Tab can never escape
+ *          to the page underneath while the drawer is open.
+ *       4. On close, focus returns to the captured element (typically
+ *          the hamburger toggle the user pressed to open the drawer).
+ *     This pattern matches WAI-ARIA APG's modal dialog guidance even
+ *     though the drawer isn't strictly a dialog — same focus
+ *     management makes keyboard users' experience predictable.
+ *   - **`role="dialog"` + `aria-modal="true"`** are applied to the
+ *     drawer when open so screen readers announce it as a modal
+ *     overlay rather than just an aside.
  */
 export function AppShell(props: AppShellProps) {
   const {
@@ -66,6 +104,86 @@ export function AppShell(props: AppShellProps) {
     return () => document.removeEventListener('keydown', handler);
   }, [navOpen, onNavOpenChange]);
 
+  /*
+   * Focus trap for the mobile drawer.
+   *
+   * Implementation:
+   *  - On open: capture the currently-focused element (`document.activeElement`)
+   *    so we can restore it on close. Then move focus to the first
+   *    focusable element inside the drawer.
+   *  - While open: a Tab/Shift+Tab keydown listener wraps focus inside
+   *    the drawer subtree (last → first on Tab from end, first → last
+   *    on Shift+Tab from start).
+   *  - On close: restore focus to the captured element.
+   *
+   * Hand-rolled (no `focus-trap-react` dep) — the logic is ~20 LOC and
+   * scoped to a single drawer; adding a runtime dep felt like overkill.
+   * If we ever need more sophisticated trap semantics (nested traps,
+   * sentinel nodes, etc.) the dep is the right call.
+   */
+  const drawerRef = useRef<HTMLDivElement | null>(null);
+  const restoreFocusRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!navOpen) return;
+    // 1) Capture the element that had focus before the drawer opened.
+    restoreFocusRef.current = document.activeElement as HTMLElement | null;
+
+    // 2) Move focus to the first focusable element inside the drawer.
+    //    Defer via rAF so the drawer DOM (slide-in animation start) has
+    //    settled and the elements are actually visible/focusable.
+    const raf = requestAnimationFrame(() => {
+      const drawer = drawerRef.current;
+      if (!drawer) return;
+      const first = drawer.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
+      first?.focus();
+    });
+
+    // 3) Trap Tab / Shift+Tab inside the drawer.
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+      const drawer = drawerRef.current;
+      if (!drawer) return;
+      const focusables = Array.from(
+        drawer.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+      );
+      if (focusables.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+      if (event.shiftKey) {
+        // Shift+Tab on first → wrap to last.
+        if (active === first || !drawer.contains(active)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else {
+        // Tab on last → wrap to first.
+        if (active === last || !drawer.contains(active)) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      document.removeEventListener('keydown', onKeyDown);
+      // 4) Restore focus to the previously-focused element on close.
+      //    Guard against the element being removed from the DOM (rare
+      //    but possible if the consumer re-renders the page while the
+      //    drawer is open).
+      const restore = restoreFocusRef.current;
+      if (restore && document.body.contains(restore)) {
+        restore.focus();
+      }
+    };
+  }, [navOpen]);
+
   return (
     <div className={cn(v.root(), sx, slotProps?.root?.className)}>
       {header && (
@@ -81,8 +199,15 @@ export function AppShell(props: AppShellProps) {
               {nav}
             </aside>
             <aside
+              ref={drawerRef}
               className={cn(v.navMobile(), slotProps?.navMobile?.className)}
               aria-hidden={!navOpen}
+              // When open, the drawer is a modal overlay — `dialog` +
+              // `aria-modal="true"` so screen readers announce it as
+              // such. When closed, drop both attributes (the aria-
+              // hidden=true above already removes it from the AT tree).
+              role={navOpen ? 'dialog' : undefined}
+              aria-modal={navOpen ? true : undefined}
               // The drawer is the SAME nav content rendered twice — once
               // inline (desktop) and once as a slide-in (mobile). We
               // mark the inactive copy hidden from AT to avoid double

package/src/components/AppShell/appShell.variants.ts

@@ -21,14 +21,20 @@ export const appShellVariants = tv({
     nav: 'hidden md:flex shrink-0',
     navMobile: [
       'flex md:hidden fixed inset-y-0 left-0 z-40',
-      'transition-transform duration-200 ease-out',
+      // Drawer slide-in is the most prominent motion in AppShell and
+      // a clear WCAG 2.3.3 candidate. Gate the transition on
+      // `prefers-reduced-motion: no-preference`; the data-driven
+      // `-translate-x-full` / `translate-x-0` still applies, just
+      // without the smooth slide.
+      'transition-transform duration-200 ease-out motion-reduce:transition-none motion-reduce:duration-0',
       '-translate-x-full',
     ],
     main: 'flex-1 min-w-0 overflow-y-auto',
     footer: 'shrink-0',
     backdrop: [
       'md:hidden fixed inset-0 z-30 bg-black/40',
-      'transition-opacity duration-200',
+      // Backdrop opacity fade — micro motion, gated for consistency.
+      'transition-opacity duration-200 motion-reduce:transition-none motion-reduce:duration-0',
       'opacity-0 pointer-events-none',
     ],
   },

package/src/components/Autocomplete/Autocomplete.tsx

@@ -23,6 +23,61 @@ import type {
   AutocompleteValue,
 } from './autocomplete.types.js';
 
+/**
+ * Inline SVG icons used by the Autocomplete chrome (chip remove, clear,
+ * dropdown caret). Stroke uses `currentColor` so the parent's `text-*`
+ * propagates — same pattern as Checkbox's CheckIcon.
+ *
+ * Why inline SVG (not lucide / heroicons / unicode glyphs):
+ *  - Zero icon-library dependency: keeps `@dashforge/tw` self-contained.
+ *  - Crisp at every size (the unicode `×` / `▾` glyphs we shipped pre-
+ *    0.2.2 rendered as chunky font characters that looked unpolished
+ *    next to the rest of the design system).
+ *  - SVG scales with parent font-size cleanly via `width="1em" height="1em"`.
+ *
+ * @internal
+ */
+function CloseIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      width="1em"
+      height="1em"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M4 4l8 8M12 4l-8 8"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronDownIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      width="1em"
+      height="1em"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M4 6l4 4 4-4"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 /**
  * Coerce a raw value (from bridge / props) into a canonical shape:
  *
@@ -402,7 +457,17 @@ export function Autocomplete<TOption = AutocompleteOption>(
         if (next == null) {
           setInputValue('');
         } else {
-          const found = options.find((opt) => getOptionValue(opt) === next);
+          // Look up the label in the EFFECTIVE option pool (static
+          // `options` + async `asyncOptions` when `loadOptions` is
+          // configured). Looking only at the static `options` here
+          // means async-loaded picks never update the input — the
+          // user sees their search query stick instead of the
+          // selected label after click. Same lookup logic mirrored in
+          // `displayInputValue` so the two paths can't drift.
+          const pool = loadOptions && asyncOptions !== null
+            ? asyncOptions
+            : options;
+          const found = pool.find((opt) => getOptionValue(opt) === next);
           const found_label = found ? labelAsString(found) : undefined;
           if (found_label !== undefined) {
             setInputValue(found_label);
@@ -434,6 +499,8 @@ export function Autocomplete<TOption = AutocompleteOption>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       options,
+      asyncOptions,
+      loadOptions,
       isFormMode,
       bridge,
       name,
@@ -837,7 +904,7 @@ export function Autocomplete<TOption = AutocompleteOption>(
                         slotProps?.chipRemove?.className
                       )}
                     >
-                      ×
+                      <CloseIcon />
                     </button>
                   )}
                 </span>
@@ -893,7 +960,7 @@ export function Autocomplete<TOption = AutocompleteOption>(
             tabIndex={-1}
             className={cn(v.clearButton(), slotProps?.clearButton?.className)}
           >
-            ×
+            <CloseIcon />
           </button>
         )}
 
@@ -908,7 +975,13 @@ export function Autocomplete<TOption = AutocompleteOption>(
           disabled={effectiveDisabled}
           className={cn(v.trigger(), slotProps?.trigger?.className)}
         >
-          ▾
+          {/*
+           * Chevron flips up when popover is open (CSS-only, driven by
+           * the `aria-expanded` attribute selector on the parent
+           * `<button>`). See autocomplete.variants.ts → `trigger` slot
+           * for the `aria-expanded:rotate-180` rule.
+           */}
+          <ChevronDownIcon />
         </button>
 
         {isOpen && (

package/src/components/Autocomplete/autocomplete.variants.ts

@@ -44,6 +44,12 @@ export const autocompleteVariants = tv({
       'text-neutral-600 hover:text-neutral-900',
       'disabled:cursor-not-allowed disabled:opacity-40',
       'transition-colors',
+      // Chevron flip on open — targets the SVG child via the aria-
+      // expanded state on the button itself (set by React). Smooth
+      // rotate gated on prefers-reduced-motion (WCAG 2.3.3); the
+      // 180° state still applies, just without the animated tween.
+      '[&[aria-expanded=true]>svg]:rotate-180',
+      '[&>svg]:transition-transform [&>svg]:duration-150 motion-reduce:[&>svg]:transition-none',
     ],
     clearButton: [
       'flex items-center justify-center shrink-0 px-2',

package/src/components/Breadcrumbs/breadcrumbs.variants.ts

@@ -23,6 +23,11 @@ export const breadcrumbsVariants = tv({
       'rounded-sm outline-none',
       'focus-visible:ring-2 focus-visible:ring-primary-500/50',
       'transition-colors',
+      // Defensive `no-underline` — see the matching comment in
+      // LeftNav itemLink slot. The Breadcrumbs root cause covers
+      // TopBar too because Breadcrumbs is typically rendered in
+      // TopBar's center slot.
+      'no-underline hover:no-underline',
     ],
     current: [
       'inline-flex items-center gap-1 truncate',

package/src/components/Button/Button.tsx

@@ -109,6 +109,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     sx
   );
 
+  /*
+   * `aria-busy` announces the loading state to assistive tech.
+   * `disabled` alone hides the reason (perm-denied vs loading vs
+   * intrinsic), so SR users only hear "dimmed/inactive" without
+   * knowing why. Adding `aria-busy={true}` while loading distinguishes
+   * "wait for the action to finish" from "you can't do this".
+   */
+  const ariaBusy = loading ? true : undefined;
+
   // `asChild` renders through Radix Slot: the immediate child element
   // gets the resolved className, no extra Button DOM is emitted.
   if (asChild) {
@@ -118,6 +127,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         className={classes}
         data-disabled={effectiveDisabled || undefined}
         aria-disabled={effectiveDisabled || undefined}
+        aria-busy={ariaBusy}
       >
         {children}
       </Slot>
@@ -129,6 +139,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       ref={ref}
       type={rest.type ?? 'button'}
       disabled={effectiveDisabled}
+      aria-busy={ariaBusy}
       className={classes}
       {...rest}
     >

package/src/components/Checkbox/Checkbox.tsx

@@ -10,8 +10,8 @@ import { checkboxVariants } from './checkbox.variants.js';
 import type { CheckboxProps } from './checkbox.types.js';
 
 /**
- * Inline checkmark SVG used by `Radix.Indicator`. Stroke uses
- * `currentColor` so the parent's `text-white` propagates correctly.
+ * Inline checkmark SVG used by `Radix.Indicator` when fully checked.
+ * Stroke uses `currentColor` so the parent's `text-white` propagates.
  *
  * @internal
  */
@@ -34,6 +34,37 @@ function CheckIcon({ className }: { className?: string }) {
   );
 }
 
+/**
+ * Inline dash SVG used by `Radix.Indicator` when the checkbox is in
+ * the `indeterminate` tri-state ("some, but not all, children
+ * selected" — the canonical "select all" partial state).
+ *
+ * Pre-0.2.2-beta the indicator rendered the CheckIcon for BOTH
+ * checked and indeterminate (Radix mounts the Indicator for either
+ * state). We now discriminate via the `data-state` attribute Radix
+ * sets on the Indicator element itself — see the parent `Indicator`
+ * rendering below for the CSS toggle.
+ *
+ * @internal
+ */
+function DashIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M3 8h10"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
 /**
  * Dashforge TW Checkbox — bridge-integrated form control.
  *
@@ -193,11 +224,38 @@ export function Checkbox(props: CheckboxProps) {
         ref={registration?.ref as React.Ref<HTMLButtonElement> | undefined}
         className={cn(v.control(), slotProps?.control?.className)}
       >
+        {/*
+         * Radix.Indicator natively mounts only when `data-state` is
+         * `checked` or `indeterminate` — i.e. it tracks Radix's
+         * internal state directly, no React state dependency.
+         *
+         * The previous implementation used `forceMount` + a React
+         * conditional `{resolvedChecked === true ? <CheckIcon /> : null}`,
+         * which broke standalone uncontrolled mode: Radix would flip
+         * its internal `data-state` on click (turning the control blue
+         * via `data-[state=checked]:bg-primary-500`) but the React
+         * snapshot for `resolvedChecked` stayed stale, so the
+         * `<CheckIcon />` never mounted. Result: blue box with no
+         * tick after user interaction.
+         *
+         * Dropping forceMount + the conditional defers the mount
+         * decision to Radix (the single source of truth in all three
+         * modes — controlled, uncontrolled, bridge). Indicator mounts
+         * exactly when the checkbox is checked OR indeterminate.
+         *
+         * Per-state glyph (Sprint 2 P4): when Indicator is mounted we
+         * render BOTH glyphs and toggle visibility via the Indicator's
+         * own `data-state` attribute. The `group` class on Indicator
+         * lets the SVG children target the parent's state with
+         * `group-data-[state=checked]:hidden` / `…:indeterminate:hidden`.
+         * No React state required — Radix's data-state attribute is
+         * the single source of truth.
+         */}
         <RadixCheckbox.Indicator
-          className={cn(v.indicator(), slotProps?.indicator?.className)}
-          forceMount
+          className={cn(v.indicator(), 'group', slotProps?.indicator?.className)}
         >
-          {resolvedChecked === true ? <CheckIcon className="h-full w-full" /> : null}
+          <CheckIcon className="h-full w-full group-data-[state=indeterminate]:hidden" />
+          <DashIcon className="h-full w-full group-data-[state=checked]:hidden" />
         </RadixCheckbox.Indicator>
       </RadixCheckbox.Root>