@adia-ai/a2ui-corpus 0.4.3 → 0.4.5

package/catalog-a2ui_0_9.json

@@ -1587,21 +1587,36 @@
         }
       ],
       "properties": {
+        "title": {
+          "description": "Bold headline rendered as the first line of the alert content. Pair with [description] for the canonical \"banner\" pattern (headline + body). When [title] or [description] is set, the [text] prop is ignored.",
+          "type": "string",
+          "default": ""
+        },
+        "description": {
+          "description": "Body text rendered as the second line of the alert content, below [title]. May be used alone (without [title]) for a single muted-body message.",
+          "type": "string",
+          "default": ""
+        },
         "closable": {
-          "description": "Whether a close button is displayed",
+          "description": "Whether a close button is displayed. Alias [dismissible] is also accepted (same semantics, different spelling — the corpus and many libraries use both; both map to the same state).",
           "type": "boolean",
           "default": false
         },
         "component": {
           "const": "Alert"
         },
+        "dismissible": {
+          "description": "Public alias for [closable] — same semantics. Both attributes render the close button. Use whichever spelling matches your authoring style.",
+          "type": "boolean",
+          "default": false
+        },
         "icon": {
           "description": "Icon identifier displayed before the message content",
           "type": "string",
           "default": ""
         },
         "text": {
-          "description": "Alert message text",
+          "description": "Single-line alert message. For two-line \"headline + body\" alerts, use [title] + [description] instead. For rich content (links, formatting), use the [slot=\"content\"] slot.",
           "type": "string",
           "default": ""
         },
@@ -2240,6 +2255,10 @@
           "type": "string",
           "default": ""
         },
+        "textContent": {
+          "description": "Badge display text. Renderer routes this to the `text` attribute via CSS attr(text) on ::after.",
+          "$ref": "#/$defs/DynamicString"
+        },
         "variant": {
           "description": "Semantic color variant.",
           "type": "string",
@@ -2605,6 +2624,11 @@
           "type": "string",
           "default": "button"
         },
+        "aria-label": {
+          "description": "Accessible label for screen readers. Auto-set from `text` when text is non-empty; meaningful override for icon-only buttons.",
+          "type": "string",
+          "default": ""
+        },
         "color": {
           "description": "Semantic intent — composes with [variant]. `<button-ui variant=\"solid\" color=\"danger\">` = filled destructive action; `<button-ui variant=\"outline\" color=\"success\">` = outlined success affordance.",
           "type": "string",
@@ -2653,8 +2677,12 @@
           "type": "string",
           "default": ""
         },
+        "textContent": {
+          "description": "Button label. Renderer routes this to the `text` attribute, which is rendered via CSS attr(text) on ::after and mirrored to aria-label.",
+          "$ref": "#/$defs/DynamicString"
+        },
         "variant": {
-          "description": "Visual style — `solid` (default fill), `outline`, `ghost`, `link`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color=\"…\"] alongside.",
+          "description": "Visual style — `solid` (default fill), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color=\"…\"] alongside.\nFor **inline navigation** (Terms of Service, Privacy Policy, footer links, \"Sign in\" / \"Sign up\" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces \"link\" instead of \"button\". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction.",
           "type": "string",
           "enum": [
             "default",
@@ -2664,8 +2692,7 @@
             "primary",
             "secondary",
             "soft",
-            "current",
-            "link"
+            "current"
           ],
           "default": "solid"
         }
@@ -2685,7 +2712,9 @@
         "examples": [],
         "keywords": [],
         "name": "UIButton",
-        "related": [],
+        "related": [
+          "Link"
+        ],
         "slots": {
           "leading": {
             "description": "Icon container (start), sized to --content-height"
@@ -4418,7 +4447,14 @@
       ],
       "unevaluatedProperties": false,
       "x-adiaui": {
-        "anti_patterns": [],
+        "anti_patterns": [
+          {
+            "description": "Wrapping a check-ui in field-ui. The widget already self-labels.",
+            "right": "<check-ui label=\"I agree to the Terms of Service\"></check-ui>\n",
+            "rule": "Use [label] on check-ui directly; do not wrap in field-ui.",
+            "wrong": "<field-ui inline label=\"Agree\">\n  <check-ui></check-ui>\n</field-ui>\n"
+          }
+        ],
         "category": "layout",
         "events": {
           "change": {
@@ -4558,6 +4594,10 @@
           "description": "Code text content",
           "type": "string",
           "default": ""
+        },
+        "textContent": {
+          "description": "Code body text. Renderer routes this to the `text` attribute, reactively re-rendered into the <pre><code> block.",
+          "$ref": "#/$defs/DynamicString"
         }
       },
       "required": [
@@ -4817,6 +4857,11 @@
           "type": "string",
           "default": "md"
         },
+        "grow": {
+          "description": "Fills remaining space in a flex parent (e.g. inside a Row). CSS-only attribute via :scope[grow] in col.css.",
+          "type": "boolean",
+          "default": false
+        },
         "justify": {
           "description": "Justify content",
           "type": "string",
@@ -6473,7 +6518,20 @@
       ],
       "unevaluatedProperties": false,
       "x-adiaui": {
-        "anti_patterns": [],
+        "anti_patterns": [
+          {
+            "description": "Wrapping a check-ui (or switch-ui / radio-ui / toggle-ui) in field-ui. The widget already carries its own visible [label] via the CSS attr() pattern; field-ui adds a redundant label row and the inline-mode `justify-self: end` rule for compact controls pushes the widget to the right edge of the row, breaking the expected \"checkbox-left, label-right\" consent-row layout.",
+            "right": "<check-ui label=\"I agree to the Terms of Service\"></check-ui>\n",
+            "rule": "Small self-labeling widgets MUST NOT be wrapped in field-ui.",
+            "wrong": "<field-ui inline>\n  <check-ui label=\"I agree to the Terms of Service\"></check-ui>\n</field-ui>\n"
+          },
+          {
+            "description": "Using field-ui[inline] around a switch-ui to build a settings row. The settings-row layout (label-left, control-right) IS the switch-ui's own [label] rendering — field-ui adds no value and breaks the layout via the `justify-self: end` rule for compact widgets.",
+            "right": "<switch-ui label=\"Email notifications\"></switch-ui>\n",
+            "rule": "Use the widget's own [label] attribute for settings + consent rows. field-ui is for wide-control rows only.",
+            "wrong": "<field-ui inline label=\"Email notifications\">\n  <switch-ui></switch-ui>\n</field-ui>\n"
+          }
+        ],
         "category": "form",
         "events": {},
         "examples": [
@@ -6500,14 +6558,12 @@
           "input",
           "select",
           "textarea",
-          "check",
-          "radio",
-          "switch",
-          "slider"
+          "slider",
+          "range"
         ],
         "slots": {
           "default": {
-            "description": "The form control — input-ui, select-ui, textarea-ui, check-ui, switch-ui, radio-ui, slider-ui, etc. Auto-id'd for the label's [for] binding."
+            "description": "The form control — a WIDE control like input-ui, select-ui, textarea-ui, slider-ui, range-ui, calendar-picker-ui, color-picker-ui, upload-ui, otp-input-ui. Auto-id'd for the label's [for] binding.\nDO NOT wrap small self-labeling widgets here. check-ui, switch-ui, radio-ui, toggle-ui all carry their own [label] attribute that renders inline next to the control — wrapping them in field-ui produces broken layouts (settings-row `justify-self: end` rule pushes the control to the trailing edge, away from the label that field-ui stamps; the widget's own label then renders again on the right, creating a doubled / right-justified affordance). See anti_patterns below for the canonical alternatives."
           },
           "action": {
             "description": "Button adjacent to the control for inline actions (clear, reset, help popover)."
@@ -7586,6 +7642,11 @@
           "type": "boolean",
           "default": false
         },
+        "autocomplete": {
+          "description": "Browser autofill behavior per HTML autocomplete spec. Routed via setAttribute to the host element. Common values: off, on, cc-number, cc-exp, cc-csc, cc-name, email, username, current-password, new-password, one-time-code, given-name, family-name, street-address, postal-code.",
+          "type": "string",
+          "default": ""
+        },
         "component": {
           "const": "Input"
         },
@@ -7599,6 +7660,21 @@
           "type": "string",
           "default": ""
         },
+        "inputmode": {
+          "description": "Mobile keyboard hint per HTML inputmode spec. Routed via setAttribute to the host element. Values: text, decimal, numeric, tel, search, email, url.",
+          "type": "string",
+          "enum": [
+            "text",
+            "decimal",
+            "numeric",
+            "tel",
+            "search",
+            "email",
+            "url",
+            "none"
+          ],
+          "default": null
+        },
         "label": {
           "description": "Inline label rendered as a leading caption inside the input chrome, between any prefix and the value. Wires aria-labelledby on the editable surface. For stacked label / hint / error compositions, wrap with field-ui.",
           "type": "string",
@@ -8023,6 +8099,170 @@
         "version": 1
       }
     },
+    "Link": {
+      "title": "Link",
+      "description": "Inline navigation primitive — semantic `<a href>` wrapper. Use for\ncross-page navigation, footer / Terms-of-Service / Privacy-Policy\ninline references, \"Sign in\" / \"Sign up\" cross-page links, and any\naffordance whose purpose is to take the user somewhere (not to\nperform an action).\n\nSibling of `<button-ui>` — they have separate semantics and must\nnot be substituted for each other:\n\n| Affordance                | Use            |\n|---------------------------|----------------|\n| Submit form               | `<button-ui>`  |\n| Trigger action / modal    | `<button-ui>`  |\n| Copy to clipboard         | `<button-ui>`  |\n| Open modal / drawer       | `<button-ui>`  |\n| Navigate to another page  | `<link-ui>`    |\n| Open external URL         | `<link-ui>`    |\n| Anchor jump (#section)    | `<link-ui>`    |\n| Inline reference in prose | `<link-ui>`    |\n\nRenders `<a href=\"…\">` internally so middle-click open-in-new-tab,\nright-click context menu, hover URL preview, search-engine\ncrawlability, and bookmark-ability all work without any custom\nwiring. ARIA role is \"link\" (set automatically by `<a>` element).\n",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "block": {
+          "description": "Stretches the link to fill its container; useful for standalone link rows.",
+          "type": "boolean",
+          "default": false
+        },
+        "component": {
+          "const": "Link"
+        },
+        "disabled": {
+          "description": "Suppresses navigation + applies muted styling. Sets aria-disabled.",
+          "type": "boolean",
+          "default": false
+        },
+        "href": {
+          "description": "Destination URL or anchor. Required for SEO / middle-click / hover preview semantics. If omitted, the link still dispatches the `press` event (so it can be wired through the A2UI action handler system via `handler: \"navigate\"`), but loses native link behaviors.",
+          "type": "string",
+          "default": ""
+        },
+        "icon": {
+          "description": "Optional leading icon (Phosphor name). Use sparingly — most inline links don't need an icon. For \"open in new tab\" affordance, the `target=\"_blank\"` attribute auto-renders a trailing arrow-up-right glyph; the `icon` prop is for leading semantic icons.",
+          "type": "string",
+          "default": ""
+        },
+        "rel": {
+          "description": "Explicit `rel` attribute. Defaults to `noopener noreferrer` when `target=\"_blank\"` is set without an explicit rel.",
+          "type": "string",
+          "default": ""
+        },
+        "target": {
+          "description": "Anchor target — same semantics as HTML `<a target>`. Use `_blank` to open in new tab; the implementation automatically adds `rel=\"noopener noreferrer\"` for `_blank` to prevent tab-napping / privacy leaks.",
+          "type": "string",
+          "enum": [
+            "",
+            "_self",
+            "_blank",
+            "_parent",
+            "_top"
+          ],
+          "default": ""
+        },
+        "text": {
+          "description": "Visible link text. Falls back to default-slot content if unset.",
+          "type": "string",
+          "default": ""
+        },
+        "variant": {
+          "description": "Visual treatment. `default` underlines on rest + hover (standard link affordance). `subtle` underlines only on hover (for tighter designs where always-underlined would be noisy). `quiet` drops the link color and matches surrounding text color (used for footer-link rows where the link affordance is implied by context, not by color).",
+          "type": "string",
+          "enum": [
+            "default",
+            "subtle",
+            "quiet"
+          ],
+          "default": "default"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          "❌ `<button-ui variant=\"link\">` — was removed. Migrate to `<link-ui>` if the affordance is navigation, or to `<button-ui variant=\"ghost\">` if the affordance is an action that wants understated styling.",
+          "❌ `<link-ui>` with no `href` AND no `press` handler — a link to nowhere is a bug. Either set `href` or wire a navigate action handler.",
+          "❌ `<link-ui>` for form submission — submission is a button concern. Use `<button-ui type=\"submit\">`."
+        ],
+        "category": "content",
+        "events": {
+          "press": {
+            "description": "Bubbles when the link is activated by click or Enter. Detail: `{ href, target }`. Fires BEFORE the browser's native navigation so handlers can `preventDefault()` and route through the A2UI action handler system. If no handler intercepts, native navigation proceeds."
+          }
+        },
+        "examples": [
+          {
+            "title": "Inline link in a sentence",
+            "code": "<text-ui>\n  I agree to the\n  <link-ui text=\"Terms of Service\" href=\"/terms\"></link-ui>\n  and\n  <link-ui text=\"Privacy Policy\" href=\"/privacy\"></link-ui>.\n</text-ui>\n"
+          },
+          {
+            "title": "External link with new-tab target",
+            "code": "<link-ui text=\"Read the spec\" href=\"https://example.com/spec\" target=\"_blank\"></link-ui>\n"
+          },
+          {
+            "title": "Footer link row",
+            "code": "<row-ui justify=\"center\" gap=\"2\">\n  <link-ui text=\"Already have an account?\" variant=\"quiet\" href=\"/signin\"></link-ui>\n  <link-ui text=\"Sign in\" href=\"/signin\"></link-ui>\n</row-ui>\n"
+          }
+        ],
+        "keywords": [
+          "link",
+          "anchor",
+          "navigation",
+          "hyperlink",
+          "href",
+          "navigate",
+          "route",
+          "url"
+        ],
+        "name": "UILink",
+        "related": [
+          "Button",
+          "NavItem",
+          "Breadcrumb"
+        ],
+        "slots": {
+          "default": {
+            "description": "Link text content when the `text` prop is unused."
+          }
+        },
+        "states": [
+          {
+            "description": "Default rest state — underlined (or per variant).",
+            "name": "idle"
+          },
+          {
+            "description": "Color shifts to `--a-link-hover`.",
+            "name": "hover"
+          },
+          {
+            "description": "Auto-styled via `:visited` pseudo when navigating to a previously-visited URL.",
+            "name": "visited"
+          },
+          {
+            "description": "Suppressed activation; muted text color; aria-disabled.",
+            "name": "disabled"
+          }
+        ],
+        "synonyms": {
+          "Link": [
+            "Anchor",
+            "Hyperlink",
+            "NavLink"
+          ]
+        },
+        "tag": "link-ui",
+        "tokens": {
+          "--link-color": {
+            "description": "Resting link color. Default `var(--a-link)`."
+          },
+          "--link-color-hover": {
+            "description": "Hover-state color. Default `var(--a-link-hover)`."
+          },
+          "--link-color-visited": {
+            "description": "Visited-state color. Default `var(--a-link-visited)`."
+          },
+          "--link-underline-offset": {
+            "description": "Distance between baseline and underline. Default `2px`."
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
     "List": {
       "title": "List",
       "description": "Styled list with optional icons and dividers.",
@@ -10073,7 +10313,14 @@
       ],
       "unevaluatedProperties": false,
       "x-adiaui": {
-        "anti_patterns": [],
+        "anti_patterns": [
+          {
+            "description": "Wrapping a radio-ui in field-ui. The widget already self-labels.",
+            "right": "<radio-ui label=\"Basic plan\" name=\"plan\" value=\"basic\"></radio-ui>\n",
+            "rule": "Use [label] on radio-ui directly; do not wrap in field-ui.",
+            "wrong": "<field-ui inline label=\"Basic plan\">\n  <radio-ui name=\"plan\" value=\"basic\"></radio-ui>\n</field-ui>\n"
+          }
+        ],
         "category": "input",
         "events": {
           "change": {
@@ -10609,6 +10856,11 @@
           "type": "string",
           "default": "md"
         },
+        "grow": {
+          "description": "Fills remaining space in a flex parent. CSS-only attribute via :scope[grow] in row.css.",
+          "type": "boolean",
+          "default": false
+        },
         "justify": {
           "description": "Justify content",
           "type": "string",
@@ -11216,6 +11468,11 @@
           "type": "boolean",
           "default": false
         },
+        "options": {
+          "description": "Option list. Array of {value, label, disabled?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children.",
+          "type": "array",
+          "default": []
+        },
         "pattern": {
           "description": "Regex pattern for validation",
           "type": "string",
@@ -11236,6 +11493,16 @@
           "type": "boolean",
           "default": false
         },
+        "size": {
+          "description": "Sizing scale via universal `[size]` attribute system (packages/web-components/styles/tokens.css). Matches Input's sizing tokens so a Select rendered alongside an Input feels coherent in a form row.",
+          "type": "string",
+          "enum": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
         "value": {
           "description": "Currently selected option value",
           "type": "string",
@@ -12735,7 +13002,14 @@
       ],
       "unevaluatedProperties": false,
       "x-adiaui": {
-        "anti_patterns": [],
+        "anti_patterns": [
+          {
+            "description": "Wrapping a switch-ui in field-ui. The widget already self-labels.",
+            "right": "<switch-ui label=\"Email notifications\"></switch-ui>\n",
+            "rule": "Use [label] on switch-ui directly; do not wrap in field-ui.",
+            "wrong": "<field-ui inline label=\"Email notifications\">\n  <switch-ui></switch-ui>\n</field-ui>\n"
+          }
+        ],
         "category": "layout",
         "events": {
           "change": {
@@ -12818,9 +13092,19 @@
         }
       ],
       "properties": {
+        "columns": {
+          "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.",
+          "type": "array",
+          "default": []
+        },
         "component": {
           "const": "Table"
         },
+        "data": {
+          "description": "Row records. Array of plain objects keyed to columns[].key.",
+          "type": "array",
+          "default": []
+        },
         "density": {
           "description": "Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows.",
           "type": "string",
@@ -13656,6 +13940,10 @@
           "type": "string",
           "default": ""
         },
+        "textContent": {
+          "description": "Tag label. Renderer routes this to the `text` attribute, rendered via CSS attr(text) on ::after.",
+          "$ref": "#/$defs/DynamicString"
+        },
         "variant": {
           "description": "Semantic variant — `default | info | success | warning | danger`.",
           "type": "string",
@@ -13778,6 +14066,11 @@
           "type": "number",
           "default": 0
         },
+        "strong": {
+          "description": "When true, applies stronger emphasis (heavier weight + accent color). Styled via :scope[strong] in text.css. Use instead of variant=heading when you want a single emphasized word inline in body copy.",
+          "type": "boolean",
+          "default": false
+        },
         "textContent": {
           "description": "Display text content. The main payload field for Text components extracted from HTML.",
           "$ref": "#/$defs/DynamicString"
@@ -13885,6 +14178,11 @@
           "type": "string",
           "default": ""
         },
+        "name": {
+          "description": "Form control name for form data submission. Inherited from UIFormElement.",
+          "type": "string",
+          "default": ""
+        },
         "placeholder": {
           "description": "Placeholder text shown when textarea is empty.",
           "type": "string",

package/catalog-a2ui_0_9_rules.txt

@@ -11,11 +11,29 @@
 - Multiple <section> siblings are allowed and stack vertically. [bleed] on a section removes its margin for edge-to-edge content (tables, charts); [padding] adds a canvas-scrim background for hero regions.
 - Footer with a [slot="description"] + [slot="action"] pair triggers justify-content: space-between — useful for a "Last saved …" note on the left and a Save/Cancel button group on the right.
 
+## Check
+- Self-labeling widget — use the [label] attribute directly; do NOT wrap in <field-ui>. The widget renders its own label inline via CSS attr() pattern. Wrapping breaks the consent-row layout (see field-ui anti_patterns).
+
+## Field
+- field-ui is for WIDE controls (input-ui, select-ui, textarea-ui, slider-ui, etc.) that need a separate label row. Small self-labeling widgets (check-ui, switch-ui, radio-ui, toggle-ui) carry their own [label] attribute and MUST NOT be wrapped in field-ui.
+- field-ui[inline] is for inline WIDE-control rows (e.g. search field with trailing kbd hint), NOT for compact-widget rows. For settings rows or consent rows, use the widget's own [label] attribute directly without a field-ui wrapper.
+
 ## Grid
 - For asymmetric column ratios, use [columns="N"] plus [span="M"] on the child that should be wider. Never set grid-template-columns via style — it bypasses the component API and reads as a local hack.
 - Canonical ratios: 1:1 → columns="2"; 2:1 → columns="3" + span="2"; 3:1 → columns="4" + span="3"; 3:2 → columns="5" + span="3"+"2"; 4:1 → columns="5" + span="4". Round unusual ratios (e.g. 7:5) to 3:2.
 - The default (no columns attribute) gives equal auto-columns flowing in a single row. Prefer the explicit numeric attribute for dashboard rows so the layout is predictable when items wrap.
 
+## Link
+- Use `<link-ui>` for navigation; use `<button-ui>` for actions. They are NOT interchangeable.
+- When wrapping action affordances that visually mimic links (e.g. 'Forgot password?' that triggers a reset flow), prefer `<button-ui variant="ghost">` over a fake `<link-ui>` — the affordance is semantically a button, just visually understated.
+- For inline-sentence affordances ('I agree to the [Terms] and [Privacy]'), nest `<link-ui>` directly inside `<text-ui>` so it inherits the paragraph's font / size / line-height.
+
+## Radio
+- Self-labeling widget — use the [label] attribute directly; do NOT wrap in <field-ui>. The widget renders its own label inline via CSS attr() pattern. For radio groups, the canonical pattern is a column of bare <radio-ui label='…'> elements sharing a [name=] — no field-ui wrapper around each radio.
+
+## Switch
+- Self-labeling widget — use the [label] attribute directly; do NOT wrap in <field-ui>. The widget renders its own label inline via CSS attr() pattern. For settings rows (label-left, switch-right), put the descriptive text in switch-ui's own [label] attribute; do not introduce a field-ui wrapper. For descriptive helper text below the switch, use <text-ui variant='caption'> as a sibling — not field-ui's hint slot.
+
 ## ChatComposer
 - chat-composer is the bespoke replacement for legacy <chat-input-ui data-chat-input> inside <chat-shell>. Place an inner <chat-input-ui submit-on-enter> as the primary input.
 - The host listens for 'composer-submit' on the composer (not on the inner input). The event detail mirrors the inner submit event so existing handlers Just Work.