@happyvertical/smrt-commerce 0.55.15 → 0.55.17

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>

package/dist/svelte/components/PartyContactFields.svelte

@@ -65,7 +65,7 @@ const text = $derived({
 });
 </script>
 
-<section class="contacts" aria-labelledby={headingId}>
+<section class="contacts" aria-labelledby={headingId} data-smrt-component="PartyContactFields">
   <div class="contacts-heading">
     <h2 id={headingId}>{text.heading}</h2>
     {#if !readOnly && canAdd}
@@ -132,6 +132,8 @@ const text = $derived({
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .contacts { display: grid; gap: var(--smrt-spacing-4); min-inline-size: 0; }
   .contacts-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); flex-wrap: wrap; }
   h2, h3, p { margin: 0; }
@@ -150,4 +152,5 @@ const text = $derived({
     .field-grid { grid-template-columns: minmax(0, 1fr); }
     .contact-card { padding: var(--smrt-spacing-3); }
   }
+}
 </style>

package/dist/svelte/components/PricingVersionDecision.svelte

@@ -59,7 +59,7 @@ const { t } = useI18n();
 const id = $props.id();
 </script>
 
-<section class="pricing-decision">
+<section class="pricing-decision" data-smrt-component="PricingVersionDecision">
   <PricingVersionSummary {version} />
   {#if error}<p role="alert">{error}</p>{/if}
   {#if readOnly}
@@ -82,7 +82,10 @@ const id = $props.id();
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .pricing-decision { min-width: 0; overflow-wrap: anywhere; }
 .decisions { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-3); margin-top: var(--smrt-spacing-3); }
 .decisions :global(button) { max-width: 100%; white-space: normal; }
+}
 </style>

package/dist/svelte/components/PricingVersionSummary.svelte

@@ -23,7 +23,7 @@ function amount(value: number | null): string {
 }
 </script>
 
-<section class="pricing-summary" aria-label={version.label}>
+<section class="pricing-summary" aria-label={version.label} data-smrt-component="PricingVersionSummary">
   <h3>{version.label}</h3>
   <p>{version.counterparty} · {version.status}</p>
   <p><strong>{t(M['commerce.pricing.total'])}: {amount(version.total.amountMinor)} {version.total.currency}</strong></p>
@@ -39,8 +39,11 @@ function amount(value: number | null): string {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .pricing-summary { min-width: 0; overflow-wrap: anywhere; }
 .pricing-summary ul { display: grid; gap: var(--smrt-spacing-3); padding-inline-start: var(--smrt-spacing-5); }
 .pricing-summary li { min-width: 0; }
 .pricing-summary li strong { display: block; }
+}
 </style>

package/dist/svelte/components/PurchaseOrderEditor.svelte

@@ -137,7 +137,7 @@ function displayMoney(value: QuoteMoneyMinor): string {
 const money = (amountMinor: number | null) =>
   displayMoney({ currency, minorUnitDigits, amountMinor });
 </script>
-<section class="purchase-editor" aria-label={title}>
+<section class="purchase-editor" aria-label={title} data-smrt-component="PurchaseOrderEditor">
  <h2>{title}</h2>
  <p>{t(P['commerce.purchase.boundary'])}</p>
  <p>{source.vendor} — {source.label} · {currency}</p>
@@ -202,9 +202,12 @@ const money = (amountMinor: number | null) =>
   {/if}
 </section>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .editor-attachments { min-width: 0; margin: 0; padding: 0; border: 0; }
 .purchase-editor{max-width:48rem;min-width:0;overflow-wrap:anywhere;color:var(--smrt-color-on-surface)}
 fieldset{min-width:0;margin-block:var(--smrt-spacing-4,1rem);padding:var(--smrt-spacing-4,1rem);border:1px solid var(--smrt-color-outline-variant);border-radius:var(--smrt-radius-md,0.5rem)}
 .allocation{margin-block:var(--smrt-spacing-4,1rem)}
 .actions{display:flex;flex-wrap:wrap;gap:var(--smrt-spacing-3,0.75rem);margin-block:var(--smrt-spacing-4,1rem)}
+}
 </style>

package/dist/svelte/components/PurchaseOrderHeaderForm.svelte

@@ -71,7 +71,7 @@ const textFields = [
 ] as const;
 </script>
 
-<section aria-label={title}>
+<section aria-label={title} data-smrt-component="PurchaseOrderHeaderForm">
   <h2>{title}</h2>
   {#if message}<p role="alert">{message}</p>{/if}
   <Form {...formAttributes} {action} method="post" {onsubmit} preventDefault={false}>

package/dist/svelte/components/PurchaseSourceSelector.svelte

@@ -39,7 +39,7 @@ let {
 }: Props = $props();
 const { t } = useI18n();
 </script>
-<div class="purchase-source">
+<div class="purchase-source" data-smrt-component="PurchaseSourceSelector">
  <Form {action} {onsubmit} method="get" preventDefault={false}>
   {#each hiddenFields as field}<Input type="hidden" name={field.name} value={field.value} />{/each}
   <FormGroup label={label ?? t(P['commerce.purchase.source'])} {error} required>
@@ -53,4 +53,9 @@ const { t } = useI18n();
   <Button type="submit" disabled={disabled || sources.every(source=>source.disabled)} density="touch">{t(P['commerce.purchase.use'])}</Button>
  </Form>
 </div>
-<style>.purchase-source{max-width:48rem;min-width:0;overflow-wrap:anywhere;color:var(--smrt-color-on-surface)}</style>
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+.purchase-source{max-width:48rem;min-width:0;overflow-wrap:anywhere;color:var(--smrt-color-on-surface)}
+}
+</style>

package/dist/svelte/components/QuoteEditor.svelte

@@ -115,7 +115,7 @@ const title = $derived(
 );
 </script>
 
-<section class="quote-editor" aria-label={title}>
+<section class="quote-editor" aria-label={title} data-smrt-component="QuoteEditor">
   <h2>{title}</h2>
   <p>{t(Q[kind === 'vendor-quotation' ? 'commerce.quote.vendor_hint' : 'commerce.quote.estimate_hint'])}</p>
   {#if readonly}<p>{t(Q['commerce.quote.readonly'])}</p>{/if}
@@ -170,8 +170,11 @@ const title = $derived(
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .editor-attachments { min-width: 0; margin: 0; padding: 0; border: 0; }
 .quote-editor { max-width: 48rem; min-width: 0; color: var(--smrt-color-on-surface); overflow-wrap: anywhere; }
 fieldset { min-width: 0; margin-block: var(--smrt-spacing-4, 1rem); padding: var(--smrt-spacing-4, 1rem); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md, 0.5rem); }
 .actions { margin-top: var(--smrt-spacing-4, 1rem); }
+}
 </style>

package/dist/svelte/components/QuoteRevisionComparison.svelte

@@ -28,7 +28,7 @@ const delta = $derived.by(() => {
   }
 });
 </script>
-<section class="quote-comparison" aria-label={title ?? t(Q['commerce.quote.compare'])}>
+<section class="quote-comparison" aria-label={title ?? t(Q['commerce.quote.compare'])} data-smrt-component="QuoteRevisionComparison">
   <h2>{title ?? t(Q['commerce.quote.compare'])}</h2>
   <div class="versions">
     <QuoteRevisionHistory revisions={[previous]} title={t(Q['commerce.quote.before'])} />
@@ -39,6 +39,9 @@ const delta = $derived.by(() => {
   {:else}<p>{t(Q['commerce.quote.incomparable'])}</p>{/if}
 </section>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .quote-comparison { min-width: 0; color: var(--smrt-color-on-surface); overflow-wrap: anywhere; }
 .versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--smrt-spacing-4, 1rem); }
+}
 </style>

package/dist/svelte/components/QuoteRevisionHistory.svelte

@@ -28,7 +28,7 @@ function amount(money: QuoteMoneyMinor): string {
   }
 }
 </script>
-<section class="quote-history" aria-label={title ?? t(Q['commerce.quote.history'])}>
+<section class="quote-history" aria-label={title ?? t(Q['commerce.quote.history'])} data-smrt-component="QuoteRevisionHistory">
   <h2>{title ?? t(Q['commerce.quote.history'])}</h2>
   <ol>
     {#each revisions as revision (revision.id)}
@@ -48,8 +48,11 @@ function amount(money: QuoteMoneyMinor): string {
   </ol>
 </section>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .quote-history { min-width: 0; color: var(--smrt-color-on-surface); overflow-wrap: anywhere; }
 ol { padding-inline-start: var(--smrt-spacing-6, 1.5rem); }
 li { margin-block: var(--smrt-spacing-4, 1rem); }
 article { padding: var(--smrt-spacing-4, 1rem); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md, 0.5rem); }
+}
 </style>

package/dist/svelte/components/UnbilledItems.svelte

@@ -98,7 +98,7 @@ const someSelected = $derived(
 );
 </script>
 
-<div class="unbilled-items">
+<div class="unbilled-items" data-smrt-component="UnbilledItems">
   {#if items.length === 0}
     <div class="empty-state">
       <p>{emptyMessage}</p>
@@ -166,10 +166,12 @@ const someSelected = $derived(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .unbilled-items {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     overflow: hidden;
   }
@@ -179,7 +181,7 @@ const someSelected = $derived(
     align-items: center;
     justify-content: center;
     padding: var(--smrt-spacing-8, 2rem) var(--smrt-spacing-4, 1rem);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .empty-state p {
@@ -191,8 +193,8 @@ const someSelected = $derived(
     justify-content: space-between;
     align-items: center;
     padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
-    background: var(--smrt-color-surface-container-low, #f7f2fa);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface-container-low);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .select-all {
@@ -201,13 +203,13 @@ const someSelected = $derived(
     gap: var(--smrt-spacing-2, 0.5rem);
     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);
     cursor: pointer;
   }
 
   .selected-count {
     font: var(--smrt-typography-label-small-font);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .items-list {
@@ -215,7 +217,7 @@ const someSelected = $derived(
     flex-direction: column;
     max-height: 400px;
     overflow-y: auto;
-    background: var(--smrt-color-surface, #ffffff);
+    background: var(--smrt-color-surface);
   }
 
   .item-row {
@@ -223,7 +225,7 @@ const someSelected = $derived(
     align-items: center;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
-    border-bottom: 1px solid var(--smrt-color-surface-variant, #e7e0ec);
+    border-bottom: 1px solid var(--smrt-color-surface-variant);
     cursor: pointer;
     transition: background var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
@@ -235,11 +237,11 @@ const someSelected = $derived(
   }
 
   .item-row:hover {
-    background: var(--smrt-color-surface-container-low, #f7f2fa);
+    background: var(--smrt-color-surface-container-low);
   }
 
   .item-row.selected {
-    background: var(--smrt-color-primary-container, #d3e3fd);
+    background: var(--smrt-color-primary-container);
   }
 
   .item-row:last-child {
@@ -267,22 +269,22 @@ const someSelected = $derived(
     font-weight: var(--smrt-typography-weight-medium, 500);
     text-transform: uppercase;
     letter-spacing: 0.025em;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .type-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);
   }
 
   .type-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);
   }
 
   .item-description {
     font: var(--smrt-typography-body-medium-font);
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -292,17 +294,17 @@ const someSelected = $derived(
     display: flex;
     gap: var(--smrt-spacing-3, 0.75rem);
     font: var(--smrt-typography-body-small-font);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .item-category {
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .item-amount {
     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);
     font-variant-numeric: tabular-nums;
   }
 
@@ -311,8 +313,8 @@ const someSelected = $derived(
     justify-content: space-between;
     align-items: center;
     padding: var(--smrt-spacing-4, 1rem);
-    background: var(--smrt-color-surface-container-low, #f7f2fa);
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface-container-low);
+    border-top: 1px solid var(--smrt-color-outline-variant);
   }
 
   .selected-summary {
@@ -323,12 +325,13 @@ const someSelected = $derived(
 
   .summary-label {
     font: var(--smrt-typography-body-medium-font);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .summary-value {
     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);
   }
+}
 </style>

package/dist/svelte/components/VendorDetail.svelte

@@ -80,7 +80,7 @@ function minimumOrder(amountMinor: number): string {
 }
 </script>
 
-<section class="party-detail">
+<section class="party-detail" data-smrt-component="VendorDetail">
   {#if backHref}<Button href={backHref} variant="ghost">{t(M['commerce.party.back_to'], { plural })}</Button>{/if}
   <PageHeader title={vendor.profile.name} subtitle={vendor.profile.description ?? t(M['commerce.vendor.details'])}>
     {#snippet actions()}
@@ -122,6 +122,8 @@ function minimumOrder(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); }
@@ -131,4 +133,5 @@ function minimumOrder(amountMinor: number): string {
   a { color: var(--smrt-color-primary); }
   .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>