@happyvertical/smrt-commerce 0.55.16 → 0.55.17

package/dist/manifest.json

@@ -2,7 +2,7 @@
   "version": "1.0.0",
   "timestamp": 0,
   "packageName": "@happyvertical/smrt-commerce",
-  "packageVersion": "0.55.16",
+  "packageVersion": "0.55.17",
   "objects": {
     "@happyvertical/smrt-commerce:ContractCollection": {
       "name": "contractcollection",

package/dist/smrt-knowledge.json

@@ -3,12 +3,12 @@
   "sensitiveFieldsExcluded": true,
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "packageName": "@happyvertical/smrt-commerce",
-  "packageVersion": "0.55.16",
+  "packageVersion": "0.55.17",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "257cdf3e07aaf5bcb7b621e6169b5692d8d5b05fa089969891edfce7409f8351",
-    "packageJson": "287bfec433d0fb58647280d0a08a0237e76e582eda16f32f5af695cfa1cd4dc5",
+    "manifest": "983906acad2c027023edf6bda224632b7eaa770f5767265089308997343a3dca",
+    "packageJson": "7b04148b9dfe3698d1e3b5743ef38d10601c4bf8dfc25aa66d6935ee793645e4",
     "agents": "5a4901577a0f007cf44f04658c4394e1b1fe292f24701d0ff00ccf66095b4217",
     "moduleDoc:agents/invoice-quantity.md": "bc3b617d4fb8cc87511763b281283107557ba64795e64522193ef967a3715d32",
     "moduleDoc:agents/payment-allocations.md": "46c0b921f0e40060cd1caec2dcefb01ed6612e31e4bf220a1a0b61e4e2a58212",

package/dist/svelte/components/CustomerDetail.svelte

@@ -99,7 +99,7 @@ function creditLimit(amountMinor: number): string {
 }
 </script>
 
-<section class="party-detail">
+<section class="party-detail" data-smrt-component="CustomerDetail">
   {#if backHref}<Button href={backHref} variant="ghost">{t(M['commerce.party.back_to'], { plural })}</Button>{/if}
   <PageHeader title={customer.profile.name} subtitle={customer.profile.description ?? t(M['commerce.customer.details'])}>
     {#snippet actions()}
@@ -138,6 +138,8 @@ function creditLimit(amountMinor: number): string {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .party-detail { display: grid; gap: var(--smrt-spacing-5); max-inline-size: 64rem; min-inline-size: 0; overflow-wrap: anywhere; }
   .summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-4); }
   h2 { margin: 0 0 var(--smrt-spacing-4); font: var(--smrt-typography-title-medium-font); color: var(--smrt-color-on-surface); }
@@ -147,4 +149,5 @@ function creditLimit(amountMinor: number): string {
   a { color: var(--smrt-color-primary); }
   .address, .notes { margin: 0; white-space: pre-wrap; }
   @media (max-width: 42rem) { .summary-grid { grid-template-columns: minmax(0, 1fr); } dl { grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-1); } dd { margin-block-end: var(--smrt-spacing-2); } }
+}
 </style>

package/dist/svelte/components/CustomerDirectory.svelte

@@ -131,7 +131,7 @@ function customerTypeLabel(value: string | undefined): string {
 }
 </script>
 
-<section class="party-directory">
+<section class="party-directory" data-smrt-component="CustomerDirectory">
   <PageHeader title={plural} subtitle={labels.plural ? t(M['commerce.party.manage_named'], { plural }) : t(M['commerce.customer.manage'])}>
     {#snippet actions()}
       {#if canCreate && addHref}<Button href={addHref}>{labels.add ?? (labels.singular ? t(M['commerce.party.add_named'], { singular }) : t(M['commerce.customer.add']))}</Button>{/if}
@@ -198,6 +198,8 @@ function customerTypeLabel(value: string | undefined): string {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .party-directory { display: grid; gap: var(--smrt-spacing-5); max-inline-size: 64rem; min-inline-size: 0; }
   :global(.directory-search) { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) auto; align-items: end; gap: var(--smrt-spacing-3); }
   :global(.directory-search .form-group) { margin: 0; min-inline-size: 0; }
@@ -211,4 +213,5 @@ function customerTypeLabel(value: string | undefined): string {
   .meta { margin-block-start: var(--smrt-spacing-2); color: var(--smrt-color-on-surface-variant); }
   .pagination { display: flex; align-items: center; justify-content: center; gap: var(--smrt-spacing-3); }
   @media (max-width: 42rem) { :global(.directory-search) { grid-template-columns: minmax(0, 1fr); } :global(.directory-search .button) { inline-size: 100%; } .party-row { align-items: start; } }
+}
 </style>

package/dist/svelte/components/CustomerForm.svelte

@@ -222,6 +222,8 @@ const errorList = $derived(
 </Form>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   :global(.party-form) { display: grid; gap: var(--smrt-spacing-5); min-inline-size: 0; padding-block-end: var(--smrt-spacing-8); }
   .native-default-submit { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
   .form-error { margin: 0; padding: var(--smrt-spacing-4); border-inline-start: 4px solid var(--smrt-color-error); background: var(--smrt-color-error-container); color: var(--smrt-color-on-error-container); border-radius: var(--smrt-radius-small); }
@@ -231,4 +233,5 @@ const errorList = $derived(
   .field-grid, .address-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--smrt-spacing-4); }
   .address-pair { gap: var(--smrt-spacing-4); }
   @media (max-width: 42rem) { .field-grid, .address-pair { grid-template-columns: minmax(0, 1fr); } }
+}
 </style>

package/dist/svelte/components/InvoiceActions.svelte

@@ -55,7 +55,7 @@ const canMarkPaid = $derived(
 const canDelete = $derived(status === 'draft');
 </script>
 
-<div class="invoice-actions">
+<div class="invoice-actions" data-smrt-component="InvoiceActions">
   {#if canSend && onsend}
     <Button variant="primary" {size} onclick={onsend} disabled={loading}>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -114,9 +114,12 @@ const canDelete = $derived(status === 'draft');
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .invoice-actions {
     display: flex;
     gap: var(--smrt-spacing-2, 0.5rem);
     flex-wrap: wrap;
   }
+}
 </style>

package/dist/svelte/components/InvoiceAllocationFields.svelte

@@ -33,7 +33,7 @@ const names = $derived({
   ...fields,
 });
 </script>
-<div class="allocations">
+<div class="allocations" data-smrt-component="InvoiceAllocationFields">
   {#if !mayReadSources}<p>{t(M['commerce.preparation.restricted'])}</p>
   {:else if sources.length === 0}<p>{t(M['commerce.preparation.empty'])}</p>{/if}
       {#if allocations.length === 0}<p>{t(M['commerce.preparation.no_rows'])}</p>{/if}
@@ -66,7 +66,10 @@ const names = $derived({
 {#if canEdit}<Button type="submit" name={names.intent} value={addIntent} formnovalidate disabled={pending} variant="secondary">{t(M['commerce.preparation.add'])}</Button>{/if}
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .allocations { display: grid; gap: var(--smrt-spacing-4); min-width: 0; }
 fieldset { min-width: 0; margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); }
 p { margin: 0; }
+}
 </style>

package/dist/svelte/components/InvoiceCard.svelte

@@ -107,7 +107,7 @@ const isOverdue = $derived.by(() => {
 </script>
 
 {#if href}
-  <a class="invoice-card" {href} use:ripple>
+  <a class="invoice-card" {href} use:ripple data-smrt-component="InvoiceCard">
     <div class="card-header">
       <span class="invoice-number">{invoice.invoiceNumber}</span>
       <span class="status-badge {isOverdue ? 'status-error' : statusClass}">
@@ -133,7 +133,7 @@ const isOverdue = $derived.by(() => {
     {#if retained}{@render details?.(retained)}{/if}
   </a>
 {:else if retained}
-  <article class="invoice-card">
+  <article class="invoice-card" data-smrt-component="InvoiceCard">
     <div class="card-header">
       <span class="invoice-number">{invoice.invoiceNumber}</span>
       <span class="status-badge {statusClass}">{retained.statusLabel}</span>
@@ -150,7 +150,7 @@ const isOverdue = $derived.by(() => {
   </article>
 {:else}
   <!-- raw-primitive-allow: large pressable invoice card wrapping rich header/body/footer content with use:ripple, a structural selection control no Button primitive should own (mirrors the href anchor branch) -->
-  <button type="button" class="invoice-card" onclick={onclick} use:ripple>
+  <button type="button" class="invoice-card" onclick={onclick} use:ripple data-smrt-component="InvoiceCard">
     <div class="card-header">
       <span class="invoice-number">{invoice.invoiceNumber}</span>
       <span class="status-badge {isOverdue ? 'status-error' : statusClass}">
@@ -177,13 +177,15 @@ const isOverdue = $derived.by(() => {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .invoice-card {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-3, 12px);
-    padding: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-4);
     background-color: var(--smrt-color-surface-container-low);
-    border-radius: var(--smrt-radius-large, 12px);
+    border-radius: var(--smrt-radius-large);
     text-decoration: none;
     color: var(--smrt-color-on-surface);
     cursor: pointer;
@@ -223,12 +225,12 @@ const isOverdue = $derived.by(() => {
 
   .status-badge {
     display: inline-flex;
-    padding: 0 var(--smrt-spacing-2, 8px);
+    padding: 0 var(--smrt-spacing-2);
     height: 20px;
     align-items: center;
     font: var(--smrt-typography-label-small-font);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    border-radius: var(--smrt-radius-full, 10px);
+    border-radius: var(--smrt-radius-full);
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
@@ -254,7 +256,7 @@ const isOverdue = $derived.by(() => {
   .card-body {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .customer-name {
@@ -282,4 +284,5 @@ const isOverdue = $derived.by(() => {
     color: var(--smrt-color-error);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
+}
 </style>

package/dist/svelte/components/InvoiceEditor.svelte

@@ -86,7 +86,7 @@ function lineErrors(key: string) {
   ) as Partial<Record<keyof InvoiceLineFieldNames, string>>;
 }
 </script>
-<section class="invoice-editor" aria-labelledby={`${formId}-title`}>
+<section class="invoice-editor" aria-labelledby={`${formId}-title`} data-smrt-component="InvoiceEditor">
   <h2 id={`${formId}-title`}>{title ?? t(M['commerce.preparation.title'])}</h2>
   {#if review}<InvoiceReview {review} />{/if}
   {#if !canEdit}<p>{t(M['commerce.preparation.readonly'])}</p>{/if}
@@ -127,9 +127,12 @@ function lineErrors(key: string) {
   </Form>
 </section>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .invoice-editor, .fields, .header-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--smrt-spacing-4); min-width: 0; }
 .invoice-editor { max-width: 48rem; overflow-wrap: anywhere; }
 .header-fields { margin: 0; padding: 0; border: 0; }
 h2, p, dl, dd { margin: 0; }
 .summary dl { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-4); }
+}
 </style>

package/dist/svelte/components/InvoiceHeader.svelte

@@ -78,33 +78,33 @@ const statusConfig: Record<
 > = {
   draft: {
     label: 'Draft',
-    bg: 'var(--smrt-color-surface-variant, #e7e0ec)',
-    text: 'var(--smrt-color-on-surface-variant, #49454f)',
+    bg: 'var(--smrt-color-surface-variant)',
+    text: 'var(--smrt-color-on-surface-variant)',
   },
   sent: {
     label: 'Sent',
-    bg: 'var(--smrt-color-primary-container, #d3e3fd)',
-    text: 'var(--smrt-color-on-primary-container, #041e49)',
+    bg: 'var(--smrt-color-primary-container)',
+    text: 'var(--smrt-color-on-primary-container)',
   },
   viewed: {
     label: 'Viewed',
-    bg: 'var(--smrt-color-secondary-container, #e3e0f9)',
-    text: 'var(--smrt-color-on-secondary-container, #1d192b)',
+    bg: 'var(--smrt-color-secondary-container)',
+    text: 'var(--smrt-color-on-secondary-container)',
   },
   paid: {
     label: 'Paid',
-    bg: 'var(--smrt-color-tertiary-container, #ddf5e5)',
-    text: 'var(--smrt-color-on-tertiary-container, #0c1f15)',
+    bg: 'var(--smrt-color-tertiary-container)',
+    text: 'var(--smrt-color-on-tertiary-container)',
   },
   overdue: {
     label: 'Overdue',
-    bg: 'var(--smrt-color-error-container, #ffdad6)',
-    text: 'var(--smrt-color-on-error-container, #410002)',
+    bg: 'var(--smrt-color-error-container)',
+    text: 'var(--smrt-color-on-error-container)',
   },
   cancelled: {
     label: 'Cancelled',
-    bg: 'var(--smrt-color-error-container, #ffdad6)',
-    text: 'var(--smrt-color-error, #ba1a1a)',
+    bg: 'var(--smrt-color-error-container)',
+    text: 'var(--smrt-color-error)',
   },
 };
 
@@ -124,7 +124,7 @@ const isOverdue = $derived.by(() => {
 });
 </script>
 
-<div class="invoice-header">
+<div class="invoice-header" data-smrt-component="InvoiceHeader">
   <div class="header-main">
     <div class="invoice-title">
       <h2 class="invoice-number">{invoiceNumber}</h2>
@@ -184,14 +184,16 @@ const isOverdue = $derived.by(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .invoice-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--smrt-spacing-6, 1.5rem);
     padding: var(--smrt-spacing-6, 1.5rem);
-    background: var(--smrt-color-surface, #ffffff);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     flex-wrap: wrap;
   }
@@ -211,7 +213,7 @@ const isOverdue = $derived.by(() => {
   .invoice-number {
     font: var(--smrt-typography-title-large-font);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
     margin: 0;
   }
 
@@ -221,7 +223,7 @@ const isOverdue = $derived.by(() => {
     padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-3, 0.75rem);
     font: var(--smrt-typography-label-small-font);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     text-transform: capitalize;
   }
 
@@ -236,7 +238,7 @@ const isOverdue = $derived.by(() => {
     align-items: center;
     gap: var(--smrt-spacing-1_5, 0.375rem);
     font: var(--smrt-typography-body-medium-font);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .context-item svg {
@@ -257,7 +259,7 @@ const isOverdue = $derived.by(() => {
 
   .meta-label {
     font: var(--smrt-typography-label-small-font);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     text-transform: uppercase;
     letter-spacing: 0.025em;
   }
@@ -265,14 +267,15 @@ const isOverdue = $derived.by(() => {
   .meta-value {
     font: var(--smrt-typography-body-medium-font);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   .meta-item.overdue .meta-value {
-    color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
   }
 
   .meta-item.paid .meta-value {
-    color: var(--smrt-color-tertiary, #006c4c);
+    color: var(--smrt-color-tertiary);
   }
+}
 </style>

package/dist/svelte/components/InvoiceLineEditor.svelte

@@ -47,7 +47,7 @@ function refresh(event: Event) {
   onchange?.(draft);
 }
 </script>
-<fieldset oninput={refresh} onchange={refresh} disabled={!canEdit} class="invoice-line">
+<fieldset oninput={refresh} onchange={refresh} disabled={!canEdit} class="invoice-line" data-smrt-component="InvoiceLineEditor">
   <legend>{t(M['commerce.invoice.line'], { number })}</legend>
   <Input type="hidden" name={names.key} value={draft.key} interaction={false} />
   {#each ['description', 'sku', 'quantity', 'unitPrice'] as field}
@@ -82,8 +82,11 @@ function refresh(event: Event) {
   {#if canEdit}<Button type="submit" name={intentField} value={`${removePrefix}${draft.key}`} formnovalidate disabled={pending} variant="secondary">{t(M['commerce.invoice.remove'])}</Button>{/if}
 </fieldset>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .invoice-line { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--smrt-spacing-3); min-width: 0; margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); }
 legend { padding-inline: var(--smrt-spacing-2); }
 .totals { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-4); }
 dd { margin: 0; } p, dl { margin: 0; }
+}
 </style>

package/dist/svelte/components/InvoiceLineItems.svelte

@@ -87,7 +87,7 @@ const sourceLabels: Record<string, string> = {
 const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
 </script>
 
-<div class="line-items-container">
+<div class="line-items-container" data-smrt-component="InvoiceLineItems">
   {#if retained}
     {#if retained.lines.length === 0}
       <div class="empty-state"><p>{emptyMessage}</p></div>
@@ -199,6 +199,8 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .line-items-container {
     width: 100%;
   }
@@ -208,14 +210,14 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
     flex-direction: column;
     align-items: center;
     padding: var(--smrt-spacing-8, 2rem) var(--smrt-spacing-4, 1rem);
-    background: var(--smrt-color-surface-container-low, #f7f2fa);
-    border: 1px dashed var(--smrt-color-outline, #79747e);
+    background: var(--smrt-color-surface-container-low);
+    border: 1px dashed var(--smrt-color-outline);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     text-align: center;
   }
 
   .empty-state p {
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     margin: 0 0 var(--smrt-spacing-4, 1rem);
   }
 
@@ -228,14 +230,14 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
   .line-items-table th {
     text-align: left;
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-2, 0.5rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .line-items-table td {
     padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-2, 0.5rem);
-    border-bottom: 1px solid var(--smrt-color-surface-variant, #e7e0ec);
+    border-bottom: 1px solid var(--smrt-color-surface-variant);
     vertical-align: top;
   }
 
@@ -267,13 +269,13 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
   .item-category {
     display: block;
     font: var(--smrt-typography-label-small-font);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     text-transform: uppercase;
     letter-spacing: 0.025em;
   }
 
   .item-description {
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   .source-badge {
@@ -281,26 +283,26 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
     padding: var(--smrt-spacing-0_5, 0.125rem) var(--smrt-spacing-2, 0.5rem);
     font: var(--smrt-typography-label-small-font);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .source-expense {
-    background: var(--smrt-color-tertiary-container, #ddf5e5);
-    color: var(--smrt-color-on-tertiary-container, #0c1f15);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
   }
 
   .source-time {
-    background: var(--smrt-color-primary-container, #d3e3fd);
-    color: var(--smrt-color-on-primary-container, #041e49);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .source-manual {
-    background: var(--smrt-color-surface-variant, #e7e0ec);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .total-row td {
-    border-top: 2px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-top: 2px solid var(--smrt-color-outline-variant);
     border-bottom: none;
     font-weight: var(--smrt-typography-weight-semibold, 600);
     padding-top: var(--smrt-spacing-4, 1rem);
@@ -308,7 +310,7 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
 
   .total-label {
     text-align: right;
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   /*
@@ -328,7 +330,7 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
     background: transparent;
     border: none;
     border-radius: var(--smrt-radius-extra-small, 0.25rem);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     transition: all var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -339,13 +341,13 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
   }
 
   .line-items-container :global(.action-btn:hover) {
-    background: var(--smrt-color-surface-variant, #e7e0ec);
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface);
   }
 
   .line-items-container :global(.action-btn.delete:hover) {
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-error);
   }
 
   .line-items-container :global(.add-btn) {
@@ -355,9 +357,9 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-4, 1rem);
     font: var(--smrt-typography-label-large-font);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     background: transparent;
-    border: 1px dashed var(--smrt-color-primary, #005ac1);
+    border: 1px dashed var(--smrt-color-primary);
     border-radius: var(--smrt-radius-small, 0.375rem);
     transition: all var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
@@ -369,10 +371,11 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
   }
 
   .line-items-container :global(.add-btn:hover) {
-    background: var(--smrt-color-primary-container, #d3e3fd);
+    background: var(--smrt-color-primary-container);
   }
 
   .line-items-container :global(.add-btn-below) {
     margin-top: var(--smrt-spacing-3, 0.75rem);
   }
+}
 </style>

package/dist/svelte/components/InvoiceReview.svelte

@@ -12,12 +12,15 @@ let { review }: Props = $props();
 const { t } = useI18n();
 </script>
 
-<section aria-label={t(M['commerce.preparation.review'])} class="invoice-review" aria-live="polite">
+<section aria-label={t(M['commerce.preparation.review'])} class="invoice-review" aria-live="polite" data-smrt-component="InvoiceReview">
   <strong>{review.label}</strong>
   {#if review.message}<p>{review.message}</p>{/if}
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .invoice-review { padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); overflow-wrap: anywhere; }
   p { margin-block: var(--smrt-spacing-2) 0; }
+}
 </style>

package/dist/svelte/components/InvoiceTotals.svelte

@@ -86,7 +86,7 @@ function formatMoney(amount: number): string {
 }
 </script>
 
-<div class="invoice-totals" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+<div class="invoice-totals" class:sm={size === 'sm'} class:lg={size === 'lg'} data-smrt-component="InvoiceTotals">
   {#if retained}
     <div class="totals-row"><span class="totals-label">Subtotal</span><span class="totals-value">{formatInvoiceMinorUnits(retained.subtotalMinor, retained.currency)}</span></div>
     {#if retained.discountMinor !== undefined}<div class="totals-row"><span class="totals-label">Discount</span><span class="totals-value">{formatInvoiceMinorUnits(retained.discountMinor, retained.currency)}</span></div>{/if}
@@ -137,6 +137,8 @@ function formatMoney(amount: number): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .invoice-totals {
     display: flex;
     flex-direction: column;
@@ -161,7 +163,7 @@ function formatMoney(amount: number): string {
     justify-content: space-between;
     align-items: center;
     font: var(--smrt-typography-body-medium-font);
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   .sm .totals-row {
@@ -173,24 +175,24 @@ function formatMoney(amount: number): string {
   }
 
   .totals-label {
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .totals-value {
     font-variant-numeric: tabular-nums;
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   .totals-row.total {
     padding-top: var(--smrt-spacing-2, 0.5rem);
-    border-top: 2px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-top: 2px solid var(--smrt-color-outline-variant);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .totals-row.total .totals-label,
   .totals-row.total .totals-value {
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
     font: var(--smrt-typography-title-medium-font);
   }
 
@@ -200,26 +202,27 @@ function formatMoney(amount: number): string {
   }
 
   .totals-row.paid {
-    color: var(--smrt-color-tertiary, #006c4c);
+    color: var(--smrt-color-tertiary);
   }
 
   .totals-row.paid .totals-label {
-    color: var(--smrt-color-tertiary, #006c4c);
+    color: var(--smrt-color-tertiary);
   }
 
   .totals-row.balance {
     padding-top: var(--smrt-spacing-2, 0.5rem);
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-top: 1px solid var(--smrt-color-outline-variant);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .totals-row.balance.due .totals-label,
   .totals-row.balance.due .totals-value {
-    color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
   }
 
   .totals-row.balance.credit .totals-label,
   .totals-row.balance.credit .totals-value {
-    color: var(--smrt-color-tertiary, #006c4c);
+    color: var(--smrt-color-tertiary);
   }
+}
 </style>

package/dist/svelte/components/PartyAddressFields.svelte

@@ -88,8 +88,11 @@ $effect(() => {
 </fieldset>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .address-fields { min-inline-size: 0; margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); }
   legend { padding-inline: var(--smrt-spacing-2); font: var(--smrt-typography-title-medium-font); color: var(--smrt-color-on-surface); }
   .address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--smrt-spacing-4); }
   @media (max-width: 30rem) { .address-grid { grid-template-columns: minmax(0, 1fr); } }
+}
 </style>