@happyvertical/smrt-commerce 0.55.16 → 0.55.17

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>

package/dist/svelte/components/VendorDirectory.svelte

@@ -132,7 +132,7 @@ function vendorMeta(vendor: VendorDisplayData): string {
 }
 </script>
 
-<section class="party-directory">
+<section class="party-directory" data-smrt-component="VendorDirectory">
   <PageHeader title={plural} subtitle={labels.plural ? t(M['commerce.party.manage_named'], { plural }) : t(M['commerce.vendor.manage'])}>
     {#snippet actions()}
       {#if canCreate && addHref}<Button href={addHref}>{labels.add ?? (labels.singular ? t(M['commerce.party.add_named'], { singular }) : t(M['commerce.vendor.add']))}</Button>{/if}
@@ -199,6 +199,8 @@ function vendorMeta(vendor: VendorDisplayData): 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; }
@@ -212,4 +214,5 @@ function vendorMeta(vendor: VendorDisplayData): 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/VendorForm.svelte

@@ -213,6 +213,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); }
@@ -221,4 +223,5 @@ const errorList = $derived(
   .locked-value { color: var(--smrt-color-on-surface-variant); }
   .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--smrt-spacing-4); }
   @media (max-width: 42rem) { .field-grid { grid-template-columns: minmax(0, 1fr); } }
+}
 </style>

package/dist/svelte/playground/InvoicePreparationPreview.svelte

@@ -113,4 +113,9 @@ function submit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
     {/snippet}
   </InvoiceEditor>
 </div>
-<style>.preview { display: grid; gap: var(--smrt-spacing-4); }</style>
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+.preview { display: grid; gap: var(--smrt-spacing-4); }
+}
+</style>

package/dist/svelte/playground/PartySelectPreview.svelte

@@ -96,13 +96,16 @@ const match = <T extends { profile: { name: string } }>(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .preview {
     display: grid;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     max-width: 28rem;
     color: var(--smrt-color-on-surface);
   }
   p {
     margin: 0;
   }
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-commerce",
-  "version": "0.55.16",
+  "version": "0.55.17",
   "smrtJsdoc": "strict",
   "description": "Commerce models for the SMRT framework - contracts, fulfillments, payments",
   "type": "module",
@@ -61,13 +61,13 @@
   "dependencies": {
     "@happyvertical/accounting": "^0.103.4",
     "@happyvertical/payments": "^0.103.4",
-    "@happyvertical/smrt-core": "0.55.16",
-    "@happyvertical/smrt-jobs": "0.55.16",
-    "@happyvertical/smrt-ledgers": "0.55.16",
-    "@happyvertical/smrt-subscriptions": "0.55.16",
-    "@happyvertical/smrt-tenancy": "0.55.16",
-    "@happyvertical/smrt-types": "0.55.16",
-    "@happyvertical/smrt-ui": "0.55.16"
+    "@happyvertical/smrt-core": "0.55.17",
+    "@happyvertical/smrt-jobs": "0.55.17",
+    "@happyvertical/smrt-ledgers": "0.55.17",
+    "@happyvertical/smrt-subscriptions": "0.55.17",
+    "@happyvertical/smrt-tenancy": "0.55.17",
+    "@happyvertical/smrt-types": "0.55.17",
+    "@happyvertical/smrt-ui": "0.55.17"
   },
   "peerDependencies": {
     "svelte": "^5.57.0"
@@ -78,7 +78,7 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/smrt-vitest": "0.55.16",
+    "@happyvertical/smrt-vitest": "0.55.17",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@testing-library/jest-dom": "^7.0.1",