@adia-ai/web-components 0.6.33 → 0.6.35

package/components/alert/alert.test.js

@@ -178,3 +178,187 @@ describe('alert-ui — full corpus shape (the §34 scenario)', () => {
     expect(content.querySelector('a').getAttribute('href')).toBe('/foo');
   });
 });
+
+describe('alert-ui — SPEC-006 dunning pattern', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('formats amount via Intl.NumberFormat with currency', async () => {
+    const a = mount(`<alert-ui pattern="dunning" amount="24.50" currency="USD"
+                               due-at="2026-05-20" card-last4="4242"
+                               reason="declined" variant="danger"></alert-ui>`);
+    await tick();
+    const amt = a.querySelector('[data-dunning-amount]');
+    expect(amt).not.toBeNull();
+    // en-US default formatting (jsdom): "$24.50"
+    expect(amt.textContent).toMatch(/\$24\.50|USD\s*24\.50/);
+  });
+
+  it('formats due date via Intl.DateTimeFormat', async () => {
+    const a = mount(`<alert-ui pattern="dunning" amount="24.50" currency="USD"
+                               due-at="2026-05-20T00:00:00Z"
+                               reason="declined" variant="danger"></alert-ui>`);
+    await tick();
+    const meta = a.querySelector('[data-dunning-meta]');
+    expect(meta).not.toBeNull();
+    // Expect month name + day + year somewhere in the meta
+    expect(meta.textContent).toMatch(/May/);
+    expect(meta.textContent).toMatch(/2026/);
+  });
+
+  it('stamps the cardLast4 metadata', async () => {
+    const a = mount(`<alert-ui pattern="dunning" amount="24.50" currency="USD"
+                               due-at="2026-05-20" card-last4="4242"
+                               reason="declined" variant="danger"></alert-ui>`);
+    await tick();
+    const meta = a.querySelector('[data-dunning-meta]');
+    expect(meta.textContent).toContain('ending 4242');
+  });
+
+  it('stamps x-circle icon for reason="declined"', async () => {
+    const a = mount(`<alert-ui pattern="dunning" reason="declined" variant="danger"
+                               amount="10" currency="USD"></alert-ui>`);
+    await tick();
+    const icon = a.querySelector('[slot="leading"]');
+    expect(icon).not.toBeNull();
+    expect(icon.getAttribute('name')).toBe('x-circle');
+  });
+
+  it('stamps clock icon for reason="expired"', async () => {
+    const a = mount(`<alert-ui pattern="dunning" reason="expired" variant="danger"
+                               amount="10" currency="USD"></alert-ui>`);
+    await tick();
+    const icon = a.querySelector('[slot="leading"]');
+    expect(icon.getAttribute('name')).toBe('clock');
+  });
+
+  it('dispatches dunning-action event on descendant [data-dunning-action] click', async () => {
+    const a = mount(`<alert-ui pattern="dunning" amount="24.50" currency="USD"
+                               due-at="2026-05-20" reason="declined" variant="danger">
+      <button-ui slot="actions" data-dunning-action="update" text="Update"></button-ui>
+      <button-ui slot="actions" data-dunning-action="retry" text="Retry"></button-ui>
+    </alert-ui>`);
+    await tick();
+
+    const received = [];
+    a.addEventListener('dunning-action', (e) => received.push(e.detail));
+
+    const updateBtn = a.querySelector('[data-dunning-action="update"]');
+    updateBtn.dispatchEvent(new Event('press', { bubbles: true }));
+    await tick();
+
+    expect(received.length).toBe(1);
+    expect(received[0].action).toBe('update');
+    expect(received[0].amount).toBe(24.5);
+    expect(received[0].currency).toBe('USD');
+    expect(received[0].dueAt).toBe('2026-05-20');
+  });
+
+  it('dispatches dunning-action with action="retry" when retry button is pressed', async () => {
+    const a = mount(`<alert-ui pattern="dunning" amount="10" currency="USD"
+                               due-at="2026-05-20" reason="declined" variant="danger">
+      <button-ui slot="actions" data-dunning-action="retry" text="Retry"></button-ui>
+    </alert-ui>`);
+    await tick();
+
+    const received = [];
+    a.addEventListener('dunning-action', (e) => received.push(e.detail));
+
+    const retryBtn = a.querySelector('[data-dunning-action="retry"]');
+    retryBtn.dispatchEvent(new Event('press', { bubbles: true }));
+    await tick();
+
+    expect(received.length).toBe(1);
+    expect(received[0].action).toBe('retry');
+  });
+
+  it('re-formats amount when the [amount] attribute changes', async () => {
+    const a = mount(`<alert-ui pattern="dunning" amount="10" currency="USD"
+                               due-at="2026-05-20" reason="declined" variant="danger"></alert-ui>`);
+    await tick();
+    let amt = a.querySelector('[data-dunning-amount]');
+    expect(amt.textContent).toMatch(/10/);
+
+    a.amount = 99.99;
+    await tick();
+    amt = a.querySelector('[data-dunning-amount]');
+    expect(amt.textContent).toMatch(/99\.99/);
+  });
+
+  it('inherits role="alert" for variant="danger" in dunning mode', async () => {
+    const a = mount(`<alert-ui pattern="dunning" variant="danger" amount="10" currency="USD"
+                               due-at="2026-05-20" reason="declined"></alert-ui>`);
+    await tick();
+    expect(a.getAttribute('role')).toBe('alert');
+  });
+
+  it('inherits role="alert" for variant="warning" (grace period)', async () => {
+    const a = mount(`<alert-ui pattern="dunning" variant="warning" amount="10" currency="USD"
+                               due-at="2026-06-01"></alert-ui>`);
+    await tick();
+    // warning maps to role=alert (same as danger via #updateRole)
+    expect(a.getAttribute('role')).toBe('alert');
+  });
+
+  it('grace-period (warning) uses "due" prefix in date meta, not "failed"', async () => {
+    const a = mount(`<alert-ui pattern="dunning" variant="warning" amount="10" currency="USD"
+                               due-at="2026-06-01"></alert-ui>`);
+    await tick();
+    const meta = a.querySelector('[data-dunning-meta]');
+    expect(meta.textContent).toContain('due');
+  });
+
+  it('default title for declined is "Payment failed"', async () => {
+    const a = mount(`<alert-ui pattern="dunning" reason="declined" variant="danger"
+                               amount="10" currency="USD"></alert-ui>`);
+    await tick();
+    const titleEl = a.querySelector('[data-dunning-title]');
+    expect(titleEl.textContent).toBe('Payment failed');
+  });
+
+  it('default title for expired is "Card expired"', async () => {
+    const a = mount(`<alert-ui pattern="dunning" reason="expired" variant="danger"
+                               amount="10" currency="USD"></alert-ui>`);
+    await tick();
+    const titleEl = a.querySelector('[data-dunning-title]');
+    expect(titleEl.textContent).toBe('Card expired');
+  });
+
+  it('explicit [title] overrides the per-reason default', async () => {
+    const a = mount(`<alert-ui pattern="dunning" reason="declined" title="Custom message"
+                               amount="10" currency="USD" variant="danger"></alert-ui>`);
+    await tick();
+    const titleEl = a.querySelector('[data-dunning-title]');
+    expect(titleEl.textContent).toBe('Custom message');
+  });
+
+  it('explicit [icon] overrides the per-reason icon map', async () => {
+    const a = mount(`<alert-ui pattern="dunning" reason="declined" icon="credit-card"
+                               amount="10" currency="USD" variant="danger"></alert-ui>`);
+    await tick();
+    const icon = a.querySelector('[slot="leading"]');
+    expect(icon.getAttribute('name')).toBe('credit-card');
+  });
+
+  it('composes aria-label from title + amount + meta', async () => {
+    const a = mount(`<alert-ui pattern="dunning" reason="declined" amount="24.50"
+                               currency="USD" due-at="2026-05-20" card-last4="4242"
+                               variant="danger"></alert-ui>`);
+    await tick();
+    const aria = a.getAttribute('aria-label');
+    expect(aria).toContain('Payment failed');
+    expect(aria).toMatch(/24\.50/);
+    expect(aria).toMatch(/4242/);
+  });
+
+  it('does not stamp dunning content when pattern is empty (standard mode)', async () => {
+    const a = mount(`<alert-ui variant="danger" amount="24.50" currency="USD"
+                               due-at="2026-05-20" reason="declined"
+                               text="standard message"></alert-ui>`);
+    await tick();
+    // No dunning markers — uses the standard text-only render path
+    expect(a.querySelector('[data-dunning-amount]')).toBeNull();
+    expect(a.querySelector('[data-dunning-title]')).toBeNull();
+    const content = a.querySelector(':scope > [slot="content"]');
+    expect(content.textContent.trim()).toBe('standard message');
+  });
+});

package/components/alert/alert.yaml

@@ -69,9 +69,73 @@ props:
       - danger
       - muted
       - neutral
+  pattern:
+    description: >-
+      Domain pattern mode. Default is empty (standard alert). Setting
+      `pattern="dunning"` switches to billing dunning render mode —
+      stamps a formatted amount + due-date + decline-reason from props
+      and re-dispatches descendant `[data-dunning-action]` button
+      clicks as a unified `dunning-action` event. Spec: SPEC-006.
+    type: string
+    default: ""
+    enum:
+      - ""
+      - dunning
+  amount:
+    description: >-
+      Dunning mode only — the unpaid amount as a decimal major-unit
+      number (`24.50`, not minor units like `2450`). Formatted via
+      `Intl.NumberFormat` using [currency] and [lang]. Ignored when
+      [pattern] is not `dunning`.
+    type: number
+    default: 0
+  currency:
+    description: >-
+      Dunning mode only — ISO 4217 currency code driving the
+      `Intl.NumberFormat` style="currency" rendering. Defaults to
+      `USD`.
+    type: string
+    default: USD
+  dueAt:
+    description: >-
+      Dunning mode only — ISO 8601 due / failed-at timestamp.
+      Formatted via `Intl.DateTimeFormat`. Ignored when [pattern] is
+      not `dunning`. Attribute spelling: `due-at`.
+    type: string
+    default: ""
+    attribute: due-at
+  cardLast4:
+    description: >-
+      Dunning mode only — last 4 digits of the declined card.
+      Rendered as "ending 4242". Ignored when [pattern] is not
+      `dunning`. Attribute spelling: `card-last4`.
+    type: string
+    default: ""
+    attribute: card-last4
+  reason:
+    description: >-
+      Dunning mode only — decline reason. Drives the leading icon
+      (declined → `x-circle`, expired → `clock`, insufficient →
+      `wallet`, network → `wifi-slash`). One of: `declined`,
+      `expired`, `insufficient`, `network`, or empty.
+    type: string
+    default: ""
+    enum:
+      - ""
+      - declined
+      - expired
+      - insufficient
+      - network
 events:
   close:
     description: Fired when the close button is clicked
+  dunning-action:
+    description: >-
+      Dunning pattern only — fired when a descendant button with
+      `[data-dunning-action]` is clicked. Detail shape `{ action,
+      amount, currency, dueAt }`; the action string is the value of
+      the `data-dunning-action` attribute (typically `"update"` or
+      `"retry"`).
 slots:
   content:
     description: >-
@@ -94,6 +158,12 @@ slots:
       Optional trailing action button (e.g. "Refresh", "Status page").
       Right-aligned in the flex layout. See system-banners pattern for
       examples.
+  actions:
+    description: >-
+      Dunning pattern only — action button stack (typically two
+      `<button-ui>` with `data-dunning-action="update"` and
+      `data-dunning-action="retry"`). Sits below the formatted message
+      in the col layout when `pattern="dunning"`.
 states:
   - name: idle
     description: Default, ready for interaction.
@@ -107,7 +177,19 @@ a2ui:
       reason: 'Ephemeral vs persistent boundary.'
     - rule: 'For modal-style critical alerts use <modal-ui> with alert content.'
       reason: 'Inline vs modal.'
-anti_patterns: []
+    - rule: 'Billing dunning / payment-failed notices use pattern="dunning" + amount + currency + dueAt props, NOT inlined into title/description strings.'
+      reason: 'Intl-formatting + unified telemetry via dunning-action event.'
+    - rule: 'pattern="dunning" SHOULD use variant="danger" (default) or variant="warning" (grace period); never variant="info" or "success".'
+      reason: 'Dunning is always a failure surface.'
+    - rule: 'When pattern="dunning", slot at least one button-ui in slot="actions" with data-dunning-action ("update" or "retry").'
+      reason: 'No actions = no resolution path.'
+anti_patterns:
+  - wrong: '<alert-ui pattern="dunning" variant="info">'
+    why: 'Dunning is always a failure surface; info mis-signals severity.'
+    fix: '<alert-ui pattern="dunning" variant="danger">'
+  - wrong: '<alert-ui pattern="dunning" title="Payment failed $24.50">'
+    why: 'Amount baked into title defeats Intl formatting + telemetry.'
+    fix: '<alert-ui pattern="dunning" amount="24.50" currency="USD" due-at="2026-05-20">'
 examples:
   - name: alert-banner
     description: Single alert component with icon and dismiss action.
@@ -164,6 +246,37 @@ examples:
           "variant": "primary"
         }
       ]
+  - name: dunning-payment-failed
+    description: Billing dunning banner — declined card with retry + update-card actions (SPEC-006).
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Alert",
+          "pattern": "dunning",
+          "variant": "danger",
+          "amount": 24.5,
+          "currency": "USD",
+          "dueAt": "2026-05-20T00:00:00Z",
+          "cardLast4": "4242",
+          "reason": "declined",
+          "children": ["btn-update", "btn-retry"]
+        },
+        {
+          "id": "btn-update",
+          "component": "Button",
+          "text": "Update payment method",
+          "variant": "primary",
+          "slot": "actions"
+        },
+        {
+          "id": "btn-retry",
+          "component": "Button",
+          "text": "Retry charge",
+          "variant": "outline",
+          "slot": "actions"
+        }
+      ]
 keywords:
   - alert
   - inbox

package/components/avatar/avatar-group.yaml

@@ -1,9 +1,9 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 #
 # §176 (v0.5.5): authored to close the §175 baseline-orphan class. The
-# component already existed as a sibling class in the parent's class.js
+# component already existed as a sibling class in the parent's avatar.class.js
 # + was registered alongside the parent (e.g. UIList + UIListItem both
-# from list/class.js). The catalog just lacked its own entry. With the
+# from list/list.class.js). The catalog just lacked its own entry. With the
 # §172 sibling-yaml scanner, this file gets picked up next to the parent
 # yaml.
 

package/components/avatar/avatar.css

@@ -4,19 +4,19 @@
 
 @scope (avatar-ui) {
   :where(:scope) {
-    --avatar-size:        var(--a-size);
-    --avatar-bg:          var(--a-bg-muted);
-    --avatar-fg:          var(--a-fg-subtle);
-    --avatar-radius:      var(--a-radius-full);
-    --avatar-font-size:   var(--a-ui-sm);
-    --avatar-font-weight: var(--a-weight-medium);
+    --avatar-size-default:        var(--a-size);
+    --avatar-bg-default:          var(--a-bg-muted);
+    --avatar-fg-default:          var(--a-fg-subtle);
+    --avatar-radius-default:      var(--a-radius-full);
+    --avatar-font-size-default:   var(--a-ui-sm);
+    --avatar-font-weight-default: var(--a-weight-medium);
 
     /* Sizes */
-    --avatar-size-xs:     1.25rem;
-    --avatar-size-sm:     1.75rem;
-    --avatar-size-md:     2.5rem;
-    --avatar-size-lg:     3.5rem;
-    --avatar-size-xl:     4.5rem;
+    --avatar-size-xs-default:     1.25rem;
+    --avatar-size-sm-default:     1.75rem;
+    --avatar-size-md-default:     2.5rem;
+    --avatar-size-lg-default:     3.5rem;
+    --avatar-size-xl-default:     4.5rem;
   }
 
   :scope {
@@ -24,13 +24,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-    background: var(--avatar-bg);
-    color: var(--avatar-fg);
-    border-radius: var(--avatar-radius);
-    font-size: var(--avatar-font-size);
-    font-weight: var(--avatar-font-weight);
+    width: var(--avatar-size, var(--avatar-size-default));
+    height: var(--avatar-size, var(--avatar-size-default));
+    background: var(--avatar-bg, var(--avatar-bg-default));
+    color: var(--avatar-fg, var(--avatar-fg-default));
+    border-radius: var(--avatar-radius, var(--avatar-radius-default));
+    font-size: var(--avatar-font-size, var(--avatar-font-size-default));
+    font-weight: var(--avatar-font-weight, var(--avatar-font-weight-default));
     overflow: hidden;
     flex-shrink: 0;
   }
@@ -51,23 +51,23 @@
 
   /* ── Icon (non-person avatar) ── */
   [slot="icon"] {
-    color: var(--avatar-fg);
-    --a-icon-size: calc(var(--avatar-size) * 0.55);
+    color: var(--avatar-fg, var(--avatar-fg-default));
+    --a-icon-size: calc(var(--avatar-size, var(--avatar-size-default)) * 0.55);
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
 
   /* ── Sizes ── */
-  :scope[size="xs"] { --avatar-size: var(--avatar-size-xs); --avatar-font-size: var(--a-ui-sm); }
-  :scope[size="sm"] { --avatar-size: var(--avatar-size-sm); --avatar-font-size: var(--a-ui-sm); }
-  :scope[size="md"] { --avatar-size: var(--avatar-size-md); --avatar-font-size: var(--a-ui-sm); }
-  :scope[size="lg"] { --avatar-size: var(--avatar-size-lg); --avatar-font-size: var(--a-ui-md); }
-  :scope[size="xl"] { --avatar-size: var(--avatar-size-xl); --avatar-font-size: var(--a-ui-lg); }
+  :scope[size="xs"] { --avatar-size-default: var(--avatar-size-xs, var(--avatar-size-xs-default)); --avatar-font-size-default: var(--a-ui-sm); }
+  :scope[size="sm"] { --avatar-size-default: var(--avatar-size-sm, var(--avatar-size-sm-default)); --avatar-font-size-default: var(--a-ui-sm); }
+  :scope[size="md"] { --avatar-size-default: var(--avatar-size-md, var(--avatar-size-md-default)); --avatar-font-size-default: var(--a-ui-sm); }
+  :scope[size="lg"] { --avatar-size-default: var(--avatar-size-lg, var(--avatar-size-lg-default)); --avatar-font-size-default: var(--a-ui-md); }
+  :scope[size="xl"] { --avatar-size-default: var(--avatar-size-xl, var(--avatar-size-xl-default)); --avatar-font-size-default: var(--a-ui-lg); }
 
   /* ── Shape ── */
-  :scope[shape="circle"] { --avatar-radius: var(--a-radius-full); }
-  :scope[shape="square"] { --avatar-radius: var(--a-radius-md); }
+  :scope[shape="circle"] { --avatar-radius-default: var(--a-radius-full); }
+  :scope[shape="square"] { --avatar-radius-default: var(--a-radius-md); }
 }
 
 /* ═══════════════════════════════════════════════════════════════

package/components/avatar/avatar.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIAvatar, UIAvatarGroup } from './class.js';
+import { UIAvatar, UIAvatarGroup } from './avatar.class.js';
 
 defineIfFree('avatar-ui', UIAvatar);
 defineIfFree('avatar-group-ui', UIAvatarGroup);

package/components/badge/badge.css

@@ -1,13 +1,13 @@
 @scope (badge-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --badge-bg:        var(--a-bg-muted);
-    --badge-fg:        var(--a-fg);
-    --badge-radius:    var(--a-radius-md);
-    --badge-px:        var(--a-space-2);
-    --badge-py:        2px;
-    --badge-gap:       var(--a-space-1);
-    --badge-font-size: var(--a-ui-sm);
+    --badge-bg-default:        var(--a-bg-muted);
+    --badge-fg-default:        var(--a-fg);
+    --badge-radius-default:    var(--a-radius-md);
+    --badge-px-default:        var(--a-space-2);
+    --badge-py-default:        2px;
+    --badge-gap-default:       var(--a-space-1);
+    --badge-font-size-default: var(--a-ui-sm);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -17,16 +17,16 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--badge-gap);
+    gap: var(--badge-gap, var(--badge-gap-default));
     width: fit-content;
-    padding: var(--badge-py) var(--badge-px);
-    background: var(--badge-bg);
-    color: var(--badge-fg);
+    padding: var(--badge-py, var(--badge-py-default)) var(--badge-px, var(--badge-px-default));
+    background: var(--badge-bg, var(--badge-bg-default));
+    color: var(--badge-fg, var(--badge-fg-default));
     font: inherit;
-    font-size: var(--badge-font-size);
+    font-size: var(--badge-font-size, var(--badge-font-size-default));
     font-weight: 500;
     line-height: 1;
-    border-radius: var(--badge-radius);
+    border-radius: var(--badge-radius, var(--badge-radius-default));
     white-space: nowrap;
     vertical-align: middle;
   }
@@ -56,28 +56,28 @@
      collapse contrast on muted: warning fails in dark, danger fails in light.
      Accent keeps the saturated-text-on-tint look (intentional brand emphasis). */
   :scope[variant="accent"] {
-    --badge-bg: var(--a-accent-muted);
-    --badge-fg: var(--a-accent-text);
+    --badge-bg-default: var(--a-accent-muted);
+    --badge-fg-default: var(--a-accent-text);
   }
 
   :scope[variant="info"] {
-    --badge-bg: var(--a-info-muted);
-    --badge-fg: var(--a-info-text);
+    --badge-bg-default: var(--a-info-muted);
+    --badge-fg-default: var(--a-info-text);
   }
 
   :scope[variant="success"] {
-    --badge-bg: var(--a-success-muted);
-    --badge-fg: var(--a-success-text);
+    --badge-bg-default: var(--a-success-muted);
+    --badge-fg-default: var(--a-success-text);
   }
 
   :scope[variant="warning"] {
-    --badge-bg: var(--a-warning-muted);
-    --badge-fg: var(--a-warning-text);
+    --badge-bg-default: var(--a-warning-muted);
+    --badge-fg-default: var(--a-warning-text);
   }
 
   :scope[variant="danger"] {
-    --badge-bg: var(--a-danger-muted);
-    --badge-fg: var(--a-danger-text);
+    --badge-bg-default: var(--a-danger-muted);
+    --badge-fg-default: var(--a-danger-text);
   }
 
   /* `primary` is the accent-filled variant — solid bg + on-accent text,
@@ -86,8 +86,8 @@
      matrix so it tracks the same accent-strong source as button-ui's
      primary variant. */
   :scope[variant="primary"] {
-    --badge-bg: var(--a-primary-bg);
-    --badge-fg: var(--a-primary-fg);
+    --badge-bg-default: var(--a-primary-bg);
+    --badge-fg-default: var(--a-primary-fg);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base — same tokens
@@ -96,8 +96,8 @@
      "Not set" states) where the badge should read as quiet chrome. */
   :scope[variant="muted"],
   :scope[variant="neutral"] {
-    --badge-bg: var(--a-bg-muted);
-    --badge-fg: var(--a-fg);
+    --badge-bg-default: var(--a-bg-muted);
+    --badge-fg-default: var(--a-fg);
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/badge/badge.js

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

package/components/block/block.css

@@ -1,29 +1,29 @@
 @scope (block-ui) {
   :where(:scope) {
-    --block-padding: var(--a-space-4);
-    --block-margin:  0;
+    --block-padding-default: var(--a-space-4);
+    --block-margin-default:  0;
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
-    padding: var(--block-padding);
-    margin: var(--block-margin);
+    padding: var(--block-padding, var(--block-padding-default));
+    margin: var(--block-margin, var(--block-margin-default));
   }
 
   /* ── Padding variants ── */
-  :scope[padding="none"] { --block-padding: 0; }
-  :scope[padding="xs"]   { --block-padding: var(--a-space-1); }
-  :scope[padding="sm"]   { --block-padding: var(--a-space-2); }
-  :scope[padding="md"]   { --block-padding: var(--a-space-4); }
-  :scope[padding="lg"]   { --block-padding: var(--a-space-6); }
-  :scope[padding="xl"]   { --block-padding: var(--a-space-10); }
+  :scope[padding="none"] { --block-padding-default: 0; }
+  :scope[padding="xs"]   { --block-padding-default: var(--a-space-1); }
+  :scope[padding="sm"]   { --block-padding-default: var(--a-space-2); }
+  :scope[padding="md"]   { --block-padding-default: var(--a-space-4); }
+  :scope[padding="lg"]   { --block-padding-default: var(--a-space-6); }
+  :scope[padding="xl"]   { --block-padding-default: var(--a-space-10); }
 
   /* ── Margin variants ── */
-  :scope[margin="none"] { --block-margin: 0; }
-  :scope[margin="xs"]   { --block-margin: var(--a-space-1); }
-  :scope[margin="sm"]   { --block-margin: var(--a-space-2); }
-  :scope[margin="md"]   { --block-margin: var(--a-space-4); }
-  :scope[margin="lg"]   { --block-margin: var(--a-space-6); }
-  :scope[margin="xl"]   { --block-margin: var(--a-space-10); }
+  :scope[margin="none"] { --block-margin-default: 0; }
+  :scope[margin="xs"]   { --block-margin-default: var(--a-space-1); }
+  :scope[margin="sm"]   { --block-margin-default: var(--a-space-2); }
+  :scope[margin="md"]   { --block-margin-default: var(--a-space-4); }
+  :scope[margin="lg"]   { --block-margin-default: var(--a-space-6); }
+  :scope[margin="xl"]   { --block-margin-default: var(--a-space-10); }
 }

package/components/block/block.js

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