@happyvertical/smrt-svelte 0.55.15 → 0.55.17

package/dist/components/forms/PhoneInput.svelte

@@ -298,7 +298,7 @@ function handleInput(e: Event) {
 }
 </script>
 
-<div class="smrt-phone" class:listening={isHolding}>
+<div class="smrt-phone" class:listening={isHolding} data-smrt-component="PhoneInput">
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
   {/if}
@@ -391,10 +391,12 @@ function handleInput(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-phone {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     position: relative;
   }
 
@@ -405,42 +407,42 @@ function handleInput(e: Event) {
 
   .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);
   }
 
   .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.smrt-mode {
-    padding-right: var(--smrt-spacing-11, 44px);
+    padding-right: var(--smrt-spacing-11);
     cursor: pointer;
   }
 
   .smrt-input:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
   .smrt-phone.listening .smrt-input {
-    border-color: var(--smrt-color-success, #22c55e);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success, #22c55e) 30%, transparent);
+    border-color: var(--smrt-color-success);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success) 30%, transparent);
     animation: pulse-green 1.5s var(--smrt-easing-standard, ease-in-out) infinite;
   }
 
   @keyframes pulse-green {
     0%, 100% {
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success, #22c55e) 30%, transparent);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-success) 30%, transparent);
     }
     50% {
-      box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-success, #22c55e) 15%, transparent);
+      box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-success) 15%, transparent);
     }
   }
 
@@ -462,19 +464,19 @@ function handleInput(e: Event) {
     justify-content: center;
     background: transparent;
     border: none;
-    border-radius: var(--smrt-radius-sm, 4px);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    border-radius: var(--smrt-radius-sm);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     transition: all 0.2s;
   }
 
   .mic-btn:hover {
     background: var(--smrt-color-surface-container);
-    color: var(--smrt-color-on-surface, #374151);
+    color: var(--smrt-color-on-surface);
   }
 
   .mic-btn.active {
-    background: var(--smrt-color-primary, #22c55e);
+    background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary, white);
   }
 
@@ -484,12 +486,12 @@ function handleInput(e: Event) {
   }
 
   .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, #ba1a1a);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error, #ba1a1a) 10%, transparent);
+    border-color: var(--smrt-color-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
   }
 
   .smrt-input.processing {
@@ -502,17 +504,17 @@ function handleInput(e: Event) {
   .listening-indicator {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     color: var(--smrt-color-on-surface-variant);
-    margin-top: var(--smrt-spacing-1, 4px);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .listening-dot {
     width: 8px;
     height: 8px;
     background: var(--smrt-color-success);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: pulse-dot 1s ease-in-out infinite;
   }
 
@@ -536,19 +538,19 @@ function handleInput(e: Event) {
   .processing-indicator {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-on-surface-variant);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .downloading-indicator {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     color: var(--smrt-color-tertiary);
-    margin-top: var(--smrt-spacing-1, 4px);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .processing-spinner {
@@ -556,7 +558,7 @@ function handleInput(e: Event) {
     height: 12px;
     border: 2px solid var(--smrt-color-outline-variant);
     border-top-color: var(--smrt-color-primary);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -568,13 +570,14 @@ function handleInput(e: Event) {
 
   .error-message {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #f97316);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .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/SearchInput.svelte

@@ -132,7 +132,7 @@ const sizeClasses = {
 <div
   class="search-input {sizeClasses[size]}"
   class:search-input--disabled={disabled}
-  class:search-input--loading={loading}
+  class:search-input--loading={loading} data-smrt-component="SearchInput"
 >
   <span class="search-input__icon" aria-hidden="true">
     {#if loading}
@@ -213,20 +213,22 @@ const sizeClasses = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .search-input {
     position: relative;
     display: flex;
     align-items: center;
     width: 100%;
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface-container-low);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-md, 0.5rem);
     transition: all var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .search-input:focus-within {
-    background: var(--smrt-color-surface, #ffffff);
-    border-color: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-surface);
+    border-color: var(--smrt-color-primary);
     box-shadow: 0 0 0 3px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
   }
 
@@ -240,7 +242,7 @@ const sizeClasses = {
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .search-input__spinner {
@@ -259,12 +261,12 @@ const sizeClasses = {
     border: none;
     background: transparent;
     font-family: inherit;
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     outline: none;
   }
 
   .search-input__field::placeholder {
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /* Hide default search clear button */
@@ -280,19 +282,19 @@ const sizeClasses = {
     padding: 0;
     border: none;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .search-input__clear:hover {
-    color: var(--smrt-color-on-surface, #111827);
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-on-surface);
+    background: var(--smrt-color-surface-container);
   }
 
   .search-input__clear:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
 
@@ -355,4 +357,5 @@ const sizeClasses = {
     height: 32px;
     margin-right: var(--smrt-spacing-3, 0.75rem);
   }
+}
 </style>

package/dist/components/forms/SelectInput.svelte

@@ -136,7 +136,7 @@ function handleChange(e: Event) {
   class:smrt-mode={isSmrt} 
   class:focused={isFocused} 
   class:disabled
-  class:has-value={!!value}
+  class:has-value={!!value} data-smrt-component="SelectInput"
 >
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
@@ -180,10 +180,12 @@ function handleChange(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-select-field {
-    --field-color: var(--smrt-color-on-surface-variant);
-    --field-bg: var(--smrt-color-surface-container-highest);
-    --field-active: var(--smrt-color-primary);
+    --smrt-select-input-field-color: var(--smrt-color-on-surface-variant);
+    --smrt-select-input-field-bg: var(--smrt-color-surface-container-highest);
+    --smrt-select-input-field-active: var(--smrt-color-primary);
     
     display: flex;
     flex-direction: column;
@@ -195,11 +197,11 @@ function handleChange(e: Event) {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--smrt-color-surface, #fff);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
+    background-color: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
     min-height: 40px;
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -221,7 +223,7 @@ function handleChange(e: Event) {
     background: transparent;
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    letter-spacing: var(--smrt-typography-body-large-tracking);
     color: var(--smrt-color-on-surface);
     width: 100%;
     padding: 0;
@@ -239,7 +241,7 @@ function handleChange(e: Event) {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--field-color);
+    color: var(--smrt-select-input-field-color);
     pointer-events: none;
     margin-right: -4px;
   }
@@ -247,12 +249,12 @@ function handleChange(e: Event) {
   .active-indicator { display: none; }
 
   .focused .container {
-    border-color: var(--field-active);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
+    border-color: var(--smrt-select-input-field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-select-input-field-active) 10%, transparent);
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) 0 0;
+    padding: var(--smrt-spacing-1) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
   }
 
@@ -265,6 +267,7 @@ function handleChange(e: Event) {
 
   /* Smrt mode overrides */
   .smrt-mode {
-    --field-active: var(--smrt-color-tertiary);
+    --smrt-select-input-field-active: var(--smrt-color-tertiary);
   }
+}
 </style>

package/dist/components/forms/TextInput.svelte

@@ -265,7 +265,7 @@ function handleInput(e: Event) {
   class:invalid={showInvalid}
   class:disabled
   class:has-value={!!value}
-  class:listening={isHolding}
+  class:listening={isHolding} data-smrt-component="TextInput"
 >
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
@@ -337,10 +337,12 @@ function handleInput(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-text-field {
-    --field-color: var(--smrt-color-on-surface-variant);
-    --field-bg: var(--smrt-color-surface-container-highest);
-    --field-active: var(--smrt-color-primary);
+    --smrt-text-input-field-color: var(--smrt-color-on-surface-variant);
+    --smrt-text-input-field-bg: var(--smrt-color-surface-container-highest);
+    --smrt-text-input-field-active: var(--smrt-color-primary);
     
     display: flex;
     flex-direction: column;
@@ -352,11 +354,11 @@ function handleInput(e: Event) {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--smrt-color-surface, #fff);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
+    background-color: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
     min-height: 40px;
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -378,7 +380,7 @@ function handleInput(e: Event) {
     background: transparent;
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    letter-spacing: var(--smrt-typography-body-large-tracking);
     color: var(--smrt-color-on-surface);
     width: 100%;
     padding: 0;
@@ -393,8 +395,8 @@ function handleInput(e: Event) {
   .active-indicator { display: none; }
 
   .focused .container {
-    border-color: var(--field-active);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
+    border-color: var(--smrt-text-input-field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-text-input-field-active) 10%, transparent);
   }
 
   .mic-btn {
@@ -405,8 +407,8 @@ function handleInput(e: Event) {
     justify-content: center;
     border: none;
     background: transparent;
-    color: var(--field-color);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-text-input-field-color);
+    border-radius: var(--smrt-radius-full);
     cursor: pointer;
     margin-right: -8px;
     transition: all 200ms;
@@ -418,7 +420,7 @@ function handleInput(e: Event) {
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) 0 0;
+    padding: var(--smrt-spacing-1) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     min-height: 16px;
   }
@@ -429,8 +431,8 @@ function handleInput(e: Event) {
 
   /* States */
   .invalid {
-    --field-active: var(--smrt-color-error);
-    --field-color: var(--smrt-color-error);
+    --smrt-text-input-field-active: var(--smrt-color-error);
+    --smrt-text-input-field-color: var(--smrt-color-error);
   }
 
   .listening {
@@ -441,4 +443,5 @@ function handleInput(e: Event) {
     opacity: 0.38;
     pointer-events: none;
   }
+}
 </style>

package/dist/components/forms/TextareaInput.svelte

@@ -228,7 +228,7 @@ function handleInput(e: Event) {
   class:focused={isFocused} 
   class:disabled
   class:has-value={!!value}
-  class:listening={isHolding}
+  class:listening={isHolding} data-smrt-component="TextareaInput"
 >
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
@@ -297,10 +297,12 @@ function handleInput(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-text-field {
-    --field-color: var(--smrt-color-on-surface-variant);
-    --field-bg: var(--smrt-color-surface-container-highest);
-    --field-active: var(--smrt-color-primary);
+    --smrt-textarea-input-field-color: var(--smrt-color-on-surface-variant);
+    --smrt-textarea-input-field-bg: var(--smrt-color-surface-container-highest);
+    --smrt-textarea-input-field-active: var(--smrt-color-primary);
     
     display: flex;
     flex-direction: column;
@@ -312,11 +314,11 @@ function handleInput(e: Event) {
     position: relative;
     display: flex;
     align-items: flex-start;
-    background-color: var(--smrt-color-surface, #fff);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
+    background-color: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
     min-height: 40px;
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -328,8 +330,8 @@ function handleInput(e: Event) {
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding-top: var(--smrt-spacing-2, 8px);
-    padding-bottom: var(--smrt-spacing-2, 8px);
+    padding-top: var(--smrt-spacing-2);
+    padding-bottom: var(--smrt-spacing-2);
   }
 
 
@@ -338,7 +340,7 @@ function handleInput(e: Event) {
     background: transparent;
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    letter-spacing: var(--smrt-typography-body-large-tracking);
     color: var(--smrt-color-on-surface);
     width: 100%;
     padding: 0;
@@ -354,8 +356,8 @@ function handleInput(e: Event) {
   .active-indicator { display: none; }
 
   .focused .container {
-    border-color: var(--field-active);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
+    border-color: var(--smrt-textarea-input-field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-textarea-input-field-active) 10%, transparent);
   }
 
   .mic-btn {
@@ -366,11 +368,11 @@ function handleInput(e: Event) {
     justify-content: center;
     border: none;
     background: transparent;
-    color: var(--field-color);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-textarea-input-field-color);
+    border-radius: var(--smrt-radius-full);
     cursor: pointer;
     margin-right: -8px;
-    margin-top: var(--smrt-spacing-2, 8px);
+    margin-top: var(--smrt-spacing-2);
     transition: all 200ms;
   }
 
@@ -380,7 +382,7 @@ function handleInput(e: Event) {
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) 0 0;
+    padding: var(--smrt-spacing-1) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     min-height: 16px;
   }
@@ -399,6 +401,7 @@ function handleInput(e: Event) {
   }
 
   .smrt-mode {
-    --field-active: var(--smrt-color-tertiary);
+    --smrt-textarea-input-field-active: var(--smrt-color-tertiary);
   }
+}
 </style>

package/dist/components/import-export/ImportExport.svelte

@@ -319,7 +319,7 @@ async function startExport() {
 }
 </script>
 
-<section class="smrt-import-export" aria-label={collectionLabel ? `${t(M['ui.importExport.label'])}: ${collectionLabel}` : t(M['ui.importExport.label'])}>
+<section class="smrt-import-export" aria-label={collectionLabel ? `${t(M['ui.importExport.label'])}: ${collectionLabel}` : t(M['ui.importExport.label'])} data-smrt-component="ImportExport">
   {#if canImport && canExport}
     <SegmentedControl
       label={t(M['ui.importExport.mode'])}
@@ -637,6 +637,8 @@ async function startExport() {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-import-export {
     display: flex;
     flex-direction: column;
@@ -675,4 +677,5 @@ async function startExport() {
     padding: 0;
     margin: 0;
   }
+}
 </style>

package/dist/components/module/ModulePanel.svelte

@@ -56,7 +56,7 @@ const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
     class={className}
   />
 {:else}
-  <div class="module-panel-placeholder {className}">
+  <div class="module-panel-placeholder {className}" data-smrt-component="ModulePanel">
     <div class="module-panel-placeholder__icon">
       <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
         <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
@@ -85,6 +85,8 @@ const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .module-panel-placeholder {
     display: flex;
     flex-direction: column;
@@ -92,15 +94,15 @@ const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
     justify-content: center;
     padding: 2rem;
     text-align: center;
-    background: var(--smrt-color-surface-container-low, #f8fafc);
-    border: 1px dashed var(--smrt-color-outline-variant, #e2e8f0);
-    border-radius: var(--smrt-radius-medium, 8px);
+    background: var(--smrt-color-surface-container-low);
+    border: 1px dashed var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
     min-height: 150px;
     gap: 0.75rem;
   }
 
   .module-panel-placeholder__icon {
-    color: var(--smrt-color-on-surface-variant, #94a3b8);
+    color: var(--smrt-color-on-surface-variant);
     opacity: 0.6;
   }
 
@@ -108,27 +110,28 @@ const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
     margin: 0;
     font-size: var(--smrt-typography-title-medium-size, 1rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #1e293b);
+    color: var(--smrt-color-on-surface);
   }
 
   .module-panel-placeholder__code {
     font-family: var(--smrt-font-family-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-2, 0.5rem);
-    background: var(--smrt-color-surface-container-high, #e2e8f0);
-    border-radius: var(--smrt-radius-small, 4px);
-    color: var(--smrt-color-on-surface-variant, #64748b);
+    background: var(--smrt-color-surface-container-high);
+    border-radius: var(--smrt-radius-small);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .module-panel-placeholder__hint {
     margin: 0;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface-variant, #64748b);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .module-panel-placeholder__meta {
     margin: 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #94a3b8);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/components/notifications/NotificationBell.svelte

@@ -106,7 +106,7 @@ $effect(() => {
 });
 </script>
 
-<div class="smrt-notification-bell">
+<div class="smrt-notification-bell" data-smrt-component="NotificationBell">
   <Button id={`${instanceId}-trigger`} aria-controls={`${instanceId}-panel`} variant="ghost" aria-haspopup="dialog" aria-expanded={open} onclick={() => (open = !open)}>
     {heading}{#if unread > 0}<span aria-label={t(M['ui.notification_bell.unread'], { count: unread })}> ({unread})</span>{/if}
   </Button>
@@ -126,6 +126,8 @@ $effect(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-notification-bell { position: relative; }
   .smrt-notification-bell__panel { position: absolute; z-index: 1; inset-block-start: 100%; inset-inline-end: 0; inline-size: min(24rem, 90vw); padding: var(--smrt-spacing-3); background: var(--smrt-color-surface); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-medium); }
   header { display: flex; justify-content: space-between; gap: var(--smrt-spacing-2); }
@@ -133,4 +135,5 @@ $effect(() => {
   li { padding-block: var(--smrt-spacing-2); border-block-end: 1px solid var(--smrt-color-outline-variant); }
   li[data-read='false'] { border-inline-start: 3px solid var(--smrt-color-primary); padding-inline-start: var(--smrt-spacing-2); }
   p { overflow-wrap: anywhere; }
+}
 </style>