@adia-ai/web-components 0.8.39 → 0.8.40

package/components/combobox/combobox.css

@@ -149,7 +149,7 @@
     color: var(--combobox-fg);
     font: inherit;
     font-size: var(--combobox-font-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     white-space: nowrap;
     overflow: hidden;
     /* Positioning context for the [data-empty]::before placeholder pseudo
@@ -322,7 +322,7 @@ combobox-ui [data-listbox] [role="group"] [data-group-label] {
   font-weight: var(--a-ui-weight);
   color: var(--a-ui-text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--a-font-tracking-wide);
   white-space: nowrap;
 }
 

package/components/command/command.css

@@ -111,7 +111,7 @@
     color: var(--command-fg);
     font-family: var(--command-font-family, var(--a-font-family-ui));
     font-size: var(--command-input-font-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     padding: 0;
     white-space: nowrap;
     overflow: hidden;
@@ -216,7 +216,7 @@
     font-weight: var(--command-group-font-weight);
     color: var(--command-group-fg);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: var(--a-font-tracking-wide);
     white-space: nowrap;
   }
 
@@ -255,7 +255,7 @@
     border-radius: var(--command-kbd-radius);
     font-family: inherit;
     font-size: inherit;
-    line-height: 1.6;
+    line-height: var(--a-font-leading-loose);
     color: var(--command-kbd-fg);
     background: var(--command-kbd-bg);
   }

package/components/date-range-picker/date-range-picker.css

@@ -119,7 +119,7 @@
        slot triplet. button-ui's natural alignment is `center`; our
        leading+text+trailing layout reads better as space-between. */
     justify-content: space-between;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     transition:
       border-color var(--date-range-picker-duration) var(--date-range-picker-easing),
       background   var(--date-range-picker-duration) var(--date-range-picker-easing);

package/components/datetime-picker/datetime-picker.css

@@ -77,7 +77,7 @@
   :scope [slot="trigger"] {
     min-width: var(--datetime-picker-trigger-min-width);
     justify-content: space-between;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
   /* A committed value bumps to --a-ui-text (bright), matching input-ui /
      select-ui / time-picker value color; the empty placeholder keeps

package/components/description-list/description-list.css

@@ -44,7 +44,7 @@
     font-size: var(--description-list-term-font-size);
     font-weight: var(--description-list-term-weight);
     color: var(--description-list-term-fg);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
 
   [data-dl-desc],
@@ -53,7 +53,7 @@
     font-size: var(--description-list-desc-font-size);
     font-weight: var(--description-list-desc-weight);
     color: var(--description-list-desc-fg);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
   }
 
   /* Pair separator: extra margin under each non-last dd so DD→DT (between

package/components/display-field/display-field.css

@@ -50,7 +50,7 @@
     color: var(--display-field-label-color);
     font-size: var(--display-field-label-size);
     font-weight: var(--display-field-label-weight);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
   }
 
@@ -67,7 +67,7 @@
     color: var(--display-field-value-color);
     font-size: var(--display-field-value-size);
     font-weight: var(--display-field-value-weight);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
   }
 
@@ -75,7 +75,7 @@
     grid-area: hint;
     color: var(--display-field-hint-color);
     font-size: var(--display-field-hint-size);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
   }
 

package/components/divider/divider.css

@@ -52,7 +52,7 @@
     font-size: var(--divider-label-font);
     color: var(--divider-label-fg);
     white-space: nowrap;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   /* ── Vertical ── */

package/components/drawer/drawer.css

@@ -244,7 +244,7 @@ drawer-ui [slot="panel"] > [slot="header"]:has(> :is([slot="description"], p, sm
 drawer-ui [slot="panel"] > [slot="header"] > :is([slot="heading"], h1, h2, h3, h4, h5, h6),
 drawer-ui [slot="panel"] > [slot="header"] > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
   grid-row: 1;
-  line-height: 1.3;
+  line-height: var(--a-font-leading-normal);
   margin: 0;
   font-size: var(--drawer-heading-size);
   font-weight: var(--drawer-heading-weight);
@@ -266,7 +266,7 @@ drawer-ui [slot="panel"] > [slot="header"]:not(:has(> [slot="icon"])) > :is([slo
 drawer-ui [slot="panel"] > [slot="header"] > :is([slot="description"], p, small) {
   grid-row: 2;
   grid-column: 1 / -1;
-  line-height: 1.4;
+  line-height: var(--a-font-leading-relaxed);
   margin: 0;
   font-size: var(--drawer-description-size);
   color: var(--drawer-description-fg);

package/components/drilldown/drilldown.css

@@ -230,7 +230,7 @@
     flex-direction: column;
     min-width: 0;
     flex: 1;
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
   [slot="label"] {
     overflow: hidden;
@@ -256,7 +256,7 @@
     border-radius: var(--drilldown-count-chip-radius);
     font-size: var(--drilldown-count-chip-font-size);
     font-variant-numeric: tabular-nums;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     background: var(--drilldown-count-chip-bg);
     color: var(--drilldown-count-chip-fg);
     white-space: nowrap;

package/components/empty-state/empty-state.css

@@ -44,14 +44,14 @@
     font-size: var(--empty-state-heading-size);
     font-weight: var(--empty-state-heading-weight);
     color: var(--empty-state-heading-fg);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
 
   /* ── Description ── */
   [slot="description"] {
     font-size: var(--empty-state-desc-size);
     color: var(--empty-state-desc-fg);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     max-width: 36ch;
   }
 

package/components/field/field.css

@@ -133,7 +133,7 @@
   :scope [slot="hint"],
   :scope [slot="error"] {
     grid-area: message;
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
   :scope [slot="hint"] {
     color: var(--field-hint-color);

package/components/heatmap/heatmap.css

@@ -53,7 +53,7 @@
 
   /* Title slot */
   :scope [slot="title"] {
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
     margin: 0;
   }
 
@@ -66,7 +66,7 @@
   }
 
   :scope [data-month-label] {
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   /* Grid of cells */

package/components/inline-message/inline-message.css

@@ -14,7 +14,7 @@
 
     /* ── Typography ── */
     --inline-message-font-size: var(--a-ui-sm);
-    --inline-message-line-height: var(--a-leading-snug);
+    --inline-message-line-height: var(--a-font-leading-normal);
   }
 
   :scope {

package/components/input/input.css

@@ -106,13 +106,14 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     /* font-family floor — see segment.css rationale. */
     font-family: var(--input-font-family);
     font-size: var(--input-font-size);
-    /* line-height: 1.4 (not 1) so descender-bearing glyphs (g, j, p, q, y)
-       have room inside [slot="text"]'s line box. With line-height: 1 the
+    /* line-height: normal (1.35, not 1) so descender-bearing glyphs
+       (g, j, p, q, y) have room inside [slot="text"]'s line box. With
+       line-height: 1 the
        line box equals the em-square and descenders extend below it; the
        overflow: hidden on [slot="text"] then clips them. The min-height
        still controls overall chrome height — align-items: center keeps the
        baseline centered regardless of line-height. */
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     cursor: text;
     /* Cover every property the hover / focus / invalid states change so
        the field doesn't half-snap (border slides, but bg/colour/ring snap). */
@@ -306,7 +307,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     flex-shrink: 0;
     color: var(--input-affix-fg);
     font-size: var(--input-font-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     user-select: none;
     pointer-events: none;
   }

package/components/integration-card/integration-card.css

@@ -97,7 +97,7 @@
     color: var(--integration-card-heading-fg);
     font-size: var(--integration-card-heading-size);
     font-weight: var(--integration-card-heading-weight);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -118,7 +118,7 @@
     margin: 0;
     color: var(--integration-card-description-fg);
     font-size: var(--integration-card-description-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
   }
   :scope > [data-integration-card-description][hidden] {
     display: none;
@@ -131,7 +131,7 @@
     margin: 0;
     color: var(--integration-card-description-fg);
     font-size: var(--integration-card-description-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
   }
 
   /* ── Error message ── */
@@ -139,7 +139,7 @@
     margin: 0;
     color: var(--integration-card-error-fg);
     font-size: var(--integration-card-error-size);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
   }
   :scope > [data-integration-card-error][hidden] {
     display: none;

package/components/kbd/kbd.css

@@ -43,7 +43,7 @@
     font-family: var(--kbd-font);
     font-size: var(--kbd-font-size);
     font-weight: var(--kbd-weight);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     color: var(--kbd-fg);
     background: var(--kbd-bg);
     border: 1px solid var(--kbd-border);

package/components/list/list.css

@@ -125,7 +125,7 @@
     row-gap: var(--list-item-gap-row);
     font-size: var(--list-item-font-size);
     color: var(--list-item-text-color);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     /* 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);
@@ -175,7 +175,7 @@
     grid-row: 2;
     color: var(--list-item-desc-color);
     font-size: var(--list-item-desc-font-size);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
   }
 
   /* When a [slot="action"] child is present, the grid becomes 3-column:

package/components/nav/nav.css

@@ -80,7 +80,7 @@
     font-weight: var(--nav-label-weight);
     color: var(--nav-label-fg);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--a-font-tracking-wider);
     white-space: nowrap;
     overflow: hidden;
   }
@@ -134,7 +134,7 @@
     font-weight: var(--nav-label-weight);
     color: var(--nav-label-fg);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--a-font-tracking-wider);
     white-space: nowrap;
     overflow: hidden;
   }

package/components/nav-group/nav-group.css

@@ -169,7 +169,7 @@
     background: var(--nav-group-badge-bg);
     padding: 1px var(--nav-group-badge-px);
     border-radius: var(--nav-group-badge-radius);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
   }
 
   [slot="header"] [slot="caret"] {
@@ -313,7 +313,7 @@ nav-group-ui [slot="popover-label"] {
   color: var(--nav-group-fg-muted);
   font-size: var(--a-ui-tiny);
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: var(--a-font-tracking-wider);
 }
 
 nav-group-ui [slot="popover"] [role="option"] {
@@ -364,7 +364,7 @@ nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] {
   font-weight: var(--a-weight-medium);
   color: var(--nav-group-fg-muted);
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: var(--a-font-tracking-wider);
   cursor: default;
   border-radius: 0;
 }

package/components/nav-item/nav-item.css

@@ -136,7 +136,7 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     background: var(--nav-item-badge-bg);
     padding: 1px var(--nav-item-badge-px);
     border-radius: var(--nav-item-badge-radius);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     margin-inline-start: auto;
   }
 
@@ -147,7 +147,7 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     border: 1px solid var(--nav-item-trailing-border);
     border-radius: var(--nav-item-trailing-radius);
     padding: 0 var(--nav-item-trailing-px);
-    line-height: 1.6;
+    line-height: var(--a-font-leading-loose);
     flex-shrink: 0;
   }
 

package/components/option-card/option-card.css

@@ -77,7 +77,7 @@ option-card-ui[checked] [slot="icon"] {
     --option-card-heading-size:           var(--a-ui-size);
     --option-card-desc-color:             var(--a-fg-muted);
     --option-card-desc-size:              var(--a-ui-sm);
-    --option-card-desc-line-height:       1.4;
+    --option-card-desc-line-height:       var(--a-font-leading-relaxed);
     --option-card-icon-color:             var(--md-sys-color-neutral-on-surface-variant);
     --option-card-icon-color-checked:     var(--a-fg-strong);
     --option-card-icon-size:              1.5rem;

package/components/otp-input/otp-input.css

@@ -56,7 +56,7 @@
     color: var(--otp-input-fg);
     font-family: var(--otp-input-font);
     font-size: var(--otp-input-font-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     outline: none;
     transition: border-color var(--otp-input-duration) var(--otp-input-easing);
     /* Hide number spinner */

package/components/page/page.css

@@ -183,7 +183,7 @@
   :scope > :where(header, header-ui) > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]),
   :scope > :where(header, header-ui) > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
     grid-row: 1;
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     margin: 0;
   }
 
@@ -210,7 +210,7 @@
   :scope > :where(header, header-ui) > :is(text-ui[variant="body"], text-ui[variant="caption"]):not([slot]) {
     grid-row: 2;
     grid-column: 1 / -1;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
     margin: 0;
   }
   :scope > :where(header, header-ui):has(> [slot="icon"]) > :is([slot="description"], p:not([slot]), small:not([slot])) { grid-column: 2 / -1; }

package/components/pagination/pagination.css

@@ -58,7 +58,7 @@
     font-size: var(--pagination-ellipsis-font);
     pointer-events: none;
     user-select: none;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   /* ── variant="button" — square 1:1 cells via outline button-ui ──

package/components/pane/pane.css

@@ -141,7 +141,7 @@
     color: var(--pane-section-header-fg);
     padding-bottom: var(--pane-col-gap);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--a-font-tracking-wider);
     font-weight: var(--pane-section-header-weight);
   }
 

package/components/progress-row/progress-row.css

@@ -31,7 +31,7 @@
     grid-area: label;
     font-size: var(--progress-row-label-size);
     color: var(--progress-row-label-fg);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -44,7 +44,7 @@
     color: var(--progress-row-meta-fg);
     font-variant-numeric: tabular-nums;
     justify-self: end;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
   }
 
   progress-ui {

package/components/qr-code/qr-code.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/QRCode.json",
   "title": "QRCode",
-  "description": "Inline QR code generator — renders a scannable code as inline SVG.\nTwo modes:\n\n**A. Auto-encode (default).** Set `[value]` to a string (URL, plain\ntext, share link, 2FA secret). The component encodes the data with\nthe built-in zero-deps QR encoder (byte mode, ECC level configurable,\nversions 1–10 up to ~150 byte chars) and renders an SVG.\n\n**B. Bring-your-own matrix.** Set `[matrix]` to a JSON string of a\n2-D 0/1 array (`[[1,0,1,...],[...],...]`). The component renders the\nsupplied matrix directly without invoking its own encoder. Use this\nwhen you need versions 11–40, kanji/alphanumeric mode, or any\nencoder feature beyond the built-in. When both `[value]` and\n`[matrix]` are set, the matrix wins (BYO override).\n\nOutput is a single `<svg>` with `viewBox=\"0 0 N N\"`. Crisp-edges\nrendering preserves the scannable cell boundaries at any size.\nSizing is controlled by the `[size]` prop (host CSS-pixel dimension);\ninternal cell size is computed from `size / (matrix-size + 2 ·\nmargin)`. ARIA: `role=\"img\"` with `aria-label` (default \"QR code\"\nor the `[label]` prop).\n",
+  "description": "Inline QR code generator — renders a scannable code as inline SVG.\nTwo modes:\n\n**A. Auto-encode (default).** Set `[value]` to a string (URL, plain\ntext, share link, 2FA secret). The component encodes the data with\nthe built-in zero-deps QR encoder (byte mode, ECC level configurable,\nversions 1–10 up to ~150 byte chars) and renders an SVG.\n\n**B. Bring-your-own matrix.** Set `[matrix]` to a JSON string of a\n2-D 0/1 array (`[[1,0,1,...],[...],...]`). The component renders the\nsupplied matrix directly without invoking its own encoder. Use this\nwhen you need versions 11–40, kanji/alphanumeric mode, or any\nencoder feature beyond the built-in. When both `[value]` and\n`[matrix]` are set, the matrix wins (BYO override).\n\nOutput is a single `<svg>` with `viewBox=\"0 0 N N\"`. Crisp-edges\nrendering preserves the scannable cell boundaries at any size.\nSizing is controlled by the `[size]` prop (host CSS-pixel dimension);\ninternal cell size is computed from `size / (matrix-size + 2 ·\nquiet-zone)`. ARIA: `role=\"img\"` with `aria-label` (default \"QR code\"\nor the `[label]` prop).\n",
   "type": "object",
   "allOf": [
     {
@@ -42,18 +42,18 @@
       "type": "string",
       "default": "QR code"
     },
-    "margin": {
-      "description": "Quiet zone in cells around the QR pattern. QR spec requires a\nminimum 4-cell margin for reliable scanning; smaller values may\nnot scan on some devices. Default `4`.\n",
-      "type": "number",
-      "default": 4
-    },
     "matrix": {
       "description": "BYO precomputed bit matrix as JSON — a 2-D array of 0/1\n(`[[1,0,...],[0,1,...],...]`). When set, the built-in encoder is\nbypassed and this matrix renders directly. Useful for QR variants\nthe built-in doesn't support (versions 11–40, alphanumeric mode,\nkanji, etc.) — bring your own encoder, pass the matrix here.\n",
       "type": "string",
       "default": ""
     },
+    "quietZone": {
+      "description": "Quiet zone in cells around the QR pattern. QR spec requires a\nminimum 4-cell quiet zone for reliable scanning; smaller values\nmay not scan on some devices. Default `4`. (Renamed from\n`[margin]` — that name collided with the framework's global\n`[margin]` Scale attribute; `margin` on `qr-code-ui` now means\nthe global spacing attribute, per ADR-0053.)\n",
+      "type": "number",
+      "default": 4
+    },
     "size": {
-      "description": "Host display size in CSS pixels (width and height; the SVG is\nalways square). Default 200. Internal cell size is computed from\nthis divided by `matrix-size + 2·margin`.\n",
+      "description": "Host display size in CSS pixels (width and height; the SVG is\nalways square). Default 200. Internal cell size is computed from\nthis divided by `matrix-size + 2·quiet-zone`.\n",
       "type": "number",
       "default": 200
     },
@@ -75,9 +75,9 @@
         "wrong": "<qr-code-ui value=\"https://very.long.url.that.exceeds.150.bytes.of.utf8.encoded.length...\"></qr-code-ui>\n"
       },
       {
-        "fix": "<qr-code-ui value=\"...\" margin=\"4\"></qr-code-ui>\n",
-        "why": "Zero margin breaks scanning. QR spec requires a 4-cell quiet\nzone for reliable detection.\n",
-        "wrong": "<qr-code-ui value=\"...\" margin=\"0\"></qr-code-ui>\n"
+        "fix": "<qr-code-ui value=\"...\" quiet-zone=\"4\"></qr-code-ui>\n",
+        "why": "Zero quiet zone breaks scanning. QR spec requires a 4-cell quiet\nzone for reliable detection.\n",
+        "wrong": "<qr-code-ui value=\"...\" quiet-zone=\"0\"></qr-code-ui>\n"
       }
     ],
     "category": "display",

package/components/qr-code/qr-code.class.js

@@ -33,7 +33,7 @@ export class UIQRCode extends UIElement {
     matrix:          { type: String, default: '',       reflect: true },
     size:            { type: Number, default: 200,      reflect: true },
     errorCorrection: { type: String, default: 'M',      reflect: true, attribute: 'error-correction' },
-    margin:          { type: Number, default: 4,        reflect: true },
+    quietZone:       { type: Number, default: 4,        reflect: true, attribute: 'quiet-zone' },
     color:           { type: String, default: '',       reflect: true },
     background:      { type: String, default: '',       reflect: true },
     label:           { type: String, default: 'QR code', reflect: true },
@@ -91,7 +91,7 @@ export class UIQRCode extends UIElement {
     // Cheap idempotence: compute a signature of inputs, skip re-render
     // if nothing changed (encoding is non-trivial — version selection +
     // RS ECC + 8 mask evaluations).
-    const sig = `${this.value}|${this.matrix}|${this.size}|${this.errorCorrection}|${this.margin}|${this.color}|${this.background}`;
+    const sig = `${this.value}|${this.matrix}|${this.size}|${this.errorCorrection}|${this.quietZone}|${this.color}|${this.background}`;
     if (sig === this.#lastSig && this.querySelector('svg')) return;
     this.#lastSig = sig;
 
@@ -106,7 +106,7 @@ export class UIQRCode extends UIElement {
 
     const svg = matrixToSVG(matrix, {
       cellSize: 8, // arbitrary internal unit; host CSS controls actual size via [size]
-      margin: Number.isFinite(this.margin) ? this.margin : 4,
+      margin: Number.isFinite(this.quietZone) ? this.quietZone : 4,
       // Hardcoded fallback to black-on-white — the scannable convention.
       // Theme-aware `currentColor` produces light-on-dark in dark mode,
       // which most phone cameras (iPhone Camera in particular) refuse to

package/components/qr-code/qr-code.d.ts

@@ -18,7 +18,7 @@ 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"
+quiet-zone)`. ARIA: `role="img"` with `aria-label` (default "QR code"
 or the `[label]` prop).
 
  *
@@ -58,11 +58,6 @@ from more damage at the cost of QR-version size growth.
 better AT context (e.g. "Share link QR code", "2FA setup QR").
  */
   label: string;
-  /** 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`.
- */
-  margin: number;
   /** BYO precomputed bit matrix as JSON — a 2-D array of 0/1
 (`[[1,0,...],[0,1,...],...]`). When set, the built-in encoder is
 bypassed and this matrix renders directly. Useful for QR variants
@@ -70,9 +65,17 @@ the built-in doesn't support (versions 11–40, alphanumeric mode,
 kanji, etc.) — bring your own encoder, pass the matrix here.
  */
   matrix: string;
+  /** 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.)
+ */
+  quietZone: number;
   /** 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`.
+this divided by `matrix-size + 2·quiet-zone`.
  */
   size: number;
   /** The string to encode (URL / text / share link / 2FA seed). When

package/components/qr-code/qr-code.yaml

@@ -25,7 +25,7 @@ description: |
   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"
+  quiet-zone)`. ARIA: `role="img"` with `aria-label` (default "QR code"
   or the `[label]` prop).
 props:
   value:
@@ -50,7 +50,7 @@ props:
     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`.
+      this divided by `matrix-size + 2·quiet-zone`.
     type: number
     default: 200
     reflect: true
@@ -64,14 +64,18 @@ props:
     enum: [L, M, Q, H]
     reflect: true
     attribute: error-correction
-  margin:
+  quietZone:
     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`.
+      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.)
     type: number
     default: 4
     reflect: true
+    attribute: quiet-zone
   color:
     description: |
       Foreground (dark-cell) color. Any CSS color string (hex, rgb,
@@ -125,7 +129,7 @@ a2ui:
       reason: "Encoder capacity contract."
     - rule: "When QR sits over a non-white surface, set [background] to a solid color. White-on-image QR backgrounds are unreliable for scanners — quiet-zone contrast against the dark cells is the load-bearing visual."
       reason: "Scannability constraint."
-    - rule: "The [margin] (quiet zone) defaults to 4 cells per QR spec. Smaller margins may scan on some devices but not others; do not go below 2."
+    - rule: "The [quiet-zone] defaults to 4 cells per QR spec. Smaller values may scan on some devices but not others; do not go below 2."
       reason: "Quiet-zone requirement."
 anti_patterns:
   - wrong: |
@@ -140,12 +144,12 @@ anti_patterns:
       with a BYO encoder library + pass the [matrix]:
       `<qr-code-ui matrix="[[1,0,1,...],...]"></qr-code-ui>`
   - wrong: |
-      <qr-code-ui value="..." margin="0"></qr-code-ui>
+      <qr-code-ui value="..." quiet-zone="0"></qr-code-ui>
     why: |
-      Zero margin breaks scanning. QR spec requires a 4-cell quiet
+      Zero quiet zone breaks scanning. QR spec requires a 4-cell quiet
       zone for reliable detection.
     fix: |
-      <qr-code-ui value="..." margin="4"></qr-code-ui>
+      <qr-code-ui value="..." quiet-zone="4"></qr-code-ui>
 examples:
   - name: default
     description: Plain URL encoding at default size + ECC-M.

package/components/range/range.css

@@ -69,7 +69,7 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
     /* font-family floor — see segment.css rationale. */
     font-family: var(--range-font-family);
     font-size: var(--range-font-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     transition:
       border-color var(--range-duration) var(--range-easing),
       background var(--range-duration) var(--range-easing);