@happyvertical/smrt-products 0.34.5 → 0.34.7

package/dist/lib/lib/components/ProductForm.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+import { Form, Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.js';
 import type { ProductData } from '../types';
 
@@ -65,128 +67,126 @@ function handleSubmit(event: Event) {
 }
 </script>
 
-<form onsubmit={handleSubmit} class="product-form">
-  <div class="form-group">
-    <label for="name">{t(M['products.product_form.name_label'])}</label>
-    <input
-      id="name"
-      type="text"
-      bind:value={formData.name}
-      disabled={loading}
-      class="form-input"
-      class:error={errors.name}
-      placeholder={t(M['products.product_form.name_placeholder'])}
-    />
-    {#if errors.name}
-      <span class="error-message">{errors.name}</span>
-    {/if}
-  </div>
-
-  <div class="form-group">
-    <label for="description">Description</label>
-    <textarea
-      id="description"
-      bind:value={formData.description}
-      disabled={loading}
-      class="form-textarea"
-      placeholder={t(M['products.product_form.description_placeholder'])}
-      rows="3"
-    ></textarea>
-  </div>
-
-  <div class="form-row">
+<div class="product-form-shell">
+  <Form onsubmit={handleSubmit} class="product-form">
     <div class="form-group">
-      <label for="price">Price *</label>
-      <input
-        id="price"
-        type="number"
-        step="0.01"
-        min="0"
-        bind:value={formData.price}
+      <label for="name">{t(M['products.product_form.name_label'])}</label>
+      <Input
+        id="name"
+        type="text"
+        bind:value={formData.name}
         disabled={loading}
-        class="form-input"
-        class:error={errors.price}
-        placeholder="0.00"
+        class={errors.name ? 'error' : ''}
+        placeholder={t(M['products.product_form.name_placeholder'])}
       />
-      {#if errors.price}
-        <span class="error-message">{errors.price}</span>
+      {#if errors.name}
+        <span class="error-message">{errors.name}</span>
       {/if}
     </div>
 
     <div class="form-group">
-      <label for="category">Category</label>
-      <input
-        id="category"
-        type="text"
-        bind:value={formData.category}
+      <label for="description">Description</label>
+      <Textarea
+        id="description"
+        bind:value={formData.description}
         disabled={loading}
-        class="form-input"
-        placeholder={t(M['products.product_form.category_placeholder'])}
-      />
+        placeholder={t(M['products.product_form.description_placeholder'])}
+        rows={3}
+      ></Textarea>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="tags">Tags</label>
-    <input
-      id="tags"
-      type="text"
-      bind:value={formData.tags}
-      disabled={loading}
-      class="form-input"
-      placeholder={t(M['products.product_form.tags_placeholder'])}
-    />
-    <small class="form-hint">{t(M['products.product_form.tags_hint'])}</small>
-  </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label for="price">Price *</label>
+        <Input
+          id="price"
+          type="number"
+          step="0.01"
+          min="0"
+          bind:value={formData.price}
+          disabled={loading}
+          class={errors.price ? 'error' : ''}
+          placeholder="0.00"
+        />
+        {#if errors.price}
+          <span class="error-message">{errors.price}</span>
+        {/if}
+      </div>
+
+      <div class="form-group">
+        <label for="category">Category</label>
+        <Input
+          id="category"
+          type="text"
+          bind:value={formData.category}
+          disabled={loading}
+          placeholder={t(M['products.product_form.category_placeholder'])}
+        />
+      </div>
+    </div>
 
-  <div class="form-group">
-    <label class="checkbox-label">
-      <input
-        type="checkbox"
-        bind:checked={formData.inStock}
+    <div class="form-group">
+      <label for="tags">Tags</label>
+      <Input
+        id="tags"
+        type="text"
+        bind:value={formData.tags}
         disabled={loading}
-        class="form-checkbox"
+        placeholder={t(M['products.product_form.tags_placeholder'])}
       />
-      {t(M['products.product_form.in_stock_label'])}
-    </label>
-  </div>
+      <small class="form-hint">{t(M['products.product_form.tags_hint'])}</small>
+    </div>
+
+    <div class="form-group">
+      <label class="checkbox-label">
+        <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+        <input
+          type="checkbox"
+          bind:checked={formData.inStock}
+          disabled={loading}
+          class="form-checkbox"
+        />
+        {t(M['products.product_form.in_stock_label'])}
+      </label>
+    </div>
 
-  <div class="form-actions">
-    {#if onCancel}
-      <button type="button" onclick={onCancel} disabled={loading} class="cancel-btn">
-        Cancel
-      </button>
-    {/if}
-    
-    <button type="submit" disabled={loading} class="submit-btn">
-      {#if loading}
-        Saving...
-      {:else}
-        {product.id ? 'Update Product' : 'Create Product'}
+    <div class="form-actions">
+      {#if onCancel}
+        <Button type="button" variant="secondary" onclick={onCancel} disabled={loading}>
+          Cancel
+        </Button>
       {/if}
-    </button>
-  </div>
-</form>
+
+      <Button type="submit" variant="primary" disabled={loading}>
+        {#if loading}
+          Saving...
+        {:else}
+          {product.id ? 'Update Product' : 'Create Product'}
+        {/if}
+      </Button>
+    </div>
+  </Form>
+</div>
 
 <style>
-  .product-form {
+  .product-form-shell :global(.product-form) {
     max-width: 500px;
     padding: 1.5rem;
     background: var(--smrt-color-surface, #fff);
     border-radius: var(--smrt-radius-md, 8px);
     border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
   }
-  
+
   .form-group {
     margin-bottom: 1rem;
   }
-  
+
   .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
-  
+
   label {
     display: block;
     margin-bottom: 0.25rem;
@@ -195,30 +195,13 @@ function handleSubmit(event: Event) {
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
   }
 
-  .form-input, .form-textarea {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    transition: border-color 0.2s;
-  }
-
-  .form-input:focus, .form-textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 10%, transparent);
-  }
-
-  .form-input.error {
+  /* Error border on the migrated <Input>. The primitive renders the inner
+     <input class="input error"> inside its own component, so the scoped class
+     can't reach it without :global (#1589). */
+  .product-form-shell :global(.input.error) {
     border-color: var(--smrt-color-error, #dc2626);
   }
-  
-  .form-textarea {
-    resize: vertical;
-    min-height: 80px;
-  }
-  
+
   .checkbox-label {
     display: flex;
     align-items: center;
@@ -251,39 +234,4 @@ function handleSubmit(event: Event) {
     padding-top: 1rem;
     border-top: 1px solid var(--smrt-color-outline-variant, #f3f4f6);
   }
-  
-  .cancel-btn, .submit-btn {
-    padding: 0.5rem 1rem;
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: var(--smrt-typography-label-large-size, 0.875rem);
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
-    border: 1px solid;
-    transition: all 0.2s;
-  }
-  
-  .cancel-btn {
-    background: var(--smrt-color-surface, #fff);
-    border-color: var(--smrt-color-outline-variant, #d1d5db);
-    color: var(--smrt-color-on-surface, #374151);
-  }
-
-  .cancel-btn:hover:not(:disabled) {
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-  }
-
-  .submit-btn {
-    background: var(--smrt-color-primary, #3b82f6);
-    border-color: var(--smrt-color-primary, #3b82f6);
-    color: var(--smrt-color-on-primary, white);
-  }
-
-  .submit-btn:hover:not(:disabled) {
-    background: var(--smrt-color-primary, #2563eb);
-  }
-  
-  .submit-btn:disabled, .cancel-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
 </style>

package/dist/lib/lib/components/ProductForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductForm.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/ProductForm.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0HD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProductForm.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/ProductForm.svelte"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA+HD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/lib/lib/components/auto-generated/AutoForm.svelte

@@ -4,7 +4,9 @@
  * Demonstrates "Define Once, Consume Everywhere" - form is generated from Product class definition
  */
 
+import { Form } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
 import type { ProductData } from '../../types';
 import FieldRenderer from './FieldRenderer.svelte';
@@ -112,31 +114,33 @@ function _getFieldType(
     </div>
   </header>
 
-  <form class="form-content" onsubmit={handleSubmit}>
-    {#each fieldSchema as field}
-      <FieldRenderer
-        fieldName={field.name}
-        fieldType={field.type}
-        value={formData[field.name]}
-        label={field.label}
-        placeholder={field.placeholder}
-        required={field.required || false}
-        {readonly}
-        onUpdate={(value) => updateField(field.name, value)}
-      />
-    {/each}
-
-    {#if !readonly}
-      <div class="form-actions">
-        <button type="submit" class="submit-btn">
-          {submitLabel}
-        </button>
-        <button type="button" class="reset-btn" onclick={() => formData = {}}>
-          Reset
-        </button>
-      </div>
-    {/if}
-  </form>
+  <div class="form-content-shell">
+    <Form class="form-content" onsubmit={handleSubmit}>
+      {#each fieldSchema as field}
+        <FieldRenderer
+          fieldName={field.name}
+          fieldType={field.type}
+          value={formData[field.name]}
+          label={field.label}
+          placeholder={field.placeholder}
+          required={field.required || false}
+          {readonly}
+          onUpdate={(value) => updateField(field.name, value)}
+        />
+      {/each}
+
+      {#if !readonly}
+        <div class="form-actions">
+          <Button type="submit" variant="primary">
+            {submitLabel}
+          </Button>
+          <Button type="button" variant="secondary" onclick={() => formData = {}}>
+            Reset
+          </Button>
+        </div>
+      {/if}
+    </Form>
+  </div>
 
   <!-- Demo: Show current form state -->
   <details class="form-debug">
@@ -173,7 +177,7 @@ function _getFieldType(
     font-style: italic;
   }
 
-  .form-content {
+  .form-content-shell :global(.form-content) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -187,36 +191,6 @@ function _getFieldType(
     border-top: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
   }
 
-  .submit-btn {
-    background: var(--smrt-color-primary, #3b82f6);
-    color: var(--smrt-color-on-primary, white);
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: var(--smrt-radius-sm, 0.375rem);
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-
-  .submit-btn:hover {
-    background: var(--smrt-color-primary, #2563eb);
-  }
-
-  .reset-btn {
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface, #374151);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    padding: 0.75rem 1.5rem;
-    border-radius: var(--smrt-radius-sm, 0.375rem);
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-
-  .reset-btn:hover {
-    background: var(--smrt-color-surface-container-high, #e5e7eb);
-  }
-
   .form-debug {
     margin-top: 2rem;
     padding: 1rem;

package/dist/lib/lib/components/auto-generated/AutoForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoForm.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/AutoForm.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AAmID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AutoForm.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/AutoForm.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AAuID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/lib/lib/components/auto-generated/FieldRenderer.svelte

@@ -4,6 +4,7 @@
  * This demonstrates the "Define Once, Consume Everywhere" vision
  */
 
+import { Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../../i18n.js';
 
@@ -92,10 +93,9 @@ function handleObjectInput(event: Event) {
   </label>
 
   {#if fieldType === 'string'}
-    <input
+    <Input
       id={fieldId}
       type="text"
-      class="field-input"
       {value}
       {placeholder}
       {readonly}
@@ -103,10 +103,9 @@ function handleObjectInput(event: Event) {
       oninput={handleStringInput}
     />
   {:else if fieldType === 'number'}
-    <input
+    <Input
       id={fieldId}
       type="number"
-      class="field-input"
       value={value || 0}
       {placeholder}
       {readonly}
@@ -114,6 +113,7 @@ function handleObjectInput(event: Event) {
       oninput={handleNumberInput}
     />
   {:else if fieldType === 'boolean'}
+    <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
     <input
       id={fieldId}
       type="checkbox"
@@ -123,26 +123,24 @@ function handleObjectInput(event: Event) {
       onchange={handleBooleanInput}
     />
   {:else if fieldType === 'array'}
-    <textarea
+    <Textarea
       id={fieldId}
-      class="field-textarea"
       value={Array.isArray(value) ? value.join(', ') : ''}
       placeholder={placeholder || 'Enter comma-separated values'}
       {readonly}
       {required}
       oninput={handleArrayInput}
-    />
+    ></Textarea>
     <div class="field-hint">{t(M['products.field_renderer.array_hint'])}</div>
   {:else if fieldType === 'object'}
-    <textarea
+    <Textarea
       id={fieldId}
-      class="field-textarea"
       value={typeof value === 'object' ? JSON.stringify(value, null, 2) : '{}'}
       placeholder={placeholder || 'Enter JSON object'}
       {readonly}
       {required}
       oninput={handleObjectInput}
-    />
+    ></Textarea>
     <div class="field-hint">{t(M['products.field_renderer.object_hint'])}</div>
   {/if}
 </div>
@@ -165,27 +163,6 @@ function handleObjectInput(event: Event) {
     color: var(--smrt-color-error, #dc2626);
   }
 
-  .field-input,
-  .field-textarea {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-sm, 0.375rem);
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    transition: border-color 0.2s, box-shadow 0.2s;
-  }
-
-  .field-input:focus,
-  .field-textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 10%, transparent);
-  }
-
-  .field-textarea {
-    min-height: 4rem;
-    resize: vertical;
-  }
-
   .field-checkbox {
     width: 1rem;
     height: 1rem;
@@ -196,10 +173,4 @@ function handleObjectInput(event: Event) {
     color: var(--smrt-color-on-surface-variant, #6b7280);
     font-style: italic;
   }
-
-  .field-input:read-only,
-  .field-textarea:read-only {
-    background-color: var(--smrt-color-surface-container-low, #f9fafb);
-    cursor: not-allowed;
-  }
 </style>

package/dist/lib/lib/components/auto-generated/FieldRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/FieldRenderer.svelte.ts"],"names":[],"mappings":"AAWA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IAChE,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAmGD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FieldRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/FieldRenderer.svelte.ts"],"names":[],"mappings":"AAYA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IAChE,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAqGD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/lib/lib/features/ProductCatalog.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { onMount } from 'svelte';
 import ProductCard from '../components/ProductCard.svelte';
 import ProductForm from '../components/ProductForm.svelte';
@@ -102,30 +104,30 @@ function handleCancelForm() {
   
   <div class="catalog-controls">
     <div class="search-filters">
-      <input
+      <Input
         type="text"
         bind:value={searchQuery}
         placeholder={t(M['products.product_catalog.search_placeholder'])}
         aria-label={t(M['products.product_catalog.search_placeholder'])}
         class="search-input"
       />
-      
-      <select bind:value={selectedCategory} class="category-filter">
+
+      <Select bind:value={selectedCategory} class="category-filter">
         <option value="">{t(M['products.product_catalog.all_categories'])}</option>
         {#each productStore.categories as category}
           <option value={category}>{category}</option>
         {/each}
-      </select>
+      </Select>
     </div>
     
     {#if !readonly && (showCreateForm || productStore.items.length === 0)}
-      <button 
-        type="button" 
+      <Button
+        type="button"
+        variant="primary"
         onclick={handleCreateProduct}
-        class="create-btn"
       >
         {t(M['products.product_catalog.add_product'])}
-      </button>
+      </Button>
     {/if}
   </div>
   
@@ -136,18 +138,18 @@ function handleCancelForm() {
   {:else if productStore.error}
     <div class="error-state" role="alert" aria-live="assertive">
       <p>Error: {productStore.error}</p>
-      <button type="button" onclick={() => productStore.loadProducts()}>
+      <Button type="button" variant="danger" onclick={() => productStore.loadProducts()}>
         Retry
-      </button>
+      </Button>
     </div>
   {:else if filteredProducts.length === 0}
     <div class="empty-state" role="status" aria-live="polite">
       {#if productStore.items.length === 0}
         <p>{t(M['products.product_catalog.empty'])}</p>
         {#if !readonly}
-          <button type="button" onclick={handleCreateProduct} class="create-btn">
+          <Button type="button" variant="primary" onclick={handleCreateProduct}>
             {t(M['products.product_catalog.create_first'])}
-          </button>
+          </Button>
         {/if}
       {:else}
         <p>{t(M['products.product_catalog.no_match'])}</p>
@@ -223,36 +225,18 @@ function handleCancelForm() {
     gap: 0.75rem;
     flex: 1;
   }
-  
-  .search-input, .category-filter {
-    padding: 0.5rem;
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-  }
-  
-  .search-input {
+
+  /* Layout sizing for the migrated <Input>/<Select>. The primitives render the
+     inner element with the forwarded class, so pierce with :global to keep the
+     flex sizing the old scoped rules supplied (#1589); padding/border/font come
+     from the primitives' tokenised styling now. */
+  .search-filters :global(.search-input) {
     flex: 1;
     max-width: 300px;
   }
-  
-  .category-filter {
-    min-width: 150px;
-  }
-  
-  .create-btn {
-    background: var(--smrt-color-primary, #3b82f6);
-    color: var(--smrt-color-on-primary, white);
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: var(--smrt-radius-sm, 4px);
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
 
-  .create-btn:hover {
-    background: var(--smrt-color-primary, #2563eb);
+  .search-filters :global(.category-filter) {
+    min-width: 150px;
   }
   
   .products-grid {
@@ -267,14 +251,12 @@ function handleCancelForm() {
     color: var(--smrt-color-on-surface-variant, #6b7280);
   }
 
-  .error-state button {
+  /* Restore the retry button's spacing from the error message. The old
+     `.error-state button` rule can't reach the <button> rendered inside the
+     smrt-ui <Button>, so pierce into it with `:global` (#1589); the danger
+     variant already supplies the background/color the old rule set. */
+  .error-state :global(.button) {
     margin-top: 0.5rem;
-    background: var(--smrt-color-error, #dc2626);
-    color: var(--smrt-color-on-error, white);
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: var(--smrt-radius-sm, 4px);
-    cursor: pointer;
   }
 
   .form-overlay {