@adia-ai/web-components 0.6.33 → 0.6.35

package/components/alert/alert.a2ui.json

@@ -23,6 +23,16 @@
       "type": "string",
       "default": ""
     },
+    "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
+    },
+    "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": ""
+    },
     "closable": {
       "description": "Whether a close button is displayed. Alias [dismissible] is also accepted (same semantics, different spelling — the corpus and many libraries use both; both map to the same state).",
       "type": "boolean",
@@ -31,16 +41,47 @@
     "component": {
       "const": "Alert"
     },
+    "currency": {
+      "description": "Dunning mode only — ISO 4217 currency code driving the `Intl.NumberFormat` style=\"currency\" rendering. Defaults to `USD`.",
+      "type": "string",
+      "default": "USD"
+    },
     "dismissible": {
       "description": "Public alias for [closable] — same semantics. Both attributes render the close button. Use whichever spelling matches your authoring style.",
       "type": "boolean",
       "default": false
     },
+    "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": ""
+    },
     "icon": {
       "description": "Icon identifier displayed before the message content",
       "type": "string",
       "default": ""
     },
+    "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",
+      "enum": [
+        "",
+        "dunning"
+      ],
+      "default": ""
+    },
+    "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",
+      "enum": [
+        "",
+        "declined",
+        "expired",
+        "insufficient",
+        "network"
+      ],
+      "default": ""
+    },
     "text": {
       "description": "Single-line alert message. For two-line \"headline + body\" alerts, use [title] + [description] instead. For rich content (links, formatting), use the [slot=\"content\"] slot.",
       "type": "string",
@@ -66,12 +107,26 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
+    "anti_patterns": [
+      {
+        "fix": "<alert-ui pattern=\"dunning\" variant=\"danger\">",
+        "why": "Dunning is always a failure surface; info mis-signals severity.",
+        "wrong": "<alert-ui pattern=\"dunning\" variant=\"info\">"
+      },
+      {
+        "fix": "<alert-ui pattern=\"dunning\" amount=\"24.50\" currency=\"USD\" due-at=\"2026-05-20\">",
+        "why": "Amount baked into title defeats Intl formatting + telemetry.",
+        "wrong": "<alert-ui pattern=\"dunning\" title=\"Payment failed $24.50\">"
+      }
+    ],
     "category": "container",
     "composes": [],
     "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\"`)."
       }
     },
     "examples": [
@@ -84,6 +139,11 @@
         "description": "Card with error alert and a retry button for error state display.",
         "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"alert\"\n    ]\n  },\n  {\n    \"id\": \"alert\",\n    \"component\": \"Alert\",\n    \"variant\": \"error\",\n    \"title\": \"Something went wrong\",\n    \"description\": \"We encountered an error while loading the data. Please try again.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"retry\"\n    ]\n  },\n  {\n    \"id\": \"retry\",\n    \"component\": \"Button\",\n    \"text\": \"Retry\",\n    \"icon\": \"refresh\",\n    \"variant\": \"primary\"\n  }\n]",
         "name": "error-state"
+      },
+      {
+        "description": "Billing dunning banner — declined card with retry + update-card actions (SPEC-006).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Alert\",\n    \"pattern\": \"dunning\",\n    \"variant\": \"danger\",\n    \"amount\": 24.5,\n    \"currency\": \"USD\",\n    \"dueAt\": \"2026-05-20T00:00:00Z\",\n    \"cardLast4\": \"4242\",\n    \"reason\": \"declined\",\n    \"children\": [\"btn-update\", \"btn-retry\"]\n  },\n  {\n    \"id\": \"btn-update\",\n    \"component\": \"Button\",\n    \"text\": \"Update payment method\",\n    \"variant\": \"primary\",\n    \"slot\": \"actions\"\n  },\n  {\n    \"id\": \"btn-retry\",\n    \"component\": \"Button\",\n    \"text\": \"Retry charge\",\n    \"variant\": \"outline\",\n    \"slot\": \"actions\"\n  }\n]",
+        "name": "dunning-payment-failed"
       }
     ],
     "keywords": [
@@ -112,6 +172,9 @@
       "action": {
         "description": "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\"`."
+      },
       "close": {
         "description": "Close button. Stamped automatically when `closable` is set; the stamped element is `<button-ui slot=\"close\" icon=\"x\" variant=\"ghost\" size=\"sm\">`. Override by passing a custom `slot=\"close\"` button."
       },

package/components/alert/{class.js → alert.class.js}

@@ -50,6 +50,17 @@ export class UIAlert extends UIElement {
     closable:    { type: Boolean, default: false, reflect: true },
     dismissible: { type: Boolean, default: false, reflect: true },
     icon:        { type: String,  default: '', reflect: true },
+    /* SPEC-006 dunning pattern \u2014 billing payment-failed mode. When
+       `pattern="dunning"`, the alert stamps an Intl-formatted amount +
+       due-date + decline-reason from the props below and re-dispatches
+       descendant `[data-dunning-action]` button clicks as a unified
+       `dunning-action` event. See SPEC-006 for the full rationale. */
+    pattern:     { type: String,  default: '', reflect: true },
+    amount:      { type: Number,  default: 0,  reflect: true },
+    currency:    { type: String,  default: 'USD', reflect: true },
+    dueAt:       { type: String,  default: '', reflect: true, attribute: 'due-at' },
+    cardLast4:   { type: String,  default: '', reflect: true, attribute: 'card-last4' },
+    reason:      { type: String,  default: '', reflect: true },
   };
 
   static parts = {
@@ -62,6 +73,15 @@ export class UIAlert extends UIElement {
     close:   '<button-ui slot="close" icon="x" variant="ghost" size="sm" aria-label="Close"></button-ui>',
   };
 
+  /* SPEC-006 \u2014 decline-reason \u2192 leading icon map. Used when
+     `pattern="dunning"` and no explicit [icon] override is set. */
+  static #DUNNING_ICONS = {
+    declined: 'x-circle',
+    expired: 'clock',
+    insufficient: 'wallet',
+    network: 'wifi-slash',
+  };
+
   static template = () => null;
 
   /**
@@ -100,7 +120,28 @@ export class UIAlert extends UIElement {
   }
 
   #onPress = (e) => {
-    if (e.target.closest('[slot="close"]')) this.#close();
+    if (e.target.closest('[slot="close"]')) {
+      this.#close();
+      return;
+    }
+    // SPEC-006 — dunning action delegation. Re-dispatch as a unified
+    // `dunning-action` event so downstream telemetry only listens once.
+    if (this.pattern === 'dunning') {
+      const trigger = e.target.closest('[data-dunning-action]');
+      if (trigger && this.contains(trigger)) {
+        const action = trigger.getAttribute('data-dunning-action') || '';
+        this.dispatchEvent(new CustomEvent('dunning-action', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            action,
+            amount: this.amount,
+            currency: this.currency,
+            dueAt: this.dueAt,
+          },
+        }));
+      }
+    }
   };
 
   connected() {
@@ -108,7 +149,7 @@ export class UIAlert extends UIElement {
     this.#updateRole();
 
     // Stamp default DOM if nothing was provided
-    if (this.icon) this.ensure('leading');
+    if (this.icon || (this.pattern === 'dunning' && this.reason)) this.ensure('leading');
     this.ensure('content');
     if (this.closable) this.ensure('close');
 
@@ -120,6 +161,15 @@ export class UIAlert extends UIElement {
   }
 
   render() {
+    // SPEC-006 — dunning pattern: branch into a separate render path
+    // that stamps Intl-formatted amount + due-date + reason into the
+    // content slot. The standard alert render path below is skipped.
+    if (this.pattern === 'dunning') {
+      this.#renderDunning();
+      this.#updateRole();
+      return;
+    }
+
     // Icon
     if (this.icon) {
       const leading = this.ensure('leading');
@@ -182,6 +232,143 @@ export class UIAlert extends UIElement {
     this.#updateRole();
   }
 
+  /**
+   * SPEC-006 — dunning render path.
+   *
+   * Stamps the content slot with a bolded title (per-reason copy) +
+   * a metadata line ("Card ending 4242 · declined May 20, 2026") +
+   * an Intl-formatted amount. The leading icon is selected from
+   * `#DUNNING_ICONS` keyed by the [reason] attribute (or [icon] if
+   * the consumer explicitly overrode).
+   *
+   * Re-runs on every render — formatting is stable + idempotent so a
+   * re-stamp produces the same DOM. We rebuild the content subtree
+   * each render to keep the auto-stamp markers from drifting between
+   * the dunning path and the standard path if [pattern] is toggled
+   * at runtime.
+   */
+  #renderDunning() {
+    // Leading icon — explicit [icon] beats the reason map
+    const iconName = this.icon || UIAlert.#DUNNING_ICONS[this.reason] || 'x-circle';
+    const leading = this.ensure('leading');
+    if (leading) leading.setAttribute('name', iconName);
+
+    // Content
+    const content = this.ensure('content');
+    if (!content) return;
+    content.setAttribute('data-alert-auto', 'dunning');
+    content.replaceChildren();
+
+    // Title line — explicit [title] beats the per-reason default
+    const titleText = this.title || this.#defaultDunningTitle();
+    if (titleText) {
+      const strong = document.createElement('strong');
+      strong.setAttribute('data-dunning-title', '');
+      strong.textContent = titleText;
+      content.appendChild(strong);
+    }
+
+    // Body line — formatted amount + metadata. We put amount first
+    // (it's the most-scanned datum) followed by the meta string.
+    const amountText = this.#formatAmount();
+    const metaText = this.#dunningMeta();
+    if (amountText || metaText) {
+      content.appendChild(document.createTextNode(' '));
+      if (amountText) {
+        const amt = document.createElement('span');
+        amt.setAttribute('data-dunning-amount', '');
+        amt.textContent = amountText;
+        content.appendChild(amt);
+      }
+      if (amountText && metaText) {
+        content.appendChild(document.createTextNode(' '));
+      }
+      if (metaText) {
+        const meta = document.createElement('span');
+        meta.setAttribute('data-dunning-meta', '');
+        meta.textContent = metaText;
+        content.appendChild(meta);
+      }
+    }
+
+    // Composed accessible name — title + amount + meta in DOM order
+    const aria = [titleText, amountText, metaText].filter(Boolean).join('. ');
+    if (aria) this.setAttribute('aria-label', aria);
+
+    // Close button — dismissible-on-dunning is advisory-not-blocked
+    // (SPEC-006 OD-002 lean A). Pass through.
+    if (this.closable || this.dismissible) {
+      this.ensure('close');
+    } else {
+      this.drop('close');
+    }
+  }
+
+  #defaultDunningTitle() {
+    switch (this.reason) {
+      case 'expired': return 'Card expired';
+      case 'insufficient': return 'Insufficient funds';
+      case 'network': return 'Network error';
+      case 'declined': return 'Payment failed';
+      default: return this.variant === 'warning' ? 'Payment due soon' : 'Payment failed';
+    }
+  }
+
+  #formatAmount() {
+    if (!this.amount && this.amount !== 0) return '';
+    if (this.amount === 0) return '';
+    try {
+      const lang = this.getAttribute('lang') || this.lang || undefined;
+      return new Intl.NumberFormat(lang, {
+        style: 'currency',
+        currency: this.currency || 'USD',
+      }).format(this.amount);
+    } catch {
+      // Fallback if Intl rejects the currency code
+      return `${this.currency || ''} ${this.amount}`.trim();
+    }
+  }
+
+  #formatDueDate() {
+    if (!this.dueAt) return '';
+    const d = new Date(this.dueAt);
+    if (Number.isNaN(d.getTime())) return '';
+    try {
+      const lang = this.getAttribute('lang') || this.lang || undefined;
+      return new Intl.DateTimeFormat(lang, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }).format(d);
+    } catch {
+      return d.toDateString();
+    }
+  }
+
+  #dunningMeta() {
+    const parts = [];
+    if (this.cardLast4) parts.push(`Card ending ${this.cardLast4}`);
+    if (this.reason && this.reason !== 'declined') {
+      parts.push(this.#reasonLabel());
+    }
+    const date = this.#formatDueDate();
+    if (date) {
+      const prefix = this.variant === 'warning' ? 'due' : 'failed';
+      parts.push(`${prefix} ${date}`);
+    }
+    return parts.join(' · ');
+  }
+
+  #reasonLabel() {
+    switch (this.reason) {
+      case 'expired': return 'expired';
+      case 'insufficient': return 'insufficient funds';
+      case 'network': return 'network error';
+      case 'declined': return 'declined';
+      default: return '';
+    }
+  }
+
   #updateRole() {
     const role = (this.variant === 'danger' || this.variant === 'warning') ? 'alert' : 'status';
     this.setAttribute('role', role);

package/components/alert/alert.css

@@ -1,20 +1,26 @@
 @scope (alert-ui) {
   :where(:scope) {
     /* ── Colors ── */
-    --alert-bg:       var(--a-bg-muted);
-    --alert-fg:       var(--a-fg);
-    --alert-border:   var(--a-border-subtle);
-    --alert-icon-fg:  var(--a-fg-muted);
+    --alert-bg-default:       var(--a-bg-muted);
+    --alert-fg-default:       var(--a-fg);
+    --alert-border-default:   var(--a-border-subtle);
+    --alert-icon-fg-default:  var(--a-fg-muted);
 
     /* ── Layout ── */
-    --alert-radius:   var(--a-radius-md);
-    --alert-px:       var(--a-space-3);
-    --alert-py:       var(--a-space-2);
-    --alert-gap:      var(--a-space-2);
+    --alert-radius-default:   var(--a-radius-md);
+    --alert-px-default:       var(--a-space-3);
+    --alert-py-default:       var(--a-space-2);
+    --alert-gap-default:      var(--a-space-2);
 
     /* ── Typography ── */
-    --alert-font:        var(--a-ui-size);
-    --alert-line-height: var(--a-ui-line-height, 1.5);
+    --alert-font-default:        var(--a-ui-size);
+    --alert-line-height-default: var(--a-ui-line-height, 1.5);
+
+    /* ── SPEC-006 dunning pattern tokens ── */
+    --alert-amount-font-default: var(--a-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    --alert-meta-fg-default:     var(--a-fg-muted);
+    --alert-actions-gap-default: var(--a-space-2);
+    --alert-actions-mt-default:  var(--a-space-2);
   }
 
   :scope {
@@ -26,43 +32,43 @@
        text on multi-line alerts. The leading slot's own height = body
        line-height (below) means the icon optically centers on line 1. */
     align-items: start;
-    gap: var(--alert-gap);
-    padding: var(--alert-py) var(--alert-px);
-    border: 1px solid var(--alert-border);
-    border-radius: var(--alert-radius);
-    font-size: var(--alert-font);
-    line-height: var(--alert-line-height);
-    color: var(--alert-fg);
-    background: var(--alert-bg);
+    gap: var(--alert-gap, var(--alert-gap-default));
+    padding: var(--alert-py, var(--alert-py-default)) var(--alert-px, var(--alert-px-default));
+    border: 1px solid var(--alert-border, var(--alert-border-default));
+    border-radius: var(--alert-radius, var(--alert-radius-default));
+    font-size: var(--alert-font, var(--alert-font-default));
+    line-height: var(--alert-line-height, var(--alert-line-height-default));
+    color: var(--alert-fg, var(--alert-fg-default));
+    background: var(--alert-bg, var(--alert-bg-default));
   }
 
   /* ── Variants ── */
   :scope[variant="info"] {
-    --alert-bg:      var(--a-info-muted);
-    --alert-fg:      var(--a-info-text);
-    --alert-border:  var(--a-info-border-subtle);
-    --alert-icon-fg: var(--a-info-strong);
+    --alert-bg-default:      var(--a-info-muted);
+    --alert-fg-default:      var(--a-info-text);
+    --alert-border-default:  var(--a-info-border-subtle);
+    --alert-icon-fg-default: var(--a-info-strong);
   }
 
   :scope[variant="success"] {
-    --alert-bg:      var(--a-success-muted);
-    --alert-fg:      var(--a-success-text);
-    --alert-border:  var(--a-success-border-subtle);
-    --alert-icon-fg: var(--a-success-strong);
+    --alert-bg-default:      var(--a-success-muted);
+    --alert-fg-default:      var(--a-success-text);
+    --alert-border-default:  var(--a-success-border-subtle);
+    --alert-icon-fg-default: var(--a-success-strong);
   }
 
   :scope[variant="warning"] {
-    --alert-bg:      var(--a-warning-muted);
-    --alert-fg:      var(--a-warning-text);
-    --alert-border:  var(--a-warning-border-subtle);
-    --alert-icon-fg: var(--a-warning-strong);
+    --alert-bg-default:      var(--a-warning-muted);
+    --alert-fg-default:      var(--a-warning-text);
+    --alert-border-default:  var(--a-warning-border-subtle);
+    --alert-icon-fg-default: var(--a-warning-strong);
   }
 
   :scope[variant="danger"] {
-    --alert-bg:      var(--a-danger-muted);
-    --alert-fg:      var(--a-danger-text);
-    --alert-border:  var(--a-danger-border-subtle);
-    --alert-icon-fg: var(--a-danger-strong);
+    --alert-bg-default:      var(--a-danger-muted);
+    --alert-fg-default:      var(--a-danger-text);
+    --alert-border-default:  var(--a-danger-border-subtle);
+    --alert-icon-fg-default: var(--a-danger-strong);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base — same tokens
@@ -72,21 +78,21 @@
      than carrying tonal weight. */
   :scope[variant="muted"],
   :scope[variant="neutral"] {
-    --alert-bg:      var(--a-bg-muted);
-    --alert-fg:      var(--a-fg);
-    --alert-border:  var(--a-border-subtle);
-    --alert-icon-fg: var(--a-fg-muted);
+    --alert-bg-default:      var(--a-bg-muted);
+    --alert-fg-default:      var(--a-fg);
+    --alert-border-default:  var(--a-border-subtle);
+    --alert-icon-fg-default: var(--a-fg-muted);
   }
 
   /* ── Slots ── */
   :scope [slot="leading"] {
     flex-shrink: 0;
-    color: var(--alert-icon-fg);
+    color: var(--alert-icon-fg, var(--alert-icon-fg-default));
     /* Box height = one line of body so the icon optical-centers on the
        first line under `align-items: start`. */
     display: inline-flex;
     align-items: center;
-    min-height: calc(var(--alert-font) * var(--alert-line-height));
+    min-height: calc(var(--alert-font, var(--alert-font-default)) * var(--alert-line-height, var(--alert-line-height-default)));
     /* `ensure()` appends the leading-slot icon to the host, which
        puts it after any consumer-provided content in DOM order.
        Force it to the visual lead via flex `order` so the icon
@@ -113,6 +119,78 @@
      sit on the same first-line baseline. */
   :scope [slot="close"] {
     flex-shrink: 0;
-    min-height: calc(var(--alert-font) * var(--alert-line-height));
+    min-height: calc(var(--alert-font, var(--alert-font-default)) * var(--alert-line-height, var(--alert-line-height-default)));
+  }
+
+  /* ──────────────────────────────────────────────────────────────
+     SPEC-006 — Dunning / Payment-Failed pattern
+     ──────────────────────────────────────────────────────────────
+     `pattern="dunning"` switches the alert into a billing notice
+     layout. The default alert is a single-row flex container; the
+     dunning mode keeps the leading icon and close button in a
+     "header" row but stacks the content + actions vertically below.
+
+     We achieve this by switching the host to `flex-wrap: wrap` and
+     assigning `order` per slot. The standard alert children authored
+     in arbitrary DOM order (buttons before content is the common
+     consumer mistake) are visually re-ordered by these rules so the
+     final layout always reads icon → content → actions → close. */
+
+  :scope[pattern="dunning"] {
+    flex-wrap: wrap;
+    row-gap: var(--alert-actions-mt, var(--alert-actions-mt-default));
+    /* Use align-items: flex-start so the leading icon hugs the top
+       of the message regardless of how tall the content + actions
+       column grows. */
+    align-items: flex-start;
+  }
+
+  /* Visual order — icon first, then content, then actions, then
+     close. Source DOM order is irrelevant under these rules. The
+     `order` integers leave room (10/20/30/40) for future expansion
+     without renumbering. */
+  :scope[pattern="dunning"] [slot="leading"]   { order: 10; }
+  :scope[pattern="dunning"] [slot="content"]   { order: 20; }
+  :scope[pattern="dunning"] [slot="actions"]   { order: 30; }
+  :scope[pattern="dunning"] [slot="close"]     { order: 40; }
+
+  :scope[pattern="dunning"] [data-dunning-amount] {
+    font-family: var(--alert-amount-font, var(--alert-amount-font-default));
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    /* Inherit color from the variant; tabular-nums + monospace make
+       the amount the scannable focal datum. */
+  }
+
+  :scope[pattern="dunning"] [data-dunning-meta] {
+    color: var(--alert-meta-fg, var(--alert-meta-fg-default));
+    font-size: calc(var(--alert-font, var(--alert-font-default)) * 0.9375);
+  }
+
+  :scope[pattern="dunning"] [data-dunning-title] {
+    display: inline-block;
+    margin-inline-end: var(--a-space-1, 0.25rem);
+  }
+
+  /* Actions slot — sits below the content as a row of buttons.
+     `flex-basis: 100%` combined with the `order: 30` rule pushes
+     the actions onto their own row after the content row. The
+     padding-inline-start indents the buttons under the message
+     column (so they left-align with the body text, not the leading
+     icon). */
+  :scope[pattern="dunning"] [slot="actions"] {
+    flex-basis: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--alert-actions-gap, var(--alert-actions-gap-default));
+    padding-inline-start: calc(var(--alert-font, var(--alert-font-default)) + var(--alert-gap, var(--alert-gap-default)));
+  }
+
+  /* Lenient — when a bare button-ui carries data-dunning-action but
+     no explicit slot=actions, give it the same visual order as the
+     actions group so authoring oversights don't break layout. */
+  :scope[pattern="dunning"] > [data-dunning-action]:not([slot]) {
+    order: 30;
+    flex-basis: 100%;
   }
 }

package/components/alert/alert.d.ts

@@ -21,18 +21,31 @@ inline upgrade prompts.
 import { UIElement } from '../../core/element.js';
 
 export type AlertCloseEvent = CustomEvent<unknown>;
+export type AlertDunningActionEvent = CustomEvent<unknown>;
 
 export class UIAlert extends UIElement {
   /** Bold headline rendered as the first line of the alert content. Pair with [description] for the canonical "banner" pattern (headline + body). When [title] or [description] is set, the [text] prop is ignored. */
   title: string;
   /** Body text rendered as the second line of the alert content, below [title]. May be used alone (without [title]) for a single muted-body message. */
   description: string;
+  /** 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`. */
+  amount: number;
+  /** Dunning mode only — last 4 digits of the declined card. Rendered as "ending 4242". Ignored when [pattern] is not `dunning`. Attribute spelling: `card-last4`. */
+  cardLast4: string;
   /** Whether a close button is displayed. Alias [dismissible] is also accepted (same semantics, different spelling — the corpus and many libraries use both; both map to the same state). */
   closable: boolean;
+  /** Dunning mode only — ISO 4217 currency code driving the `Intl.NumberFormat` style="currency" rendering. Defaults to `USD`. */
+  currency: string;
   /** Public alias for [closable] — same semantics. Both attributes render the close button. Use whichever spelling matches your authoring style. */
   dismissible: boolean;
+  /** Dunning mode only — ISO 8601 due / failed-at timestamp. Formatted via `Intl.DateTimeFormat`. Ignored when [pattern] is not `dunning`. Attribute spelling: `due-at`. */
+  dueAt: string;
   /** Icon identifier displayed before the message content */
   icon: string;
+  /** 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. */
+  pattern: '' | 'dunning';
+  /** 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. */
+  reason: '' | 'declined' | 'expired' | 'insufficient' | 'network';
   /** Single-line alert message. For two-line "headline + body" alerts, use [title] + [description] instead. For rich content (links, formatting), use the [slot="content"] slot. */
   text: string;
   /** Semantic color variant. */
@@ -44,4 +57,5 @@ export class UIAlert extends UIElement {
     options?: boolean | AddEventListenerOptions,
   ): void;
   addEventListener(type: 'close', listener: (ev: AlertCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'dunning-action', listener: (ev: AlertDunningActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/alert/alert.js

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