@happyvertical/smrt-svelte 0.55.16 → 0.55.17

package/dist/components/forms/Form.svelte

@@ -1529,7 +1529,7 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   onsubmit={handleSubmit}
   {method}
   {action}
-  use:applyEnhance={enhance}
+  use:applyEnhance={enhance} data-smrt-component="Form"
 >
   <!--
     Screen-reader status region (L1 #1420): announces async STT / field-
@@ -1642,16 +1642,18 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
 </form>
 
 {#if isFormListening && spokenText}
-  <div class="spoken-toaster">
+  <div class="spoken-toaster" data-smrt-component="Form">
     <strong>{t(M['ui.form.you_said'])}</strong> {spokenText}
   </div>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-form {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-4);
   }
 
   /* Visually-hidden live region (L1 #1420) — announced to screen readers only. */
@@ -1670,23 +1672,23 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   .form-controls {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-4);
     flex-wrap: wrap;
   }
 
   .mode-toggle {
     display: flex;
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
-    padding: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface-container-high);
+    padding: var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-md);
   }
 
   .mode-btn {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-4);
     border: none;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
-    border-radius: var(--smrt-radius-md, 8px);
+    color: var(--smrt-color-on-surface-variant);
+    border-radius: var(--smrt-radius-md);
     cursor: pointer;
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
@@ -1694,24 +1696,24 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   }
 
   .mode-btn:hover {
-    color: var(--smrt-color-on-surface, #374151);
+    color: var(--smrt-color-on-surface);
   }
 
   .mode-btn.active {
-    background: var(--smrt-color-surface, #fff);
-    color: var(--smrt-color-primary, #3b82f6);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-primary);
     box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 10%, transparent));
   }
 
   .form-listen-btn {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-5, 20px);
-    border: 2px solid var(--smrt-color-primary, #3b82f6);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-5);
+    border: 2px solid var(--smrt-color-primary);
     background: var(--smrt-color-surface);
     color: var(--smrt-color-primary);
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     cursor: pointer;
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
@@ -1719,20 +1721,20 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   }
 
   .form-listen-btn:hover {
-    background: var(--smrt-color-primary-container, #eff6ff);
+    background: var(--smrt-color-primary-container);
   }
 
   .form-listen-btn.listening {
-    background: var(--smrt-color-primary, #22c55e);
-    border-color: var(--smrt-color-primary, #22c55e);
-    color: var(--smrt-color-on-primary, #fff);
+    background: var(--smrt-color-primary);
+    border-color: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     animation: pulse-btn 1.5s var(--smrt-easing-standard, ease-in-out) infinite;
   }
 
   .form-listen-btn.extracting {
-    background: var(--smrt-color-secondary, #f59e0b);
-    border-color: var(--smrt-color-secondary, #f59e0b);
-    color: var(--smrt-color-on-secondary, #fff);
+    background: var(--smrt-color-secondary);
+    border-color: var(--smrt-color-secondary);
+    color: var(--smrt-color-on-secondary);
   }
 
   .form-listen-btn:disabled {
@@ -1769,12 +1771,12 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
     bottom: 0;
     left: 0;
     right: 0;
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-6, 24px);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-6);
     /* 90%-opacity primary. The old `--smrt-color-primary-rgb` channel token
        was never emitted (issue #1431); color-mix derives the alpha from the
        emitted `--smrt-color-primary` token instead. */
-    background: color-mix(in srgb, var(--smrt-color-primary, #166534) 90%, transparent);
-    color: var(--smrt-color-on-primary, #fff);
+    background: color-mix(in srgb, var(--smrt-color-primary) 90%, transparent);
+    color: var(--smrt-color-on-primary);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     box-shadow: 0 -2px 12px color-mix(in srgb, var(--smrt-color-shadow) 15%, transparent);
     z-index: var(--smrt-z-index-toast, 1500);
@@ -1784,7 +1786,7 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   }
 
   .spoken-toaster strong {
-    color: var(--smrt-color-on-primary-container, #bbf7d0);
+    color: var(--smrt-color-on-primary-container);
   }
 
   @keyframes slideUp {
@@ -1799,10 +1801,10 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   }
 
   .extract-error {
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
     background: var(--smrt-color-error-container);
     border: 1px solid var(--smrt-color-error);
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     color: var(--smrt-color-error);
   }
@@ -1810,6 +1812,7 @@ export function getInteractionRegistry(): ControlInteractionRegistry {
   .form-fields {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-4);
   }
+}
 </style>

package/dist/components/forms/FormMicButton.svelte

@@ -65,7 +65,7 @@ function handleKeydown(e: KeyboardEvent) {
     onkeydown={handleKeydown}
     role="button"
     tabindex="0"
-    aria-label={isListening ? 'Stop listening' : 'Click to speak'}
+    aria-label={isListening ? 'Stop listening' : 'Click to speak'} data-smrt-component="FormMicButton"
   >
     {#if isExtracting}
       <svg
@@ -102,12 +102,14 @@ function handleKeydown(e: KeyboardEvent) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .form-mic-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     position: relative;
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     transition: color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
     vertical-align: middle;
@@ -115,16 +117,16 @@ function handleKeydown(e: KeyboardEvent) {
   }
 
   .form-mic-icon:hover {
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .form-mic-icon.listening {
-    color: var(--smrt-color-primary, #22c55e);
+    color: var(--smrt-color-primary);
     animation: pulse 1.5s ease-in-out infinite;
   }
 
   .form-mic-icon.extracting {
-    color: var(--smrt-color-primary, #22c55e);
+    color: var(--smrt-color-primary);
   }
 
   .tooltip {
@@ -134,8 +136,8 @@ function handleKeydown(e: KeyboardEvent) {
     transform: translateX(-50%);
     margin-top: 0.5rem;
     padding: 0.5rem 0.75rem;
-    background: var(--smrt-color-inverse-surface, var(--smrt-color-on-surface, #1f2937));
-    color: var(--smrt-color-inverse-on-surface, #fff);
+    background: var(--smrt-color-inverse-surface, var(--smrt-color-on-surface));
+    color: var(--smrt-color-inverse-on-surface);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-normal, 400);
     border-radius: 0.375rem;
@@ -179,4 +181,5 @@ function handleKeydown(e: KeyboardEvent) {
       animation: none;
     }
   }
+}
 </style>

package/dist/components/forms/FormScope.svelte

@@ -189,14 +189,17 @@ useWebMcpTool(
 );
 </script>
 
-<div class="smrt-form-scope" data-smrt-form-scope={formId} bind:this={scope}>
+<div class="smrt-form-scope" data-smrt-form-scope={formId} bind:this={scope} data-smrt-component="FormScope">
   {@render children()}
   <StagedControlReview {registry} {formId} {formElement} summary={stagedReview} />
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* Layout-neutral: the wrapped content lays out exactly as before. */
   .smrt-form-scope {
     display: contents;
   }
+}
 </style>

package/dist/components/forms/MeasurementInput.svelte

@@ -441,7 +441,7 @@ function handleUnitChange(e: Event) {
 }
 </script>
 
-<div class="smrt-measurement" data-smrt-field-owner={fieldOwnerToken}>
+<div class="smrt-measurement" data-smrt-field-owner={fieldOwnerToken} data-smrt-component="MeasurementInput">
   {#if label}
     <FieldLabel for={name} {label} {required} />
   {/if}
@@ -497,31 +497,33 @@ function handleUnitChange(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-measurement {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .input-wrapper {
     display: flex;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .input-wrapper.smrt-mode {
-    border: 1px solid var(--smrt-color-tertiary, #6b5778);
-    border-radius: var(--smrt-radius-small, 6px);
-    padding: var(--smrt-spacing-1, 2px);
-    background: var(--smrt-color-tertiary-container, #f3e5f5);
+    border: 1px solid var(--smrt-color-tertiary);
+    border-radius: var(--smrt-radius-small);
+    padding: var(--smrt-spacing-1);
+    background: var(--smrt-color-tertiary-container);
   }
 
   .smrt-input {
     flex: 1;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
-    background: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface);
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
     min-width: 0;
   }
@@ -533,8 +535,8 @@ function handleUnitChange(e: Event) {
 
   .smrt-input:focus {
     outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
   }
 
   .input-wrapper.smrt-mode .smrt-input:focus {
@@ -542,12 +544,12 @@ function handleUnitChange(e: Event) {
   }
 
   .smrt-input:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
   .smrt-input.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   /* Hide spinner buttons */
@@ -563,11 +565,11 @@ function handleUnitChange(e: Event) {
   }
 
   .unit-select {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
-    background: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface);
     cursor: pointer;
     min-width: 100px;
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
@@ -580,8 +582,8 @@ function handleUnitChange(e: Event) {
 
   .unit-select:focus {
     outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
   }
 
   .unit-select.smrt-mode:focus {
@@ -595,7 +597,8 @@ function handleUnitChange(e: Event) {
 
   .validation-error {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-top: var(--smrt-spacing-1);
   }
+}
 </style>

package/dist/components/forms/MoneyInput.svelte

@@ -308,7 +308,7 @@ function handleBlur() {
 }
 </script>
 
-<div class="smrt-money">
+<div class="smrt-money" data-smrt-component="MoneyInput">
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
@@ -353,10 +353,12 @@ function handleBlur() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-money {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .input-wrapper {
@@ -368,7 +370,7 @@ function handleBlur() {
   .currency-code {
     position: absolute;
     right: 12px;
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     text-transform: uppercase;
     pointer-events: none;
@@ -376,42 +378,43 @@ function handleBlur() {
 
   .smrt-input {
     flex: 1;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-12, 48px) var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-12) var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
-    background: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface);
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
     text-align: right;
   }
 
   .smrt-input:focus {
     outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
   }
 
   .smrt-input:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
   .smrt-input.smrt-mode {
-    border-color: var(--smrt-color-tertiary, #6b5778);
+    border-color: var(--smrt-color-tertiary);
   }
 
   .smrt-input.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   .smrt-input.invalid:focus {
     border-color: var(--smrt-color-error);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error, #ba1a1a) 10%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
   }
 
   .validation-error {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-top: var(--smrt-spacing-1);
   }
+}
 </style>

package/dist/components/forms/NumberInput.svelte

@@ -233,7 +233,7 @@ function handleInput(e: Event) {
 }
 </script>
 
-<div class="smrt-number">
+<div class="smrt-number" data-smrt-component="NumberInput">
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
@@ -272,12 +272,14 @@ function handleInput(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-number {
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 0;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .input-wrapper {
@@ -290,36 +292,36 @@ function handleInput(e: Event) {
     box-sizing: border-box;
     min-width: 0;
     width: 100%;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
-    background: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface);
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .smrt-input:focus {
     outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
   }
 
   .smrt-input:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
   .smrt-input.smrt-mode {
-    border-color: var(--smrt-color-tertiary, #6b5778);
+    border-color: var(--smrt-color-tertiary);
   }
 
   .smrt-input.invalid {
-    border-color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error);
   }
 
   .smrt-input.invalid:focus {
     border-color: var(--smrt-color-error);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error, #ba1a1a) 10%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
   }
 
   /* Hide spinner buttons */
@@ -336,7 +338,8 @@ function handleInput(e: Event) {
 
   .validation-error {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-top: var(--smrt-spacing-1);
   }
+}
 </style>