@adia-ai/web-components 0.2.3 → 0.2.5

package/components/fields/fields.a2ui.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Fields.json",
+  "title": "Fields",
+  "description": "Container for a group of <field-ui> children, laid out on a shared 6-column grid. Each <field-ui> spans the full row by default; opt into a narrower span via [rows=\"1..6\"]. Setting [inline] on the host propagates the inline mode to every direct <field-ui> child so a whole sub-form can switch label-position without per-field edits. The grid alignment lets siblings on the same row line up cleanly — consistent label columns + consistent control columns — without the wrap-flex jitter of <row-ui wrap>.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "columns": {
+      "description": "Number of grid columns the row uses. Defaults to 6 — common multiples (1/2/3/6) divide cleanly. <field-ui rows=\"N\"> spans `N` of these columns. Override per-instance for tighter 4-column or wider 12-column compositions.",
+      "type": "number",
+      "default": 6
+    },
+    "component": {
+      "const": "Fields"
+    },
+    "inline": {
+      "description": "Propagate the inline layout mode to every direct <field-ui> child. Equivalent to authoring `inline` on each child but drives the whole group from one place. Toggle is reactive — flipping the attribute on the host re-syncs all children.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "description": "Don't wrap <field-ui> children in <row-ui wrap> when grid alignment is desired. row-ui is flex-wrap, which lets each field size to its content — labels and controls won't share a column with siblings.",
+        "severity": "high"
+      },
+      {
+        "description": "Don't set `inline` on individual <field-ui> children when the whole group should switch — set it on the parent <fields-ui> and let the propagation handle every child.",
+        "severity": "medium"
+      }
+    ],
+    "category": "form",
+    "events": {},
+    "examples": [
+      {
+        "description": "A 3-up stacked field row — Status / Priority / Group — each taking 2 of 6 columns. Equivalent to a Bootstrap \"col-md-4\" pattern (12-col grid, span 4) but with chat-ui's 6-col default.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Fields\",\n    \"children\": [\"status\", \"priority\", \"group\"]\n  },\n  { \"id\": \"status\",   \"component\": \"Field\", \"label\": \"Status\",   \"rows\": 2, \"children\": [\"status-sel\"] },\n  { \"id\": \"priority\", \"component\": \"Field\", \"label\": \"Priority\", \"rows\": 2, \"children\": [\"priority-sel\"] },\n  { \"id\": \"group\",    \"component\": \"Field\", \"label\": \"Group\",    \"rows\": 2, \"children\": [\"group-sel\"] },\n  { \"id\": \"status-sel\",   \"component\": \"Select\", \"value\": \"todo\" },\n  { \"id\": \"priority-sel\", \"component\": \"Select\", \"value\": \"0\" },\n  { \"id\": \"group-sel\",    \"component\": \"Select\", \"value\": \"\" }\n]",
+        "name": "three-up-stacked"
+      },
+      {
+        "description": "An inline form — every field renders label-beside-control. Single [inline] on the host drives all children.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Fields\",\n    \"inline\": true,\n    \"children\": [\"q\", \"kind\"]\n  },\n  { \"id\": \"q\",    \"component\": \"Field\", \"label\": \"Search\", \"children\": [\"q-input\"] },\n  { \"id\": \"kind\", \"component\": \"Field\", \"label\": \"Kind\",   \"children\": [\"kind-sel\"] },\n  { \"id\": \"q-input\", \"component\": \"Input\", \"type\": \"search\" },\n  { \"id\": \"kind-sel\", \"component\": \"Select\", \"value\": \"all\" }\n]",
+        "name": "inline-search-form"
+      }
+    ],
+    "keywords": [
+      "fields",
+      "form",
+      "grid",
+      "layout",
+      "group"
+    ],
+    "name": "UIFields",
+    "related": [
+      "field",
+      "input",
+      "select",
+      "textarea"
+    ],
+    "slots": {
+      "default": {
+        "description": "<field-ui> children. Non-field children (separators, headings) are placed in the grid too — span them by setting `style=\"grid-column: 1 / -1\"` for full-width content. Nested <fields-ui> works (an outer 6-col grid hosting inner 3-col grids inside a single cell)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "form": [
+        "fields",
+        "group",
+        "layout"
+      ]
+    },
+    "tag": "fields-ui",
+    "tokens": {
+      "--fields-column-gap": {
+        "description": "Override the column-gap independently of row-gap."
+      },
+      "--fields-gap": {
+        "description": "Gap between adjacent fields (row + column)."
+      },
+      "--fields-row-gap": {
+        "description": "Override the row-gap independently of column-gap."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/fields/fields.css

@@ -0,0 +1,60 @@
+@scope (fields-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --fields-gap:        var(--a-space-3);
+    --fields-row-gap:    var(--fields-gap);
+    --fields-column-gap: var(--fields-gap);
+  }
+
+  /* ── Base — 6-column grid ──
+     Children are placed into the grid by their [rows="N"] attr (pure
+     CSS, no JS). Default span (no attr) is the full row. The columns
+     count is configurable via [columns="N"] on the host — defaults
+     handle [columns] absent.
+
+     `minmax(0, 1fr)` is required so children with overflow content
+     (long labels, long select values) don't blow out the grid. */
+  :scope {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(var(--fields-columns, 6), minmax(0, 1fr));
+    column-gap: var(--fields-column-gap);
+    row-gap: var(--fields-row-gap);
+    align-items: start;
+  }
+
+  /* Per-instance column count from [columns="N"] — unrolled for the
+     common values 1..12. Beyond 12 the host can set
+     `--fields-columns: N` inline. */
+  :scope[columns="1"]  { --fields-columns: 1; }
+  :scope[columns="2"]  { --fields-columns: 2; }
+  :scope[columns="3"]  { --fields-columns: 3; }
+  :scope[columns="4"]  { --fields-columns: 4; }
+  :scope[columns="5"]  { --fields-columns: 5; }
+  :scope[columns="6"]  { --fields-columns: 6; }
+  :scope[columns="8"]  { --fields-columns: 8; }
+  :scope[columns="12"] { --fields-columns: 12; }
+
+  /* ── field-ui spans ──
+     `rows="N"` reads as "this field takes N grid cells". Without the
+     attr, the field spans the full row (`grid-column: 1 / -1`) so
+     authors can mix narrow + full-width fields without per-row
+     wrappers. The attribute is exposed up to 12 to cover larger
+     [columns] grids; 13+ also collapses to full-row. */
+  :scope > field-ui {
+    grid-column: 1 / -1;
+    min-width: 0; /* allow children to shrink within the cell */
+  }
+  :scope > field-ui[rows="1"]  { grid-column: span 1;  }
+  :scope > field-ui[rows="2"]  { grid-column: span 2;  }
+  :scope > field-ui[rows="3"]  { grid-column: span 3;  }
+  :scope > field-ui[rows="4"]  { grid-column: span 4;  }
+  :scope > field-ui[rows="5"]  { grid-column: span 5;  }
+  :scope > field-ui[rows="6"]  { grid-column: span 6;  }
+  :scope > field-ui[rows="7"]  { grid-column: span 7;  }
+  :scope > field-ui[rows="8"]  { grid-column: span 8;  }
+  :scope > field-ui[rows="9"]  { grid-column: span 9;  }
+  :scope > field-ui[rows="10"] { grid-column: span 10; }
+  :scope > field-ui[rows="11"] { grid-column: span 11; }
+  :scope > field-ui[rows="12"] { grid-column: span 12; }
+}

package/components/fields/fields.js

@@ -0,0 +1,96 @@
+/**
+ * fields-ui — Container for a group of <field-ui> children laid out
+ * on a shared grid.
+ *
+ *   <fields-ui>                                      <!-- 6-col grid -->
+ *     <field-ui label="Title">…</field-ui>           <!-- rows=6 (full row) -->
+ *     <field-ui label="Status"   rows="2">…</field-ui>
+ *     <field-ui label="Priority" rows="2">…</field-ui>
+ *     <field-ui label="Group"    rows="2">…</field-ui>
+ *   </fields-ui>
+ *
+ *   <fields-ui inline>            <!-- propagate inline to every child -->
+ *     <field-ui label="Search">…</field-ui>
+ *     <field-ui label="Kind">…</field-ui>
+ *   </fields-ui>
+ *
+ * The shared grid keeps siblings on the same row aligned. The [inline]
+ * attribute is mirrored onto every direct <field-ui> child so a whole
+ * sub-form switches layout mode from one host attribute. A small
+ * MutationObserver re-syncs when children are added/removed.
+ *
+ * Per-field column span is driven by the child's [rows="1..6"]
+ * attribute — pure CSS via attribute selectors in fields.css. The
+ * default span (no attr) is the full row.
+ */
+import { UIElement } from '../../core/element.js';
+
+class UIFields extends UIElement {
+  static properties = {
+    inline:  { type: Boolean, default: false, reflect: true },
+    columns: { type: Number,  default: 6,     reflect: true },
+  };
+
+  static template = () => null;
+
+  /** @type {MutationObserver | null} */
+  #mo = null;
+
+  connected() {
+    this.#syncInline();
+    this.#mo = new MutationObserver((records) => {
+      // Only re-sync on childList changes that involve direct <field-ui>
+      // children — attribute mutations on grandchildren aren't ours to
+      // care about.
+      for (const r of records) {
+        if (r.type !== 'childList') continue;
+        if (this.#hasFieldChild(r.addedNodes) || this.#hasFieldChild(r.removedNodes)) {
+          this.#syncInline();
+          return;
+        }
+      }
+    });
+    this.#mo.observe(this, { childList: true });
+  }
+
+  disconnected() {
+    this.#mo?.disconnect();
+    this.#mo = null;
+  }
+
+  render() {
+    // UIElement calls render() on attribute → property reflection. The
+    // inline attr's effect is propagation-to-children, not host markup.
+    this.#syncInline();
+  }
+
+  // ── Private ────────────────────────────────────────────────────
+
+  #syncInline() {
+    const inline = this.hasAttribute('inline');
+    for (const child of this.children) {
+      if (child.localName !== 'field-ui') continue;
+      if (inline) {
+        if (!child.hasAttribute('inline')) child.setAttribute('inline', '');
+      } else {
+        // Only remove if WE set it. We can't tell, so we always remove —
+        // that's the documented contract: <fields-ui inline> is the
+        // single source of truth for child inline-mode within the group.
+        if (child.hasAttribute('inline')) child.removeAttribute('inline');
+      }
+    }
+  }
+
+  /** @param {NodeList} nodes */
+  #hasFieldChild(nodes) {
+    for (const n of nodes) {
+      if (n.nodeType === 1 && /** @type {Element} */ (n).localName === 'field-ui') {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+customElements.define('fields-ui', UIFields);
+export { UIFields };

package/components/fields/fields.test.js

@@ -0,0 +1,88 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './fields.js';
+import '../field/field.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('fields-ui', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('registers the custom element', () => {
+    expect(customElements.get('fields-ui')).toBeDefined();
+  });
+
+  it('hosts <field-ui> children without altering them by default', () => {
+    const f = mount(`
+      <fields-ui>
+        <field-ui label="A"><input id="a" /></field-ui>
+        <field-ui label="B"><input id="b" /></field-ui>
+      </fields-ui>
+    `);
+    const fields = f.querySelectorAll('field-ui');
+    expect(fields).toHaveLength(2);
+    // Default — neither child has [inline] propagated.
+    expect(fields[0].hasAttribute('inline')).toBe(false);
+    expect(fields[1].hasAttribute('inline')).toBe(false);
+  });
+
+  it('propagates [inline] to every direct <field-ui> child on connect', async () => {
+    const f = mount(`
+      <fields-ui inline>
+        <field-ui label="A"><input id="a" /></field-ui>
+        <field-ui label="B"><input id="b" /></field-ui>
+      </fields-ui>
+    `);
+    await tick();
+    const fields = f.querySelectorAll('field-ui');
+    for (const child of fields) {
+      expect(child.hasAttribute('inline')).toBe(true);
+    }
+  });
+
+  it('removes inline from children when [inline] is removed from host', async () => {
+    const f = mount(`
+      <fields-ui inline>
+        <field-ui label="A"><input id="a" /></field-ui>
+        <field-ui label="B"><input id="b" /></field-ui>
+      </fields-ui>
+    `);
+    await tick();
+    f.removeAttribute('inline');
+    await tick();
+    const fields = f.querySelectorAll('field-ui');
+    for (const child of fields) {
+      expect(child.hasAttribute('inline')).toBe(false);
+    }
+  });
+
+  it('re-syncs inline when a new <field-ui> is appended later', async () => {
+    const f = mount(`<fields-ui inline></fields-ui>`);
+    await tick();
+    const child = document.createElement('field-ui');
+    child.setAttribute('label', 'Late');
+    f.appendChild(child);
+    // MutationObserver fires async — give it a microtask.
+    await new Promise((r) => setTimeout(r, 0));
+    expect(child.hasAttribute('inline')).toBe(true);
+  });
+
+  it('does not propagate [inline] to non-field children', async () => {
+    const f = mount(`
+      <fields-ui inline>
+        <field-ui label="A"><input id="a" /></field-ui>
+        <span class="separator">—</span>
+      </fields-ui>
+    `);
+    await tick();
+    const span = f.querySelector('.separator');
+    expect(span.hasAttribute('inline')).toBe(false);
+  });
+});

package/components/fields/fields.yaml

@@ -0,0 +1,120 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIFields
+tag: fields-ui
+component: Fields
+category: form
+version: 1
+description: >-
+  Container for a group of <field-ui> children, laid out on a shared
+  6-column grid. Each <field-ui> spans the full row by default; opt
+  into a narrower span via [rows="1..6"]. Setting [inline] on the host
+  propagates the inline mode to every direct <field-ui> child so a
+  whole sub-form can switch label-position without per-field edits.
+  The grid alignment lets siblings on the same row line up cleanly —
+  consistent label columns + consistent control columns — without
+  the wrap-flex jitter of <row-ui wrap>.
+props:
+  inline:
+    description: >-
+      Propagate the inline layout mode to every direct <field-ui>
+      child. Equivalent to authoring `inline` on each child but
+      drives the whole group from one place. Toggle is reactive —
+      flipping the attribute on the host re-syncs all children.
+    type: boolean
+    default: false
+    reflect: true
+  columns:
+    description: >-
+      Number of grid columns the row uses. Defaults to 6 — common
+      multiples (1/2/3/6) divide cleanly. <field-ui rows="N"> spans
+      `N` of these columns. Override per-instance for tighter
+      4-column or wider 12-column compositions.
+    type: number
+    default: 6
+    reflect: true
+slots:
+  default:
+    description: >-
+      <field-ui> children. Non-field children (separators, headings)
+      are placed in the grid too — span them by setting `style="grid-column:
+      1 / -1"` for full-width content. Nested <fields-ui> works (an
+      outer 6-col grid hosting inner 3-col grids inside a single cell).
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --fields-gap:
+    description: Gap between adjacent fields (row + column).
+  --fields-row-gap:
+    description: Override the row-gap independently of column-gap.
+  --fields-column-gap:
+    description: Override the column-gap independently of row-gap.
+a2ui:
+  rules: []
+anti_patterns:
+  - description: >-
+      Don't wrap <field-ui> children in <row-ui wrap> when grid
+      alignment is desired. row-ui is flex-wrap, which lets each
+      field size to its content — labels and controls won't share
+      a column with siblings.
+    severity: high
+  - description: >-
+      Don't set `inline` on individual <field-ui> children when the
+      whole group should switch — set it on the parent <fields-ui>
+      and let the propagation handle every child.
+    severity: medium
+examples:
+  - name: three-up-stacked
+    description: >-
+      A 3-up stacked field row — Status / Priority / Group — each
+      taking 2 of 6 columns. Equivalent to a Bootstrap "col-md-4"
+      pattern (12-col grid, span 4) but with chat-ui's 6-col default.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Fields",
+          "children": ["status", "priority", "group"]
+        },
+        { "id": "status",   "component": "Field", "label": "Status",   "rows": 2, "children": ["status-sel"] },
+        { "id": "priority", "component": "Field", "label": "Priority", "rows": 2, "children": ["priority-sel"] },
+        { "id": "group",    "component": "Field", "label": "Group",    "rows": 2, "children": ["group-sel"] },
+        { "id": "status-sel",   "component": "Select", "value": "todo" },
+        { "id": "priority-sel", "component": "Select", "value": "0" },
+        { "id": "group-sel",    "component": "Select", "value": "" }
+      ]
+  - name: inline-search-form
+    description: >-
+      An inline form — every field renders label-beside-control. Single
+      [inline] on the host drives all children.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Fields",
+          "inline": true,
+          "children": ["q", "kind"]
+        },
+        { "id": "q",    "component": "Field", "label": "Search", "children": ["q-input"] },
+        { "id": "kind", "component": "Field", "label": "Kind",   "children": ["kind-sel"] },
+        { "id": "q-input", "component": "Input", "type": "search" },
+        { "id": "kind-sel", "component": "Select", "value": "all" }
+      ]
+keywords:
+  - fields
+  - form
+  - grid
+  - layout
+  - group
+synonyms:
+  form:
+    - fields
+    - group
+    - layout
+related:
+  - field
+  - input
+  - select
+  - textarea

package/components/index.js

@@ -56,6 +56,7 @@ export { UITag } from './tag/tag.js';
 export { UISwatch } from './swatch/swatch.js';
 export { UICol }   from './col/col.js';
 export { UIField } from './field/field.js';
+export { UIFields } from './fields/fields.js';
 export { UIRow }   from './row/row.js';
 export { UIGrid }  from './grid/grid.js';
 export { UIStack } from './stack/stack.js';
@@ -85,6 +86,7 @@ export { UIEmbed } from './embed/embed.js';
 export { UIBlock } from './block/block.js';
 export { UIText } from './text/text.js';
 export { UIToggleGroup, UIToggleOption } from './toggle-group/toggle-group.js';
+export { UIDemoToggle } from './demo-toggle/demo-toggle.js';
 export { UIRichText } from './richtext/richtext.js';
 export { UIStream } from './stream/stream.js';
 export { UICanvas } from './canvas/canvas.js';

package/components/input/input.js

@@ -120,10 +120,14 @@ class UIInput extends UIFormElement {
   render() {
     if (!this.#textEl) return;
 
+    const text = this.value || '';
+
     if (this.#isNativeInput) {
       this.#textEl.placeholder = this.placeholder;
       this.#textEl.disabled = this.disabled;
       this.#textEl.readOnly = this.readonly;
+      // Sync programmatic value writes (form.reset(), trait assignments).
+      if (this.#textEl.value !== text) this.#textEl.value = text;
     } else {
       this.#textEl.setAttribute('data-placeholder', this.placeholder);
       if (this.disabled || this.readonly) {
@@ -131,6 +135,13 @@ class UIInput extends UIFormElement {
       } else {
         this.#textEl.contentEditable = 'plaintext-only';
       }
+      // Sync programmatic value writes into the contenteditable surface.
+      // Skip when already in sync to avoid clobbering an in-flight edit's
+      // caret position.
+      if (this.#textEl.textContent !== text) {
+        this.#textEl.textContent = text;
+        this.#textEl.toggleAttribute('data-empty', !text);
+      }
     }
 
     if (this.#labelEl) this.#labelEl.textContent = this.label || '';

package/components/list/list.css

@@ -121,6 +121,9 @@
     font-size: var(--list-item-font-size);
     color: var(--list-item-text-color);
     line-height: 1.4;
+    /* Defensive floor: empty list-item-ui (no text/icon/children) collapses
+       to 0 height and disappears. Keep a visible row instead. */
+    min-height: var(--a-space-6);
   }
 
   :scope > [slot="icon"] {
@@ -150,4 +153,22 @@
   :scope > [slot="content"] {
     grid-column: 1 / -1;
   }
+
+  /* ── Active state ──
+     `[data-active]` is the consumer-driven "current item" hook used by
+     keyboard-nav-style demos and any host that owns its own active-index
+     model (separate from list-ui[selectable] / aria-selected). Reuses
+     the accent-muted/accent-strong pair so the two mechanisms paint
+     consistently. No border-radius on the row itself — dividers (when
+     present) span full-width and rounded corners would clash. */
+  :scope[data-active] {
+    background: var(--a-accent-muted);
+    color: var(--a-accent-strong);
+    box-shadow: inset 2px 0 0 var(--a-accent-strong);
+  }
+
+  :scope[data-active] > [slot="icon"],
+  :scope[data-active] > [slot="description"] {
+    color: var(--a-accent-strong);
+  }
 }

package/components/textarea/textarea.js

@@ -55,6 +55,16 @@ class UITextarea extends UIFormElement {
       this.#textEl.contentEditable = 'plaintext-only';
     }
 
+    // Sync programmatic `value` assignments (form.reset(), trait writes,
+    // controlled-input patterns) into the contenteditable surface. Skip
+    // when the surface already matches to avoid clobbering an in-flight
+    // edit's caret.
+    const text = this.value || '';
+    if (this.#textEl.textContent !== text) {
+      this.#textEl.textContent = text;
+      this.#textEl.toggleAttribute('data-empty', !text);
+    }
+
     const label = this.querySelector('[slot="label"]');
     if (label && this.label) label.setAttribute('label', this.label);
 

package/core/icons.js

@@ -212,7 +212,18 @@ const ICON_ALIASES = {
   'phone': 'phone', 'location': 'map-pin', 'calendar': 'calendar-blank',
   'time': 'clock', 'user': 'user', 'users': 'users-three',
   'menu': 'list', 'more': 'dots-three', 'dots-vertical': 'dots-three-vertical', 'filter': 'funnel',
-  'inbox': 'tray', 'text-bold': 'text-b',
+  'inbox': 'tray',
+  'text-bold': 'text-b', 'bold': 'text-b', 'italic': 'text-italic', 'underline': 'text-underline',
+  'reset': 'arrow-counter-clockwise', 'undo': 'arrow-counter-clockwise', 'redo': 'arrow-clockwise',
+  'success-checkmark': 'seal-check', 'circuit': 'circuitry',
+  'contrast': 'circle-half', 'theme': 'circle-half', 'dark-mode': 'moon', 'light-mode': 'sun',
+  'alert-triangle': 'warning', 'alert-octagon': 'warning-octagon', 'alert-diamond': 'warning-diamond',
+  'number': 'hash', 'numbered-list': 'list-numbers', 'numeric': 'hash',
+  // Phosphor uses suffix-circle for these, but consumers reach for the
+  // prefix form ("circle-warning") just as often. Resolve both shapes.
+  'circle-warning': 'warning-circle', 'circle-x': 'x-circle',
+  'circle-check': 'check-circle', 'circle-info': 'info',
+  'circle-question': 'question', 'circle-plus': 'plus-circle', 'circle-minus': 'minus-circle',
   'sort': 'sort-ascending', 'refresh': 'arrow-clockwise', 'download': 'download-simple',
   'upload': 'upload-simple', 'share': 'share-network', 'copy': 'copy-simple',
   'link': 'link-simple', 'external-link': 'arrow-square-out',

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.2.3",
-  "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
+  "version": "0.2.5",
+  "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {
-    ".":              "./index.js",
-    "./css":          "./index.css",
-    "./core":         "./core/index.js",
-    "./core/*":       "./core/*.js",
-    "./components":   "./components/index.js",
+    ".": "./index.js",
+    "./css": "./index.css",
+    "./core": "./core/index.js",
+    "./core/*": "./core/*.js",
+    "./components": "./components/index.js",
     "./components/*": "./components/*/*.js",
-    "./styles/*":     "./styles/*",
-    "./traits":       "./traits/index.js",
-    "./traits/*":     "./traits/*.js",
+    "./styles/*": "./styles/*",
+    "./traits": "./traits/index.js",
+    "./traits/*": "./traits/*.js",
     "./package.json": "./package.json"
   },
   "files": [

package/styles/components.css

@@ -54,6 +54,7 @@
 @import "../components/swatch/swatch.css";
 @import "../components/col/col.css";
 @import "../components/field/field.css";
+@import "../components/fields/fields.css";
 @import "../components/row/row.css";
 @import "../components/grid/grid.css";
 @import "../components/stack/stack.css";
@@ -83,6 +84,7 @@
 @import "../components/block/block.css";
 @import "../components/text/text.css";
 @import "../components/toggle-group/toggle-group.css";
+@import "../components/demo-toggle/demo-toggle.css";
 @import "../components/richtext/richtext.css";
 @import "../components/stream/stream.css";
 @import "../components/canvas/canvas.css";

package/styles/typography.css

@@ -256,7 +256,7 @@
 
   /* section — h2/h3, major division within content */
   --a-section-family: var(--a-font-family-heading);
-  --a-section-weight: var(--a-weight-semibold);
+  --a-section-weight: var(--a-weight-normal);
   --a-section-sm: 16px;
   --a-section-md: 17px;
   --a-section-lg: 19px;