@adia-ai/web-components 0.8.39 → 0.8.41

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

@@ -1,183 +1,11 @@
-/* ============================================================
-   datetime-picker — two-block @scope per ADR-0003.
-   Block 1 (TOKENS): :where(:scope) — token defaults.
-   Block 2 (BASE): :scope + descendant selectors.
-   Popover surfaces live OUTSIDE @scope because the Popover API
-   lifts them into the top layer; custom-property inheritance
-   still cascades from the host so --datetime-picker-* tokens
-   reach the popover.
-   ============================================================ */
-
-@scope (datetime-picker-ui) {
-  /* ── Block 1 — TOKENS ── */
-  :where(:scope) {
-    --datetime-picker-bg:                  var(--md-sys-color-neutral-background);
-    --datetime-picker-fg:                  var(--md-sys-color-neutral-on-surface);
-
-    /* Popover surface */
-    --datetime-picker-popover-bg:          var(--a-bg-subtle);
-    --datetime-picker-popover-border:      var(--md-sys-color-neutral-outline-variant);
-    --datetime-picker-popover-radius:      var(--a-radius-lg);
-    --datetime-picker-popover-shadow:      var(--a-shadow-lg);
-    --datetime-picker-popover-padding:     var(--a-space-3);
-    --datetime-picker-popover-gap:         var(--a-space-3);
-
-    /* Pane divider */
-    --datetime-picker-divider:             var(--md-sys-color-neutral-outline-variant);
-
-    /* Trigger */
-    --datetime-picker-trigger-min-width:   16em;
-
-    /* Padding */
-    --datetime-picker-px:                  var(--a-space-3);
-    --datetime-picker-py:                  var(--a-space-2);
-
-    /* Motion */
-    --datetime-picker-duration:            var(--a-duration-fast);
-    --datetime-picker-easing:              var(--a-easing);
-  }
-
-  /* ── Block 2 — BASE ── */
-  /* Host is a transparent inline wrapper. Painting `background` on the host
-     used to create an off-axis rectangle behind the trigger when the host
-     sat inside a field-ui (the field-ui's value-cell expanded but the
-     inline-block host only sized to its child). Trigger button-ui paints
-     its own surface — host stays transparent.
-     2026-05-24 QA: "odd background colors and block element container for
-     inline trigger" — consumer report on /site/components/datetime-picker. */
-  :scope {
-    box-sizing: border-box;
-    position: relative;
-    display: block;
-    color: var(--datetime-picker-fg);
-    font-size: var(--a-ui-size);
-  }
-
-  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
-  :scope[inline] { display: inline-block; }
-
-  /* Default trigger sizing — composes button-ui's surface; just
-     stretches the min-width so "Jan 1, 2026 14:30" fits. Normalize to the
-     picker-family field shape (mirrors date-range-picker): value text
-     left-aligned with the caret pushed to the trailing edge, not centered
-     like a default button. */
-  :scope [slot="trigger"] icon-ui[name="caret-down"] {
-    /* Universal caret size (gh#1314 sweep) — mirrors select-ui's trigger
-       caret so mixed control rows read as one family instead of showing
-       the ambient (larger) icon size. */
-    --a-icon-size: var(--a-caret-size);
-    transition: rotate var(--a-duration-fast) var(--a-easing);
-  }
-  /* Clear OPEN state: the default trigger's trailing caret flips while the
-     picker popover is open (name-guarded; custom trigger glyphs untouched). */
-  :scope[open] [slot="trigger"] icon-ui[name="caret-down"] {
-    rotate: 180deg;
-  }
-
-  :scope [slot="trigger"] {
-    min-width: var(--datetime-picker-trigger-min-width);
-    justify-content: space-between;
-    line-height: 1;
-  }
-  /* A committed value bumps to --a-ui-text (bright), matching input-ui /
-     select-ui / time-picker value color; the empty placeholder keeps
-     button-ui's muted outline fg. */
-  :scope [slot="trigger"][data-has-value] {
-    color: var(--a-ui-text);
-  }
-
-  /* States */
-  :scope[disabled] {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-  :scope[readonly] [slot="trigger"] {
-    cursor: default;
-  }
-}
-
-/* ============================================================
-   Popover surface — outside @scope (lifted to top layer).
-   Custom properties inherit from the host so
-   --datetime-picker-* tokens are available here.
-   ============================================================ */
-
-/* §FB-Wave1-QA — `display: grid` MUST be guarded by `:popover-open` so the
-   popover honors the UA `popover` `display: none` while closed. */
-datetime-picker-ui [slot="popover"] {
-  margin: 0;
-  padding: var(--datetime-picker-py) var(--datetime-picker-px);
-  border: 1px solid var(--datetime-picker-popover-border);
-  border-radius: var(--datetime-picker-popover-radius);
-  background: var(--datetime-picker-popover-bg);
-  box-shadow: var(--datetime-picker-popover-shadow);
-  color: var(--md-sys-color-neutral-on-surface);
-  /* Anchor-positioning fallback — popover.css and anchor.js handle
-     placement; layout here just sets the grid. */
-  inset: auto;
-  /* Fade + lift in on first paint via @starting-style. */
-  opacity: 1;
-  translate: 0 0;
-  transition:
-    opacity var(--datetime-picker-duration) var(--datetime-picker-easing),
-    translate var(--datetime-picker-duration) var(--datetime-picker-easing);
-}
-
-datetime-picker-ui [slot="popover"]:popover-open {
-  display: grid;
-  grid-template-columns: auto auto auto;
-  grid-template-areas: "cal divider time";
-  gap: var(--datetime-picker-popover-gap);
-  align-items: start;
-}
-
-datetime-picker-ui [slot="popover"]:popover-open {
-  @starting-style {
-    opacity: 0;
-    translate: 0 -4px;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  datetime-picker-ui [slot="popover"] { transition: none; }
-}
-
-/* Pane areas. */
-datetime-picker-ui [slot="popover"] > [data-cal-pane] {
-  grid-area: cal;
-}
-datetime-picker-ui [slot="popover"] > [data-pane-divider] {
-  grid-area: divider;
-  align-self: stretch;
-  --divider-color: var(--datetime-picker-divider);
-}
-datetime-picker-ui [slot="popover"] > [data-time-pane] {
-  grid-area: time;
-  align-self: start;
-}
-
-/* Footer area (consumer-supplied [slot="footer"]) — spans all three
-   columns under the panes. */
-datetime-picker-ui [slot="popover"] [slot="footer"] {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--a-space-2);
-  padding-block-start: var(--a-space-2);
-  border-block-start: 1px solid var(--md-sys-color-neutral-outline-variant);
-}
-
-/* Narrow surfaces (e.g. inside a card on mobile): stack the panes
-   vertically and replace the vertical divider with a horizontal rule. */
-@container (max-width: 32rem) {
-  datetime-picker-ui [slot="popover"]:popover-open {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "cal"
-      "divider"
-      "time";
-  }
-  datetime-picker-ui [slot="popover"] > [data-pane-divider] {
-    align-self: auto;
-  }
-}
+/* `<datetime-picker-ui>` is DEPRECATED (gh#1372, #1363 C3c) — a thin
+ * `UICalendarPicker` subclass (see datetime-picker.class.js), never its own
+ * independent implementation. Its visual contract lives entirely in
+ * ../calendar-picker/calendar-picker.css, whose `@scope (calendar-picker-ui,
+ * datetime-picker-ui)` root and `:is(calendar-picker-ui, datetime-picker-ui)`
+ * popover/pane selectors already cover this tag — one styling source, not
+ * two files drifting apart. This file intentionally carries no rules of its
+ * own; `packages/web-components/index.css` still imports it so the barrel's
+ * per-component import list stays complete and mechanical (no special-cased
+ * skip for a deprecated-but-still-shipping tag).
+ */

package/components/datetime-picker/datetime-picker.d.ts

@@ -1,5 +1,5 @@
 /**
- * `<datetime-picker-ui>` — Single-control date + time selection. Trigger button opens a popover with a `<calendar-picker-ui>` on the left + a `<time-picker-ui>` on the right; commit emits a full ISO 8601 datetime string ("YYYY-MM-DDTHH:mm" or with seconds). Composes the two underlying primitives — never wraps a native `<input type="datetime-local">` (per ADR-0025). Form-associated under one `name`. SPEC-038.
+ * `<datetime-picker-ui>` — DEPRECATED (gh#1372, #1363 C3c) — folded into <calendar-picker-ui>'s widened `precision` axis. `<datetime-picker-ui>` is now a thin `UICalendarPicker` subclass (see datetime-picker.class.js) rather than an independent implementation: `precision` defaults to `"minute"` (not `"date"`) and `placeholder` defaults to `"Select date and time"`; every other prop/event/token is inherited unchanged from <calendar-picker-ui>. Existing markup keeps working, but new markup should reach for `<calendar-picker-ui precision="minute">` (or `precision="second"`) directly. See <calendar-picker-ui> for the full contract.
  *
  * @see https://ui-kit.exe.xyz/site/components/datetime-picker
  *
@@ -13,7 +13,6 @@
 import { UIElement } from '../../core/element.js';
 
 export interface DatetimePickerChangeEventDetail {
-  source: string;
   value: string;
 }
 
@@ -62,12 +61,12 @@ document locale. `h12` forces a 12-hour cycle with an AM/PM
   name: string;
   /** Whether the popover is currently open. */
   open: boolean;
-  /** Text shown in the trigger when the value is empty. */
+  /** Text shown in the trigger when the value is empty. Defaults to "Select date and time" HERE (vs. "Select date..." on the base `<calendar-picker-ui>`). */
   placeholder: string;
   /** Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger). */
   placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-  /** Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`. */
-  precision: 'minute' | 'second';
+  /** Time-pane precision. `minute` (default HERE — `date` on the base `<calendar-picker-ui>`) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`; `date` drops the time pane entirely (identical to the base class's own default). */
+  precision: 'date' | 'minute' | 'second';
   /** Block edits; allow keyboard navigation for screen-reader inspection. */
   readonly: boolean;
   /** Per-Arrow-keypress increment in seconds for the time pane. 60 = minute precision (default), 900 = 15-minute, 1 = second precision. */

package/components/datetime-picker/datetime-picker.yaml

@@ -1,27 +1,39 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIDatetimePicker
 tag: datetime-picker-ui
-status: experimental
+status: deprecated
 component: DatetimePicker
 category: input
-version: 1
+version: 2
 description: >-
-  Single-control date + time selection. Trigger button opens a popover
-  with a `<calendar-picker-ui>` on the left + a `<time-picker-ui>` on
-  the right; commit emits a full ISO 8601 datetime string
-  ("YYYY-MM-DDTHH:mm" or with seconds). Composes the two underlying
-  primitives — never wraps a native `<input type="datetime-local">`
-  (per ADR-0025). Form-associated under one `name`. SPEC-038.
+  DEPRECATED (gh#1372, #1363 C3c) — folded into <calendar-picker-ui>'s
+  widened `precision` axis. `<datetime-picker-ui>` is now a thin
+  `UICalendarPicker` subclass (see datetime-picker.class.js) rather than an
+  independent implementation: `precision` defaults to `"minute"` (not
+  `"date"`) and `placeholder` defaults to `"Select date and time"`; every
+  other prop/event/token is inherited unchanged from <calendar-picker-ui>.
+  Existing markup keeps working, but new markup should reach for
+  `<calendar-picker-ui precision="minute">` (or `precision="second"`)
+  directly. See <calendar-picker-ui> for the full contract.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import
-# the calendar-picker, time-picker, button, popover, divider modules.
+# the calendar-grid, time-picker, divider modules (same set
+# <calendar-picker-ui precision="minute"> itself needs — this alias
+# inherits its render(), not just its class).
 composes:
-  - calendar-grid-ui     # the date pane — substrate primitive
-  - time-picker-ui       # the time pane (SPEC-043)
-  - button-ui            # default trigger + optional footer actions
-  - popover-ui           # the floating panel
-  - divider-ui           # separator between panes
+  - calendar-grid-ui   # the date pane — substrate primitive (inherited from calendar-picker-ui)
+  - time-picker-ui     # the time pane (SPEC-043)
+  - divider-ui         # separator between panes
 props:
+  # Every prop below is inherited VERBATIM from <calendar-picker-ui> —
+  # documented here too (not just "see the base class") because a
+  # consumer scanning THIS tag's own catalog entry, or the a2ui pipeline
+  # generating THIS tag by name, needs the full contract without a second
+  # hop. audit-static-properties-vs-yaml.mjs's component-extends-component
+  # exemption (gh#1372) resolves this against <calendar-picker-ui>'s own
+  # yaml, so re-declaring the inherited names here is documentation, not a
+  # second runtime contract. `precision` and `placeholder` are the only
+  # two whose DEFAULT actually differs from the base class.
   name:
     description: Form field name. The ISO 8601 datetime is submitted under this key when the picker is inside a `<form>`.
     type: string
@@ -48,10 +60,11 @@ props:
     default: 60
     reflect: true
   precision:
-    description: Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`.
+    description: Time-pane precision. `minute` (default HERE — `date` on the base `<calendar-picker-ui>`) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`; `date` drops the time pane entirely (identical to the base class's own default).
     type: string
     default: minute
     enum:
+    - date
     - minute
     - second
     reflect: true
@@ -89,9 +102,10 @@ props:
     default: false
     reflect: true
   placeholder:
-    description: Text shown in the trigger when the value is empty.
+    description: Text shown in the trigger when the value is empty. Defaults to "Select date and time" HERE (vs. "Select date..." on the base `<calendar-picker-ui>`).
     type: string
     default: Select date and time
+    reflect: true
   format:
     description: 'Trigger button date format. `short`: `Jan 1, 2026 14:30`; `long`: `January 1, 2026 14:30`; `iso`: full ISO string.'
     type: string
@@ -123,7 +137,6 @@ events:
     description: Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).
     detail:
       value: string
-      source: string
   input:
     description: Fired during partial selection (date picked but time still pending, or vice versa).
     detail:
@@ -143,20 +156,14 @@ events:
       reason: string
 slots:
   trigger:
-    description: Custom trigger replacement. When omitted, a default `<button-ui>` is stamped.
+    description: Custom trigger replacement. When omitted, a default trigger is stamped (a plain clickable span, per the base `<calendar-picker-ui>` — NOT the old standalone datetime-picker's `<button-ui>` trigger; see the Consequences note below).
   footer:
     description: Optional Apply / Cancel buttons for explicit-commit flows. Spans both panes below the calendar + time area.
 states:
   - name: idle
     description: Closed, no pending selection.
-  - name: open-pending-date
-    description: Popover open, no calendar pick yet.
-    attribute: open
-  - name: open-pending-time
-    description: Date picked; time pane is the next focus target.
-    attribute: open
-  - name: open-committed
-    description: Both panes set; awaiting Apply (explicit-commit mode only).
+  - name: open
+    description: Popover open.
     attribute: open
   - name: disabled
     description: Non-interactive; dimmed.
@@ -164,65 +171,20 @@ states:
   - name: readonly
     description: Read-only; trigger keyboard-focusable but popover does not open.
     attribute: readonly
-traits: []
-tokens:
-  --datetime-picker-bg:
-    description: Host background.
-    default: var(--a-bg)
-  --datetime-picker-fg:
-    description: Host text color.
-    default: var(--a-fg)
-  --datetime-picker-popover-bg:
-    description: Popover background.
-    default: var(--a-bg-subtle)
-  --datetime-picker-popover-border:
-    description: Popover border color.
-    default: var(--a-border-subtle)
-  --datetime-picker-popover-radius:
-    description: Popover border radius.
-    default: var(--a-radius-lg)
-  --datetime-picker-popover-shadow:
-    description: Popover box shadow.
-    default: var(--a-shadow-lg)
-  --datetime-picker-popover-padding:
-    description: Popover internal padding.
-    default: var(--a-space-3)
-  --datetime-picker-popover-gap:
-    description: Gap between calendar pane and time pane.
-    default: var(--a-space-3)
-  --datetime-picker-divider:
-    description: Pane divider color.
-    default: var(--a-border-subtle)
-  --datetime-picker-trigger-min-width:
-    description: Default trigger min-width — sized so the formatted date+time fits without truncation.
-    default: 16em
-  --datetime-picker-px:
-    description: Horizontal popover padding.
-    default: var(--a-space-3)
-  --datetime-picker-py:
-    description: Vertical popover padding.
-    default: var(--a-space-2)
-  --datetime-picker-duration:
-    description: Open/close transition duration.
-    default: var(--a-duration-fast)
-  --datetime-picker-easing:
-    description: Open/close transition easing.
-    default: var(--a-easing)
+tokens: {}  # No component-owned tokens — styling flows entirely through
+            # <calendar-picker-ui>'s own --calendar-picker-* custom
+            # properties (gh#1372; the old --datetime-picker-* tokens are
+            # a genuine breaking removal — see the MIGRATION GUIDE entry).
 requiredIcons:
   - calendar
-  - caret-down
 a2ui:
   rules:
+    - rule: 'DEPRECATED — prefer `{"component": "CalendarPicker", "precision": "minute"}` (or `"second"`) over `{"component": "DatetimePicker"}`. Both render and behave identically; DatetimePicker is a thin compatibility alias.'
+      reason: 'gh#1372 (#1363 C3c) fold — steer new generation at the canonical primitive.'
     - rule: '`DatetimePicker.value` MUST be ISO 8601 datetime (`YYYY-MM-DDTHH:mm` or `YYYY-MM-DDTHH:mm:ss`) OR empty string. Date-only or time-only strings fire `invalid`.'
       reason: 'Datetime contract — both halves must be present (or both empty).'
-    - rule: '`precision: "second"` requires the value to include seconds when set; missing seconds are coerced to `:00` on commit.'
-      reason: 'Precision contract.'
     - rule: '`min` and `max` MUST be parseable ISO 8601 datetimes if non-empty. If `value` falls outside, `invalid` fires and the value does not commit.'
       reason: 'Constraint contract.'
-    - rule: '`hour-cycle` overrides the locale-derived cycle in the time pane. Set explicitly when the surface needs a specific cycle (cron editors, log queries, system surfaces).'
-      reason: 'Hour-cycle override contract.'
-    - rule: 'Use DatetimePicker for combined date+time. Do NOT compose `<calendar-picker-ui>` + a free-form `<input-ui>` manually as an alternative — that is the pattern this primitive replaces.'
-      reason: 'Adoption signal: prefer the canonical primitive over hand-rolled composition.'
     - rule: 'Per ADR-0025 NEVER wrap a native `<input type="datetime-local">` — the calendar pane + time pane composition + ElementInternals together provide form participation.'
       reason: 'No native form controls.'
 anti_patterns:
@@ -234,33 +196,15 @@ anti_patterns:
     fix: |
       {"component": "DatetimePicker", "value": "2026-05-24T00:00"}
   - wrong: |
-      {"component": "DatetimePicker", "value": "14:30"}
-    why: |
-      `value` is a time-only string — no date component. Use `<TimePicker>` for
-      time-only selection or supply the date portion.
-    fix: |
-      {"component": "DatetimePicker", "value": "2026-05-24T14:30"}
-  - wrong: |
-      {"component": "DatetimePicker", "children": [
-        {"component": "Input", "type": "datetime-local"}
-      ]}
-    why: |
-      Nesting a native datetime-local input violates ADR-0025 and bypasses
-      ElementInternals form participation.
-    fix: |
-      {"component": "DatetimePicker", "name": "field-name"}
-  - wrong: |
-      <calendar-picker-ui></calendar-picker-ui>
-      <input-ui type="text" placeholder="HH:mm"></input-ui>
+      {"component": "DatetimePicker", "name": "appointment"}
     why: |
-      Hand-rolled date + free-form time composition is the pattern this primitive
-      replaces. It misses the coordinated popover, the per-segment Spinbutton
-      a11y model, and unified form participation.
+      DatetimePicker is deprecated (gh#1372) — new generation should reach
+      for CalendarPicker's widened precision axis instead.
     fix: |
-      <datetime-picker-ui name="appointment"></datetime-picker-ui>
+      {"component": "CalendarPicker", "precision": "minute", "name": "appointment"}
 examples:
   - name: canonical
-    description: Form-field-wrapped picker with min/max bounds.
+    description: Form-field-wrapped picker with min/max bounds. Prefer the CalendarPicker[precision] form for NEW markup — see calendar-picker-ui's own "datetime-picker" example.
     a2ui: |
       [
         {
@@ -277,41 +221,6 @@ examples:
           "max": "2026-12-31T23:59"
         }
       ]
-  - name: second-precision
-    description: Log-cursor picker with second precision.
-    a2ui: |
-      [
-        {
-          "id": "dt",
-          "component": "DatetimePicker",
-          "name": "log-cursor",
-          "precision": "second",
-          "step": 1,
-          "value": "2026-05-24T14:30:45"
-        }
-      ]
-  - name: forced-24h
-    description: Cron editor with forced 24-hour cycle.
-    a2ui: |
-      [
-        {
-          "id": "dt",
-          "component": "DatetimePicker",
-          "name": "cron",
-          "hourCycle": "h23"
-        }
-      ]
-  - name: readonly
-    description: Read-only datetime for inspection only.
-    a2ui: |
-      [
-        {
-          "id": "dt",
-          "component": "DatetimePicker",
-          "readonly": true,
-          "value": "2026-05-24T14:30"
-        }
-      ]
 keywords:
   - datetimepicker
   - datetime-picker

package/components/demo-toggle/demo-toggle.a2ui.json

@@ -85,6 +85,7 @@
       "switch"
     ],
     "name": "UIDemoToggle",
+    "parts": {},
     "related": [
       "Switch",
       "Card"

package/components/demo-toggle/demo-toggle.css

@@ -15,7 +15,7 @@
 
     /* ── Typography ── */
     --demo-toggle-label-size:    var(--a-ui-size);
-    --demo-toggle-label-weight:  var(--a-weight-medium, 500);
+    --demo-toggle-label-weight:  var(--a-weight-medium);
 
     /* ── Transition ── */
     --demo-toggle-duration:      var(--a-duration-fast);

package/components/description-list/description-list.a2ui.json

@@ -61,6 +61,7 @@
       "dl"
     ],
     "name": "UIDescriptionList",
+    "parts": {},
     "related": [
       "List",
       "Field",

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.a2ui.json

@@ -93,6 +93,7 @@
       "non-editable"
     ],
     "name": "UIDisplayField",
+    "parts": {},
     "related": [
       "field",
       "input",

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.a2ui.json

@@ -56,6 +56,7 @@
       "spacer"
     ],
     "name": "UIDivider",
+    "parts": {},
     "related": [
       "upload",
       "input",

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.a2ui.json

@@ -108,6 +108,7 @@
       "expand"
     ],
     "name": "UIDrawer",
+    "parts": {},
     "related": [
       "button",
       "empty-state",
@@ -125,9 +126,6 @@
       "action-leading": {
         "description": "Direct child of <footer> — leading (inline-start) action cluster. Used for dual-cluster footers where a destructive or secondary action sits on the opposite edge from the primary trailing cluster (e.g. Delete ↔ Cancel/Save, Back ↔ Cancel/Next). Replaces the legacy <span data-spacer> hack."
       },
-      "backdrop": {
-        "description": "Scrim overlay behind the drawer (stamped by the component)."
-      },
       "body": {
         "description": "Scrollable content region. Accepts one or more bare <section> tags or [slot=\"body\"] elements; multi-section stacks are mounted in author order and share the panel's scroll context. [bleed] removes section padding; [padding] adds a canvas-scrim background for hero regions."
       },

package/components/drawer/drawer.css

@@ -200,7 +200,7 @@ drawer-ui [slot="panel"] > [slot="header"]:has(> [slot]) {
   align-items: center;
 }
 
-drawer-ui [slot="panel"] > [slot="header"][padding] {
+drawer-ui [slot="panel"] > [slot="header"][padded] {
   background: var(--md-sys-color-neutral-scrim-weakest);
 }
 
@@ -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/drawer/drawer.yaml

@@ -71,8 +71,6 @@ events:
       transition completes, so a rapid close→open never fires a stale
       `opened`. Added per FEEDBACK-27.
 slots:
-  backdrop:
-    description: Scrim overlay behind the drawer (stamped by the component).
   panel:
     description: Sliding panel container (stamped by the component).
   header: