fluentui-design 0.1.2 → 0.3.0

package/CHANGELOG.md

@@ -8,6 +8,55 @@ 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
+
+| Item | Value |
+| --- | --- |
+| `@fluentui/react-components` | 9.74.7 |
+| `fluentui-mcp` facts commit | d595d79 |
+
+### Fixes
+
+- datagrid: correct the finding kinds and rule provenance
+
+### Documentation
+
+- plan: correct the datagrid coverage progress count
+- plan: add the datagrid coverage requirements and plan
+
+### Features
+
+- datagrid: enrich the list pattern and regenerate the skill
+- datagrid: add API-grounded grid rules and refresh coverage
+- datagrid: add the DataGrid evidence source and findings
+
 ## [0.1.2] - 2026-09-21
 
 ### Baseline

package/README.md

@@ -115,8 +115,6 @@ re-verify the rules it uses.
   (`SRC-045`) are recorded as a discovered expansion target; `SRC-002` covers only the public
   getting-started page. Rules therefore lean on published guidance and the component library, not on
   Figma files.
-- **The dedicated v9 DataGrid usage page was not analyzed.** Grid rules lean on the accessibility
-  practices guide (APG) and the pinned package source (`SRC-027`).
 - **Automated accessibility output is findings, not conformance.** The fixture is scanned with axe
   and the results are reported as defects that were fixed; the project makes no WCAG conformance
   claim.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-design",
-  "version": "0.1.2",
+  "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

@@ -11,22 +11,22 @@ For exact component props and imports, use the sibling `fluentui` skill
 | Decision | Patterns | Rules |
 | --- | --- | --- |
 | `command-scope` | PAT-001 | RULE-001, RULE-002, RULE-003 |
-| `data-processing-location` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
-| `data-resilience` | PAT-002, PAT-008 | RULE-003, RULE-010, RULE-011, RULE-012, RULE-015, RULE-016 |
-| `data-surface` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
+| `data-processing-location` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
+| `data-resilience` | PAT-002, PAT-008 | RULE-003, RULE-010, RULE-011, RULE-012, RULE-015, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
+| `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 |
 | `progressive-disclosure` | PAT-006 | RULE-013, RULE-014 |
-| `row-activation` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
+| `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 |
-| `submit-feedback` | PAT-004, PAT-007 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030 |
-| `virtualization` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
+| `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, 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-002-list-page.md

@@ -2,8 +2,8 @@
 id: PAT-002
 title: Searchable and filterable list page
 decisions: [data-surface, data-processing-location, selection-scope, row-activation, data-resilience, virtualization]
-rules: [RULE-010, RULE-011, RULE-012, RULE-016]
-components: [DataGrid, DataGridBody, DataGridRow, DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridSelectionCell, createTableColumn, Table, TableHeader, TableRow, TableCell, TableBody, TableCellLayout, Input, Button, MenuButton, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Spinner, Skeleton, SkeletonItem, MessageBar, MessageBarBody, Checkbox, Field]
+rules: [RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036]
+components: [DataGrid, DataGridBody, DataGridRow, DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridSelectionCell, createTableColumn, TableResizeHandle, Table, TableHeader, TableRow, TableCell, TableBody, TableCellLayout, Input, Button, MenuButton, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Spinner, Skeleton, SkeletonItem, MessageBar, MessageBarBody, Checkbox, Field]
 derived: [application-owned FilterBar composition, application-owned query and pagination state]
 ---
 
@@ -51,27 +51,38 @@ or on the server is explicit in application state, not inferred by the grid.
 
 Below the project's narrow breakpoint, low-priority columns are hidden behind a detail view and
 filters collapse into a single control that opens a panel. The grid keeps vertical scrolling; it
-never requires two-dimensional scrolling to read a value. Virtualize the grid only after measuring a
-performance need, because virtualization keeps only the visible rows in the DOM and can break
-in-page search and predictable focus movement.
+never requires two-dimensional scrolling to read a value. When columns can be resized, keep the grid
+inside a region that scrolls horizontally so resizing never pushes the page itself into horizontal
+scrolling, and prefer hiding low-priority columns over relying on resize at narrow widths.
+Virtualize the grid only after measuring a performance need, because virtualization keeps only the
+visible rows in the DOM and can break in-page search and predictable focus movement; when it is
+used, keep the row renderer stable and the row key constant so the rendered window does not churn.
 
 ## Accessibility
 
-The grid uses one tab stop with arrow-key navigation inside it. Sort state is announced, selection
-changes are announced, and an async result update is announced through a polite status region. The
-select-all control states whether it selects the current page or all matching results.
+The grid uses one tab stop with arrow-key navigation inside it. A cell that contains controls
+declares its own focus mode: `group` when it holds several focusable elements so Enter enters the
+cell and Escape returns to it, and `none` when it holds exactly one so that control is reached
+directly. A sortable header cell stays a single sort button and must not contain nested focusable
+controls. Sort state, selection changes, and async result updates are announced through a polite
+status region, and every selection control carries an accessible name: the header control states
+its selection scope and each row control names the row. The select-all control states whether it
+selects the current page or all matching results.
 
 ## Edge cases
 
 Loading shows Skeletons in the grid region. No data, no search matches, and a failed load each show a
-distinct message; the failed state offers a retry action. A server-paged sort re-queries instead of
-sorting only the loaded page. A selection that spans pages keeps its ids when the page changes. When
-virtualization is enabled, keep a stable row key, expose the row's position and total count to
-assistive technology, and ensure focus is not lost when the visible window moves.
+distinct message; the failed state offers a retry action. A column with no `compare` function stays
+unsortable even when sorting is enabled, so a header that looks sortable can silently do nothing.
+Because the library does not reliably announce a sort change, add a polite status message when the
+result order changes. A server-paged sort re-queries instead of sorting only the loaded page. A
+selection that spans pages keeps its ids when the page changes. When virtualization is enabled, keep
+a stable row key, expose the row's position and total count to assistive technology, and ensure
+focus is not lost when the visible window moves.
 
 ## Rules applied
 
-RULE-010, RULE-011, RULE-012, RULE-016
+RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036
 
 ## Derived decisions
 

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
 
@@ -50,6 +56,12 @@ when it applies, and where its evidence comes from. Full provenance lives in
 | RULE-010 | should | Use DataGrid when the layout must be controlled by column definitions and keyboard grid behavior is required, and use Table when a native table structure is the goal. |
 | RULE-011 | should | Decide explicitly whether each collection operation runs on loaded rows or on the server, and pass the resulting state into the grid so the component does not imply a data source it does not have. |
 | RULE-012 | must | Make the selection scope explicit to the user, and when a bulk action can apply to all matching results rather than only the loaded page, offer that choice deliberately. |
+| RULE-031 | must | Provide a compare function in every column definition whose header is meant to sort; a column without compare stays unsortable even when the grid enables sorting. |
+| RULE-032 | must | Set focusMode group on a cell with several focusable elements so Enter enters the cell and Escape returns to it, and set focusMode none on a cell with exactly one focusable element so that control receives focus directly. |
+| RULE-033 | must | Keep a sortable header cell free of nested focusable controls; move header actions into a context menu or into the body cells instead. |
+| RULE-034 | should | Use resizableColumns only inside a container that allows horizontal overflow, provide the column sizing options, and keep keyboard resizing available; do not let resizing push the page into two-dimensional scrolling. |
+| RULE-035 | must | Keep the row render function stable with useCallback and a stable row key before enabling virtualization. |
+| RULE-036 | must | Provide an aria-label through the selection cell for both the header select-all control and each row control, naming the action and, for the header, the selection scope. |
 
 ## overlays