@adia-ai/a2ui-corpus 0.7.22 → 0.7.24

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @adia-ai/a2ui-corpus
 
+## [0.7.24] — 2026-07-01
+
+### Changed
+- **`catalog-a2ui_0_9.json` + `catalog-a2ui_0_9_rules.txt` regenerated — registers `display-field-ui`.** The generator catalog was rebuilt from the component yaml SoT after the new `display-field/display-field.yaml` landed, so the published catalog exposes `display-field-ui` (120 → 121 components) to the gen-UI pipeline. Chunks + `chunk-embeddings.json` byte-stable (no new annotated chunks; no re-embed). Substantive v0.7.24 work shipped in `@adia-ai/web-components` — see `packages/web-components/CHANGELOG.md#0724--2026-07-01`.
+
+## [0.7.23] — 2026-06-30
+
+### Changed
+- **`catalog-a2ui_0_9.json` regenerated — `button-ui` gained the `icon-only` state.** The generator catalog was rebuilt from the component yaml SoT after `button.yaml` added the `icon-only` state (`attribute: data-icon-only`), so the published catalog reflects the new derived state. Chunks + `chunk-embeddings.json` byte-stable (no re-embed; freshness gates green). Substantive v0.7.23 work shipped in `@adia-ai/web-components` — see `packages/web-components/CHANGELOG.md#0723--2026-06-30`.
+
 ## [0.7.22] — 2026-06-16
 
 ### Maintenance

package/catalog-a2ui_0_9.json

@@ -3796,6 +3796,11 @@
             "description": "Default, ready for interaction.",
             "name": "idle"
           },
+          {
+            "description": "No text label — neither the `text` attr nor non-whitespace child text. Reflected by render() as `[data-icon-only]`; the CSS collapses the button to a square icon slot (zero inline padding, width = height) and keeps it inline-level. A button labeled by child text (`<button-ui>Save</button-ui>`) is NOT icon-only and renders at full content width, same as `text=`.",
+            "attribute": "data-icon-only",
+            "name": "icon-only"
+          },
           {
             "description": "Non-interactive; dimmed.",
             "attribute": "disabled",
@@ -9048,6 +9053,189 @@
         "version": 1
       }
     },
+    "DisplayField": {
+      "title": "DisplayField",
+      "description": "Display-only labeled value — a field-shaped read-out for a static or masked value (e.g. a card on file \"•••• 4242\"), or a labeled slot that hosts a third-party element (a Stripe Element iframe) under a proper caption. Unlike field-ui it wraps NO interactive control: no focus, no contenteditable, no form participation, no [for]/id-minting. The label names the whole field for assistive tech via role=\"group\" + aria-labelledby, so a slotted foreign element (iframe) is announced with its caption. Reach for field-ui + input-ui when the value is EDITABLE; stat-ui for a prominent metric/KPI; description-list-ui for many read-only key/value pairs at once.",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "component": {
+          "const": "DisplayField"
+        },
+        "hint": {
+          "description": "Optional caption rendered below the value in subtle style (e.g. \"Expires 12/26\"). Wired into the field's aria-describedby.",
+          "type": "string",
+          "default": ""
+        },
+        "icon": {
+          "description": "Optional leading icon name shown beside the value (e.g. a lock or card-brand glyph). Lazily creates a single icon-ui child.",
+          "type": "string",
+          "default": ""
+        },
+        "label": {
+          "description": "The field caption. Names the whole field for assistive tech.",
+          "type": "string",
+          "default": ""
+        },
+        "value": {
+          "description": "The static value text to display (e.g. \"•••• 4242\"). Ignored when the default slot already carries content — slot a foreign element OR set value=, not both.",
+          "type": "string",
+          "default": ""
+        },
+        "variant": {
+          "description": "Cosmetic value treatment. `default` renders the value in the UI font; `masked` switches to the code/mono family with tabular numerals and light letter-spacing so masked strings (\"•••• 4242\") align cleanly. Tokens only — no layout change.",
+          "type": "string",
+          "enum": [
+            "default",
+            "masked"
+          ],
+          "default": "default"
+        }
+      },
+      "required": [
+        "component",
+        "label"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "description": "Using input-ui[readonly] to render a static masked value. A readonly input still carries contenteditable/focus semantics and tab-stops; a display read-out should not be a control.",
+            "right": "<display-field-ui label=\"Card on file\" value=\"•••• 4242\" variant=\"masked\"></display-field-ui>\n",
+            "rule": "A non-editable masked value is display-field-ui, not a readonly input.",
+            "wrong": "<input-ui readonly value=\"•••• 4242\"></input-ui>\n"
+          }
+        ],
+        "category": "form",
+        "composes": [
+          "icon-ui"
+        ],
+        "events": {},
+        "examples": [
+          {
+            "description": "A masked \"card on file\" read-out with a leading lock icon and an expiry hint.",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"DisplayField\",\n    \"label\": \"Card on file\",\n    \"value\": \"•••• •••• •••• 4242\",\n    \"variant\": \"masked\",\n    \"icon\": \"lock\",\n    \"hint\": \"Expires 12/26\"\n  }\n]",
+            "name": "card-on-file"
+          },
+          {
+            "description": "A labeled slot hosting a third-party element (e.g. a Stripe Element mount).",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"DisplayField\",\n    \"label\": \"Card number\",\n    \"children\": [\"mount\"]\n  },\n  { \"id\": \"mount\", \"component\": \"Text\", \"text\": \"[Stripe Element mounts here]\" }\n]",
+            "name": "foreign-element-slot"
+          }
+        ],
+        "keywords": [
+          "display field",
+          "readonly",
+          "read-only",
+          "masked",
+          "mask",
+          "static value",
+          "card on file",
+          "last four",
+          "value",
+          "readout",
+          "stripe element",
+          "iframe slot",
+          "non-editable"
+        ],
+        "name": "UIDisplayField",
+        "related": [
+          "field",
+          "input",
+          "stat",
+          "description-list"
+        ],
+        "slots": {
+          "default": {
+            "description": "The value content. Slot a third-party element here — a Stripe Element iframe mount, or rich markup — and it takes the value region under the label, replacing the [value] attribute. The host's role=\"group\" + aria-labelledby names it for assistive tech."
+          },
+          "hint": {
+            "description": "The hint caption below the value. Auto-stamped from the [hint] attribute; wired into aria-describedby."
+          },
+          "icon": {
+            "description": "The leading icon (a single icon-ui). Auto-stamped from the [icon] attribute."
+          },
+          "label": {
+            "description": "The caption element. Auto-stamped from the [label] attribute; slot your own [slot=\"label\"] child to override with richer markup. It is the group's accessible name (the aria-labelledby target)."
+          },
+          "value": {
+            "description": "The static value element. Auto-stamped from the [value] attribute; suppressed when the default slot carries foreign content."
+          }
+        },
+        "states": [
+          {
+            "description": "Default, non-interactive read-out.",
+            "name": "idle"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "masked": [
+            "display field",
+            "field",
+            "value"
+          ],
+          "readout": [
+            "display field",
+            "stat",
+            "field"
+          ],
+          "value": [
+            "display field",
+            "field",
+            "stat"
+          ]
+        },
+        "tag": "display-field-ui",
+        "tokens": {
+          "--display-field-gap": {
+            "description": "Vertical gap between the label, value, and hint rows."
+          },
+          "--display-field-hint-color": {
+            "description": "Hint foreground color."
+          },
+          "--display-field-hint-size": {
+            "description": "Hint font size."
+          },
+          "--display-field-icon-gap": {
+            "description": "Horizontal gap between the leading icon and the value."
+          },
+          "--display-field-label-color": {
+            "description": "Label foreground color."
+          },
+          "--display-field-label-size": {
+            "description": "Label font size."
+          },
+          "--display-field-label-weight": {
+            "description": "Label font weight."
+          },
+          "--display-field-masked-font": {
+            "description": "Font family applied to a masked value."
+          },
+          "--display-field-masked-tracking": {
+            "description": "Letter-spacing applied to a masked value."
+          },
+          "--display-field-value-color": {
+            "description": "Value foreground color."
+          },
+          "--display-field-value-size": {
+            "description": "Value font size."
+          },
+          "--display-field-value-weight": {
+            "description": "Value font weight."
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
     "Divider": {
       "title": "Divider",
       "description": "Horizontal or vertical divider with optional label — a semantic\nrule between content groups. Set [vertical] for column dividers\n(typically inside <row-ui>); set [label] for a labeled-rule pattern\nwhere the divider carries a short caption (e.g. \"OR\" between auth\nmethods, \"Today\" between message groups). Distinct from\n<hr data-nav-divider> (which is a CSS hook used by <nav-ui> for nav\nsection separation, not a primitive).\n",

package/catalog-a2ui_0_9_rules.txt

@@ -229,6 +229,11 @@
 - Do not use for editable forms — use <fields-ui> instead.
 - Pairs render as label + value on the same row by default; use vertical variant for narrow panes.
 
+## DisplayField
+- Use for a display-ONLY labeled value — a masked card number, a 'card on file' read-out, an account id — anywhere a value reads as a field but must not be editable.
+- To host a third-party element (a Stripe Element iframe) under a label, slot it as the default child instead of setting value=. The label names it via role=group + aria-labelledby.
+- For an editable field use field-ui + input-ui; for a prominent KPI use stat-ui; for many read-only pairs at once use description-list-ui.
+
 ## Divider
 - Use to separate visually distinct sections within a container; horizontal default, vertical via orientation='vertical'.
 - Inside menus / popovers use <menu-divider-ui> instead; it has menu-specific token spacing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/a2ui-corpus",
-  "version": "0.7.22",
+  "version": "0.7.24",
   "type": "module",
   "description": "AdiaUI A2UI training corpus \u2014 canonical v0.9 catalog + chunks + eval fixtures + feedback + gap registry. Consumed by the compose engine's retrieval layer + the MCP pipeline.",
   "exports": {