fluentui-design 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -8,6 +8,31 @@ Each release records three things: the skill version, the baseline
 `@fluentui/react-components` package version, and the pinned `fluentui-mcp` facts commit. See
 [MAINTENANCE.md](MAINTENANCE.md) for the re-pin procedure.
 
+## [0.3.0] - 2026-09-22
+
+### Baseline
+
+| Item | Value |
+| --- | --- |
+| `@fluentui/react-components` | 9.74.7 |
+| `fluentui-mcp` facts commit | d595d79 |
+
+### Fixes
+
+- forms: align the numeric rule severity and provenance
+
+### Documentation
+
+- plan: correct the form-inputs coverage progress count
+- plan: add the form-inputs coverage requirements and plan
+- roadmap: complete the datagrid coverage feature
+
+### Features
+
+- forms: enrich the form pattern and regenerate the skill
+- forms: add control-choice and input rules
+- forms: analyze the form input sources
+
 ## [0.2.0] - 2026-09-21
 
 ### Baseline

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-design",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Evidence-backed Agent Skill for composing web applications with Fluent UI React v9",
   "license": "MIT",

package/skills/fluentui-design/references/index.md

@@ -16,8 +16,8 @@ For exact component props and imports, use the sibling `fluentui` skill
 | `data-surface` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
 | `edit-surface` | PAT-005 | RULE-008, RULE-009, RULE-029 |
 | `feedback-channel` | PAT-008 | RULE-003, RULE-015, RULE-016 |
-| `field-annotation` | PAT-004 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030 |
-| `form-layout` | PAT-004 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030 |
+| `field-annotation` | PAT-004 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030, RULE-037, RULE-038, RULE-039, RULE-040, RULE-041, RULE-042 |
+| `form-layout` | PAT-004 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030, RULE-037, RULE-038, RULE-039, RULE-040, RULE-041, RULE-042 |
 | `modal-behavior` | PAT-005 | RULE-008, RULE-009, RULE-029 |
 | `navigation-model` | PAT-001, PAT-006 | RULE-001, RULE-002, RULE-003, RULE-013, RULE-014 |
 | `permission-state` | PAT-003, PAT-008 | RULE-003, RULE-015, RULE-016, RULE-029 |
@@ -25,7 +25,7 @@ For exact component props and imports, use the sibling `fluentui` skill
 | `row-activation` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
 | `save-model` | PAT-007 | RULE-029, RULE-030 |
 | `selection-scope` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
-| `submit-feedback` | PAT-004, PAT-007 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030 |
+| `submit-feedback` | PAT-004, PAT-007 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030, RULE-037, RULE-038, RULE-039, RULE-040, RULE-041, RULE-042 |
 | `virtualization` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
 
 ## Application patterns

package/skills/fluentui-design/references/patterns/PAT-004-form-page.md

@@ -2,8 +2,8 @@
 id: PAT-004
 title: Create and edit form page
 decisions: [form-layout, field-annotation, submit-feedback]
-rules: [RULE-005, RULE-006, RULE-007, RULE-029, RULE-030]
-components: [Field, Input, Textarea, Select, Combobox, Dropdown, Option, Checkbox, Radio, RadioGroup, Switch, Slider, Label, Button, MessageBar, MessageBarBody, Spinner]
+rules: [RULE-005, RULE-006, RULE-007, RULE-029, RULE-030, RULE-037, RULE-038, RULE-039, RULE-040, RULE-041, RULE-042]
+components: [Field, Input, Textarea, Select, Combobox, Dropdown, Option, Checkbox, Radio, RadioGroup, Switch, Slider, SpinButton, Label, Button, MessageBar, MessageBarBody, Spinner]
 derived: [application-owned FormSection grouping, application-owned validation schema]
 ---
 
@@ -29,9 +29,15 @@ page for editing one or two fields in the context of a list; use the contextual-
 ## Component mapping
 
 Field, Input, Textarea, Select, Combobox, Dropdown, Option, Checkbox, Radio, RadioGroup, Switch,
-Slider, Label, Button, MessageBar, and Spinner are verified exports. The FormSection grouping and
-the validation schema are application-owned. Validation, persistence, and authorization are
-application responsibilities.
+Slider, SpinButton, Label, Button, MessageBar, and Spinner are verified exports. Each value's domain
+chooses its control: free text uses Input or Textarea, a small exclusive set uses RadioGroup, a short
+fixed list uses a native Select, a long or searchable list uses Combobox or Dropdown, a submitted
+boolean uses Checkbox, an immediate on/off uses Switch, and a bounded quantity uses SpinButton. A
+complex option also carries a plain-text value. A bounded numeric field sets its minimum and
+maximum, a step that divides the range, a page step that is a multiple of the step, and a formatted
+display value that parses back to the stored number. The FormSection grouping and the validation
+schema are application-owned. Validation, persistence, and authorization are application
+responsibilities.
 
 ## Interaction flow
 
@@ -52,20 +58,24 @@ Short related pairs may share a row above the project's narrow breakpoint only.
 
 ## Accessibility
 
-Every control has a programmatic label and, where needed, help text tied to the control. The error
-summary is announced on submit, and focus moves to the summary or the first invalid field. The
-pending submit action keeps an accessible name.
+Every control has a programmatic label and, where needed, help text tied to the control. A complex
+option exposes its plain text as the accessible name, and an option popup follows its trigger in DOM
+order so screen-reader navigation reaches the list. A Switch applies immediately while a Checkbox is
+submitted with the form, and a parent Checkbox shows the indeterminate state for a partially
+selected group. The error summary is announced on submit, and focus moves to the summary or the
+first invalid field. The pending submit action keeps an accessible name.
 
 ## Edge cases
 
-Server-side validation errors map onto their fields and are also summarized. A duplicate submission
-is prevented while a request is pending. Leaving the page with unsaved changes triggers a
+Server-side validation errors map onto their fields and are also summarized. A numeric value with no
+meaningful step, such as a phone number, stays a plain Input rather than a SpinButton. A duplicate
+submission is prevented while a request is pending. Leaving the page with unsaved changes triggers a
 confirmation. A field whose value arrives after load shows a pending state rather than an empty
 value.
 
 ## Rules applied
 
-RULE-005, RULE-006, RULE-007, RULE-029, RULE-030
+RULE-005, RULE-006, RULE-007, RULE-029, RULE-030, RULE-037, RULE-038, RULE-039, RULE-040, RULE-041, RULE-042
 
 ## Derived decisions
 

package/skills/fluentui-design/references/rules/index.md

@@ -42,6 +42,12 @@ when it applies, and where its evidence comes from. Full provenance lives in
 | RULE-005 | must | Wrap each control in a Field that provides a visible label, and place help or error text through the Field's message slot rather than beside it. |
 | RULE-006 | should | Show a field error after the user leaves the field or submits the form, and never before the user has entered a value, so the form does not scold an untouched field. |
 | RULE-007 | should | Lay fields out in one column by default and group related fields under a shared heading, because a single reading path is easier to follow and to complete. |
+| RULE-037 | should | Choose Input or Textarea for free-form text, RadioGroup for a small exclusive set, Select for a short fixed list, Combobox or Dropdown for a long or searchable list, Checkbox for a submitted boolean, Switch for an immediate on/off, and SpinButton for a bounded numeric quantity. |
+| RULE-038 | must | Use a Switch only when the change takes effect immediately, and use a Checkbox for a value submitted with the form; give a parent Checkbox an indeterminate state when it controls a partially selected group. |
+| RULE-039 | should | Prefer a native Select for a short, fixed list of options, and choose Combobox or Dropdown when the list is long, must be searched or typed into, or needs custom option content. |
+| RULE-040 | must | Provide a plain-text value for every Dropdown or Combobox option whose visible content is complex or composed, so the closed field and type-ahead matching use the text. |
+| RULE-041 | should | Prefer an inline option popup that follows the trigger in the DOM so assistive navigation reaches the list where aria-owns is unsupported. |
+| RULE-042 | should | Set the minimum and maximum on a bounded numeric input, choose a step that divides the range, set the larger page step as a multiple, and parse a formatted display value back to a number. |
 
 ## data-grid