@adia-ai/web-components 0.6.33 → 0.6.35

package/components/tags-input/tags-input.yaml

@@ -0,0 +1,367 @@
+# Hand-authored — SPEC-042 (2026-05-24).
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UITagsInput
+tag: tags-input-ui
+status: experimental
+component: TagsInput
+category: input
+version: 1
+description: |
+  Free-form token input — type a value, press Enter (or the configured
+  delimiter) to commit it as a chip; Backspace from the empty inline
+  input removes the last chip. Distinct from <select-ui multiple>
+  (SPEC-040), which is constrained to a fixed option list — tags-input
+  is for OPEN sets (labels, email recipients, keyword inputs). Per
+  ADR-0025 the inline editor is a contenteditable surface (NO native
+  `<input>` wrap). Form-bearing via UIFormElement + ElementInternals:
+  the form value is a JSON-serialized string array under `[name]`.
+  Each rendered chip is a `<tag-ui removable>`; the `remove` event
+  delegates back to the host. Optional autocompletion: when
+  `.suggestions` is non-empty, a popover renders below the field and
+  the host announces as a combobox per WAI-APG.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - tag-ui                # rendered per committed token
+  - icon-ui               # spinner glyph for async validators
+props:
+  name:
+    description: Form field name. Serializes the token list as JSON under this key.
+    type: string
+    default: ""
+    reflect: true
+  value:
+    description: |-
+      Current token list (string array). Setting `.value = ['a','b']`
+      replaces the rendered chips. Reflection skipped — array values
+      do not round-trip through attribute strings.
+    type: array
+    default: []
+    dynamic: true
+  placeholder:
+    description: Placeholder text for the inline input when no chips are committed.
+    type: string
+    default: Add tag…
+    reflect: true
+  delimiter:
+    description: |-
+      Inline character that commits the typed value as a chip. The
+      sentinel `enter` disables in-line commit — only the Enter key
+      (or programmatic `addToken`) commits. Default is `,`.
+    type: string
+    default: ","
+    reflect: true
+  pasteSplit:
+    description: |-
+      Regex character-class fragment matched against pasted text to
+      split it into multiple tokens. Default `,\n` splits on commas
+      and newlines. Use `""` to disable paste-splitting entirely.
+    type: string
+    default: ",\n"
+    attribute: paste-split
+    reflect: true
+  max:
+    description: Maximum number of tokens. `0` (default) means unlimited.
+    type: number
+    default: 0
+    reflect: true
+  min:
+    description: Minimum required tokens for form validity.
+    type: number
+    default: 0
+    reflect: true
+  minLength:
+    description: Minimum per-token character count after `transform` is applied.
+    type: number
+    default: 1
+    attribute: min-length
+    reflect: true
+  maxLength:
+    description: Maximum per-token character count. `0` (default) means unlimited.
+    type: number
+    default: 0
+    attribute: max-length
+    reflect: true
+  unique:
+    description: Reject duplicate tokens silently (no `invalid` event for accidental dups).
+    type: boolean
+    default: true
+    reflect: true
+  transform:
+    description: |-
+      Normalize tokens on commit. `lowercase` lowercases, `trim` strips
+      leading + trailing whitespace, `strip-spaces` removes all
+      whitespace, `""` (default) preserves the typed value.
+    type: string
+    default: ""
+    enum:
+      - ""
+      - lowercase
+      - trim
+      - strip-spaces
+    reflect: true
+  suggestions:
+    description: |-
+      Optional autocomplete strings rendered in a popover below the
+      field. Suggestions are hints, not gates — the typed value still
+      wins on commit. JS property only (array reflection skipped).
+    type: array
+    default: []
+    dynamic: true
+  validateFn:
+    description: |-
+      Per-token validator. Sync `(value, index) => boolean` rejects
+      false synchronously; async `(value, index) => Promise<boolean>`
+      flips the host into `[validating]` while pending. JS property
+      only — not serializable in A2UI JSON; wire post-mount.
+    type: object
+    default: null
+    dynamic: true
+  disabled:
+    description: Block all interaction; dim the field.
+    type: boolean
+    default: false
+    reflect: true
+  readonly:
+    description: Block edits; allow inspection (chips render without remove buttons).
+    type: boolean
+    default: false
+    reflect: true
+  required:
+    description: Required for form validation. Empty array fails `:invalid`.
+    type: boolean
+    default: false
+    reflect: true
+  size:
+    description: |-
+      Sizing scale via universal `[size]` attribute system. Matches
+      Input + Combobox sizing tokens so a TagsInput rendered alongside
+      either feels coherent in a form row.
+    type: string
+    default: md
+    enum: [sm, md, lg]
+    reflect: true
+events:
+  change:
+    description: Fired after `value` changes (token added or removed).
+    detail:
+      value:
+        type: array
+        description: Current token list (string array).
+      added:
+        type: array
+        description: Tokens added by this change (`[]` when only removals occurred).
+      removed:
+        type: array
+        description: Tokens removed by this change (`[]` when only additions occurred).
+  input:
+    description: Fired on each keystroke in the inline input (pre-commit).
+    detail:
+      query:
+        type: string
+        description: Current typed text in the inline input.
+  commit:
+    description: |-
+      Fired immediately before a token is committed. Call
+      `event.preventDefault()` to reject the candidate token.
+    detail:
+      value:
+        type: string
+        description: Candidate token text (post-transform).
+      accepted:
+        type: boolean
+        description: True unless the consumer calls `preventDefault()`.
+  invalid:
+    description: |-
+      Fired when a candidate token is rejected. Reasons cover all
+      built-in validators and the user-supplied `validateFn`.
+    detail:
+      value:
+        type: string
+        description: Rejected token text.
+      reason:
+        type: string
+        description: One of `duplicate` / `too-short` / `too-long` / `validator` / `max`.
+slots:
+  chip:
+    description: |-
+      Custom chip template — receives `{value, index}` per token.
+      When absent, each token renders as a default
+      `<tag-ui removable text="<value>">`.
+states:
+  - name: idle
+    description: No tokens; no typed text.
+  - name: populated
+    description: One or more tokens committed.
+    attribute: populated
+  - name: editing
+    description: User is typing into the inline input.
+    attribute: editing
+  - name: suggesting
+    description: Suggestion popover is open.
+    attribute: suggesting
+  - name: validating
+    description: Async `validateFn` is in flight.
+    attribute: validating
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+  - name: readonly
+    description: Read-only; chips render without remove affordance.
+    attribute: readonly
+traits: []
+tokens:
+  --tags-input-bg:
+    description: Host background color.
+  --tags-input-fg:
+    description: Host foreground (typed-text color).
+  --tags-input-border:
+    description: Host border color (idle).
+  --tags-input-border-hover:
+    description: Host border color on hover.
+  --tags-input-radius:
+    description: Host border radius.
+  --tags-input-px:
+    description: Horizontal padding inside the chip-cluster wrapper.
+  --tags-input-py:
+    description: Vertical padding inside the chip-cluster wrapper.
+  --tags-input-gap:
+    description: Gap between chips and the inline input.
+  --tags-input-placeholder-fg:
+    description: Placeholder color for the empty inline input.
+  --tags-input-focus-ring:
+    description: Focus-ring box-shadow when the host is focus-within.
+  --tags-input-chip-bg-invalid:
+    description: Chip background color when a chip is marked invalid (validator rejection echo).
+requiredIcons:
+  - circle-notch
+a2ui:
+  rules:
+    - >-
+      Use <tags-input-ui> for OPEN-SET free-form token entry — labels,
+      keywords, email recipients, comma-separated lists. For CLOSED
+      option sets (pick N from a fixed list), use <select-ui multiple>
+      (SPEC-040) — that primitive gates the value against `options[]`.
+    - >-
+      `TagsInput.value` MUST be a string array. Pass `["a","b"]`, not
+      the comma-joined string `"a,b"`. The host parses string-form
+      `value` attributes as JSON; non-array shapes throw `invalid`.
+    - >-
+      `delimiter: "enter"` disables in-line character commits; only
+      the Enter key (or programmatic `addToken`) commits. Use this
+      when the token grammar legitimately includes the default `,`.
+    - >-
+      `unique: true` (default) silently coalesces accidental duplicate
+      adds. Do NOT emit `invalid` for those — the contract specifies
+      silent dedup for ergonomic typing.
+    - >-
+      `validateFn` is a JS property, NOT serializable in A2UI JSON.
+      Wire validators post-mount via DOM scripting; A2UI authors
+      should not expect to declare a validator in the JSON payload.
+    - >-
+      Chips are rendered automatically from `value`. Do NOT slot
+      individual <tag-ui> children manually — that decouples the
+      rendered DOM from the form value and breaks Backspace removal.
+anti_patterns:
+  - wrong: |
+      {"component": "TagsInput", "options": [{"id": "a", "label": "A"}]}
+    why: |
+      TagsInput does NOT accept `options`. It is the OPEN-set primitive — any
+      typed string is valid. For closed option lists, use the multi-select
+      primitive with `multiple: true`.
+    fix: |
+      {"component": "Select", "multiple": true, "options": [{"id": "a", "label": "A"}]}
+  - wrong: |
+      {"component": "TagsInput", "value": "bug,high-priority"}
+    why: |
+      Comma-separated string is invalid for `value`. The contract requires
+      a string array.
+    fix: |
+      {"component": "TagsInput", "value": ["bug", "high-priority"]}
+  - wrong: |
+      {"component": "TagsInput", "children": [
+        {"component": "Tag", "text": "Tag 1"}
+      ]}
+    why: |
+      Chips are rendered automatically from `value`. Slotting Tag children
+      decouples the rendered DOM from the form value and breaks Backspace
+      removal + the `change` event payload.
+    fix: |
+      {"component": "TagsInput", "value": ["Tag 1"]}
+examples:
+  - name: canonical-labels
+    description: Label input with lowercase normalization + max 10 tags + 2 pre-committed values.
+    a2ui: >-
+      [
+        {"id": "root", "component": "Card", "children": ["sec"]},
+        {"id": "sec", "component": "Section", "children": ["field"]},
+        {
+          "id": "field",
+          "component": "Field",
+          "label": "Labels",
+          "children": ["tags"]
+        },
+        {
+          "id": "tags",
+          "component": "TagsInput",
+          "name": "labels",
+          "placeholder": "Add a label, press Enter",
+          "transform": "lowercase",
+          "max": 10,
+          "value": ["bug", "high-priority"]
+        }
+      ]
+  - name: email-recipients
+    description: Recipient picker with Enter-only commit (commas are legal in display names).
+    a2ui: >-
+      [
+        {
+          "id": "to",
+          "component": "TagsInput",
+          "name": "to",
+          "placeholder": "Email…",
+          "delimiter": "enter",
+          "transform": "trim"
+        }
+      ]
+keywords:
+  - tags-input
+  - tag-input
+  - token-input
+  - chips-input
+  - chip-input
+  - labels
+  - recipients
+  - keywords
+  - tags
+  - email-input
+  - multi-value-input
+synonyms:
+  tags-input:
+    - tag-input
+    - chip-input
+    - token-input
+    - tokenizer
+  token-input:
+    - tags-input
+    - chip-input
+    - tokenizer
+  chips-input:
+    - tags-input
+    - chip-input
+    - token-input
+  labels:
+    - tags
+    - tag-input
+    - labels-input
+  recipients:
+    - email-input
+    - tags-input
+    - to-field
+related:
+  - tag
+  - select
+  - combobox
+  - field
+  - input

package/components/text/text.css

@@ -1,27 +1,27 @@
 @scope (text-ui) {
   :where(:scope) {
     /* ── Tokens (body defaults) ── */
-    --text-family:    var(--a-body-family);
-    --text-weight:    var(--a-weight);
-    --text-weight-strong:    var(--a-weight-semibold);
-    --text-size:      var(--a-body-size);
-    --text-leading:   var(--a-body-leading);
-    --text-tracking:  var(--a-body-tracking);
-    --text-case:      var(--a-body-case);
-    --text-color:     var(--a-fg);
-    --text-color-strong:     var(--a-fg-strong);
+    --text-family-default:    var(--a-body-family);
+    --text-weight-default:    var(--a-weight);
+    --text-weight-strong-default:    var(--a-weight-semibold);
+    --text-size-default:      var(--a-body-size);
+    --text-leading-default:   var(--a-body-leading);
+    --text-tracking-default:  var(--a-body-tracking);
+    --text-case-default:      var(--a-body-case);
+    --text-color-default:     var(--a-fg);
+    --text-color-strong-default:     var(--a-fg-strong);
   }
 
   :scope {
     box-sizing: border-box;
     display: inline;
-    font-family: var(--text-family);
-    font-weight: var(--text-weight);
-    font-size: var(--text-size);
-    line-height: var(--text-leading);
-    letter-spacing: var(--text-tracking);
-    text-transform: var(--text-case);
-    color: var(--text-color);
+    font-family: var(--text-family, var(--text-family-default));
+    font-weight: var(--text-weight, var(--text-weight-default));
+    font-size: var(--text-size, var(--text-size-default));
+    line-height: var(--text-leading, var(--text-leading-default));
+    letter-spacing: var(--text-tracking, var(--text-tracking-default));
+    text-transform: var(--text-case, var(--text-case-default));
+    color: var(--text-color, var(--text-color-default));
   }
 
   /* Reset native heading styles inside text-ui so the variant controls the look */
@@ -33,20 +33,20 @@
   }
 
   :scope[strong], :is(strong) {
-    --text-weight: var(--text-weight-strong);
-    --text-color: var(--text-color-strong);
+    --text-weight-default: var(--text-weight-strong, var(--text-weight-strong-default));
+    --text-color-default: var(--text-color-strong, var(--text-color-strong-default));
   }
 
   /* ── Variants ── */
-  :scope[variant="body"]       { --text-family: var(--a-body-family);    --text-weight: var(--a-body-weight);    --text-size: var(--a-body-size);    --text-leading: var(--a-body-leading);    --text-tracking: var(--a-body-tracking);    --text-case: var(--a-body-case);    --text-color: var(--a-fg); }
-  :scope[variant="display"]    { --text-family: var(--a-display-family); --text-weight: var(--a-display-weight); --text-size: var(--a-display-size); --text-leading: var(--a-display-leading); --text-tracking: var(--a-display-tracking); --text-case: var(--a-display-case); --text-color: var(--a-display-color); }
-  :scope[variant="title"]      { --text-family: var(--a-title-family);   --text-weight: var(--a-title-weight);   --text-size: var(--a-title-size);   --text-leading: var(--a-title-leading);   --text-tracking: var(--a-title-tracking);   --text-case: var(--a-title-case);   --text-color: var(--a-title-color); }
-  :scope[variant="heading"]    { --text-family: var(--a-heading-family); --text-weight: var(--a-heading-weight); --text-size: var(--a-heading-size); --text-leading: var(--a-heading-leading); --text-tracking: var(--a-heading-tracking); --text-case: var(--a-heading-case); --text-color: var(--a-heading-color); }
-  :scope[variant="section"]    { --text-family: var(--a-section-family); --text-weight: var(--a-section-weight); --text-size: var(--a-section-size); --text-leading: var(--a-section-leading); --text-tracking: var(--a-section-tracking); --text-case: var(--a-section-case); --text-color: var(--a-section-color); }
-  :scope[variant="caption"]    { --text-family: var(--a-caption-family); --text-weight: var(--a-caption-weight); --text-size: var(--a-caption-size); --text-leading: var(--a-caption-leading); --text-tracking: var(--a-caption-tracking); --text-case: var(--a-caption-case); --text-color: var(--a-caption-color); }
-  :scope[variant="label"]      { --text-family: var(--a-label-family);   --text-weight: var(--a-label-weight);   --text-size: var(--a-label-size);   --text-leading: var(--a-label-leading);   --text-tracking: var(--a-label-tracking);   --text-case: var(--a-label-case);   --text-color: var(--a-label-color); }
-  :scope[variant="kicker"]     { --text-family: var(--a-kicker-family);  --text-weight: var(--a-kicker-weight);  --text-size: var(--a-kicker-size);  --text-leading: var(--a-kicker-leading);  --text-tracking: var(--a-kicker-tracking);  --text-case: uppercase;             --text-color: var(--a-kicker-color); }
-  :scope[variant="code"]       { --text-family: var(--a-code-family);    --text-weight: var(--a-code-weight);    --text-size: var(--a-code-size);    --text-leading: var(--a-code-leading);    --text-tracking: var(--a-code-tracking);    --text-case: var(--a-code-case);    --text-color: var(--a-code-color); }
+  :scope[variant="body"]       { --text-family-default: var(--a-body-family);    --text-weight-default: var(--a-body-weight);    --text-size-default: var(--a-body-size);    --text-leading-default: var(--a-body-leading);    --text-tracking-default: var(--a-body-tracking);    --text-case-default: var(--a-body-case);    --text-color-default: var(--a-fg); }
+  :scope[variant="display"]    { --text-family-default: var(--a-display-family); --text-weight-default: var(--a-display-weight); --text-size-default: var(--a-display-size); --text-leading-default: var(--a-display-leading); --text-tracking-default: var(--a-display-tracking); --text-case-default: var(--a-display-case); --text-color-default: var(--a-display-color); }
+  :scope[variant="title"]      { --text-family-default: var(--a-title-family);   --text-weight-default: var(--a-title-weight);   --text-size-default: var(--a-title-size);   --text-leading-default: var(--a-title-leading);   --text-tracking-default: var(--a-title-tracking);   --text-case-default: var(--a-title-case);   --text-color-default: var(--a-title-color); }
+  :scope[variant="heading"]    { --text-family-default: var(--a-heading-family); --text-weight-default: var(--a-heading-weight); --text-size-default: var(--a-heading-size); --text-leading-default: var(--a-heading-leading); --text-tracking-default: var(--a-heading-tracking); --text-case-default: var(--a-heading-case); --text-color-default: var(--a-heading-color); }
+  :scope[variant="section"]    { --text-family-default: var(--a-section-family); --text-weight-default: var(--a-section-weight); --text-size-default: var(--a-section-size); --text-leading-default: var(--a-section-leading); --text-tracking-default: var(--a-section-tracking); --text-case-default: var(--a-section-case); --text-color-default: var(--a-section-color); }
+  :scope[variant="caption"]    { --text-family-default: var(--a-caption-family); --text-weight-default: var(--a-caption-weight); --text-size-default: var(--a-caption-size); --text-leading-default: var(--a-caption-leading); --text-tracking-default: var(--a-caption-tracking); --text-case-default: var(--a-caption-case); --text-color-default: var(--a-caption-color); }
+  :scope[variant="label"]      { --text-family-default: var(--a-label-family);   --text-weight-default: var(--a-label-weight);   --text-size-default: var(--a-label-size);   --text-leading-default: var(--a-label-leading);   --text-tracking-default: var(--a-label-tracking);   --text-case-default: var(--a-label-case);   --text-color-default: var(--a-label-color); }
+  :scope[variant="kicker"]     { --text-family-default: var(--a-kicker-family);  --text-weight-default: var(--a-kicker-weight);  --text-size-default: var(--a-kicker-size);  --text-leading-default: var(--a-kicker-leading);  --text-tracking-default: var(--a-kicker-tracking);  --text-case-default: uppercase;             --text-color-default: var(--a-kicker-color); }
+  :scope[variant="code"]       { --text-family-default: var(--a-code-family);    --text-weight-default: var(--a-code-weight);    --text-size-default: var(--a-code-size);    --text-leading-default: var(--a-code-leading);    --text-tracking-default: var(--a-code-tracking);    --text-case-default: var(--a-code-case);    --text-color-default: var(--a-code-color); }
 
   /* §210 (v0.5.7, FEEDBACK-17 §1): three token-backed variants whose
      `--a-<role>-{family,weight,leading,tracking,case,color,size}` tokens
@@ -57,9 +57,9 @@
      this batch: their tokens don't ship anywhere (verified in this same
      arc), so the enum entries are retired from text.yaml / text.d.ts /
      text.a2ui.json. */
-  :scope[variant="subsection"] { --text-family: var(--a-subsection-family); --text-weight: var(--a-subsection-weight); --text-size: var(--a-subsection-size); --text-leading: var(--a-subsection-leading); --text-tracking: var(--a-subsection-tracking); --text-case: var(--a-subsection-case); --text-color: var(--a-subsection-color); }
-  :scope[variant="deck"]       { --text-family: var(--a-deck-family);       --text-weight: var(--a-deck-weight);       --text-size: var(--a-deck-size);       --text-leading: var(--a-deck-leading);       --text-tracking: var(--a-deck-tracking);       --text-case: var(--a-deck-case);       --text-color: var(--a-deck-color); }
-  :scope[variant="metric"]     { --text-family: var(--a-metric-family);     --text-weight: var(--a-metric-weight);     --text-size: var(--a-metric-size);     --text-leading: var(--a-metric-leading);     --text-tracking: var(--a-metric-tracking);     --text-case: var(--a-metric-case);     --text-color: var(--a-metric-color); }
+  :scope[variant="subsection"] { --text-family-default: var(--a-subsection-family); --text-weight-default: var(--a-subsection-weight); --text-size-default: var(--a-subsection-size); --text-leading-default: var(--a-subsection-leading); --text-tracking-default: var(--a-subsection-tracking); --text-case-default: var(--a-subsection-case); --text-color-default: var(--a-subsection-color); }
+  :scope[variant="deck"]       { --text-family-default: var(--a-deck-family);       --text-weight-default: var(--a-deck-weight);       --text-size-default: var(--a-deck-size);       --text-leading-default: var(--a-deck-leading);       --text-tracking-default: var(--a-deck-tracking);       --text-case-default: var(--a-deck-case);       --text-color-default: var(--a-deck-color); }
+  :scope[variant="metric"]     { --text-family-default: var(--a-metric-family);     --text-weight-default: var(--a-metric-weight);     --text-size-default: var(--a-metric-size);     --text-leading-default: var(--a-metric-leading);     --text-tracking-default: var(--a-metric-tracking);     --text-case-default: var(--a-metric-case);     --text-color-default: var(--a-metric-color); }
 
   /* ── v0.6.18 (FB-10) — finer-control overrides on top of `variant` ──
      The skill always documented an overlay API (color="subtle",
@@ -72,25 +72,25 @@
      with an unknown color = no-op (variant color wins). */
 
   /* size — sm | md | lg (md is the body default ~15-16px) */
-  :scope[size="sm"]  { --text-size: var(--a-body-sm); }
-  :scope[size="md"]  { --text-size: var(--a-body-md); }
-  :scope[size="lg"]  { --text-size: var(--a-body-lg); }
+  :scope[size="sm"]  { --text-size-default: var(--a-body-sm); }
+  :scope[size="md"]  { --text-size-default: var(--a-body-md); }
+  :scope[size="lg"]  { --text-size-default: var(--a-body-lg); }
 
   /* color — default | subtle | strong | accent | danger | success | warning
      (no value = variant default; "default" is an explicit reset). */
-  :scope[color="default"] { --text-color: var(--a-fg); }
-  :scope[color="subtle"]  { --text-color: var(--a-fg-muted); }
-  :scope[color="strong"]  { --text-color: var(--a-fg-strong); }
-  :scope[color="accent"]  { --text-color: var(--a-accent); }
-  :scope[color="danger"]  { --text-color: var(--a-danger-bg); }
-  :scope[color="success"] { --text-color: var(--a-success-bg); }
-  :scope[color="warning"] { --text-color: var(--a-warning-bg); }
+  :scope[color="default"] { --text-color-default: var(--a-fg); }
+  :scope[color="subtle"]  { --text-color-default: var(--a-fg-muted); }
+  :scope[color="strong"]  { --text-color-default: var(--a-fg-strong); }
+  :scope[color="accent"]  { --text-color-default: var(--a-accent); }
+  :scope[color="danger"]  { --text-color-default: var(--a-danger-bg); }
+  :scope[color="success"] { --text-color-default: var(--a-success-bg); }
+  :scope[color="warning"] { --text-color-default: var(--a-warning-bg); }
 
   /* weight — regular | medium | semibold | bold */
-  :scope[weight="regular"]  { --text-weight: var(--a-weight); }
-  :scope[weight="medium"]   { --text-weight: var(--a-weight-medium); }
-  :scope[weight="semibold"] { --text-weight: var(--a-weight-semibold); }
-  :scope[weight="bold"]     { --text-weight: var(--a-weight-bold); }
+  :scope[weight="regular"]  { --text-weight-default: var(--a-weight); }
+  :scope[weight="medium"]   { --text-weight-default: var(--a-weight-medium); }
+  :scope[weight="semibold"] { --text-weight-default: var(--a-weight-semibold); }
+  :scope[weight="bold"]     { --text-weight-default: var(--a-weight-bold); }
 
   /* text-align — start | center | end | justify */
   :scope[text-align="start"]   { text-align: start; }

package/components/text/text.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIText } from './class.js';
+import { UIText } from './text.class.js';
 
 defineIfFree('text-ui', UIText);
 

package/components/textarea/textarea.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Textarea.json",
   "title": "Textarea",
-  "description": "Multi-line text input primitive — the host IS the contenteditable\nsurface (per ADR-0025, no native <textarea> wrapped underneath).\nForm-bearing via UIFormElement: [name], [value], [required],\n[disabled], [readonly], fires `change` on blur and `input` per\nkeystroke. Enter inserts a newline — does NOT fire `submit` (for\nEnter-to-send composers use <chat-input-ui submit-on-enter> inside\n<chat-composer>). Wrap in <field-ui label=\"…\"> for the canonical\nlabeled stack.\n",
+  "description": "Multi-line text input primitive — the host IS the contenteditable\nsurface (per ADR-0025, no native <textarea> wrapped underneath).\nForm-bearing via UIFormElement: [name], [value], [required],\n[disabled], [readonly], fires `change` on blur and `input` per\nkeystroke. Enter (without Shift) dispatches a bubbling `submit`\nevent — Shift+Enter inserts a newline. This is unconditional;\nthere is no opt-in/opt-out attribute. For Enter-to-send composers\nuse <chat-input-ui> inside <chat-composer>. Wrap in <field-ui\nlabel=\"…\"> for the canonical labeled stack.\n",
   "type": "object",
   "allOf": [
     {