@adia-ai/web-components 0.6.36 → 0.6.38

package/components/list/list.css

@@ -126,19 +126,27 @@
     min-height: var(--a-space-6);
   }
 
-  :scope > [slot="icon"] {
+  /* Slot positioning uses descendant (not direct-child >) because the
+     template engine wraps `${...}` conditional renders in
+     <span style="display:contents"> housekeeping nodes — so slot="…"
+     children land as grandchildren in template-rendered hosts.
+     display:contents makes the wrapper layout-transparent (the grid
+     places the inner element), but CSS selectors still see the wrapper
+     as a real node. Descendant selectors handle both shapes (direct
+     authored children + template-engine-wrapped conditionals). */
+  :scope [slot="icon"] {
     grid-column: 1;
     grid-row: 1 / -1;
     align-self: center;
     color: var(--list-item-icon-color);
   }
 
-  :scope > [slot="text"] {
+  :scope [slot="text"] {
     grid-column: 2;
     grid-row: 1;
   }
 
-  :scope > [slot="description"] {
+  :scope [slot="description"] {
     grid-column: 2;
     grid-row: 2;
     color: var(--list-item-desc-color);
@@ -146,11 +154,33 @@
     line-height: 1.3;
   }
 
+  /* When a [slot="action"] child is present, the grid becomes 3-column:
+     icon | content | action. The :has() selector promotes the template
+     only when an action exists, so 2-column layouts stay unaffected.
+     Action is right-aligned + vertically centered (spans both content rows).
+     Used by onboarding-checklist-ui item rows + any consumer that needs an
+     end-aligned action button on a list-item row.
+     NOTE: NOT using `> [slot="action"]` (direct-child) — the template
+     engine wraps conditional `${...}` renders in <span style="display:
+     contents"> housekeeping nodes, so slot="action" lands as a grandchild
+     in template-rendered hosts. display:contents makes the wrapper a
+     transparent grid pass-through at layout time, but CSS selectors still
+     see it as a node. Descendant combinator handles both shapes. */
+  :scope:has([slot="action"]) {
+    grid-template-columns: auto 1fr auto;
+  }
+  :scope [slot="action"] {
+    grid-column: 3;
+    grid-row: 1 / -1;
+    align-self: center;
+    justify-self: end;
+  }
+
   /* Custom-content escape hatch — consumer authored a [slot="content"]
      child, the auto-stamp early-returned, and the consumer owns the
      full body. Span all columns so the consumer's layout isn't boxed
      into the content column. */
-  :scope > [slot="content"] {
+  :scope [slot="content"] {
     grid-column: 1 / -1;
   }
 
@@ -167,8 +197,8 @@
     box-shadow: inset 2px 0 0 var(--a-accent-strong);
   }
 
-  :scope[data-active] > [slot="icon"],
-  :scope[data-active] > [slot="description"] {
+  :scope[data-active] [slot="icon"],
+  :scope[data-active] [slot="description"] {
     color: var(--a-accent-strong);
   }
 }

package/components/mark/mark.a2ui.json

@@ -0,0 +1,109 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Mark.json",
+  "title": "Mark",
+  "description": "Highlighted inline text — token-driven theme-aware wrapper around the\nnative `<mark>` semantic. Use for search-result match highlighting,\ndiff additions in prose, \"new since last visit\" emphasis, and any\ninline text that needs a visual rail without changing its weight.\n\nDistinct from `<text-ui strong>` (semantic emphasis via weight) and\nfrom `<tag-ui>` (block-shaped pill chrome). mark-ui keeps the inline\ntext flow intact — same line-height, same baseline — just paints a\nbackground highlight behind the matched span.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Mark"
+    },
+    "variant": {
+      "description": "Highlight color variant. Default `warning` is the conventional yellow-marker tone.",
+      "type": "string",
+      "enum": [
+        "warning",
+        "info",
+        "success",
+        "danger",
+        "muted"
+      ],
+      "default": "warning"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<mark-ui>matched</mark-ui> — same semantic role but theme-aware.",
+        "why": "Native <mark> uses UA default (yellow-on-white) that doesn't adapt to theme — invisible in dark mode + jarring in light mode.",
+        "wrong": "<mark>matched</mark>"
+      }
+    ],
+    "category": "typography",
+    "composes": [],
+    "events": {},
+    "examples": [
+      {
+        "description": "Highlight the search query within a result title.",
+        "a2ui": "[\n  { \"id\": \"row\", \"component\": \"Row\", \"children\": [\"pre\", \"mk\", \"post\"] },\n  { \"id\": \"pre\", \"component\": \"Text\", \"textContent\": \"Quarterly \" },\n  { \"id\": \"mk\",  \"component\": \"Mark\", \"textContent\": \"revenue\" },\n  { \"id\": \"post\", \"component\": \"Text\", \"textContent\": \" report — Q4 2025\" }\n]\n",
+        "name": "search-match"
+      }
+    ],
+    "keywords": [
+      "mark",
+      "highlight",
+      "search-match",
+      "emphasis"
+    ],
+    "name": "UIMark",
+    "related": [
+      "text",
+      "tag"
+    ],
+    "slots": {
+      "default": {
+        "description": "The text content to highlight (plain text or inline elements)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default — highlighted background painted behind the slotted text.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "highlight": [
+        "mark",
+        "emphasis"
+      ],
+      "search-match": [
+        "mark",
+        "highlight"
+      ]
+    },
+    "tag": "mark-ui",
+    "tokens": {
+      "--mark-bg": {
+        "description": "Background color of the highlight.",
+        "default": "var(--a-warning-muted)"
+      },
+      "--mark-fg": {
+        "description": "Foreground (text) color inside the highlight.",
+        "default": "var(--a-warning-text)"
+      },
+      "--mark-px": {
+        "description": "Horizontal padding around the highlighted text.",
+        "default": "var(--a-space-0-5)"
+      },
+      "--mark-radius": {
+        "description": "Border radius of the highlight box.",
+        "default": "var(--a-radius-xs)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/mark/mark.class.js

@@ -0,0 +1,22 @@
+/**
+ * `<mark-ui>` — token-driven inline text highlight (search-match,
+ * "new since", diff prose). Theme-aware wrapper around the native
+ * `<mark>` semantic role. Pure CSS atom — no template, no JS behavior.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIMark extends UIElement {
+  static properties = {
+    variant: { type: String, default: 'warning', reflect: true }, // warning | info | success | danger | muted
+  };
+
+  static template = () => null;
+
+  connected() {
+    super.connected();
+    // Inherit the <mark> role for screen readers — "highlighted" / "marked"
+    // is the conventional AT announcement for search matches.
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'mark');
+  }
+}

package/components/mark/mark.css

@@ -0,0 +1,39 @@
+@scope (mark-ui) {
+  :where(:scope) {
+    --mark-bg-default:     var(--a-warning-muted);
+    --mark-fg-default:     var(--a-warning-text);
+    --mark-px-default:     var(--a-space-0-5);
+    --mark-radius-default: var(--a-radius-xs);
+  }
+
+  :scope {
+    /* Inline so it sits in normal text flow without breaking baselines.
+       Padding-inline only — vertical padding would push line-height. */
+    display: inline;
+    box-sizing: border-box;
+    padding-inline: var(--mark-px, var(--mark-px-default));
+    background: var(--mark-bg, var(--mark-bg-default));
+    color: var(--mark-fg, var(--mark-fg-default));
+    border-radius: var(--mark-radius, var(--mark-radius-default));
+    /* Preserve text decoration from ancestors (e.g. link underlines) */
+    text-decoration: inherit;
+  }
+
+  /* Variants — same role × state pair as alert-ui / tag-ui */
+  :scope[variant="info"] {
+    --mark-bg-default: var(--a-info-muted);
+    --mark-fg-default: var(--a-info-text);
+  }
+  :scope[variant="success"] {
+    --mark-bg-default: var(--a-success-muted);
+    --mark-fg-default: var(--a-success-text);
+  }
+  :scope[variant="danger"] {
+    --mark-bg-default: var(--a-danger-muted);
+    --mark-fg-default: var(--a-danger-text);
+  }
+  :scope[variant="muted"] {
+    --mark-bg-default: var(--a-bg-muted);
+    --mark-fg-default: var(--a-fg);
+  }
+}

package/components/mark/mark.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `<mark-ui>` — Highlighted inline text — token-driven theme-aware wrapper around the
+native `<mark>` semantic. Use for search-result match highlighting,
+diff additions in prose, "new since last visit" emphasis, and any
+inline text that needs a visual rail without changing its weight.
+
+Distinct from `<text-ui strong>` (semantic emphasis via weight) and
+from `<tag-ui>` (block-shaped pill chrome). mark-ui keeps the inline
+text flow intact — same line-height, same baseline — just paints a
+background highlight behind the matched span.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/mark
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIMark extends UIElement {
+  /** Highlight color variant. Default `warning` is the conventional yellow-marker tone. */
+  variant: 'warning' | 'info' | 'success' | 'danger' | 'muted';
+}

package/components/mark/mark.js

@@ -0,0 +1,12 @@
+/**
+ * `<mark-ui>` — auto-registers the tag on import.
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIMark } from './mark.class.js';
+
+defineIfFree('mark-ui', UIMark);
+
+export { UIMark };

package/components/mark/mark.yaml

@@ -0,0 +1,87 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIMark
+tag: mark-ui
+status: stable
+component: Mark
+category: typography
+version: 1
+description: |
+  Highlighted inline text — token-driven theme-aware wrapper around the
+  native `<mark>` semantic. Use for search-result match highlighting,
+  diff additions in prose, "new since last visit" emphasis, and any
+  inline text that needs a visual rail without changing its weight.
+
+  Distinct from `<text-ui strong>` (semantic emphasis via weight) and
+  from `<tag-ui>` (block-shaped pill chrome). mark-ui keeps the inline
+  text flow intact — same line-height, same baseline — just paints a
+  background highlight behind the matched span.
+props:
+  variant:
+    description: Highlight color variant. Default `warning` is the conventional yellow-marker tone.
+    type: string
+    default: warning
+    enum:
+      - warning
+      - info
+      - success
+      - danger
+      - muted
+    reflect: true
+events: {}
+slots:
+  default:
+    description: The text content to highlight (plain text or inline elements).
+states:
+  - name: idle
+    description: Default — highlighted background painted behind the slotted text.
+traits: []
+tokens:
+  --mark-bg:
+    description: Background color of the highlight.
+    default: var(--a-warning-muted)
+  --mark-fg:
+    description: Foreground (text) color inside the highlight.
+    default: var(--a-warning-text)
+  --mark-px:
+    description: Horizontal padding around the highlighted text.
+    default: var(--a-space-0-5)
+  --mark-radius:
+    description: Border radius of the highlight box.
+    default: var(--a-radius-xs)
+a2ui:
+  rules:
+    - rule: 'Use mark-ui for search-result match highlighting — wrap the matched substring in <mark-ui> within the surrounding text. Inline; preserves text flow.'
+      reason: 'Search-result highlight pattern.'
+    - rule: 'variant=warning (default) is the conventional yellow-marker tone; info for brand-color highlights; success for "new since" / "added" emphasis; danger for "removed" / "deleted-line" in diff prose.'
+      reason: 'Semantic variant vocabulary.'
+    - rule: 'Distinct from <text-ui strong> (weight emphasis), <tag-ui> (block pill), <code-ui> (monospace). mark-ui is specifically the "visual rail behind matched text" use case.'
+      reason: 'Sibling-component boundary.'
+anti_patterns:
+  - wrong: '<mark>matched</mark>'
+    why: 'Native <mark> uses UA default (yellow-on-white) that doesn''t adapt to theme — invisible in dark mode + jarring in light mode.'
+    fix: '<mark-ui>matched</mark-ui> — same semantic role but theme-aware.'
+examples:
+  - name: search-match
+    description: Highlight the search query within a result title.
+    a2ui: |
+      [
+        { "id": "row", "component": "Row", "children": ["pre", "mk", "post"] },
+        { "id": "pre", "component": "Text", "textContent": "Quarterly " },
+        { "id": "mk",  "component": "Mark", "textContent": "revenue" },
+        { "id": "post", "component": "Text", "textContent": " report — Q4 2025" }
+      ]
+keywords:
+  - mark
+  - highlight
+  - search-match
+  - emphasis
+synonyms:
+  highlight:
+    - mark
+    - emphasis
+  search-match:
+    - mark
+    - highlight
+related:
+  - text
+  - tag

package/components/modal/modal.a2ui.json

@@ -76,6 +76,15 @@
     "slots": {
       "default": {
         "description": "Content placed inside the modal surface. Accepts any elements (card-ui, command-ui, custom markup)."
+      },
+      "body": {
+        "description": "Main body region for prose, forms, or arbitrary content. Sits between header and footer; scrolls when content overflows."
+      },
+      "footer": {
+        "description": "Optional footer region rendered below the body, typically for action buttons. Author-fills with Confirm / Cancel buttons or similar trailing affordances."
+      },
+      "header": {
+        "description": "Optional header region rendered above the body. Author-fillable with title + supporting markup. CSS positions it at the top of the modal surface with consistent padding + the dismiss-close affordance."
       }
     },
     "states": [

package/components/modal/modal.yaml

@@ -45,6 +45,20 @@ events:
 slots:
   default:
     description: Content placed inside the modal surface. Accepts any elements (card-ui, command-ui, custom markup).
+  header:
+    description: >-
+      Optional header region rendered above the body. Author-fillable with
+      title + supporting markup. CSS positions it at the top of the modal
+      surface with consistent padding + the dismiss-close affordance.
+  body:
+    description: >-
+      Main body region for prose, forms, or arbitrary content. Sits between
+      header and footer; scrolls when content overflows.
+  footer:
+    description: >-
+      Optional footer region rendered below the body, typically for action
+      buttons. Author-fills with Confirm / Cancel buttons or similar trailing
+      affordances.
 states:
 - name: idle
   description: Default, ready for interaction.

package/components/nav-group/nav-group.a2ui.json

@@ -98,6 +98,9 @@
       },
       "header": {
         "description": "Optional custom header. Auto-generated when missing."
+      },
+      "icon": {
+        "description": "Override the leading [icon] glyph in the auto-generated header with a custom slotted element. Mutually exclusive with the [icon] attribute."
       }
     },
     "states": [

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/nav-group/nav-group.yaml

@@ -63,6 +63,11 @@ slots:
     description: "Children — typically <nav-item-ui> rows."
   header:
     description: "Optional custom header. Auto-generated when missing."
+  icon:
+    description: >-
+      Override the leading [icon] glyph in the auto-generated header
+      with a custom slotted element. Mutually exclusive with the [icon]
+      attribute.
 
 states:
   - name: closed

package/components/nav-item/nav-item.a2ui.json

@@ -105,6 +105,9 @@
     "slots": {
       "default": {
         "description": "Optional override of the default icon + text + badge stamping."
+      },
+      "icon": {
+        "description": "Override the leading [icon] glyph with a custom slotted element (custom icon-ui, image, avatar). Mutually exclusive with the [icon] attribute — slot child wins."
       }
     },
     "states": [

package/components/nav-item/nav-item.yaml

@@ -68,6 +68,11 @@ events:
 slots:
   default:
     description: "Optional override of the default icon + text + badge stamping."
+  icon:
+    description: >-
+      Override the leading [icon] glyph with a custom slotted element
+      (custom icon-ui, image, avatar). Mutually exclusive with the
+      [icon] attribute — slot child wins.
 
 states:
   - name: idle

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
+  }
+}