@adia-ai/web-components 0.4.3 → 0.4.4

package/components/alert/alert.a2ui.json

@@ -13,21 +13,36 @@
     }
   ],
   "properties": {
+    "title": {
+      "description": "Bold headline rendered as the first line of the alert content. Pair with [description] for the canonical \"banner\" pattern (headline + body). When [title] or [description] is set, the [text] prop is ignored.",
+      "type": "string",
+      "default": ""
+    },
+    "description": {
+      "description": "Body text rendered as the second line of the alert content, below [title]. May be used alone (without [title]) for a single muted-body message.",
+      "type": "string",
+      "default": ""
+    },
     "closable": {
-      "description": "Whether a close button is displayed",
+      "description": "Whether a close button is displayed. Alias [dismissible] is also accepted (same semantics, different spelling — the corpus and many libraries use both; both map to the same state).",
       "type": "boolean",
       "default": false
     },
     "component": {
       "const": "Alert"
     },
+    "dismissible": {
+      "description": "Public alias for [closable] — same semantics. Both attributes render the close button. Use whichever spelling matches your authoring style.",
+      "type": "boolean",
+      "default": false
+    },
     "icon": {
       "description": "Icon identifier displayed before the message content",
       "type": "string",
       "default": ""
     },
     "text": {
-      "description": "Alert message text",
+      "description": "Single-line alert message. For two-line \"headline + body\" alerts, use [title] + [description] instead. For rich content (links, formatting), use the [slot=\"content\"] slot.",
       "type": "string",
       "default": ""
     },

package/components/alert/alert.js

@@ -13,12 +13,30 @@
 
 import { UIElement } from '../../core/element.js';
 
+// One-time warn cache so the same alias hit doesn't spam the console
+// across hundreds of components per render. We use warnings ONLY for
+// genuine hallucinations the LLM should learn to stop emitting:
+//   - variant="error" (canonical: "danger" — explicit in the enum)
+//   - [closeable]      (canonical: "closable" — established spelling)
+// First-class props ([title], [description], [dismissible]) do NOT warn —
+// they're public, supported, documented in alert.yaml.
+const _aliasWarned = new Set();
+function _warnOnce(key, message) {
+  if (_aliasWarned.has(key)) return;
+  _aliasWarned.add(key);
+  // eslint-disable-next-line no-console
+  console.warn(`[alert-ui] ${message}`);
+}
+
 class UIAlert extends UIElement {
   static properties = {
-    text:     { type: String,  default: '', reflect: true },
-    variant:  { type: String,  default: 'default', reflect: true },
-    closable: { type: Boolean, default: false, reflect: true },
-    icon:     { type: String,  default: '', reflect: true },
+    text:        { type: String,  default: '', reflect: true },
+    title:       { type: String,  default: '', reflect: true },
+    description: { type: String,  default: '', reflect: true },
+    variant:     { type: String,  default: 'default', reflect: true },
+    closable:    { type: Boolean, default: false, reflect: true },
+    dismissible: { type: Boolean, default: false, reflect: true },
+    icon:        { type: String,  default: '', reflect: true },
   };
 
   static parts = {
@@ -33,11 +51,47 @@ class UIAlert extends UIElement {
 
   static template = () => null;
 
+  /**
+   * Normalize alias attrs that the LLM / corpus occasionally emits in
+   * non-canonical forms. Runs once at connected() before render(). Two
+   * categories:
+   *
+   *   FIRST-CLASS ALIASES (public, supported, no warn):
+   *     - [dismissible] ↔ [closable]  (same semantics; either spelling
+   *       maps to the same close-button affordance)
+   *
+   *   HALLUCINATION ALIASES (warn-once, encourage canonical form):
+   *     - variant="error" → variant="danger"  (not in the canonical
+   *       enum [default, info, success, warning, danger, muted, neutral])
+   *     - [closeable] → [closable]  (alternate spelling, less standard
+   *       than dismissible/closable; warn to discourage)
+   */
+  #normalizeAliases() {
+    // variant=error → danger (hallucination; warn)
+    if (this.getAttribute('variant') === 'error') {
+      _warnOnce('variant-error', 'variant="error" is not in the canonical enum [default, info, success, warning, danger, muted, neutral]. Mapping to "danger". Fix the source (LLM prompt / corpus pattern) to emit "danger" directly.');
+      this.setAttribute('variant', 'danger');
+    }
+
+    // closeable → closable (typo-class; warn)
+    if (this.hasAttribute('closeable') && !this.hasAttribute('closable') && !this.hasAttribute('dismissible')) {
+      _warnOnce('alias-closeable', 'attribute [closeable] is a misspelled alias of canonical [closable]. Mapping. Fix the source to use [closable] or [dismissible].');
+      this.setAttribute('closable', '');
+      this.removeAttribute('closeable');
+    }
+
+    // dismissible ↔ closable (first-class alias; no warn)
+    if (this.hasAttribute('dismissible') && !this.hasAttribute('closable')) {
+      this.setAttribute('closable', '');
+    }
+  }
+
   #onPress = (e) => {
     if (e.target.closest('[slot="close"]')) this.#close();
   };
 
   connected() {
+    this.#normalizeAliases();
     this.#updateRole();
 
     // Stamp default DOM if nothing was provided
@@ -61,14 +115,51 @@ class UIAlert extends UIElement {
       this.drop('leading');
     }
 
-    // Text — only write from the `text` attribute when it's set, so
-    // consumers passing rich content via `<span slot="content">…</span>`
-    // (links, <strong>, etc.) aren't clobbered with empty textContent.
+    // Content rendering — three modes, in precedence order:
+    //   1. Author-provided <span slot="content">…</span> with content
+    //      already inside wins (rich content path)
+    //   2. [title] and/or [description] — bolded headline + body paragraph
+    //   3. [text] — single-line message
+    //
+    // Detection of "author content" is by checking whether the slot
+    // element has its `data-alert-auto` flag (set by us when we stamp
+    // content). If the flag is absent AND the element has any content,
+    // the author provided it; leave it alone.
     const content = this.ensure('content');
-    if (content && this.text) content.textContent = this.text;
+    if (content) {
+      const wasAutoStamped = content.hasAttribute('data-alert-auto');
+      const hasContent = content.childNodes.length > 0;
+      if (!wasAutoStamped && hasContent) {
+        // Author-provided rich content. Mirror title/description to
+        // aria-label if they were set, but don't touch the markup.
+        if (this.title || this.description) {
+          const aria = [this.title, this.description].filter(Boolean).join('. ');
+          this.setAttribute('aria-label', aria);
+        }
+      } else if (this.title || this.description) {
+        // Mode 2: title + description composed
+        content.setAttribute('data-alert-auto', 'title-desc');
+        content.replaceChildren();
+        if (this.title) {
+          const strong = document.createElement('strong');
+          strong.textContent = this.title;
+          content.appendChild(strong);
+          if (this.description) content.appendChild(document.createTextNode(' '));
+        }
+        if (this.description) {
+          content.appendChild(document.createTextNode(this.description));
+        }
+        const aria = [this.title, this.description].filter(Boolean).join('. ');
+        this.setAttribute('aria-label', aria);
+      } else if (this.text) {
+        // Mode 3: single-line text
+        content.setAttribute('data-alert-auto', 'text');
+        content.textContent = this.text;
+      }
+    }
 
     // Close button
-    if (this.closable) {
+    if (this.closable || this.dismissible) {
       this.ensure('close');
     } else {
       this.drop('close');

package/components/alert/alert.test.js

@@ -0,0 +1,180 @@
+/**
+ * alert-ui tests
+ *
+ * Three content modes (precedence order):
+ *   1. Author-provided <span slot="content">…</span> — wins
+ *   2. [title] + [description] — bolded headline + body paragraph
+ *   3. [text] — single-line message
+ *
+ * Two alias categories:
+ *   - First-class aliases (public, no warn): [dismissible] ↔ [closable]
+ *   - Hallucination aliases (warn-once): variant="error" → "danger";
+ *     [closeable] → [closable]
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './alert.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('alert-ui — canonical props', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders text from the canonical `text` prop', async () => {
+    const a = mount('<alert-ui text="Hello" variant="danger"></alert-ui>');
+    await tick();
+    const content = a.querySelector(':scope > [slot="content"]');
+    expect(content).not.toBeNull();
+    expect(content.textContent).toBe('Hello');
+  });
+
+  it('sets role=alert for danger variant', async () => {
+    const a = mount('<alert-ui text="Error" variant="danger"></alert-ui>');
+    await tick();
+    expect(a.getAttribute('role')).toBe('alert');
+  });
+
+  it('sets role=status for non-danger variants', async () => {
+    const a = mount('<alert-ui text="Info" variant="info"></alert-ui>');
+    await tick();
+    expect(a.getAttribute('role')).toBe('status');
+  });
+
+  it('renders [title] + [description] as bold-headline + body (first-class, no warn)', async () => {
+    const a = mount('<alert-ui title="Heads up" description="A warning was raised." variant="warning"></alert-ui>');
+    await tick();
+    const content = a.querySelector(':scope > [slot="content"]');
+    expect(content).not.toBeNull();
+    expect(content.textContent).toContain('Heads up');
+    expect(content.textContent).toContain('A warning was raised.');
+    const strong = content.querySelector('strong');
+    expect(strong).not.toBeNull();
+    expect(strong.textContent).toBe('Heads up');
+    // No warn for canonical title/description (they're first-class)
+    expect(a.getAttribute('role')).toBe('alert'); // warning → alert role
+  });
+
+  it('renders [title] alone (description omitted)', async () => {
+    const a = mount('<alert-ui title="Heads up" variant="warning"></alert-ui>');
+    await tick();
+    const content = a.querySelector(':scope > [slot="content"]');
+    expect(content).not.toBeNull();
+    expect(content.textContent.trim()).toBe('Heads up');
+    expect(content.querySelector('strong').textContent).toBe('Heads up');
+  });
+
+  it('renders [description] alone (title omitted)', async () => {
+    const a = mount('<alert-ui description="A quiet notice." variant="info"></alert-ui>');
+    await tick();
+    const content = a.querySelector(':scope > [slot="content"]');
+    expect(content).not.toBeNull();
+    expect(content.textContent.trim()).toBe('A quiet notice.');
+    expect(content.querySelector('strong')).toBeNull();
+  });
+
+  it('[dismissible] is first-class — same effect as [closable], no warn', async () => {
+    const a = mount('<alert-ui text="Banner" dismissible></alert-ui>');
+    await tick();
+    expect(a.hasAttribute('closable')).toBe(true);
+    // dismissible attribute is preserved on the host for forward-compat
+    // (consumers can read either)
+    expect(a.querySelector('[slot="close"]')).not.toBeNull();
+  });
+
+  it('[closable] works canonically without [dismissible]', async () => {
+    const a = mount('<alert-ui text="Banner" closable></alert-ui>');
+    await tick();
+    expect(a.hasAttribute('closable')).toBe(true);
+    expect(a.querySelector('[slot="close"]')).not.toBeNull();
+  });
+});
+
+describe('alert-ui — hallucination aliases (warn-once)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('maps variant="error" to variant="danger" (warns)', async () => {
+    const a = mount('<alert-ui text="Oops" variant="error"></alert-ui>');
+    await tick();
+    expect(a.getAttribute('variant')).toBe('danger');
+    expect(a.getAttribute('role')).toBe('alert');
+  });
+
+  it('maps [closeable] (misspelling) to [closable] (warns)', async () => {
+    const a = mount('<alert-ui text="Banner" closeable></alert-ui>');
+    await tick();
+    expect(a.hasAttribute('closable')).toBe(true);
+    expect(a.hasAttribute('closeable')).toBe(false);
+    expect(a.querySelector('[slot="close"]')).not.toBeNull();
+  });
+});
+
+describe('alert-ui — full corpus shape (the §34 scenario)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders the exact alert-banner.json corpus pattern correctly', async () => {
+    // This is `patterns/agent/alert-banner.json` rendered through the
+    // component. All four props are now first-class / aliased; the
+    // alert renders with full visible content.
+    const a = mount(`<alert-ui
+      variant="info"
+      icon="info-circle"
+      title="System Update"
+      description="A new version is available. Please refresh to get the latest features."
+      dismissible
+    ></alert-ui>`);
+    await tick();
+    // Variant stays canonical
+    expect(a.getAttribute('variant')).toBe('info');
+    // Dismissible maps to closable
+    expect(a.hasAttribute('closable')).toBe(true);
+    // Role is status (info, not danger/warning)
+    expect(a.getAttribute('role')).toBe('status');
+    // Content composed correctly
+    const content = a.querySelector(':scope > [slot="content"]');
+    expect(content.textContent).toContain('System Update');
+    expect(content.textContent).toContain('A new version is available.');
+    expect(content.querySelector('strong').textContent).toBe('System Update');
+    // Close button present (dismissible → closable)
+    expect(a.querySelector('[slot="close"]')).not.toBeNull();
+    // ARIA composed
+    expect(a.getAttribute('aria-label')).toContain('System Update');
+    expect(a.getAttribute('aria-label')).toContain('A new version is available');
+  });
+
+  it('renders the exact destructive-confirm.json corpus pattern correctly', async () => {
+    // This is the shape used in compositions/forms/destructive-confirm.json:
+    // variant=danger + title + description (no close button)
+    const a = mount(`<alert-ui
+      variant="danger"
+      title="This action is permanent"
+      description="Deleting your account cannot be undone. All your data will be removed within 30 days."
+    ></alert-ui>`);
+    await tick();
+    expect(a.getAttribute('variant')).toBe('danger');
+    expect(a.getAttribute('role')).toBe('alert');
+    const content = a.querySelector(':scope > [slot="content"]');
+    expect(content.querySelector('strong').textContent).toBe('This action is permanent');
+    expect(content.textContent).toContain('Deleting your account cannot be undone');
+  });
+
+  it('preserves author-provided [slot="content"] when [title]+[description] are also set', async () => {
+    // Authored rich content wins; canonical props become metadata only
+    // (still mirrored to aria-label for screen reader semantics).
+    const a = mount(`<alert-ui title="hdr" description="body">
+      <span slot="content">Custom <a href="/foo">link</a></span>
+    </alert-ui>`);
+    await tick();
+    const content = a.querySelector(':scope > [slot="content"]');
+    // Should preserve the author's link
+    expect(content.querySelector('a')).not.toBeNull();
+    expect(content.querySelector('a').getAttribute('href')).toBe('/foo');
+  });
+});

package/components/alert/alert.yaml

@@ -9,7 +9,17 @@ version: 1
 description: Inline alert banner with optional icon and close button.
 props:
   closable:
-    description: Whether a close button is displayed
+    description: >-
+      Whether a close button is displayed. Alias [dismissible] is also
+      accepted (same semantics, different spelling — the corpus and
+      many libraries use both; both map to the same state).
+    type: boolean
+    default: false
+  dismissible:
+    description: >-
+      Public alias for [closable] — same semantics. Both attributes
+      render the close button. Use whichever spelling matches your
+      authoring style.
     type: boolean
     default: false
   icon:
@@ -17,7 +27,25 @@ props:
     type: string
     default: ""
   text:
-    description: Alert message text
+    description: >-
+      Single-line alert message. For two-line "headline + body" alerts,
+      use [title] + [description] instead. For rich content (links,
+      formatting), use the [slot="content"] slot.
+    type: string
+    default: ""
+  title:
+    description: >-
+      Bold headline rendered as the first line of the alert content.
+      Pair with [description] for the canonical "banner" pattern
+      (headline + body). When [title] or [description] is set, the
+      [text] prop is ignored.
+    type: string
+    default: ""
+  description:
+    description: >-
+      Body text rendered as the second line of the alert content,
+      below [title]. May be used alone (without [title]) for a single
+      muted-body message.
     type: string
     default: ""
   variant:

package/components/badge/badge.a2ui.json

@@ -50,6 +50,10 @@
       "type": "string",
       "default": ""
     },
+    "textContent": {
+      "description": "Badge display text. Renderer routes this to the `text` attribute via CSS attr(text) on ::after.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
     "variant": {
       "description": "Semantic color variant.",
       "type": "string",

package/components/badge/badge.js

@@ -27,6 +27,7 @@ const STATUS_MAP = {
 class UIBadge extends UIElement {
   static properties = {
     text:    { type: String,  default: '', reflect: true },
+    textContent: { type: String, default: '' },
     variant: { type: String,  default: 'default', reflect: true },
     size:    { type: String,  default: 'md', reflect: true },
     icon:    { type: String,  default: '',        reflect: true },

package/components/badge/badge.yaml

@@ -40,6 +40,10 @@ props:
     description: Badge text content. Falls back to existing textContent.
     type: string
     default: ""
+  textContent:
+    description: Badge display text. Renderer routes this to the `text` attribute via CSS attr(text) on ::after.
+    type: string
+    dynamic: true
   variant:
     description: Semantic color variant.
     type: string

package/components/button/button.a2ui.json

@@ -18,6 +18,11 @@
       "type": "string",
       "default": "button"
     },
+    "aria-label": {
+      "description": "Accessible label for screen readers. Auto-set from `text` when text is non-empty; meaningful override for icon-only buttons.",
+      "type": "string",
+      "default": ""
+    },
     "color": {
       "description": "Semantic intent — composes with [variant]. `<button-ui variant=\"solid\" color=\"danger\">` = filled destructive action; `<button-ui variant=\"outline\" color=\"success\">` = outlined success affordance.",
       "type": "string",
@@ -66,8 +71,12 @@
       "type": "string",
       "default": ""
     },
+    "textContent": {
+      "description": "Button label. Renderer routes this to the `text` attribute, which is rendered via CSS attr(text) on ::after and mirrored to aria-label.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
     "variant": {
-      "description": "Visual style — `solid` (default fill), `outline`, `ghost`, `link`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color=\"…\"] alongside.",
+      "description": "Visual style — `solid` (default fill), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color=\"…\"] alongside.\nFor **inline navigation** (Terms of Service, Privacy Policy, footer links, \"Sign in\" / \"Sign up\" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces \"link\" instead of \"button\". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction.",
       "type": "string",
       "enum": [
         "default",
@@ -77,8 +86,7 @@
         "primary",
         "secondary",
         "soft",
-        "current",
-        "link"
+        "current"
       ],
       "default": "solid"
     }
@@ -98,7 +106,9 @@
     "examples": [],
     "keywords": [],
     "name": "UIButton",
-    "related": [],
+    "related": [
+      "Link"
+    ],
     "slots": {
       "leading": {
         "description": "Icon container (start), sized to --content-height"

package/components/button/button.js

@@ -4,6 +4,7 @@ import { getIcon } from '../../core/icons.js';
 class UIButton extends UIElement {
   static properties = {
     text:     { type: String,  default: '', reflect: true },
+    textContent: { type: String, default: '' },
     variant:  { type: String,  default: 'solid', reflect: true },
     color:    { type: String,  default: '', reflect: true },
     size:     { type: String,  default: 'md', reflect: true },

package/components/button/button.yaml

@@ -8,6 +8,10 @@ category: action
 version: 1
 description: Clickable button with text, icon, and variant support. Supports submit type for forms.
 props:
+  aria-label:
+    description: Accessible label for screen readers. Auto-set from `text` when text is non-empty; meaningful override for icon-only buttons.
+    type: string
+    default: ""
   type:
     description: HTML button type (button, submit, reset)
     type: string
@@ -40,12 +44,24 @@ props:
     description: Button text, rendered via CSS attr(text) on ::after
     type: string
     default: ""
+  textContent:
+    description: Button label. Renderer routes this to the `text` attribute, which is rendered via CSS attr(text) on ::after and mirrored to aria-label.
+    type: string
+    dynamic: true
   variant:
     description: >-
-      Visual style — `solid` (default fill), `outline`, `ghost`, `link`.
+      Visual style — `solid` (default fill), `outline`, `ghost`.
       `default` / `primary` are aliases of `solid`. Style is independent
       of semantic intent — to express destructive / success / info /
       warning intent, set [color="…"] alongside.
+
+      For **inline navigation** (Terms of Service, Privacy Policy,
+      footer links, "Sign in" / "Sign up" cross-page affordances) use
+      `<link-ui>` instead — it carries proper `<a href>` semantics,
+      keyboard handling (Enter only, no Space), middle-click open-new-tab,
+      and screen-reader announces "link" instead of "button". Mixing
+      navigation and action affordances under the same primitive is a
+      category error fixed at this junction.
     type: string
     default: solid
     enum:
@@ -57,7 +73,6 @@ props:
       - secondary
       - soft
       - current
-      - link
   color:
     description: >-
       Semantic intent — composes with [variant]. `<button-ui variant="solid" color="danger">`
@@ -124,4 +139,4 @@ anti_patterns: []
 examples: []
 keywords: []
 synonyms: {}
-related: []
+related: [Link]

package/components/check/check.a2ui.json

@@ -62,7 +62,14 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
+    "anti_patterns": [
+      {
+        "description": "Wrapping a check-ui in field-ui. The widget already self-labels.",
+        "right": "<check-ui label=\"I agree to the Terms of Service\"></check-ui>\n",
+        "rule": "Use [label] on check-ui directly; do not wrap in field-ui.",
+        "wrong": "<field-ui inline label=\"Agree\">\n  <check-ui></check-ui>\n</field-ui>\n"
+      }
+    ],
     "category": "layout",
     "events": {
       "change": {

package/components/check/check.yaml

@@ -76,8 +76,17 @@ tokens:
   --check-checked-foreground:
     description: Checkmark/dash color
 a2ui:
-  rules: []
-anti_patterns: []
+  rules:
+    - "Self-labeling widget — use the [label] attribute directly; do NOT wrap in <field-ui>. The widget renders its own label inline via CSS attr() pattern. Wrapping breaks the consent-row layout (see field-ui anti_patterns)."
+anti_patterns:
+  - description: Wrapping a check-ui in field-ui. The widget already self-labels.
+    wrong: |
+      <field-ui inline label="Agree">
+        <check-ui></check-ui>
+      </field-ui>
+    right: |
+      <check-ui label="I agree to the Terms of Service"></check-ui>
+    rule: Use [label] on check-ui directly; do not wrap in field-ui.
 examples:
   - name: basic-check
     description: Basic Check usage

package/components/code/code.a2ui.json

@@ -70,6 +70,10 @@
       "description": "Code text content",
       "type": "string",
       "default": ""
+    },
+    "textContent": {
+      "description": "Code body text. Renderer routes this to the `text` attribute, reactively re-rendered into the <pre><code> block.",
+      "$ref": "common_types.json#/$defs/DynamicString"
     }
   },
   "required": [

package/components/code/code.js

@@ -49,6 +49,7 @@ class UICode extends UIElement {
     language:     { type: String,  default: '', reflect: true },
     inline:       { type: Boolean, default: false, reflect: true },
     text:         { type: String,  default: '', reflect: true },
+    textContent:  { type: String,  default: '' },
     lineNumbers:  { type: Boolean, default: false, reflect: true, attribute: 'line-numbers' },
     editable:     { type: Boolean, default: false, reflect: true },
     bare:         { type: Boolean, default: false, reflect: true },

package/components/code/code.yaml

@@ -25,6 +25,10 @@ props:
     description: Code text content
     type: string
     default: ""
+  textContent:
+    description: Code body text. Renderer routes this to the `text` attribute, reactively re-rendered into the <pre><code> block.
+    type: string
+    dynamic: true
   editable:
     description: Editable CodeMirror instance (vs read-only display)
     type: boolean

package/components/col/col.a2ui.json

@@ -26,6 +26,11 @@
       "type": "string",
       "default": "md"
     },
+    "grow": {
+      "description": "Fills remaining space in a flex parent (e.g. inside a Row). CSS-only attribute via :scope[grow] in col.css.",
+      "type": "boolean",
+      "default": false
+    },
     "justify": {
       "description": "Justify content",
       "type": "string",

package/components/col/col.js

@@ -11,6 +11,7 @@ class UICol extends UIElement {
     justify: { type: String, default: 'start',   reflect: true },
     align:   { type: String, default: 'stretch', reflect: true },
     gap:     { type: String, default: 'md',      reflect: true },
+    grow:    { type: Boolean, default: false,    reflect: true },
   };
   static template = () => null;
 }

package/components/col/col.yaml

@@ -18,6 +18,11 @@ props:
       or a numeric rung on the spacing scale ("1"…"16", mapped to --a-space-N).
     type: string
     default: md
+  grow:
+    description: Fills remaining space in a flex parent (e.g. inside a Row). CSS-only attribute via :scope[grow] in col.css.
+    type: boolean
+    default: false
+    reflect: true
   justify:
     description: Justify content
     type: string