Use shared form controls and enforce UI patterns (Refs #110)

2026-10-10 00:19:48 -04:00
parent 8d1bb69591
commit cc9c10226e
54 changed files with 1431 additions and 1449 deletions
@@ -8,7 +8,18 @@ Primitives live in its `primitives` directory.
 - Use `SectionHeader` for page titles and primary actions. The page owns spacing
  between sections.
 - Use `Field` with `Input`, `Select` or `Textarea` for labels, help and errors.
-  Give controls distinct `ariaLabel` values when several share one field.
+  Give controls distinct `ariaLabel` values when several share one field. Use
+  `hiddenLabel` on `Field` for compact filters with a visually hidden label.
+  `Input` and `Select` forward native validation, accessibility and event props;
+  use `bind:element` when a workflow needs to focus the native control. `Select`
+  accepts either `options` or child `option` / `optgroup` elements and preserves
+  the bound value's type. Keep layout on the field or its parent; controls own
+  their appearance.
+- `npm run check:styles` rejects raw selects and text-like inputs outside their
+  primitives, including search, password, numeric and date/time fields. Native
+  checkboxes, radios, file pickers, hidden inputs, range/color pickers and input
+  buttons are allowed. The check parses Svelte markup, so comments and examples
+  in scripts are ignored.
 - Pair `Tabs` with a labeled panel. Use `ListFooter` for long lists.
 - Use `StatusBadge` for workflow states and `ServerIdentity` for server names.
  Keep raw IDs available for copying and troubleshooting.