@adia-ai/web-modules 0.8.36 → 0.8.37

package/billing/invoice-detail/invoice-detail.css

@@ -0,0 +1,305 @@
+/* ═══════════════════════════════════════════════════════════════
+   <invoice-detail-ui> — Page-level invoice composite.
+
+   Composes <card-ui> + <table-ui> + <stat-ui> + <tag-ui> +
+   <button-ui> + <empty-state-ui>. The host is a column laying out
+   header · parties · lines · totals · footer · empty regions in
+   DOM order. The totals stack is right-aligned via auto margin-
+   start. A print branch hides the action toolbar + zeroes the
+   page padding so the printed output is the invoice document.
+
+   SPEC: docs/specs/implementation-ready/SPEC-007-invoice-detail-page.md
+   Two-block @scope pattern per docs/specs/component-token-contract.md.
+   Zero raw color values (repo hard rule); rem only for sizes ≥ 3px.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Block 1: TOKEN DECLARATIONS ───────────────────────────────── */
+
+invoice-detail-ui {
+  --invoice-detail-bg:                    transparent;
+  --invoice-detail-page-padding:          var(--a-space-5);
+  --invoice-detail-section-gap:           var(--a-space-5);
+  --invoice-detail-totals-width:          min(360px, 100%);
+  --invoice-detail-status-badge-radius:   var(--a-radius-md);
+
+  --invoice-detail-meta-fg:               var(--a-fg-muted);
+  --invoice-detail-amount-fg:             var(--md-sys-color-neutral-on-surface);
+  --invoice-detail-total-size:            var(--a-text-2xl, 1.5rem);
+  --invoice-detail-total-weight:          var(--a-weight-bold, 700);
+  --invoice-detail-line-amount-align:     end;
+
+  --invoice-detail-heading-size:          var(--a-text-2xl, 1.5rem);
+  --invoice-detail-heading-weight:        var(--a-weight-bold, 700);
+  --invoice-detail-party-heading-fg:      var(--a-fg-muted);
+  --invoice-detail-party-heading-size:    var(--a-text-xs, 0.75rem);
+  --invoice-detail-totals-row-fg:         var(--md-sys-color-neutral-on-surface);
+  --invoice-detail-totals-row-muted-fg:   var(--a-fg-muted);
+  --invoice-detail-totals-border:         1px solid var(--md-sys-color-neutral-outline);
+}
+
+/* ── Block 2: SCOPED LAYOUT ────────────────────────────────────── */
+
+@scope (invoice-detail-ui) {
+
+  :scope {
+    display: flex;
+    flex-direction: column;
+    gap: var(--invoice-detail-section-gap);
+    background: var(--invoice-detail-bg);
+    padding: var(--invoice-detail-page-padding);
+    box-sizing: border-box;
+    /* Establish the inline-size container the @container rules below query —
+       without it the narrow-width parties-stack + totals-full-width rules were
+       dead (queried a non-existent ancestor container). Safe here: a block
+       column module that fills its container, not a basis-less flex item. */
+    container-type: inline-size;
+  }
+
+  /* ── Header region ── */
+  :scope > [data-header] {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "title actions"
+      "meta  actions";
+    gap: var(--a-space-2) var(--a-space-4);
+    align-items: start;
+  }
+
+  :scope > [data-header] > [data-header-title] {
+    grid-area: title;
+    display: flex;
+    align-items: center;
+    gap: var(--a-space-3);
+    flex-wrap: wrap;
+  }
+
+  :scope > [data-header] > [data-header-title] > [data-invoice-number] {
+    margin: 0;
+    font-size: var(--invoice-detail-heading-size);
+    font-weight: var(--invoice-detail-heading-weight);
+    color: var(--md-sys-color-neutral-on-surface);
+    line-height: 1.2;
+  }
+
+  :scope > [data-header] > [data-header-title] > [data-invoice-status] {
+    --tag-radius: var(--invoice-detail-status-badge-radius);
+  }
+
+  :scope > [data-header] > [data-header-title] > [data-invoice-status][hidden] {
+    display: none;
+  }
+
+  :scope > [data-header] > [data-header-meta] {
+    grid-area: meta;
+    display: flex;
+    gap: var(--a-space-4);
+    color: var(--invoice-detail-meta-fg);
+    font-size: var(--a-text-sm, 0.875rem);
+    flex-wrap: wrap;
+  }
+
+  :scope > [data-header] > [data-header-actions] {
+    grid-area: actions;
+    display: flex;
+    gap: var(--a-space-2);
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  /* Action buttons are sized to content (not stretch). The host's
+     grid auto column collapses to content width when the toolbar
+     is the only inhabitant. */
+  :scope > [data-header] > [data-header-actions] > [slot="header-actions"] {
+    flex: 0 0 auto;
+  }
+
+  /* ── Parties region ── customer + remit-to side by side. */
+  :scope > [data-parties] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--a-space-4);
+  }
+
+  :scope > [data-parties] > [data-customer],
+  :scope > [data-parties] > [data-remit-to] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-1);
+  }
+
+  :scope > [data-parties] [data-party-heading] {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: var(--invoice-detail-party-heading-size);
+    color: var(--invoice-detail-party-heading-fg);
+    margin-block-end: var(--a-space-1);
+  }
+
+  :scope > [data-parties] [data-party-name] {
+    font-weight: var(--a-weight-semibold, 600);
+    color: var(--md-sys-color-neutral-on-surface);
+  }
+
+  :scope > [data-parties] [data-party-email],
+  :scope > [data-parties] [data-party-address] {
+    color: var(--invoice-detail-meta-fg);
+    font-size: var(--a-text-sm, 0.875rem);
+  }
+
+  /* When the override slot is filled, hide the default block. The
+     consumer's [slot="customer-block"] / [slot="remit-to-block"]
+     children are absorbed into the relevant data-customer /
+     data-remit-to wrapper during stamp; we detect that by checking
+     for any direct-child with that [slot] attribute. */
+  :scope > [data-parties] > [data-customer]:has(> [slot="customer-block"]) > [data-customer-default],
+  :scope > [data-parties] > [data-remit-to]:has(> [slot="remit-to-block"]) > [data-remit-to-default] {
+    display: none;
+  }
+
+  /* If remit-to has neither slotted content nor default content,
+     hide it so the parties region collapses to a single column.   */
+  :scope > [data-parties] > [data-remit-to]:not(:has(> [slot="remit-to-block"])) > [data-remit-to-default]:empty {
+    display: none;
+  }
+
+  /* ── Lines region ── card wrapping the line-items table. */
+  :scope > [data-lines] {
+    display: block;
+  }
+
+  :scope > [data-lines] > [data-lines-card] {
+    --card-padding: 0;
+  }
+
+  /* The line-items table fills the card edge-to-edge (--card-padding: 0), so the
+     last body row's cell border-bottom lands 1px inside the card's own bottom
+     border — a doubled line at the bottom edge (bug-35). table-ui has no outer
+     border (the row dividers ARE its edges), so we drop only the LAST row's
+     bottom divider here; the card border closes the table. Header + inter-row
+     dividers stay. */
+  :scope > [data-lines] [data-lines-table] [data-body] > [role="row"]:last-child [role="gridcell"] {
+    border-bottom: none;
+  }
+
+  /* ── Totals region ── right-aligned stack. */
+  :scope > [data-totals] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-2);
+    margin-inline-start: auto;
+    inline-size: var(--invoice-detail-totals-width);
+    box-sizing: border-box;
+  }
+
+  :scope > [data-totals] > [data-totals-row] {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--a-space-3);
+    color: var(--invoice-detail-totals-row-muted-fg);
+    font-size: var(--a-text-sm, 0.875rem);
+  }
+
+  :scope > [data-totals] > [data-totals-row] > [data-totals-value] {
+    text-align: var(--invoice-detail-line-amount-align);
+    color: var(--invoice-detail-amount-fg);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :scope > [data-totals] > [data-grand-total] {
+    border-block-start: var(--invoice-detail-totals-border);
+    padding-block-start: var(--a-space-2);
+    color: var(--invoice-detail-totals-row-fg);
+  }
+
+  :scope > [data-totals] > [data-grand-total] > [data-totals-label] {
+    font-weight: var(--invoice-detail-total-weight);
+  }
+
+  :scope > [data-totals] > [data-grand-total] > [data-totals-value] {
+    font-size: var(--invoice-detail-total-size);
+    font-weight: var(--invoice-detail-total-weight);
+    color: var(--invoice-detail-amount-fg);
+  }
+
+  /* ── Footer region ── only display when content slotted or notes. */
+  :scope > [data-footer] {
+    color: var(--invoice-detail-meta-fg);
+    font-size: var(--a-text-sm, 0.875rem);
+  }
+
+  :scope > [data-footer]:not(:has(> [slot="footer"])) > [data-footer-notes]:empty {
+    display: none;
+  }
+
+  :scope > [data-footer]:not(:has(> [slot="footer"])):not(:has([data-footer-notes]:not(:empty))) {
+    display: none;
+  }
+
+  /* ── Empty state ── gated via the [empty] attribute.
+     Hide [data-empty] when host is NOT empty; do NOT set a display
+     value when shown (would clobber empty-state-ui's flex layout). */
+  :scope:not([empty]) > [data-empty] {
+    display: none;
+  }
+
+  :scope[empty] > [data-parties],
+  :scope[empty] > [data-lines],
+  :scope[empty] > [data-totals],
+  :scope[empty] > [data-footer] {
+    display: none;
+  }
+
+  /* ── Loading state ── dim the chrome + show the busy cursor. */
+  :scope[loading] {
+    opacity: 0.7;
+  }
+
+  /* ── Density passthrough ── matches table-ui density cascade. */
+  :scope[density="compact"] > [data-lines] > [data-lines-card] table-ui {
+    --table-row-py: var(--a-space-1);
+  }
+
+  /* ── Print branch ── hides actions + zeroes padding on print. */
+  @media print {
+    :scope[printable] {
+      padding: 0;
+      background: transparent;
+    }
+
+    :scope[printable] > [data-header] > [data-header-actions] {
+      display: none;
+    }
+
+    :scope[printable] [data-invoice-status] {
+      /* Keep the status legible in print — outline rather than fill. */
+      --tag-bg: transparent;
+    }
+  }
+
+  /* ── Narrow viewport ── stack parties single-column. */
+  @container (max-width: 640px) {
+    :scope > [data-parties] {
+      grid-template-columns: 1fr;
+    }
+    /* bug-24: the totals stack drops its 360px cap + right-align and spans the
+       full width at narrow widths (where the partial-width block reads as a
+       stray right-floated column). */
+    :scope > [data-totals] {
+      inline-size: 100%;
+      margin-inline-start: 0;
+    }
+    :scope > [data-header] {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "title"
+        "meta"
+        "actions";
+    }
+    :scope > [data-header] > [data-header-actions] {
+      justify-content: flex-start;
+    }
+  }
+}

package/billing/invoice-detail/invoice-detail.js

@@ -0,0 +1,16 @@
+/**
+ * `<invoice-detail-ui>` — auto-registers the tag on import.
+ *
+ * For a non-side-effect class import (test isolation, tag override),
+ * use the class export from `./invoice-detail.class.js`:
+ *
+ *   import { UIInvoiceDetail } from '@adia-ai/web-modules/billing/invoice-detail/class';
+ */
+
+import { UIInvoiceDetail } from './invoice-detail.class.js';
+
+if (!customElements.get('invoice-detail-ui')) {
+  customElements.define('invoice-detail-ui', UIInvoiceDetail);
+}
+
+export { UIInvoiceDetail };