@ggui-ai/ui-gen 0.6.2 → 0.7.0

package/dist/boilerplate.js

@@ -168,7 +168,9 @@ var ALL_COMPONENTS = [
   "Pagination",
   "EmptyState",
   "Stat",
-  "Stepper"
+  "Stepper",
+  "Markdown",
+  "MarkdownInline"
 ].join(", ");
 var ALL_COMPOSITIONS = [
   "Header",
@@ -528,12 +530,12 @@ Only list MISSING interactive elements. Use 'fail' only for issues blocking core
     priority: "P2",
     tier: 2,
     failOutcome: "warn",
-    codingGuidance: "Add labels on form inputs, alt text on images, semantic HTML.",
-    evalInstruction: `Evaluate ACCESSIBILITY: missing labels, alt text, semantic HTML, keyboard support.
+    codingGuidance: "Add labels on form inputs, alt text on images, semantic HTML, and state ARIA (aria-checked/pressed/selected/expanded) on hand-rolled interactive controls.",
+    evalInstruction: `Evaluate ACCESSIBILITY: missing labels, alt text, semantic HTML, keyboard support, ARIA state.
 
 ggui primitives bake in their own ARIA \u2014 see "Primitive Accessibility" in the Design System context above. NEVER flag a ggui primitive (Input/Select/TextArea, RadioGroup, Checkbox, Toggle, Progress, Slider, Spinner, Skeleton, Tabs, Accordion, Alert, Toast, Tooltip, Clickable, Icon) for a missing role / aria-* / label / keyboard handler \u2014 it is already there and not visible in the source you are reading.
 
-Flag ONLY real gaps: a raw div/span used as an interactive control; an image with no alt text; an Input/Select/TextArea with no \`label\` prop; an icon-only Button with no aria-label; live/streaming data not wrapped in an aria-live region; inverted heading hierarchy.
+Flag ONLY real gaps: a raw div/span used as an interactive control; a hand-rolled control whose checked/selected/expanded/pressed state is conveyed only by styling (strikethrough, color, a check icon) with no \`aria-checked\` / \`aria-pressed\` / \`aria-selected\` / \`aria-expanded\`; an image with no alt text; an Input/Select/TextArea with no \`label\` prop; an icon-only Button with no aria-label; live/streaming data not wrapped in an aria-live region; inverted heading hierarchy.
 
 Only list MISSING accessibility features. Use 'fail' only if it blocks delivery.`
   },
@@ -1136,7 +1138,7 @@ Available primitives (all from \`@ggui-ai/design\`):
 - Composite: Accordion, Tabs, Table, Toast
 
 Available compound components (all from \`@ggui-ai/design\`):
-- Autocomplete, Breadcrumb, Dropdown, EmptyState, FormField, MenuItem, Pagination, SearchField, Stat, Stepper, Tag
+- Autocomplete, Breadcrumb, Dropdown, EmptyState, FormField, Markdown, MarkdownInline, MenuItem, Pagination, SearchField, Stat, Stepper, Tag
 
 **Choosing between similar components** \u2014 pick by intent, don't guess:
 - **Pick from options**: one value from a short fixed list (a form field) \u2192 \`Select\`. Type-to-filter a long list, then pick \u2192 \`Autocomplete\`. A menu of actions off a button (edit / delete / \u2026) \u2192 \`Dropdown\`. A search box that filters displayed content \u2192 \`SearchField\`.
@@ -1178,6 +1180,7 @@ The design-system primitives are accessible by construction \u2014 they emit the
 4. **Live & streaming data** \u2014 wrap any region whose content updates on its own (a \`useStream\` \`.latest\` value, a live clock, an "N new" counter, a flashing price) in an element with \`aria-live="polite"\` so screen readers announce the change.
 5. **Headings nest** \u2014 one \`<Heading level={1}>\` per screen, \`level={2}\` for sections, \`level={3}\` for subsections. Never skip or invert levels.
 6. **Buttons** \u2014 descriptive text content; icon-only buttons need \`aria-label\`. Announce busy state: \`<Button disabled={isLoading} aria-busy={isLoading}>{isLoading ? 'Submitting\u2026' : 'Submit'}</Button>\`.
+7. **Stateful controls announce their state.** Toggleable / selectable / expandable things use the primitive that carries the semantics (\`Checkbox\`, \`Toggle\`, \`Tabs\`, \`Accordion\`) \u2014 never a styled \`Box\`/\`Icon\` that only *looks* checked. When you hand-roll one with \`as={Clickable}\`, \`Clickable\` adds button + keyboard semantics but NOT state \u2014 add it yourself: \`role="checkbox"\` + \`aria-checked={done}\` on a toggleable row, \`aria-pressed\` on a toggle button, \`aria-selected\` on the chosen item, \`aria-expanded\` on an open/close affordance. Styling (strikethrough, color, a check icon) must never be the only carrier of state.
 
 ## Design System Usage (CRITICAL)
 
@@ -1384,6 +1387,7 @@ Hero sections should feel airy. Use \`padding="xl"\` (32px) on the main card, no
 - [ ] Typed Props interface exported; request-specific data is a prop with default
 - [ ] Every Input/TextArea/Select has a \`label\` prop (no separate \`<Text>\` label)
 - [ ] Icon-only buttons have \`aria-label\`; no redundant \`role\`/\`aria-*\` on primitives
+- [ ] Toggleable/selected/expanded state is ARIA-expressed (\`aria-checked\`/\`aria-pressed\`/\`aria-selected\`/\`aria-expanded\`) \u2014 never style-only
 - [ ] Live/streaming regions wrapped in \`aria-live="polite"\`
 - [ ] Headings nest \u2014 one \`level={1}\`, then \`level={2}\`/\`{3}\` \u2014 never skipped or inverted
 - [ ] Wire hooks (\`useAction\`, \`useStream\`) imported from \`@ggui-ai/wire\` and consumed`;