docs: add data-readonly and correct field color example

The embedding CSS docs did not list the data-readonly field attribute. The example for filled fields used var(--primary), which holds only HSL numbers and is not a valid color. The example uses hsl(var(--primary)).
2026-10-01 01:04:38 +10:00 · 2026-09-29 18:09:31 +00:00
1 changed files with 2 additions and 1 deletions
@@ -149,6 +149,7 @@ Fields expose data attributes for state-based styling:
 | `[data-field-type]` | `SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO`, etc. | The type of field                    |
 | `[data-inserted]`   | `true`, `false`                                | Whether the field has been filled    |
 | `[data-validate]`   | `true`, `false`                                | Whether the field is being validated |
+| `[data-readonly]`   | `true`, `false`                                | Whether the field is read-only       |

 ### Example

@@ -160,7 +161,7 @@ Fields expose data attributes for state-based styling:

 /* Style filled fields */
 .field--FieldRootContainer[data-inserted='true'] {
-  background-color: var(--primary);
+  background-color: hsl(var(--primary));
  opacity: 0.2;
 }