@adia-ai/web-components 0.5.13 → 0.5.15

package/components/text/text.yaml

@@ -28,7 +28,16 @@ props:
     default: ""
     dynamic: true
   variant:
-    description: Typography variant — sets role tokens (size/weight/tracking/color).
+    description: |-
+      Typography variant — sets design-role tokens (size / weight /
+      tracking / color / leading) per the L0 typography token family.
+      **PRESENTATIONAL-ONLY (§247, FB-23 §2).** `<text-ui variant="heading">`
+      does NOT set `role="heading"` + `aria-level` on the host. Document-
+      outline assistive technology will treat the element as `role="generic"`.
+      For semantic headings, wrap with native `<h1>`-`<h6>` OR add
+      `role="heading" aria-level="N"` on the host directly. For visual-only
+      labels (eyebrows, kickers, captions, deck), the presentational default
+      is correct. The §221k chooser guide in USAGE.md documents picker heuristics.
     type: string
     default: body
     enum:
@@ -44,6 +53,21 @@ props:
       - section
       - metric
       - code
+    # §324 (v0.5.15, FB-23 §3 retire): per-variant JSDoc surfaces at IDE
+    # hover via codegen. Retires the HAND_AUTHORED_DTS skip for text.d.ts.
+    enum_descriptions:
+      body: Default body copy. 14px / regular. Paragraphs, multi-line content, running prose.
+      display: Top-level hero / brand display. Tallest visual rank. Use for page-level hero one-liners.
+      title: Page title (visual rank H1). Largest under display. Use at the top of an authoritative page or dialog.
+      heading: Major page heading (visual rank H2). 16-18px / bold. Use for major sub-section dividers.
+      subsection: Sub-landmark within a section (visual rank H3). 14px / semibold. Use for card titles within a section.
+      section: Inline form-group / navlist heading (visual rank H4). Small-cap. Use for form group labels, nav list headings.
+      caption: Annotation under a primary line — smaller + muted. Use for image captions, footnotes.
+      label: Form-control label (above an `<input-ui>` / `<select-ui>` etc). UI-sized + medium-weight. Use for field labels bound to form controls.
+      kicker: Eyebrow text above a `title`. UPPERCASE + small + tracking. Use for content eyebrows (NOT form labels — use `label` for those).
+      deck: Sub-title under a `title`. One-line lead, slightly larger than body. Use for the lead sentence after a title.
+      metric: Numeric KPI / big-number stat. Bold + large. Use for dashboard metric numbers.
+      code: Inline monospace code reference. Use for inline code within prose.
 events: {}
 slots: {}
 states:

package/components/textarea/textarea.css

@@ -32,7 +32,7 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
 
     /* ── State ── */
     --textarea-bg-hover:        var(--a-ui-bg-hover);
-    --textarea-fg-hover:        var(--a-fg);
+    --textarea-fg-hover:        var(--a-ui-text-hover);
     --textarea-label-fg-focus:  var(--a-fg-subtle);
     --textarea-bg-disabled:     var(--a-ui-bg-disabled);
     --textarea-fg-disabled:     var(--a-ui-text-disabled);
@@ -73,7 +73,11 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     overflow-y: auto;
     cursor: text;
     outline: none;
-    transition: border-color var(--textarea-duration) var(--textarea-easing);
+    transition:
+      background   var(--textarea-duration) var(--textarea-easing),
+      border-color var(--textarea-duration) var(--textarea-easing),
+      color        var(--textarea-duration) var(--textarea-easing),
+      box-shadow   var(--textarea-duration) var(--textarea-easing);
   }
   /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]) [slot="text"]:focus {

package/components/toolbar/toolbar.css

@@ -104,7 +104,7 @@ toolbar-ui [data-toolbar-spillover-menu]:popover-open {
   min-width: 10rem;
   font-family: inherit;
   font-size: var(--a-ui-size);
-  color: var(--a-fg);
+  color: var(--toolbar-fg);
   /* Stack overflow items as rows (each row can be a group with its own gap). */
   display: flex;
   flex-direction: column;

package/components/upload/upload.css

@@ -64,7 +64,8 @@
     transition:
       border-color var(--upload-duration) var(--upload-easing),
       background var(--upload-duration) var(--upload-easing),
-      color var(--upload-duration) var(--upload-easing);
+      color var(--upload-duration) var(--upload-easing),
+      box-shadow var(--upload-duration) var(--upload-easing);
   }
   [data-dropzone]:hover {
     border-color: var(--upload-border-hover);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/colors/semantics.css

@@ -116,20 +116,21 @@
   --a-fg-muted:      var(--a-canvas-text-muted);
   --a-fg-strong:     var(--a-canvas-text-strong);
   --a-fg-hover:      var(--a-canvas-text-strong);
-  --a-fg-active:     var(--a-canvas-text-strong);
+  /* ADR-0028: --a-fg-{active,invalid} retired (zero consumers). Use
+     `--a-ui-text-active` / `--a-ui-text-invalid` for form-control state,
+     or define a per-primitive `--<comp>-fg-{active,invalid}` token. */
   --a-fg-selected:   var(--a-canvas-text-strong);
   --a-fg-disabled:   var(--a-canvas-text-disabled);
-  --a-fg-invalid:    var(--a-danger-text);
   --a-fg-inverse:    var(--a-canvas-text-inverse);
 
   --a-border:          var(--a-canvas-border);
   --a-border-subtle:   var(--a-canvas-border-subtle);
   --a-border-strong:   var(--a-canvas-border-strong);
   --a-border-hover:    var(--a-canvas-border-strong);
-  --a-border-active:   var(--a-accent-border);
-  --a-border-selected: var(--a-accent-border);
-  --a-border-disabled: var(--a-canvas-border-subtle);
-  --a-border-invalid:  var(--a-danger-border);
+  /* ADR-0028: --a-border-{active,selected,disabled,invalid} retired (zero
+     consumers). Per-primitive `--<comp>-border-{state}` is the override
+     surface; `--a-focus-ring` carries focus-active borders for form
+     controls. */
 
   /* ══════════════════════════════════════════════════════════════
      ACCENT — Interactive, links, focus (source for --a-primary-*)
@@ -172,23 +173,12 @@
   --a-primary-bg:           var(--a-accent-strong);
   --a-primary-bg-hover:     var(--a-accent-hover);
   --a-primary-bg-active:    var(--a-accent-active);
-  --a-primary-bg-selected:  var(--a-accent-selected);
-  --a-primary-bg-disabled:  var(--a-accent-muted);
-  --a-primary-bg-invalid:   var(--a-danger-muted);
 
   --a-primary-fg:           var(--a-accent-05-tint);
   --a-primary-fg-hover:     var(--a-accent-text-strong);
-  --a-primary-fg-active:    var(--a-accent-text-strong);
-  --a-primary-fg-selected:  var(--a-accent-text-strong);
-  --a-primary-fg-disabled:  var(--a-accent-text-disabled);
-  --a-primary-fg-invalid:   var(--a-danger-text);
 
   --a-primary-border:           var(--a-accent-border);
   --a-primary-border-hover:     var(--a-accent-border-strong);
-  --a-primary-border-active:    var(--a-accent-border-strong);
-  --a-primary-border-selected:  var(--a-accent-border-strong);
-  --a-primary-border-disabled:  var(--a-accent-border-subtle);
-  --a-primary-border-invalid:   var(--a-danger-border);
 
   /* Legacy shorthand — keep until all components migrate to --a-primary-* */
   --a-primary:       var(--a-primary-bg);
@@ -200,16 +190,9 @@
   --a-accent-bg:           var(--a-primary-bg);
   --a-accent-bg-hover:     var(--a-primary-bg-hover);
   --a-accent-bg-active:    var(--a-primary-bg-active);
-  --a-accent-bg-selected:  var(--a-primary-bg-selected);
-  --a-accent-bg-disabled:  var(--a-primary-bg-disabled);
-  --a-accent-bg-invalid:   var(--a-primary-bg-invalid);
 
   --a-accent-fg:           var(--a-primary-fg);
   --a-accent-fg-hover:     var(--a-primary-fg-hover);
-  --a-accent-fg-active:    var(--a-primary-fg-active);
-  --a-accent-fg-selected:  var(--a-primary-fg-selected);
-  --a-accent-fg-disabled:  var(--a-primary-fg-disabled);
-  --a-accent-fg-invalid:   var(--a-primary-fg-invalid);
 
   /* accent border is already defined at L2 (--a-accent-border*);
      L3 matches L2 since both resolve to the same scheme-aware value. */
@@ -239,24 +222,12 @@
   /* L3 — Brand surface role matrix */
   --a-brand-bg:           var(--a-brand-strong);
   --a-brand-bg-hover:     var(--a-brand-hover);
-  --a-brand-bg-active:    var(--a-brand-active);
-  --a-brand-bg-selected:  var(--a-brand-selected);
-  --a-brand-bg-disabled:  var(--a-brand-muted);
-  --a-brand-bg-invalid:   var(--a-danger-muted);
 
   --a-brand-fg:           var(--a-brand-text-strong);
   --a-brand-fg-hover:     var(--a-brand-text-strong);
-  --a-brand-fg-active:    var(--a-brand-text-strong);
-  --a-brand-fg-selected:  var(--a-brand-text-strong);
-  --a-brand-fg-disabled:  var(--a-brand-text-disabled);
-  --a-brand-fg-invalid:   var(--a-danger-text);
 
   /* L3 border state matrix — rest state is --a-brand-border (L2 above). */
   --a-brand-border-hover:    var(--a-brand-border-strong);
-  --a-brand-border-active:   var(--a-brand-border-strong);
-  --a-brand-border-selected: var(--a-brand-border-strong);
-  --a-brand-border-disabled: var(--a-brand-border-subtle);
-  --a-brand-border-invalid:  var(--a-danger-border);
 
   /* ══════════════════════════════════════════════════════════════
      INFO
@@ -283,24 +254,12 @@
   /* L3 — Info surface role matrix */
   --a-info-bg:           var(--a-info-strong);
   --a-info-bg-hover:     var(--a-info-hover);
-  --a-info-bg-active:    var(--a-info-active);
-  --a-info-bg-selected:  var(--a-info-selected);
-  --a-info-bg-disabled:  var(--a-info-muted);
-  --a-info-bg-invalid:   var(--a-danger-muted);
 
   --a-info-fg:           var(--a-info-text-strong);
   --a-info-fg-hover:     var(--a-info-text-strong);
-  --a-info-fg-active:    var(--a-info-text-strong);
-  --a-info-fg-selected:  var(--a-info-text-strong);
-  --a-info-fg-disabled:  var(--a-info-text-disabled);
-  --a-info-fg-invalid:   var(--a-danger-text);
 
   /* L3 border state matrix — rest state is --a-info-border (L2 above). */
   --a-info-border-hover:    var(--a-info-border-strong);
-  --a-info-border-active:   var(--a-info-border-strong);
-  --a-info-border-selected: var(--a-info-border-strong);
-  --a-info-border-disabled: var(--a-info-border-subtle);
-  --a-info-border-invalid:  var(--a-danger-border);
 
   /* ══════════════════════════════════════════════════════════════
      SUCCESS
@@ -327,24 +286,12 @@
   /* L3 — Success surface role matrix */
   --a-success-bg:           var(--a-success-strong);
   --a-success-bg-hover:     var(--a-success-hover);
-  --a-success-bg-active:    var(--a-success-active);
-  --a-success-bg-selected:  var(--a-success-selected);
-  --a-success-bg-disabled:  var(--a-success-muted);
-  --a-success-bg-invalid:   var(--a-danger-muted);
 
   --a-success-fg:           var(--a-success-text-strong);
   --a-success-fg-hover:     var(--a-success-text-strong);
-  --a-success-fg-active:    var(--a-success-text-strong);
-  --a-success-fg-selected:  var(--a-success-text-strong);
-  --a-success-fg-disabled:  var(--a-success-text-disabled);
-  --a-success-fg-invalid:   var(--a-danger-text);
 
   /* L3 border state matrix — rest state is --a-success-border (L2 above). */
   --a-success-border-hover:    var(--a-success-border-strong);
-  --a-success-border-active:   var(--a-success-border-strong);
-  --a-success-border-selected: var(--a-success-border-strong);
-  --a-success-border-disabled: var(--a-success-border-subtle);
-  --a-success-border-invalid:  var(--a-danger-border);
 
   /* ══════════════════════════════════════════════════════════════
      WARNING
@@ -372,24 +319,12 @@
   /* L3 — Warning surface role matrix */
   --a-warning-bg:           var(--a-warning-strong);
   --a-warning-bg-hover:     var(--a-warning-hover);
-  --a-warning-bg-active:    var(--a-warning-active);
-  --a-warning-bg-selected:  var(--a-warning-selected);
-  --a-warning-bg-disabled:  var(--a-warning-muted);
-  --a-warning-bg-invalid:   var(--a-danger-muted);
 
   --a-warning-fg:           var(--a-warning-text-strong);
   --a-warning-fg-hover:     var(--a-warning-text-strong);
-  --a-warning-fg-active:    var(--a-warning-text-strong);
-  --a-warning-fg-selected:  var(--a-warning-text-strong);
-  --a-warning-fg-disabled:  var(--a-warning-text-disabled);
-  --a-warning-fg-invalid:   var(--a-danger-text);
 
   /* L3 border state matrix — rest state is --a-warning-border (L2 above). */
   --a-warning-border-hover:    var(--a-warning-border-strong);
-  --a-warning-border-active:   var(--a-warning-border-strong);
-  --a-warning-border-selected: var(--a-warning-border-strong);
-  --a-warning-border-disabled: var(--a-warning-border-subtle);
-  --a-warning-border-invalid:  var(--a-danger-border);
 
   /* ══════════════════════════════════════════════════════════════
      DANGER
@@ -418,24 +353,12 @@
   /* L3 — Danger surface role matrix */
   --a-danger-bg:           var(--a-danger-strong);
   --a-danger-bg-hover:     var(--a-danger-hover);
-  --a-danger-bg-active:    var(--a-danger-active);
-  --a-danger-bg-selected:  var(--a-danger-selected);
-  --a-danger-bg-disabled:  var(--a-danger-muted);
-  --a-danger-bg-invalid:   var(--a-danger-muted);
 
   --a-danger-fg:           var(--a-danger-text-strong);
   --a-danger-fg-hover:     var(--a-danger-text-strong);
-  --a-danger-fg-active:    var(--a-danger-text-strong);
-  --a-danger-fg-selected:  var(--a-danger-text-strong);
-  --a-danger-fg-disabled:  var(--a-danger-text-disabled);
-  --a-danger-fg-invalid:   var(--a-danger-text);
 
   /* L3 border state matrix — rest state is --a-danger-border (L2 above). */
   --a-danger-border-hover:    var(--a-danger-border-strong);
-  --a-danger-border-active:   var(--a-danger-border-strong);
-  --a-danger-border-selected: var(--a-danger-border-strong);
-  --a-danger-border-disabled: var(--a-danger-border-subtle);
-  --a-danger-border-invalid:  var(--a-danger-border);
 
   /* ══════════════════════════════════════════════════════════════
      BUCKETS — sequential 5-step ramp per family for data-vis consumers

package/styles/typography.css

@@ -584,7 +584,7 @@
 
 /* ── Mark — system highlight tokens ── */
 :where(mark) {
-  background: var(--a-highlight-default);
+  background: var(--a-highlight);
   color: var(--a-highlight-text);
   padding-inline: 0.125em;
   border-radius: 0.125em;