@pithyjs/pidl-catalog 0.1.0-beta.3 → 0.1.0-beta.7

package/dist/specs/atoms/actions/button.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "actions",
+    "icon": "cursor-click",
     "bidi": true,
     "description": "Accessible, reactive button with variants, color schemes, loading state, and anchor mode. Keyboard and ARIA correct by default. Uses aria-disabled to keep button focusable for assistive tech.",
     "props": [
@@ -214,12 +215,12 @@
             "Primary solid button for main CTA: <Button color=\"'primary'\">Save</Button>",
             "Danger outline for destructive actions: <Button variant=\"'outline'\" color=\"'danger'\">Delete</Button>",
             "Ghost button in card footer: <Button variant=\"'ghost'\" size=\"'sm'\">Learn More</Button>",
-            "Full-width submit: <Button type=\"'submit'\" fullWidth>Sign Up</Button>",
+            "Full-width submit: <Button type=\"'submit'\" fullWidth=\"true\">Sign Up</Button>",
             "Loading state: <Button loading=\"isSaving\">Saving...</Button>",
             "Pill shape for tags/filters: <Button shape=\"'xl'\" variant=\"'outline'\">All</Button>",
-            "Square chrome button: <Button color=\"'neutral'\" variant=\"'ghost'\" shape=\"'none'\">⌘K</Button>",
-            "Toggle button: <Button variant=\"'ghost'\" :aria-pressed=\"isOn\" @click=\"toggle()\">Bold</Button>",
-            "Disclosure trigger: <Button :aria-expanded=\"isOpen\" @click=\"toggle()\">Filters</Button>"
+            "Square chrome button: <Button color=\"'secondary'\" variant=\"'ghost'\" shape=\"'none'\">⌘K</Button>",
+            "Toggle button: <Button variant=\"'ghost'\" [aria-pressed]=\"isOn() ? 'true' : 'false'\" @click=\"toggle()\">Bold</Button>",
+            "Disclosure trigger: <Button [aria-expanded]=\"isOpen() ? 'true' : 'false'\" @click=\"toggle()\">Filters</Button>"
         ]
     },
     "examples": [
@@ -268,17 +269,17 @@
         {
             "id": "pill-shape",
             "title": "Pill-shaped filter button",
-            "pithy": "<Button shape=\"'xl'\" variant=\"'outline'\" color=\"'neutral'\">All</Button>",
+            "pithy": "<Button shape=\"'xl'\" variant=\"'outline'\" color=\"'secondary'\">All</Button>",
             "assertions": [
                 "data-shape='xl'",
                 "border-radius resolves from --radius-xl",
-                "data-color='neutral'"
+                "data-color='secondary'"
             ]
         },
         {
             "id": "toggle-pressed",
             "title": "Toggle button with aria-pressed",
-            "pithy": "<Button variant=\"'ghost'\" :aria-pressed=\"isBold\" @click=\"toggle()\">B</Button>",
+            "pithy": "<Button variant=\"'ghost'\" [aria-pressed]=\"isBold() ? 'true' : 'false'\" @click=\"toggle()\">B</Button>",
             "assertions": [
                 "aria-pressed reflects state",
                 "persistent on-state styling distinct from :active",

package/dist/specs/atoms/actions/icon-group.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "actions",
+    "icon": "shapes",
     "bidi": true,
     "description": "Single-select icon-only segmented pill. Renders role='radiogroup' with one role='radio' button per item; the active option gets a circular indicator behind its icon.",
     "props": [

package/dist/specs/atoms/actions/segmented-control.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "actions",
+    "icon": "toggle-left",
     "bidi": true,
     "description": "Single-select segmented filter. Renders a role='radiogroup' container with one role='radio' button per item. Supports arrow-key navigation, Home/End jump, and roving tabindex.",
     "props": [

package/dist/specs/atoms/content/action-tile.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "card",
     "bidi": true,
     "description": "Full-width actionable row with a leading icon/glyph slot beside a bold title and a muted description. Renders a <button>. Used for choice lists — publish tiers, export options, setup steps.",
     "props": [
@@ -128,7 +129,7 @@
         {
             "id": "disabled",
             "title": "Disabled action tile",
-            "pithy": "<ActionTile title=\"'Go Live'\" description=\"'Coming soon'\" disabled=\"true\"><Icon name=\"'send'\" /></ActionTile>",
+            "pithy": "<ActionTile title=\"'Go Live'\" description=\"'Coming soon'\" disabled=\"true\"><Icon name=\"'send'\" decorative=\"true\" /></ActionTile>",
             "assertions": ["aria-disabled='true'", "data-disabled='true'"]
         }
     ]

package/dist/specs/atoms/content/badge.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "tag",
     "bidi": true,
     "description": "Inline status badge for counts, labels, and dot indicators. Renders a <span> with semantic color, size, and variant styling. In dot mode renders a compact colored circle with role='status'.",
     "props": [
@@ -22,6 +23,7 @@
             "reactive": true,
             "label": "Leading icon",
             "type": "icon",
+            "editor": { "visibleWhen": { "prop": "dot", "equals": false } },
             "description": "Icon shown before the badge text. Ignored in dot mode."
         },
         {

package/dist/specs/atoms/content/callout.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "info",
     "bidi": true,
     "description": "Static, tone-driven admonition/callout container for docs pages. Renders a role=note region with a decorative leading tone icon, a visually-hidden tone label (so tone is never conveyed by color alone), an optional bold title, and the body content. Tone (info | tip | warning | danger) drives the accent bar, tinted surface, and default icon.",
     "props": [

package/dist/specs/atoms/content/code-block.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "code",
     "bidi": false,
     "description": "Syntax-highlighted code display for documentation pages. Renders a plaintext <pre><code> immediately (no layout shift), then lazy-loads Shiki and swaps in dual-theme highlighted markup. Supports 'Copy' and 'Copy as AI prompt' actions via ui-kit Button components.",
     "props": [

package/dist/specs/atoms/content/heading.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "heading",
     "bidi": true,
     "description": "Semantic heading component for page titles and section headers. Renders the correct <h1>-<h6> tag based on level prop. Size and weight can be overridden independently of heading level.",
     "props": [
@@ -134,7 +135,7 @@
             "Section heading: <Heading level=\"2\" color=\"'primary'\">Features</Heading>",
             "Visually large h3: <Heading level=\"3\" size=\"'2xl'\">Big Section</Heading>",
             "Centered subtitle: <Heading level=\"2\" size=\"'lg'\" align=\"'center'\" color=\"'text-muted'\">Our Mission</Heading>",
-            "Card title: <Heading level=\"3\" size=\"'md'\" weight=\"'bold'\">Card Title</Heading>"
+            "Card title: <Heading level=\"3\" size=\"'lg'\" weight=\"'bold'\">Card Title</Heading>"
         ]
     },
     "examples": [
@@ -168,7 +169,7 @@
         {
             "id": "truncated-heading",
             "title": "Truncated heading",
-            "pithy": "<Heading level=\"3\" truncate>Very Long Heading That Truncates</Heading>",
+            "pithy": "<Heading level=\"3\" truncate=\"true\">Very Long Heading That Truncates</Heading>",
             "assertions": ["has u-truncate class"]
         }
     ]

package/dist/specs/atoms/content/icon.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "shapes",
     "bidi": true,
     "description": "Inline icon wrapper with accessible sizing and labelling. Renders children (inline SVG or icon markup) inside a <span> with design-system icon size tokens and proper ARIA attributes. Discriminated union enforces label when not decorative.",
     "props": [
@@ -94,9 +95,9 @@
         "patterns": [
             "Semantic icon (inline SVG): <Icon label=\"'Search'\" size=\"'lg'\"><svg>...</svg></Icon>",
             "Semantic icon (sprite): <Icon label=\"'Search'\" name=\"'search'\" size=\"'lg'\" />",
-            "Decorative icon: <Icon decorative size=\"'sm'\" name=\"'star'\" />",
-            "Colored icon: <Icon label=\"'Warning'\" color=\"'warning'\" name=\"'warning'\" />",
-            "Reactive icon (theme toggle): <Icon decorative name=\"() => isDark() ? 'sun' : 'moon'\" />"
+            "Decorative icon: <Icon decorative=\"true\" size=\"'sm'\" name=\"'sparkle'\" />",
+            "Colored icon: <Icon label=\"'Warning'\" color=\"'warning'\" name=\"'alert'\" />",
+            "Reactive icon: <Icon decorative=\"true\" name=\"() => revealed() ? 'eye-off' : 'eye'\" />"
         ]
     },
     "examples": [
@@ -109,16 +110,16 @@
         {
             "id": "decorative",
             "title": "Decorative icon",
-            "pithy": "<Icon decorative size=\"'sm'\"><svg viewBox=\"0 0 24 24\"><path d=\"M...\"/></svg></Icon>",
+            "pithy": "<Icon decorative=\"true\" size=\"'sm'\"><svg viewBox=\"0 0 24 24\"><path d=\"M...\"/></svg></Icon>",
             "assertions": ["aria-hidden='true'", "role='none'", "has u-icon-sm class"]
         },
         {
             "id": "reactive-name",
             "title": "Reactive icon driven by a signal",
-            "pithy": "<Icon decorative name=\"() => mode() === 'dark' ? 'sun' : 'moon'\" />",
+            "pithy": "<Icon decorative=\"true\" name=\"() => revealed() ? 'eye-off' : 'eye'\" />",
             "assertions": [
                 "data-icon swaps when signal changes",
-                "<use href> updates to '#sun' or '#moon'",
+                "the inline <svg> is replaced \u2014 a sprite <use href> only when a sprite registers both names",
                 "no SVG rebuild when signal fires with same value",
                 "effect disposed on destroy()"
             ]

package/dist/specs/atoms/content/image.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "image",
     "bidi": true,
     "description": "Accessible, optimized image component. Mobile-first with lazy loading and async decoding by default. Enforces alt text for accessibility. Supports <picture> with multiple <source> elements for format negotiation (AVIF, WebP, fallback). Use width/height to prevent layout shift (CLS = 0).",
     "props": [
@@ -123,7 +124,7 @@
             "editor": { "tab": "effects" },
             "type": "boolean | RadiusLevel",
             "default": "none",
-            "description": "Border radius — true for 'md', or explicit level: 'xs', 'sm', 'md', 'lg', 'xl', 'full'"
+            "description": "Border radius — true for 'md', or explicit level: 'xs', 'sm', 'md', 'lg', 'xl'"
         }
     ],
     "events": [],
@@ -173,9 +174,9 @@
         "patterns": [
             "Hero image (LCP): <Image src=\"'/hero.jpg'\" alt=\"'Hero banner'\" width=\"1200\" height=\"600\" loading=\"'eager'\" fetchPriority=\"'high'\" aspectRatio=\"'16/9'\" />",
             "Card thumbnail: <Image src=\"'/thumb.jpg'\" alt=\"'Product'\" width=\"400\" height=\"300\" rounded=\"'md'\" />",
-            "Avatar: <Image src=\"'/avatar.jpg'\" alt=\"'User photo'\" width=\"64\" height=\"64\" rounded=\"'full'\" />",
-            "Multi-format (AVIF/WebP): <Image src=\"'/photo.jpg'\" alt=\"'Photo'\" width=\"800\" height=\"600\" :sources=\"[{src:'/photo.avif',type:'image/avif'},{src:'/photo.webp',type:'image/webp'}]\" />",
-            "Decorative: <Image src=\"'/pattern.svg'\" alt=\"''\" />"
+            "Avatar: <Image src=\"'/avatar.jpg'\" alt=\"'User photo'\" width=\"64\" height=\"64\" rounded=\"'xl'\" />",
+            "Multi-format (AVIF/WebP): <Image src=\"'/photo.jpg'\" alt=\"'Photo'\" width=\"800\" height=\"600\" sources=\"[{src:'/photo.avif',type:'image/avif'},{src:'/photo.webp',type:'image/webp'}]\" />",
+            "Decorative: <Image src=\"'/pattern.svg'\" alt=\"''\" width=\"48\" height=\"48\" />"
         ]
     },
     "examples": [
@@ -203,13 +204,13 @@
         {
             "id": "rounded-avatar",
             "title": "Rounded avatar image",
-            "pithy": "<Image src=\"'/avatar.jpg'\" alt=\"'Jane Doe'\" width=\"100\" height=\"100\" rounded=\"'full'\" />",
-            "assertions": ["has u-radius-full class", "width=100", "height=100"]
+            "pithy": "<Image src=\"'/avatar.jpg'\" alt=\"'Jane Doe'\" width=\"100\" height=\"100\" rounded=\"'xl'\" />",
+            "assertions": ["has u-radius-xl class", "width=100", "height=100"]
         },
         {
             "id": "picture-sources",
             "title": "Multi-format with AVIF/WebP fallback",
-            "pithy": "<Image src=\"'/photo.jpg'\" alt=\"'Nature scene'\" width=\"800\" height=\"600\" :sources=\"[{src:'/photo.avif',type:'image/avif'},{src:'/photo.webp',type:'image/webp'}]\" />",
+            "pithy": "<Image src=\"'/photo.jpg'\" alt=\"'Nature scene'\" width=\"800\" height=\"600\" sources=\"[{src:'/photo.avif',type:'image/avif'},{src:'/photo.webp',type:'image/webp'}]\" />",
             "assertions": [
                 "renders <picture> element",
                 "has <source> for AVIF",
@@ -220,7 +221,7 @@
         {
             "id": "decorative",
             "title": "Decorative image (hidden from AT)",
-            "pithy": "<Image src=\"'/pattern.svg'\" alt=\"''\" />",
+            "pithy": "<Image src=\"'/pattern.svg'\" alt=\"''\" width=\"48\" height=\"48\" />",
             "assertions": ["alt=''", "role='presentation'"]
         }
     ]

package/dist/specs/atoms/content/prose.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "text",
     "studioReady": false,
     "bidi": true,
     "description": "Long-form content wrapper for docs and articles. A thin semantic container that applies the design-system .u-prose utility (plus the .u-prose-{size} measure variant) and projects its children. All element-level typographic treatment — vertical rhythm, links, inline code, blockquote, tables, figures, description lists — lives in .u-prose in @pithyjs/design-system, not in the component, so the same treatment is available to consumers who use the utility class without the component.",

package/dist/specs/atoms/content/stat.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "molecule",
     "domain": "content",
+    "icon": "trending-up",
     "bidi": true,
     "description": "Display statistic — a large value over a caption/label, with optional smaller supporting description. Non-interactive display primitive reusable across landing pages, dashboards, and marketing sections.",
     "props": [

package/dist/specs/atoms/content/tabs.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "panel-top",
     "bidi": false,
     "description": "Accessible tabbed interface implementing the WAI-ARIA tablist pattern. Renders a role=tablist of role=tab buttons over eagerly-mounted role=tabpanel panels toggled via [hidden]. Roving tabindex with arrow-key navigation (Home/End, wrap), horizontal or vertical orientation, and automatic or manual activation.",
     "props": [

package/dist/specs/atoms/content/text.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "text",
     "bidi": true,
     "description": "Typography wrapper for body text content. Maps props to design-system typography tokens and utility classes. Uses logical properties for RTL/LTR support. Supports 18 semantic HTML tags.",
     "props": [

package/dist/specs/atoms/content/tile.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "content",
+    "icon": "card",
     "bidi": true,
     "description": "Compact clickable tile with an icon/glyph slot above a visible label. Renders a <button> with optional selected state. Used for launchers, recents rails, and template pickers.",
     "props": [
@@ -55,6 +56,12 @@
             "required": false,
             "description": "Map of data-* attrs. CamelCase keys emit kebab-case attrs ({ componentId: 'card' } → data-component-id='card')."
         },
+        {
+            "name": "mediaRef",
+            "type": "function",
+            "required": false,
+            "description": "Callback invoked with the rendered media span. Lets consumers mount a component into the media slot, which a projected component tag cannot do. Supplying it also creates the span when the tile has no children."
+        },
         {
             "name": "labelRef",
             "type": "function",
@@ -114,7 +121,7 @@
         ],
         "patterns": [
             "Recent picker: <Tile label=\"'Card'\" @click=\"insert\"> <Icon name=\"'card'\" decorative=\"true\" size=\"'sm'\" /> </Tile>",
-            "Selected tile: <Tile label=\"'Hero'\" selected=\"isHero\" @click=\"choose\"> <Icon name=\"'hero'\" /> </Tile>",
+            "Selected tile: <Tile label=\"'Hero'\" selected=\"isHero\" @click=\"choose\"> <Icon name=\"'shapes'\" /> </Tile>",
             "Disabled tile: <Tile label=\"'Coming soon'\" disabled=\"true\"> <Icon name=\"'lock'\" /> </Tile>"
         ]
     },
@@ -139,13 +146,13 @@
         {
             "id": "selected",
             "title": "Selected tile",
-            "pithy": "<Tile label=\"'Hero'\" selected=\"true\"><Icon name=\"'hero'\" decorative=\"true\" size=\"'sm'\" /></Tile>",
+            "pithy": "<Tile label=\"'Hero'\" selected=\"true\"><Icon name=\"'sparkle'\" decorative=\"true\" size=\"'sm'\" /></Tile>",
             "assertions": ["data-selected='true'", "aria-pressed='true'"]
         },
         {
             "id": "disabled",
             "title": "Disabled launcher tile",
-            "pithy": "<Tile label=\"'Locked'\" disabled=\"true\"><Icon name=\"'lock'\" /></Tile>",
+            "pithy": "<Tile label=\"'Locked'\" disabled=\"true\"><Icon name=\"'lock'\" decorative=\"true\" /></Tile>",
             "assertions": [
                 "disabled attribute present",
                 "data-disabled='true'",

package/dist/specs/atoms/data/bars.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "data",
+    "icon": "bar-chart",
     "bidi": true,
     "description": "Horizontal bar chart for comparing categories against one shared scale. Each row is a category name, a track with a proportional fill, and the value — rows are independent, so no bar is affected by its neighbours. Rendered in DOM rather than SVG so names can ellipsis, numbers can be tabular, and text rescales with the reader's own font size. The drawing is aria-hidden; a visually-hidden data table carries every exact value and is the chart's accessible representation. There is no colour key: every row already carries its own name and number. Loading, empty (no rows at all — an all-zero chart stays ready, because its rows still name themselves), and error states are first-class.",
     "props": [

package/dist/specs/atoms/data/donut.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "data",
+    "icon": "pie-chart",
     "bidi": true,
     "description": "Parts-of-a-whole chart drawn as arcs on one stroked ring. Each segment is a full <circle> showing a single dash of its own share, positioned by stroke-dasharray/stroke-dashoffset, with the ring rotated -90° so segment one starts at twelve o'clock. The SVG is aria-hidden; a visually-hidden data table carries every value and share and is the chart's accessible representation. A colour key is built in and on by default — a segment is identified by its colour and by nothing else, and nobody can name a colour. Loading, empty (including an all-zero total), and error states are first-class.",
     "props": [

package/dist/specs/atoms/data/gauge.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "data",
+    "icon": "pie-chart",
     "bidi": true,
     "description": "One value's position within a range, drawn on a half circle. A full-length track path sits under a value path revealed by stroke-dasharray, so a short arc reads as 'short out of this much' rather than just 'short'. The arc is πr — half a circle, not a full one. The SVG is aria-hidden; a visually-hidden table carries the reading, the domain and the share of it. Colour is a prop: threshold-to-colour is application policy, not component behaviour.",
     "props": [

package/dist/specs/atoms/data/line-area.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "data",
+    "icon": "line-chart",
     "bidi": true,
     "description": "One series over an ordered category axis, drawn as a line with the area beneath it filled. The chart for a single trend — how one quantity moved across a sequence a reader already understands as ordered: weeks, releases, cohorts. The plot is SVG because a polyline is a path; the axis labels beneath it are DOM, so a long category name can ellipsis, a numeric axis can use tabular figures, and the type rescales with the reader's own font setting. The drawing and the axis are both aria-hidden; a visually-hidden data table carries every exact reading and is the chart's accessible representation. Readings may be negative. A non-finite reading is a hole the line breaks across rather than drawing through. Loading, empty (no reading anywhere — an all-zero series stays ready, because a flat line is a real answer) and error states are first-class.",
     "props": [

package/dist/specs/atoms/data/line.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "data",
+    "icon": "line-chart",
     "bidi": true,
     "description": "Up to six named series over one shared category axis, drawn as stroked lines with a marker on every reading. The chart for COMPARING trends: several quantities measured at the same points, on one domain, so their shapes can be read against each other. The plot is SVG because a polyline is a path; the axis labels beneath it are DOM, so a long category name can ellipsis, a numeric axis can use tabular figures, and the type rescales with the reader's own font setting. A colour key is on by default whenever there is more than one series, because a line is named by its colour and by nothing else on screen. The drawing, the axis and the key are all aria-hidden; a visually-hidden data table with one column per series carries every exact reading. Readings may be negative. A non-finite reading is a hole the line breaks across. Loading, empty and error states are first-class.",
     "props": [
@@ -258,7 +259,7 @@
             "Basic: <Line label=\"'Latency by region'\" series=\"regions\" labels=\"days\" />",
             "Key under the plot: <Line label=\"'Latency'\" series=\"regions\" labels=\"days\" legend=\"'bottom'\" />",
             "Stable scale: <Line label=\"'Latency'\" series=\"regions\" labels=\"days\" min=\"0\" max=\"200\" />",
-            "Semantic colours: series=[{name:'Failed',values:[…],color:'danger'},{name:'Passed',values:[…],color:'success'}]",
+            "Semantic colours: series=[{name:'Failed',values:[4,2,6],color:'danger'},{name:'Passed',values:[96,98,94],color:'success'}]",
             "Live: <Line label=\"'Latency'\" series=\"() => regions()\" labels=\"days\" loading=\"isFetching\" />"
         ]
     },
@@ -278,7 +279,7 @@
         {
             "id": "single-series",
             "title": "One line needs no key",
-            "pithy": "<Line label=\"'Latency'\" series=\"[{name:'eu-west',values:[…]}]\" labels=\"days\" />",
+            "pithy": "<Line label=\"'Latency'\" series=\"[{name:'eu-west',values:[128,142,119,156,134]}]\" labels=\"['Mon','Tue','Wed','Thu','Fri']\" />",
             "assertions": [
                 "no data-legend attribute and no .ui-chart-legend element",
                 "the chart's own label names the line"

package/dist/specs/atoms/data/stacked-bar.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "data",
+    "icon": "bar-chart",
     "bidi": true,
     "description": "A single horizontal bar divided into proportional parts of one whole, with a colour key beneath. The same statement a Donut makes, drawn straight — better wherever the chart has to sit in a band rather than a square, and wherever the parts are lopsided, because a 2% slice of a ring is a wedge too narrow to see at its point while 2% of a bar is a stripe of constant height. Rendered in DOM as a flex row of segments, not SVG. The drawing and the key are aria-hidden; a visually-hidden data table carries every exact value and share and is the chart's accessible representation. Loading, empty (including an all-zero stack), and error states are first-class.",
     "props": [

package/dist/specs/atoms/forms/checkbox-group.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "forms",
+    "icon": "check",
     "bidi": true,
     "description": "Accessible group wrapper for related <Checkbox> controls. Renders <fieldset><legend> with optional helper/error text and aria-describedby wiring. Native fieldset[disabled] cascades to all child checkboxes. Children are projected through the full PithyJS pipeline.",
     "props": [

package/dist/specs/atoms/forms/checkbox.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "forms",
+    "icon": "check",
     "bidi": true,
     "description": "Accessible checkbox atom with a custom-rendered box and inline SVG mark (animated checkmark + indeterminate dash via stroke-dashoffset), error/success states with shake animation, helper/error text, loading spinner, and full a11y wiring. No validation logic — states driven externally.",
     "props": [

package/dist/specs/atoms/forms/file-picker.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "forms",
+    "icon": "upload",
     "bidi": true,
     "description": "Accessible file upload control with a click/drag-and-drop zone. Built on a semantic <label> wrapping a real focusable native <input type='file'> (no role='button'), validates type against `accept` and size against `maxSizeBytes`, shows an optional image preview, and surfaces inline errors via aria-live. No upload logic — the consumer wires `onSelect`.",
     "props": [

package/dist/specs/atoms/forms/form-field.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "molecule",
     "domain": "forms",
+    "icon": "form-input",
     "bidi": true,
     "description": "Form field molecule — wraps a form atom (Input, Select, Textarea) with a visible label and optional required asterisk indicator. Provides label-to-input association via <label for>.",
     "props": [

package/dist/specs/atoms/forms/input.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.3.0",
     "level": "atom",
     "domain": "forms",
+    "icon": "form-input",
     "bidi": true,
     "description": "Text input atom with floating label, success/error states with shake animation and state icons, helper text, error message with aria-describedby, character counter, clear button, password visibility toggle, loading spinner, and polished prefix/suffix grouping. No validation logic — states driven externally.",
     "props": [

package/dist/specs/atoms/forms/radio-group.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "forms",
+    "icon": "radio",
     "bidi": true,
     "description": "Accessible group wrapper for related <Radio> controls. Renders <fieldset><legend> with optional helper/error text and aria-describedby wiring. Native fieldset[disabled] cascades to all child radios. Children are projected through the full PithyJS pipeline. Does NOT auto-inject `name` onto children — each <Radio> must declare its own.",
     "props": [

package/dist/specs/atoms/forms/radio.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "forms",
+    "icon": "radio",
     "bidi": true,
     "description": "Accessible radio button atom with a custom-rendered circle and inline SVG inner dot (animated via transform/opacity), error/success states with shake animation, helper/error text, loading spinner, arrow-key navigation across siblings sharing a `name`, and full a11y wiring. No validation logic — states driven externally.",
     "props": [

package/dist/specs/atoms/forms/search-input.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "forms",
+    "icon": "search",
     "studioReady": true,
     "bidi": true,
     "description": "Search field composed from the <Input> atom — leading magnifier, clear button, optional keyboard-shortcut chip, and a debounced query callback. Renders a <form role=\"search\"> landmark by default, which can be dropped (landmark=false) when the field lives inside a dialog such as <CommandPalette>. This is UI only: it owns no index, no fetching and no results list. Wire onSearch to whatever backend you have — the docs search engine itself lands in R3.",

package/dist/specs/atoms/forms/select.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "atom",
     "domain": "forms",
+    "icon": "chevron-down",
     "bidi": true,
     "description": "Custom select dropdown atom with searchable options, keyboard navigation, success/error states with shake animation and state icons, helper text, error message with aria-describedby, clear button, and loading spinner. No validation logic — states driven externally.",
     "props": [