@adia-ai/web-components 0.8.39 → 0.8.40

package/components/rating/rating.css

@@ -32,7 +32,7 @@ rating-ui:hover [data-rating-symbol] {
     gap: var(--rating-gap);
     cursor: pointer;
     user-select: none;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   :scope[readonly],

package/components/richtext/richtext.css

@@ -164,7 +164,7 @@
     font-weight: var(--richtext-h4-weight);
     color: var(--richtext-fg-muted);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--a-font-tracking-wide);
     margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
   }
 
@@ -173,7 +173,7 @@
     font-weight: var(--richtext-h4-weight);
     color: var(--richtext-fg-muted);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--a-font-tracking-wider);
     margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
   }
 
@@ -212,7 +212,7 @@
     padding: var(--richtext-pre-inset);
     overflow-x: auto;
     font-size: var(--richtext-code-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     margin: var(--richtext-pre-my) 0;
   }
 

package/components/segment/segment.css

@@ -23,9 +23,10 @@ segment-ui[selected] {
        `line-height: 1` is deliberate, but the label's ::after clips to its
        own line box, so inheriting 1 makes half-leading negative and shears
        descenders (g/j/p/q/y, parentheses) by ~0.93px at the default size —
-       gh#906. Snug (1.3) contains the font's content box at every [size];
-       mirrors --button-label-line-height. */
-    --segment-label-line-height: var(--a-leading-snug);
+       gh#906. Normal (1.35) contains the font's content box at every
+       [size]; mirrors --button-label-line-height. Value-nearest migration
+       from the retired --a-leading-snug (1.3) — ADR-0052. */
+    --segment-label-line-height: var(--a-font-leading-normal);
 
     /* ── Colors ── */
     --segment-fg:              var(--a-ui-text-subtle);
@@ -60,7 +61,7 @@ segment-ui[selected] {
     font-family: var(--segment-font-family);
     font-size: var(--segment-font-size);
     font-weight: var(--segment-font-weight);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     color: var(--segment-fg);
     white-space: nowrap;
     overflow: hidden;

package/components/select/select.css

@@ -91,7 +91,7 @@
     border: 1px solid var(--select-border);
     border-radius: var(--select-radius);
     background: var(--select-bg);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     cursor: pointer;
     /* Match every property the hover / focus / invalid states change. */
     transition:
@@ -130,7 +130,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     --a-icon-size: var(--select-font-size);
     color: var(--select-fg-muted);
   }
@@ -414,7 +414,7 @@ select-ui [role="group"] [slot="group-label"] {
   font-weight: var(--a-ui-weight);
   color: var(--select-fg-muted);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--a-font-tracking-wide);
   white-space: nowrap;
 }
 

package/components/spinner/spinner.css

@@ -178,7 +178,7 @@
       align-items: center;
       justify-content: center;
       font: inherit;
-      line-height: 1;
+      line-height: var(--a-font-leading-none);
       text-align: center;
       color: currentColor;
     }

package/components/stat/stat.css

@@ -171,7 +171,7 @@
     grid-area: label;
     font-size: var(--stat-label-size);
     color: var(--stat-label-fg);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -185,7 +185,7 @@
     align-items: center;
     gap: 0.25em;
     font-size: var(--stat-change-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     justify-self: start;
   }
 
@@ -195,7 +195,7 @@
     font-size: var(--stat-value-size);
     font-weight: var(--stat-value-weight);
     color: var(--stat-value-fg);
-    line-height: 1.2;
+    line-height: var(--a-font-leading-snug);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;

package/components/step-progress/step-progress.css

@@ -46,7 +46,7 @@
   [slot="caption"] {
     color: var(--step-progress-caption-fg);
     font-size: var(--step-progress-caption-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
   }
 
   [slot="caption"][hidden] {

package/components/stepper/stepper.css

@@ -236,7 +236,7 @@
     display: block;
     font-weight: var(--stepper-item-label-weight);
     font-size: var(--stepper-item-label-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     color: var(--stepper-item-label-fg);
     min-width: 0;
     overflow-wrap: break-word;
@@ -247,7 +247,7 @@
     margin-top: var(--stepper-item-offset-xs);
     color: var(--stepper-item-desc-fg);
     font-size: var(--stepper-item-desc-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
   }
 
   :scope [slot]:empty {

package/components/swatch/swatch.css

@@ -63,7 +63,7 @@
     min-width: 0;
     color: var(--swatch-label-fg);
     font-size: var(--swatch-label-size);
-    line-height: 1.2;
+    line-height: var(--a-font-leading-snug);
     vertical-align: baseline;
   }
 
@@ -238,7 +238,7 @@
     background: var(--swatch-badge-bg);
     color: var(--swatch-badge-fg);
     font-size: var(--swatch-badge-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     border-radius: var(--swatch-badge-radius);
     box-shadow: 0 0 0 1px color-mix(in oklab, var(--md-sys-color-neutral-outline-variant) 60%, transparent);
   }

package/components/table/table.a2ui.json

@@ -24,16 +24,6 @@
       "description": "JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data=\"[…]\"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute.",
       "$ref": "common_types.json#/$defs/DynamicObjectList"
     },
-    "density": {
-      "description": "Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows.",
-      "type": "string",
-      "enum": [
-        "compact",
-        "standard",
-        "comfortable"
-      ],
-      "default": "standard"
-    },
     "expandable": {
       "description": "Enable row expansion",
       "type": "boolean",

package/components/table/table.class.js

@@ -21,8 +21,11 @@
  *   sortable   — enable column sorting on header click
  *   selectable — enable row selection via checkboxes
  *   striped    — alternate row background
- *   density    — 'compact' | 'standard' | 'comfortable'
  *   valign     — 'center' (default) | 'top' — body-cell vertical alignment (gh#505)
+ *
+ * table-ui has no local `density` prop (ADR-0054) — it converges onto the
+ * ambient global [density="compact"|"spacious"] attribute; --table-py/-px
+ * already derive from --a-space-* steps, which --a-density scales.
  *   paginate   — rows per page (0 = no pagination)
  *   loading    — show loading overlay
  *   search     — global search filter string
@@ -118,7 +121,6 @@ export class UITable extends UIElement {
     frameless:  { type: Boolean, default: false, reflect: true },
     wrap:       { type: Boolean, default: false, reflect: true },
     raw:        { type: Boolean, default: false, reflect: true },
-    density:    { type: String,  default: 'standard', reflect: true },
     paginate:   { type: Number,  default: 0,     reflect: true },
     loading:    { type: Boolean, default: false, reflect: true },
     search:     { type: String,  default: '',    reflect: true },
@@ -294,7 +296,6 @@ export class UITable extends UIElement {
       columnWidths: Object.fromEntries(this.#columnWidths),
       hiddenColumns: this.#columns.filter(c => c.hidden).map(c => c.key),
       page: this.#page,
-      density: this.density,
     };
   }
 
@@ -319,7 +320,6 @@ export class UITable extends UIElement {
       }
     }
     if (state.page != null) this.#page = state.page;
-    if (state.density) this.density = state.density;
     this.#requestRender();
   }
 

package/components/table/table.css

@@ -463,14 +463,11 @@
 
   /* ═══════ Density ═══════ */
 
-  :scope[density="compact"] {
-    --table-py: var(--a-space-1);
-    --table-px: var(--a-space-2);
-  }
-
-  :scope[density="comfortable"] {
-    --table-py: var(--a-space-4);
-  }
+  /* No local override (ADR-0054 convergence) — --table-py/-px above already
+     derive from --a-space-* steps, which the ambient global
+     [density="compact"|"spacious"] attribute already scales via
+     --a-density. Do not reintroduce a component-local :scope[density=…]
+     block; that would re-shadow the global grammar (ADR-0053). */
 
   /* ═══════ Pinned cells ═══════ */
 
@@ -744,7 +741,7 @@
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
     border-top: 2px solid var(--table-agg-border);
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
     font-size: var(--table-agg-size);
     color: var(--table-fg-secondary);
   }

package/components/table/table.d.ts

@@ -90,8 +90,6 @@ export class UITable extends UIElement {
   columns: string;
   /** JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute. */
   data: string;
-  /** Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows. */
-  density: 'compact' | 'standard' | 'comfortable';
   /** Enable row expansion */
   expandable: boolean;
   /** Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance. Note: `<card-ui><section bleed>` already drops a direct-child table-ui's chrome automatically (card.css, gh#796) — `frameless`/`raw` on the instance still applies and is honored, but is no longer required just to avoid the doubled-edge look in that composition. */

package/components/table/table.yaml

@@ -36,15 +36,6 @@ props:
       type: object
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
-  density:
-    description: Controls cell padding and row height. 'compact' for dense data, 'standard' for default
-      spacing, 'comfortable' for spacious rows.
-    type: string
-    default: standard
-    enum:
-      - compact
-      - standard
-      - comfortable
   expandable:
     description: Enable row expansion
     type: boolean

package/components/table-toolbar/table-toolbar.css

@@ -82,7 +82,7 @@
     font-size: var(--table-toolbar-title-size);
     font-weight: var(--table-toolbar-title-weight);
     color: var(--table-toolbar-title-fg);
-    line-height: 1.2;
+    line-height: var(--a-font-leading-snug);
   }
 
   [data-count-badge][hidden] { display: none; }

package/components/tabs/tabs.css

@@ -138,7 +138,7 @@
     /* font-family floor — see segment.css rationale. */
     font-family: var(--tabs-font-family);
     font-size: var(--tabs-font-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     cursor: pointer;
     user-select: none;
     white-space: nowrap;

package/components/tag/tag.css

@@ -154,8 +154,8 @@ tag-ui[removable]:not([disabled]):hover {
     /* font-family floor — see segment.css rationale. */
     font-family: var(--tag-font-family);
     font-size: var(--tag-font);
-    font-weight: 500;
-    line-height: 1;
+    font-weight: var(--a-weight-medium);
+    line-height: var(--a-font-leading-none);
     color: var(--tag-fg);
     background: var(--tag-bg);
     white-space: nowrap;

package/components/tags-input/tags-input.css

@@ -109,7 +109,7 @@
     color: var(--tags-input-fg);
     font: inherit;
     font-size: var(--tags-input-font-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     cursor: text;

package/components/textarea/textarea.css

@@ -75,7 +75,7 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     /* font-family floor — see segment.css rationale. */
     font-family: var(--textarea-font-family);
     font-size: var(--textarea-font-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     white-space: pre-wrap;
     word-break: break-word;
     overflow-y: auto;

package/components/time-picker/time-picker.css

@@ -42,7 +42,7 @@
     font-family: var(--time-picker-font-family, var(--a-font-family-ui));
     font-size: var(--time-picker-font-size);
     font-variant-numeric: tabular-nums;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     cursor: text;
     transition:
       border-color var(--time-picker-duration) var(--time-picker-easing),

package/components/timeline/timeline.css

@@ -309,7 +309,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     font-weight: var(--timeline-item-label-weight);
     font-size: var(--timeline-item-label-size);
     color: var(--timeline-item-label-fg);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     overflow-wrap: break-word;
     min-width: 0;
   }
@@ -323,7 +323,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     grid-row: 2;
     color: var(--timeline-item-desc-fg);
     font-size: var(--timeline-item-desc-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     margin-top: var(--a-space-0-5);
   }
 
@@ -333,7 +333,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     color: var(--timeline-item-time-fg);
     font-size: var(--timeline-item-time-size);
     font-variant-numeric: tabular-nums;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     white-space: nowrap;
     justify-self: end;
   }
@@ -356,7 +356,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     gap: var(--a-space-0-5);
     color: var(--timeline-item-outcome-fg);
     font-size: var(--timeline-item-desc-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
     animation: tl-fade var(--timeline-item-duration) var(--timeline-item-easing);
   }
 

package/components/toc/toc.css

@@ -59,7 +59,7 @@
     padding-inline: var(--toc-padding-inline);
     text-decoration: none;
     color: inherit;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     border-inline-start: 2px solid var(--toc-rule-inactive);
     transition:
       color  var(--a-duration-fast) var(--a-easing),

package/components/toggle-group/toggle-group.class.js

@@ -34,11 +34,8 @@ import { UIElement } from '../../core/element.js';
 // truth. ADR-0056 (gh#1303): the child's current-state surface is the
 // declared, reflected `selected` prop below, converging onto <segment-ui>'s
 // mechanism (yaml → catalog → generative grammar) instead of a private
-// stamp. `toggle-group-ui` also stamps the legacy `data-selected` attribute
-// on the same element in parallel — DEPRECATED, kept only because external
-// CSS may already target it as an undocumented hook; its removal rides the
-// 0.9.0 breaking wave. Don't set `selected` directly on an option; drive
-// the group's `value` instead.
+// stamp. Don't set `selected` directly on an option; drive the group's
+// `value` instead.
 
 export class UIToggleOption extends UIElement {
   static properties = {
@@ -110,13 +107,8 @@ export class UIToggleGroup extends UIElement {
       const isSelected = selected.has(optVal);
       // ADR-0056 (gh#1303): `selected` is the declared, reflected mechanism —
       // converges onto <segment-ui>'s convention (opt's own render() stamps
-      // aria-pressed from it). `data-selected` is stamped alongside it only
-      // as a DEPRECATED parallel hook for pre-existing external CSS; it no
-      // longer drives styling (toggle-group.css) and its removal rides the
-      // 0.9.0 breaking wave.
+      // aria-pressed from it).
       opt.selected = isSelected;
-      if (isSelected) opt.setAttribute('data-selected', '');
-      else opt.removeAttribute('data-selected');
     }
   }
 

package/components/toggle-group/toggle-group.css

@@ -10,9 +10,7 @@ toggle-option-ui:not([disabled]):hover {
 }
 
 /* ADR-0056 (gh#1303): converged onto <segment-ui>'s declared, reflected
-   [selected] prop, set by <toggle-group-ui> (toggle-group.class.js). The
-   parent also stamps the legacy `data-selected` attribute in parallel —
-   DEPRECATED, no longer styled here; removal rides the 0.9.0 breaking wave. */
+   [selected] prop, set by <toggle-group-ui> (toggle-group.class.js). */
 toggle-option-ui[selected] {
   --toggle-option-bg: var(--toggle-option-selected-bg);
   --toggle-option-fg: var(--toggle-option-selected-fg);

package/components/toggle-group/toggle-group.d.ts

@@ -41,8 +41,7 @@ export class UIToggleOption extends UIElement {
   /** Whether this option is currently selected. Managed by the parent
 <toggle-group-ui> container (ADR-0056) — don't set directly; the group's
 `value` is the single source of truth. Converges onto <segment-ui>'s
-declared reflected-prop mechanism (was previously a private
-`data-selected` stamp with no declared API surface). */
+declared reflected-prop mechanism. */
   selected: boolean;
   /** Visible label text. */
   text: string;

package/components/toggle-group/toggle-group.yaml

@@ -4,10 +4,7 @@
 # ADR-0056 (gh#1303): <toggle-option-ui>'s current-state surface converges
 # onto <segment-ui>'s declared, reflected `[selected]` prop (see
 # toggle-option.yaml). This container sets that prop, keeping `value` as the
-# single source of truth. It also stamps the legacy `data-selected`
-# attribute on each option in parallel — DEPRECATED (undocumented external
-# CSS may target it); its removal rides the 0.9.0 breaking wave, not this
-# change.
+# single source of truth.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIToggleGroup
 tag: toggle-group-ui

package/components/toggle-group/toggle-option.a2ui.json

@@ -27,7 +27,7 @@
       "default": ""
     },
     "selected": {
-      "description": "Whether this option is currently selected. Managed by the parent\n<toggle-group-ui> container (ADR-0056) — don't set directly; the group's\n`value` is the single source of truth. Converges onto <segment-ui>'s\ndeclared reflected-prop mechanism (was previously a private\n`data-selected` stamp with no declared API surface).",
+      "description": "Whether this option is currently selected. Managed by the parent\n<toggle-group-ui> container (ADR-0056) — don't set directly; the group's\n`value` is the single source of truth. Converges onto <segment-ui>'s\ndeclared reflected-prop mechanism.",
       "type": "boolean",
       "default": false
     },

package/components/toggle-group/toggle-option.yaml

@@ -5,10 +5,7 @@
 # + is registered alongside UIToggleGroup.
 #
 # ADR-0056 (gh#1303): `selected` converges onto <segment-ui>'s declared,
-# parent-managed, reflected-prop convention. `<toggle-group-ui>` also stamps
-# the legacy `data-selected` attribute in parallel — DEPRECATED, kept only
-# because it was an undocumented hook external CSS may already target;
-# removal rides the 0.9.0 breaking wave (see toggle-group.yaml + CHANGELOG).
+# parent-managed, reflected-prop convention.
 
 # Child component of <toggle-group-ui>. Surface only inside that parent.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
@@ -43,8 +40,7 @@ props:
       Whether this option is currently selected. Managed by the parent
       <toggle-group-ui> container (ADR-0056) — don't set directly; the group's
       `value` is the single source of truth. Converges onto <segment-ui>'s
-      declared reflected-prop mechanism (was previously a private
-      `data-selected` stamp with no declared API surface).
+      declared reflected-prop mechanism.
     type: boolean
     default: false
     reflect: true

package/components/tooltip/tooltip.css

@@ -30,7 +30,7 @@
   color: var(--md-sys-color-neutral-background);
   font-family: var(--a-font-family);
   font-size: var(--a-ui-sm);
-  line-height: 1.4;
+  line-height: var(--a-font-leading-normal);
   border: none;
   border-radius: var(--a-radius-full);
   box-shadow: var(--a-shadow-sm);

package/components/tour/tour.css

@@ -112,14 +112,14 @@
 [data-tour-popover] [data-tour-title] {
   margin: 0;
   font-size: var(--a-text-lg);
-  font-weight: 600;
+  font-weight: var(--a-weight-semibold);
 }
 
 [data-tour-popover] [data-tour-body] {
   margin: 0 0 var(--a-space-4);
   font-size: var(--a-ui-size);
   color: var(--md-sys-color-neutral-on-surface);
-  line-height: 1.5;
+  line-height: var(--a-font-leading-relaxed);
 }
 
 [data-tour-popover] [data-tour-footer] {

package/components/tree/tree.css

@@ -141,7 +141,7 @@
     background: var(--tree-badge-bg, transparent);
     padding: 0 var(--tree-badge-px, var(--a-space-1));
     border-radius: var(--tree-badge-radius, var(--a-radius-sm));
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     font-variant-numeric: tabular-nums;
   }
   [slot="badge"]:empty {

package/custom-elements.json

@@ -2028,12 +2028,12 @@
               "description": "Hide value labels"
             },
             {
-              "name": "radius",
+              "name": "corner-radius",
               "type": {
                 "text": "number"
               },
               "default": "null",
-              "description": "Bar corner radius (null = let CSS tokens decide)"
+              "description": "Bar corner radius in px (null = let CSS tokens decide)"
             },
             {
               "name": "size",
@@ -7837,7 +7837,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Inline QR code generator — renders a scannable code as inline SVG. Two modes: **A. Auto-encode (default).** Set `[value]` to a string (URL, plain text, share link, 2FA secret). The component encodes the data with the built-in zero-deps QR encoder (byte mode, ECC level configurable, versions 1–10 up to ~150 byte chars) and renders an SVG. **B. Bring-your-own matrix.** Set `[matrix]` to a JSON string of a 2-D 0/1 array (`[[1,0,1,...],[...],...]`). The component renders the supplied matrix directly without invoking its own encoder. Use this when you need versions 11–40, kanji/alphanumeric mode, or any encoder feature beyond the built-in. When both `[value]` and `[matrix]` are set, the matrix wins (BYO override). Output is a single `<svg>` with `viewBox=\"0 0 N N\"`. Crisp-edges rendering preserves the scannable cell boundaries at any size. Sizing is controlled by the `[size]` prop (host CSS-pixel dimension); internal cell size is computed from `size / (matrix-size + 2 · margin)`. ARIA: `role=\"img\"` with `aria-label` (default \"QR code\" or the `[label]` prop).",
+          "description": "Inline QR code generator — renders a scannable code as inline SVG. Two modes: **A. Auto-encode (default).** Set `[value]` to a string (URL, plain text, share link, 2FA secret). The component encodes the data with the built-in zero-deps QR encoder (byte mode, ECC level configurable, versions 1–10 up to ~150 byte chars) and renders an SVG. **B. Bring-your-own matrix.** Set `[matrix]` to a JSON string of a 2-D 0/1 array (`[[1,0,1,...],[...],...]`). The component renders the supplied matrix directly without invoking its own encoder. Use this when you need versions 11–40, kanji/alphanumeric mode, or any encoder feature beyond the built-in. When both `[value]` and `[matrix]` are set, the matrix wins (BYO override). Output is a single `<svg>` with `viewBox=\"0 0 N N\"`. Crisp-edges rendering preserves the scannable cell boundaries at any size. Sizing is controlled by the `[size]` prop (host CSS-pixel dimension); internal cell size is computed from `size / (matrix-size + 2 · quiet-zone)`. ARIA: `role=\"img\"` with `aria-label` (default \"QR code\" or the `[label]` prop).",
           "name": "UIQRCode",
           "tagName": "qr-code-ui",
           "superclass": {
@@ -7865,7 +7865,7 @@
                 "text": "number"
               },
               "default": "200",
-              "description": "Host display size in CSS pixels (width and height; the SVG is always square). Default 200. Internal cell size is computed from this divided by `matrix-size + 2·margin`."
+              "description": "Host display size in CSS pixels (width and height; the SVG is always square). Default 200. Internal cell size is computed from this divided by `matrix-size + 2·quiet-zone`."
             },
             {
               "name": "error-correction",
@@ -7876,12 +7876,12 @@
               "description": "Error-correction level (auto-encode mode only). `L` (7% recovery), `M` (15%, default), `Q` (25%), `H` (30%). Higher levels recover from more damage at the cost of QR-version size growth."
             },
             {
-              "name": "margin",
+              "name": "quiet-zone",
               "type": {
                 "text": "number"
               },
               "default": "4",
-              "description": "Quiet zone in cells around the QR pattern. QR spec requires a minimum 4-cell margin for reliable scanning; smaller values may not scan on some devices. Default `4`."
+              "description": "Quiet zone in cells around the QR pattern. QR spec requires a minimum 4-cell quiet zone for reliable scanning; smaller values may not scan on some devices. Default `4`. (Renamed from `[margin]` — that name collided with the framework's global `[margin]` Scale attribute; `margin` on `qr-code-ui` now means the global spacing attribute, per ADR-0053.)"
             },
             {
               "name": "color",
@@ -10376,14 +10376,6 @@
               "default": "[]",
               "description": "JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data=\"[…]\"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute."
             },
-            {
-              "name": "density",
-              "type": {
-                "text": "string"
-              },
-              "default": "standard",
-              "description": "Controls cell padding and row height. 'compact' for dense data, 'standard' for default"
-            },
             {
               "name": "expandable",
               "type": {
@@ -11759,7 +11751,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this option is currently selected. Managed by the parent <toggle-group-ui> container (ADR-0056) — don't set directly; the group's `value` is the single source of truth. Converges onto <segment-ui>'s declared reflected-prop mechanism (was previously a private `data-selected` stamp with no declared API surface)."
+              "description": "Whether this option is currently selected. Managed by the parent <toggle-group-ui> container (ADR-0056) — don't set directly; the group's `value` is the single source of truth. Converges onto <segment-ui>'s declared reflected-prop mechanism."
             }
           ]
         }