@adia-ai/web-components 0.6.36 → 0.6.37

package/components/context-menu/context-menu.yaml

@@ -0,0 +1,136 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIContextMenu
+tag: context-menu-ui
+status: stable
+component: ContextMenu
+category: container
+version: 1
+description: |
+  Right-click activated menu — the OS-native context-menu pattern as a
+  web component. Distinct from `menu-ui` (which is button-triggered):
+  same item shape (`menu-item-ui` children), different trigger surface
+  (`contextmenu` event), and pointer-anchored positioning instead of
+  element-anchored. Pattern: WAI-APG Menu.
+
+  Two binding modes:
+   **A. Wrap.** Default-slot child becomes the target:
+   `<context-menu-ui><my-table>...</my-table>...items</context-menu-ui>`.
+   **B. Selector.** Point at one or more existing elements via [for]:
+   `<context-menu-ui for="#my-table">...items</context-menu-ui>`.
+
+  On `contextmenu` event on a target: `preventDefault()`, position the
+  menu at the pointer coords, show via Popover API. Touch long-press
+  (configurable via [long-press-ms]) does the same. Shift+F10 / Menu
+  key opens at the focused target's center for keyboard users.
+composes:
+  - menu-item-ui
+props:
+  for:
+    description: CSS selector(s) for target element(s). Empty = use default-slot child.
+    type: string
+    default: ""
+    reflect: true
+  open:
+    description: Programmatic open state. Set true to open at target center.
+    type: boolean
+    default: false
+    reflect: true
+  long-press-ms:
+    description: Long-press duration (ms) on touch devices to open the menu.
+    type: number
+    default: 500
+    reflect: false
+    attribute: long-press-ms
+events:
+  context-menu-open:
+    description: Fired when the menu opens (right-click / long-press / keyboard).
+    detail:
+      target:
+        type: Element
+        description: The target element the menu was opened on.
+      x:
+        type: number
+        description: Pointer x coord (viewport-relative); null for keyboard activation.
+      y:
+        type: number
+        description: Pointer y coord; null for keyboard activation.
+  context-menu-close:
+    description: Fired when the menu closes (item-select / outside-click / Escape).
+    detail:
+      reason:
+        type: string
+        description: '"select" | "outside" | "escape"'
+  context-menu-select:
+    description: Fired when an item is activated. Same shape as menu-ui's `action` event.
+    detail:
+      value:
+        type: string
+        description: Selected item's value.
+      text:
+        type: string
+        description: Selected item's text.
+slots:
+  default:
+    description: |
+      Two-purpose slot: the wrapped target element (mode A — first
+      non-menu-item-ui child) AND the menu-item-ui items. Items are
+      promoted to the popover surface on open.
+states:
+  - name: idle
+    description: Default. Menu closed; trigger listeners attached.
+  - name: open
+    description: Menu visible at pointer position; focus inside.
+    attribute: open
+traits: []
+tokens:
+  --context-menu-bg:
+    description: Menu surface background color.
+    default: var(--a-bg-subtle)
+  --context-menu-border:
+    description: Menu surface border color.
+    default: var(--a-border-subtle)
+  --context-menu-radius:
+    description: Menu surface border radius.
+    default: var(--a-radius-md)
+  --context-menu-shadow:
+    description: Menu surface shadow.
+    default: var(--a-shadow-lg)
+a2ui:
+  rules:
+    - rule: 'Use <context-menu-ui> for right-click menus on a target (table row, file item, canvas object). For button-triggered menus use <menu-ui>; for popover content that is not a menu use <popover-ui> directly.'
+      reason: 'Trigger surface boundary.'
+    - rule: 'Items are <menu-item-ui> children inside the default slot — same shape as <menu-ui> items.'
+      reason: 'Single menu vocabulary.'
+    - rule: 'Bind target via wrap (default-slot first non-menu-item-ui child) OR [for] selector. The selector form is useful for whole-table or whole-canvas menus where wrapping isn''t practical.'
+      reason: 'Two binding shapes.'
+anti_patterns:
+  - wrong: '<context-menu-ui>...just items...</context-menu-ui>'
+    why: 'No target binding — the menu never opens.'
+    fix: 'Wrap a target: `<context-menu-ui><my-target></my-target>...items</context-menu-ui>` OR point at one: `<context-menu-ui for="#my-target">...items</context-menu-ui>`.'
+examples:
+  - name: file-actions
+    description: Right-click a file row for Open / Rename / Delete.
+    a2ui: |
+      [
+        { "id": "root", "component": "ContextMenu", "children": ["target", "item-open", "item-rename", "div", "item-delete"] },
+        { "id": "target", "component": "Text", "textContent": "Right-click me" },
+        { "id": "item-open",   "component": "MenuItem", "value": "open",   "text": "Open" },
+        { "id": "item-rename", "component": "MenuItem", "value": "rename", "text": "Rename" },
+        { "id": "div",         "component": "MenuDivider" },
+        { "id": "item-delete", "component": "MenuItem", "value": "delete", "text": "Delete", "variant": "danger" }
+      ]
+keywords:
+  - context-menu
+  - right-click
+  - menu
+  - popup-menu
+synonyms:
+  right-click:
+    - context-menu
+  popup-menu:
+    - menu
+    - context-menu
+related:
+  - menu
+  - menu-item
+  - popover

package/components/date-range-picker/date-range-picker.a2ui.json

@@ -75,6 +75,21 @@
       "type": "string",
       "default": "Select range"
     },
+    "placement": {
+      "description": "Popover placement relative to the trigger. Default `bottom` centers the two-calendar panel under the trigger (ADR-0034 Rule 2 — ~800px panel >> trigger).",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ],
+      "default": "bottom"
+    },
     "readonly": {
       "description": "Block edits; allow keyboard navigation for screen-reader inspection.",
       "type": "boolean",

package/components/date-range-picker/date-range-picker.class.js

@@ -144,6 +144,8 @@ export class UIDateRangePicker extends UIFormElement {
       placeholder:  { type: String,  default: 'Select range', reflect: true },
       format:       { type: String,  default: 'short', reflect: true },
       noPresets:    { type: Boolean, default: false, attribute: 'no-presets', reflect: true },
+      // Popover placement — yaml documented reflect:true since v1.
+      placement:    { type: String,  default: 'bottom', reflect: true },
     };
   }
 

package/components/date-range-picker/date-range-picker.yaml

@@ -91,6 +91,20 @@ props:
     default: false
     attribute: no-presets
     reflect: true
+  placement:
+    description: Popover placement relative to the trigger. Default `bottom` centers the two-calendar panel under the trigger (ADR-0034 Rule 2 — ~800px panel >> trigger).
+    type: string
+    default: bottom
+    reflect: true
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
 events:
   change:
     description: Fired when the range commits (both `from` AND `to` selected, OR a preset clicked).

package/components/datetime-picker/datetime-picker.a2ui.json

@@ -76,6 +76,21 @@
       "type": "string",
       "default": "Select date and time"
     },
+    "placement": {
+      "description": "Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ],
+      "default": "bottom"
+    },
     "precision": {
       "description": "Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`.",
       "type": "string",

package/components/datetime-picker/datetime-picker.class.js

@@ -136,6 +136,8 @@ export class UIDatetimePicker extends UIFormElement {
       placeholder: { type: String,  default: 'Select date and time', reflect: false },
       format:      { type: String,  default: 'short',  reflect: true },
       locale:      { type: String,  default: '',       reflect: false },
+      // Popover placement — yaml documented reflect:true since v1.
+      placement:   { type: String,  default: 'bottom', reflect: true },
     };
   }
 
@@ -439,7 +441,7 @@ export class UIDatetimePicker extends UIFormElement {
           // helper. Without this, the popover renders at viewport (0,0).
           this.#anchorCleanup?.();
           this.#anchorCleanup = anchorPopover(this.#triggerRef, this.#popoverRef, {
-            placement: this.getAttribute('placement') || 'bottom-start',
+            placement: this.getAttribute('placement') || 'bottom', // ADR-0034 Rule 2: panel >> trigger
             gap: 4,
           });
           document.addEventListener('pointerdown', this.#onOutside);

package/components/datetime-picker/datetime-picker.d.ts

@@ -64,6 +64,8 @@ document locale. `h12` forces a 12-hour cycle with an AM/PM
   open: boolean;
   /** Text shown in the trigger when the value is empty. */
   placeholder: string;
+  /** Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger). */
+  placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
   /** Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`. */
   precision: 'minute' | 'second';
   /** Block edits; allow keyboard navigation for screen-reader inspection. */

package/components/datetime-picker/datetime-picker.yaml

@@ -104,6 +104,20 @@ props:
     description: BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.
     type: string
     default: ''
+  placement:
+    description: Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).
+    type: string
+    default: bottom
+    reflect: true
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
 events:
   change:
     description: Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).

package/components/empty-state/empty-state.class.js

@@ -29,6 +29,8 @@ export class UIEmptyState extends UIElement {
     icon:        { type: String,  default: '',    reflect: true },
     heading:     { type: String,  default: '',    reflect: true },
     description: { type: String,  default: '',    reflect: true },
+    // Semantic variant — yaml documented reflect:true since v1.
+    variant:     { type: String,  default: '',    reflect: true },
     // §223 (v0.5.9): minimal layout — single-line muted (no centered column,
     // no padding bump, no icon-size lg). Use for inline empty-table-row /
     // inline placeholder cells where the canvas placeholder is too loud.

package/components/feed/feed.class.js

@@ -296,9 +296,14 @@ export class UIFeed {
    * @param {string} [opts.position='bottom-right']
    * @param {boolean} [opts.dismissible]  override default (true for sticky, false for auto)
    * @param {string} [opts.id]
-   * @param {string} [opts.action]  Phase 2 — action button label. When set,
-   *                                duration is forced to null (sticky); the
-   *                                item gets role=alertdialog + focus trap.
+   * @param {string} [opts.action]  Phase 2 — action button label. When set
+   *                                without an explicit duration, the item is
+   *                                sticky (role=alertdialog + focus trap).
+   *                                Pass an explicit numeric `duration` to
+   *                                build the "undo" pattern: the action
+   *                                button shows, but the item auto-dismisses
+   *                                after the timeout. Negative-action UX
+   *                                (delete/archive) typically uses 6000-8000.
    * @param {function} [opts.onAction]  Phase 2 — callback invoked when the
    *                                action button is pressed. Item dismisses
    *                                after the callback returns.
@@ -330,8 +335,11 @@ export class UIFeed {
     item.heading = heading;
     item.icon = icon;
     item.variant = v;
-    // Action-required forces sticky.
-    item.duration = action ? 0 : duration;
+    // Action-required default is sticky; explicit duration honored so callers
+    // can build the "undo" pattern (action + timed auto-dismiss). Default
+    // (duration unspecified) preserves the original alertdialog sticky behavior.
+    const explicitDuration = 'duration' in opts;
+    item.duration = action && !explicitDuration ? 0 : duration;
     if (dismissible != null) item.dismissible = !!dismissible;
     if (action) item.action = action;
     if (visibleCount >= max) item.setAttribute('data-queued', '');

package/components/feed/feed.css

@@ -40,6 +40,10 @@ feed-item-ui[data-closing] {
     pointer-events: none; /* Items re-enable pointer-events. */
     width: max-content;
     max-width: var(--feed-max-width, var(--feed-max-width-default));
+    /* Items size to their own content (see feed-item-ui width: max-content);
+       align them to the lane's anchored edge so short items hug the side
+       rather than left-aligning inside a wider container. */
+    align-items: flex-end;
   }
   /* Reset native popover defaults. UA stylesheet sets `margin: auto;
      inset: 0; border: solid; padding: 0.25em` which would center the
@@ -61,11 +65,13 @@ feed-item-ui[data-closing] {
   }
   :scope[position="bottom-left"] {
     bottom: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto;
+    align-items: flex-start;
   }
   :scope[position="bottom-center"] {
     bottom: var(--feed-offset, var(--feed-offset-default));
     left: 50%; right: auto;
     transform: translateX(-50%);
+    align-items: center;
   }
   :scope[position="top-right"] {
     top: var(--feed-offset, var(--feed-offset-default)); right: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
@@ -74,12 +80,14 @@ feed-item-ui[data-closing] {
   :scope[position="top-left"] {
     top: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto; bottom: auto;
     flex-direction: column-reverse;
+    align-items: flex-start;
   }
   :scope[position="top-center"] {
     top: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
     left: 50%; right: auto;
     transform: translateX(-50%);
     flex-direction: column-reverse;
+    align-items: center;
   }
   :scope[position="inline"] {
     position: relative;
@@ -119,6 +127,12 @@ feed-item-ui[data-closing] {
     display: flex;
     align-items: center;
     gap: var(--feed-item-gap);
+    /* Size to own content (a one-line "OK" stays narrow), capped at
+       max-width (long messages wrap at the bound). The lane container's
+       align-items (per [position]) re-aligns short items to the anchored
+       edge so they hug the corner instead of left-aligning under a
+       wider sibling. */
+    width: max-content;
     max-width: var(--feed-item-max-width);
     padding: var(--feed-item-py) var(--feed-item-px);
     background: var(--feed-item-bg);

package/components/index.js

@@ -79,11 +79,20 @@ export { UIChartLegend } from './chart-legend/chart-legend.js';
 export { UIPopover } from './popover/popover.js';
 export { UIAccordion, UIAccordionItem } from './accordion/accordion.js';
 export { UIDivider } from './divider/divider.js';
+export { UIBlockquote } from './blockquote/blockquote.js';
+export { UIRelativeTime } from './relative-time/relative-time.js';
+export { UINumberFormat } from './number-format/number-format.js';
+export { UIPasswordStrength } from './password-strength/password-strength.js';
+export { UITableOfContents } from './toc/toc.js';
+export { UIQRCode } from './qr-code/qr-code.js';
 export { UIPagination } from './pagination/pagination.js';
 export { UICode } from './code/code.js';
 export { UIList, UIListItem } from './list/list.js';
 export { UIListWindow } from './list-window/list-window.js';
 export { UIMenu, UIMenuItem, UIMenuDivider } from './menu/menu.js';
+export { UIContextMenu } from './context-menu/context-menu.js';
+export { UIVisuallyHidden } from './visually-hidden/visually-hidden.js';
+export { UISkipNav } from './skip-nav/skip-nav.js';
 export { UIToolbar, UIToolbarGroup } from './toolbar/toolbar.js';
 export { UINav } from './nav/nav.js';
 export { UINavGroup } from './nav-group/nav-group.js';

package/components/integration-card/integration-card.class.js

@@ -229,6 +229,15 @@ export class UIIntegrationCard extends UIElement {
     if (!this.#logoEl) return;
     const logo = (this.logo || '').trim();
 
+    // Guard against unresolved AdiaUI template binding descriptors
+    // ({{p:N}} placeholders). The integration-card's connected() + render()
+    // fires synchronously when the parent template stamps the element, BEFORE
+    // the parent's reconciliation pass replaces {{p:N}} with the real value.
+    // Skipping here lets the second render (triggered by the reconciliation's
+    // property set) render the real logo. Without this guard, icon-ui fires
+    // a "not found" warn for every {{p:4}} it receives on first connect.
+    if (logo.startsWith('{{p:')) return;
+
     // No logo → strip any prior content and hide.
     if (!logo) {
       this.#logoEl.replaceChildren();

package/components/integration-card/integration-card.test.js

@@ -275,9 +275,10 @@ describe('integration-card-ui — CSS contract (source-grep)', () => {
 
     expect(CSS).toMatch(/@scope\s*\(\s*integration-card-ui\s*\)/);
     expect(CSS).toMatch(/:where\(:scope\)\s*\{/);
-    expect(CSS).toMatch(/--integration-card-bg:/);
-    expect(CSS).toMatch(/--integration-card-border:/);
-    expect(CSS).toMatch(/--integration-card-radius:/);
+    // OD-5 sweep: token declarations use -default suffix per component-token-contract.md
+    expect(CSS).toMatch(/--integration-card-bg-default:/);
+    expect(CSS).toMatch(/--integration-card-border-default:/);
+    expect(CSS).toMatch(/--integration-card-radius-default:/);
   });
 
   it('keeps status-driven border tint (status="connected") inside @scope', async () => {

package/components/nav-group/nav-group.css

@@ -26,7 +26,13 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--nav-gap);
+    /* Fallback to --nav-gap-default (cascaded from the ancestor nav-ui
+       where it's defined) so child nav-items get the spec spacing even
+       when the override token --nav-gap isn't explicitly set. Without
+       the fallback `var(--nav-gap)` resolved to empty → invalid gap →
+       items packed at 0 px stride. Reported 2026-05-25; latent since
+       Apr-20 snapshot. */
+    gap: var(--nav-gap, var(--nav-gap-default, var(--a-space-1)));
     position: relative;
     font-weight: var(--nav-group-text-weight);
   }

package/components/number-format/number-format.a2ui.json

@@ -0,0 +1,180 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/NumberFormat.json",
+  "title": "NumberFormat",
+  "description": "Display a numeric value with locale-aware formatting — currency,\npercentage, compact (1.2K / 3.4M), unit, or plain decimal. Wraps\n`Intl.NumberFormat`. Distinct from `<input-ui type=\"number\">`\n(an INPUT primitive); this is a DISPLAY primitive — read-only, no\nform participation, no keyboard handling. Pair with `<stat-ui>` for\nKPI surfaces or use standalone inline within prose.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "compactDisplay": {
+      "description": "When [notation=\"compact\"], controls the compact-form length.\n`short` = \"1.2M\" (default); `long` = \"1.2 million\".\n",
+      "type": "string",
+      "enum": [
+        "short",
+        "long"
+      ],
+      "default": "short"
+    },
+    "component": {
+      "const": "NumberFormat"
+    },
+    "currency": {
+      "description": "ISO 4217 currency code (e.g. \"USD\", \"EUR\", \"JPY\"). Required when\n[number-style=\"currency\"]; ignored otherwise.\n",
+      "type": "string",
+      "default": ""
+    },
+    "locale": {
+      "description": "BCP-47 locale tag for the formatter. Empty defaults to the\ndocument locale (`<html lang>`) then to browser default.\n",
+      "type": "string",
+      "default": ""
+    },
+    "maximumFractionDigits": {
+      "description": "Maximum fractional digits (0–20). Default `2` for decimal/\ncurrency/percent, `1` for compact notation.\n",
+      "type": "number",
+      "default": 2
+    },
+    "minimumFractionDigits": {
+      "description": "Minimum fractional digits (0–20). Padded with trailing zeros.\nUseful for currency display to force \".00\" suffix.\n",
+      "type": "number",
+      "default": 0
+    },
+    "notation": {
+      "description": "`Intl.NumberFormat` `notation` option. `standard` is the\nthousands-grouped form (1,234,567); `compact` is the abbreviated\nform (1.2M); `scientific` and `engineering` are the exponent\nforms. Defaults to `standard`.\n",
+      "type": "string",
+      "enum": [
+        "standard",
+        "compact",
+        "scientific",
+        "engineering"
+      ],
+      "default": "standard"
+    },
+    "numberStyle": {
+      "description": "`Intl.NumberFormat` `style` option. `decimal` (default) renders a\nplain number with locale-aware grouping. `currency` requires\n[currency] to be set. `percent` formats 0–1 as 0%–100%. `unit`\nrequires [unit] to be set (e.g. \"kilobyte\", \"celsius\").\n",
+      "type": "string",
+      "enum": [
+        "decimal",
+        "currency",
+        "percent",
+        "unit"
+      ],
+      "default": "decimal"
+    },
+    "signDisplay": {
+      "description": "`Intl.NumberFormat` `signDisplay` option. `auto` (default) shows\n\"−\" for negatives only; `always` shows \"+\" / \"−\"; `exceptZero`\nshows sign for non-zero only; `never` hides signs.\n",
+      "type": "string",
+      "enum": [
+        "auto",
+        "always",
+        "exceptZero",
+        "never"
+      ],
+      "default": "auto"
+    },
+    "unit": {
+      "description": "`Intl.NumberFormat` unit identifier (e.g. \"kilometer-per-hour\",\n\"celsius\", \"byte\"). Required when [number-style=\"unit\"]; ignored\notherwise. See MDN's NumberFormat docs for the valid set.\n",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "The numeric value to format. Empty string or non-numeric value\nrenders nothing.\n",
+      "type": "number",
+      "default": 0
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<number-format-ui value=\"0.5\" number-style=\"percent\"></number-format-ui>\n",
+        "why": "Renders \"5,000%\" — Intl.NumberFormat percent style multiplies the\ninput by 100. value=50 means \"5000%\".\n",
+        "wrong": "<number-format-ui value=\"50\" number-style=\"percent\"></number-format-ui>\n"
+      },
+      {
+        "fix": "<number-format-ui value=\"9.99\" number-style=\"currency\" currency=\"USD\"></number-format-ui>\n",
+        "why": "Missing [currency] code. Renders nothing rather than producing\nmalformed currency output.\n",
+        "wrong": "<number-format-ui value=\"9.99\" number-style=\"currency\"></number-format-ui>\n"
+      }
+    ],
+    "category": "display",
+    "composes": [],
+    "events": {},
+    "examples": [
+      {
+        "description": "Plain locale-grouped number — default style.",
+        "a2ui": "[\n  {\n    \"id\": \"n\",\n    \"component\": \"NumberFormat\",\n    \"value\": 1234567.89\n  }\n]\n",
+        "name": "decimal"
+      },
+      {
+        "description": "USD currency display.",
+        "a2ui": "[\n  {\n    \"id\": \"n\",\n    \"component\": \"NumberFormat\",\n    \"value\": 1299.99,\n    \"numberStyle\": \"currency\",\n    \"currency\": \"USD\"\n  }\n]\n",
+        "name": "currency"
+      },
+      {
+        "description": "Fraction → percent (0.876 → 87.6%).",
+        "a2ui": "[\n  {\n    \"id\": \"n\",\n    \"component\": \"NumberFormat\",\n    \"value\": 0.876,\n    \"numberStyle\": \"percent\",\n    \"maximumFractionDigits\": 1\n  }\n]\n",
+        "name": "percent"
+      },
+      {
+        "description": "Compact-form (1.2M, 3.4K).",
+        "a2ui": "[\n  {\n    \"id\": \"n\",\n    \"component\": \"NumberFormat\",\n    \"value\": 1234567,\n    \"notation\": \"compact\"\n  }\n]\n",
+        "name": "compact"
+      }
+    ],
+    "keywords": [
+      "number-format",
+      "format",
+      "currency",
+      "percent",
+      "percentage",
+      "compact",
+      "number",
+      "locale",
+      "intl"
+    ],
+    "name": "UINumberFormat",
+    "related": [
+      "stat",
+      "text",
+      "badge",
+      "input"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, displaying the formatted value.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "currency": [
+        "number-format",
+        "money",
+        "price"
+      ],
+      "number": [
+        "number-format",
+        "format"
+      ],
+      "percent": [
+        "number-format",
+        "percentage"
+      ]
+    },
+    "tag": "number-format-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}